/* ==========================================================================
   alfred. — Werkwijze (user, 2026-11-11): in the site's frame and unit, like Services.
   A big red title; then headings (fat, red, capitals), small body copy, quotes (thin, italic) and a button.
   ========================================================================== */
.page-werkwijze {
  --hu: min(100vw / 1440, 100vh / 1024);
  --u: calc(var(--hu) * .7);
  --edge: calc(12 * var(--hu)); --edge-radius: calc(28 * var(--hu));
  --pad: calc(16 * var(--hu)); --navh: calc(52 * var(--hu));   /* compact (user, 2026-11-06) */ --radius: calc(24 * var(--hu));
  --frame: var(--black);
  --win-top: calc(var(--edge) + var(--navh) + var(--pad));
  background: var(--cream);
  color: var(--black);
  overflow-x: hidden;
}
html:has(.page-werkwijze) { background: var(--frame); }

/* ---------- The homepage's frame (same rules as the other pages) ---------- */
.page-werkwijze .site-mask {
  position: fixed;
  inset: var(--edge);
  z-index: 60;
  border-radius: var(--edge-radius);
  box-shadow: 0 0 0 100vmax var(--cream);
  pointer-events: none;
}
.ww-window {
  position: fixed;
  z-index: 40;
  top: var(--win-top);
  left: calc(var(--edge) + var(--pad));
  right: calc(var(--edge) + var(--pad));
  bottom: calc(var(--edge) + var(--pad));
  border-radius: var(--radius);
  box-shadow: 0 0 0 100vmax var(--frame);
  pointer-events: none;
}
.page-werkwijze .nav { --u: var(--hu); top: var(--edge); height: calc(var(--navh) + var(--pad)); background: var(--frame); color: var(--cream); }
.page-werkwijze .nav__lang-menu { background: var(--frame); }


.ww { width: calc(1440 * var(--u)); margin: 0 auto; padding: var(--win-top) 0 calc(var(--edge) + var(--pad) + 120 * var(--u)); }
.ww__title { margin: calc(130 * var(--u)) 0 calc(60 * var(--u)); text-align: center; font-family: var(--font-wide); font-weight: 900; text-transform: uppercase; color: var(--red); font-size: calc(80 * var(--u)); line-height: 1; }   /* 50% smaller (user, 2026-11-11) */
.ww__flow { width: calc(1140 * var(--u)); margin: 0 auto; }
/* a heading: thick words (fat, red, capitals) and thin words (as typed), picked in the CMS */
.ww-h { margin: calc(150 * var(--u)) 0 calc(56 * var(--u)); text-align: center; font-size: calc(48 * var(--u)); line-height: 1.05; color: var(--red); }   /* 25% smaller (user, 2026-11-11) */
.ww__flow > .ww-h:first-child { margin-top: calc(60 * var(--u)); }
.ww-h__fat { font-family: var(--font-wide); font-weight: 900; text-transform: uppercase; color: var(--red); }
.ww-h__thin { font-family: var(--font); font-weight: 400; text-transform: none; color: var(--black); }
/* a text and a quote side by side (the first one in the CMS on the left), like the sketch (user, 2026-11-11) */
.ww-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(70 * var(--u)); align-items: center; margin-top: calc(40 * var(--u)); }
.ww-row--q-left { grid-template-columns: 1fr 1.15fr; }
.ww-row--solo { grid-template-columns: 1fr; max-width: calc(760 * var(--u)); margin-left: auto; margin-right: auto; }
/* the body copy: small, thin, easy to read */
.ww-body p { margin: 0; font-size: calc(24 * var(--u)); line-height: 1.5; color: var(--black); }
.ww-body p + p { margin-top: 1em; }
.ww-row--solo .ww-body p { text-align: center; }
/* a quote: a red box, white text */
.ww-q { margin: 0; padding: calc(56 * var(--u)) calc(52 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--red); color: #fff; text-align: left; }
.ww-q blockquote { margin: 0; font-family: var(--font); font-weight: 400; font-style: italic; text-transform: none; font-size: calc(36 * var(--u)); line-height: 1.2; color: #fff; }
.ww-q figcaption { margin-top: calc(22 * var(--u)); font-size: calc(20 * var(--u)); color: #fff; opacity: .9; }
.ww-q figcaption::before { content: "– "; }
/* the button */
.ww-cta { display: flex; justify-content: center; margin-top: calc(90 * var(--u)); }
/* [a]: a small circled a, like a © */
.ww-a { display: inline-block; width: .62em; height: .62em; margin-left: .1em; vertical-align: .5em; font-family: var(--font); font-style: normal; text-transform: none; }
.ww-a svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ww-body .ww-a { width: .8em; height: .8em; vertical-align: .35em; }

@media (orientation: portrait) {
  .page-werkwijze { --u: calc(100vw / 600); }
  .ww { width: auto; padding-left: calc(40 * var(--u)); padding-right: calc(40 * var(--u)); }
  .ww__flow { width: auto; }
  .ww-h { margin-top: calc(110 * var(--u)); margin-bottom: calc(40 * var(--u)); font-size: calc(34 * var(--u)); }
  .ww__flow > .ww-h:first-child { margin-top: calc(70 * var(--u)); }
  .ww-row, .ww-row--q-left { grid-template-columns: 1fr; gap: calc(36 * var(--u)); }
  .ww-body p { font-size: max(15px, calc(26 * var(--u))); }
  .ww-q { padding: calc(40 * var(--u)) calc(36 * var(--u)); }
  .ww-q blockquote { font-size: calc(32 * var(--u)); }
  .ww-q figcaption { font-size: max(14px, calc(22 * var(--u))); }
}
.cs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the page name, for search engines only (user, 2026-11-11) */
/* (user, 2026-11-11) like a ™: tight against the word, raised to the top of the letters */
.ww-a { width: .46em; height: .46em; margin-left: .03em; vertical-align: top; position: relative; top: .02em; }
.ww-body .ww-a { width: .62em; height: .62em; margin-left: .03em; vertical-align: top; top: .1em; }