/* Bundled from css/app.css with its layers kept: the site's own stylesheet is
   left out (exolog-site-css: none), so nothing unlayered competes. */

/* --- import: editable areas covering several elements --- */
.pb-group { display: flex; flex-direction: column; gap: inherit; align-items: inherit; min-width: 0; }

/* --- import: a call to action's field draws no box --- */
:where(div.rich-text:has(> a:only-child:is(.button, .text-link, .nav-link, .underlined-link))) { display: contents; }
:where(.site-header, .site-menu, .site-footer, [data-block]) .nav-link { display: revert; padding: revert; }

@layer reset, tokens, global, composition, utility, block, exception;

/* --- global/reset.css --- */
@layer reset {
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4,
p,
figure,
blockquote {
  margin: 0;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* width/height attributes reserve space; CSS width decides the size */
img,
video {
  height: auto;
}

input,
button {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

}

/* --- global/tokens.css --- */
@layer tokens {
/*
  Project tokens — Exolog. Values recorded in VISUAL-LANGUAGE.md.
  Breakpoints used in media queries (custom properties can't be used there):
    40rem  phone → small tablet
    60rem  tablet → desktop layouts
    72rem  header switches to the hamburger menu
*/
:root {
  /* Colour */
  --color-ink: #0F2236;
  --color-ink-muted: #4A5868;
  --color-surface: #FFFFFF;
  --color-mist: #F2F4F5;
  --color-tint: #EAF5F6;
  --color-line: #DDE1E4;
  --color-teal: #01919C;
  --color-teal-text: #00707A;     /* teal for small text on light fields (contrast) */
  --color-teal-bright: #01C1D1;   /* logo teal; accents on dark fields only */
  --color-teal-deep: #01656D;
  --color-signal: #E35F25;        /* logo orange, darkened so white bold 19px text passes AA large text */
  --color-signal-hover: #D4531B;
  --color-on-dark: rgb(255 255 255 / 0.72);

  --gradient-foundation: linear-gradient(to bottom right, var(--color-ink) 0%, #183D5C 75%);
  --gradient-closing: linear-gradient(to bottom right, var(--color-teal-deep) 0%, #0B7B83 75%);

  /* Type */
  --font-base: "Schibsted Grotesk", "Schibsted Grotesk Variable", system-ui, sans-serif;
  --step-hero: clamp(2.5rem, 1.3rem + 4.1vw, 5rem);
  --step-display: clamp(2.25rem, 1.4rem + 3.6vw, 4.75rem);
  --step-2: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-heading: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --step-subheading: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);

  /* Layout */
  --gutter: clamp(1rem, 4vw, 3rem);
  --content: 78rem;
  --grid-gap: clamp(1rem, 2vw, 2rem);
  --section-space: clamp(6rem, 10vw, 9rem);

  /* Shape & depth */
  --radius-control: 4px;
  --radius-shot: 6px;
  --radius-panel: 8px;
  --radius-tile: 12px;
  --radius-media: 14px;
  --shadow: 0 1px 2px rgb(15 34 54 / 0.06), 0 18px 40px -18px rgb(15 34 54 / 0.28);
  --shadow-float: 0 10px 30px -8px rgb(15 34 54 / 0.45);

  --ease: 0.2s ease;
}

}

/* --- global/global.css --- */
@layer global {
/* Anchor targets land below the sticky header */
html {
  scroll-padding-top: 6rem;
}

body {
  background: var(--color-surface);
  color: var(--color-ink);
  font: 400 1.0625rem/1.6 var(--font-base);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 3px;
}

/* Section headings share one scale; blocks only adjust placement */
.heading {
  font-size: var(--step-2);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 700;
}

}

/* --- compositions/shell.css --- */
@layer composition {
/*
  Shell: centred content column with named lines so children can break out.
  [full | content | full]
*/
.shell {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(100% - 2 * var(--gutter), var(--content)) [content-end]
    minmax(var(--gutter), 1fr) [full-end];
}

.shell > * {
  grid-column: content;
  min-width: 0;
}

.shell > .bleed {
  grid-column: full;
}

}

/* --- compositions/grid.css --- */
@layer composition {
/* 12-column grid inside the content column */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.grid > * {
  min-width: 0;
}

}

/* --- compositions/flow.css --- */
@layer composition {
/* Vertical rhythm between siblings; blocks tune it with --flow-space */
.flow > * + * {
  margin-top: var(--flow-space, 1.25rem);
}

}

/* --- compositions/cluster.css --- */
@layer composition {
/* Horizontal group that wraps — button rows, link rows */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-space, 1.75rem);
}

}

/* --- compositions/rail.css --- */
@layer composition {
/*
  Rail: horizontal scroller that starts on the content edge and runs off the right
  of the viewport. Start padding = distance from viewport edge to the content column.
  Place it on the shell's full track (.bleed).
*/
.rail {
  --rail-start: max(var(--gutter), (100% - var(--content)) / 2);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-item, clamp(19rem, 36vw, 32rem));
  gap: clamp(1rem, 2vw, 1.75rem);
  padding: 0 var(--gutter) 1rem var(--rail-start);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--rail-start);
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail > * {
  scroll-snap-align: start;
}

@media (max-width: 60rem) {
  .rail {
    --rail-item: 82%;
  }
}

}

/* --- utilities/visually-hidden.css --- */
@layer utility {
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

}

/* --- utilities/text.css --- */
@layer utility {
/* Key words in a headline */
.mark {
  color: var(--color-teal);
}

/* Small label above a heading */
.eyebrow {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-teal-text);
}

/* Larger supporting paragraph under a heading */
.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--color-ink-muted);
  max-width: 34ch;
}

/* Key words in a headline, as the editor stores them: a <mark>, never a span with a class */
mark {
  background: none;
  color: var(--color-teal);
}

}

/* --- utilities/reveal.css --- */
@layer exception {
  /*
    Reveal: children of [data-reveal-rows] slide in from the right, row by row, when the
    group scrolls into view (js/main.js sets data-reveal and each item's --reveal-delay).
    Only armed by JS and never under reduced motion, so content is always visible without it.
    Uses transform, which composes with any offset set through the translate property.
    Lives in the exception layer so it overrides each block's own transition list.
  */
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal-rows][data-reveal] > * {
      opacity: 0;
      transform: translateX(min(12vw, 160px));
      transition:
        opacity 0.6s ease var(--reveal-delay, 0s),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s),
        border-color var(--ease),
        background-color var(--ease);
    }

    [data-reveal-rows][data-reveal="in"] > * {
      opacity: 1;
      transform: none;
    }
  }
}

/* --- components/button.css --- */
@layer block {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding: 0 1.75rem;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--color-teal);
    color: #fff;
    font-size: 1.1875rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ease);
  }

  .button:hover {
    background: var(--color-teal-text);
  }
}

@layer exception {
  /* Text link with a heavy underline — secondary action */
  .button[data-variant="quiet"] {
    min-height: auto;
    padding: 0 0 3px;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
  }

  .button[data-variant="quiet"]:hover {
    background: none;
    color: var(--color-teal-text);
  }

  /* Orange: the one conversion moment per page (closing CTA) */
  .button[data-variant="signal"] {
    background: var(--color-signal);
  }

  .button[data-variant="signal"]:hover {
    background: var(--color-signal-hover);
  }
}

/* --- components/site-header.css --- */
@layer block {
  /* Header shares the hero's pale-teal field on the left (see hero.css) */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    padding-block: 1.5rem;
    background: linear-gradient(to right, var(--color-tint) var(--field, 72%), transparent var(--field, 72%));
    transition:
      translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
      padding-block 0.25s ease,
      box-shadow 0.25s ease,
      background-color 0.25s ease;
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .site-header__logo {
    flex-shrink: 0;
    position: relative;
    z-index: 61;
  }

  /* Fixed size at every width */
  .site-header__logo img {
    height: 50px;
    width: auto;
    max-width: none;
  }

  .site-header__cta {
    flex-shrink: 0;
  }

  .site-nav {
    margin-left: auto;
  }

  .site-nav__list {
    display: flex;
    gap: 1.75rem;
    font-size: 0.975rem;
    font-weight: 500;
  }

  .site-nav__list a {
    text-decoration: none;
  }

  .site-nav__list a:hover {
    color: var(--color-teal-text);
  }

  /* Current section */
  .site-nav__list a[aria-current="page"] {
    color: var(--color-teal-text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4em;
  }

  .site-nav__cta {
    display: none;
  }

  /* On the Project bespreken page the CTA marks the current page */
  .site-header .button[aria-current="page"] {
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.6);
  }

  /* Menu toggle (hamburger) */
  .menu-toggle {
    display: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-left: auto;
    margin-right: -0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-ink);
    cursor: pointer;
    position: relative;
    z-index: 61;
  }

  .menu-toggle svg {
    width: 1.75rem;
    height: 1.75rem;
  }

  .menu-toggle__close {
    display: none;
  }

  @media (max-width: 72rem) {
    .menu-toggle {
      display: grid;
    }

    .site-header__cta {
      display: none;
    }

    .site-nav {
      position: fixed;
      inset: 0;
      z-index: 60;
      margin: 0;
      display: flex;
      flex-direction: column;
      padding: 6.5rem var(--gutter) 2rem;
      background: var(--color-surface);
      overflow-y: auto;
      visibility: hidden;
      opacity: 0;
      transition: opacity var(--ease), visibility 0s linear 0.2s;
    }

    .site-nav__list {
      flex-direction: column;
      gap: 0;
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .site-nav__list a {
      display: block;
      padding: 1rem 0;
      border-bottom: 1px solid var(--color-line);
    }

    .site-nav__cta {
      display: flex;
      justify-content: center;
      margin-top: 2rem;
    }
  }

  @media (max-width: 60rem) {
    .site-header {
      --field: 100%;
    }
  }
}

@layer exception {
  /* Scrolled away from the top: solid, slightly tighter bar with a hairline shadow */
  .site-header[data-scrolled] {
    padding-block: 1rem;
    background: rgb(255 255 255 / 0.96);
    box-shadow: 0 1px 0 var(--color-line), 0 8px 24px -16px rgb(15 34 54 / 0.25);
  }

  /* Slid out of view. Only set while hidden: any translate value would make the header
     the containing block for the fixed mobile menu. */
  .site-header[data-hidden] {
    translate: 0 -100%;
    box-shadow: none;
  }

  .site-nav[data-open] {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--ease);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__open {
    display: none;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__close {
    display: block;
  }
}

@layer exception {
  /* Skip link: hidden until focused with the keyboard */
  .skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    width: auto;
    height: auto;
    clip-path: none;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-control);
    background: var(--color-ink);
    color: #fff;
    font-weight: 600;
  }
}

/* import: the header's two call-to-action fields render as display:contents (an unlayered
   import rule), so Pim's show/hide on them is repeated here, unlayered, on the div and its link. */
.site-nav__cta { display: none; }
.site-header__cta > .button { flex-shrink: 0; }
@media (max-width: 72rem) {
  .site-header__cta, .site-header__cta > .button { display: none; }
  .site-nav__cta { display: flex; justify-content: center; margin-top: 2rem; }
}

/* --- components/hero.css --- */
@layer block {
  /*
    Hero: copy on a pale-teal field (left 72%, rounded bottom-right corner);
    the explainer video straddles the field edge.
  */
  .hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3rem, 8vw, 7rem) clamp(3rem, 6vw, 6rem);
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--field, 72%);
    z-index: -1;
    background: var(--color-tint);
    border-bottom-right-radius: clamp(24px, 3vw, 48px);
  }

  .hero__copy {
    grid-column: 1 / span 6;
    position: relative;
    z-index: 1;
  }

  .hero__title {
    margin-top: 1.25rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  /* Each statement on its own line */
  .hero__line {
    display: block;
    white-space: nowrap;
  }

  .hero__lede {
    margin-top: 2rem;
    max-width: 30ch;
  }

  .hero__actions {
    margin-top: 2.5rem;
  }

  /* Stage: 12 content columns + right gutter; media sits in columns 7–12 and is pulled up beside the copy */
  .hero__stage {
    grid-column: content-start / full-end;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr)) minmax(var(--gutter), 1fr);
    column-gap: var(--grid-gap);
    margin-top: clamp(-23rem, -25vw, -6rem);
  }

  .hero__media {
    grid-column: 7 / -2;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 60rem) {
    .hero {
      --field: 100%;
    }

    .hero::before {
      border-bottom-right-radius: 24px;
    }

    .hero__copy {
      grid-column: 1 / -1;
    }

    .hero__stage {
      margin-top: 3rem;
    }

    .hero__media {
      grid-column: 1 / -2;
    }
  }
}

/* --- components/page-hero.css --- */
@layer block {
  /*
    Page hero (subpages): copy on a full-width pale-teal field; a large visual sits
    below the copy and overlaps the bottom edge of the field.
  */
  .page-hero {
    --overlap: clamp(4rem, 12vw, 11rem);
    position: relative;
    isolation: isolate;
    padding-top: clamp(3rem, 7vw, 6rem);
  }

  .page-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 var(--overlap) 0;
    z-index: -1;
    background: var(--color-tint);
    border-bottom-right-radius: clamp(24px, 3vw, 48px);
  }

  .page-hero__copy {
    grid-column: 1 / span 8;
  }

  .page-hero__title {
    margin-top: 1.25rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  .page-hero__aside {
    grid-column: 9 / -1;
    align-self: end;
  }

  .page-hero__aside .lede {
    font-size: 1.1875rem;
  }

  .page-hero__actions {
    margin-top: 2rem;
  }

  .page-hero__visual {
    margin-top: clamp(3rem, 6vw, 4.5rem);
  }

  @media (max-width: 60rem) {
    .page-hero__copy,
    .page-hero__aside {
      grid-column: 1 / -1;
    }

    .page-hero__aside {
      margin-top: 1.5rem;
    }
  }
}

@layer exception {
  /* Text-only hero (Platform): no overlapping visual — lede and actions sit below the title */
  .page-hero[data-variant="text"] {
    --overlap: 0px;
    padding-bottom: clamp(4rem, 8vw, 7rem);
  }

  /* Same field as the homepage hero: pale teal on the left 60%, white beyond */
  .page-hero[data-variant="text"]::before {
    right: auto;
    width: var(--field, 60%);
  }

  .page-hero[data-variant="text"] .page-hero__copy {
    grid-column: 1 / span 10;
  }

  .page-hero[data-variant="text"] .page-hero__aside {
    grid-column: 1 / span 6;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
  }

  .page-hero[data-variant="text"] .page-hero__aside .lede {
    font-size: var(--step-1);
  }

  @media (max-width: 60rem) {
    .page-hero[data-variant="text"] {
      --field: 100%;
    }

    .page-hero[data-variant="text"] .page-hero__copy,
    .page-hero[data-variant="text"] .page-hero__aside {
      grid-column: 1 / -1;
    }
  }

  /* Wider field (Platform): header and hero tint run to 80% of the width */
  [data-field="wide"] .site-header {
    --field: 80%;
  }

  [data-field="wide"] .page-hero[data-variant="text"]::before {
    width: var(--field, 80%);
  }

  /* Full field (Platform): tint across the whole width, square corners, wider copy */
  :root:not(:has(.hero)) .page-hero[data-variant="text"]::before {
    width: 100%;
    border-radius: 0;
  }

  :root:not(:has(.hero)) .page-hero[data-variant="text"] .page-hero__copy {
    grid-column: 1 / -1;
  }

  :root:not(:has(.hero)) .page-hero[data-variant="text"] .page-hero__aside {
    grid-column: 1 / span 9;
  }

  :root:not(:has(.hero)) .page-hero[data-variant="text"] .lede {
    max-width: 52ch;
  }

  /* Subpages: the header field runs full width to join the page-hero field */
  :root:not(:has(.hero)) .site-header {
    --field: 100%;
  }
}

/* import: Pim switched the full-width hero field with <body data-field="full"> on every page but the home page.
   The site's body is the platform's, and data-field is the importer's word, so the switch is now
   "no home hero on this page": :root:not(:has(.hero)) replaces [data-field="full"] above. */

/* --- components/compare.css --- */
@layer block {
  /*
    Compare: two real screenshots of the same page stacked; a switch that mirrors the
    product's own edit-mode toggle crossfades between them.
  */
  .compare {
    position: relative;
  }

  .compare__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
  }

  .compare__caption {
    font-size: 1.0625rem;
    color: var(--color-ink-muted);
  }

  .compare__caption strong {
    color: var(--color-ink);
  }

  .compare__stage {
    position: relative;
    aspect-ratio: 1397 / 841;
    overflow: hidden;
    border-radius: var(--radius-media);
    background: var(--color-surface);
    box-shadow: var(--shadow);
  }

  .compare__stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 0;
    transition: opacity 0.45s ease;
  }

  .compare__stage img + img {
    opacity: 0;
  }

  /* Switch */
  .mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0 1rem 0 0.5rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }

  .mode-switch__track {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--color-line);
    transition: background-color var(--ease);
  }

  .mode-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(1.5rem - 6px);
    height: calc(1.5rem - 6px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(15 34 54 / 0.3);
    transition: translate var(--ease);
  }

  .compare__caption [data-when="on"] {
    display: none;
  }
}

@layer exception {
  .compare[data-mode="on"] .compare__stage img + img {
    opacity: 1;
  }

  .mode-switch[aria-checked="true"] .mode-switch__track {
    background: var(--color-teal);
  }

  .mode-switch[aria-checked="true"] .mode-switch__track::after {
    translate: 1.25rem 0;
  }

  .compare[data-mode="on"] .compare__caption [data-when="off"] {
    display: none;
  }

  .compare[data-mode="on"] .compare__caption [data-when="on"] {
    display: inline;
  }
}

/* --- components/identity.css --- */
@layer block {
  /*
    Identity: the dark chapter of the Platform page. Text left; a hub diagram right with
    "Gebruiker & context" at the centre and five connected aspects around it. Three
    outcomes close the section.
  */
  .identity {
    overflow: clip;
    padding-block: var(--section-space) clamp(4rem, 7vw, 6rem);
    background: var(--gradient-foundation);
    color: #fff;
  }

  .identity .eyebrow,
  .identity .mark {
    color: var(--color-teal-bright);
  }

  .identity__head {
    grid-column: 1 / span 6;
    align-self: center;
    --flow-space: 1.5rem;
  }

  .identity__title {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  .identity__line {
    display: block;
  }

  .identity__head .lede {
    max-width: 36ch;
    color: var(--color-on-dark);
  }

  .identity__head .lede strong {
    font-weight: 600;
    color: #fff;
  }

  /* Hub diagram: SVG for rings, lines and nodes; real HTML labels on top */
  /* the diagram may run into the right page margin so it can be large */
  .hub {
    grid-column: 7 / -1;
    position: relative;
    aspect-ratio: 680 / 600;
    margin-right: calc(var(--gutter) * -1);
  }

  .hub__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .hub__labels {
    position: absolute;
    inset: 0;
  }

  .hub__label {
    position: absolute;
    width: 28%;
    font-size: clamp(0.75rem, 0.55rem + 0.35vw, 0.9375rem);
    line-height: 1.45;
    color: rgb(255 255 255 / 0.72);
  }

  .hub__label strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 1.15em;
    color: #fff;
  }

  /* Outcomes: three columns divided by hairlines, small round icon badge */
  .identity__outcomes {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(3.5rem, 7vw, 5.5rem);
  }

  /* White check where the icon badges used to be */
  .outcome {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }

  .outcome::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%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 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .outcome h3 {
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 700;
  }

  .outcome p {
    margin-top: 0.5rem;
    max-width: 34ch;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-on-dark);
  }

  @media (max-width: 60rem) {
    .identity__head,
    .hub {
      grid-column: 1 / -1;
    }

    .hub {
      width: min(100%, 40rem);
      justify-self: center;
      margin: 3rem 0 0;
    }

    .identity__outcomes {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

  }

  /* Phones: the diagram is too small for overlaid labels — show nodes only, labels as a list */
  @media (max-width: 40rem) {
    .hub {
      aspect-ratio: auto;
    }

    .hub__svg {
      position: static;
      height: auto;
      aspect-ratio: 680 / 600;
    }

    .hub__labels {
      position: static;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.25rem 1.5rem;
      margin-top: 2rem;
    }

    .hub__label {
      position: static;
      width: auto;
      font-size: 0.875rem;
    }
  }
}

@layer exception {
  /* Label positions next to their node (desktop and tablet) */
  @media (min-width: 40.01rem) {
    .hub__label[data-node="toegang"] { left: 56.8%; top: 6.7%; }
    .hub__label[data-node="interacties"] { left: 73.2%; top: 48.7%; }
    .hub__label[data-node="persoonsgegevens"] { left: 60.0%; top: 85.0%; }
    .hub__label[data-node="bewaartermijnen"] { left: 24.4%; top: 85.0%; }
    .hub__label[data-node="privacy"] { left: 0.9%; top: 48.7%; }
  }
}

@layer exception {
  /* Spotlight (CMS): the identity chapter with the edit-mode compare instead of the hub */
  .spotlight .identity__head {
    grid-column: 1 / span 5;
  }

  .spotlight__compare {
    grid-column: 7 / -1;
    align-self: center;
  }

  .spotlight .compare__caption {
    color: rgb(255 255 255 / 0.7);
  }

  .spotlight .compare__caption strong {
    color: #fff;
  }

  .spotlight .compare__stage {
    box-shadow: 0 30px 70px -20px rgb(0 0 0 / 0.6);
  }

  @media (min-width: 60.01rem) {
    .spotlight .identity__outcomes {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 60rem) {
    .spotlight__compare {
      grid-column: 1 / -1;
      margin-top: 2.5rem;
    }
  }
}

/* --- components/explorer.css --- */
@layer block {
  /*
    Explorer (Platform: "Sterk in de basis"): the list of qualities on the left stays
    visible; the large panel on the right shows the selected one. Phones: the list hides,
    panels become a swipeable row with balls underneath.
  */
  .explorer {
    padding-block: clamp(5rem, 9vw, 8rem);
  }

  .explorer__head {
    grid-column: 1 / span 8;
    --flow-space: 1rem;
  }

  .explorer__head p:not(.eyebrow) {
    font-size: 1.125rem;
    color: var(--color-ink-muted);
  }

  .explorer__body {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
  }

  /* Tab list: titles with a ball that fills when active */
  /* Mirrored: panel left, list right */
  .explorer__tabs {
    grid-column: 9 / -1;
    grid-row: 1;
    align-self: center; /* centred against the card */
  }

  /* One line running through all the balls, extending past the first and last item */
  .explorer__tabs {
    position: relative;
    isolation: isolate;
  }

  .explorer__tabs::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -2.5rem;
    bottom: -2.5rem;
    left: calc(0.4375rem - 1px);
    border-left: 2px solid var(--color-line);
  }

  /* Progress: teal from the top down to the active ball (JS sets --progress) */
  .explorer__tabs::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -2.5rem;
    left: calc(0.4375rem - 1px);
    height: calc(var(--progress, 0px) + 2.5rem);
    border-left: 2px solid var(--color-teal);
    transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .explorer__tab {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 3.75rem;
    padding: 0.9rem 0;
    border: 0;
    background: none;
    color: var(--color-ink-muted);
    font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: left;
    cursor: pointer;
    transition: color var(--ease);
  }

  .explorer__tab::before {
    content: "";
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid #C5CCD2;
    border-radius: 50%;
    background: var(--color-surface); /* covers the line behind it */
    transition: background-color var(--ease), border-color var(--ease);
  }

  .explorer__tab:hover {
    color: var(--color-ink);
  }

  .explorer__tab:hover::before {
    border-color: var(--color-teal);
  }

  .explorer__tab:focus-visible {
    outline-offset: -2px;
  }

  /* Stage: all panels share one cell; only the active one shows */
  .explorer__track {
    grid-column: 1 / span 7;
    grid-row: 1;
    display: grid;
  }

  /* All panels share one cell, so the cell takes the tallest card; each card then
     stretches to fill it — every card has the same height */
  .explorer__panel {
    grid-area: 1 / 1;
    display: grid;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }

  /* Statement card: the quality itself is the visual — large white type on navy,
     with the illustration or screenshot as an accent in the upper area */
  .explorer__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(28rem, 40vw, 34rem);
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3.25rem);
    border-radius: var(--radius-tile);
    background: var(--gradient-foundation);
    color: #fff;
  }

  .explorer__visual {
    position: absolute;
    inset: 0 0 auto 0;
    height: 52%;
    pointer-events: none;
  }

  /* Line illustration: accent in the top-right */
  .explorer__art {
    position: absolute;
    top: clamp(2rem, 4vw, 3rem);
    right: clamp(2rem, 4vw, 3rem);
    width: 42%;
    height: auto;
    overflow: visible;
    color: rgb(255 255 255 / 0.4);
  }

  .explorer__art .accent {
    color: var(--color-teal-bright);
  }

  /* Real screenshot: top-right strip, bleeding off the right edge */
  .explorer__shot {
    position: absolute;
    top: clamp(2rem, 4vw, 3rem);
    left: 44%;
    right: -1px;
    bottom: 0;
    overflow: hidden;
    border-radius: var(--radius-shot) 0 0 var(--radius-shot);
    background: var(--color-surface);
    box-shadow: 0 30px 70px -20px rgb(0 0 0 / 0.6);
  }

  .explorer__shot img {
    width: var(--crop-width, 150%);
    max-width: none;
    translate: calc(var(--crop-x, 0%) * -1) calc(var(--crop-y, 0%) * -1);
  }

  /* Extend illustration: project-specific block standing on the Exolog base */
  .explorer__build {
    position: absolute;
    top: clamp(2rem, 4vw, 3rem);
    left: 44%;
    right: 0;
    display: grid;
  }

  .explorer__addition {
    justify-self: end;
    width: 70%;
    margin-right: 12%;
    padding: 1.25rem 1rem;
    border: 2px dashed var(--color-teal-bright);
    border-bottom: 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background: rgb(1 193 209 / 0.12);
    font-size: clamp(0.9375rem, 0.8rem + 0.4vw, 1.125rem);
    font-weight: 700;
    color: #fff;
  }

  .explorer__base {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-panel) 0 0 var(--radius-panel);
    background: var(--color-teal-deep);
    color: #fff;
    font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
    font-weight: 700;
  }

  .explorer__text {
    position: relative;
    margin-top: clamp(10rem, 16vw, 13rem); /* keeps the accent area above the text clear */
    max-width: 30rem;
    --flow-space: 1rem;
  }

  .explorer__text h3 {
    font-size: var(--step-2);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 700;
  }

  .explorer__text .mark {
    color: var(--color-teal-bright);
  }

  .explorer__text p {
    max-width: 40ch;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: rgb(255 255 255 / 0.8);
  }

  .explorer__text .button {
    margin-top: 0.5rem;
    color: #fff;
  }

  .explorer__text .button:hover {
    color: var(--color-teal-bright);
  }

  /* Balls under the panels (phones only) */
  .explorer__dots {
    display: none;
  }

  .explorer__dot {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .explorer__dot::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--color-line);
    border-radius: 50%;
    transition: background-color var(--ease), border-color var(--ease);
  }

  @media (max-width: 60rem) {
    .explorer__head {
      grid-column: 1 / -1;
    }

    .explorer__tabs {
      display: none;
    }

    /* panels become a swipeable row */
    .explorer__track {
      grid-column: 1 / -1;
      display: flex;
      gap: 1rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }

    .explorer__track::-webkit-scrollbar {
      display: none;
    }

    .explorer__panel {
      flex: 0 0 100%;
      scroll-snap-align: start;
      opacity: 1;
      visibility: visible;
    }

    .explorer__card {
      min-height: 30rem;
    }

    .explorer__art {
      width: 55%;
    }

    .explorer__shot,
    .explorer__build {
      left: 30%;
    }

    .explorer__text {
      max-width: none;
    }

    .explorer__dots {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
      margin-top: 1.25rem;
    }
  }
}

@layer exception {
  .explorer__tab[aria-selected="true"] {
    color: var(--color-ink);
  }

  /* The active ball fills */
  .explorer__tab[aria-selected="true"]::before,
  .explorer__dot[aria-current="true"]::before {
    border-color: var(--color-teal);
    background: var(--color-teal);
  }

  @media (min-width: 60.01rem) {
    .explorer__panel[data-active] {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.35s ease;
    }
  }

  /* Screenshot crops */
  .explorer__shot[data-crop="blocks"] { --crop-width: 175%; --crop-x: 5%; --crop-y: 5.5%; }
  .explorer__shot[data-crop="pages"] { --crop-width: 210%; --crop-x: 5%; --crop-y: 5%; }
  .explorer__shot[data-crop="content-types"] { --crop-width: 175%; --crop-x: 14%; --crop-y: 6.2%; }
  .explorer__shot[data-crop="meta"] { --crop-width: 175%; --crop-x: 5.2%; --crop-y: 5%; }
  .explorer__shot[data-crop="files"] { --crop-width: 175%; --crop-x: 5%; --crop-y: 5%; }
  .explorer__shot[data-crop="language"] { --crop-width: 165%; --crop-x: 30%; --crop-y: 4.5%; }
  .explorer__shot[data-crop="editions"] { --crop-width: 200%; --crop-x: 38%; --crop-y: 6.2%; }
}

/* --- components/intro.css --- */
@layer block {
  /* Intro (Platform): text + a stepped two-line claim on the left, heading on the right */
  .intro {
    padding-block: clamp(5rem, 9vw, 8rem);
  }

  .intro__text {
    grid-column: 1 / span 6;
    grid-row: 1;
    --flow-space: 1.25rem;
  }

  .intro__text p {
    max-width: 46ch;
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
  }

  .intro__title {
    grid-column: 8 / -1;
    grid-row: 1;
    align-self: start;
  }

  /* Claim: each line steps further in — standard first, project-specific after */
  .intro__text .intro__claim {
    max-width: none;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    font-size: var(--step-heading);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--color-ink);
  }

  .intro__claim span {
    display: block;
  }

  .intro__claim-base {
    padding-left: clamp(2rem, 5vw, 4.5rem);
  }

  .intro__claim-custom {
    max-width: 11.5em;
    margin-top: 0.5rem;
    padding-left: clamp(2.75rem, 6.25vw, 5.75rem);
    color: var(--color-teal);
  }

  @media (max-width: 60rem) {
    .intro__title,
    .intro__text {
      grid-column: 1 / -1;
    }

    /* phones: heading first */
    .intro__title {
      grid-row: 1;
    }

    .intro__text {
      grid-row: 2;
      margin-top: 2rem;
    }

    .intro__claim-base {
      padding-left: 0;
    }

    .intro__claim-custom {
      padding-left: 1.25rem;
    }
  }
}

@layer exception {
  /* Partners: the intro text column holds a list of benefits with teal checks */
  .partner-benefits {
    display: grid;
    gap: 2rem;
  }

  .partner-benefits .outcome {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }

  .partner-benefits .outcome::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.2rem;
    background: var(--color-teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%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 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .partner-benefits h3 {
    font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .intro__text.partner-benefits p {
    margin-top: 0.4rem;
  }
}

/* --- components/topic-nav.css --- */
@layer block {
  /*
    Topic nav: in-page links on a vertical line with balls (same language as the explorer).
    Used for the FAQ topics and the article table of contents. Placement is up to the page.
    The link whose section is in view gets aria-current="true" (js: initTopicNav).
  */
  .topic-nav__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-teal-text);
  }

  .topic-nav ul {
    position: relative;
    isolation: isolate;
    margin-top: 1.25rem;
    padding: 0;
    list-style: none;
  }

  .topic-nav ul::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0.5rem;
    bottom: 0.5rem;
    left: calc(0.4375rem - 1px);
    border-left: 2px solid var(--color-line);
  }

  .topic-nav a {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 2.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-ink-muted);
    text-decoration: none;
  }

  .topic-nav a::before {
    content: "";
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid #C5CCD2;
    border-radius: 50%;
    background: var(--color-surface);
    transition: background-color var(--ease), border-color var(--ease);
  }

  .topic-nav a:hover {
    color: var(--color-ink);
  }

  @media (max-width: 60rem) {
    /* phones/tablets: a wrapping row of links, no line */
    .topic-nav ul {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem 1.5rem;
    }

    .topic-nav ul::before {
      content: none;
    }
  }
}

@layer exception {
  .topic-nav a[aria-current="true"] {
    color: var(--color-ink);
  }

  .topic-nav a[aria-current="true"]::before {
    border-color: var(--color-teal);
    background: var(--color-teal);
  }
}

/* --- components/faq.css --- */
@layer block {
  /*
    FAQ: heading left, questions right as white rows on a pale-teal section (same tint as the hero field).
    Native <details>/<summary> — keyboard and screen-reader support built in.
    "+" when closed, "−" when open.
  */
  .faq {
    padding-block: clamp(5rem, 9vw, 8rem);
    background: var(--color-tint);
  }

  .faq__head {
    grid-column: 1 / span 4;
    align-self: start;
    --flow-space: 1rem;
  }

  .faq__head p:not(.eyebrow) {
    max-width: 30ch;
    color: var(--color-ink-muted);
  }

  .faq__head .button {
    margin-top: 1.5rem;
  }

  .faq__list {
    grid-column: 6 / -1;
    display: grid;
    gap: 0.75rem;
  }

  .faq__item {
    border-radius: var(--radius-panel);
    background: var(--color-surface);
    transition: box-shadow var(--ease);
  }

  .faq__item:hover {
    box-shadow: 0 6px 20px -12px rgb(15 34 54 / 0.35);
  }

  .faq__question {
    position: relative;
    display: block;
    padding: 1.35rem 4.5rem 1.35rem 1.5rem;
    font-size: 1.1875rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
  }

  .faq__question::-webkit-details-marker {
    display: none;
  }

  .faq__question:focus-visible {
    outline-offset: -2px;
    border-radius: var(--radius-panel);
  }

  /* + / − icon: two bars; the vertical one collapses when open */
  .faq__icon {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: 2rem;
    height: 2rem;
    translate: 0 -50%;
    border-radius: 50%;
    background: var(--color-tint);
  }

  .faq__icon::before,
  .faq__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.8rem;
    height: 2px;
    border-radius: 2px;
    background: var(--color-teal-text);
    translate: -50% -50%;
    transition: rotate 0.25s ease;
  }

  .faq__icon::after {
    rotate: 90deg;
  }

  .faq__answer {
    padding: 0 4.5rem 1.5rem 1.5rem;
  }

  .faq__answer p {
    max-width: 60ch;
    line-height: 1.6;
    color: var(--color-ink-muted);
  }

  @media (max-width: 60rem) {
    .faq__head,
    .faq__list {
      grid-column: 1 / -1;
    }

    .faq__list {
      margin-top: 2.5rem;
    }

    .faq__question {
      padding-right: 4rem;
      font-size: 1.0625rem;
    }

    .faq__answer {
      padding-right: 1.5rem;
    }
  }
}

@layer exception {
  .faq__item[open] .faq__icon::after {
    rotate: 0deg;
  }

  .faq__item[open] .faq__icon {
    background: var(--color-teal);
  }

  .faq__item[open] .faq__icon::before,
  .faq__item[open] .faq__icon::after {
    background: #fff;
  }
}

@layer exception {
  /* White FAQ section (after a tint section): questions return to tint rows */
  .faq[data-tone="white"] {
    background: var(--color-surface);
  }

  .faq[data-tone="white"] .faq__item {
    background: var(--color-tint);
  }

  .faq[data-tone="white"] .faq__icon {
    background: var(--color-surface);
  }
}

/* --- components/faq-page.css --- */
@layer block {
  /*
    FAQ page: sticky topic-nav on the left,
    question groups on the right. Each group: heading + the standard FAQ rows.
  */
  .faq-page {
    padding-block: clamp(4rem, 8vw, 6rem) clamp(5rem, 9vw, 8rem);
  }

  .faq-page .topic-nav {
    grid-column: 1 / span 3;
    align-self: start;
    position: sticky;
    top: 7rem;
  }

  .faq-groups {
    grid-column: 5 / -1;
    display: grid;
    gap: clamp(3.5rem, 7vw, 5rem);
  }

  .faq-group {
    scroll-margin-top: 7rem;
  }

  .faq-group h2 {
    font-size: var(--step-heading);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .faq-group .faq__list {
    margin-top: 1.5rem;
  }

  @media (max-width: 60rem) {
    .faq-page .topic-nav {
      grid-column: 1 / -1;
      position: static;
    }

    .faq-groups {
      grid-column: 1 / -1;
      margin-top: 3rem;
    }
  }
}

@layer exception {
  /* Rows on a white page: tint questions, white icon (as on Partners) */
  .faq-group .faq__item {
    background: var(--color-tint);
  }

  .faq-group .faq__icon {
    background: var(--color-surface);
  }
}

/* --- components/articles.css --- */
@layer block {
  /*
    Blog & kennis overview.
    - The filter sits in the hero; the featured post (navy panel) rises into the tint field.
    - Posts form a three-column blog grid with a staggered middle column, so the
      list reads as an editorial spread rather than a row of identical cards.
    - Each post type has its own stage colour: colour does the categorising, the label confirms it.
  */
  .articles {
    padding-bottom: clamp(5rem, 9vw, 8rem);
  }

  /* Filter */
  .article-filter {
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
  }

  .article-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
  }

  .article-filter__btn {
    min-height: 2.75rem;
    padding: 0.5rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ease), color var(--ease);
  }

  .article-filter__btn:hover {
    background: #D6ECEE;
  }

  /* Featured post: navy panel, copy left, screenshot bleeding off the bottom-right */
  .post-feature {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
    overflow: hidden;
    border-radius: var(--radius-media);
    background: var(--gradient-foundation);
    color: #fff;
  }

  .post-feature__body {
    grid-column: 1 / span 5;
    align-self: center;
    padding: clamp(2rem, 4vw, 4rem);
    padding-right: 0;
  }

  .post-feature__flag {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--color-teal);
    font-size: 0.875rem;
    font-weight: 700;
  }

  .post-feature__title {
    margin-top: 1.25rem;
    font-size: var(--step-2);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 700;
  }

  .post-feature__excerpt {
    margin-top: 1.25rem;
    max-width: 42ch;
    font-size: 1.125rem;
    line-height: 1.55;
    color: rgb(255 255 255 / 0.78);
  }

  .post-feature .post__meta {
    margin-top: 1.75rem;
    color: rgb(255 255 255 / 0.7);
  }

  .post-feature .post__type {
    color: var(--color-teal-bright);
  }

  .post-feature__stage {
    position: relative;
    grid-column: 7 / -1;
    min-height: clamp(20rem, 36vw, 32rem);
  }

  .post-feature__stage img {
    position: absolute;
    left: 0;
    top: 14%;
    width: 140%;
    max-width: none;
    border-radius: var(--radius-shot) 0 0 0;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.5);
    transition: translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .post-feature:hover .post-feature__stage img {
    translate: -8px -8px;
  }

  /* Section head */
  .articles__head {
    margin-top: clamp(4.5rem, 9vw, 7rem);
  }

  .articles__head h2 {
    font-size: var(--step-display);
    line-height: 1;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  /* Post grid */
  .post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(3rem, 6vw, 4.5rem) var(--grid-gap);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding: 0;
    list-style: none;
  }

  .post {
    position: relative;
  }

  .post__stage {
    --stage: var(--color-tint);
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-tile);
    background: var(--stage);
  }

  .post__stage img {
    position: absolute;
    left: 12%;
    top: 14%;
    width: 130%;
    max-width: none;
    border-radius: var(--radius-shot) 0 0 0;
    box-shadow: var(--shadow);
    transition: translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .post:hover .post__stage img {
    translate: -6px -6px;
  }

  .post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.9rem;
    font-size: 0.95rem;
    color: var(--color-ink-muted);
  }

  .post > .post__meta {
    margin-top: 1.5rem;
  }

  .post__type {
    font-weight: 700;
    color: var(--color-teal-text);
  }

  /* small dots between meta items */
  .post__meta > * + *::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 0.9rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
    vertical-align: middle;
  }

  .post__title {
    margin-top: 0.75rem;
    font-size: var(--step-1);
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 700;
  }

  .post__excerpt {
    margin-top: 0.75rem;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--color-ink-muted);
  }

  /* whole post is the link */
  .post__title a,
  .post-feature__title a {
    text-decoration: none;
  }

  .post__title a::after,
  .post-feature__title a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .post__title a:focus-visible,
  .post-feature__title a:focus-visible {
    outline: none;
  }

  .post:has(a:focus-visible) .post__stage,
  .post-feature:has(a:focus-visible) {
    outline: 2px solid var(--color-teal);
    outline-offset: 4px;
  }

  .article-list__empty {
    margin-top: 2rem;
    font-size: 1.125rem;
    color: var(--color-ink-muted);
  }

  @media (max-width: 60rem) {
    .post-feature__body,
    .post-feature__stage {
      grid-column: 1 / -1;
    }

    .post-feature__body {
      padding: 2rem 1.5rem 0;
    }

    .post-feature__stage {
      min-height: 15rem;
      margin-left: 1.5rem;
    }

    .post-feature__stage img {
      top: 2rem;
      width: 130%;
    }

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

  @media (max-width: 36rem) {
    /* filter: one swipeable row running to the screen edge */
    .article-filter__list {
      flex-wrap: nowrap;
      overflow-x: auto;
      margin-right: calc(-1 * var(--gutter, 1rem));
      padding-right: var(--gutter, 1rem);
      scrollbar-width: none;
    }

    .article-filter__btn {
      white-space: nowrap;
    }

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

    .post__stage {
      aspect-ratio: 16 / 10;
    }
  }
}

@layer exception {
  /* Hero with a featured post rising into its field */
  .page-hero[data-overlap="feature"] {
    padding-bottom: clamp(9rem, 14vw, 13rem);
  }

  .page-hero[data-overlap="feature"] + .articles .post-feature {
    margin-top: calc(-1 * clamp(6rem, 10vw, 9rem));
  }

  /* Active filter: ink pill, white text */
  .article-filter__btn[aria-pressed="true"] {
    background: var(--color-ink);
    color: #fff;
  }

  .post-feature[hidden],
  .post[hidden] {
    display: none;
  }

  /* Staggered middle column on wide screens (only for the full, unfiltered list) */
  @media (min-width: 60.01rem) {
    .post-grid:not([data-filtered], [data-variant]) {
      padding-bottom: 5rem;
    }

    .post-grid:not([data-filtered], [data-variant]) .post:nth-child(3n + 2) {
      translate: 0 5rem;
    }
  }

  /* Stage colour per post type */
  .post[data-type="guides"] .post__stage { --stage: var(--color-teal); }
  .post[data-type="updates"] .post__stage { --stage: var(--color-mist); }
  .post[data-type="nieuws"] .post__stage { --stage: #D6ECEE; }
  .post[data-type="white-papers"] .post__stage { --stage: var(--gradient-foundation); }
  .post[data-type="knowledge-base"] .post__stage { --stage: var(--color-teal-deep); }

  /* Example content until real articles exist: a small label on the stage, not in the meta line */
  .post[data-placeholder] .post__stage::after {
    content: "Voorbeeld";
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .post-feature[data-placeholder] .post-feature__flag::after {
    content: " · voorbeeld";
    font-weight: 500;
  }
}

/* --- components/article.css --- */
@layer block {
  /*
    Article (blog/kennis detail). Hero in the tint field with the lead screenshot rising
    into it; below, a sticky aside (contents + share) and a reading column. Figures and
    the pull quote take the full body width; running text keeps a reading measure.
  */
  .article__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--color-ink);
    text-decoration: none;
  }

  .article__back::before {
    content: "\2190";
    color: var(--color-teal-text);
    transition: translate var(--ease);
  }

  .article__back:hover::before {
    translate: -4px 0;
  }

  .article__meta {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
  }

  .article__title {
    margin-top: 1rem;
    max-width: 22ch;
    font-size: var(--step-display);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  /* Lead visual: the navy stage of the featured post on the overview, continued here */
  .article__media {
    position: relative;
    z-index: 1;
    overflow: hidden;
    aspect-ratio: 2.2 / 1;
    border-radius: var(--radius-media);
    background: var(--gradient-foundation);
  }

  .article__media img {
    position: absolute;
    left: 12%;
    top: 14%;
    width: 88%;
    max-width: none;
    border-radius: var(--radius-shot) 0 0 0;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.5);
  }

  .article__grid {
    margin-top: clamp(3.5rem, 7vw, 6rem);
  }

  .article__aside {
    grid-column: 1 / span 3;
    align-self: start;
    position: sticky;
    top: 7rem;
  }

  .article__aside .topic-nav a {
    font-size: 1rem;
    min-height: 2.5rem;
  }

  .article__share {
    margin-top: 2.5rem;
  }

  .article__share-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-tint);
    color: var(--color-ink);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ease), color var(--ease);
  }

  .share-btn svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .share-btn:hover {
    background: #D6ECEE;
  }

  .article__body {
    grid-column: 5 / -1;
  }

  /* Running text */
  .prose > * {
    max-width: 44rem;
  }

  .prose > * + * {
    margin-top: 1.5rem;
  }

  .prose p,
  .prose li {
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    line-height: 1.7;
  }

  .prose > h2 {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    scroll-margin-top: 7rem;
    font-size: var(--step-subheading);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

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

  .prose > ul {
    display: grid;
    gap: 0.6rem;
    padding: 0;
    list-style: none;
  }

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

  .prose > ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-teal);
  }

  .prose a {
    font-weight: 700;
    color: var(--color-teal-text);
    text-underline-offset: 0.2em;
  }

  /* Summary: tint panel with teal checks */
  .article__summary {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-tile);
    background: var(--color-tint);
  }

  .article__summary h2 {
    font-size: 1.25rem;
    font-weight: 700;
  }

  .article__summary ul {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
  }

  .article__summary li {
    position: relative;
    padding-left: 2.25rem;
    font-weight: 600;
    line-height: 1.5;
  }

  .article__summary li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
  }

  /* Wide elements: full body width */
  .prose > .article__wide,
  .prose > .article__figure,
  .prose > .article__quote {
    max-width: none;
    margin-block: clamp(2.5rem, 5vw, 4rem);
  }

  .article__quote p {
    font-size: var(--step-2);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 700;
  }

  .article__shot {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-media);
    background: var(--color-mist);
  }

  .article__shot img {
    margin: 8% 0 0 7%;
    width: 110%;
    max-width: none;
    border-radius: var(--radius-shot) 0 0 0;
    box-shadow: var(--shadow);
  }

  .article__figure figcaption {
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--color-ink-muted);
  }

  /* Related posts */
  .article-related {
    padding-block: clamp(5rem, 10vw, 8rem);
  }

  .article-related > h2 {
    font-size: var(--step-display);
    line-height: 1;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  @media (max-width: 60rem) {
    .article__aside {
      grid-column: 1 / -1;
      position: static;
    }

    .article__body {
      grid-column: 1 / -1;
      margin-top: 3rem;
    }

    .article__media {
      aspect-ratio: 4 / 3;
    }

    .article__media img {
      left: 8%;
      top: 12%;
      width: 130%;
    }
  }
}

@layer exception {
  /* Hero whose lead image rises into the tint field */
  .page-hero[data-overlap="media"] {
    padding-bottom: clamp(8rem, 16vw, 15rem);
  }

  .page-hero[data-overlap="media"] + .article__layout .article__media {
    margin-top: calc(-1 * clamp(5rem, 12vw, 11rem));
  }

  /* Copy button confirms the copy */
  .share-btn[data-state="copied"] {
    background: var(--color-teal);
    color: #fff;
  }

  /* Example article until real content exists */
  .article[data-placeholder] .article__meta .post__type::after {
    content: " · voorbeeld";
    font-weight: 500;
    opacity: 0.75;
  }

  @media (max-width: 36rem) {
    /* phones: the contents list is long; keep only sharing in the aside */
    .article__aside .topic-nav {
      display: none;
    }

    .article__share {
      margin-top: 0;
    }
  }
}

@layer block {
  /*
    Author: closes the article. Round photo; LinkedIn as a quiet pill with the LinkedIn mark.
  */
  .prose > .author {
    max-width: 44rem;
    margin-top: clamp(3.5rem, 7vw, 5rem);
  }

  .author {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: var(--radius-tile);
    background: var(--color-tint);
  }

  .author__avatar {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface);
  }

  .author__body {
    flex: 1;
    min-width: 0;
  }

  .author .author__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-teal-text);
  }

  .author .author__name {
    margin-top: 0.15rem;
    font-size: 1.375rem;
    line-height: 1.2;
    font-weight: 700;
  }

  .author .author__role {
    margin-top: 0.25rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
  }

  .prose .author__link {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--ease), color var(--ease);
  }

  .prose .author__link:hover {
    background: var(--color-ink);
    color: #fff;
  }

  .author__link svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  /* keep the LinkedIn mark legible on the navy hover */
  .prose .author__link:hover svg,
  .share-btn:hover svg {
    border-radius: 2px;
    background: #fff;
  }

  @media (max-width: 36rem) {
    .author {
      flex-wrap: wrap;
    }

    .author__avatar {
      width: 3.5rem;
      height: 3.5rem;
    }

    .author__body {
      flex-basis: calc(100% - 4.75rem);
    }

    .prose .author__link {
      margin-left: 4.75rem;
    }
  }
}

/* --- components/legal.css --- */
@layer block {
  /*
    Legal pages (privacyverklaring, cookies, toegankelijkheid): plain text across nearly
    the full content width. No aside, panels or tables; headings and paragraphs only.
  */
  .legal {
    padding-block: clamp(3.5rem, 7vw, 5rem) clamp(5rem, 9vw, 8rem);
  }

  .legal__updated {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink-muted);
  }

  .legal__text {
    max-width: 62rem;
  }

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

  .legal__text p,
  .legal__text li {
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    line-height: 1.7;
  }

  .legal__text h2 {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    font-size: var(--step-1);
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 700;
  }

  .legal__text h2 + * {
    margin-top: 0.75rem;
  }

  .legal__text ul {
    padding-left: 1.25rem;
  }

  .legal__text li + li {
    margin-top: 0.35rem;
  }

  .legal__text a {
    font-weight: 600;
    color: var(--color-teal-text);
    text-underline-offset: 0.2em;
  }

  .legal__text .legal__draft {
    font-size: 1rem;
    color: #B5441A;
  }
}

@layer exception {
  /* Missing information, to be supplied by Exolog: clearly visible, never final */
  .todo[data-todo] {
    padding: 0.05em 0.4em;
    border-radius: 4px;
    background: #FDEDE6;
    color: #B5441A;
    font-weight: 600;
  }
}

/* --- components/not-found.css --- */
@layer block {
  /*
    Standalone message pages (404, newsletter thank-you): the text hero on its own,
    a little taller, with one button home and a few plain links.
  */
  .not-found {
    min-height: min(75vh, 40rem);
  }

  .not-found .grid {
    align-content: start;
  }

  .not-found .page-hero__aside {
    align-self: start;
  }

  .not-found__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
    margin-top: clamp(2rem, 4vw, 2.75rem);
  }

  .not-found__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0;
    list-style: none;
  }

  .not-found__links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 700;
    color: var(--color-ink);
    text-decoration: none;
  }

  .not-found__links a::after {
    content: "\2192";
    margin-left: 0.4rem;
    color: var(--color-teal-text);
    transition: translate var(--ease);
  }

  .not-found__links a:hover::after {
    translate: 4px 0;
  }
}

@layer exception {
  /* Followed by more content (thank-you page): no need to fill the screen */
  .not-found:has(+ section) {
    min-height: 0;
  }
}

/* --- components/work.css --- */
@layer block {
  /*
    Work list (Showcases page): big, bold editorial grid. One featured case across the
    full width on a navy stage, then pairs of large tiles. Every case gets the same kind of
    stage (screenshot inset top-left, bleeding off) so different client brands read as one
    collection. Name in display size; the whole item is clickable.
  */
  .work-section {
    padding-block: clamp(4rem, 8vw, 7rem) clamp(5rem, 9vw, 8rem);
  }

  .work-section__head {
    grid-column: 1 / span 8;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  }

  .work-list {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(3.5rem, 7vw, 6rem) var(--grid-gap);
  }

  .work {
    position: relative;
    grid-column: span 6;
  }

  .work__tile {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: var(--radius-tile);
    background: var(--color-mist);
    transition: background-color 0.25s ease;
  }

  .work__tile img {
    position: absolute;
    left: 9%;
    top: 11%;
    width: 122%;
    max-width: none;
    border-radius: var(--radius-shot) 0 0 0;
    box-shadow: var(--shadow);
    transition: translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .work:hover .work__tile img {
    translate: -8px -8px;
  }

  .work__body {
    margin-top: 1.75rem;
  }

  .work__meta {
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
    font-weight: 600;
    color: var(--color-teal-text);
  }

  .work__name {
    margin-top: 0.6rem;
    font-size: var(--step-2);
    line-height: 1;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  .work__name a {
    text-decoration: none;
  }

  .work__name a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .work__name a:focus-visible {
    outline: none;
  }

  .work:has(a:focus-visible) .work__tile {
    outline: 2px solid var(--color-teal);
    outline-offset: 4px;
  }

  .work__desc {
    margin-top: 0.85rem;
    max-width: 40ch;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
  }

  /* Arrow cue: slides on hover */
  .work__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-weight: 700;
    color: var(--color-ink);
  }

  .work__more::after {
    content: "\2192";
    color: var(--color-teal-text);
    transition: translate var(--ease);
  }

  .work:hover .work__more::after {
    translate: 4px 0;
  }

  /* Invitation tile: same size as a case, but an open call to action */
  @media (max-width: 60rem) {
    .work {
      grid-column: 1 / -1;
    }
  }
}

@layer exception {
  /* Featured: full width, large navy stage left, text right aligned to the bottom */
  @media (min-width: 60.01rem) {
    .work[data-size="feature"] {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      align-items: end;
    }

    .work[data-size="feature"] .work__tile {
      grid-column: 1 / span 8;
      aspect-ratio: 16 / 10;
    }

    .work[data-size="feature"] .work__body {
      grid-column: 9 / -1;
      margin-top: 0;
      padding-bottom: 0.5rem;
    }

    .work[data-size="feature"] .work__name {
      font-size: var(--step-hero);
    }

  }

  .work[data-size="feature"] .work__tile {
    background: var(--gradient-foundation);
  }

  .work[data-size="feature"]:hover .work__tile {
    background: var(--gradient-foundation);
  }

  .work[data-tone="tint"] .work__tile {
    background: var(--color-tint);
  }

  .work[data-tone="teal"] .work__tile {
    background: var(--gradient-closing);
  }

  /* Per-case crops */
  .work[data-case="over-mathenesse"] .work__tile img { top: 9%; }
  .work[data-case="franken-zorg"] .work__tile img { width: 128%; }
}

/* --- components/case-detail.css --- */
@layer block {
  /*
    Case detail: text hero with key facts, one large screenshot overlapping the hero field,
    then the story (mirrored intro), the parts of Exolog used, and the next case.
  */
  .case-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem clamp(2rem, 5vw, 4rem);
    margin-top: clamp(2rem, 4vw, 3rem);
  }

  .case-facts div {
    display: grid;
    gap: 0.25rem;
  }

  .case-facts dt {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-teal-text);
  }

  .case-facts dd {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
  }

  /* Large screenshot: the hero field ends halfway behind it */
  .case-shot {
    position: relative;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-media);
    background: var(--color-surface);
    box-shadow: var(--shadow);
  }

  .case-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focal, 0 0);
  }

  /* Parts of Exolog used in this project */
  .case-parts {
    padding-block: clamp(5rem, 9vw, 8rem);
    background: var(--color-tint);
  }

  .case-parts__head {
    grid-column: 1 / span 5;
    align-self: start;
    --flow-space: 1rem;
  }

  .case-parts__list {
    grid-column: 7 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .case-parts__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
  }

  .case-parts__list li::before {
    content: "";
    grid-row: 1 / span 2;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.2rem;
    background: var(--color-teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%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 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .case-parts__list strong {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
  }

  .case-parts__list span {
    line-height: 1.5;
    color: var(--color-ink-muted);
  }

  /* Next case: one big link to the next project */
  .case-next {
    padding-block: clamp(5rem, 9vw, 8rem);
  }

  .case-next__link {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
    text-decoration: none;
  }

  .case-next__text {
    grid-column: 1 / span 5;
  }

  .case-next__label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-teal-text);
  }

  .case-next__name {
    margin-top: 0.5rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-weight: 700;
  }

  .case-next__name::after {
    content: " \2192";
    color: var(--color-teal);
    transition: margin-left var(--ease);
  }

  .case-next__link:hover .case-next__name::after {
    margin-left: 0.15em;
  }

  .case-next__tile {
    grid-column: 7 / -1;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-tile);
    background: var(--color-mist);
  }

  .case-next__tile img {
    position: absolute;
    left: 9%;
    top: 11%;
    width: 122%;
    max-width: none;
    border-radius: var(--radius-shot) 0 0 0;
    box-shadow: var(--shadow);
    transition: translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .case-next__link:hover .case-next__tile img {
    translate: -8px -8px;
  }

  /* Temporary copy marker */
  .temp-copy::before {
    content: "Tijdelijke tekst";
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-control);
    background: rgb(227 95 37 / 0.12);
    font-size: 0.75rem;
    font-weight: 600;
    color: #B5481A;
  }

  @media (max-width: 60rem) {
    .case-parts__head,
    .case-parts__list,
    .case-next__text,
    .case-next__tile {
      grid-column: 1 / -1;
    }

    .case-parts__list {
      margin-top: 2.5rem;
    }

    .case-next__tile {
      margin-top: 2rem;
    }
  }

  @media (max-width: 40rem) {
    .case-parts__list {
      grid-template-columns: 1fr;
    }
  }
}

@layer exception {
  /* Case hero: the tint field stops halfway behind the screenshot */
  .page-hero[data-variant="case"] {
    --overlap: clamp(8rem, 18vw, 16rem);
  }

  :root:not(:has(.hero)) .page-hero[data-variant="case"]::before {
    border-radius: 0;
  }

  .page-hero[data-variant="case"] .page-hero__copy {
    grid-column: 1 / -1;
  }

  .page-hero[data-variant="case"] .page-hero__aside {
    grid-column: 1 / span 8;
    margin-top: clamp(1.5rem, 3vw, 2rem);
  }

  .page-hero[data-variant="case"] .lede {
    max-width: 52ch;
    font-size: var(--step-1);
  }

  @media (max-width: 60rem) {
    .page-hero[data-variant="case"] .page-hero__aside {
      grid-column: 1 / -1;
    }
  }

  .case-shot[data-case="mistergold"] { --focal: 0 0; }
  .case-shot[data-case="over-mathenesse"] { --focal: 0 30%; }
  .case-shot[data-case="morse-contact"] { --focal: 0 10%; }
  .case-shot[data-case="franken-zorg"] { --focal: 0 0; }
  .case-shot[data-case="zonweringstunter"] { --focal: 0 0; }
}

/* --- components/partner-types.css --- */
@layer block {
  /*
    Partner types: three genuinely comparable routes as big statement cards, each on its
    own field (tint · navy · teal) so they read as distinct, with one action each.
  */
  .partner-types {
    padding-block: clamp(5rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem);
  }

  .partner-types__head {
    grid-column: 1 / span 8;
    --flow-space: 1rem;
  }

  .partner-types__list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin-top: clamp(3rem, 6vw, 4.5rem);
  }

  .ptype {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: clamp(26rem, 36vw, 32rem);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--radius-tile);
    background: var(--color-tint);
    transition: translate 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .ptype:hover {
    translate: 0 -6px;
  }

  .ptype__who {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-teal-text);
  }

  .ptype h3 {
    margin-top: auto;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 700;
  }

  .ptype p {
    margin-top: 1rem;
    max-width: 34ch;
    line-height: 1.55;
    color: var(--color-ink-muted);
  }

  .ptype__link {
    margin-top: 1.75rem;
    font-weight: 700;
    text-decoration: none;
  }

  .ptype__link::after {
    content: " \2192";
    color: var(--color-teal-text);
  }

  /* whole card clickable */
  .ptype__link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .ptype:has(.ptype__link:focus-visible) {
    outline: 2px solid var(--color-teal);
    outline-offset: 4px;
  }

  .ptype__link:focus-visible {
    outline: none;
  }

  @media (max-width: 60rem) {
    .partner-types__head {
      grid-column: 1 / -1;
    }

    .partner-types__list {
      grid-template-columns: 1fr;
    }

    .ptype {
      min-height: 20rem;
    }
  }
}

@layer exception {
  .ptype[data-tone="navy"],
  .ptype[data-tone="teal"] {
    color: #fff;
  }

  .ptype[data-tone="navy"] {
    background: var(--gradient-foundation);
  }

  .ptype[data-tone="teal"] {
    background: var(--gradient-closing);
  }

  .ptype[data-tone="navy"] .ptype__who,
  .ptype[data-tone="navy"] .ptype__link::after {
    color: var(--color-teal-bright);
  }

  .ptype[data-tone="teal"] .ptype__who,
  .ptype[data-tone="teal"] .ptype__link::after {
    color: #fff;
  }

  .ptype[data-tone="navy"] p,
  .ptype[data-tone="teal"] p {
    color: rgb(255 255 255 / 0.85);
  }
}

/* --- components/roles.css --- */
@layer block {
  /*
    Roles (Partners): two halves of one collaboration — the agency on a light card, Exolog on
    a navy card — joined by a "+" in the middle. Same height, one composition.
  */
  .roles {
    padding-block: clamp(5rem, 9vw, 8rem);
  }

  .roles__head {
    grid-column: 1 / span 8;
    --flow-space: 1rem;
  }

  .roles__head p:not(.eyebrow) {
    max-width: 46ch;
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--color-ink-muted);
  }

  .roles__pair {
    grid-column: 1 / -1;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin-top: clamp(3rem, 6vw, 4.5rem);
  }

  .role {
    display: flex;
    flex-direction: column;
    min-height: clamp(30rem, 42vw, 38rem);
    padding: clamp(2rem, 4vw, 3.5rem);
    border-radius: var(--radius-tile);
    background: var(--color-tint);
  }

  .role__who {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-teal-text);
  }

  .role h3 {
    margin-top: 0.75rem;
    font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 700;
  }

  /* List without dividers: two columns of bold items, each with a check */
  .role__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin-top: auto;
    padding-top: clamp(2.5rem, 5vw, 4rem);
  }

  .role__list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .role__list li::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--color-teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%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 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* The joint: a "+" sitting on the seam between the two cards */
  .roles__plus {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    z-index: 1;
    width: 5.5rem;
    height: 5.5rem;
    border: 8px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-signal);
    box-shadow: 0 14px 40px -10px rgb(227 95 37 / 0.6);
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
  }

  @media (max-width: 60rem) {
    .roles__head {
      grid-column: 1 / -1;
    }

    .roles__pair {
      grid-template-columns: 1fr;
      gap: 0;
    }

    /* the + sits on the seam between the stacked cards */
    .roles__plus {
      position: relative;
      z-index: 1;
      left: auto;
      top: auto;
      translate: none;
      order: 2;
      justify-self: center;
      margin-block: -2.75rem;
    }

    .role[data-side="exolog"] {
      order: 3;
    }
  }
}

@layer exception {
  .role[data-side="exolog"] {
    background: var(--gradient-foundation);
    color: #fff;
  }

  .role[data-side="exolog"] .role__who {
    color: var(--color-teal-bright);
  }

  .role[data-side="exolog"] .role__list li::before {
    background: var(--color-teal-bright);
  }

  /* Wide screens: the Exolog card sits lower — two parts that meet, not two equal boxes */
  @media (min-width: 60.01rem) {
    .role[data-side="exolog"] {
      margin-top: clamp(4rem, 8vw, 6rem);
    }

    .role[data-side="agency"] {
      margin-bottom: clamp(4rem, 8vw, 6rem);
    }
  }
}

/* --- components/steps.css --- */
@layer block {
  /*
    Steps (Partners: how a collaboration runs): four large numbered steps on one teal line
    across a tint section. Who does what is named per step.
  */
  .steps {
    padding-block: clamp(5rem, 9vw, 8rem);
    background: var(--color-tint);
  }

  .steps__head {
    grid-column: 1 / span 8;
    --flow-space: 1rem;
  }

  .steps__list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin-top: clamp(3rem, 6vw, 4.5rem);
    counter-reset: step;
  }

  .step {
    position: relative;
    padding-top: 4.5rem;
    counter-increment: step;
  }

  /* line through the numbers */
  .step::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: calc(-1 * var(--grid-gap));
    border-top: 2px solid var(--color-teal);
  }

  .step:last-child::before {
    right: 0;
  }

  .step::after {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-teal);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
  }

  .step h3 {
    font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.75rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .step__who {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-teal-text);
  }

  .step p:last-child {
    margin-top: 0.6rem;
    max-width: 30ch;
    line-height: 1.55;
    color: var(--color-ink-muted);
  }

  @media (max-width: 60rem) {
    .steps__head {
      grid-column: 1 / -1;
    }

    .steps__list {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .step {
      padding: 0 0 2.25rem 4.25rem;
    }

    .step::before {
      top: 0;
      bottom: 0;
      left: calc(1.5rem - 1px);
      right: auto;
      border-top: 0;
      border-left: 2px solid var(--color-teal);
    }

    .step:last-child::before {
      display: none;
    }
  }
}

/* --- components/approach.css --- */
@layer block {
  /*
    Approach (Maatwerk): dark chapter comparing two routes. The usual route is long and
    dashed (muted); the Exolog route is shorter and solid teal. No competitor is named.
  */
  .approach {
    overflow: clip;
    padding-block: var(--section-space);
    background: var(--gradient-foundation);
    color: #fff;
  }

  .approach .eyebrow,
  .approach .mark {
    color: var(--color-teal-bright);
  }

  .approach__head {
    grid-column: 1 / span 8;
    --flow-space: 1.25rem;
  }

  .approach__head .lede {
    max-width: 44ch;
    color: var(--color-on-dark);
  }

  .approach__routes {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 5rem);
    margin-top: clamp(3.5rem, 7vw, 5rem);
  }

  .route h3 {
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .route__steps {
    margin-top: 2rem;
  }

  .route__steps li {
    position: relative;
    padding: 0 0 1.5rem 2.75rem;
    font-size: 1.1875rem;
    font-weight: 600;
  }

  /* dot */
  .route__steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px dashed rgb(255 255 255 / 0.5);
    border-radius: 50%;
  }

  /* line to the next dot */
  .route__steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(0.55rem - 1px);
    top: 1.6rem;
    bottom: 0.2rem;
    border-left: 2px dashed rgb(255 255 255 / 0.3);
  }

  .route__result {
    margin-top: 0.75rem;
    font-size: 1.0625rem;
    color: rgb(255 255 255 / 0.65);
  }

  @media (max-width: 60rem) {
    .approach__head {
      grid-column: 1 / -1;
    }

    .approach__routes {
      grid-template-columns: 1fr;
    }
  }
}

@layer exception {
  .route[data-route="usual"] .route__steps li {
    color: rgb(255 255 255 / 0.6);
  }

  .route[data-route="exolog"] .route__steps li::before {
    border: 0;
    background: var(--color-teal-bright);
  }

  .route[data-route="exolog"] .route__steps li:not(:last-child)::after {
    border-left: 2px solid var(--color-teal-bright);
  }

  .route[data-route="exolog"] .route__result {
    color: var(--color-teal-bright);
    font-weight: 700;
  }

  /* Partner-type cards used as a 2×2 collection (Maatwerk: what we build) */
  @media (min-width: 60.01rem) {
    .partner-types__list[data-columns="2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .partner-types__list[data-columns="2"] .ptype {
      min-height: clamp(22rem, 30vw, 26rem);
    }
  }

  /* Showcase pair on Maatwerk: two equal cases */
  .work-list[data-pair] .work {
    grid-column: span 6;
  }

  @media (max-width: 60rem) {
    .work-list[data-pair] .work {
      grid-column: 1 / -1;
    }
  }
}

@layer exception {
  /* Over Exolog: the dark chapter closes with three white-check outcomes */
  .approach .identity__outcomes {
    margin-top: clamp(3rem, 6vw, 4.5rem);
  }
}

/* --- components/contact-form.css --- */
@layer block {
  /*
    Contact: form on a tint panel left, "what happens next" on the right.
    Real labels, native validation, a status line for the result.
  */
  .contact {
    padding-block: clamp(4rem, 8vw, 6rem) clamp(5rem, 9vw, 8rem);
  }

  .contact__form {
    grid-column: 1 / span 7;
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: var(--radius-tile);
    background: var(--color-tint);
  }

  .contact__form h2 {
    font-size: var(--step-heading);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
  }

  .field {
    display: grid;
    gap: 0.45rem;
  }

  .field[data-span="full"] {
    grid-column: 1 / -1;
  }

  .field label,
  .field legend {
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .field__optional {
    font-weight: 400;
    color: var(--color-ink-muted);
  }

  .field input,
  .field textarea {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid #C9D6DA;
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: 1rem;
    transition: border-color var(--ease);
  }

  .field textarea {
    min-height: 9rem;
    resize: vertical;
  }

  .field input:hover,
  .field textarea:hover {
    border-color: var(--color-teal);
  }

  .field input:focus-visible,
  .field textarea:focus-visible {
    outline-offset: 0;
    border-color: var(--color-teal);
  }

  .contact__consent {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
  }

  .contact__submit {
    margin-top: 1.5rem;
  }

  .contact__status {
    margin-top: 1rem;
    font-weight: 600;
  }

  .contact__status:empty {
    display: none;
  }

  /* Aside: what happens next */
  .contact__aside {
    grid-column: 9 / -1;
    --flow-space: 1rem;
  }

  .contact__aside h2 {
    font-size: var(--step-heading);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .next-steps {
    padding: 0;
    list-style: none;
    counter-reset: next;
  }

  .next-steps li {
    position: relative;
    padding: 0 0 1.75rem 3.25rem;
    counter-increment: next;
  }

  .next-steps li::before {
    content: counter(next);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-teal);
    color: #fff;
    font-weight: 700;
  }

  .next-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(1.125rem - 1px);
    top: 2.5rem;
    bottom: 0.25rem;
    border-left: 2px solid var(--color-teal);
  }

  .next-steps strong {
    display: block;
    padding-top: 0.25rem;
    font-size: 1.125rem;
  }

  .next-steps span {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-ink-muted);
    line-height: 1.5;
  }

  .contact__links {
    margin-top: 2.5rem;
  }

  .contact__links ul {
    margin-top: 1.5rem;
  }

  .contact__links ul {
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.9rem;
  }

  .contact__links a {
    font-size: 1.1875rem;
    font-weight: 700;
    text-decoration: none;
  }

  .contact__links a::after {
    content: " \2192";
    color: var(--color-teal-text);
  }

  .contact__links a:hover {
    color: var(--color-teal-text);
  }

  @media (max-width: 60rem) {
    .contact__form,
    .contact__aside {
      grid-column: 1 / -1;
    }

    .contact__aside {
      margin-top: 3.5rem;
    }
  }

  @media (max-width: 40rem) {
    .form-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* --- components/player.css --- */
@layer block {
  /* Video player: 16:9 poster with a centred play overlay that hides once playing */
  .player {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-media);
    background: var(--color-surface);
    box-shadow: var(--shadow);
  }

  .player__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 0;
    border-radius: inherit; /* some browsers don't clip a video layer to its parent radius */
  }

  .player__play {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1.25rem 0.55rem 0.55rem;
    border: 0;
    border-radius: 999px;
    background: rgb(15 34 54 / 0.82);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.5);
    transition: background-color var(--ease), scale var(--ease);
  }

  .player__play:hover {
    background: rgb(15 34 54 / 0.94);
    scale: 1.03;
  }

  .player__play:focus-visible {
    outline-color: #fff;
  }

  .player__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-signal);
  }

  .player__icon svg {
    width: 0.9rem;
    height: 0.9rem;
    margin-left: 2px;
    fill: #fff;
  }

  .player__time {
    font-weight: 500;
    color: rgb(255 255 255 / 0.6);
  }

  @media (max-width: 60rem) {
    .player__play {
      padding-right: 1rem;
      font-size: 0.9375rem;
    }
  }
}

@layer exception {
  .player[data-state="playing"] .player__play {
    display: none;
  }
}

/* --- components/clients.css --- */
@layer block {
  /* Client strip: one quiet line of proof directly under the hero */
  .clients {
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
  }

  .clients__inner {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  .clients__label {
    flex: 0 0 auto;
    max-width: 11rem;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--color-ink-muted);
  }

  .clients__label strong {
    display: block;
    font-size: 1.0625rem;
    color: var(--color-ink);
  }

  .clients__logos {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
  }

  /* Uniform greyscale at equal optical size; colour returns on hover */
  .clients__logos img {
    height: var(--logo-height, 2rem);
    width: auto;
    max-width: none;
    mix-blend-mode: multiply;
    filter: grayscale(1);
    opacity: 0.7;
    transition: opacity var(--ease), filter var(--ease);
  }

  .clients__logos li:hover img {
    opacity: 1;
    filter: none;
  }

  @media (max-width: 72rem) {
    .clients__inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.25rem;
    }

    .clients__label {
      max-width: none;
    }

    .clients__label strong {
      display: inline;
    }

    .clients__logos {
      width: 100%;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 1.25rem 2.25rem;
    }
  }
}

@layer exception {
  /* Per-logo optical size: logos differ in proportion and visual weight.
     import: keyed on the logo file name; Pim's data-logo attribute would have become an item field
     with the same name as the logo picture itself. */
  .clients__logos li:has(> img[src*="logos-frankenzorg"]),
  .clients__logos li:has(> img[src*="logos-mijnachtertuin"]) { --logo-height: 2.1rem; }
  .clients__logos li:has(> img[src*="logos-morse"]) { --logo-height: 1.6rem; }
  .clients__logos li:has(> img[src*="logos-zonweringstunter"]) { --logo-height: 2.5rem; }
  .clients__logos li:has(> img[src*="logos-latenzo"]) { --logo-height: 1.9rem; }
}

@layer exception {
  /* When the strip closes a page (before the CTA) it needs room below as well */
  .clients:has(+ .closing) {
    padding-bottom: clamp(4rem, 8vw, 6rem);
  }
}

/* --- components/pillars.css --- */
@layer block {
  /* Three pillars directly under the hero: icon, heading, one line */
  .pillars {
    padding-block: clamp(5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
  }

  .pillars__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
  }

  .pillars__icon {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--color-ink);
  }

  .pillars__icon .accent {
    color: var(--color-teal);
  }

  .pillars h3 {
    margin-top: 1.5rem;
    font-size: var(--step-subheading);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .pillars p {
    margin-top: 0.6rem;
    max-width: 34ch;
    color: var(--color-ink-muted);
  }

  @media (max-width: 60rem) {
    .pillars__list {
      grid-template-columns: 1fr;
      gap: 3.5rem;
    }
  }
}

/* --- components/feature.css --- */
@layer block {
  /* Alternating text / panel rows; one chapter of concrete product capabilities */
  .features {
    padding-block: clamp(3rem, 6vw, 5rem) var(--section-space);
  }

  .feature {
    align-items: center;
  }

  .feature + .feature {
    margin-top: clamp(5rem, 9vw, 8rem);
  }

  .feature__text {
    grid-column: 8 / -1;
    grid-row: 1;
  }

  .feature__panel {
    grid-column: 1 / span 6;
    grid-row: 1;
  }

  .feature:nth-child(even) .feature__text {
    grid-column: 1 / span 5;
  }

  .feature:nth-child(even) .feature__panel {
    grid-column: 7 / -1;
  }

  .feature h3,
  .feature__heading {
    font-size: var(--step-heading);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .feature p {
    max-width: 40ch;
    color: var(--color-ink-muted);
  }

  /* Panel: teal field with a real screenshot inset top-left, bleeding off right and bottom */
  .panel {
    position: relative;
    aspect-ratio: 6 / 5;
    overflow: hidden;
    border-radius: var(--radius-panel);
    background: var(--color-teal-deep);
  }

  .panel__frame {
    position: absolute;
    inset: 11% -1px -1px 11%;
    overflow: hidden;
    border-radius: var(--radius-shot) 0 0 0;
    background: var(--color-surface);
    box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.45);
  }

  /* --crop-width / --crop-x / --crop-y choose which part of the screenshot shows */
  .panel__frame img {
    width: var(--crop-width, 160%);
    max-width: none;
    translate: calc(var(--crop-x, 0%) * -1) calc(var(--crop-y, 0%) * -1);
  }

  @media (max-width: 60rem) {
    .feature__text,
    .feature:nth-child(even) .feature__text {
      grid-column: 1 / -1;
      grid-row: 1;
    }

    .feature__panel,
    .feature:nth-child(even) .feature__panel {
      grid-column: 1 / -1;
      grid-row: 2;
      margin-top: 2rem;
    }

    .panel {
      aspect-ratio: 5 / 4;
    }
  }
}

@layer exception {
  /* Single feature between two sections: equal space above and below */
  .features[data-space="even"] {
    padding-block: clamp(5rem, 9vw, 8rem);
  }

  /* Crops per screenshot — keep the relevant UI in view and the account bar out of it */
  .panel[data-crop="editing"] { --crop-width: 165%; }
  .panel[data-crop="blocks"] { --crop-x: 5%; --crop-y: 5.5%; }
  .panel[data-crop="content-types"] { --crop-x: 14%; --crop-y: 6.2%; }
  .panel[data-crop="editions"] { --crop-x: 30%; --crop-y: 6.2%; }
  .panel[data-crop="pages"] { --crop-width: 210%; --crop-x: 5%; --crop-y: 5%; }
}

/* --- components/foundation.css --- */
@layer block {
  /* The dark "underneath" chapter: six platform qualities as cards */
  .foundation {
    overflow: clip;
    padding-block: var(--section-space);
    background: var(--gradient-foundation);
    color: #fff;
  }

  .foundation .eyebrow {
    color: var(--color-teal-bright);
  }

  .foundation__head {
    grid-column: 1 / span 8;
    --flow-space: 1.5rem;
  }

  .foundation__head h2 span {
    display: block;
    color: rgb(255 255 255 / 0.55);
  }

  .foundation__head .lede {
    max-width: 36ch;
    color: var(--color-on-dark);
  }

  .usps {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.6vw, 1.5rem);
    margin-top: clamp(3.5rem, 7vw, 5.5rem);
  }

  .usp {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--radius-panel);
    background: rgb(255 255 255 / 0.035);
    transition: border-color var(--ease), background-color var(--ease);
  }

  .usp:hover {
    border-color: rgb(1 193 209 / 0.45);
    background: rgb(255 255 255 / 0.055);
  }

  .usp__art {
    width: 10rem;
    height: 4.5rem;
    margin-bottom: 2rem;
    overflow: visible;
    color: rgb(255 255 255 / 0.5);
  }

  .usp__art .accent {
    color: var(--color-teal-bright);
  }

  .usp h3 {
    font-size: 1.8rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 600;
  }

  .usp p {
    margin-top: 0.6rem;
    max-width: 30ch;
    line-height: 1.5;
    color: var(--color-on-dark);
  }

  @media (max-width: 60rem) {
    .foundation__head {
      grid-column: 1 / -1;
    }

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

  @media (max-width: 40rem) {
    .usps {
      grid-template-columns: 1fr;
    }
  }
}

@layer exception {
  /* Wide screens: the two rows are offset against each other — never further than the page margin allows */
  @media (min-width: 60.01rem) {
    .usps {
      --edge: max(var(--gutter), (100vw - var(--content)) / 2);
      --shift: clamp(0px, var(--edge) - 1rem, 50px);
    }

    .usp:nth-child(-n + 3) {
      translate: calc(var(--shift) * -1) 0;
    }

    .usp:nth-child(n + 4) {
      translate: var(--shift) 0;
    }
  }
}

/* --- components/showcases.css --- */
@layer block {
  .showcases {
    overflow: clip; /* the stage slides in from beyond the right edge */
    padding-block: var(--section-space) clamp(5rem, 8vw, 8rem);
  }

  .showcases__head {
    grid-column: 1 / span 8;
    align-self: end;
  }

  .showcases__controls {
    grid-column: 9 / -1;
    grid-row: 1;
    align-self: end;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
    --cluster-space: 0.5rem;
  }

  .showcases__controls .button {
    margin-right: 1.25rem;
  }

  .showcases__intro {
    grid-column: 1 / span 7;
    max-width: 40ch;
    margin-top: 1.25rem;
  }

  /* Stage wraps the rail so the reveal moves the row as one unit — animating the cards
     themselves would make the snapping scroll container shift its scroll position */
  .showcases__stage {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
  }

  .scroll-button {
    display: grid;
    place-items: center;
    width: 2.875rem;
    height: 2.875rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
  }

  .scroll-button:hover:not(:disabled) {
    border-color: var(--color-ink);
  }

  .scroll-button:disabled {
    opacity: 0.35;
    cursor: default;
  }

  /*
    Case card: every case gets the same stage — mist tile, screenshot inset
    top-left and bleeding off — so differing client brands read as one collection.
    The project type is the headline; the whole card is clickable.
  */
  .case {
    position: relative;
  }

  .case__tile {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-tile);
    background: var(--color-mist);
    transition: background-color 0.25s ease;
  }

  .case__tile img {
    position: absolute;
    left: 10%;
    top: 12%;
    width: 125%;
    max-width: none;
    border-radius: var(--radius-shot) 0 0 0;
    box-shadow: var(--shadow);
    transition: translate 0.35s ease;
  }

  .case:hover .case__tile {
    background: var(--color-tint);
  }

  .case:hover .case__tile img {
    translate: -6px -6px;
  }

  .case__type {
    margin-top: 1.5rem;
    font-size: var(--step-subheading);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .case__name {
    margin-top: 0.6rem;
    font-size: 1.375rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 600;
  }

  .case__name a {
    color: var(--color-teal-text);
    text-decoration: none;
  }

  .case__name a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .case__name a:focus-visible {
    outline: none;
  }

  .case:has(a:focus-visible) .case__tile {
    outline: 2px solid var(--color-teal);
    outline-offset: 3px;
  }

  .case p {
    margin-top: 0.3rem;
    max-width: 38ch;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
  }

  @media (max-width: 60rem) {
    .showcases__head,
    .showcases__intro {
      grid-column: 1 / -1;
    }

    .showcases__controls {
      grid-column: 1 / -1;
      grid-row: auto;
      order: 3;
      justify-content: flex-start;
      margin-top: 1.25rem;
      padding: 0;
    }

    .showcases__controls .scroll-button {
      display: none;
    }
  }
}

@layer exception {
  /* Wide screens: the rail starts 50px left of the content edge, echoing the offset
     foundation cards — never closer than 1rem to the viewport edge */
  @media (min-width: 60.01rem) {
    .showcases__rail {
      --rail-start: max(1rem, max(var(--gutter), (100% - var(--content)) / 2) - 50px);
    }
  }

  /* Temporary project until real cases are supplied */
  .case[data-placeholder] .case__name::after {
    content: " · placeholder";
    color: var(--color-signal);
    font-weight: 500;
  }
}

/* --- components/capabilities.css --- */
@layer block {
  .capabilities {
    padding-block: clamp(5rem, 9vw, 8rem);
    background: var(--color-mist);
  }

  .capabilities__head {
    grid-column: 1 / span 6;
    align-self: end;
    --flow-space: 1rem;
  }

  .capabilities__intro {
    grid-column: 8 / -1;
    align-self: end;
  }

  .capabilities__intro p {
    max-width: 36ch;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
  }

  .capabilities__intro .button {
    margin-top: 1.25rem;
  }

  /* One joined panel divided by hairlines, so nine items read as a whole rather than nine cards */
  .capability-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-panel);
    background: var(--color-line);
  }

  .capability-grid li {
    background: var(--color-surface);
  }

  .capability {
    --pad: clamp(1.75rem, 2.6vw, 2.5rem);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--pad);
    text-decoration: none;
    transition: background-color var(--ease);
  }

  .capability__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1.75rem;
    color: var(--color-ink);
  }

  .capability__icon .accent {
    color: var(--color-teal);
  }

  .capability__title {
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 700;
  }

  .capability__text {
    margin-top: 0.45rem;
    max-width: 30ch;
    line-height: 1.5;
    color: var(--color-ink-muted);
  }

  .capability::after {
    content: "\2192";
    position: absolute;
    top: var(--pad);
    right: var(--pad);
    font-size: 1.25rem;
    color: var(--color-teal-text);
    opacity: 0;
    translate: -6px 0;
    transition: opacity var(--ease), translate var(--ease);
  }

  .capability:hover,
  .capability:focus-visible {
    background: var(--color-tint);
  }

  .capability:hover .capability__title {
    color: var(--color-teal-text);
  }

  .capability:hover::after,
  .capability:focus-visible::after {
    opacity: 1;
    translate: 0 0;
  }

  .capability:focus-visible {
    outline-offset: -2px;
  }

  @media (max-width: 60rem) {
    .capabilities__head,
    .capabilities__intro {
      grid-column: 1 / -1;
    }

    .capabilities__intro {
      margin-top: 1.25rem;
    }

    .capability-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 2.5rem;
    }

    /* No hover on touch: show the arrow */
    .capability::after {
      opacity: 1;
      translate: 0 0;
    }
  }

  @media (max-width: 40rem) {
    .capability-grid {
      grid-template-columns: 1fr;
    }
  }
}

@layer exception {
  /* Informational item (not a link): no arrow, no hover state */
  div.capability::after {
    content: none;
  }

  div.capability:hover {
    background: none;
  }

  div.capability:hover .capability__title {
    color: inherit;
  }
}

/* --- components/closing.css --- */
@layer block {
  /* Closing CTA: text block centred, text itself left-aligned */
  .closing {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(6rem, 11vw, 10rem);
    background: var(--gradient-closing);
    color: #fff;
  }

  /*
    Pulse: a soft band of light sweeps diagonally from top-left to bottom-right once every
    3.6 seconds (about 2s sweep, then rest). Decorative only; off under reduced motion.
  */
  .closing::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -50%;
    background: linear-gradient(
      135deg,
      transparent 36%,
      rgb(1 193 209 / 0.28) 45%,
      rgb(255 255 255 / 0.26) 50%,
      rgb(1 193 209 / 0.28) 55%,
      transparent 64%
    );
    translate: -60% -60%;
    animation: closing-pulse 3.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    pointer-events: none;
  }

  @keyframes closing-pulse {
    0% { translate: -60% -60%; opacity: 0; }
    10% { opacity: 1; }
    45% { opacity: 1; }
    55%, 100% { translate: 60% 60%; opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .closing::before {
      animation: none;
      opacity: 0;
    }
  }

  .closing__inner {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 60rem);
    --flow-space: 1.5rem;
  }

  .closing h2 {
    font-size: var(--step-display);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 700;
  }

  /* Opacities chosen to pass WCAG AA against the lightest end of the gradient */
  .closing h2 span {
    color: rgb(255 255 255 / 0.72);
  }

  .closing .lede {
    max-width: 38ch;
    color: rgb(255 255 255 / 0.95);
  }

  .closing__actions {
    margin-top: 2.5rem;
  }

  .closing :focus-visible {
    outline-color: #fff;
  }
}

/* --- components/site-footer.css --- */
@layer block {
  .site-footer {
    padding-block: clamp(4rem, 7vw, 5.5rem) 2rem;
    background: var(--color-ink);
    color: var(--color-on-dark);
    font-size: 0.9375rem;
  }

  .site-footer a {
    text-decoration: none;
  }

  .site-footer a:hover {
    color: #fff;
    text-decoration: underline;
  }

  .site-footer :focus-visible {
    outline-color: var(--color-teal-bright);
  }

  .site-footer__brand {
    grid-column: 1 / span 5;
  }

  .site-footer__brand img {
    height: 54px;
    width: auto;
  }

  .site-footer__brand p {
    max-width: 30ch;
    margin-top: 1.5rem;
    font-size: 1rem; /* same size as the link columns */
    line-height: 1.6;
  }

  /* Newsletter */
  .newsletter {
    grid-column: 7 / -1;
  }

  .newsletter h2 {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: #fff;
  }

  .newsletter__field {
    display: flex;
    max-width: 30rem;
    margin-top: 1.5rem;
  }

  .newsletter__field input {
    flex: 1;
    min-width: 0;
    min-height: 3.5rem;
    padding: 0 1.25rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-right: 0;
    border-radius: var(--radius-control) 0 0 var(--radius-control);
    background: #fff;
    color: var(--color-ink);
    font-size: 1rem;
  }

  .newsletter__field input::placeholder {
    color: #6B7785;
  }

  .newsletter__field input:focus-visible {
    outline-color: var(--color-teal-bright);
    outline-offset: 2px;
  }

  .newsletter__field button {
    min-width: 3.5rem;
    border: 0;
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    background: var(--color-signal);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }

  .newsletter__field button svg {
    width: 1.4rem;
    height: 1.4rem;
    margin-inline: auto;
  }

  .newsletter__field button:hover {
    background: var(--color-signal-hover);
  }

  .newsletter__note {
    max-width: 52ch;
    margin-top: 0.9rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(255 255 255 / 0.55);
  }

  .newsletter__status {
    margin-top: 0.75rem;
    font-weight: 600;
    color: #fff;
  }

  .newsletter__status:empty {
    display: none;
  }

  /* Link columns */
  .footer-nav {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
  }

  .footer-nav h2 {
    margin-bottom: 1.1rem;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: #fff;
  }

  .footer-nav__list {
    display: grid;
    gap: 0.7rem;
    font-size: 1rem;
  }

  /* Base row: legal left, socials right */
  .site-footer__base {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / 0.12);
    font-size: 1rem; /* same size as the link columns */
  }

  .site-footer__legal {
    --cluster-space: 0.75rem 2rem;
  }

  .site-footer__legal ul {
    --cluster-space: 1.5rem;
  }

  .socials {
    --cluster-space: 0.75rem;
  }

  .socials a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-signal);
    color: #fff;
    transition: background-color var(--ease);
  }

  .socials a:hover {
    background: var(--color-signal-hover);
  }

  .socials svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
  }

  @media (max-width: 60rem) {
    .site-footer__brand,
    .newsletter {
      grid-column: 1 / -1;
    }

    .newsletter {
      margin-top: 3rem;
    }

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

@layer block {
  /* import: the newsletter heading, form and note sit in one wrapper; the sent message takes the form's place */
  .newsletter__status > p { margin: 0; }
}

/* --- blocks/pb-home-hero.css --- */
@layer block {
  /*
    home-hero: the copy is one rich text (hero.css styled p.eyebrow / h1.hero__title / p.hero__lede
    by class). The eyebrow + title are an hgroup, the two statements of the title are split by a
    <br>, the second one is a <mark>. The actions could not stay inside the rich text and are the
    next grid item, in the copy's column.
  */
  [data-block="home-hero"] .hero__copy hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-text);
  }

  /* was .hero__title { margin-top: 1.25rem } */
  [data-block="home-hero"] .hero__copy hgroup > * + * {
    margin-top: 1.25rem;
  }

  /* .hero__title; each statement on its own line through the <br>. No nowrap: a longer line (a translation,
     Chrome's page translate) wraps inside its columns instead of running under the video. */
  [data-block="home-hero"] .hero__copy hgroup > h1 {
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  /* .hero__lede */
  [data-block="home-hero"] .hero__copy > p.lede {
    margin-top: 2rem;
    max-width: 30ch;
  }

  /* same column as .hero__copy; Pim's .hero__actions keeps the 2.5rem above */
  [data-block="home-hero"] .hero__actions {
    grid-column: 1 / span 6;
  }

  @media (max-width: 60rem) {
    [data-block="home-hero"] .hero__actions {
      grid-column: 1 / -1;
    }
  }
}

@layer block {
  /* The two calls to action are CTA divs; the import renders them display: contents, so the cluster spaces the links as before */
  [data-block="home-hero"] .hero__actions > .rich-text {
    display: contents;
  }
}

@layer block {
  /* The buttons stand beside the copy field as their own fields (CTA rule), outside .hero__copy and its
     z-index: 1. The stage is pulled up over the copy row (hero.css: margin-top clamp(-23rem, -25vw, -6rem))
     and painted later, so it covered the buttons and swallowed their clicks (Plabon, 19 Oct 2026). */
  [data-block="home-hero"] .hero__actions {
    position: relative;
    z-index: 1;
  }
}

/* --- blocks/pb-home-clients.css --- */
@layer block {
  /* home-clients: Pim's clients.css applies unchanged (the label is a text field, the logos a container with his li/img markup). */
}

/* --- blocks/pb-home-pillars.css --- */
@layer block {
  /*
    home-pillars: each pillar's h3 + p sit in a rich-text div after the icon. Pim's .pillars h3 and
    .pillars p are descendant rules and still reach them; the 1.5rem between icon and heading is
    put on the wrapper so it does not depend on the h3's margin collapsing through the div.
  */
  [data-block="home-pillars"] .pillars__list > li > .rich-text {
    margin-top: 1.5rem;
  }

  [data-block="home-pillars"] .pillars__list > li > .rich-text > h3 {
    margin-top: 0;
  }
}

/* --- blocks/pb-home-features.css --- */
@layer block {
  /*
    home-features: .feature__text is one rich text: p.eyebrow + h3 became an hgroup, the quiet
    button under the paragraph became <p><a class="text-link">. Pim's .feature h3 / .feature p
    still reach their elements.
  */
  [data-block="home-features"] .feature__text hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    /* Pim's .feature p (block layer) overruled the .eyebrow utility colour: the label was ink-muted */
    color: var(--color-ink-muted);
  }

  [data-block="home-features"] .feature__text hgroup > * + * {
    margin-top: var(--flow-space, 1.25rem);
  }

  /* .button[data-variant="quiet"], as the link looked as a direct child of .feature__text */
  [data-block="home-features"] .feature__text > p > a.text-link {
    display: inline-flex;
    align-items: center;
    padding: 0 0 3px;
    border-bottom: 2px solid currentColor;
    color: var(--color-ink);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
  }

  [data-block="home-features"] .feature__text > p > a.text-link:hover {
    color: var(--color-teal-text);
  }
}

@layer exception {
  /* Plabon, 19 Oct 2026: show the whole screenshot in the panel instead of Pim's inset crop
     (feature.css draws it at 160% and clips it). The frame keeps its place top-left and its
     width; its height follows the picture, so nothing is cut off. Remove this block to get the crop back. */
  [data-block="home-features"] .panel__frame {
    bottom: auto;
    border-radius: var(--radius-shot) 0 0 var(--radius-shot);
  }
  [data-block="home-features"] .panel__frame img {
    display: block;
    width: 100%;
    translate: none;
  }
}

/* --- blocks/pb-home-foundation.css --- */
@layer block {
  /*
    home-foundation: the head is one rich text (hgroup + lede). The h2 lost its .heading class and
    its first-line span (display:block + dimmed): a <mark> + <br> now. The usp bodies sit in a
    rich-text div; Pim's .usp h3 / .usp p are descendant rules and still apply.
  */
  [data-block="home-foundation"] .foundation__head hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-bright); /* .foundation .eyebrow */
  }

  [data-block="home-foundation"] .foundation__head hgroup > * + * {
    margin-top: var(--flow-space, 1.5rem);
  }

  /* .heading */
  [data-block="home-foundation"] .foundation__head hgroup > h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  /* .foundation__head h2 span: the first line, dimmed white (not teal) */
  [data-block="home-foundation"] .foundation__head hgroup > h2 > mark {
    color: rgb(255 255 255 / 0.55);
  }
}

/* --- blocks/pb-home-showcases.css --- */
@layer block {
  /* home-showcases: the head is one rich text (hgroup); the h2 lost its .heading class */
  [data-block="home-showcases"] .showcases__head hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-text);
  }

  [data-block="home-showcases"] .showcases__head hgroup > * + * {
    margin-top: var(--flow-space, 1.25rem);
  }

  [data-block="home-showcases"] .showcases__head hgroup > h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }
}

@layer block {
  /* The quiet link is a CTA div; the import renders it display: contents, so the cluster (and .showcases__controls .button) see the link itself */
  [data-block="home-showcases"] .showcases__controls > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-home-capabilities.css --- */
@layer block {
  /*
    home-capabilities: the head is one rich text (hgroup, h2 without .heading); the intro is one
    rich text whose quiet button became its last paragraph (<p><a class="text-link">).
  */
  [data-block="home-capabilities"] .capabilities__head hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-text);
  }

  [data-block="home-capabilities"] .capabilities__head hgroup > * + * {
    margin-top: var(--flow-space, 1.25rem); /* 1rem: .capabilities__head sets --flow-space */
  }

  [data-block="home-capabilities"] .capabilities__head hgroup > h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  /* the link's paragraph: Pim's .capabilities__intro .button { margin-top: 1.25rem }; the line box
     keeps the intro's own font metrics, as the inline-flex link had them as a direct child */
  [data-block="home-capabilities"] .capabilities__intro > p:has(> a.text-link) {
    margin-top: 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  /* .button[data-variant="quiet"] */
  [data-block="home-capabilities"] .capabilities__intro > p > a.text-link {
    display: inline-flex;
    align-items: center;
    padding: 0 0 3px;
    border-bottom: 2px solid currentColor;
    color: var(--color-ink);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
  }

  [data-block="home-capabilities"] .capabilities__intro > p > a.text-link:hover {
    color: var(--color-teal-text);
  }
}

/* --- blocks/pb-home-closing.css --- */
@layer block {
  /*
    home-closing: the h2 + lede are one rich text; the h2's span (dimmed white) is a <mark>.
    The actions could not stay inside the rich text: they are the next grid item, in the same
    centred 60rem column as .closing__inner (Pim's .closing__actions keeps the 2.5rem above).
  */
  [data-block="home-closing"] .closing__inner > h2 > mark {
    color: rgb(255 255 255 / 0.72);
  }

  [data-block="home-closing"] .closing__actions {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 60rem);
  }
}

@layer block {
  /* The two calls to action are CTA divs; the import renders them display: contents, so the cluster spaces the links as before */
  [data-block="home-closing"] .closing__actions > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-platform-hero.css --- */
@layer block {
  /* platform-hero: the page hero's eyebrow + h1 are one rich text (hgroup). Re-expressed from
     utilities/text.css (.eyebrow) and components/page-hero.css (.page-hero__title). */
  .page-hero__copy hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-text);
  }

  .page-hero__copy hgroup > h1 {
    margin-top: 1.25rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  /* The two calls to action are CTA divs; the import renders them display: contents,
     so the cluster spaces the links exactly as before. */
  .page-hero__actions > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-platform-intro.css --- */
@layer block {
  /* platform-intro: nothing to add. components/intro.css styles the text by descendant selectors,
     so the inner rich-text wrapper and the two claim spans keep their look. */
}

/* --- blocks/pb-platform-identity.css --- */
@layer block {
  /* platform-identity: the head's eyebrow + title + lede are one rich text (hgroup). Re-expressed from
     components/identity.css (.identity .eyebrow, .identity__title, .identity .mark) and utilities/text.css (.eyebrow).
     .identity__line (display: block) is written as a <br>. */
  .identity__head hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-bright);
  }

  .identity__head hgroup > h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  /* The hgroup now holds two of the flow's children (.identity__head sets --flow-space: 1.5rem) */
  .identity__head hgroup > * + * {
    margin-top: var(--flow-space, 1.25rem);
  }

  /* Key words on the dark field: Pim's .identity .mark only matches the class; the editor stores a <mark> */
  .identity__head mark {
    color: var(--color-teal-bright);
  }
}

/* --- blocks/pb-platform-explorer.css --- */
@layer block {
  /* platform-explorer: the head is one rich text, so its h2 lost the .heading class (re-expressed from global/global.css);
     the tab label is a hidden span the script reads to build the tabs and dots. */
  .explorer__head h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  .explorer__panel > .explorer__tabname {
    display: none;
  }

  /* Key words on the navy card: Pim's .explorer__text .mark only matches the class; the editor stores a <mark> */
  .explorer__text mark {
    color: var(--color-teal-bright);
  }

  /* "Bekijk maatwerk" is the body's last paragraph now. The link gets what .button[data-variant="quiet"]
     (components/button.css) and .explorer__text .button (components/explorer.css) gave it. */
  .explorer__text > p > a.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0 3px;
    border-bottom: 2px solid currentColor;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
  }

  .explorer__text > p > a.text-link:hover {
    color: var(--color-teal-bright);
  }

  /* The paragraph holding only that link keeps the 0.5rem the button had, not the 1rem flow space */
  .explorer__text > p:has(> a.text-link:only-child) {
    margin-top: 0.5rem;
  }
}

@layer exception {
  /* Two crop presets next to Pim's screenshot crops (components/explorer.css), so every item shares one picture
     markup: "art" places the line drawing where .explorer__art stood, "build" places the base/addition drawing
     where .explorer__build stood. The drawings are SVG files with their colours baked in. */
  .explorer__shot[data-crop="art"] {
    top: clamp(2rem, 4vw, 3rem);
    right: clamp(2rem, 4vw, 3rem);
    bottom: auto;
    left: auto;
    width: 42%;
    overflow: visible;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .explorer__shot[data-crop="build"] {
    right: 0;
    bottom: auto;
    overflow: visible;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .explorer__shot[data-crop="art"] img,
  .explorer__shot[data-crop="build"] img {
    width: 100%;
    translate: none;
  }

  @media (max-width: 60rem) {
    .explorer__shot[data-crop="art"] {
      width: 55%;
    }
  }
}

/* --- blocks/pb-platform-faq.css --- */
@layer block {
  /* platform-faq: "Alle vragen" is a CTA div; the import renders it display: contents, so
     .faq__head .button (components/faq.css) keeps its own margin-top: 1.5rem as before. */
  .faq__head > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-platform-closing.css --- */
@layer block {
  /* platform-closing: the title's lighter half was `.closing h2 span` (a colour only, components/closing.css);
     the editor stores a <mark>, restyled here from teal to that white. */
  .closing__inner mark {
    color: rgb(255 255 255 / 0.72);
  }

  /* The two calls to action are CTA divs; the import renders them display: contents,
     so the cluster spaces the links exactly as before. */
  .closing__actions > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-cms-hero.css --- */
@layer block {
  /* cms-hero: the page hero's eyebrow + h1 are one rich text (hgroup). Re-expressed from
     utilities/text.css (.eyebrow) and components/page-hero.css (.page-hero__title). */
  .page-hero__copy hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-text);
  }

  .page-hero__copy hgroup > h1 {
    margin-top: 1.25rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  /* The two calls to action are CTA divs; the import renders them display: contents,
     so the cluster spaces the links exactly as before. */
  .page-hero__actions > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-cms-intro.css --- */
@layer block {
  /* cms-intro: nothing to add. components/intro.css styles the text by descendant selectors,
     so the inner rich-text wrapper and the two claim spans keep their look. */
}

/* --- blocks/pb-cms-spotlight.css --- */
@layer block {
  /* cms-spotlight: the head's eyebrow + title + lede are one rich text (hgroup). Re-expressed from
     components/identity.css (.identity .eyebrow, .identity__title, .identity .mark) and utilities/text.css (.eyebrow).
     .identity__line (display: block) is written as a <br>. */
  .identity__head hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-bright);
  }

  .identity__head hgroup > h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  /* The hgroup now holds two of the flow's children (.identity__head sets --flow-space: 1.5rem) */
  .identity__head hgroup > * + * {
    margin-top: var(--flow-space, 1.25rem);
  }

  /* Key words on the dark field: Pim's .identity .mark only matches the class; the editor stores a <mark> */
  .identity__head mark {
    color: var(--color-teal-bright);
  }
}

/* --- blocks/pb-cms-explorer.css --- */
@layer block {
  /* cms-explorer: the head is one rich text, so its h2 lost the .heading class (re-expressed from global/global.css);
     the tab label is a hidden span the script reads to build the tabs and dots. */
  .explorer__head h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  .explorer__panel > .explorer__tabname {
    display: none;
  }

  /* Key words on the navy card: Pim's .explorer__text .mark only matches the class; the editor stores a <mark> */
  .explorer__text mark {
    color: var(--color-teal-bright);
  }
}

/* --- blocks/pb-cms-faq.css --- */
@layer block {
  /* cms-faq: "Alle vragen" is a CTA div; the import renders it display: contents, so
     .faq__head .button (components/faq.css) keeps its own margin-top: 1.5rem as before. */
  .faq__head > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-cms-closing.css --- */
@layer block {
  /* cms-closing: the title's lighter half was `.closing h2 span` (a colour only, components/closing.css);
     the editor stores a <mark>, restyled here from teal to that white. */
  .closing__inner mark {
    color: rgb(255 255 255 / 0.72);
  }

  /* The two calls to action are CTA divs; the import renders them display: contents,
     so the cluster spaces the links exactly as before. */
  .closing__actions > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-maatwerk-hero.css --- */
@layer block {
  /* maatwerk-hero: the page hero's eyebrow + h1 are one rich text (hgroup). Re-expressed from
     utilities/text.css (.eyebrow) and components/page-hero.css (.page-hero__title). */
  [data-block="maatwerk-hero"] .page-hero__copy hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: inherit;
    color: var(--color-teal-text);
  }

  [data-block="maatwerk-hero"] .page-hero__copy hgroup > h1 {
    margin-top: 1.25rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  /* The calls to action are CTA divs; the import renders them display: contents,
     so the cluster spaces the links exactly as before. */
  [data-block="maatwerk-hero"] .page-hero__actions > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-maatwerk-intro.css --- */
@layer block {
  /* maatwerk-intro: nothing to add. components/intro.css styles the text by descendant selectors
     (.intro__text p, .intro__claim span), so the inner rich-text wrapper and the two claim
     spans keep their look. */
}

/* --- blocks/pb-maatwerk-approach.css --- */
@layer block {
  /* The head is one rich text (hgroup): .approach .eyebrow / .approach .mark (components/approach.css,
     teal-bright on the dark field) and .heading (global.css) are re-expressed on the hgroup's children. */
  [data-block="maatwerk-approach"] .approach__head hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: inherit;
    color: var(--color-teal-bright);
  }

  [data-block="maatwerk-approach"] .approach__head hgroup > h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  [data-block="maatwerk-approach"] .approach__head hgroup > * + * {
    margin-top: var(--flow-space, 1.25rem);
  }

  [data-block="maatwerk-approach"] .approach__head mark {
    color: var(--color-teal-bright);
  }

  /* .route__steps is now a rich text holding a plain <ol> (components/approach.css re-expressed;
     a list without a class also needs the reset the ul[class] rule gave it). */
  [data-block="maatwerk-approach"] .route .rich-text ol {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
  }

  [data-block="maatwerk-approach"] .route .rich-text ol > li {
    position: relative;
    padding: 0 0 1.5rem 2.75rem;
    font-size: 1.1875rem;
    font-weight: 600;
  }

  /* dot */
  [data-block="maatwerk-approach"] .route .rich-text ol > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px dashed rgb(255 255 255 / 0.5);
    border-radius: 50%;
  }

  /* line to the next dot */
  [data-block="maatwerk-approach"] .route .rich-text ol > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(0.55rem - 1px);
    top: 1.6rem;
    bottom: 0.2rem;
    border-left: 2px dashed rgb(255 255 255 / 0.3);
  }
}

@layer exception {
  [data-block="maatwerk-approach"] .route[data-route="usual"] .rich-text ol > li {
    color: rgb(255 255 255 / 0.6);
  }

  [data-block="maatwerk-approach"] .route[data-route="exolog"] .rich-text ol > li::before {
    border: 0;
    background: var(--color-teal-bright);
  }

  [data-block="maatwerk-approach"] .route[data-route="exolog"] .rich-text ol > li:not(:last-child)::after {
    border-left: 2px solid var(--color-teal-bright);
  }
}

/* --- blocks/pb-maatwerk-build.css --- */
@layer block {
  /* maatwerk-build: a partner-type card's text is one rich field (body). The wrapper and its hgroup are
     layout-transparent so the li stays the flex column of components/partner-types.css
     (h3 margin-top: auto pushes heading, text and link to the foot of the card).
     .ptype__who and .ptype__link are re-expressed on the hgroup's label and the last paragraph's link. */
  [data-block="maatwerk-build"] .ptype > .rich-text,
  [data-block="maatwerk-build"] .ptype > .rich-text > hgroup {
    display: contents;
  }

  /* was .ptype__who (the rest - margin, measure, line-height - still comes from .ptype p) */
  [data-block="maatwerk-build"] .ptype > .rich-text > hgroup > p {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-teal-text);
  }

  /* was .ptype__link: the paragraph takes the link's place in the column, the link its look */
  [data-block="maatwerk-build"] .ptype > .rich-text > p:has(> a.text-link) {
    margin-top: 1.75rem;
    max-width: none;
    line-height: inherit;
    color: inherit;
  }

  [data-block="maatwerk-build"] .ptype > .rich-text > p > a.text-link {
    font-weight: 700;
    text-decoration: none;
  }

  [data-block="maatwerk-build"] .ptype > .rich-text > p > a.text-link::after {
    content: " \2192";
    color: var(--color-teal-text);
  }

  /* whole card clickable */
  [data-block="maatwerk-build"] .ptype > .rich-text > p > a.text-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  [data-block="maatwerk-build"] .ptype:has(a.text-link:focus-visible) {
    outline: 2px solid var(--color-teal);
    outline-offset: 4px;
  }

  [data-block="maatwerk-build"] .ptype > .rich-text > p > a.text-link:focus-visible {
    outline: none;
  }
}

@layer exception {
  [data-block="maatwerk-build"] .ptype[data-tone="navy"] > .rich-text > hgroup > p,
  [data-block="maatwerk-build"] .ptype[data-tone="navy"] > .rich-text > p > a.text-link::after {
    color: var(--color-teal-bright);
  }

  [data-block="maatwerk-build"] .ptype[data-tone="teal"] > .rich-text > hgroup > p,
  [data-block="maatwerk-build"] .ptype[data-tone="teal"] > .rich-text > p > a.text-link::after {
    color: #fff;
  }

  /* the link keeps the card's white on the dark fields (not the 85% of .ptype[data-tone] p) */
  [data-block="maatwerk-build"] .ptype[data-tone="navy"] > .rich-text > p:has(> a.text-link),
  [data-block="maatwerk-build"] .ptype[data-tone="teal"] > .rich-text > p:has(> a.text-link) {
    color: inherit;
  }
}

/* --- blocks/pb-maatwerk-steps.css --- */
@layer block {
  /* maatwerk-steps: the head is one rich text (hgroup); .eyebrow (utilities/text.css) and .heading (global.css)
     re-expressed on its children, with the head's flow rhythm (--flow-space: 1rem in components/steps.css). */
  [data-block="maatwerk-steps"] .steps__head hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: inherit;
    color: var(--color-teal-text);
  }

  [data-block="maatwerk-steps"] .steps__head hgroup > h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  [data-block="maatwerk-steps"] .steps__head hgroup > * + * {
    margin-top: var(--flow-space, 1.25rem);
  }

  /* The steps keep Pim's li.step markup (h3, p.step__who, p); numbers are CSS counters in components/steps.css. */
}

/* --- blocks/pb-maatwerk-developers.css --- */
@layer block {
  /* maatwerk-developers: a single feature; its text is one rich text (hgroup + paragraphs). .eyebrow (utilities/text.css)
     and .feature__heading (components/feature.css) re-expressed on the hgroup's children. */
  [data-block="maatwerk-developers"] .feature__text hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: inherit;
    color: var(--color-teal-text);
    max-width: none;
  }

  [data-block="maatwerk-developers"] .feature__text hgroup > h2 {
    font-size: var(--step-heading);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  [data-block="maatwerk-developers"] .feature__text hgroup > * + * {
    margin-top: var(--flow-space, 1.25rem);
  }
}

@layer exception {
  /* Plabon, 19 Oct 2026: show the whole screenshot in the panel instead of Pim's inset crop
     (feature.css draws it at 160% and clips it). The frame keeps its place top-left and its
     width; its height follows the picture, so nothing is cut off. Remove this block to get the crop back. */
  [data-block="maatwerk-developers"] .panel__frame {
    bottom: auto;
    border-radius: var(--radius-shot) 0 0 var(--radius-shot);
  }
  [data-block="maatwerk-developers"] .panel__frame img {
    display: block;
    width: 100%;
    translate: none;
  }
}

/* --- blocks/pb-maatwerk-cases.css --- */
@layer block {
  /* maatwerk-cases: the head keeps Pim's markup (plain title field); the case list keeps his li.work markup and
     components/work.css plus the .work-list[data-pair] exception (components/approach.css) apply unchanged. */
}

/* --- blocks/pb-maatwerk-faq.css --- */
@layer block {
  /* maatwerk-faq: "Alle vragen" is a CTA div; the import renders it display: contents, so
     .faq__head .button (components/faq.css) keeps its own margin-top: 1.5rem as before. */
  [data-block="maatwerk-faq"] .faq__head > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-maatwerk-closing.css --- */
@layer block {
  /* maatwerk-closing: the title's lighter half was `.closing h2 span` (a colour only, components/closing.css);
     the editor stores a <mark>, restyled here from teal to that white. */
  [data-block="maatwerk-closing"] .closing__inner h2 > mark {
    color: rgb(255 255 255 / 0.72);
  }

  /* The two calls to action are CTA divs; the import renders them display: contents,
     so the cluster spaces the links exactly as before. */
  [data-block="maatwerk-closing"] .closing__actions > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-showcases-hero.css --- */
@layer block {
  /*
    showcases-hero: the eyebrow + title pair of the page hero is one rich text, written as an
    <hgroup>. The eyebrow declarations (css/utilities/text.css) and the .page-hero__title
    declarations (css/components/page-hero.css) are re-expressed on the hgroup's children;
    the h1 keeps the 1.25rem it had above it.
  */
  [data-block="showcases-hero"] .page-hero__copy hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-text);
  }

  [data-block="showcases-hero"] .page-hero__copy hgroup > h1 {
    margin-top: 1.25rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }
}

/* --- blocks/pb-showcases-work.css --- */
@layer block {
  /*
    showcases-work: css/components/work.css styles the list and its items unchanged.
    Only the featured first case moved here (below).
  */
}

@layer exception {
  /*
    Featured case: Pim marked the first copy as the feature size - an attribute only the first
    copy carries, so it cannot be an item field. The same rules now follow the list position:
    full width, navy stage left (8 columns), text right aligned to the bottom, hero-size name.
  */
  @media (min-width: 60.01rem) {
    [data-block="showcases-work"] .work-list > li:first-of-type {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--grid-gap);
      align-items: end;
    }

    [data-block="showcases-work"] .work-list > li:first-of-type .work__tile {
      grid-column: 1 / span 8;
      aspect-ratio: 16 / 10;
    }

    [data-block="showcases-work"] .work-list > li:first-of-type .work__body {
      grid-column: 9 / -1;
      margin-top: 0;
      padding-bottom: 0.5rem;
    }

    [data-block="showcases-work"] .work-list > li:first-of-type .work__name {
      font-size: var(--step-hero);
    }
  }

  [data-block="showcases-work"] .work-list > li:first-of-type .work__tile,
  [data-block="showcases-work"] .work-list > li:first-of-type:hover .work__tile {
    background: var(--gradient-foundation);
  }
}

/* --- blocks/pb-showcases-clients.css --- */
@layer block {
  /*
    showcases-clients: css/components/clients.css styles the strip unchanged
    (label, logos container, per-logo optical size by data-logo). Nothing to re-express.
  */
}

/* --- blocks/pb-showcases-closing.css --- */
@layer block {
  /*
    showcases-closing: the heading and lede are one rich text inside .closing__inner (which
    keeps Pim's flow and --flow-space, inherited by the inner .flow div). The second half of the
    heading was `.closing h2 span` in css/components/closing.css - a colour only (white at 72%,
    no line break), so it is written as <mark> and gets that colour back here, over the teal
    the global mark rule gives it.
  */
  [data-block="showcases-closing"] .closing h2 mark {
    color: rgb(255 255 255 / 0.72);
  }
}

/* --- blocks/pb-showcase-page.css --- */
@layer block {
  /*
    showcase-page: the whole case page in one block. css/components/page-hero.css, intro.css
    and case-detail.css still style the inner .page-hero / .intro / .case-parts divs.
    Re-expressed here, from case-detail.css:
    - the facts definition list (.case-facts div, dt, dd) is a rich-text <ul><li><p><strong>term</strong> value</p></li></ul>;
    - the parts list (.case-parts__list li strong / span) is <li><p><strong>name</strong><br>text</p></li>;
    - both rich-text fields were display:flex / display:grid in Pim's CSS; a field may not be a
      layout, so the element is display:block and the layout moved to its <ul>.
    The reset only unstyles ul[class]; the classless list inside a rich text is reset here.
  */

  /* Facts: a wrapping row of term/value pairs, under the lede */
  [data-block="showcase-page"] .case-facts {
    display: block;
  }

  [data-block="showcase-page"] .case-facts > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem clamp(2rem, 5vw, 4rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* term above value: the <strong> is the old <dt>, the text run after it the old <dd> */
  [data-block="showcase-page"] .case-facts > ul > li > p {
    display: grid;
    gap: 0.25rem;
    font-size: 1.1875rem;
    font-weight: 700;
  }

  [data-block="showcase-page"] .case-facts > ul > li > p > strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-teal-text);
  }

  /* Parts of Exolog: two columns of checked items */
  [data-block="showcase-page"] .case-parts__list {
    display: block;
  }

  [data-block="showcase-page"] .case-parts__list > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Pim's li keeps its auto / 1fr grid and teal check; the one <p> fills the text column.
     The text after the name was the muted <span>. */
  [data-block="showcase-page"] .case-parts__list > ul > li > p {
    line-height: 1.5;
    color: var(--color-ink-muted);
  }

  /* The name was a grid row of its own above the text, with a 0.25rem row gap; size and
     letter-spacing still come from `.case-parts__list strong` in case-detail.css. */
  [data-block="showcase-page"] .case-parts__list > ul > li > p > strong {
    display: block;
    margin-bottom: 0.25rem;
    line-height: 1.6;
    color: var(--color-ink);
  }

  /* The <br> keeps name and text on two lines in the editor; the block-level strong already breaks here */
  [data-block="showcase-page"] .case-parts__list > ul > li > p > br {
    display: none;
  }

  @media (max-width: 40rem) {
    [data-block="showcase-page"] .case-parts__list > ul {
      grid-template-columns: 1fr;
    }
  }
}

/* --- blocks/pb-showcase-next.css --- */
@layer block {
  /*
    showcase-next: css/components/case-detail.css styles the link, label, name and tile
    unchanged. The data-items-of wrapper is a plain div that takes the shell's content column
    (.shell > *), and the link is a block-level grid inside it, so nothing moved.
  */
}

/* --- blocks/pb-showcase-closing.css --- */
@layer block {
  /*
    showcase-closing: same shape as showcases-closing. The second half of the heading was
    `.closing h2 span` in css/components/closing.css - a colour only (white at 72%, no line
    break), so it is written as <mark> and gets that colour back here.
  */
  [data-block="showcase-closing"] .closing h2 mark {
    color: rgb(255 255 255 / 0.72);
  }
}

/* --- blocks/pb-partners-hero.css --- */
@layer block {
  /* partners-hero: the page hero's eyebrow + h1 are one rich text (hgroup). Re-expressed from
     utilities/text.css (.eyebrow) and components/page-hero.css (.page-hero__title). */
  [data-block="partners-hero"] .page-hero__copy hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: inherit;
    color: var(--color-teal-text);
  }

  [data-block="partners-hero"] .page-hero__copy hgroup > h1 {
    margin-top: 1.25rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  /* The calls to action are CTA divs; the import renders them display: contents,
     so the cluster spaces the links exactly as before. */
  [data-block="partners-hero"] .page-hero__actions > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-partners-types.css --- */
@layer block {
  /* partners-types: a partner-type card's text is one rich field (body). The wrapper and its hgroup are
     layout-transparent so the li stays the flex column of components/partner-types.css
     (h3 margin-top: auto pushes heading, text and link to the foot of the card).
     .ptype__who and .ptype__link are re-expressed on the hgroup's label and the last paragraph's link. */
  [data-block="partners-types"] .ptype > .rich-text,
  [data-block="partners-types"] .ptype > .rich-text > hgroup {
    display: contents;
  }

  /* was .ptype__who (the rest - margin, measure, line-height - still comes from .ptype p) */
  [data-block="partners-types"] .ptype > .rich-text > hgroup > p {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-teal-text);
  }

  /* was .ptype__link: the paragraph takes the link's place in the column, the link its look */
  [data-block="partners-types"] .ptype > .rich-text > p:has(> a.text-link) {
    margin-top: 1.75rem;
    max-width: none;
    line-height: inherit;
    color: inherit;
  }

  [data-block="partners-types"] .ptype > .rich-text > p > a.text-link {
    font-weight: 700;
    text-decoration: none;
  }

  [data-block="partners-types"] .ptype > .rich-text > p > a.text-link::after {
    content: " \2192";
    color: var(--color-teal-text);
  }

  /* whole card clickable */
  [data-block="partners-types"] .ptype > .rich-text > p > a.text-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  [data-block="partners-types"] .ptype:has(a.text-link:focus-visible) {
    outline: 2px solid var(--color-teal);
    outline-offset: 4px;
  }

  [data-block="partners-types"] .ptype > .rich-text > p > a.text-link:focus-visible {
    outline: none;
  }
}

@layer exception {
  [data-block="partners-types"] .ptype[data-tone="navy"] > .rich-text > hgroup > p,
  [data-block="partners-types"] .ptype[data-tone="navy"] > .rich-text > p > a.text-link::after {
    color: var(--color-teal-bright);
  }

  [data-block="partners-types"] .ptype[data-tone="teal"] > .rich-text > hgroup > p,
  [data-block="partners-types"] .ptype[data-tone="teal"] > .rich-text > p > a.text-link::after {
    color: #fff;
  }

  /* the link keeps the card's white on the dark fields (not the 85% of .ptype[data-tone] p) */
  [data-block="partners-types"] .ptype[data-tone="navy"] > .rich-text > p:has(> a.text-link),
  [data-block="partners-types"] .ptype[data-tone="teal"] > .rich-text > p:has(> a.text-link) {
    color: inherit;
  }
}

/* --- blocks/pb-partners-roles.css --- */
@layer block {
  /* partners-roles: the head is one rich text (hgroup); .eyebrow (utilities/text.css) and .heading (global.css)
     re-expressed on its children (the head's flow rhythm is --flow-space: 1rem, components/roles.css). */
  [data-block="partners-roles"] .roles__head hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: inherit;
    color: var(--color-teal-text);
  }

  [data-block="partners-roles"] .roles__head hgroup > h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  [data-block="partners-roles"] .roles__head hgroup > * + * {
    margin-top: var(--flow-space, 1.25rem);
  }

  /* The two roles are a container inside .roles__pair; it is layout-transparent so the cards and the
     "+" stay grid items of Pim's pair (the absolute seam on wide screens, order 2/3 on phones). */
  [data-block="partners-roles"] .roles__set {
    display: contents;
  }

  /* .role__list is now a rich text holding a plain <ul>. The wrapper takes the list's place in the
     role's flex column (margin-top: auto, padding-top); the ul and li get the declarations of
     components/roles.css plus the reset a list without a class no longer gets. */
  [data-block="partners-roles"] .role > .rich-text {
    margin-top: auto;
    padding-top: clamp(2.5rem, 5vw, 4rem);
  }

  [data-block="partners-roles"] .role .rich-text ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [data-block="partners-roles"] .role .rich-text ul > li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  [data-block="partners-roles"] .role .rich-text ul > li::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--color-teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%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 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

@layer exception {
  [data-block="partners-roles"] .role[data-side="exolog"] .rich-text ul > li::before {
    background: var(--color-teal-bright);
  }
}

/* --- blocks/pb-partners-why.css --- */
@layer block {
  /* partners-why: nothing to add. The benefits keep Pim's li.outcome > div markup; components/intro.css
     (.partner-benefits, .intro__text p) styles the rich text's h3 and p by descendant selectors. */
}

/* --- blocks/pb-partners-steps.css --- */
@layer block {
  /* partners-steps: the head is one rich text (hgroup); .eyebrow (utilities/text.css) and .heading (global.css)
     re-expressed on its children, with the head's flow rhythm (--flow-space: 1rem in components/steps.css). */
  [data-block="partners-steps"] .steps__head hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: inherit;
    color: var(--color-teal-text);
  }

  [data-block="partners-steps"] .steps__head hgroup > h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  [data-block="partners-steps"] .steps__head hgroup > * + * {
    margin-top: var(--flow-space, 1.25rem);
  }

  /* The steps keep Pim's li.step markup (h3, p.step__who, p); numbers are CSS counters in components/steps.css. */
}

/* --- blocks/pb-partners-clients.css --- */
@layer block {
  /* partners-clients: Pim's clients.css applies unchanged (the label is a text field, the logos a container with his li/img markup). */
}

/* --- blocks/pb-partners-faq.css --- */
@layer block {
  /* partners-faq: "Alle vragen" is a CTA div; the import renders it display: contents, so
     .faq__head .button (components/faq.css) keeps its own margin-top: 1.5rem as before. */
  [data-block="partners-faq"] .faq__head > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-partners-closing.css --- */
@layer block {
  /* partners-closing: the title's lighter half was `.closing h2 span` (a colour only, components/closing.css);
     the editor stores a <mark>, restyled here from teal to that white. */
  [data-block="partners-closing"] .closing__inner h2 > mark {
    color: rgb(255 255 255 / 0.72);
  }

  /* The two calls to action are CTA divs; the import renders them display: contents,
     so the cluster spaces the links exactly as before. */
  [data-block="partners-closing"] .closing__actions > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-over-hero.css --- */
@layer block {
  /* over-hero: the page hero's eyebrow + h1 are one rich text (hgroup). Re-expressed from
     utilities/text.css (.eyebrow) and components/page-hero.css (.page-hero__title). */
  [data-block="over-hero"] .page-hero__copy hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: inherit;
    color: var(--color-teal-text);
  }

  [data-block="over-hero"] .page-hero__copy hgroup > h1 {
    margin-top: 1.25rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }

  /* The calls to action are CTA divs; the import renders them display: contents,
     so the cluster spaces the links exactly as before. */
  [data-block="over-hero"] .page-hero__actions > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-over-intro.css --- */
@layer block {
  /* over-intro: nothing to add. components/intro.css styles the text by descendant selectors
     (.intro__text p, .intro__claim span), so the inner rich-text wrapper and the two claim
     spans keep their look. */
}

/* --- blocks/pb-over-origin.css --- */
@layer block {
  /* The head is one rich text (hgroup): .approach .eyebrow / .approach .mark (components/approach.css,
     teal-bright on the dark field) and .heading (global.css) are re-expressed on the hgroup's children. */
  [data-block="over-origin"] .approach__head hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: inherit;
    color: var(--color-teal-bright);
  }

  [data-block="over-origin"] .approach__head hgroup > h2 {
    font-size: var(--step-2);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  [data-block="over-origin"] .approach__head hgroup > * + * {
    margin-top: var(--flow-space, 1.25rem);
  }

  [data-block="over-origin"] .approach__head mark {
    color: var(--color-teal-bright);
  }

  /* The outcomes keep Pim's li.outcome > div markup; components/identity.css and the
     .approach .identity__outcomes exception apply unchanged. */
}

/* --- blocks/pb-over-layers.css --- */
@layer block {
  /* over-layers: a partner-type card's text is one rich field (body). The wrapper and its hgroup are
     layout-transparent so the li stays the flex column of components/partner-types.css
     (h3 margin-top: auto pushes heading, text and link to the foot of the card).
     .ptype__who and .ptype__link are re-expressed on the hgroup's label and the last paragraph's link. */
  [data-block="over-layers"] .ptype > .rich-text,
  [data-block="over-layers"] .ptype > .rich-text > hgroup {
    display: contents;
  }

  /* was .ptype__who (the rest - margin, measure, line-height - still comes from .ptype p) */
  [data-block="over-layers"] .ptype > .rich-text > hgroup > p {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-teal-text);
  }

  /* was .ptype__link: the paragraph takes the link's place in the column, the link its look */
  [data-block="over-layers"] .ptype > .rich-text > p:has(> a.text-link) {
    margin-top: 1.75rem;
    max-width: none;
    line-height: inherit;
    color: inherit;
  }

  [data-block="over-layers"] .ptype > .rich-text > p > a.text-link {
    font-weight: 700;
    text-decoration: none;
  }

  [data-block="over-layers"] .ptype > .rich-text > p > a.text-link::after {
    content: " \2192";
    color: var(--color-teal-text);
  }

  /* whole card clickable */
  [data-block="over-layers"] .ptype > .rich-text > p > a.text-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  [data-block="over-layers"] .ptype:has(a.text-link:focus-visible) {
    outline: 2px solid var(--color-teal);
    outline-offset: 4px;
  }

  [data-block="over-layers"] .ptype > .rich-text > p > a.text-link:focus-visible {
    outline: none;
  }
}

@layer exception {
  [data-block="over-layers"] .ptype[data-tone="navy"] > .rich-text > hgroup > p,
  [data-block="over-layers"] .ptype[data-tone="navy"] > .rich-text > p > a.text-link::after {
    color: var(--color-teal-bright);
  }

  [data-block="over-layers"] .ptype[data-tone="teal"] > .rich-text > hgroup > p,
  [data-block="over-layers"] .ptype[data-tone="teal"] > .rich-text > p > a.text-link::after {
    color: #fff;
  }

  /* the link keeps the card's white on the dark fields (not the 85% of .ptype[data-tone] p) */
  [data-block="over-layers"] .ptype[data-tone="navy"] > .rich-text > p:has(> a.text-link),
  [data-block="over-layers"] .ptype[data-tone="teal"] > .rich-text > p:has(> a.text-link) {
    color: inherit;
  }
}

/* --- blocks/pb-over-clients.css --- */
@layer block {
  /* over-clients: Pim's clients.css applies unchanged (the label is a text field, the logos a container with his li/img markup). */
}

/* --- blocks/pb-over-closing.css --- */
@layer block {
  /* over-closing: the title's lighter half was `.closing h2 span` (a colour only, components/closing.css);
     the editor stores a <mark>, restyled here from teal to that white. */
  [data-block="over-closing"] .closing__inner h2 > mark {
    color: rgb(255 255 255 / 0.72);
  }

  /* The two calls to action are CTA divs; the import renders them display: contents,
     so the cluster spaces the links exactly as before. */
  [data-block="over-closing"] .closing__actions > .rich-text {
    display: contents;
  }
}

/* --- blocks/pb-contact-hero.css --- */
@layer block {
  /*
    contact-hero: Pim's p.eyebrow + h1.page-hero__title became <hgroup><p>…</p><h1>…</h1></hgroup>
    inside the copy rich text, so the eyebrow (css/utilities/text.css) and the
    .page-hero__title declarations (css/components/page-hero.css) are restated by element.
    The h1's margin-top is the rhythm the title had.
  */
  [data-block="contact-hero"] .page-hero__copy hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-text);
  }

  [data-block="contact-hero"] .page-hero__copy hgroup > h1 {
    margin-top: 1.25rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }
}

/* --- blocks/pb-contact-form.css --- */
@layer block {
  /*
    contact-form.
    1. next_steps: Pim's ol.next-steps (counters, badge, connecting line, strong/span layout,
       css/components/contact-form.css) re-expressed on the rich text's plain <ol>.
       The item is <li><p><strong>title</strong><br>text</p></li>: the strong is a block as before,
       the <br> after it is for the editor only and is not drawn.
  */
  [data-block="contact-form"] .next-steps-text > ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: next;
  }

  [data-block="contact-form"] .next-steps-text > ol > li {
    position: relative;
    padding: 0 0 1.75rem 3.25rem;
    counter-increment: next;
  }

  [data-block="contact-form"] .next-steps-text > ol > li::before {
    content: counter(next);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-teal);
    color: #fff;
    font-weight: 700;
  }

  [data-block="contact-form"] .next-steps-text > ol > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(1.125rem - 1px);
    top: 2.5rem;
    bottom: 0.25rem;
    border-left: 2px solid var(--color-teal);
  }

  /* the text line (Pim's span) */
  [data-block="contact-form"] .next-steps-text > ol > li > p {
    color: var(--color-ink-muted);
    line-height: 1.5;
  }

  /* the title line (Pim's strong): its own block, ink, the span's 0.25rem gap below it */
  [data-block="contact-form"] .next-steps-text > ol > li > p > strong {
    display: block;
    padding-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-ink);
  }

  [data-block="contact-form"] .next-steps-text > ol > li > p > strong + br {
    display: none;
  }

  /*
    2. The confirmation (data-form-sent) is shown in the form's place: give it the form's
       grid cell and panel (padding, radius, tint) so the page does not reflow.
  */
  [data-block="contact-form"] [data-form-sent] {
    grid-column: 1 / span 7;
  }

  [data-block="contact-form"] .contact__sent {
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: var(--radius-tile);
    background: var(--color-tint);
  }

  [data-block="contact-form"] .contact__sent > h2 {
    font-size: var(--step-heading);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  [data-block="contact-form"] .contact__sent > * + * {
    margin-top: 1.25rem;
  }

  @media (max-width: 60rem) {
    [data-block="contact-form"] [data-form-sent] {
      grid-column: 1 / -1;
    }
  }
}

/* --- blocks/pb-faq-hero.css --- */
@layer block {
  /*
    faq-hero: Pim's p.eyebrow + h1.page-hero__title became <hgroup><p>…</p><h1>…</h1></hgroup>
    inside the copy rich text, so the eyebrow (css/utilities/text.css) and the
    .page-hero__title declarations (css/components/page-hero.css) are restated by element.
    The h1's margin-top is the rhythm the title had.
  */
  [data-block="faq-hero"] .page-hero__copy hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-text);
  }

  [data-block="faq-hero"] .page-hero__copy hgroup > h1 {
    margin-top: 1.25rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }
}

/* --- blocks/pb-faq-topics.css --- */
@layer block {
  /*
    faq-topics: nothing to restyle. Pim's section.faq-group became article.faq-group and
    every rule in css/components/faq-page.css, faq.css and topic-nav.css is class-based
    (.faq-group, .faq-group h2, .faq-group .faq__list, .faq__item, .topic-nav ul/a),
    so the look is unchanged. The topic anchors are faq-algemeen … faq-privacy.
  */
}

/* --- blocks/pb-faq-closing.css --- */
@layer block {
  /*
    faq-closing: .closing__inner is the body rich text, so the actions moved out of it and
    sit beside it as a second grid child with the same column, width and centring.
    Their 2.5rem margin-top (css/components/closing.css) still sets the distance.
  */
  [data-block="faq-closing"] .closing__actions {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 60rem);
  }

  /* ".closing h2 span" (dimmed white second half) is written as a <mark> */
  [data-block="faq-closing"] .closing__inner > h2 > mark {
    color: rgb(255 255 255 / 0.72);
  }
}

/* --- blocks/pb-resources-hero.css --- */
@layer block {
  /*
    Blog & kennis hero. The copy is one rich text; Pim's p.eyebrow + h1.page-hero__title pair is
    an <hgroup> inside it, so the eyebrow (css/utilities/text.css) and the title
    (css/components/page-hero.css) are re-expressed on the hgroup's children.
  */
  [data-block="resources-hero"] .page-hero__copy hgroup > p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-text);
  }

  [data-block="resources-hero"] .page-hero__copy hgroup > h1 {
    margin-top: 1.25rem;
    font-size: var(--step-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
  }
}

/* --- blocks/pb-resources-articles.css --- */
@layer block {
  /*
    Articles overview. The featured post is a list of one drawn from the published articles
    (data-items-of on a wrapper); the wrapper adds no box, so .post-feature keeps sitting
    directly in .articles and its negative overlap into the hero field still applies.
    The post grid, the meta line (dates are span.post__date, Pim never styled <time>) and the
    empty note keep Pim's classes: css/components/articles.css does the rest.
  */
  [data-block="resources-articles"] .post-feature-wrap {
    display: contents;
  }
}


/* --- blocks/pb-resources-closing.css --- */
@layer block {
  /*
    Closing. Pim dims the second half of the heading with a classless span (.closing h2 span,
    white at 72%); the editor drops such a span, so it is a <mark> here. The global mark is teal,
    invisible on the teal field: give it Pim's dimmed white instead.
  */
  [data-block="resources-closing"] .closing__inner h2 mark {
    color: rgb(255 255 255 / 0.72);
  }
}

/* --- blocks/pb-article-page.css --- */
@layer block {
  /*
    Article page. The running text is split into three rich texts (.article__text: body,
    body_more, body_end) around the compare figure and the screenshot figure, which stay direct
    children of .prose. Pim's `.prose > h2`, `.prose > * + *`, `.prose > ul`, `.prose > .article__quote`
    addressed those elements as direct children of .prose; the same declarations now address the
    children of .article__text. The wrapper itself is left unconstrained so the pull quote keeps the
    full body width, exactly as `.prose > .article__quote { max-width: none }` gave it.
  */
  .article__body > .article__text {
    max-width: none;
  }

  .article__text > * {
    max-width: 44rem;
  }

  .article__text > * + * {
    margin-top: 1.5rem;
  }

  .article__text > h2 {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    scroll-margin-top: 7rem;
    font-size: var(--step-subheading);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

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

  .article__text > ul {
    padding: 0;
    list-style: none;
  }

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

  /* Pim's `.prose > ul { display: grid; gap: 0.6rem }`, as margins so the list stays plain markup */
  .article__text > ul > li + li {
    margin-top: 0.6rem;
  }

  .article__text > ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-teal);
  }

  /* Pull quote (Pim's blockquote.article__quote): full body width, large type */
  .article__text > blockquote {
    max-width: none;
    margin-block: clamp(2.5rem, 5vw, 4rem);
  }

  .article__text > blockquote > p {
    font-size: var(--step-2);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 700;
  }

  /* Summary items are <li><p> now; keep Pim's item line-height on the paragraph (`.prose p` would set 1.7) */
  .article__summary > ul > li > p {
    line-height: 1.5;
  }
}

/* --- blocks/pb-article-related.css --- */
@layer block {
  /*
    "Lees ook" under an article. Nothing to re-express: the heading stays a direct child of
    .article-related and the cards keep Pim's .post classes (css/components/article.css and
    articles.css). The dates are span.post__date; Pim never styled <time>.
  */
}

/* --- blocks/pb-article-closing.css --- */
@layer block {
  /*
    Closing under an article. Same re-expression as resources-closing: Pim's dimmed
    `.closing h2 span` (white at 72%) is a <mark>, restyled from the global teal.
  */
  [data-block="article-closing"] .closing__inner h2 mark {
    color: rgb(255 255 255 / 0.72);
  }
}

/* --- blocks/pb-privacy-hero.css --- */
@layer block {
  /*
    privacy-hero: nothing to restyle. The h1 keeps class page-hero__title as a plain text field
    and p.legal__updated keeps its class (css/components/page-hero.css, legal.css).
    The span.todo wrapper around the date is gone; its orange highlight is not drawn.
  */
}

/* --- blocks/pb-privacy-text.css --- */
@layer block {
  /*
    privacy-text: the whole prose is one rich text (.legal__text). Pim's p.legal__draft is written as
    p.draft (one plain word), restyled from ".legal__text .legal__draft" in css/components/legal.css.
    Everything else in legal.css is element-based (.legal__text h2, > * + *, li + li) and still matches.
  */
  [data-block="privacy-text"] .legal__text > p.draft {
    font-size: 1rem;
    color: #B5441A;
  }
}

/* --- blocks/pb-cookies-hero.css --- */
@layer block {
  /*
    cookies-hero: nothing to restyle. The h1 keeps class page-hero__title as a plain text field
    and p.legal__updated keeps its class (css/components/page-hero.css, legal.css).
    The span.todo wrapper around the date is gone; its orange highlight is not drawn.
  */
}

/* --- blocks/pb-cookies-text.css --- */
@layer block {
  /*
    cookies-text: the whole prose is one rich text (.legal__text). Pim's p.legal__draft is written as
    p.draft (one plain word), restyled from ".legal__text .legal__draft" in css/components/legal.css.
    Everything else in legal.css is element-based (.legal__text h2, > * + *, li + li) and still matches.
  */
  [data-block="cookies-text"] .legal__text > p.draft {
    font-size: 1rem;
    color: #B5441A;
  }
}

/* --- blocks/pb-toegankelijkheid-hero.css --- */
@layer block {
  /*
    toegankelijkheid-hero: nothing to restyle. The h1 keeps class page-hero__title as a plain text field
    and p.legal__updated keeps its class (css/components/page-hero.css, legal.css).
    The span.todo wrapper around the date is gone; its orange highlight is not drawn.
  */
}

/* --- blocks/pb-toegankelijkheid-text.css --- */
@layer block {
  /*
    toegankelijkheid-text: the whole prose is one rich text (.legal__text). Pim's p.legal__draft is written as
    p.draft (one plain word), restyled from ".legal__text .legal__draft" in css/components/legal.css.
    Everything else in legal.css is element-based (.legal__text h2, > * + *, li + li) and still matches.
  */
  [data-block="toegankelijkheid-text"] .legal__text > p.draft {
    font-size: 1rem;
    color: #B5441A;
  }
}

/* --- blocks/pb-bedankt-hero.css --- */
@layer block {
  /*
    bedankt-hero: the aside is one rich text: the lede, the home button as its own paragraph and the
    plain links as a list. Pim's .not-found__actions was a wrapping flex row (gap 1.25rem 2rem,
    items centred on each other). The button paragraph and the list are inline-flex boxes on one
    line instead, with the same margin above so they centre on each other; the lede carries the
    rest of the clamp() space above the row, and when the list wraps it keeps the 1.25rem row gap.
    Write the list directly after the button paragraph (no whitespace between them), or the
    column gap grows by a space.
    The full-width tint field of Pim's subpages (his <body data-field="full">) is handled by the
    assembler's components/page-hero.css (:root:not(:has(.hero))), so nothing is needed here.
  */
  [data-block="bedankt-hero"] .page-hero__aside > p.lede {
    margin-bottom: calc(clamp(2rem, 4vw, 2.75rem) - 1.25rem);
  }

  [data-block="bedankt-hero"] .page-hero__aside > p:has(> a.button),
  [data-block="bedankt-hero"] .page-hero__aside > ul {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 1.25rem 0 0;
  }

  [data-block="bedankt-hero"] .page-hero__aside > p:has(> a.button) {
    margin-right: 2rem;
  }

  /* .not-found__links */
  [data-block="bedankt-hero"] .page-hero__aside > ul {
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0;
    list-style: none;
  }

  [data-block="bedankt-hero"] .page-hero__aside > ul > li > p {
    margin: 0;
  }

  /* .not-found__links a */
  [data-block="bedankt-hero"] .page-hero__aside > ul > li > p > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 700;
    color: var(--color-ink);
    text-decoration: none;
  }

  [data-block="bedankt-hero"] .page-hero__aside > ul > li > p > a::after {
    content: "\2192";
    margin-left: 0.4rem;
    color: var(--color-teal-text);
    transition: translate var(--ease);
  }

  [data-block="bedankt-hero"] .page-hero__aside > ul > li > p > a:hover::after {
    translate: 4px 0;
  }
}

/* --- blocks/pb-bedankt-related.css --- */
@layer block {
  /*
    bedankt-related: Pim's article.css (.article-related > h2) and articles.css (.post-grid, .post)
    apply unchanged. The date is <span class="post__date"> instead of <time datetime> (the
    attribute would freeze); articles.css has no `time` selector, so nothing to restyle.
  */
}

/* --- blocks/pb-not-found.css --- */
@layer block {
  /*
    not-found: the aside is one rich text: the lede, the home button as its own paragraph and the
    plain links as a list. Pim's .not-found__actions was a wrapping flex row (gap 1.25rem 2rem,
    items centred on each other). The button paragraph and the list are inline-flex boxes on one
    line instead, with the same margin above so they centre on each other; the lede carries the
    rest of the clamp() space above the row, and when the list wraps it keeps the 1.25rem row gap.
    Write the list directly after the button paragraph (no whitespace between them), or the
    column gap grows by a space.
    The full-width tint field of Pim's subpages (his <body data-field="full">) is handled by the
    assembler's components/page-hero.css (:root:not(:has(.hero))), so nothing is needed here.
  */
  [data-block="not-found"] .page-hero__aside > p.lede {
    margin-bottom: calc(clamp(2rem, 4vw, 2.75rem) - 1.25rem);
  }

  [data-block="not-found"] .page-hero__aside > p:has(> a.button),
  [data-block="not-found"] .page-hero__aside > ul {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 1.25rem 0 0;
  }

  [data-block="not-found"] .page-hero__aside > p:has(> a.button) {
    margin-right: 2rem;
  }

  /* .not-found__links */
  [data-block="not-found"] .page-hero__aside > ul {
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0;
    list-style: none;
  }

  [data-block="not-found"] .page-hero__aside > ul > li > p {
    margin: 0;
  }

  /* .not-found__links a */
  [data-block="not-found"] .page-hero__aside > ul > li > p > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 700;
    color: var(--color-ink);
    text-decoration: none;
  }

  [data-block="not-found"] .page-hero__aside > ul > li > p > a::after {
    content: "\2192";
    margin-left: 0.4rem;
    color: var(--color-teal-text);
    transition: translate var(--ease);
  }

  [data-block="not-found"] .page-hero__aside > ul > li > p > a:hover::after {
    translate: 4px 0;
  }
}