/* ==========================================================================
   Pixeled.solutions, "De Gevel"
   One dark scene after another. The regielijn is a line of light, the brand
   pixel stands in the facade as a lit object, sections are numbered like
   chapter cards. Direction chosen by Ruben on 2026-09-03 from three rendered
   proposals (voorstel/b), with the live-type wordmark taken from proposal C.
   Rules that still hold: roest is the only warm colour (here as light), zand
   appears only in the wordmark, no third-party requests, motion only for
   readers who allow it.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-600-latin.woff2") format("woff2-variations"),
       url("/assets/fonts/montserrat-600-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --inkt: #202024;
  --inkt-diep: #16161a;
  --papier: #F5F4F7;
  --nevel: #E6E3EC;
  --lila: #D9D1E6;
  --roest: #703828;
  /* 2026-10-04 (Ruben: punchier on dark): the old #8A4A2E sat at 2.4:1 on ink and
     #703828 at 1.77:1. Dark is the default ground, so the bright tone is the
     default accent; light scenes switch back to the deep one below. */
  --roest-licht: #E07A48;        /* 5.45:1 on ink */
  --roest-diep-accent: #8A4A2E;  /* the accent on papier */
  --roest-knop: #B4532F;         /* button fill: white text 4.54:1 */
  --roest-knop-donker: #9A4527;  /* gradient runs from the 4.54:1 tone to darker, never lighter */
  --aubergine: #383040;
  --aubergine-diep: #2E2739;
  --zand: #E5D5C4;

  /* the line of light */
  --licht: rgba(224, 122, 72, 0.95);
  --licht-zacht: rgba(224, 122, 72, 0.5);
  --rand: rgba(245, 244, 247, 0.12);
  --rand-zacht: rgba(245, 244, 247, 0.08);
  --tekst: var(--papier);
  --tekst-zacht: rgba(245, 244, 247, 0.9);
  --tekst-stil: rgba(245, 244, 247, 0.78);
  --rand-sterk: rgba(245, 244, 247, 0.5);
  --vlak: rgba(46, 39, 57, 0.7);        /* form surfaces, notes */

  --font: "General Sans", "Segoe UI", system-ui, sans-serif;
  --display: "Montserrat", "Avenir Next", system-ui, sans-serif;

  /* One centred container, so wide screens do not leave the content hugging
     the left edge. The line of light rides the container's left edge. */
  --paginabreedte: 1360px;
  --zij: max(clamp(18px, 4.5vw, 64px), calc((100vw - var(--paginabreedte)) / 2));
  --lijn-x: var(--zij);
  --marge: var(--zij);
  --inhoud-x: calc(var(--zij) + clamp(20px, 2.6vw, 48px));
  --ruimte: clamp(52px, 5.4vw, 96px);
  --maat: 56ch;              /* 2026-09-08: was 44ch; 56ch renders about 72 characters, inside the 75 gate */
  --maat-breed: 58ch;
  --s: 210px; --h: 300px;   /* the sculpture */
  --kop-h: 80px;
}
@media (max-width: 700px) { :root { --s: 92px; --h: 132px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* the fixed header plus the language hint when it is open; --hint-h is measured
   by site.js, so a hint that wraps on a phone counts at its real height */
:target, [id] { scroll-margin-top: calc(var(--kop-h) + var(--hint-h, 0px) + 24px); }

body {
  margin: 0; position: relative;
  background: var(--inkt); color: var(--papier);
  font: 400 17px/1.55 var(--font);
  word-spacing: 0.075em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1.1em; max-width: var(--maat); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--papier); outline-offset: 3px; }
::selection { background: var(--roest); color: var(--papier); }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 3.6vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 17ch; }
h2 { font-size: clamp(1.55rem, 2vw, 2.3rem); line-height: 1.14; }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.02em; }
h2 + p, h2 + .lede, h2 + .met-foto, h2 + ul, h2 + ol, h2 + .eigen-grid, h2 + .caselijst,
h2 + .bewijs-lijst, h2 + .contact-blok, h2 + .strook, h2 + .schermen, h2 + .ladder,
.dienst-kop + p, .dienst-kop + .met-foto { margin-top: 0.7em; }
.lede, .tekst { font-size: clamp(1.02rem, 0.6vw + 0.8rem, 1.18rem); line-height: 1.55; color: var(--tekst-zacht); max-width: var(--maat); }
p { color: var(--tekst-zacht); }
h1, h2, h3 { color: var(--tekst); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--papier); color: var(--inkt); padding: 12px 18px; font-weight: 500; }
.skip:focus { left: 8px; top: 8px; }

/* ============================ the line of light ============================
   Drawn by every scene and by the hero at the same x, so it reads as one
   continuous line yet always sits under the knopen and the content. */

.regielijn { display: none; }
.hero::before, .scene::before, .regiebalk::before {
  content: ""; position: absolute; left: var(--lijn-x); top: 0; bottom: 0; width: 1px; z-index: 0;
  pointer-events: none;
  background: var(--licht);
  box-shadow: 0 0 14px 1px var(--licht-zacht);
}
.hero::before { background: linear-gradient(180deg, transparent 0, var(--licht) 120px, var(--licht) 100%); }
.hero-in, .scene > .in { position: relative; z-index: 2; }
.knoop {
  /* niet-tekst */
  position: absolute; z-index: 3;
  top: 0.55em; left: calc(var(--lijn-x) - var(--inhoud-x) - 4px);
  width: 9px; height: 9px;
  background: var(--roest-licht);
  box-shadow: 0 0 16px 3px rgba(163, 92, 62, 0.65);
}

/* ================================ header ==================================
   Over the scene, transparent; solid once the reader scrolls. */

.regiebalk {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; color: var(--papier);
  transition: background-color 220ms ease;
}
.regiebalk::before { display: none; }
.regiebalk.klein { background: rgba(32, 32, 36, 0.92); backdrop-filter: blur(8px); }
.regiebalk.klein::before { display: block; }
.regiebalk-in {
  display: flex; align-items: center; gap: 28px;
  height: var(--kop-h);
  padding: 0 var(--marge) 0 var(--inhoud-x);
}
.merk { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; color: var(--zand); }
.merk-pixel { width: 19px; height: 32px; display: block; flex: none; }
/* the wordmark set live, in its own colour, as in proposal C */
.merk-naam { font: 600 1.35rem/1 var(--display); letter-spacing: -0.03em; color: var(--zand); }
.nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
/* board #5: the language switch sat 2 px high in a smaller face; it now shares
   the menu's size, tracking and padding, so the two read as one row */
.nav-lijst { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-lijst a { color: rgba(245,244,247,0.85); text-decoration: none; font-size: 0.86rem; letter-spacing: 0.03em; white-space: nowrap; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav-lijst a:hover { color: var(--papier); }
.nav-lijst a[aria-current="page"] { color: var(--papier); border-bottom-color: var(--roest-licht); }
.nav-meer { display: none; }
.taal { display: flex; align-items: center; gap: 8px; font-size: 17px; line-height: 1.55; }
.taal a { font-size: 0.86rem; letter-spacing: 0.03em; line-height: inherit; display: inline;  text-decoration: none; color: rgba(245,244,247,0.6); padding: 0 2px; }
.taal a:hover { color: var(--papier); text-decoration: underline; text-underline-offset: 4px; }
.taal a[aria-current="true"] { color: var(--papier); font-weight: 500; }
.nav-contact { color: var(--papier); text-decoration: none; font-size: 0.86rem; letter-spacing: 0.03em; padding: 9px 16px; border: 1px solid rgba(245,244,247,0.45); background: none; font-weight: 500; }
.nav-contact:hover { background: rgba(245,244,247,0.1); }
.voortgang { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--licht); box-shadow: 0 0 10px 1px var(--licht-zacht); }
@media (prefers-reduced-motion: reduce) { .voortgang { display: none; } }

.sheet-knop { display: none; margin-left: auto; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: 1px solid rgba(245,244,247,0.32); cursor: pointer; padding: 0; }
.sheet-knop span, .sheet-knop span::before, .sheet-knop span::after { display: block; width: 18px; height: 2px; background: var(--papier); }
.sheet-knop span { position: relative; }
.sheet-knop span::before, .sheet-knop span::after { content: ""; position: absolute; left: 0; }
.sheet-knop span::before { top: -6px; }
.sheet-knop span::after { top: 6px; }
@media (max-width: 900px) { .nav { display: none; } .sheet-knop { display: flex; } }

/* the bottom sheet */
.sheet-laag { position: fixed; inset: 0; z-index: 210; background: rgba(22, 22, 26, 0.7); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.sheet-laag.open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 211; background: var(--aubergine-diep); color: var(--papier); border-top: 1px solid var(--rand); padding: 14px 22px 26px; transform: translateY(102%); transition: transform 0.24s ease; max-height: 88vh; overflow-y: auto; }
.sheet.open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-laag { transition: none; } }
.sheet-kop { display: flex; align-items: center; justify-content: flex-end; }
.sheet-greep { width: 44px; height: 4px; background: rgba(245,244,247,0.3); margin: 0 auto 6px; }
.sheet-sluit { background: none; border: 0; color: var(--papier); cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 6px 10px; }
.sheet-nav { list-style: none; margin: 12px 0 0; padding: 0; }
.sheet-nav a { display: block; padding: 14px 0 14px 14px; color: var(--papier); text-decoration: none; font-size: 1.06rem; border-bottom: 1px solid var(--rand-zacht); border-left: 2px solid transparent; }
.sheet-nav a[aria-current="page"] { border-left-color: var(--roest-licht); font-weight: 500; }
.sheet-voet { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }

/* language hint, below the header, in the scene */
.taalhint { background: rgba(46, 39, 57, 0.92); color: var(--papier); border-bottom: 1px solid var(--rand-zacht); font-size: 0.9rem; position: relative; z-index: 6; }
.taalhint-in { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px var(--marge) 10px var(--inhoud-x); }
.taalhint .link { color: var(--papier); }
.taalhint button { font: inherit; background: none; border: 0; cursor: pointer; color: var(--papier); opacity: 0.72; text-decoration: underline; padding: 2px 4px; margin-left: auto; }

/* ============================== buttons and links ========================== */

.cta-rij { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 1.7em; }
.btn { display: inline-block; padding: 15px 24px; background: linear-gradient(180deg, var(--roest-knop), var(--roest-knop-donker)); color: var(--papier); text-decoration: none; font-weight: 500; line-height: 1.2; border: 1px solid transparent; font: 500 1rem/1.2 var(--font); }
.btn--stil { background: none; border-color: var(--rand-sterk); color: var(--tekst); }
.btn:hover { filter: brightness(1.12); }
.btn--stil:hover { background: rgba(127,127,127,0.12); filter: none; }
/* Every .link on this site is a standalone action (its own line or its own
   paragraph), so it can carry a 44px touch target without disturbing prose. */
.link { display: inline-flex; align-items: center; min-height: 44px; }
.taalhint .link, .taalhint button, .voet-juridisch a, .contact-rij dd a { display: inline-flex; align-items: center; min-height: 44px; }
.kaart .link, .credit p .link { min-height: 40px; }
.link { color: var(--tekst); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--roest-licht); text-decoration-thickness: 1.5px; }
.link:hover { text-decoration-thickness: 3px; }

/* =============================== the hero ================================= */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(38svh, 340px);
  display: grid; align-items: end;
  padding: calc(var(--kop-h) + var(--hint-h, 0px) + 30px) var(--marge) clamp(34px, 3.6vw, 56px) var(--inhoud-x);
}
.hero--groot { min-height: min(88svh, 760px); }
.hero-doek { position: absolute; inset: 0; z-index: -2; background: url("/assets/photos/hero-1520.webp?v=98ebc246") 60% 50% / cover no-repeat; }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .hero-doek { background-image: image-set(url("/assets/photos/hero-1520.avif?v=77565ca8") type("image/avif"), url("/assets/photos/hero-1520.webp?v=98ebc246") type("image/webp")); }
}
.hero-sluier { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(32,32,36,0.93) 0%, rgba(32,32,36,0.72) 45%, rgba(32,32,36,0.28) 100%),
              linear-gradient(0deg, var(--inkt) 0%, rgba(32,32,36,0) 45%),
              linear-gradient(180deg, rgba(32,32,36,0.55) 0%, rgba(32,32,36,0) 30%); }
.hero--sub .hero-sluier { background: linear-gradient(90deg, rgba(32,32,36,0.95) 0%, rgba(32,32,36,0.8) 50%, rgba(32,32,36,0.5) 100%), linear-gradient(0deg, var(--inkt) 0%, rgba(32,32,36,0) 50%); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: end; }
.hero--sub .hero-in { grid-template-columns: minmax(0, 1fr); }
.titelkaart { font: 400 0.8rem/1.4 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,244,247,0.8); margin: 0 0 26px; max-width: none; }
.hero .lede { margin-top: 1.15em; }
.hero .cta-rij { margin-top: 1.7em; }

/* the sculpture is the mark itself: the isometric P, large, lit, floating over
   its shadow. No CSS 3D, so it renders the same in every engine. */
.beeldmerk-scene { position: relative; justify-self: center; align-self: end; width: clamp(140px, 15vw, 230px); margin-bottom: 24px; }
.beeldmerk { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)) drop-shadow(0 0 40px rgba(163, 92, 62, 0.25)); }
.beeldmerk-schaduw { position: absolute; left: 50%; bottom: -34px; width: 150%; height: 22%; margin-left: -75%; background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.22) 45%, transparent 72%); }
@media (max-width: 860px) {
  .hero { padding-top: calc(var(--kop-h) + var(--hint-h, 0px) + 16px); }
  .hero-in { grid-template-columns: 1fr; gap: 12px; }
  .beeldmerk-scene { order: -1; justify-self: end; width: clamp(96px, 26vw, 150px); margin-bottom: 8px; }
  .hero h1 { max-width: none; }
}

@media (max-width: 900px) and (max-height: 520px) { .beeldmerk-scene { display: none; } }

/* ================================ scenes ================================== */

.scene { position: relative; overflow: hidden; isolation: isolate; padding: var(--ruimte) var(--marge) var(--ruimte) var(--inhoud-x); }
.scene + .scene { border-top: 1px solid var(--rand-zacht); }

.in { max-width: var(--maat-breed); }
.in--breed { max-width: none; }

/* One column per scene: heading above its prose, which is how it reads
   (Ruben, 2026-09-03). The width is used by the standing photograph beside
   the text, not by splitting the text away from its heading. */

/* Reading scenes on wide screens: the heading takes its own column and the
   prose sits beside it, so a 1360px container is used instead of leaving a
   600px column with empty space to its right. Scenes that already fill the
   width (a standing photograph, a filmstrip, the closing statement) opt out.
   Browsers without :has simply keep the single column. */
.scene h2 { margin-bottom: 0.7em; }
.scene { color: var(--tekst); }
.scene--paars { background: linear-gradient(170deg, var(--inkt) 0%, var(--aubergine-diep) 70%, #352c43 100%); }
.scene--stage { background: linear-gradient(180deg, var(--inkt) 0%, #26232c 100%); }
.scene--diep { background: var(--inkt-diep); }
/* light scenes: the reading register, inkt on papier, so a page breathes */
.scene--licht, .scene--nevel, .scene--lila {
  --tekst: var(--inkt);
  --tekst-zacht: rgba(32, 32, 36, 0.86);
  --tekst-stil: rgba(32, 32, 36, 0.72);
  --rand: rgba(32, 32, 36, 0.16);
  --rand-zacht: rgba(32, 32, 36, 0.1);
  --rand-sterk: rgba(32, 32, 36, 0.55);
  --vlak: rgba(255, 255, 255, 0.55);
  --roest-licht: var(--roest-diep-accent);
}
.scene--licht { background: var(--papier); }
.scene--nevel { background: var(--nevel); }
.scene--lila  { background: var(--lila); --tekst: var(--aubergine-diep); --tekst-zacht: rgba(46, 39, 57, 0.88); }
.scene--licht + .scene--licht, .scene--nevel + .scene--nevel { border-top-color: var(--rand-zacht); }
.sub { color: var(--tekst-stil); font-size: 0.95rem; }

/* a scene with a photograph standing in its right half */
.scene > .scene-doek { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; z-index: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-composite: intersect; }
.scene > .scene-doek .foto, .scene > .scene-doek picture, .scene > .scene-doek img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.scene > .scene-doek img { object-fit: cover; display: block; border: 0; /* niet-tekst */ opacity: 0.5; }
/* On phones the photograph becomes the scene's own background: full width,
   quiet, fading in from the top so the heading always starts on clean ground.
   Contrast over the real pixels is measured, not assumed. */
@media (max-width: 860px) {
  .scene > .scene-doek {
    width: 100%; /* niet-tekst */ opacity: 0.2;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
  }
  .scene > .scene-doek img { object-position: 60% 50%; }
}   /* text-led on phones; a 22% photo read as a grey block behind the copy */

/* the price as a figure */
.tarief { font: 300 clamp(2.3rem, 3vw, 3.5rem)/1 var(--display); letter-spacing: -0.045em; margin: 0.7em 0 0.3em; max-width: none; }
.tarief small { display: block; font: 400 0.92rem/1.4 var(--font); letter-spacing: 0.04em; color: var(--tekst-zacht); margin-top: 0.5em; }
.tarief--klein { font-size: clamp(1.9rem, 2.4vw, 2.7rem); margin-top: 0.6em; }
.prijs { display: inline-block; font: 300 clamp(1.6rem, 2.4vw, 2.4rem)/1 var(--display); letter-spacing: -0.03em; color: var(--papier); margin-top: 0.25em; }

/* =========================== the filmstrip (cases) ========================= */

.strook { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* landscape cards: the portal screenshot is a wide form, and a portrait
   crop magnified it far past legibility */
.kaart { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--aubergine-diep); isolation: isolate; }
/* These beat the generic .foto img rule further down the file, which sets
   height:auto and would leave the photograph filling only the top of the card. */
.kaart .foto, .kaart picture { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.kaart .foto img { position: absolute; inset: 0; width: 100%; height: 100%;
                   object-fit: cover; display: block; z-index: -1; background: none;
                   /* niet-tekst: a pale screenshot beside two dark photographs
                      needs bringing down, and it keeps the white type readable */
                   filter: brightness(0.72) saturate(0.9); }
.kaart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,32,36,0.25) 0%, rgba(32,32,36,0.35) 30%, rgba(32,32,36,0.97) 72%); }
.kaart-tekst { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(16px, 1.8vw, 24px); }
.kaart h3 { color: var(--papier); font-size: clamp(1.15rem, 1.6vw, 1.55rem); line-height: 1.15; margin-bottom: 0.55em; }
.kaart p { font-size: 0.92rem; color: rgba(245,244,247,0.9); margin-bottom: 0.8em; line-height: 1.45; max-width: none; }
.kaart .link { font-size: 0.9rem; color: var(--papier); }
@media (max-width: 860px) {
  .strook { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--marge) * -1); padding-right: var(--marge); scrollbar-width: none; }
  .strook::-webkit-scrollbar { display: none; }
  .kaart { flex: 0 0 78vw; scroll-snap-align: start; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .hero--groot { min-height: min(94svh, 420px); }
  .strook { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--marge) * -1); padding-right: var(--marge); scrollbar-width: none; }
  .kaart { flex: 0 0 52vw; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .schermen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .case-in, .product-in, .over-persoon { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 32px; display: grid; }
  .portret { order: 0; }
}

/* ======================= screens on a dark stage (products) ================= */

.schermen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; margin: 30px 0 14px; }
.scherm .foto { margin: 0 0 22px; }
.scherm .foto picture { display: block; border: 1px solid var(--rand); box-shadow: 0 40px 70px -30px rgba(0,0,0,0.85); overflow: hidden; }
.scherm img { display: block; width: 100%; height: auto; }
.scherm h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 0.45em; }
.scherm p { font-size: 0.95rem; color: rgba(245,244,247,0.82); margin-bottom: 0.9em; max-width: none; }
.scherm .link { font-size: 0.95rem; }
.eigen-merk { display: inline-flex; flex: none; }
.eigen-merk svg, .eigen-merk .orb { width: 22px; height: 22px; }
.orb { border-radius: 50%; background: conic-gradient(from 0deg, transparent, #cf5733, #3b3145, transparent); -webkit-mask: radial-gradient(closest-side, #0000 60%, #000 62%); mask: radial-gradient(closest-side, #0000 60%, #000 62%); }
.bewijst { margin-top: 1em; padding-left: 14px; border-left: 2px solid var(--roest-licht); font-weight: 500; color: var(--tekst); }
@media (max-width: 860px) { .schermen { grid-template-columns: 1fr; } }

/* ================================ the credo ================================ */

.standpunten { list-style: none; margin: 10px 0 0; padding: 0; max-width: 34ch; }
.standpunten li { font: 500 clamp(1.3rem, 1.7vw, 1.95rem)/1.18 var(--display); letter-spacing: -0.03em; padding: 18px 0; border-top: 1px solid var(--rand); text-wrap: balance; color: var(--tekst); }
.standpunten li:last-child { border-bottom: 1px solid var(--rand); }

/* ============================ the closing scene ============================ */

.slot { min-height: min(52svh, 460px); display: grid; align-items: center; }
/* the facade returns as a layer of the scene itself */
.slot::after { content: ""; position: absolute; inset: 0; z-index: 0; /* niet-tekst */ opacity: 0.35;
  background: url("/assets/photos/hero-1520.webp?v=98ebc246") 60% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 100%); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 100%); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .slot::after { background-image: image-set(url("/assets/photos/hero-1520.avif?v=77565ca8") type("image/avif"), url("/assets/photos/hero-1520.webp?v=98ebc246") type("image/webp")); }
}
.scene::before { z-index: 1; }
.slot h2 { font-size: clamp(1.7rem, 2.5vw, 2.8rem); line-height: 1.12; max-width: 26ch; margin-bottom: 1em; }

/* ============================== diensten ladder ============================ */

.ladder { margin-top: 0.6em; }
.dienst { position: relative; padding: clamp(26px, 2.6vw, 38px) 0; border-top: 1px solid var(--rand-zacht); }
.ladder .dienst:first-child, .scene > .in > .dienst { border-top: 0; padding-top: 0; padding-bottom: 0; }
.dienst-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.dienst-kop h2 { font-size: clamp(1.4rem, 1.7vw, 1.95rem); }
.dienst--eerste .dienst-kop h2 { font-size: clamp(1.6rem, 2.1vw, 2.4rem); }
.dienst p { margin-top: 0.8em; color: var(--tekst-zacht); }
.dienst--eerste .dienst-p1 { font-size: clamp(1.08rem, 1.4vw, 1.3rem); }
.ladder-kop { margin: 0 0 clamp(20px, 2vw, 30px); font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--tekst-stil); font-weight: 500; letter-spacing: 0; }
.ladder-kop + .dienst { border-top: 0; padding-top: 0; }
.icoon { display: inline-flex; flex: none; width: 30px; height: 30px; margin-right: 14px; color: var(--roest); vertical-align: -6px; filter: drop-shadow(0 0 10px rgba(163, 92, 62, 0.45)); }
.icoon svg { width: 100%; height: 100%; }
h2:has(> .icoon) { display: flex; align-items: flex-start; }
h2 > .icoon { margin-top: 0.12em; }
.icoon--klein { width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; filter: none; color: var(--tekst-stil); }
.icoon--voet { width: 15px; height: 15px; margin-right: 8px; color: rgba(245,244,247,0.7); filter: none; }
.kop-ruimte { margin-top: 1.6em; }

.levering { list-style: none; margin: 1.4em 0 0; padding: 0; }
.levering li { max-width: var(--maat-breed); padding: 0 0 0.95em; color: var(--tekst-zacht); }
.levering li:last-child { padding-bottom: 0; }
.levering strong { color: var(--tekst); }
.stappen { list-style: none; counter-reset: stap; margin: 1.5em 0 0; padding: 0; }
.stappen li { position: relative; padding: 0 0 1.05em; max-width: var(--maat-breed); color: var(--tekst-zacht); }
.stappen li:last-child { padding-bottom: 0; }
.stappen strong { color: var(--tekst); }

.met-foto { display: grid; gap: 26px; align-items: start; }
@media (min-width: 900px) { .met-foto { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 44px; } }

/* ================================= cases page ============================== */

.caselijst { margin-top: 0.4em; }
.case { position: relative; padding: clamp(28px, 3vw, 44px) 0; border-top: 1px solid var(--rand-zacht); }
.caselijst .case:first-child, .scene > .in > .case, .scene > .in > .product { border-top: 0; padding-top: 0; padding-bottom: 0; }
.case-in { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .case-in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 56px; } }
.case-type { font: 500 0.8rem/1 var(--display); letter-spacing: 0.12em; color: var(--roest-licht); margin: 0 0 14px; max-width: none; }
.case h2 { font-size: clamp(1.4rem, 1.8vw, 2.05rem); }
.case-formule { margin: 1.2em 0 0; display: grid; gap: 0; }
.case-formule > div { display: grid; gap: 2px 18px; padding: 12px 0; border-top: 1px solid var(--rand-zacht); }
.case-formule > div:first-child { border-top: 0; }
.case-formule dt { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--tekst-stil); }
.case-formule dd { margin: 0; max-width: var(--maat); color: var(--tekst-zacht); }
.scherm p, .eigen-item p, .kaart-tekst { color: inherit; }
@media (min-width: 720px) { .case-formule > div { grid-template-columns: 132px minmax(0, 1fr); } }
.case-beeld .foto picture { display: block; border: 1px solid var(--rand); box-shadow: 0 40px 70px -30px rgba(0,0,0,0.85); overflow: hidden; }

/* ============================ homepage proof list ========================== */

.bewijs-lijst { list-style: none; margin: 0.9em 0 0; padding: 0; }
.bewijs-lijst > li { padding: 24px 0; border-top: 1px solid var(--rand-zacht); max-width: var(--maat-breed); }
.bewijs-lijst > li:first-child { border-top: 0; padding-top: 6px; }
.bewijs-lijst h3 { margin-bottom: 0.3em; }
strong { color: var(--tekst); }
.bewijs-lijst p { margin: 0 0 0.5em; color: var(--tekst-zacht); }

/* products grid (uit eigen huis page uses .product, home uses .schermen) */
.product { position: relative; padding: clamp(28px, 3vw, 44px) 0; border-top: 1px solid var(--rand-zacht); }
.product:first-child { border-top: 0; padding-top: 0; }
.product-in { display: grid; gap: 28px; align-items: start; }
@media (min-width: 760px) { .product-in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 48px; } }
.product-beeld .foto picture { display: block; border: 1px solid var(--rand); box-shadow: 0 40px 70px -30px rgba(0,0,0,0.85); overflow: hidden; }
.product h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.4rem, 1.8vw, 2.05rem); }
.product p { color: var(--tekst-zacht); }
.eigen-grid { display: grid; gap: 36px 28px; margin-top: 1.6em; }
@media (min-width: 780px) { .eigen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eigen-item .foto { margin: 0 0 22px; }
.eigen-item .foto picture { display: block; border: 1px solid var(--rand); box-shadow: 0 40px 70px -30px rgba(0,0,0,0.85); overflow: hidden; }
.eigen-item h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 0.35em; }
.eigen-item p { font-size: 0.95rem; color: var(--tekst-zacht); margin: 0 0 0.6em; max-width: none; }

/* ================================ inzichten =============================== */

.inzicht { position: relative; padding: 26px 0; border-top: 1px solid var(--rand-zacht); max-width: var(--maat-breed); counter-increment: inzicht; }
.inzicht:last-child { border-bottom: 1px solid var(--rand-zacht); }
.inzicht h3 { font-size: clamp(1.2rem, 1.5vw, 1.6rem); }
.in { counter-reset: inzicht; }

/* ================================== over =================================== */

.over-persoon { display: grid; gap: 28px; }
@media (min-width: 760px) { .over-persoon { grid-template-columns: minmax(0, 1fr) 300px; gap: 60px; align-items: start; } }
.over-verhaal p { color: var(--tekst-zacht); max-width: var(--maat-breed); }
.over-verhaal strong { color: var(--tekst); }
.portret { max-width: 300px; }
.portret .foto picture { display: block; border: 1px solid var(--rand); box-shadow: 0 40px 70px -30px rgba(0,0,0,0.85); overflow: hidden; }
@media (max-width: 759px) { .over-persoon { display: flex; flex-direction: column; } .portret { order: -1; } }

/* ================================ contact ================================= */

.contact-blok { display: grid; gap: 48px; margin-top: 0.4em; }
@media (min-width: 800px) { .contact-blok:has(> * + *) { grid-template-columns: 1fr 1fr; gap: 56px; } }
.contact-rij { margin: 0 0 1.4em; }
.contact-rij dt { display: flex; align-items: center; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--tekst-stil); margin-bottom: 4px; }
.contact-rij dd { margin: 0; font: 300 clamp(1.25rem, 1.5vw, 1.65rem)/1.3 var(--display); letter-spacing: -0.02em; }
.contact-rij dd a { text-decoration: none; border-bottom: 1px solid var(--roest-licht); color: var(--tekst); }
.contact-rij address { font-style: normal; }
form.contact { background: var(--vlak); border: 1px solid var(--rand-zacht); padding: 26px; margin-top: 0.85em; }
form.contact label, .wp-form label { display: block; font-size: 0.86rem; letter-spacing: 0.03em; margin-bottom: 6px; color: var(--tekst-zacht); }
form.contact input, form.contact textarea, .wp-rij input { font: inherit; width: 100%; padding: 12px 14px; border: 1px solid var(--rand); background: transparent; color: var(--tekst); margin-bottom: 16px; }
form.contact textarea { min-height: 128px; resize: vertical; }
/* consent (2026-11-13): box and sentence side by side, the box a real tap target */
form.contact .akkoord { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; max-width: none; }
/* a 32px tap area drawn as a 22px box: the outer 5px ring is the form's own
   colour, then a 1.5px border; checked fills it with the check mark */
form.contact .akkoord input { appearance: none; -webkit-appearance: none; flex: none; width: 32px; height: 32px;
  margin: -4px -5px 0 -5px; padding: 0; border: 0; cursor: pointer; background: var(--vlak) no-repeat center / 14px 14px;
  box-shadow: inset 0 0 0 5px var(--vlak), inset 0 0 0 6.5px var(--tekst-zacht); }
form.contact .akkoord input:checked { background-color: var(--roest);
  background-image: url("/assets/vink.svg");
  box-shadow: inset 0 0 0 5px var(--vlak); }
form.contact .akkoord input:focus-visible { outline: 2px solid var(--roest); outline-offset: -3px; }
form.contact .akkoord label { margin: 0; font-size: 0.9rem; letter-spacing: 0; line-height: 1.5; color: var(--tekst-zacht); }
form.contact .akkoord a { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.hp { position: absolute; left: -6000px; top: -6000px; width: 1px; height: 1px; overflow: hidden; }

/* whitepaper */
.wp h2 { max-width: 30ch; }
.wp-form { margin-top: 1.4em; max-width: 520px; }
.wp-rij { display: flex; gap: 12px; flex-wrap: wrap; }
.wp-rij input { flex: 1 1 240px; margin-bottom: 0; }

/* credits, 404 routes */
.credit { position: relative; padding: 22px 0; border-top: 1px solid var(--rand-zacht); max-width: var(--maat-breed); }
.credit:last-child { border-bottom: 1px solid var(--rand-zacht); }
.credit h2 { font-size: 1.3rem; }
.credit p { margin: 0.35em 0 0; font-size: 0.95rem; color: var(--tekst-zacht); }
.route-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 1.15rem; }
.leeg .in { padding: 10px 0; }

/* ================================= photos ================================= */

.foto { margin: 0; }
.foto picture { display: block; }
.foto img { display: block; width: 100%; height: auto; background: var(--vlak); }

/* ================================= footer ================================= */

.voet { background: var(--inkt-diep); color: var(--papier); position: relative; z-index: 5; }
.voet-in { padding: 0 var(--marge) 0 var(--inhoud-x); }
.voet-merk { padding: clamp(40px, 4.5vw, 64px) 0 0; display: flex; align-items: center; gap: 11px; color: var(--zand); }
.voet-merk .merk-pixel { width: 19px; height: 32px; }
.voet-kolommen { display: grid; gap: 34px 34px; padding: clamp(34px, 3.6vw, 52px) 0 32px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .voet-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .voet-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; } .voet-kolommen > div:last-child { grid-column: 1 / -1; } }
.voet h2 { font: 500 0.78rem/1.4 var(--display); letter-spacing: 0.12em; color: var(--roest-licht); margin-bottom: 16px; max-width: none; }
.voet ul { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; overflow-wrap: break-word; }
.voet li { margin-bottom: 2px; display: flex; align-items: flex-start; }
.voet li .icoon--voet { margin-top: 5px; flex: none; }
.voet ul a { display: inline-block; padding: 5px 0; max-width: 100%; overflow-wrap: anywhere; color: rgba(245,244,247,0.82); text-decoration: none; }
.voet ul a:hover, .voet ul a:focus-visible { color: var(--papier); text-decoration: underline; text-underline-offset: 3px; }
.voet address { font-style: normal; font-size: 0.92rem; display: flex; align-items: flex-start; margin-top: 4px; min-width: 0; color: rgba(245,244,247,0.82); }
.voet address .icoon--voet { margin-top: 4px; flex: none; }
.voet address span { min-width: 0; overflow-wrap: anywhere; }
.voet-juridisch { border-top: 1px solid var(--rand-zacht); padding: 18px 0 32px; font-size: 0.8rem; color: rgba(245,244,247,0.6); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.voet-juridisch a { color: inherit; text-decoration: none; }
.voet-juridisch a:hover { color: var(--papier); text-decoration: underline; }
.voet-juridisch .scheiding { opacity: 0.5; }
@media (max-width: 480px) { .voet-juridisch .scheiding { display: none; } }
.voet-jaar { margin-left: auto; }
/* photography and image credits: present, but well below the legal strip (Ruben, 2026-11-13) */
.voet-klein { margin: -26px 0 0; padding: 0 0 20px; font-size: 0.7rem; color: rgba(245,244,247,0.5); max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.voet-klein a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.voet-klein a:hover, .voet-klein a:focus-visible { color: var(--papier); text-decoration: underline; }
.voet-klein .scheiding { opacity: 0.5; }

/* =============================== the opening ==============================
   The facade breathes in, the line of light draws down, the sculpture lands on
   its shadow, the titles arrive. After that the sculpture keeps its slow turn,
   the one ambient motion the direction is built around; everything else waits
   for the reader. Opacity and transform only; nothing when motion is unwanted. */

@media (prefers-reduced-motion: no-preference) {
  @keyframes adem { from { transform: scale(1.12); } to { transform: scale(1); } }
  @keyframes teken-neer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes opkomen { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes landen { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: none; } }
  @keyframes zweven { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
  @keyframes schaduw-adem { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.88); opacity: 0.75; } }
  @keyframes gloed { from { opacity: 0; } to { opacity: 1; } }

  .hero--groot .hero-doek { transform-origin: 60% 50%; animation: adem 2600ms cubic-bezier(.2,.6,.2,1) both; }
  .hero::before { transform-origin: top; animation: teken-neer 1200ms 200ms cubic-bezier(.2,.7,.2,1) both; }
  .scene::before { animation: gloed 600ms 1200ms ease-out both; }
  .hero .titelkaart { animation: opkomen 700ms 500ms cubic-bezier(.2,.7,.2,1) both; }
  .hero h1 { animation: opkomen 900ms 650ms cubic-bezier(.2,.7,.2,1) both; }
  .hero .lede { animation: opkomen 800ms 900ms cubic-bezier(.2,.7,.2,1) both; }
  .hero .cta-rij { animation: opkomen 700ms 1100ms cubic-bezier(.2,.7,.2,1) both; }
  .beeldmerk-scene { animation: landen 1400ms 300ms cubic-bezier(.2,.7,.2,1) both; }
  .beeldmerk { animation: zweven 9s 1700ms ease-in-out infinite; }
  .beeldmerk-schaduw { animation: schaduw-adem 9s 1700ms ease-in-out infinite; }
  .knoop { /* niet-tekst */ animation: gloed 600ms 1400ms ease-out both; }

  .btn { transition: filter 160ms ease, transform 160ms ease; }
  .btn:hover { transform: translateY(-2px); }
  .kaart img, .scherm img, .eigen-item img, .product-beeld img, .case-beeld img { transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
  .kaart:hover img { transform: scale(1.06); }
  .scherm:hover img, .eigen-item:hover img, .product:hover img, .case:hover .case-beeld img { transform: scale(1.03); }
}

@media print {
  .regiebalk, .sheet, .sheet-laag, .taalhint, .voortgang, .beeldmerk-scene, .knoop { display: none !important; }
  body { background: #fff; color: #000; }
  .scene, .hero, .voet { background: #fff !important; color: #000 !important; }
}

/* ---- Inzichten articles ---------------------------------------------------
   Prose at the wide measure; the drafts use headings, paragraphs, ordered
   lists, a few tables and inline links, and nothing else. The eyebrow above
   the h1 names the section, the date and the reading time. */
.eyebrow { font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-stil); margin: 0 0 1.1em; }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.artikel { max-width: var(--maat-breed); }
.artikel p, .artikel li { max-width: var(--maat-breed); font-size: clamp(1rem, 0.5vw + 0.82rem, 1.12rem); line-height: 1.6; }
.artikel h2 { margin-top: 2em; margin-bottom: 0.55em; max-width: 28ch; }
.artikel h3 { margin-top: 1.6em; margin-bottom: 0.45em; }
.artikel h2:first-child { margin-top: 0; }
.artikel a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--roest-licht); text-decoration-thickness: 1.5px; }
.artikel a:hover { text-decoration-thickness: 3px; }
.artikel ol { margin: 0 0 1.3em; padding-left: 1.4em; color: var(--tekst-zacht); }
.artikel ol li { margin-bottom: 0.7em; padding-left: 0.2em; }
.artikel ol li::marker { color: var(--roest); font-weight: 500; }
.tabelhouder { overflow-x: auto; margin: 1.2em 0 1.5em; max-width: var(--maat-breed); }
.artikel table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 0.97rem; line-height: 1.45; }
.artikel th, .artikel td { text-align: left; vertical-align: top; padding: 0.7em 1em 0.7em 0; border-bottom: 1px solid var(--rand-zacht); color: var(--tekst-zacht); }
.artikel th { color: var(--tekst); font-weight: 600; border-bottom-color: var(--tekst); }
.artikel tr:last-child td { border-bottom: 0; }
.inzicht .sub { margin-bottom: 0.5em; }
.inzicht h3 a { text-decoration: none; }
.inzicht h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--roest-licht); }
.inzicht > p:not(.sub) { margin: 0.6em 0 0.9em; }
/* inline links inside prose keep their line box but get a tap box of at
   least 24px: vertical padding on an inline element does not move the text */
.artikel p a, .artikel li a, .artikel td a, .eyebrow a { padding: 0.4em 0; }

/* ---- strategy review 2026-09-08: recognisable problems, honest product row,
   offer boundaries ------------------------------------------------------- */
.voor { font-size: 0.98rem; color: var(--tekst-stil); max-width: 48ch; margin-top: 0.9em; }  /* small type packs more characters per ch; 48ch keeps it under 75 */
.herken { list-style: none; margin: 0.6em 0 0; padding: 0; max-width: var(--maat-breed); }
.herken li { border-top: 1px solid var(--rand-zacht); }
.herken li:last-child { border-bottom: 1px solid var(--rand-zacht); }
.herken a { display: block; padding: 14px 28px 14px 0; position: relative; color: var(--tekst); text-decoration: none; font-size: clamp(1rem, 0.5vw + 0.82rem, 1.1rem); line-height: 1.5; }
.herken a::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid var(--roest); border-top: 1.5px solid var(--roest); transform: rotate(45deg); }
.herken a:hover { color: var(--roest-diep, var(--roest)); }
.eigen-rij { list-style: none; margin: 26px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
.eigen-item h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin-bottom: 0.3em; }
.eigen-item h3 a { text-decoration: none; }
.eigen-item h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--roest-licht); }
.eigen-item p { font-size: 0.95rem; max-width: none; margin-bottom: 0.4em; }
.status { font: 500 0.78rem/1.4 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--roest-licht); }
.product .status { text-transform: none; letter-spacing: 0; font: inherit; color: var(--tekst-zacht); }
.product .status strong { color: var(--tekst); }
.levering--klein li { font-size: 0.95rem; padding-bottom: 0.6em; }
.grens li strong { display: inline; }
@media (max-width: 900px) { .eigen-rij { grid-template-columns: 1fr; gap: 18px; } }
.eigen-item h3 a { display: inline-block; padding: 6px 0; margin: -6px 0; }  /* 32px tap box, same line box */
/* two streams on Diensten; the four layers of the AI foundation */
.stroom-label { font: 500 0.78rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-zacht); margin: 0 0 12px; max-width: none; }
.stroom-sub { margin: 0.5em 0 2.2em; }
.lagen { list-style: none; counter-reset: laag; margin: 1.6em 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; max-width: 980px; }
.lagen li { counter-increment: laag; position: relative; padding-left: 44px; }
.lagen li::before { content: counter(laag); position: absolute; left: 0; top: 0.05em; font: 500 1.05rem/1 var(--display); color: var(--roest); width: 30px; height: 30px; border: 1px solid var(--rand); display: grid; place-items: center; }
.lagen h3 { font-size: 1.25rem; margin-bottom: 0.4em; }
.lagen p { max-width: none; margin-bottom: 0.6em; }
.lagen .status { text-transform: none; letter-spacing: 0; font: inherit; font-size: 0.92rem; color: var(--tekst-stil); }
.lagen .status strong { color: var(--tekst); font-weight: 600; }
@media (max-width: 760px) { .lagen { grid-template-columns: 1fr; gap: 22px; } }

/* ---- desktop width: two columns where the content has two parts -----------
   The reading measure stays at 58ch (the build enforces 75 characters); the
   right half of a wide screen is used by the second part of the scene instead
   of staying empty. One column below 1180px, same reading order. */
.split { display: grid; gap: 28px 64px; align-items: start; }
.split > * { min-width: 0; }
.split p, .split li, .dienst-links p, .dienst-rechts p, .dienst-rechts li { max-width: var(--maat-breed); }
.dienst--split { display: grid; gap: 28px 64px; align-items: start; }
.dienst--split > * { min-width: 0; }
.dienst--kort { display: grid; gap: 14px 64px; align-items: start; }
.dienst--kort .dienst-kop + p { margin-top: 0; }
.dienst-rechts h3:first-child { margin-top: 0.35em; }
.dienst-links .cta-rij { margin-top: 2em; }
.standpunten { max-width: none; }
.wp.split .wp-form { margin-top: 0.4em; max-width: none; }
@media (min-width: 1180px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dienst--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dienst--kort { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); }
  .dienst--kort .dienst-kop + p { margin-top: 0.15em; }
  .standpunten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
  .standpunten li:last-child { border-bottom: 0; }
  .standpunten li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rand); }
  .wp.split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
}
/* the sprint and regie scenes carry a photograph on the right; keep their two
   columns inside the left 60% so text never sits on the image */
@media (min-width: 1180px) {
  .scene:has(> .scene-doek) .dienst--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 62%; }
  .scene:has(> .scene-doek) .dienst--split > * { max-width: none; }
}
/* closers: heading left, button right on wide screens */
@media (min-width: 1180px) {
  .in:has(> h2 + :is(.cta-rij, .btn):last-child) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 64px; align-items: center; max-width: none; }
  .in:has(> h2 + :is(.cta-rij, .btn):last-child) > h2 { margin-bottom: 0; max-width: 26ch; }
  .in:has(> h2 + :is(.cta-rij, .btn):last-child) > .cta-rij { margin-top: 0; }
}
/* inzichten: two articles per row */
.inzicht-rooster { display: grid; gap: 0 64px; }
.inzicht-rooster .inzicht { max-width: none; }
@media (min-width: 1180px) { .inzicht-rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inzicht-rooster .inzicht:nth-child(2) { border-top: 1px solid var(--rand-zacht); } }
/* articles: prose left, contents and related right */
.artikel-rooster { display: grid; gap: 40px 72px; align-items: start; }
.artikel-zij .zij-kop { font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-stil); font-weight: 500; margin: 0 0 0.8em; }
.artikel-zij ol, .artikel-zij ul { list-style: none; margin: 0 0 2em; padding: 0; }
.artikel-zij li { padding: 8px 0; border-top: 1px solid var(--rand-zacht); font-size: 0.95rem; line-height: 1.45; }
.artikel-zij li:last-child { border-bottom: 1px solid var(--rand-zacht); }
.artikel-zij a:not(.btn) { text-decoration: none; display: block; padding: 4px 0; }
.artikel-zij a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--roest-licht); }
.zij-cta { background: var(--vlak); padding: 18px 20px; border-left: 2px solid var(--roest-licht); }
.zij-cta p { font-size: 0.98rem; margin-bottom: 0.9em; }
@media (min-width: 1180px) {
  .artikel-rooster { grid-template-columns: minmax(0, 1fr) 300px; }
  .artikel-zij { position: sticky; top: calc(var(--h) + 24px); }
}
@media (max-width: 1179px) { .artikel-zij .zij-inhoud { display: none; } .artikel-zij .zij-kop:first-child { display: none; } }
.scherm .status { margin: -0.2em 0 0.5em; }

/* ---- rhythm inside the two-column scenes (Ruben's screenshots, 2026-09-08) ---- */
/* the scene already pads; the article inside it should not pad again */
.scene > .in > .dienst, .scene > .in > .stroom-sub + .dienst { padding-top: 0; padding-bottom: 0; border-top: 0; }
/* a stream header is a header: room below it, and a hairline before the offer it introduces */
.stroom-sub { margin: 0.5em 0 0; }
.stroom-sub + .dienst { margin-top: 2.6em; padding-top: 2.4em; border-top: 1px solid var(--rand-zacht); }
/* the identity column keeps its heading on one line; the detail column is the wider one */
.dienst-links h2, .dienst-links .dienst-kop { max-width: none; }
.dienst-links .dienst-kop h2 { text-wrap: balance; }
.dienst-rechts > h3:first-child { margin-top: 0.42em; }   /* level with the cap height of the h2 opposite */
.dienst-rechts .levering { margin-top: 1em; }
.dienst-rechts .sub.kop-ruimte { margin-top: 2em; }
/* short services: heading column narrow, text column wide, first lines level */
.dienst--kort .dienst-kop h2 { font-size: clamp(1.3rem, 1.5vw, 1.7rem); }
.dienst--kort > p { margin-top: 0.2em; max-width: var(--maat-breed); }
@media (min-width: 1180px) {
  .dienst--split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px 72px; }
  .scene:has(> .scene-doek) .dienst--split { max-width: 70%; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .dienst--kort { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: 0 72px; }
  /* whitepaper: the form starts level with the heading, not floating mid-height */
  .wp.split { align-items: start; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .wp.split .wp-form { margin-top: 0.55em; }
}
/* product cards: a quiet label, equal card heights, links on one line */
.schermen { align-items: stretch; }
.scherm { display: flex; flex-direction: column; }
.scherm .foto { flex: none; }
.scherm h3 { margin-bottom: 0.15em; }
.scherm .status { font: 400 0.88rem/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--tekst-stil); margin: 0 0 0.75em; }
.scherm p:not(.status) { flex: 1 0 auto; }
.scherm .link { align-self: flex-start; margin-top: 0.2em; }

/* ---- two-column splits that keep meaningful sequence ------------------------
   Each column is a heading followed by its own body, in DOM order. On wide
   screens the columns share a two-row subgrid: row one is the two headings on a
   common baseline, row two the two bodies on a common top. Browsers without
   subgrid simply stack each column; the reading order is identical either way. */
.kolom, .dienst-links, .dienst-rechts { min-width: 0; }
.kolom > h2, .kolom > h3, .dienst-links > .dienst-kop, .dienst-rechts > .dienst-rechts-kop { margin: 0; }
.kolom > h3 { font-size: clamp(1.55rem, 2vw, 2.3rem); line-height: 1.14; font-weight: 500; letter-spacing: -0.03em; }
.dienst-rechts > .dienst-rechts-kop { font-size: clamp(1.25rem, 1.5vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; color: var(--tekst); }
.kolom-lijf, .dienst-lijf { margin-top: 20px; }
.kolom-lijf > .tekst, .kolom-lijf > p, .kolom-lijf > .herken, .kolom-lijf > .wp-form { margin-top: 0; }
.dienst-lijf > .tarief { margin-top: 0.3em; }
.dienst-lijf > .levering:first-child, .dienst-lijf > h3:first-child { margin-top: 0; }
.kolom-leeg { display: none; }
@media (max-width: 1179px) { .dienst-rechts, .kolom + .kolom { margin-top: 1.4em; } }
@media (min-width: 1180px) {
  .split--kop, .dienst--split { grid-template-rows: auto 1fr; row-gap: 0; align-items: start; }
  .kolom, .dienst-links, .dienst-rechts { display: grid; grid-template-rows: subgrid; grid-row: 1 / 3; }
  .kolom > h2, .kolom > h3, .dienst-links > .dienst-kop, .dienst-rechts > .dienst-rechts-kop { align-self: baseline; }
  .kolom-leeg { display: block; }
}
.stappen li strong { margin-right: 0.3em; }          /* "Week 1" and its text were set too tight */
.dienst-rechts .sub.kop-ruimte { font: 500 0.82rem/1.4 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-stil); margin-top: 2.2em; }

/* ---- follow-up pass 2026-09-09: routes overview, early proof strip, components ---- */
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px 40px; }
.route { padding: 22px 24px 20px; border: 1px solid var(--rand); background: var(--vlak); position: relative; }
.route h2 { font-size: clamp(1.25rem, 1.5vw, 1.6rem); margin-bottom: 0.35em; }
.route .route-een { font-weight: 500; color: var(--tekst); margin-bottom: 0.6em; }
.route p { max-width: none; font-size: 0.98rem; }
.route .link { margin-top: 0.4em; }
@media (min-width: 900px) { .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.strook-scene { padding-top: clamp(22px, 2.4vw, 34px) !important; padding-bottom: clamp(22px, 2.4vw, 34px) !important; }
.strook-label { font: 500 0.78rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--roest-licht); margin: 0 0 14px; max-width: none; }
.bewijs-strook { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 40px; }
.bewijs-strook li { border-top: 1px solid var(--rand-zacht); }
.bewijs-strook a { display: block; padding: 10px 0; text-decoration: none; color: var(--tekst); font-size: 0.98rem; line-height: 1.5; }
.bewijs-strook a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--roest-licht); }
@media (min-width: 900px) { .bewijs-strook { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* twelve tools in even rows: 6 + 6 on wide screens, 4 + 4 + 4 in between, pairs on a
   phone. Columns size to their longest name and spread over the full width. Change the
   counts when the list in home.py changes length. */
.gereedschap-strook { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px 24px;
  grid-template-columns: repeat(6, auto); justify-content: space-between; }
@media (max-width: 1240px) { .gereedschap-strook { grid-template-columns: repeat(4, auto); } }
@media (max-width: 760px) { .gereedschap-strook { grid-template-columns: repeat(2, auto); justify-content: start; gap: 12px 28px; } }
.gereedschap-strook li { font: 500 1.02rem/1.5 var(--display); color: var(--tekst); display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
/* names without a mark start where the marked names start */
.gereedschap-strook li:not(:has(.merkteken)) { padding-left: 32px; }
/* only the narrowest phones (under 375px) need a name to wrap */
@media (max-width: 374px) { .gereedschap-strook { column-gap: 16px; } .gereedschap-strook li { white-space: normal; align-items: flex-start; } .gereedschap-strook .merkteken { margin-top: 2px; } }
.merkteken { width: 22px; height: 22px; flex: none; opacity: 0.85; }
/* Hermes Agent logo (Nous Research, nousresearch.github.io/hermes-agent/docs/img/logo-dark.png,
   supplied by Ruben 2026-11-13), scaled to 96px; its alpha is the mask, so it takes the text colour */
.merkteken--hermes, .merkteken--opper { display: inline-block; background: currentColor; }
.merkteken--hermes { -webkit-mask: url("/assets/logos/hermes.png") center / contain no-repeat; mask: url("/assets/logos/hermes.png") center / contain no-repeat; }
/* Opper logo (opper.ai/images/opper-logo.png, 2026-11-13), scaled to 96px, same mask treatment */
.merkteken--opper { -webkit-mask: url("/assets/logos/opper.png") center / contain no-repeat; mask: url("/assets/logos/opper.png") center / contain no-repeat; }
.gereedschap-groep li { display: flex; gap: 12px; align-items: flex-start; }
.gereedschap-groep li .merkteken { width: 20px; height: 20px; margin-top: 0.15em; }
.gereedschap-groep li:not(:has(.merkteken)) > span { padding-left: 32px; }
.gereedschap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; margin: 1.6em 0; max-width: 980px; }
.gereedschap-groep { min-width: 0; }
.gereedschap-groep h3 { font-size: 1.15rem; margin-bottom: 0.5em; }
.gereedschap-groep ul { list-style: none; margin: 0; padding: 0; }
.gereedschap-groep li { padding: 8px 0; border-top: 1px solid var(--rand); line-height: 1.5; }
@media (max-width: 720px) { .gereedschap { grid-template-columns: minmax(0, 1fr); } }
/* components are a set, not a sequence: square marker instead of a number */
/* each component carries its icon instead of a marker (Ruben, 2026-11-13) */
ul.lagen li::before { content: none; }
.icoon--laag { position: absolute; left: 0; top: 0.1em; width: 28px; height: 28px; margin: 0; }
/* the two column headings share a bottom edge, whatever their font size */
@media (min-width: 1180px) { .dienst-links > .dienst-kop, .dienst-rechts > .dienst-rechts-kop { align-self: end; } }
/* real-pixel audit 2026-09-09: the strip label on the dark scene, and card copy over the
   brightest part of the warehouse photograph, were under 4.5:1 */
.strook-label { color: var(--tekst-zacht); }
.kaart .foto img { filter: brightness(0.52) saturate(0.85); }

/* the real logo file (2026-10-04); replaces .merk-pixel + .merk-naam */
.merk-logo { display: block; width: 166px; height: 34px; }
.voet-merk .merk-logo { width: 166px; height: 34px; }
@media (max-width: 520px) { .merk-logo { width: 137px; height: 28px; } }
/* board #9: each stance carries its icon */
.standpunten li { display: flex; align-items: flex-start; gap: 16px; }
.icoon--standpunt { flex: none; width: 1.15em; height: 1.15em; margin-top: 0.06em; color: var(--roest-licht); stroke-width: 1.6; }
/* very wide screens: the short service texts grow in size rather than in line length */
@media (min-width: 1800px) { .dienst--kort > p, .standpunten li { font-size: 1.12em; } .dienst--kort > p { font-size: 1.12rem; } }
.merk { padding: 6px 0; margin: -6px 0; }   /* 46 px tap target around the 34 px logo */
@media (max-width: 520px) { .merk { padding: 8px 0; margin: -8px 0; } }

/* =========================== the living line (2026-10-04) ===========================
   Proposal 1. Only when site.js has set html.levend (script ran, and the reader
   did not ask for reduced motion). Without it everything below is inert and the
   line is the static, fully lit line above.
   - every scene's line becomes a dim track (::before) with a lit stroke (::after)
     whose height follows the reader through that scene (--vul, 0..1, set by JS);
   - a knoop lights when the stroke reaches it, and grows a short branch to its
     heading;
   - in "Herkent u dit?" each problem draws its own branch as it comes into view. */
/* the hero is part of the same line, so the stroke is one continuous line from
   the top of the page to the reading point; its own draw-in animation is off */
html.levend .hero::before { animation: none; background: linear-gradient(180deg, transparent 0, rgba(224, 122, 72, 0.16) 120px); box-shadow: none; }
html.levend .hero::after {
  content: ""; position: absolute; left: var(--lijn-x); top: 0; width: 1px; z-index: 0;
  height: 100%; transform-origin: top; transform: scaleY(var(--vul, 0));
  background: linear-gradient(180deg, transparent 0, var(--licht) 120px, var(--licht) 100%);
  box-shadow: 0 0 14px 1px var(--licht-zacht); pointer-events: none; will-change: transform;
}
html.levend .scene::before { background: rgba(224, 122, 72, 0.16); box-shadow: none; }
html.levend .scene::after {
  content: ""; position: absolute; left: var(--lijn-x); top: 0; width: 1px; z-index: 1;
  height: 100%; transform-origin: top; transform: scaleY(var(--vul, 0));
  background: var(--licht); box-shadow: 0 0 14px 1px var(--licht-zacht);
  pointer-events: none; will-change: transform;
}
html.levend .knoop { background: transparent; box-shadow: inset 0 0 0 1px rgba(224, 122, 72, 0.55); transition: background 260ms ease, box-shadow 400ms ease; }
html.levend .knoop.aan { background: var(--roest-licht); box-shadow: 0 0 18px 4px rgba(224, 122, 72, 0.6); }
.knoop::after {
  content: ""; position: absolute; left: 9px; top: 4px; height: 1px;
  width: calc(var(--inhoud-x) - var(--lijn-x) - 14px);
  background: linear-gradient(90deg, var(--roest-licht), rgba(224, 122, 72, 0));
  transform-origin: left; transform: scaleX(0);
}
html:not(.levend) .knoop::after { /* niet-tekst */ transform: scaleX(1); opacity: 0.55; }
html.levend .knoop.aan::after { transform: scaleX(1); transition: transform 520ms cubic-bezier(.2,.7,.2,1) 120ms; }
html.levend .herken li { position: relative; }
html.levend .herken li::before {
  content: ""; position: absolute; left: -22px; top: 50%; width: 14px; height: 1px;
  background: var(--roest-licht); transform-origin: left; transform: scaleX(0);
  transition: transform 480ms cubic-bezier(.2,.7,.2,1);
}
html.levend .herken li.aan::before { transform: scaleX(1); }
html.levend .herken li:nth-child(2)::before { transition-delay: 120ms; }
html.levend .herken li:nth-child(3)::before { transition-delay: 240ms; }
@media (max-width: 899px) { html.levend .herken li::before { display: none; } }

/* ============================ bold covers (2026-10-04) ============================
   Proposal 3. Every page except the homepage opens with one big sentence in the
   bright rust on deep ink, no photograph. The homepage keeps its backdrop. */
.hero--sub { min-height: min(62svh, 600px); background: radial-gradient(120% 90% at 85% 10%, #2f2639 0%, var(--inkt) 55%, var(--inkt-diep) 100%); }
.hero--sub .hero-doek, .hero--sub .hero-sluier { display: none; }
/* Ruben, 2026-10-04: orange titles did not work. The title is white; one short
   rust rule above it carries the accent. */
.hero--sub h1 {
  color: var(--papier);
  font-size: clamp(2.6rem, 6.2vw, 6.4rem); line-height: 0.98; letter-spacing: -0.04em;
  max-width: 15ch; font-weight: 500;
}
.hero--sub .lede { color: var(--tekst-zacht); max-width: 52ch; font-size: clamp(1.08rem, 0.7vw + 0.85rem, 1.3rem); margin-top: 1.4em; }
/* articles carry long titles and a date line: the same treatment, a size down */
.hero--sub:has(.eyebrow) h1 { font-size: clamp(2.1rem, 4.4vw, 4.4rem); max-width: 22ch; line-height: 1.04; }
/* error and thank-you pages: short, still bold */
.hero--sub.leeg { min-height: min(52svh, 480px); }

.hero--sub .hero-tekst > h1::before, .hero--sub .hero-tekst > .eyebrow + h1::before {
  content: ""; display: block; width: 56px; height: 3px; margin-bottom: 0.45em;
  background: var(--roest-licht); box-shadow: 0 0 14px 1px var(--licht-zacht);
}

/* whitepaper block (2026-10-04): label, full-width title, text | form */
.wp-label { display: flex; align-items: center; gap: 10px; font: 500 0.82rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-stil); margin: 0 0 14px; max-width: none; }
.wp-label .icoon { width: 18px; height: 18px; color: var(--roest-licht); }
.wp h2 { max-width: none; margin-bottom: 0.6em; }
.wp .wp-rij-buiten { align-items: start; }
.wp .wp-rij-buiten > p { margin: 0; }
.wp .wp-form { margin-top: 0; max-width: none; }
@media (min-width: 1180px) { .wp .wp-rij-buiten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* page titles on the covers: a size down (Ruben, 2026-10-04: too big) */
.hero--sub { min-height: min(50svh, 470px); }
.hero--sub h1 { font-size: clamp(2.3rem, 4.2vw, 4.3rem); max-width: 18ch; line-height: 1.03; }
.hero--sub:has(.eyebrow) h1 { font-size: clamp(1.9rem, 3.2vw, 3.3rem); max-width: 24ch; }

/* 2026-11-13: the 4:3 card shape is a minimum. A longer text grows the card
   instead of pushing its heading out of the top, where overflow cut it off.
   The photo and the gradient are inset 0, so nothing needs clipping; with
   overflow visible, aspect-ratio lets the content stretch the box. */
.kaart { overflow: visible; display: flex; flex-direction: column; justify-content: flex-end; }
/* the photo layer clips itself, so the hover zoom stays inside the card */
.kaart .foto, .kaart picture { overflow: hidden; }
.kaart-tekst { position: relative; }