*, ::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.17 | 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: Archivo, system-ui, -apple-system, Segoe UI, sans-serif;
  /* 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;
}

/* De hoogte van de vaste header. main.js meet de echte hoogte en overschrijft
     deze waarde; dit is de terugvalpositie, zodat de sectienavigatie ook zonder
     JavaScript op de juiste plek plakt. */

:root {
  --header-h: 64px;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 74px;
  }
}

html {
  scroll-behavior: smooth;
  /* Sticky header plus de sectienavigatie die eronder plakt (~55px) — een
       anker mag daar niet achter landen. */
  scroll-padding-top: calc(var(--header-h) + 5.5rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* `overflow-x: clip` en niet `hidden`: hidden maakt van de body een scrollbox,
     en dan plakken de sectienavigaties aan die box in plaats van aan het scherm —
     op een telefoon zie je ze dan helemaal niet meer plakken. Clip snijdt wél af
     zonder scrollbox. */

body {
  --tw-bg-opacity: 1;
  background-color: rgb(235 234 230 / var(--tw-bg-opacity, 1));
  font-family: Archivo, system-ui, -apple-system, Segoe UI, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(25 26 28 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

a {
  --tw-text-opacity: 1;
  color: rgb(25 26 28 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

a:hover {
  --tw-text-opacity: 1;
  color: rgb(46 99 96 / var(--tw-text-opacity, 1));
}

img,
  svg {
  display: block;
  max-width: 100%;
}

::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(38 41 44 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(247 246 244 / var(--tw-text-opacity, 1));
}

::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(38 41 44 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(247 246 244 / var(--tw-text-opacity, 1));
}

/* Visible keyboard focus, on light and on dark */

:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #2E6360;
}

.on-dark :focus-visible {
  outline-color: #83B5B1;
}

/* Layout ---------------------------------------------------------------- */

.container-site {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1320px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .container-site {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-site {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Vertical rhythm between the big page sections */

.section {
  padding-top: 4rem;
}

@media (min-width: 640px) {
  .section {
    padding-top: 5rem;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: 104px;
  }
}

/* -----------------------------------------------------------------------
     Een band met voegen erin.

     Gebruik `.section-seam` IN PLAATS VAN `.section` op een <section>. De band
     is een fractie donkerder dan de pagina en heeft een raster van haarlijnen
     met de steek van een grote tegel — 64 px op mobiel, 120 px op desktop, een
     knipoog naar 120×120. Twee zachte wolken eroverheen, zodat het als
     gestort beton leest en niet als ruitjespapier.

     De band heeft marge én padding, want de gewone secties hebben alleen
     padding-top. Zonder die marge zou de tint tegen de vorige tekst aan
     plakken. Zie ook de regel na deze blok voor de sectie die erop volgt.
     ----------------------------------------------------------------------- */

.section-seam {
  position: relative;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-color: rgba(25,26,28,0.13);
  --tw-bg-opacity: 1;
  background-color: rgb(228 226 220 / var(--tw-bg-opacity, 1));
  margin-top: 4rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-image:
      linear-gradient(90deg, rgba(25, 26, 28, 0.06) 0 1px, rgba(25, 26, 28, 0) 1px),
      linear-gradient(180deg, rgba(25, 26, 28, 0.06) 0 1px, rgba(25, 26, 28, 0) 1px);
  background-size: 64px 64px;
  background-position: center top;
}

/* De wolken. Los van het raster, zodat ze niet meetellen in background-size. */

.section-seam::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  background:
      radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 62%),
      radial-gradient(100% 80% at 86% 100%, rgba(25, 26, 28, 0.05), rgba(25, 26, 28, 0) 60%);
}

/* De inhoud moet bovenop de wolken liggen. */

.section-seam > .container-site {
  position: relative;
}

/* De sectie ná een band brengt zijn eigen ritme mee, maar korter: de band
     heeft er zelf al onderkant-padding onder staan. */

.section-seam + section {
  padding-top: 4rem;
}

@media (min-width: 640px) {
  .section-seam {
    margin-top: 5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-size: 96px 96px;
  }

  .section-seam + section {
    padding-top: 5rem;
  }
}

@media (min-width: 1024px) {
  .section-seam {
    margin-top: 5.5rem;
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
    background-size: 120px 120px;
  }

  .section-seam + section {
    padding-top: 5.5rem;
  }
}

/* Twee banden achter elkaar horen niet, maar mocht het toch gebeuren: geen
     dubbele lijn en geen dubbele marge. */

.section-seam + .section-seam {
  margin-top: 0px;
  border-top-width: 0px;
}

/* Een haarlijnraster binnen een band: de vakjes nemen de tint van de band
     over, anders staan er lichte blokken op een donkerder vlak. */

.section-seam .cell {
  --tw-bg-opacity: 1;
  background-color: rgb(228 226 220 / var(--tw-bg-opacity, 1));
}

/* -----------------------------------------------------------------------
     Het woordmerk

     Merkspec (brand/LEESMIJ.txt): Archivo 700, letter-spacing −5,5%, met een
     verticale voeg op de n/l-overgang en een horizontale laaglijn links en
     rechts. Voegkleur: groen, wit of de tekstkleur zelf.

     Waarom in CSS en niet de lockup-PNG: de lockups hebben een dichte
     achtergrond zonder transparantie, en geen van de vier matcht de
     paginakleur #EBEAE6. Bovendien schrijft de merkspec gedrag bij formaat
     voor — onder 90 px vervalt de laaglijn, onder 60 px ook de voeg — en dat
     kan een statische afbeelding niet. In de footer en het mobiele menu staat
     wél de echte lockup, want lockup-dark heeft precies onze charcoal.

     Regel uit de spec: geen tagline of ondertitel onder het woord.
     ----------------------------------------------------------------------- */

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.brandmark-word {
  position: relative;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
}

/* De voeg. Breedte 1 px met negatieve marges, zodat hij tussen de n en de l
     valt zonder de letterafstand te verstoren. */

.brandmark-joint {
  display: inline-block;
  flex: none;
  --tw-bg-opacity: 1;
  background-color: rgb(46 99 96 / var(--tw-bg-opacity, 1));
  vertical-align: middle;
  width: 1px;
  height: 1.6em;
  margin: 0 -0.5px;
  position: relative;
  top: -0.02em;
}

/* De laaglijnen. Vervallen onder 90 px logobreedte — bij onze maten blijven
     ze staan; op heel smalle schermen korten we ze in. */

.brandmark-rule {
  height: 1px;
  flex: none;
  background-color: rgb(46 99 96 / 0.45);
  width: 1.1em;
}

@media (min-width: 640px) {
  .brandmark-rule {
    width: 1.6em;
  }
}

/* Type ------------------------------------------------------------------ */

.eyebrow {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(46 99 96 / var(--tw-text-opacity, 1));
}

.eyebrow::before {
  content: '';
  height: 1px;
  width: 2rem;
  flex: none;
  --tw-bg-opacity: 1;
  background-color: rgb(46 99 96 / var(--tw-bg-opacity, 1));
}

/* Eyebrow without the leading rule, for section counters */

.eyebrow-plain {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(46 99 96 / var(--tw-text-opacity, 1));
}

.h1 {
  font-weight: 600;
  letter-spacing: -0.035em;
  font-size: clamp(2.5rem, 6.4vw, 4.875rem);
  line-height: 0.99;
}

.h2 {
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(1.875rem, 3.9vw, 2.875rem);
  line-height: 1.06;
}

.h3 {
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
}

/* The one italic serif flourish — used once per heading, never more */

.accent-italic {
  font-family: Newsreader, Georgia, serif;
  font-weight: 300;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(46 99 96 / var(--tw-text-opacity, 1));
  letter-spacing: -0.01em;
}

.lede {
  --tw-text-opacity: 1;
  color: rgb(74 76 79 / var(--tw-text-opacity, 1));
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.62;
  text-wrap: pretty;
}

/* Buttons and links ---------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 15px;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 640px) {
  .btn-primary {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(46 99 96 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(244 248 247 / var(--tw-text-opacity, 1));
}

.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(35 79 76 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(244 248 247 / var(--tw-text-opacity, 1));
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 15px;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 640px) {
  .btn-outline {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.btn-outline {
  border-width: 1px;
  border-color: rgba(25,26,28,0.30);
  --tw-text-opacity: 1;
  color: rgb(25 26 28 / var(--tw-text-opacity, 1));
}

.btn-outline:hover {
  --tw-border-opacity: 1;
  border-color: rgb(25 26 28 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / 0.5);
  --tw-text-opacity: 1;
  color: rgb(25 26 28 / var(--tw-text-opacity, 1));
}

.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 15px;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 640px) {
  .btn-ghost-dark {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.btn-ghost-dark {
  border-width: 1px;
  border-color: rgba(237,235,231,0.16);
  --tw-text-opacity: 1;
  color: rgb(247 246 244 / var(--tw-text-opacity, 1));
}

.btn-ghost-dark:hover {
  --tw-border-opacity: 1;
  border-color: rgb(247 246 244 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(247 246 244 / var(--tw-text-opacity, 1));
}

/* De streep hoort onder de tekst te eindigen, niet aan het eind van de kolom.
     `inline-block` regelt dat in gewone tekst, maar in een flex- of gridkolom
     wordt de link geblokt en rekt de streep mee over de volle breedte. `self-start`
     houdt hem bij zijn woorden; buiten flex en grid doet de regel niets. */

.link-rule {
  display: inline-block;
  align-self: flex-start;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(25 26 28 / var(--tw-border-opacity, 1));
  padding-bottom: 3px;
  font-size: 15px;
  font-weight: 500;
}

.link-rule:hover {
  --tw-border-opacity: 1;
  border-color: rgb(46 99 96 / var(--tw-border-opacity, 1));
}

.link-rule-dark {
  display: inline-block;
  align-self: flex-start;
  border-bottom-width: 1px;
  border-color: rgb(247 246 244 / 0.5);
  padding-bottom: 3px;
  font-size: 15px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(247 246 244 / var(--tw-text-opacity, 1));
}

.link-rule-dark:hover {
  --tw-border-opacity: 1;
  border-color: rgb(247 246 244 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(247 246 244 / var(--tw-text-opacity, 1));
}

/* Hairline grid — 1px gaps that read as drawn rules, not borders --------- */

.rule-grid {
  display: grid;
  gap: 1px;
  background-color: rgba(25,26,28,0.13);
}

/* Cards and panels ------------------------------------------------------ */

.panel {
  border-width: 1px;
  border-color: rgba(25,26,28,0.13);
  --tw-bg-opacity: 1;
  background-color: rgb(246 245 242 / var(--tw-bg-opacity, 1));
}

.cell {
  --tw-bg-opacity: 1;
  background-color: rgb(235 234 230 / var(--tw-bg-opacity, 1));
}

.cell-panel {
  --tw-bg-opacity: 1;
  background-color: rgb(246 245 242 / var(--tw-bg-opacity, 1));
}

/* -----------------------------------------------------------------------
     Foto's die je kunt bekijken

     `beton_img()` zet deze klasse op elke foto die geen hero of showroomblok
     is. De foto staat altijd in een kader met `overflow-hidden`, dus het
     inzoomen blijft netjes binnen de lijnen — de foto wordt groter, het kader
     niet.

     Alleen waar echt gehoverd kan worden: op een telefoon blijft een :hover na
     het tikken hangen, en dan zou de foto ingezoomd blijven staan.

     De vergrootglas-cursor en het toetsenbordgedrag komen van main.js, want
     zonder JavaScript valt er ook niets te vergroten.
     ----------------------------------------------------------------------- */

.media-zoom {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (hover: hover) {
  .media-zoom:hover {
    transform: scale(1.045);
  }
}

/* Wie geen beweging wil, krijgt de foto stil. */

@media (prefers-reduced-motion: reduce) {
  .media-zoom {
    transition-property: none;
  }

  .media-zoom:hover {
    transform: none;
  }
}

/* -----------------------------------------------------------------------
     Foto in een kaart die zelf één grote link is

     Anders dan `.media-zoom` hangt deze zoom aan de kaart en niet aan de foto,
     zodat de achtergrond, de kop en het beeld op hetzelfde moment reageren —
     waar je ook op de kaart staat. Zet `group` op de <a> eromheen.

     Zelfde tempo als de achtergrond van de kaart (200 ms via de basisregel voor
     links), zodat het één beweging is en geen twee.
     ----------------------------------------------------------------------- */

.card-zoom {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (hover: hover) {
  .group:hover .card-zoom {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-zoom {
    transition-property: none;
  }

  .group:hover .card-zoom {
    transform: none;
  }
}

/* Long-form copy — the format and info pages lean on this heavily ------- */

.copy {
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.68;
  --tw-text-opacity: 1;
  color: rgb(74 76 79 / var(--tw-text-opacity, 1));
}

.copy > * + * {
  margin-top: 1.25rem;
}

.copy h3 {
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  margin-top: 2.75rem;
  --tw-text-opacity: 1;
  color: rgb(25 26 28 / var(--tw-text-opacity, 1));
}

.copy h4 {
  margin-top: 2.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  --tw-text-opacity: 1;
  color: rgb(25 26 28 / var(--tw-text-opacity, 1));
}

.copy strong {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(25 26 28 / var(--tw-text-opacity, 1));
}

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

.copy ul {
  padding-left: 0px;
}

.copy ul > li {
  position: relative;
  padding-left: 1.5rem;
}

.copy ul > li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.7em;
  height: 0.375rem;
  width: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(46 99 96 / var(--tw-bg-opacity, 1));
}

.copy ol {
  list-style-type: decimal;
}

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

.copy ol {
  padding-left: 1.25rem;
}

.copy a:not(.btn):not(.link-rule) {
  border-bottom-width: 1px;
  border-color: rgba(25,26,28,0.30);
  padding-bottom: 1px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(25 26 28 / var(--tw-text-opacity, 1));
}

.copy a:not(.btn):not(.link-rule):hover {
  --tw-border-opacity: 1;
  border-color: rgb(46 99 96 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(46 99 96 / var(--tw-text-opacity, 1));
}

/* Data table — used for format specs and comparisons ------------------- */

.table-spec {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 15px;
}

.table-spec th {
  border-bottom-width: 1px;
  border-color: rgba(25,26,28,0.13);
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  padding-right: 1.5rem;
  vertical-align: top;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  --tw-text-opacity: 1;
  color: rgb(108 110 113 / var(--tw-text-opacity, 1));
}

.table-spec td {
  border-bottom-width: 1px;
  border-color: rgba(25,26,28,0.13);
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  padding-right: 1.5rem;
  vertical-align: top;
  --tw-text-opacity: 1;
  color: rgb(74 76 79 / var(--tw-text-opacity, 1));
}

.table-spec td:first-child {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(25 26 28 / var(--tw-text-opacity, 1));
}

/* -----------------------------------------------------------------------
     Dezelfde tabel op een telefoon

     Zes kolommen naast elkaar passen daar niet. Horizontaal schuiven is geen
     oplossing: dan verdwijnt de eerste kolom uit beeld en weet je niet meer
     waar een waarde bij hoort. Onder sm wordt elke rij daarom een blok — de
     eerste cel is de kop, de cellen eronder halen hun kolomnaam uit
     `data-label`. Vanaf sm is het weer een gewone tabel.
     ----------------------------------------------------------------------- */

@media (max-width: 639px) {
  .table-spec thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .table-spec tr {
    display: block;
    border-bottom-width: 1px;
    border-color: rgba(25,26,28,0.13);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .table-spec tr:last-child {
    border-bottom-width: 0px;
    padding-bottom: 0px;
  }

  .table-spec td {
    display: block;
    border-width: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
  }

  .table-spec td:first-child {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.03em;
    --tw-text-opacity: 1;
    color: rgb(25 26 28 / var(--tw-text-opacity, 1));
  }

  .table-spec td + td {
    margin-top: 0.75rem;
  }

  .table-spec td[data-label]::before {
    content: attr(data-label);
    margin-bottom: 0.25rem;
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    --tw-text-opacity: 1;
    color: rgb(108 110 113 / var(--tw-text-opacity, 1));
  }
}

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

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.bottom-5 {
  bottom: 1.25rem;
}

.bottom-6 {
  bottom: 1.5rem;
}

.bottom-\[26px\] {
  bottom: 26px;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.left-2 {
  left: 0.5rem;
}

.left-4 {
  left: 1rem;
}

.right-0 {
  right: 0px;
}

.right-2 {
  right: 0.5rem;
}

.right-5 {
  right: 1.25rem;
}

.right-\[84px\] {
  right: 84px;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-4 {
  top: 1rem;
}

.top-\[var\(--header-h\)\] {
  top: var(--header-h);
}

.top-full {
  top: 100%;
}

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

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

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

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

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

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

.col-span-2 {
  grid-column: span 2 / span 2;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

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

.\!mt-0 {
  margin-top: 0px !important;
}

.-mr-2 {
  margin-right: -0.5rem;
}

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

.mb-14 {
  margin-bottom: 3.5rem;
}

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

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

.mb-7 {
  margin-bottom: 1.75rem;
}

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

.mb-9 {
  margin-bottom: 2.25rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

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

.mt-1\.5 {
  margin-top: 0.375rem;
}

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

.mt-11 {
  margin-top: 2.75rem;
}

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

.mt-14 {
  margin-top: 3.5rem;
}

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

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

.mt-2\.5 {
  margin-top: 0.625rem;
}

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

.mt-3\.5 {
  margin-top: 0.875rem;
}

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

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

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

.mt-7 {
  margin-top: 1.75rem;
}

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

.mt-9 {
  margin-top: 2.25rem;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

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

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-\[2\/3\] {
  aspect-ratio: 2/3;
}

.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.h-11 {
  height: 2.75rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

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

.h-4 {
  height: 1rem;
}

.h-7 {
  height: 1.75rem;
}

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

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

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

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

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.max-h-full {
  max-height: 100%;
}

.min-h-0 {
  min-height: 0px;
}

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

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

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

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

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

.min-h-screen {
  min-height: 100vh;
}

.w-11 {
  width: 2.75rem;
}

.w-14 {
  width: 3.5rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

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

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-\[108px\] {
  width: 108px;
}

.w-\[15\%\] {
  width: 15%;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[19px\] {
  width: 19px;
}

.w-\[220px\] {
  width: 220px;
}

.w-\[22rem\] {
  width: 22rem;
}

.w-\[26px\] {
  width: 26px;
}

.w-\[92px\] {
  width: 92px;
}

.w-\[min\(400px\2c 88vw\)\] {
  width: min(400px,88vw);
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[110px\] {
  min-width: 110px;
}

.min-w-\[190px\] {
  min-width: 190px;
}

.min-w-\[300px\] {
  min-width: 300px;
}

.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}

.max-w-\[16ch\] {
  max-width: 16ch;
}

.max-w-\[18ch\] {
  max-width: 18ch;
}

.max-w-\[19ch\] {
  max-width: 19ch;
}

.max-w-\[20ch\] {
  max-width: 20ch;
}

.max-w-\[22ch\] {
  max-width: 22ch;
}

.max-w-\[24ch\] {
  max-width: 24ch;
}

.max-w-\[26ch\] {
  max-width: 26ch;
}

.max-w-\[34ch\] {
  max-width: 34ch;
}

.max-w-\[40ch\] {
  max-width: 40ch;
}

.max-w-\[42ch\] {
  max-width: 42ch;
}

.max-w-\[44ch\] {
  max-width: 44ch;
}

.max-w-\[52ch\] {
  max-width: 52ch;
}

.max-w-\[62ch\] {
  max-width: 62ch;
}

.max-w-\[68rem\] {
  max-width: 68rem;
}

.max-w-full {
  max-width: 100%;
}

.max-w-measure {
  max-width: 46ch;
}

.max-w-measure-sm {
  max-width: 38ch;
}

.max-w-none {
  max-width: none;
}

.max-w-prose {
  max-width: 70ch;
}

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

.flex-none {
  flex: none;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  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));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  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));
}

.translate-x-full {
  --tw-translate-x: 100%;
  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));
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 100s linear infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.resize {
  resize: both;
}

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

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

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

.grid-cols-\[6rem_1fr\] {
  grid-template-columns: 6rem 1fr;
}

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

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

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

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

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

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

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

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

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-9 {
  gap: 2.25rem;
}

.gap-px {
  gap: 1px;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-7 {
  -moz-column-gap: 1.75rem;
       column-gap: 1.75rem;
}

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

.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));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-line > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(25,26,28,0.13);
}

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

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.text-pretty {
  text-wrap: pretty;
}

.break-words {
  overflow-wrap: break-word;
}

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

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-4 {
  border-bottom-width: 4px;
}

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

.border-r {
  border-right-width: 1px;
}

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

.border-charcoal {
  --tw-border-opacity: 1;
  border-color: rgb(38 41 44 / var(--tw-border-opacity, 1));
}

.border-charcoal-meta\/50 {
  border-color: rgb(126 129 131 / 0.5);
}

.border-ink {
  --tw-border-opacity: 1;
  border-color: rgb(25 26 28 / var(--tw-border-opacity, 1));
}

.border-ink-muted {
  --tw-border-opacity: 1;
  border-color: rgb(108 110 113 / var(--tw-border-opacity, 1));
}

.border-line {
  border-color: rgba(25,26,28,0.13);
}

.border-line-dark {
  border-color: rgba(237,235,231,0.16);
}

.border-line-strong {
  border-color: rgba(25,26,28,0.30);
}

.border-moss {
  --tw-border-opacity: 1;
  border-color: rgb(46 99 96 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.bg-\[\#25D366\] {
  --tw-bg-opacity: 1;
  background-color: rgb(37 211 102 / var(--tw-bg-opacity, 1));
}

.bg-beton-antraciet {
  --tw-bg-opacity: 1;
  background-color: rgb(75 78 81 / var(--tw-bg-opacity, 1));
}

.bg-beton-licht {
  --tw-bg-opacity: 1;
  background-color: rgb(216 213 207 / var(--tw-bg-opacity, 1));
}

.bg-beton-medium {
  --tw-bg-opacity: 1;
  background-color: rgb(165 166 164 / var(--tw-bg-opacity, 1));
}

.bg-beton-warm {
  --tw-bg-opacity: 1;
  background-color: rgb(195 183 167 / var(--tw-bg-opacity, 1));
}

.bg-charcoal {
  --tw-bg-opacity: 1;
  background-color: rgb(38 41 44 / var(--tw-bg-opacity, 1));
}

.bg-charcoal\/40 {
  background-color: rgb(38 41 44 / 0.4);
}

.bg-current {
  background-color: currentColor;
}

.bg-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(25 26 28 / var(--tw-bg-opacity, 1));
}

.bg-ink-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(108 110 113 / var(--tw-bg-opacity, 1));
}

.bg-ink-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(74 76 79 / var(--tw-bg-opacity, 1));
}

.bg-ink\/95 {
  background-color: rgb(25 26 28 / 0.95);
}

.bg-line {
  background-color: rgba(25,26,28,0.13);
}

.bg-moss {
  --tw-bg-opacity: 1;
  background-color: rgb(46 99 96 / var(--tw-bg-opacity, 1));
}

.bg-moss-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(35 79 76 / var(--tw-bg-opacity, 1));
}

.bg-moss-light {
  --tw-bg-opacity: 1;
  background-color: rgb(131 181 177 / var(--tw-bg-opacity, 1));
}

.bg-shell {
  --tw-bg-opacity: 1;
  background-color: rgb(235 234 230 / var(--tw-bg-opacity, 1));
}

.bg-shell-panel {
  --tw-bg-opacity: 1;
  background-color: rgb(246 245 242 / var(--tw-bg-opacity, 1));
}

.bg-shell-seam {
  --tw-bg-opacity: 1;
  background-color: rgb(228 226 220 / var(--tw-bg-opacity, 1));
}

.bg-shell\/\[0\.92\] {
  background-color: rgb(235 234 230 / 0.92);
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-2 {
  padding: 0.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

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

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

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

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

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

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

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

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

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

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

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-9 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.py-\[18px\] {
  padding-top: 18px;
  padding-bottom: 18px;
}

.pb-0\.5 {
  padding-bottom: 0.125rem;
}

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

.pb-14 {
  padding-bottom: 3.5rem;
}

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

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

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

.pb-7 {
  padding-bottom: 1.75rem;
}

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

.pb-px {
  padding-bottom: 1px;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-14 {
  padding-right: 3.5rem;
}

.pr-5 {
  padding-right: 1.25rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-14 {
  padding-top: 3.5rem;
}

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

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

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

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

.pt-9 {
  padding-top: 2.25rem;
}

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

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

.align-bottom {
  vertical-align: bottom;
}

.font-serif {
  font-family: Newsreader, Georgia, serif;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[19px\] {
  font-size: 19px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[21px\] {
  font-size: 21px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[30px\] {
  font-size: 30px;
}

.text-\[32px\] {
  font-size: 32px;
}

.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-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.leading-none {
  line-height: 1;
}

.leading-normal {
  line-height: 1.5;
}

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

.leading-snug {
  line-height: 1.375;
}

.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.tracking-display {
  letter-spacing: -0.03em;
}

.tracking-eyebrow {
  letter-spacing: 0.18em;
}

.tracking-label {
  letter-spacing: 0.14em;
}

.tracking-tightest {
  letter-spacing: -0.035em;
}

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

.text-\[\#1877F2\] {
  --tw-text-opacity: 1;
  color: rgb(24 119 242 / var(--tw-text-opacity, 1));
}

.text-\[\#25D366\] {
  --tw-text-opacity: 1;
  color: rgb(37 211 102 / var(--tw-text-opacity, 1));
}

.text-\[\#DD2A7B\] {
  --tw-text-opacity: 1;
  color: rgb(221 42 123 / var(--tw-text-opacity, 1));
}

.text-bone {
  --tw-text-opacity: 1;
  color: rgb(247 246 244 / var(--tw-text-opacity, 1));
}

.text-charcoal-meta {
  --tw-text-opacity: 1;
  color: rgb(126 129 131 / var(--tw-text-opacity, 1));
}

.text-charcoal-muted {
  --tw-text-opacity: 1;
  color: rgb(155 158 159 / var(--tw-text-opacity, 1));
}

.text-charcoal-soft {
  --tw-text-opacity: 1;
  color: rgb(191 193 192 / var(--tw-text-opacity, 1));
}

.text-charcoal-top {
  --tw-text-opacity: 1;
  color: rgb(201 198 192 / var(--tw-text-opacity, 1));
}

.text-charcoal-top\/40 {
  color: rgb(201 198 192 / 0.4);
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(25 26 28 / var(--tw-text-opacity, 1));
}

.text-ink-muted {
  --tw-text-opacity: 1;
  color: rgb(108 110 113 / var(--tw-text-opacity, 1));
}

.text-ink-muted\/60 {
  color: rgb(108 110 113 / 0.6);
}

.text-ink-soft {
  --tw-text-opacity: 1;
  color: rgb(74 76 79 / var(--tw-text-opacity, 1));
}

.text-moss {
  --tw-text-opacity: 1;
  color: rgb(46 99 96 / var(--tw-text-opacity, 1));
}

.text-moss-light {
  --tw-text-opacity: 1;
  color: rgb(131 181 177 / var(--tw-text-opacity, 1));
}

.text-moss-tint {
  --tw-text-opacity: 1;
  color: rgb(244 248 247 / var(--tw-text-opacity, 1));
}

.text-moss-tint\/55 {
  color: rgb(244 248 247 / 0.55);
}

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

.opacity-0 {
  opacity: 0;
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-line {
  --tw-ring-color: rgba(25,26,28,0.13);
}

.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);
}

.backdrop-blur-\[14px\] {
  --tw-backdrop-blur: blur(14px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

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

/* Screen-reader-only, with a focusable variant for the skip link */

.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-pretty {
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Base — the shell, the type, the sharp-cornered discipline of the design.
   Everything else is a Tailwind utility in the markup.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Components — the small shared vocabulary of this design system.
   Kept deliberately short: these are the patterns that repeat on every page.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Utilities
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   AOS

   aos.css zet elk [data-aos]-element op opacity 0 en wacht op JavaScript. Komt
   dat niet, dan is de halve site onzichtbaar. Het scriptje in de <head> zet
   daarom .js-aos op <html>; zonder die klasse staat alles gewoon aan.
--------------------------------------------------------------------------- */

html:not(.js-aos) [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* fade-left en fade-right zetten het element 100px naast zijn plek. Naast de
   tweekolomsopbouw van de desktop klopt dat; onder lg staan die kolommen onder
   elkaar en duwt de zijwaartse start het blok voorbij de schermrand — een
   horizontale scrollbalk op de telefoon. Onder lg dus dezelfde verticale entree
   als de rest. Deze regels staan ná aos.css, gelijke specificiteit, dus winnen. */

@media (max-width: 1023px) {
  [data-aos='fade-left'],
  [data-aos='fade-right'] {
    transform: translate3d(0, 40px, 0);
  }

  [data-aos='fade-up-left'],
  [data-aos='fade-up-right'] {
    transform: translate3d(0, 40px, 0);
  }

  [data-aos='fade-down-left'],
  [data-aos='fade-down-right'] {
    transform: translate3d(0, -40px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Hero — de vloer legt zich achter de tekst.

   Alleen de voegen worden getekend, geen dichte tegels: een raster van
   haarlijnen dat rij na rij dichtloopt, met per tegel een spoortje verschil in
   glans. Zo blijft de tekst erboven altijd goed leesbaar en kan er nooit een
   donkere flits ontstaan, want de laag begint volledig doorzichtig.

   De tegels worden door public/js/main.js gemaakt, ná de entree. Komt dat
   script niet, dan is er simpelweg geen raster en mist er niets.
--------------------------------------------------------------------------- */

.hero-floor {
  --hero-tile: 96px;
  --hero-row: 90ms;
  --hero-col: 26ms;
  pointer-events: none;
  position: absolute;
  inset: 0px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), 1fr);
  grid-template-rows: repeat(var(--rows, 4), 1fr);
}

@media (min-width: 640px) {
  .hero-floor {
    --hero-tile: 128px;
  }
}

@media (min-width: 1024px) {
  .hero-floor {
    --hero-tile: 152px;
  }
}

.hero-floor-tile {
  opacity: 0;
  background-color: var(--t, transparent);
  /* De voeg: rechts en onder een haarlijn, net als bij een echte tegel. */
  box-shadow: inset -1px -1px 0 0 rgba(25, 26, 28, 0.07);
  animation: hero-tile 520ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--y, 0) * var(--hero-row) + var(--x, 0) * var(--hero-col));
}

@keyframes hero-tile {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Wie geen beweging wil, krijgt de vloer meteen af. */

@media (prefers-reduced-motion: reduce) {
  .hero-floor-tile {
    animation: none;
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
   Uitklappers — het +/- teken

   main.js klapt de panelen open en dicht met een hoogte-animatie. Tijdens het
   dichtklappen staat het paneel nog op `open`, dus zou het min-teken blijven
   staan tot het einde. Deze regel zet de streep meteen terug.
--------------------------------------------------------------------------- */

details[data-closing] .accordion-plus {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Entree — de vloer wordt gelegd, daarna gaat hij open langs de voeg.

   Eén keer per browsersessie. De tegels worden door het scriptje onder de
   markup in partials/_header.php gemaakt: het rekent uit hoeveel tegels er op
   dit scherm passen en zet per tegel --x, --y en een tint. De CSS hieronder
   maakt daar de vertraging van, zodat de vloer rij na rij dichtloopt.

   Het aantal rijen is altijd even. Daardoor valt er precies op de helft van
   het scherm een voeg — en dat is de voeg waarlangs de vloer straks opengaat.

   Tijdlijn op een gemiddeld scherm (samen ongeveer 1,3 s):
      0 ms   de specie ligt er, de eerste tegels gaan erin
    140 ms   het woordmerk komt op terwijl de vloer verder dichtloopt
    600 ms   de laatste tegel ligt
    740 ms   het woordmerk gaat weg
    880 ms   de vloer splijt langs de middelste voeg
   1300 ms   weg, en het scriptje haalt hem uit de DOM

   Robuustheid: staat data-intro niet op <html>, dan bestaat dit niet. Dus geen
   JavaScript, geen entree. Blijft het scriptje halverwege steken, dan schuiven
   de helften alsnog weg — dat loopt op CSS met fill-mode forwards. En klikken,
   scrollen of een toets slaat hem meteen over.
--------------------------------------------------------------------------- */

html:not([data-intro='on']) .intro {
  display: none;
}

.intro {
  /* Streefmaat van één tegel. Grootformaat: liever een paar grote dan veel kleine. */
  --tile: 108px;
  --lay-tile: 240ms;
  /* hoe lang één tegel onderweg is */
  --lay-col: 14ms;
  /* verschuiving per tegel naar rechts */
  --lay-row: 52ms;
  /* verschuiving per rij naar beneden */
  --intro-out-at: 740ms;
  --intro-open-at: 880ms;
  --intro-open: 420ms;
  --intro-lift: 60px;
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  /* Nooit een val: klikken en scrollen gaan er dwars door heen. */
  pointer-events: none;
  animation: intro-off 1ms linear forwards;
  animation-delay: calc(var(--intro-open-at) + var(--intro-open));
}

@media (min-width: 640px) {
  .intro {
    --tile: 150px;
  }
}

@media (min-width: 1024px) {
  .intro {
    --tile: 190px;
  }
}

/* De twee vloerhelften. De achtergrond is de specie: die zie je in de voegen,
   en aan het begin zie je hem overal, want er ligt nog niets. */

.intro-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  grid-template-rows: repeat(var(--rows, 3), 1fr);
  gap: 1px;
  background-color: #D6D3CC;
  animation-duration: var(--intro-open);
  animation-delay: var(--intro-open-at);
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-fill-mode: forwards;
  will-change: transform;
}

/* De voeg die straks opengaat, in de accentkleur. */

.intro-half-top {
  top: 0;
  border-bottom: 1px solid rgba(46, 99, 96, 0.75);
  animation-name: intro-open-up;
}

.intro-half-bottom {
  bottom: 0;
  animation-name: intro-open-down;
}

/* Eén tegel. --x, --y en --t komen van het scriptje. */

.intro-tile {
  background-color: var(--t, #E4E2DC);
  opacity: 0;
  animation: intro-tile var(--lay-tile) cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--y, 0) * var(--lay-row) + var(--x, 0) * var(--lay-col));
}

/* Een tegel komt van boven op zijn plek, niet uit het niets. */

@keyframes intro-tile {
  from {
    opacity: 0;
    transform: translateY(-9px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.intro-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translate(-50%, calc(-50% - var(--intro-lift)));
  animation:
    intro-mark-in 340ms cubic-bezier(0.2, 0.65, 0.3, 1) both,
    intro-mark-out 180ms ease-in forwards;
  animation-delay: 140ms, var(--intro-out-at);
}

/* Een zachte waas, zodat het woordmerk niet met de voegen vecht. */

.intro-mark::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: -110px -150px;
  background: radial-gradient(
    closest-side circle,
    rgba(232, 230, 224, 0.72) 0%,
    rgba(232, 230, 224, 0.48) 42%,
    rgba(232, 230, 224, 0) 100%
  );
}

.intro-wordmark {
  position: relative;
  /* Merkspec: Archivo 700, letter-spacing -5,5% */
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
  color: #191A1C;
  font-size: clamp(1.5rem, 5.4vw, 2.25rem);
}

/* Dezelfde voeg als in de header, op de n/l-overgang. */

.intro-joint {
  display: inline-block;
  width: 1px;
  height: 1.6em;
  margin: 0 -0.5px;
  position: relative;
  top: -0.02em;
  vertical-align: middle;
  background-color: #2E6360;
}

.intro-kicker {
  position: relative;
  margin-top: 0.7rem;
  font-size: 10px;
  text-transform: uppercase;
  color: #6C6E71;
  animation: intro-kicker 340ms 240ms cubic-bezier(0.2, 0.65, 0.3, 1) both;
}

@keyframes intro-mark-in {
  from {
    opacity: 0;
  }

  to   {
    opacity: 1;
  }
}

@keyframes intro-mark-out {
  to {
    opacity: 0;
  }
}

/* De voeg wordt breder terwijl de letters opkomen. */

@keyframes intro-kicker {
  from {
    opacity: 0;
    letter-spacing: 0.16em;
  }

  to   {
    opacity: 1;
    letter-spacing: 0.34em;
  }
}

@keyframes intro-open-up {
  to {
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes intro-open-down {
  to {
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes intro-off {
  to {
    visibility: hidden;
  }
}

/* Wie geen beweging wil, krijgt hem niet. Het scriptje in <head> stopt hier
   ook al mee — dit is de tweede rem. */

@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none !important;
  }
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:border-r-0:last-child {
  border-right-width: 0px;
}

.hover\:border-bone:hover {
  --tw-border-opacity: 1;
  border-color: rgb(247 246 244 / var(--tw-border-opacity, 1));
}

.hover\:border-moss:hover {
  --tw-border-opacity: 1;
  border-color: rgb(46 99 96 / var(--tw-border-opacity, 1));
}

.hover\:border-moss-light:hover {
  --tw-border-opacity: 1;
  border-color: rgb(131 181 177 / var(--tw-border-opacity, 1));
}

.hover\:bg-\[\#1877F2\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(24 119 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#1DA851\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 168 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#25D366\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 211 102 / var(--tw-bg-opacity, 1));
}

.hover\:bg-shell:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(235 234 230 / var(--tw-bg-opacity, 1));
}

.hover\:bg-shell-panel:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 245 242 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-gradient-to-br:hover {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.hover\:from-\[\#F58529\]:hover {
  --tw-gradient-from: #F58529 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 133 41 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:via-\[\#DD2A7B\]:hover {
  --tw-gradient-to: rgb(221 42 123 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #DD2A7B var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.hover\:to-\[\#515BD4\]:hover {
  --tw-gradient-to: #515BD4 var(--tw-gradient-to-position);
}

.hover\:text-bone:hover {
  --tw-text-opacity: 1;
  color: rgb(247 246 244 / var(--tw-text-opacity, 1));
}

.hover\:text-moss:hover {
  --tw-text-opacity: 1;
  color: rgb(46 99 96 / var(--tw-text-opacity, 1));
}

.hover\:text-moss-light:hover {
  --tw-text-opacity: 1;
  color: rgb(131 181 177 / var(--tw-text-opacity, 1));
}

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

.group[open] .group-open\:opacity-0 {
  opacity: 0;
}

.group:focus-within .group-focus-within\:visible {
  visibility: visible;
}

.group:focus-within .group-focus-within\:rotate-180 {
  --tw-rotate: 180deg;
  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));
}

.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  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));
}

.group:hover .group-hover\:rotate-180 {
  --tw-rotate: 180deg;
  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));
}

.group:hover .group-hover\:border-moss {
  --tw-border-opacity: 1;
  border-color: rgb(46 99 96 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

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

  .motion-reduce\:transition-none {
    transition-property: none;
  }
}

@media (min-width: 640px) {
  .sm\:-left-8 {
    left: -2rem;
  }

  .sm\:bottom-10 {
    bottom: 2.5rem;
  }

  .sm\:bottom-7 {
    bottom: 1.75rem;
  }

  .sm\:bottom-auto {
    bottom: auto;
  }

  .sm\:left-4 {
    left: 1rem;
  }

  .sm\:right-0 {
    right: 0px;
  }

  .sm\:right-4 {
    right: 1rem;
  }

  .sm\:right-7 {
    right: 1.75rem;
  }

  .sm\:top-1\/2 {
    top: 50%;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

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

  .sm\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:mt-14 {
    margin-top: 3.5rem;
  }

  .sm\:mt-20 {
    margin-top: 5rem;
  }

  .sm\:mt-\[7px\] {
    margin-top: 7px;
  }

  .sm\:block {
    display: block;
  }

  .sm\:aspect-\[16\/9\] {
    aspect-ratio: 16/9;
  }

  .sm\:aspect-\[3\/2\] {
    aspect-ratio: 3/2;
  }

  .sm\:h-12 {
    height: 3rem;
  }

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

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-\[52px\] {
    width: 52px;
  }

  .sm\:min-w-\[520px\] {
    min-width: 520px;
  }

  .sm\:min-w-\[560px\] {
    min-width: 560px;
  }

  .sm\:min-w-\[860px\] {
    min-width: 860px;
  }

  .sm\:-translate-y-1\/2 {
    --tw-translate-y: -50%;
    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));
  }

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

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

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

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

  .sm\:flex-row {
    flex-direction: row;
  }

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

  .sm\:items-end {
    align-items: flex-end;
  }

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

  .sm\:gap-10 {
    gap: 2.5rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:gap-9 {
    gap: 2.25rem;
  }

  .sm\:gap-\[18px\] {
    gap: 18px;
  }

  .sm\:border-y {
    border-top-width: 1px;
    border-bottom-width: 1px;
  }

  .sm\:border-b {
    border-bottom-width: 1px;
  }

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

  .sm\:border-r-0 {
    border-right-width: 0px;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

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

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

  .sm\:px-\[26px\] {
    padding-left: 26px;
    padding-right: 26px;
  }

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

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:py-9 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .sm\:py-\[22px\] {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .sm\:pb-20 {
    padding-bottom: 5rem;
  }

  .sm\:pl-12 {
    padding-left: 3rem;
  }

  .sm\:pt-16 {
    padding-top: 4rem;
  }

  .sm\:text-\[22px\] {
    font-size: 22px;
  }

  .sm\:text-\[26px\] {
    font-size: 26px;
  }

  .sm\:text-\[32px\] {
    font-size: 32px;
  }

  .sm\:text-\[34px\] {
    font-size: 34px;
  }

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

  .sm\:last\:border-b-0:last-child {
    border-bottom-width: 0px;
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }

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

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

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

  .md\:border-t-0 {
    border-top-width: 0px;
  }
}

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-\[120px\] {
    top: 120px;
  }

  .lg\:top-\[160px\] {
    top: 160px;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:row-span-2 {
    grid-row: span 2 / span 2;
  }

  .lg\:-mx-8 {
    margin-left: -2rem;
    margin-right: -2rem;
  }

  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }

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

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

  .lg\:mt-14 {
    margin-top: 3.5rem;
  }

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

  .lg\:mt-20 {
    margin-top: 5rem;
  }

  .lg\:mt-24 {
    margin-top: 6rem;
  }

  .lg\:mt-\[104px\] {
    margin-top: 104px;
  }

  .lg\:mt-\[88px\] {
    margin-top: 88px;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:table {
    display: table;
  }

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:table-header-group {
    display: table-header-group;
  }

  .lg\:table-row-group {
    display: table-row-group;
  }

  .lg\:table-row {
    display: table-row;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-\[4\/3\] {
    aspect-ratio: 4/3;
  }

  .lg\:aspect-auto {
    aspect-ratio: auto;
  }

  .lg\:aspect-square {
    aspect-ratio: 1 / 1;
  }

  .lg\:min-h-\[158px\] {
    min-height: 158px;
  }

  .lg\:min-h-\[160px\] {
    min-height: 160px;
  }

  .lg\:min-h-\[168px\] {
    min-height: 168px;
  }

  .lg\:min-h-\[520px\] {
    min-height: 520px;
  }

  .lg\:table-fixed {
    table-layout: fixed;
  }

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

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

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

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

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

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

  .lg\:grid-cols-\[1\.4fr_1fr_1fr_1fr\] {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

  .lg\:grid-cols-\[minmax\(0\2c 0\.32fr\)_minmax\(0\2c 0\.68fr\)\] {
    grid-template-columns: minmax(0,0.32fr) minmax(0,0.68fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 0\.85fr\)_minmax\(0\2c 1\.15fr\)\] {
    grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 0\.9fr\)_minmax\(0\2c 1\.1fr\)\] {
    grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1\.05fr\)_minmax\(0\2c 0\.95fr\)\] {
    grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 0\.62fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,0.62fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 0\.78fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,0.78fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 0\.85fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,0.85fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 0\.8fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,0.8fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }

  .lg\:grid-rows-\[repeat\(3\2c 232px\)\] {
    grid-template-rows: repeat(3,232px);
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-14 {
    gap: 3.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:gap-7 {
    gap: 1.75rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:gap-9 {
    gap: 2.25rem;
  }

  .lg\:gap-\[72px\] {
    gap: 72px;
  }

  .lg\:self-start {
    align-self: flex-start;
  }

  .lg\:border-b-0 {
    border-bottom-width: 0px;
  }

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

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:border-line {
    border-color: rgba(25,26,28,0.13);
  }

  .lg\:bg-shell-panel {
    --tw-bg-opacity: 1;
    background-color: rgb(246 245 242 / var(--tw-bg-opacity, 1));
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

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

  .lg\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

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

  .lg\:px-9 {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }

  .lg\:px-\[26px\] {
    padding-left: 26px;
    padding-right: 26px;
  }

  .lg\:px-\[34px\] {
    padding-left: 34px;
    padding-right: 34px;
  }

  .lg\:px-\[44px\] {
    padding-left: 44px;
    padding-right: 44px;
  }

  .lg\:px-\[52px\] {
    padding-left: 52px;
    padding-right: 52px;
  }

  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .lg\:py-11 {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .lg\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .lg\:py-9 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .lg\:py-\[30px\] {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .lg\:py-\[48px\] {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .lg\:py-\[52px\] {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .lg\:py-\[56px\] {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .lg\:py-\[60px\] {
    padding-top: 60px;
    padding-bottom: 60px;
  }

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

  .lg\:pb-9 {
    padding-bottom: 2.25rem;
  }

  .lg\:pb-\[120px\] {
    padding-bottom: 120px;
  }

  .lg\:pb-\[34px\] {
    padding-bottom: 34px;
  }

  .lg\:pr-5 {
    padding-right: 1.25rem;
  }

  .lg\:pt-10 {
    padding-top: 2.5rem;
  }

  .lg\:pt-14 {
    padding-top: 3.5rem;
  }

  .lg\:pt-16 {
    padding-top: 4rem;
  }

  .lg\:pt-\[30px\] {
    padding-top: 30px;
  }

  .lg\:pt-\[72px\] {
    padding-top: 72px;
  }

  .lg\:pt-\[88px\] {
    padding-top: 88px;
  }

  .lg\:align-top {
    vertical-align: top;
  }

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

  .lg\:text-\[20px\] {
    font-size: 20px;
  }

  .lg\:text-\[21px\] {
    font-size: 21px;
  }

  .lg\:text-\[23px\] {
    font-size: 23px;
  }

  .lg\:text-\[32px\] {
    font-size: 32px;
  }

  .lg\:text-\[34px\] {
    font-size: 34px;
  }

  .lg\:text-\[36px\] {
    font-size: 36px;
  }

  .lg\:text-\[40px\] {
    font-size: 40px;
  }

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

@media (min-width: 1280px) {
  .xl\:gap-7 {
    gap: 1.75rem;
  }
}