/* Quilyx homepage, PREVIEW of 12 November 2026 (third one: the origin film as the first
   screen). Not built into the site, not live. Equal to the second preview except for the part
   marked FILM AS FIRST SCREEN at the end.

   LAYOUT: the founder's own ChatGPT mockup of 12 November 2026, block for block: one big picture
   as the first screen with the title on top of it, big serif headings, one thin line between
   blocks, the two services as framed cards, VERDER as one large word with its key beside it,
   proof in two columns, a closing picture.
   LOOK: Freelyx (BESTUURSKAMER). Every token below is taken one to one from
   freelyx.nl/site/assets/css/bestuurskamer.css, so the two sites stay one family.

   No em dashes and no en dashes, also in this file. */

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/raleway-vf.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aleo';
  src: url('../fonts/aleo-vf.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aleo';
  src: url('../fonts/aleo-italic-vf.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ================= tokens (identical to bestuurskamer.css) ================= */
:root {
  --ground: #08081C;
  --panel: rgba(12, 12, 76, .42);

  --hairline: rgba(227, 199, 154, .13);
  --hairline-soft: rgba(227, 199, 154, .10);
  --hairline-row: rgba(227, 199, 154, .11);
  --hairline-strong: rgba(227, 199, 154, .22);

  --accent: #B9803F;
  --accent-soft: #D8AE73;

  --text-hi: #F7F1E8;
  --text: #F3ECE1;
  --text-title: #F5EFE6;
  --text-body: #AEA79D;
  --text-desc: #A49D93;
  --text-meta: #9A9286;
  --text-muted: #948C7E;
  --text-chip: #BDB6AC;
  --text-nav: #A8A198;
  --text-footer: #908A7E;

  --op-knop: #0B0B22;
  --rij-hover: rgba(216, 174, 115, .045);

  --display: 'Aleo', Georgia, 'Times New Roman', serif;
  --sans: 'Raleway', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  --max: 1440px;
  --pad: clamp(22px, 3.4vw, 48px);
  --r: 2px;
  --r-vlak: 3px;
  --kop-h: 78px;
}

/* ================= base ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { hyphens: manual; background: var(--ground); scroll-behavior: smooth; }
body {
  font-family: var(--sans); font-size: 15px; font-weight: 400; line-height: 1.5;
  color: var(--text); background: var(--ground);
  min-height: 100vh; display: flex; flex-direction: column;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; }
::selection { background: rgba(185, 128, 63, .34); color: var(--text-hi); }
strong, b { font-weight: 600; }
h1, h2, h3 { font-weight: 400; }

a { color: var(--accent-soft); text-decoration: none; }
a:hover { color: #EBD3AC; }
a:focus-visible, button:focus-visible, video:focus-visible {
  outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: var(--r);
}
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 99;
  background: var(--accent); color: var(--op-knop);
  padding: 10px 18px; border-radius: var(--r); font-size: 13.5px; font-weight: 600;
}
.skip:focus { left: 12px; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.strook, .head-row {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); width: 100%;
}
.punt-accent { color: var(--accent-soft); }

/* ================= header (Freelyx) ================= */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8, 8, 28, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
}
.head-row { min-height: var(--kop-h); display: flex; align-items: center; gap: clamp(22px, 3.2vw, 56px); }
.merk { flex: 0 0 auto; display: block; line-height: 0; }
.merk img { display: block; width: 122px; height: 27px; }
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(15px, 2.2vw, 34px); flex: 1; }
.nav a { font-size: 14px; font-weight: 400; color: var(--text-nav); white-space: nowrap; }
.nav a:hover { color: var(--text); }
.head-actie { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; }
@media (min-width: 721px) { .head-actie { order: 3; } }
.taal { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--text-nav); }
.taal:hover { color: var(--text); }

/* ================= buttons (Freelyx) ================= */
.knop-vol, .knop-omlijnd {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: var(--r); font-size: 14px; font-weight: 600; letter-spacing: .015em;
  white-space: nowrap; cursor: pointer;
}
.knop-vol { background: var(--accent); border: 1px solid var(--accent); padding: 15px 26px; color: var(--op-knop); }
.knop-vol:hover { filter: brightness(1.11); color: var(--op-knop); }
.knop-omlijnd { background: none; border: 1px solid var(--hairline-strong); padding: 15px 26px; color: #E8E1D6; font-weight: 500; }
.knop-omlijnd:hover { border-color: var(--accent-soft); color: #FFF; }
.head-actie .knop-omlijnd { padding: 11px 20px; font-size: 13.5px; }
.koppeling {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: .015em; color: var(--accent-soft);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(216, 174, 115, .55);
}
.koppeling:hover { text-decoration-color: var(--accent-soft); }
.koppeling svg { flex: 0 0 auto; transition: transform .22s ease; }
.koppeling:hover svg, .dienst:hover .koppeling svg { transform: translateX(4px); }

/* ================= 1. the first screen =================
   One big picture with the title on top of it. The picture is the Freelyx room photo; it sits
   against the right edge and dissolves to the left and to the bottom, so the title stands on
   the dark ground and never on a busy part of the photo. */
.held { position: relative; isolation: isolate; overflow: hidden; }
.held-foto { position: absolute; inset: 0 0 0 auto; width: min(68%, 1180px); z-index: 0; }
.held-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 44%; }
.held-foto::before, .held-foto::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.held-foto::before {
  background: linear-gradient(90deg, var(--ground) 0%, rgba(8, 8, 28, .88) 22%, rgba(8, 8, 28, .38) 54%, rgba(8, 8, 28, .06) 100%);
}
.held-foto::after {
  background: linear-gradient(180deg, rgba(8, 8, 28, .30) 0%, rgba(8, 8, 28, 0) 26%, rgba(8, 8, 28, 0) 62%, var(--ground) 100%);
}
.held-wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 74% at 8% 26%, rgba(185, 128, 63, .13), transparent 68%);
}
.held-strook {
  position: relative; z-index: 1;
  min-height: clamp(540px, 78vh, 760px); display: flex; align-items: center;
}
.held-tekst { max-width: 800px; padding-block: clamp(64px, 8vw, 112px); }
.wenkbrauw {
  display: flex; align-items: center; gap: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-soft);
}
.wenkbrauw::after { content: ''; width: 64px; height: 1px; background: var(--accent); }
.held h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(36px, 4.6vw, 66px); line-height: 1.08; letter-spacing: -.018em;
  color: var(--text-hi); margin-top: 24px; text-wrap: balance;
}
.held-lead { margin-top: 26px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--text); max-width: 470px; text-wrap: pretty; }
.held-acties { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 16px; margin-top: 34px; }

/* ================= blocks: one thin line between them ================= */
.blok { border-top: 1px solid var(--hairline-strong); padding-block: clamp(48px, 5.4vw, 80px); }
.sectie[id] { scroll-margin-top: var(--kop-h); }
.sectie h2 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -.015em;
  color: var(--text-hi); text-wrap: balance;
}
.lead { margin-top: 20px; font-size: 16.5px; line-height: 1.68; color: var(--text-body); max-width: 560px; text-wrap: pretty; }
.tekst { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--text-desc); text-wrap: pretty; }
.cursiefregel {
  margin-top: 20px; font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 16.5px; line-height: 1.6; color: var(--accent-soft); text-wrap: pretty;
}

/* ================= 2. why ================= */
.waarom { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.waarom .lead { max-width: 500px; }
.film { margin: 0; }
.film-kader {
  position: relative; border: 1px solid var(--hairline-strong); border-radius: var(--r-vlak);
  overflow: hidden; background: #06061A;
}
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.film figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--text-meta); }
/* With the script the whole frame is the play button and carries the caption inside, as in the
   mockup; the caption under the frame is then hidden. Without the script the video shows its
   own controls and the caption under it. */
.film--js figcaption { display: none; }
.film-speel {
  position: absolute; inset: 0; width: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(8, 8, 28, 0) 55%, rgba(8, 8, 28, .72) 100%);
  border: none; cursor: pointer; font-family: var(--sans); color: var(--text-hi);
}
.film-speel[hidden] { display: none; }
.film-rond {
  display: flex; align-items: center; justify-content: center;
  width: clamp(56px, 5.2vw, 76px); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(247, 241, 232, .85); background: rgba(8, 8, 28, .38);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .2s ease, background-color .2s ease;
}
.film-rond svg { margin-left: 4px; }
.film-speel:hover .film-rond { border-color: var(--accent-soft); background: rgba(8, 8, 28, .6); }
.film-bij { position: absolute; left: 0; right: 0; bottom: clamp(12px, 1.4vw, 20px); font-size: 13.5px; color: var(--text-chip); }

/* ================= 3. what: two framed cards ================= */
.diensten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); margin-top: clamp(28px, 3vw, 44px); }
.dienst {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-vlak);
  padding: clamp(24px, 2.6vw, 38px) clamp(22px, 2.8vw, 42px) clamp(26px, 2.8vw, 40px);
}
.dienst:hover, .dienst:focus-within { background: var(--rij-hover); border-color: rgba(216, 174, 115, .42); }
.dienst-cijfer { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; color: var(--accent-soft); }
.dienst-cijfer::after { content: ''; display: block; width: 34px; height: 1px; background: var(--accent); margin-top: 10px; }
.dienst h3 { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.2vw, 31px); line-height: 1.2; color: var(--text-title); margin-top: 22px; }
.dienst h3 a { color: inherit; }
.dienst h3 a::after { content: ''; position: absolute; inset: 0; }
.dienst p { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: var(--text-body); max-width: 540px; text-wrap: pretty; }
/* decoration inside a card with a stretched link: it must let the click through */
.dienst .koppeling { margin-top: auto; padding-top: 22px; pointer-events: none; }

/* ================= 4. how: VERDER ================= */
.verder { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; margin-top: clamp(30px, 3.4vw, 52px); }
.verder-woord {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(60px, 9.4vw, 138px); line-height: 1; letter-spacing: .07em; color: var(--accent-soft);
  padding-right: clamp(20px, 3vw, 48px);
}
.verder-sleutel { list-style: none; border-left: 1px solid var(--hairline-strong); padding-left: clamp(24px, 3vw, 48px); }
.verder-sleutel li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding-block: 7px; font-size: 17px; line-height: 1.45; color: var(--text); }
.verder-sleutel b { font-size: 19px; font-weight: 700; letter-spacing: .02em; color: var(--accent-soft); }
.verder-sleutel span span { color: var(--text-body); }
.verder-sleutel .verder-en { color: var(--text-body); }
.verder-slot { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 14px 32px; margin-top: clamp(28px, 3vw, 44px); }
.verder-slot .cursiefregel { margin-top: 0; }

/* ================= 5. proof ================= */
.bewijs { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.bewijs-namen { margin-top: 24px; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.62; color: var(--text); max-width: 600px; text-wrap: pretty; }
.bewijs .tekst { max-width: 600px; margin-top: 18px; }
.bewijs-zij { border-left: 1px solid var(--hairline-strong); padding-left: clamp(24px, 3vw, 48px); align-self: stretch; }
.bewijs-zij h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.25; color: var(--text-title); }
.bewijs-zij .koppeling { margin-top: 14px; }
.bewijs-zij .tekst { margin-top: 16px; max-width: 460px; }

/* ================= 6. closing: the second picture ================= */
.slot { position: relative; isolation: isolate; overflow: hidden; }
.slot-foto { position: absolute; inset: 0 0 0 auto; width: min(66%, 1100px); z-index: 0; }
.slot-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.slot-foto::before, .slot-foto::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.slot-foto::before { background: linear-gradient(90deg, var(--ground) 0%, rgba(8, 8, 28, .86) 26%, rgba(8, 8, 28, .30) 62%, rgba(8, 8, 28, .10) 100%); }
.slot-foto::after { background: linear-gradient(180deg, var(--ground) 0%, rgba(8, 8, 28, 0) 22%, rgba(8, 8, 28, 0) 70%, var(--ground) 100%); }
.slot .strook { position: relative; z-index: 1; }
.slot .blok { min-height: clamp(360px, 34vw, 480px); display: flex; flex-direction: column; justify-content: center; }
.slot .lead { max-width: 460px; color: var(--text-chip); }
.slot-actie { margin-top: 30px; }
.slot-regel { margin-top: 20px; font-size: 13.5px; line-height: 1.65; color: var(--text-chip); }
.slot-regel a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ================= 7. footer ================= */
.site-foot .blok { padding-block: 30px 34px; }
.voet-feiten { text-align: center; font-size: 13.5px; line-height: 1.8; color: var(--text-chip); }
.voet-feiten span { white-space: nowrap; }
.voet-feiten span + span::before { content: '\00B7'; margin-inline: .7em; color: var(--text-muted); }
.voet-rij {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px;
  margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--hairline-soft);
}
.sna { display: flex; align-items: center; gap: 16px; margin: 0; }
.sna-chip { flex: 0 0 auto; display: block; background: #FFF; border-radius: var(--r-vlak); padding: 9px; }
.sna-chip img { display: block; width: 58px; height: auto; }
.sna figcaption { font-size: 13px; line-height: 1.6; color: var(--text-meta); }
.voet-links { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13px; }
.voet-links a { color: var(--text-meta); }
.voet-links a:hover { color: var(--accent-soft); }
.voet-fijn { margin-top: 22px; font-size: 12.5px; line-height: 1.7; color: var(--text-footer); }
.voet-fijn a { color: var(--text-meta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.voet-fijn + .voet-fijn { margin-top: 6px; }

.badge {
  position: fixed; right: 12px; bottom: 12px; z-index: 60;
  background: rgba(8, 8, 28, .92); border: 1px solid var(--hairline-strong); border-radius: var(--r);
  padding: 6px 11px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-chip);
}

/* ================= responsive ================= */
@media (max-width: 980px) {
  /* the pictures become bands under their text; no title ever sits on a photo on a small screen */
  .held-strook { min-height: 0; }
  .held-tekst { padding-block: clamp(44px, 8vw, 72px) clamp(34px, 5vw, 48px); }
  .held-foto, .slot-foto { position: relative; inset: auto; width: 100%; height: clamp(210px, 48vw, 340px); order: 2; }
  .held, .slot { display: flex; flex-direction: column; }
  .held-foto::before, .slot-foto::before { display: none; }
  .held-foto::after, .slot-foto::after { background: linear-gradient(180deg, var(--ground) 0%, rgba(8, 8, 28, 0) 30%); }
  .slot .blok { min-height: 0; }
  .waarom, .bewijs, .verder { grid-template-columns: minmax(0, 1fr); }
  .verder-woord { padding-right: 0; font-size: clamp(56px, 15.5vw, 120px); }
  .verder-sleutel { border-left: none; padding-left: 0; margin-top: 26px; border-top: 1px solid var(--hairline-strong); padding-top: 20px; }
  .bewijs-zij { border-left: none; padding-left: 0; border-top: 1px solid var(--hairline-strong); padding-top: 28px; }
}
@media (max-width: 720px) {
  .site-head { position: static; }
  .sectie[id] { scroll-margin-top: 0; }
  .head-row { flex-wrap: wrap; gap: 14px 20px; padding-block: 16px; }
  .merk { margin-right: auto; }
  .nav { flex: 1 0 100%; gap: 10px 18px; }
  .nav a { font-size: 13.5px; white-space: normal; padding-block: 5px; }
  .diensten { grid-template-columns: minmax(0, 1fr); }
  .wenkbrauw::after { width: 40px; }
  /* wrapped over several lines the middle dots land at line starts; a plain wrapped row reads cleaner */
  .voet-feiten { text-align: left; display: flex; flex-wrap: wrap; gap: 2px 20px; }
  .voet-feiten span + span::before { content: none; }
  .voet-rij { flex-direction: column; align-items: flex-start; }
  .badge { right: 8px; bottom: 8px; }
}

/* ================= motion: feedback on touch only ================= */
a, button, .dienst {
  transition: color .2s ease, background-color .2s ease, border-color .22s ease, filter .22s ease, text-decoration-color .2s ease;
}
.knop-vol:active, .knop-omlijnd:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   FILM AS FIRST SCREEN (third preview, 12 November 2026, the founder's word: "with the movie
   as hero banner"). The film takes the place of the room photo: against the right edge,
   dissolving to the left and to the bottom, with the title on the dark ground. The film's own
   ground is the same night blue as the page, so it has no visible frame.
   ===================================================================== */
.held-foto--film { width: min(76%, 1320px); }
.held-foto--film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.held-foto--film::before {
  /* the title ends at about 30% of this layer; the scrim keeps that zone dark enough to read
     the title over the brightest scenes (the orange planning bars around second 34) */
  /* one pixel wider on the left and solid for the first stretch: on screens where the layer
     lands on a half pixel the film's edge showed as a faint line */
  inset: 0 0 0 -1px;
  background: linear-gradient(90deg, var(--ground) 0%, var(--ground) 3%, rgba(8, 8, 28, .88) 14%, rgba(8, 8, 28, .52) 30%, rgba(8, 8, 28, .12) 48%, rgba(8, 8, 28, 0) 64%);
}
.held-foto--film::after {
  background: linear-gradient(180deg, var(--ground) 0%, rgba(8, 8, 28, 0) 16%, rgba(8, 8, 28, 0) 78%, var(--ground) 100%);
}
/* one quiet button: pause, resume, replay */
.held-knop {
  position: absolute; right: var(--pad); bottom: 26px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(8, 8, 28, .5); border: 1px solid var(--hairline-strong); color: var(--text-chip); cursor: pointer;
}
.held-knop:hover { border-color: var(--accent-soft); color: var(--text-hi); }
.held-knop[hidden] { display: none; }
.held-knop[data-stand="speelt"] .held-knop-speel, .held-knop[data-stand="staat"] .held-knop-pauze { display: none; }
.held-knop-speel { margin-left: 2px; }
/* the why block carries the room photo now that the film has moved up */
.film-kader img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 50%; }
@media (max-width: 980px) {
  .held-foto--film { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .held-foto--film::after { background: linear-gradient(180deg, var(--ground) 0%, rgba(8, 8, 28, 0) 22%); }
  /* stacked, the button belongs on the film band, so it hangs from the hero and not from the text */
  .held-strook { position: static; }
  .held-knop { bottom: 14px; }
}

/* =====================================================================
   PHOTOS SWAPPED (12 November 2026, his word): the office glass with the name stands beside
   "It starts with", the room photo closes the page. The photo in the why block has no frame:
   it dissolves into the ground on the left, top and bottom, as the photo on Freelyx does.
   ===================================================================== */
.slot--waarom .lead { color: var(--text-body); max-width: 480px; }
.slot--waarom .cursiefregel { max-width: 480px; }
.slot-foto--kamer img { object-position: 72% 44%; }
/* same half-pixel guard as on the film: the layer's left edge is covered one pixel wider and
   stays solid for its first stretch, so the photo's edge never shows as a line */
.slot-foto::before {
  inset: 0 0 0 -1px;
  background: linear-gradient(90deg, var(--ground) 0%, var(--ground) 4%, rgba(8, 8, 28, .86) 26%, rgba(8, 8, 28, .30) 62%, rgba(8, 8, 28, .10) 100%);
}
@media (max-width: 980px) { .slot-foto::before { display: none; } }

/* =====================================================================
   12 November 2026, later (his words): the dictionary card "seems to be a fade in from the
   background, can you just display it", and the photo beside "It starts with" should "end
   with the lines on top and below but not too harsh".
   The card looked half faded because the dark zone behind the title lay over its left half.
   Now the film stands against the LEFT edge of its layer, which moves the card clear of the
   title, and the dark zone ends before the card begins: the card shows at full strength.
   ===================================================================== */
.held-foto--film video { object-position: 0% 50%; }
.held-foto--film::before {
  /* measured: the title ends at 24 to 30% of this layer and the card begins at 31 to 34%,
     depending on the screen. The dark zone therefore holds until 27% and is gone at 31%. */
  background: linear-gradient(90deg, var(--ground) 0%, var(--ground) 3%, rgba(8, 8, 28, .86) 12%, rgba(8, 8, 28, .62) 21%, rgba(8, 8, 28, .34) 27%, rgba(8, 8, 28, 0) 31%);
}
/* The photo runs from the line above the block to the line below it, with a short soft edge
   at both lines in place of the long fade. */
.slot--waarom .slot-foto::after {
  background: linear-gradient(180deg, rgba(8, 8, 28, .88) 0%, rgba(8, 8, 28, 0) 11%, rgba(8, 8, 28, 0) 88%, rgba(8, 8, 28, .92) 100%);
}
@media (max-width: 980px) {
  .held-foto--film video { object-position: 50% 50%; }
  .slot--waarom .slot-foto::after { background: linear-gradient(180deg, var(--ground) 0%, rgba(8, 8, 28, 0) 30%); }
}

/* =====================================================================
   12 November 2026, his correction: "with that image on the right side it shouldnt continue".
   The photo beside "It starts with" ends where the two lines end, at the right edge of the
   content, and no longer runs on to the edge of the screen. A short soft edge there too.
   ===================================================================== */
.slot--waarom .slot-foto {
  right: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  width: min(60%, 980px);
}
.slot--waarom .slot-foto::before {
  background:
    linear-gradient(270deg, rgba(8, 8, 28, .90) 0%, rgba(8, 8, 28, 0) 9%),
    linear-gradient(90deg, var(--ground) 0%, var(--ground) 4%, rgba(8, 8, 28, .86) 26%, rgba(8, 8, 28, .30) 62%, rgba(8, 8, 28, .10) 100%);
}
@media (max-width: 980px) {
  .slot--waarom .slot-foto { right: auto; width: 100%; }
}

/* His word on that right edge, the same evening: "like on freelyx where it also fades back
   into the background". So no edge at all: on the right the photo dissolves fully into the
   ground over a long stretch and is gone where the lines end, and at the two lines it is
   fully ground as well. */
.slot--waarom .slot-foto::before {
  background:
    linear-gradient(270deg, var(--ground) 0%, rgba(8, 8, 28, .84) 7%, rgba(8, 8, 28, .46) 16%, rgba(8, 8, 28, .14) 25%, rgba(8, 8, 28, 0) 32%),
    linear-gradient(90deg, var(--ground) 0%, var(--ground) 4%, rgba(8, 8, 28, .86) 26%, rgba(8, 8, 28, .30) 62%, rgba(8, 8, 28, .10) 100%);
}
.slot--waarom .slot-foto::after {
  background: linear-gradient(180deg, var(--ground) 0%, rgba(8, 8, 28, .5) 7%, rgba(8, 8, 28, 0) 16%, rgba(8, 8, 28, 0) 82%, rgba(8, 8, 28, .5) 92%, var(--ground) 100%);
}
@media (max-width: 980px) {
  .slot--waarom .slot-foto::before { display: none; }
  .slot--waarom .slot-foto::after { background: linear-gradient(180deg, var(--ground) 0%, rgba(8, 8, 28, 0) 30%); }
}

/* His word, same evening: "same for bottom image". The room photo at the close gets the same
   treatment as the photo beside "It starts with": it ends where the lines end and dissolves
   fully into the ground on the right, at the line above and at the line below. */
.slot-foto--kamer {
  right: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  width: min(60%, 980px);
}
.slot-foto--kamer::before {
  background:
    linear-gradient(270deg, var(--ground) 0%, rgba(8, 8, 28, .84) 7%, rgba(8, 8, 28, .46) 16%, rgba(8, 8, 28, .14) 25%, rgba(8, 8, 28, 0) 32%),
    linear-gradient(90deg, var(--ground) 0%, var(--ground) 4%, rgba(8, 8, 28, .86) 26%, rgba(8, 8, 28, .30) 62%, rgba(8, 8, 28, .10) 100%);
}
.slot-foto--kamer::after {
  background: linear-gradient(180deg, var(--ground) 0%, rgba(8, 8, 28, .5) 7%, rgba(8, 8, 28, 0) 16%, rgba(8, 8, 28, 0) 82%, rgba(8, 8, 28, .5) 92%, var(--ground) 100%);
}
@media (max-width: 980px) {
  .slot-foto--kamer { right: auto; width: 100%; }
  .slot-foto--kamer::before { display: none; }
  .slot-foto--kamer::after { background: linear-gradient(180deg, var(--ground) 0%, rgba(8, 8, 28, 0) 30%); }
}

/* =====================================================================
   VERY WIDE SCREENS (12 November 2026, his words: "on ultrawide the film breaks as it is in
   the far right not on the main page"). The film hung on the right edge of the SCREEN, so on
   a very wide screen it left the page. Now it hangs on the PAGE: its left edge sits at a fixed
   place in the content column, the layer is exactly the film's own shape (nothing is cut off
   its sides by the layer), and on the right it dissolves into the ground and is gone where
   the lines end, like the two photos.
   Measured for the dark zone behind the title, now in shares of the film itself: the title
   ends at 21 to 29% of the film, the dictionary card begins at 30%, on every screen.
   ===================================================================== */
@media (min-width: 981px) {
  .held-foto--film {
    right: auto; left: max(24%, calc((100% - var(--max)) / 2 + 346px));
    width: auto; height: 100%; aspect-ratio: 16 / 9;
  }
  .held-foto--film::before {
    background: linear-gradient(90deg, var(--ground) 0%, var(--ground) 2.5%, rgba(8, 8, 28, .86) 10%, rgba(8, 8, 28, .62) 18%, rgba(8, 8, 28, .34) 24.5%, rgba(8, 8, 28, 0) 29.5%);
  }
  .held--film::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0; z-index: 0; pointer-events: none;
    width: calc(max(var(--pad), (100% - var(--max)) / 2 + var(--pad)) + 220px);
    background: linear-gradient(90deg, rgba(8, 8, 28, 0) 0, rgba(8, 8, 28, .46) 100px, rgba(8, 8, 28, .86) 170px, var(--ground) 220px);
  }
}

/* =====================================================================
   The NVIDIA Inception badge beside the SNA mark (12 November 2026, his word). The badge is
   the program's own file, as on the live homepage: unchanged, in its own colours, with the
   approved caption "Member of NVIDIA Inception" and the trademark line in the small print.
   ===================================================================== */
.voet-merken { display: flex; align-items: center; flex-wrap: wrap; gap: 20px clamp(28px, 3.4vw, 52px); }
.nvidia { display: flex; align-items: center; gap: 12px; margin: 0; }
.nvidia img { display: block; width: 172px; height: auto; margin-left: -10px; }
.nvidia figcaption { font-size: 13px; line-height: 1.6; color: var(--text-meta); }

/* =====================================================================
   12 November 2026, his word: "the film is now faded on the right that should not happen".
   The fade over the film at the line end is gone: the film shows in full on its right side.
   Only on screens so wide that the film's own right border comes into view does that border
   itself blend into the ground over its last few percent, so no hard edge stands in the page.
   ===================================================================== */
@media (min-width: 981px) {
  .held--film::after { content: none; }
  .held-foto--film::before {
    background:
      linear-gradient(270deg, var(--ground) 0%, rgba(8, 8, 28, 0) 4%),
      linear-gradient(90deg, var(--ground) 0%, var(--ground) 2.5%, rgba(8, 8, 28, .86) 10%, rgba(8, 8, 28, .62) 18%, rgba(8, 8, 28, .34) 24.5%, rgba(8, 8, 28, 0) 29.5%);
  }
}

/* =====================================================================
   The button on the film (12 November 2026, his word: the film stops on the mark "with a play
   the signature button instead of the pause button"). While the film plays or is paused, the
   button is the small round one and its words are for screen readers only. Once the film
   stands on the mark, the same button opens up and carries its words: Play the signature.
   ===================================================================== */
.held-knop-tekst {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.held-knop[data-stand="klaar"] {
  width: auto; height: 44px; border-radius: var(--r); padding: 0 20px 0 16px; gap: 12px;
  background: rgba(8, 8, 28, .62); border-color: rgba(227, 199, 154, .34);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-hi);
}
.held-knop[data-stand="klaar"] .held-knop-tekst {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
}
.held-knop[data-stand="klaar"] .held-knop-pauze { display: none; }
.held-knop[data-stand="klaar"] .held-knop-speel { display: block; margin-left: 0; color: var(--accent-soft); }
/* Quilyx subpages, PREVIEW of 12 November 2026. Loaded after home.css; uses its tokens only.
   One grammar for every subpage, taken from the chosen homepage: a quiet page head with a photo
   that dissolves into the ground, then blocks with one thin line between them. Inside a block
   the heading stands in the left column and the text in the right one.
   No em dashes and no en dashes, also in this file. */

/* ================= page head ================= */
.pagina-held .blok { border-top: none; min-height: clamp(380px, 36vw, 500px); display: flex; flex-direction: column; justify-content: center; }
.pagina-held h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -.018em;
  color: var(--text-hi); margin-top: 22px; max-width: 760px; text-wrap: balance;
}
.pagina-held .lead { max-width: 540px; font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.6; color: var(--text-chip); margin-top: 24px; }
.pagina-held .held-acties { margin-top: 30px; }
.slot-foto--pagina {
  right: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  width: min(56%, 900px);
}
.slot-foto--pagina::before {
  background:
    linear-gradient(270deg, var(--ground) 0%, rgba(8, 8, 28, .84) 7%, rgba(8, 8, 28, .46) 16%, rgba(8, 8, 28, .14) 25%, rgba(8, 8, 28, 0) 32%),
    linear-gradient(90deg, var(--ground) 0%, var(--ground) 4%, rgba(8, 8, 28, .88) 28%, rgba(8, 8, 28, .36) 64%, rgba(8, 8, 28, .14) 100%);
}
.slot-foto--pagina::after {
  background: linear-gradient(180deg, var(--ground) 0%, rgba(8, 8, 28, .5) 8%, rgba(8, 8, 28, 0) 18%, rgba(8, 8, 28, 0) 80%, rgba(8, 8, 28, .5) 91%, var(--ground) 100%);
}
.slot-foto--gesprek img { object-position: 62% 46%; }
.slot-foto--gang img { object-position: 70% 50%; }
/* a list or a row of cards right under a block heading needs air */
.blok > h2 + .register, .blok > h2 + .kaarten, .blok > h2 + .oprichters { margin-top: clamp(24px, 2.6vw, 36px); }

/* ================= a block: heading left, text right ================= */
.tweedelig { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.tweedelig > div > :first-child { margin-top: 0; }
.tweedelig .lead { max-width: 640px; }
.tweedelig .tekst { max-width: 640px; }
.bijkop { margin-top: 18px; font-size: 15.5px; line-height: 1.65; color: var(--text-body); max-width: 420px; text-wrap: pretty; }
.sectie a.in-tekst, .tekst a, .lead a, .rijen a, .register a {
  color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.tekst a:hover, .lead a:hover, .rijen a:hover, .register a:hover { text-decoration-thickness: 2px; }

/* numbered rows: the four questions, the six steps */
.cijferlijst { list-style: none; border-top: 1px solid var(--hairline-row); margin-top: 22px; max-width: 680px; }
.cijferlijst li {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 16px 0 17px; border-bottom: 1px solid var(--hairline-row);
  font-size: 16px; line-height: 1.6; color: var(--text);
}
.cijferlijst .cijfer { font-family: var(--display); font-weight: 300; font-size: 26px; line-height: 1; color: var(--accent-soft); font-variant-numeric: tabular-nums; }
.cijferlijst b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1.3; color: var(--text-title); }
/* the direct child only: a word marked as Dutch inside the description must stay in the line */
.cijferlijst li > span > span { display: block; margin-top: 5px; font-size: 15px; line-height: 1.65; color: var(--text-desc); }

/* plain rows with hairlines */
.rijen { list-style: none; border-top: 1px solid var(--hairline-row); max-width: 680px; }
.rijen li { padding: 15px 0 16px; border-bottom: 1px solid var(--hairline-row); font-size: 15.5px; line-height: 1.65; color: var(--text-body); text-wrap: pretty; }
.rijen b { color: var(--text); font-weight: 600; }

/* the register: a short heading left, its text right */
.register { border-top: 1px solid var(--hairline-row); max-width: 720px; }
.register > div { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 8px clamp(18px, 2.6vw, 36px); padding: 18px 0 19px; border-bottom: 1px solid var(--hairline-row); }
.register dt { font-family: var(--display); font-weight: 400; font-size: 17.5px; line-height: 1.35; color: var(--text-title); text-wrap: balance; }
.register dd { font-size: 15px; line-height: 1.68; color: var(--text-desc); text-wrap: pretty; }
.register--breed { max-width: none; }
.register--breed > div { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 10px clamp(28px, 5vw, 88px); padding: 24px 0 26px; }
.register--breed dt { font-size: clamp(19px, 1.6vw, 22px); max-width: 420px; }
.register--breed dd { font-size: 15.5px; max-width: 640px; }

/* framed cards in a row: systems, kinds of work, cases */
.kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(26px, 3vw, 40px); }
.kaarten--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaartje { border: 1px solid var(--hairline-strong); border-radius: var(--r-vlak); padding: clamp(22px, 2.3vw, 32px) clamp(20px, 2.3vw, 32px) clamp(24px, 2.5vw, 34px); display: flex; flex-direction: column; }
.kaartje-label { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-soft); }
.kaartje h3 { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; color: var(--text-title); margin-top: 12px; text-wrap: balance; }
.kaartje p { margin-top: 12px; font-size: 15px; line-height: 1.68; color: var(--text-body); text-wrap: pretty; }
.kaartje .citaat { margin-top: auto; padding-top: 20px; }
.citaat { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 15.5px; line-height: 1.6; color: var(--accent-soft); text-wrap: pretty; }
.citaat cite { display: block; margin-top: 8px; font-family: var(--sans); font-style: normal; font-size: 12.5px; letter-spacing: .04em; color: var(--text-meta); }

/* VERDER with one line per letter */
.verder-vijf { list-style: none; border-top: 1px solid var(--hairline-row); max-width: 720px; }
.verder-vijf li { display: grid; grid-template-columns: 54px minmax(0, 190px) minmax(0, 1fr); gap: 6px 14px; align-items: baseline; padding: 16px 0 17px; border-bottom: 1px solid var(--hairline-row); }
.verder-vijf .letter { font-family: var(--display); font-weight: 300; font-size: 30px; line-height: 1; color: var(--accent-soft); }
.verder-vijf .naam { font-family: var(--display); font-size: 18px; line-height: 1.3; color: var(--text-title); }
.verder-vijf .naam small { display: block; margin-top: 3px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.verder-vijf .regel { font-size: 15px; line-height: 1.65; color: var(--text-desc); text-wrap: pretty; }

/* the founders: two equal frames */
.oprichters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); margin-top: clamp(26px, 3vw, 40px); }
.oprichter { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: clamp(18px, 2.2vw, 30px); align-items: start; border: 1px solid var(--hairline-strong); border-radius: var(--r-vlak); padding: clamp(16px, 1.8vw, 24px); margin: 0; }
.oprichter img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.oprichter figcaption { padding-top: 4px; }
.oprichter .naam { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(21px, 1.9vw, 25px); line-height: 1.25; color: var(--text-title); }
.oprichter .rol { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-soft); }
.oprichter p { margin-top: 14px; font-size: 15px; line-height: 1.68; color: var(--text-body); text-wrap: pretty; }

/* the dictionary entry, set in type after the film's own card */
.lemma { border-left: 1px solid var(--hairline-strong); padding: 6px 0 8px clamp(22px, 2.6vw, 40px); max-width: 560px; }
.lemma-woord { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; color: var(--text-hi); }
.lemma-klank { font-family: var(--display); font-style: italic; font-size: 19px; color: var(--accent-soft); margin-left: 12px; }
.lemma-soort { margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--text-muted); }
.lemma-herkomst { margin-top: 10px; font-family: var(--display); font-style: italic; font-size: 16px; color: var(--text-meta); }
.lemma-betekenis { margin-top: 12px; font-family: var(--display); font-size: 18.5px; line-height: 1.55; color: var(--text); }
.lemma-betekenis b { font-weight: 400; color: var(--accent-soft); margin-right: 8px; }

/* facts in a quiet grid */
.feiten-rooster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); border-top: 1px solid var(--hairline-row); max-width: 720px; }
.feiten-rooster > div { padding: 14px 0 15px; border-bottom: 1px solid var(--hairline-row); }
.feiten-rooster dt { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.feiten-rooster dd { margin-top: 5px; font-size: 15px; line-height: 1.55; color: var(--text); }

.nav a[aria-current="page"] { color: var(--text-hi); }

@media (max-width: 980px) {
  .pagina-held .blok { min-height: 0; }
  .slot-foto--pagina { right: auto; width: 100%; }
  .slot-foto--pagina::before { display: none; }
  .slot-foto--pagina::after { background: linear-gradient(180deg, var(--ground) 0%, rgba(8, 8, 28, 0) 30%); }
  .tweedelig { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .register--breed > div { grid-template-columns: minmax(0, 1fr); }
  .kaarten { grid-template-columns: minmax(0, 1fr); }
  .oprichters { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .register > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .verder-vijf li { grid-template-columns: 44px minmax(0, 1fr); }
  .verder-vijf .regel { grid-column: 2; }
  .oprichter { grid-template-columns: minmax(0, 1fr); }
  .oprichter img { max-width: 240px; }
  .feiten-rooster { grid-template-columns: minmax(0, 1fr); }
  .cijferlijst li { grid-template-columns: 42px minmax(0, 1fr); }
}

/* =====================================================================
   THE VERDER MAP (12 November 2026). Layout after his own ChatGPT picture: the word in a circle
   in the middle, V above it, E and R beside it, D and R below with the small word "en" between
   them. The lines from the circle to the cards are drawn by assets/js/verder-kaart.js.
   ===================================================================== */
.slot-foto--film img { object-position: 50% 50%; }
.blok--kaart { border-top: none; padding-top: clamp(8px, 1.4vw, 20px); }
.vkaart {
  position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr));
  row-gap: clamp(40px, 4.4vw, 64px); align-items: center;
}
.vkaart-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vkaart-lijnen line { stroke: var(--accent); stroke-width: 1.2; opacity: .85; }

.vblok {
  position: relative; background: var(--ground);
  border: 1px solid rgba(216, 174, 115, .62); border-radius: var(--r-vlak);
  padding: clamp(18px, 1.8vw, 26px) clamp(18px, 1.9vw, 28px) clamp(20px, 2vw, 28px);
}
.vblok--v { grid-column: 8 / 18; grid-row: 1; }
.vblok--e { grid-column: 1 / 9; grid-row: 2; }
.vmidden { grid-column: 10 / 16; grid-row: 2; }
.vblok--r1 { grid-column: 17 / 25; grid-row: 2; }
.vblok--d { grid-column: 3 / 11; grid-row: 3; }
.ven { grid-column: 11 / 15; grid-row: 3; }
.vblok--r2 { grid-column: 15 / 23; grid-row: 3; }

.vblok header { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 18px); }
.vletter {
  font-family: var(--display); font-weight: 300; font-size: clamp(40px, 3.6vw, 54px); line-height: 1;
  color: var(--accent); padding-right: clamp(12px, 1.2vw, 18px); border-right: 1px solid rgba(216, 174, 115, .5);
}
.vblok h3 { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; color: var(--text-hi); }
.vblok h3 span { display: block; }
.vblok h3 .vengels { color: var(--text-chip); }
.vblok p { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.vblok ul { list-style: none; margin-top: 12px; }
.vblok li { position: relative; padding: 4px 0 4px 20px; font-size: 14.5px; line-height: 1.45; }
.vblok li::before { content: ''; position: absolute; left: 0; top: 14px; width: 9px; border-top: 1px solid var(--accent-soft); }
.vblok li a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vblok li a:hover { color: #EBD3AC; text-decoration-thickness: 2px; }

.vmidden {
  position: relative; justify-self: center; width: min(100%, 250px); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: 1.5px solid var(--accent);
  background: radial-gradient(circle at 50% 38%, rgba(185, 128, 63, .16), rgba(8, 8, 28, 1) 72%);
}
.vmidden-woord { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.5vw, 36px); letter-spacing: .06em; line-height: 1; color: var(--accent-soft); }
.vmidden-sub { margin-top: 12px; font-family: var(--display); font-style: italic; font-size: 14.5px; color: var(--text); }

.ven { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-style: italic; font-size: 20px; color: var(--text-hi); }
.ven::before, .ven::after { content: ''; flex: 1; border-top: 1px solid var(--accent); opacity: .85; }

/* start here */
.vstart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.vstart-titel { margin-top: 22px; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.25; color: var(--text-title); max-width: 480px; text-wrap: balance; }
.vstart .film-kader img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 60% 46%; }

@media (max-width: 1100px) {
  .vblok--e { grid-column: 1 / 9; }
  .vmidden { width: min(100%, 190px); }
}
@media (max-width: 980px) {
  /* one column: the circle first, then the five cards in the order of the word, no lines */
  .vkaart { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .vkaart-lijnen { display: none; }
  .vblok--v, .vblok--e, .vblok--r1, .vblok--d, .vblok--r2, .vmidden, .ven { grid-column: 1; grid-row: auto; }
  .vmidden { order: -1; width: 190px; margin-bottom: 10px; }
  .ven { justify-content: center; }
  .vstart { grid-template-columns: minmax(0, 1fr); }
}
/* the two lower cards start on one line, whatever their length */
.vblok--d, .vblok--r2 { align-self: start; }

/* =====================================================================
   BLOG, POSTS AND STANDING PAGES (12 November 2026). A page head without a photo, the list of
   posts as a quiet grid in the grammar of the Freelyx knowledge cards (one border around the
   group, hairlines between), and one reading column for a post or a policy.
   ===================================================================== */
.pagina-held--kaal .blok { min-height: 0; padding-block: clamp(52px, 6vw, 92px) clamp(30px, 3.4vw, 48px); }
.pagina-held--kaal h1 { max-width: 900px; }
.terug { font-size: 14px; margin-bottom: 26px; }
.terug a { display: inline-flex; align-items: center; gap: 10px; color: var(--text-meta); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(154, 146, 134, .5); }
.terug a::before { content: ''; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.terug a:hover { color: var(--accent-soft); }
.terug--onder { margin: clamp(36px, 4vw, 56px) 0 0; }

.blogkaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline-row); }
.blogkaart {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 30px) clamp(24px, 2.6vw, 36px);
  border-right: 1px solid var(--hairline-row); border-bottom: 1px solid var(--hairline-row);
}
.blogkaart:hover, .blogkaart:focus-within { background: var(--rij-hover); }
.blogkaart .kaartje-label { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.blogkaart .kaartje-label span { color: var(--text-muted); }
.blogkaart h3 { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; margin-top: 14px; text-wrap: pretty; }
.blogkaart h3 a { color: var(--text-title); }
.blogkaart h3 a::after { content: ''; position: absolute; inset: 0; }
.blogkaart:hover h3 a, .blogkaart:focus-within h3 a { color: var(--accent-soft); }
.blogkaart p:not(.kaartje-label) { margin-top: 10px; font-size: 14.5px; line-height: 1.62; color: var(--text-desc); text-wrap: pretty; }

/* the reading column */
.proza { max-width: 720px; font-size: 16.5px; line-height: 1.75; color: var(--text-chip); }
.proza > :first-child { margin-top: 0; }
.proza p { margin-top: 18px; text-wrap: pretty; }
.proza h2 { font-family: var(--display); font-weight: 400; font-size: clamp(23px, 2.1vw, 29px); line-height: 1.22; letter-spacing: -.008em; color: var(--text-hi); margin-top: 46px; text-wrap: balance; scroll-margin-top: calc(var(--kop-h) + 16px); }
.proza h3 { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--text-title); margin-top: 32px; text-wrap: balance; }
.proza h4 { font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--text); margin-top: 26px; }
.proza strong, .proza b { color: var(--text); font-weight: 600; }
.proza a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.proza a:hover { text-decoration-thickness: 2px; }
.proza ul, .proza ol { margin-top: 16px; padding-left: 0; list-style: none; counter-reset: stap; }
.proza li { position: relative; padding: 5px 0 5px 28px; }
.proza ul > li::before { content: ''; position: absolute; left: 4px; top: 19px; width: 10px; border-top: 1px solid var(--accent-soft); }
.proza ol > li { counter-increment: stap; }
.proza ol > li::before { content: counter(stap); position: absolute; left: 0; top: 5px; font-family: var(--display); color: var(--accent-soft); }
.proza blockquote { margin-top: 24px; border-left: 2px solid var(--accent); padding: 4px 0 4px 22px; font-family: var(--display); font-style: italic; font-size: 18px; line-height: 1.6; color: var(--text-hi); }
.proza blockquote p:first-child { margin-top: 0; }
.proza code { font-family: Consolas, 'Courier New', monospace; font-size: .92em; background: rgba(255, 255, 255, .05); border-radius: var(--r); padding: 1px 5px; }
.proza pre { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: var(--r-vlak); overflow-x: auto; font-size: 14px; line-height: 1.6; }
.proza pre code { background: none; padding: 0; }
.proza hr { border: 0; border-top: 1px solid var(--hairline); margin: 36px 0; }

/* a policy: the list of sections beside the text */
.document { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.document-index { position: sticky; top: calc(var(--kop-h) + 24px); max-height: calc(100vh - var(--kop-h) - 48px); overflow-y: auto; }
.document-index-kop { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.document-index ul { list-style: none; margin-top: 12px; border-top: 1px solid var(--hairline-row); }
.document-index li { border-bottom: 1px solid var(--hairline-row); }
.document-index a { display: block; padding: 9px 0; font-size: 14px; line-height: 1.45; color: var(--text-desc); }
.document-index a:hover { color: var(--accent-soft); }
.document-index:has(ul:empty), .document-index:not(:has(ul)) { display: none; }

@media (max-width: 980px) {
  .blogkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document { grid-template-columns: minmax(0, 1fr); }
  .document-index { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .blogkaarten { grid-template-columns: minmax(0, 1fr); }
  .proza { font-size: 16px; }
}
/* the office portraits show more of the room, so the photo gets a wider column */
.oprichter { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
@media (max-width: 720px) { .oprichter { grid-template-columns: minmax(0, 1fr); } .oprichter img { max-width: 280px; } }

/* =====================================================================
   THE REAL BUILD (12 November 2026). build.py writes posts, pages and the blog list with its
   own class names (post, post-header, post-body, post-list, post-card, doc-index). These rules
   give that markup the look of the preview. The Dutch site keeps its own stylesheet.
   ===================================================================== */
.inhoud-strook { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); width: 100%; }
body.page-vrij .inhoud-strook { max-width: none; padding-inline: 0; }
.post-header, .blog-intro { padding-block: clamp(52px, 6vw, 92px) clamp(30px, 3.4vw, 48px); }
.post-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-soft); }
.post-eyebrow time { color: var(--text-muted); }
.post-title, .blog-intro h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -.018em;
  color: var(--text-hi); margin-top: 22px; max-width: 900px; text-wrap: balance;
}
.blog-intro h1 { margin-top: 0; }
.blog-intro p { margin-top: 24px; max-width: 540px; font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.6; color: var(--text-chip); }
.post-body { max-width: 720px; font-size: 16.5px; line-height: 1.75; color: var(--text-chip); }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin-top: 18px; text-wrap: pretty; }
.post-body h2 { font-family: var(--display); font-weight: 400; font-size: clamp(23px, 2.1vw, 29px); line-height: 1.22; letter-spacing: -.008em; color: var(--text-hi); margin-top: 46px; text-wrap: balance; scroll-margin-top: calc(var(--kop-h) + 16px); }
.post-body h3 { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--text-title); margin-top: 32px; text-wrap: balance; }
.post-body h4 { font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--text); margin-top: 26px; }
.post-body strong, .post-body b { color: var(--text); font-weight: 600; }
.post-body a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body ul, .post-body ol { margin-top: 16px; padding-left: 0; list-style: none; counter-reset: stap; }
.post-body li { position: relative; padding: 5px 0 5px 28px; }
.post-body ul > li::before { content: ''; position: absolute; left: 4px; top: 19px; width: 10px; border-top: 1px solid var(--accent-soft); }
.post-body ol > li { counter-increment: stap; }
.post-body ol > li::before { content: counter(stap); position: absolute; left: 0; top: 5px; font-family: var(--display); color: var(--accent-soft); }
.post-body blockquote { margin-top: 24px; border-left: 2px solid var(--accent); padding: 4px 0 4px 22px; font-family: var(--display); font-style: italic; font-size: 18px; line-height: 1.6; color: var(--text-hi); }
.post-body blockquote p:first-child { margin-top: 0; }
.post-body code { font-family: Consolas, 'Courier New', monospace; font-size: .92em; background: rgba(255, 255, 255, .05); border-radius: var(--r); padding: 1px 5px; }
.post-body pre { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: var(--r-vlak); overflow-x: auto; font-size: 14px; line-height: 1.6; }
.post-body pre code { background: none; padding: 0; }
.post-body hr { border: 0; border-top: 1px solid var(--hairline); margin: 36px 0; }
.post-body { padding-bottom: clamp(20px, 2vw, 32px); }
.post-foot { margin: clamp(30px, 3.4vw, 48px) 0 clamp(52px, 6vw, 88px); font-size: 14px; }
.post-foot a { display: inline-flex; align-items: center; gap: 10px; color: var(--text-meta); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(154, 146, 134, .5); }
.post-foot a::before { content: ''; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.post-foot a:hover { color: var(--accent-soft); }
.page-doc .post { padding-bottom: clamp(52px, 6vw, 88px); }

.post-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline-row); margin-bottom: clamp(52px, 6vw, 88px); }
.post-list li { display: flex; border-right: 1px solid var(--hairline-row); border-bottom: 1px solid var(--hairline-row); }
.post-card { display: flex; flex-direction: column; width: 100%; padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 30px) clamp(24px, 2.6vw, 36px); color: inherit; }
.post-card:hover, .post-card:focus-visible { background: var(--rij-hover); color: inherit; }
.post-card-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.post-card-cat { color: var(--accent-soft); }
.post-card-date { color: var(--text-muted); }
.post-card-title { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; letter-spacing: 0; color: var(--text-title); margin-top: 14px; text-wrap: pretty; }
.post-card:hover .post-card-title { color: var(--accent-soft); }
.post-card-summary { margin-top: 10px; font-size: 14.5px; line-height: 1.62; color: var(--text-desc); text-wrap: pretty; }

/* a policy: the list of sections beside the text */
.page-doc .post-body:has(> .doc-index) { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 720px); column-gap: clamp(28px, 5vw, 88px); max-width: none; }
.page-doc .post-body:has(> .doc-index) > * { grid-column: 2; }
.page-doc .post-body > .doc-index { grid-column: 1; grid-row: 1 / span 400; align-self: start; position: sticky; top: calc(var(--kop-h) + 24px); max-height: calc(100vh - var(--kop-h) - 48px); overflow-y: auto; }
.doc-index ul { margin-top: 0; border-top: 1px solid var(--hairline-row); }
.doc-index li { padding: 0; border-bottom: 1px solid var(--hairline-row); }
.doc-index li::before { content: none; }
.doc-index a { display: block; padding: 9px 0; font-size: 14px; line-height: 1.45; color: var(--text-desc); text-decoration: none; }
.doc-index a:hover { color: var(--accent-soft); }

/* the menu item of the page you are on */
.pg-ai-strategy .nav a[href="/ai-strategy/"], .pg-digital-transformation .nav a[href="/digital-transformation/"],
.pg-verder .nav a[href="/verder/"], .pg-about .nav a[href="/about/"] { color: var(--text-hi); }

@media (max-width: 980px) {
  .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-doc .post-body:has(> .doc-index) { display: block; }
  .page-doc .post-body > .doc-index { position: static; max-height: none; margin-bottom: 28px; }
}
@media (max-width: 720px) {
  .post-list { grid-template-columns: minmax(0, 1fr); }
}