/* GENERATED by silk.styles. Do not edit: the next render overwrites this file.
   Layers, later wins: base (theme/base.css none), foundation (repo/dev/css/foundation.css), blocks (12 folder(s)),
   overrides (theme/overrides/<id>.css). */
@layer base, foundation, blocks, overrides;

@layer foundation {
/* foundation.css — the Fabricaide site's own styling: tokens, chrome, nav, footer,
   buttons and the page surfaces. silk.styles joins this as the `foundation` layer of
   css/styles.css, after the library Base and before the block packages.

   13-oct-2026: this is src/home.css verbatim, the sheet every page on the current chrome
   already loads, so the layered pipeline stands up without a rendered pixel moving.
   src/styles.css is deliberately NOT folded in: only voor-wie.html, the one page still on
   the older skeleton, loads it, and FCMS-100 deletes that page.

   As REFE-089 and the package rows publish blocks, the rules belonging to each block move
   out of here into theme/overrides/<id>.css, the layer allowed to adjust a block. */

/* Fabricaide Home, built from the Paper frame "WERK · 01 Home" (1811 design px) with the step cards of
   "Stapkaarten tekst D" and footer option B. Desktop matches the frame at a 1260 px content column;
   below that the tablet and phone rules at the end use real pixels. */

/* the four families, served from this site (no request to Google): Latin and Latin Extended, the variable files carry their weights */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/caveat-normal-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/caveat-normal-latin-700.woff2) format('woff2'); 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: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/dm-mono-normal-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/dm-mono-normal-latin-400.woff2) format('woff2'); 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: 'Kufam'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../assets/fonts/kufam-normal-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Kufam'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../assets/fonts/kufam-normal-latin-400.woff2) format('woff2'); 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: 'Roboto'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../assets/fonts/roboto-italic-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../assets/fonts/roboto-italic-latin-400.woff2) format('woff2'); 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: 'Roboto'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/roboto-normal-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/roboto-normal-latin-400.woff2) format('woff2'); 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; }

:root {
  --blue: #3197C6; --tile: #217A9D; --orange: #FFA028; --orange-hover: #FFB24D; --orange-ink: #D97A0D; --navy: #13163B;
  --ink: #0B1019; --char: #333333; --grey: #666666; --line: #CCCCCC; --card-ink: #262C37; --agent-ink: #3D4552;
  --social: #16181E; --red: #FF0000; --purple: #4F5486; --edge: #EEF1F5;
  --lift: drop-shadow(0 2px 2.5px rgba(19, 22, 59, .06)) drop-shadow(0 10px 10px rgba(19, 22, 59, .1));   /* the one card shadow */
}
*, *::before, *::after { box-sizing: border-box; }
body.home { position: relative; margin: 0;
  font-family: Roboto, system-ui, sans-serif; color: var(--char); background: #fff; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(body.home) :where(h1, h2, h3, h4, p, ol, ul) { margin: 0; padding: 0; }   /* zero weight: a class's own margin wins */
:where(body.home) a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1260px, 100% - 48px); margin-inline: auto; }
.wrap.n { width: min(1200px, 100% - 48px); }

/* ---------------------------------------------------------------- header bar */
/* the bar is low and travels with the page; once the visitor scrolls it turns darker, so it reads on the white of the page (home.js section 1) */
html:has(body.home) { scroll-padding-top: 100px; }
.top { position: fixed; inset: 0 0 auto; height: 76px; background: rgba(0, 0, 0, .6); z-index: 30; transition: background-color .25s; }
.top.donker { background: rgba(11, 16, 25, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.top .wrap { position: relative; height: 100%; display: flex; align-items: center; }
.tile { position: absolute; left: 0; top: 0; width: 62px; height: 88px; display: block; }
.tile svg { display: block; width: 100%; height: 100%; }
.wm { margin-left: 88px; font: 400 25px/1 Kufam, sans-serif; letter-spacing: .1em; color: #fff; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.navline { flex: 1; align-self: stretch; display: flex; justify-content: flex-end; align-items: flex-end; margin: 0 0 10px 48px;
  padding-bottom: 12px; }
.nav { display: flex; gap: 30px; }
.nav a { position: relative; font: 400 18px/18px Kufam, sans-serif; letter-spacing: .1em; color: rgba(255, 255, 255, .6); text-decoration: none; padding: 6px 0; }
.nav a:hover, .nav a:focus-visible, .nav a.current { color: #fff; }
.nav a.current::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--orange); }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; padding: 10px; }
.menu-btn span { display: block; height: 2px; background: currentColor; margin: 5px 0; transition: transform .2s, opacity .2s; }

/* ---------------------------------------------------------------- hero */
/* the fabric: facets.js draws the mesh in this svg and leans it toward the cursor */
#m { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
#m polygon { vector-effect: non-scaling-stroke; }
.hero > .wrap { position: relative; z-index: 1; }
.hero .lead .kicker:empty { display: none; }
.hero h1 .wit { color: #fff; }   /* the Blog headline's white half */
.hero h1 { font: 900 clamp(34px, 6.8vw, 94px)/.94 Kufam, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #000; }


.ask { display: flex; align-items: center; gap: 11px; width: min(960px, 100%); height: 84px; padding: 0 8px 0 10px; margin-top: 58px;
  background: rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 3px solid #fff; border-radius: 42px; }
.ask input { flex: 1; min-width: 0; height: 59px; padding: 0 30px; border: 0; border-radius: 30px; outline: none; background: rgba(255, 255, 255, .78); color: var(--navy);
  font: italic 400 24px/1 Roboto, sans-serif; letter-spacing: .05em; }
.ask input::placeholder { color: rgba(19, 22, 59, .55); }
.ask input:focus { box-shadow: 0 0 0 3px rgba(19, 22, 59, .18) inset; }
.ask button { flex: 0 0 67px; width: 67px; height: 67px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 50%; }
.ask button svg { display: block; width: 100%; height: 100%; transition: transform .2s; }
.ask button:hover svg, .ask button:focus-visible svg { transform: translateX(3px); }
/* ---------------------------------------------------------------- closing band: the page's orange moment below the fold */
.slot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 48px; margin: 110px auto 0; padding: 48px 56px;
  background: #FFE9CC; border-radius: 15px; color: var(--navy); }   /* the soft orange of a chosen service row: the bright orange is the button's */
.slot-tekst { flex: 0 1 470px; display: flex; flex-direction: column; gap: 10px; }
.slot-tekst .k { font: 400 14px/18px Kufam, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: rgba(19, 22, 59, .72); }
.slot-tekst h2 { font: 700 32px/38px Kufam, sans-serif; }
.slot-tekst p:last-child { font: 400 16px/26px Roboto, sans-serif; }
.slot-acties { flex: 0 1 570px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.slot .ask { width: 100%; margin: 0; }
.slot .ask input { font-size: 21px; }
.btn-plan { display: inline-flex; align-items: center; height: 50px; padding: 0 27px; border: 1px solid #fff; border-radius: 25px; background: var(--orange);
  color: var(--navy) !important; font: 700 16px/20px Roboto, sans-serif; white-space: nowrap; text-decoration: none; transition: background .2s, transform .2s; }
.btn-plan:hover, .btn-plan:focus-visible { background: var(--orange-hover); transform: translateY(-1px); }
/* the button, above the fold and in the closing band: no outline, a soft shadow and the arrow disc of the Contact button */
.hero .btn-plan, .slot .btn-plan { gap: 14px; height: 54px; padding: 0 7px 0 27px; border: 0; border-radius: 27px; }
.hero .btn-plan, .slot .btn-plan { box-shadow: 0 2px 3px rgba(19, 22, 59, .1), 0 8px 14px rgba(19, 22, 59, .18); }
.hero .btn-plan::after, .slot .btn-plan::after { content: ''; flex: 0 0 40px; height: 40px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 10H16M11 4.5L16.5 10L11 15.5' stroke='%23fff' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* ---------------------------------------------------------------- footer (option B) */
.foot { margin-top: 56px; padding-bottom: 40px; }
.foot .rule { height: 4px; background: var(--orange); }
.foot .cols { display: flex; justify-content: space-between; gap: 40px; padding-top: 36px; }
.foot .links { display: grid; grid-template-columns: repeat(4, 140px); column-gap: 38px; }
.foot h4 { font: 400 14px/32px Kufam, sans-serif; letter-spacing: 2.5px; text-transform: uppercase; color: var(--orange-ink); border-bottom: 1px solid var(--grey); }
.foot .links ul { list-style: none; }
.foot .links li { border-bottom: 1px solid rgba(0, 0, 0, .2); }
.foot .links li a { display: block; font: 400 14px/31px Roboto, sans-serif; letter-spacing: 2.5px; color: var(--char); text-decoration: none; white-space: nowrap; }
.foot .links li a:hover { color: var(--orange-ink); }
.foot .social { display: flex; gap: 7px; padding-top: 14px; }
.foot .social a { display: block; width: 36px; height: 36px; border-radius: 10px; background: var(--social); transition: transform .2s; }
.foot .social a:hover { transform: translateY(-2px); }
.foot .social svg { display: block; width: 100%; height: 100%; }
.nieuws { flex: 0 1 451px; min-width: 0; }
.nieuws h4 { border: 0; font: 700 18px/24px Kufam, sans-serif; letter-spacing: 0; text-transform: none; color: var(--navy); }
.nieuws p { margin-top: 6px; font: 400 14px/20px Roboto, sans-serif; color: var(--grey); }
.nieuws form { display: flex; align-items: center; gap: 8px; height: 50px; margin-top: 14px; padding: 0 5px 0 18px; border: 2px solid var(--orange); border-radius: 25px; }
.nieuws input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: italic 400 14px Roboto, sans-serif; color: var(--char); }
.nieuws input::placeholder { color: #999; }
.nieuws button { height: 38px; padding: 0 18px; border: 0; border-radius: 19px; background: var(--navy); color: #fff; font: 500 14px Roboto, sans-serif; letter-spacing: .6px; cursor: pointer; }
.foot .bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.foot .bar .l { display: flex; align-items: center; gap: 38px; flex-wrap: wrap; }
.foot .mark { display: flex; align-items: center; gap: 10px; font: 400 17.6px/22px Kufam, sans-serif; letter-spacing: 1.76px; color: var(--navy); text-decoration: none; }
.foot .legal { display: flex; gap: 22px; list-style: none; flex-wrap: wrap; }
.foot .legal a, .foot .copy { font: 400 14px/18px Roboto, sans-serif; letter-spacing: .6px; color: var(--grey); text-decoration: none; }
.foot .legal a:hover { color: var(--char); }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1100px) {
  .wm { font-size: 22px; }
  .nav { gap: 20px; }
  .nav a { font-size: 16px; }
  .foot .cols { flex-direction: column; }
  .nieuws { flex-basis: auto; max-width: 560px; }
  .slot { flex-direction: column; align-items: stretch; }
  .slot-tekst, .slot-acties { flex-basis: auto; }
}
@media (max-width: 900px) {
  .top { height: 62px; }
  .tile { width: 48px; height: 68px; }
  .wm { margin-left: 64px; font-size: 19px; }
  .navline { display: none; }
  .menu-btn { display: block; }
  .top.open .navline { display: flex; position: absolute; top: 62px; left: -24px; right: -24px; margin: 0; padding: 12px 24px 20px; border: 0; background: rgba(11, 16, 25, .98); }
  .top.open .nav { flex-direction: column; gap: 4px; width: 100%; }
  .top.open .nav a { font-size: 20px; padding: 12px 0; }
  .top.open .nav a.current::after { bottom: 4px; right: auto; width: 40px; }
  .top.open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .top.open .menu-btn span:nth-child(2) { opacity: 0; }
  .top.open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { padding-top: 120px; padding-bottom: 80px; }
}

/* ---------------------------------------------------------------- phone: the composition restacks */
@media (max-width: 760px) {
  .hero { padding-top: 104px; padding-bottom: 64px; }
  .voet > .wrap { gap: 0 32px; }
  .voet p + p { flex-basis: 100%; display: block; height: auto; }   /* the legal links below each other (Richard, 21-oct-2026) */
  .voet p + p i { display: none; }
  .voet p + p a { display: block; padding: 7px 0; }
  .hero h1 { font-size: clamp(31px, 9.4vw, 58px); }
  .hero h1 .br-l { display: none; }
  .ask { height: 62px; border-width: 2px; padding: 0 5px 0 6px; gap: 6px; }
  .ask input { height: 46px; padding: 0 18px; font-size: 16px; letter-spacing: .02em; }
  .ask button { flex-basis: 50px; width: 50px; height: 50px; }
  .slot { margin-top: 64px; padding: 30px 22px; gap: 26px; }
  .slot-tekst h2 { font-size: 26px; line-height: 32px; }
  .slot .ask input { font-size: 16px; }
  .foot .links { grid-template-columns: 1fr 1fr; row-gap: 26px; column-gap: 24px; }
  .foot .links li a { letter-spacing: 1.5px; }
  .foot .bar { flex-direction: column; align-items: flex-start; }
  .foot .bar .l { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .loop .band { animation: none; }
  .btn-plan, .ask button svg, .foot .social a, .top { transition: none; }
}

/* ================================================================ Diensten (Paper "WERK · Diensten herontwerp A")
   One column (.wrap.n), one card style (white, 15 px corners, --lift), capitals only for the small panel labels, no reading
   text under 18 design px. The facets are the page's backdrop and fade out behind the first cards. Sizes are the frame's
   design px: the page zoom scales them on desktop, the tablet and phone rules at the end use real pixels. */
body.sub::before { content: ''; position: absolute; inset: 0 0 auto; height: 1208px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, #fff 100%), url(../assets/home-facets.jpg) center top / cover no-repeat; }
.sub .hero-d, .sub main.col, .sub .foot { position: relative; z-index: 1; }
.hero.hero-d { position: relative; padding: 199px 0 0; }
.hero-d #m { height: 1208px; z-index: -1; }
/* size, leading and spacing are the Home headline's (.hero h1), on every screen */
@media (min-width: 1101px) { .hero-d h1 { white-space: nowrap; } }
.hero-d h1 i { font-style: normal; }
.hero-d h1 .o { color: var(--orange); } .hero-d h1 .b { color: var(--blue); } .hero-d h1 .r { color: var(--red); } .hero-d h1 .p { color: var(--purple); }
.hero-d p.lead { max-width: 1140px; margin-top: 70px; font: 400 24px/34px Roboto, sans-serif; color: var(--card-ink); }
.hero-d .btn-plan { margin-top: 30px; }
/* on a wide screen the button sits at the right of the column beside the lead text, where the Home has it beside the question box;
   not on the Blog, where the featured card stands there */
@media (min-width: 1101px) {
  .sub:not(.p-blog) .hero-d > .wrap.n { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
  .sub:not(.p-blog) .hero-d > .wrap.n > .lead { grid-column: 1; }
  .sub:not(.p-blog) .hero-d > .wrap.n > .btn-plan { grid-column: 2; margin: 0 0 7px; }
}

/* ================================================================ Diensten (Figma "Diensten (FINAL)" 777-1247, 9-oct-2026)
   On the light chrome. Three teasers on the grey band, four service columns on the rule with the panel under the open row
   (the pointer stands on that row's column), Stijn's quote on the blue band, the tools row. Sizes are the frame's design px. */
.teasers { padding: 50px 0; background: rgba(217, 217, 217, .4); }
.teasers .rij { display: flex; gap: 60px; margin-top: 30px; }
.teaser { display: flex; flex-direction: column; flex: 0 0 360px; }   /* no min-height: the cards are heading-only since 20-oct-2026 */
.teaser h3 { min-height: 102px; font: 500 32px/34px Kufam, sans-serif; color: var(--navy); }
.teaser mark { background: none; color: #57A5C0; }
.teaser p { font: 400 18px/32px Roboto, sans-serif; color: var(--grey); }
.teaser .meer { margin-top: auto; font: italic 400 14px/16px Roboto, sans-serif; color: var(--grey); text-decoration: none; }
.teaser .meer:hover { color: var(--char); }
/* ---- Home (Paper "01 Home (Final)", 9-oct-2026): the hero line, three teasers, the running list of clients and partners */
.p-index .hero.hero-d { padding: 74px 0 57px; }   /* the headline and the lead sit with the other .licht hero rules, below */
.p-index .btn-afspraak { margin-top: 38px; }   /* the same button as on the content pages (Thomas, 13-oct-2026) */
.teasers.thuis { padding: 47px 0 50px; }
.thuis .teaser { min-height: 176px; }
.thuis .teaser h3 { min-height: 72px; font: 500 36px/36px Roboto, sans-serif; color: #002226; }
.thuis .teaser p { margin: 12px 0 22px; font: 300 18px/26px Roboto, sans-serif; }
.thuis .teaser .meer { font: italic 400 18px/28px Roboto, sans-serif; color: #1E6F8F; }
.loop { height: 112px; margin-top: 48px; overflow: hidden; }
.loop .band { display: flex; width: max-content; height: 112px; animation: loop 40s linear infinite; }
.loop:hover .band { animation-play-state: paused; }
.loop .set { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.loop .lbl { font: 400 14px/18px Roboto, sans-serif; letter-spacing: .08em; color: var(--grey); }
.loop img { display: block; width: auto; height: 30px; filter: grayscale(1); }   /* one ink, like the frame; on the image itself: a filter on the moving band did not reach it */
.loop img[height="20"] { height: 20px; }
.loop img[height="40"] { height: 40px; }   /* BrainSpa: a small word beside a large ring */
.loop i { width: 1px; height: 28px; background: #999; }
.loop .tool { display: flex; align-items: center; gap: 10px; font: 400 18px/22px Roboto, sans-serif; color: var(--card-ink); }
@keyframes loop { to { transform: translateX(-50%); } }
/* ---- Wat u kunt verwachten: four columns of four rows; a row opens the panel under the columns */
.verwacht { padding: 40px 0; }
.verwacht h2 { font: 600 24px/29px Kufam, sans-serif; color: var(--char); }
.verwacht .rail, .verwacht .sub { margin-top: 30px; }
.verwacht .sub { font: 400 18px/21px Roboto, sans-serif; color: var(--grey); }
.kolommen { display: flex; gap: 40px; margin-top: 40px; }
.kolom { --k: var(--orange); flex: 1 1 0; min-width: 0; min-height: 284px; border-radius: 0 20px 0 0; overflow: hidden; background: #F0EDE9; }
.kolom.k2 { --k: #57A5C0; } .kolom.k3 { --k: #FC346A; } .kolom.k4 { --k: #723C3D; }
.kolom header { display: flex; align-items: center; justify-content: space-between; height: 77px; padding: 6px 19px 5px 24px; border-radius: 0 10px 0 0; background: var(--k); }
.kolom h3 { font: 600 24px/30px Kufam, sans-serif; color: #fff; }
.kolom .icoon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; opacity: .6; }
.kolom.k2 .icoon { opacity: 1; }   /* the puzzle carries its own */
.kolom .icoon img { display: block; }
.kolom.k1 .icoon img { width: 26px; height: 46px; transform: rotate(45deg); } .kolom.k2 .icoon img { width: 48px; height: 48px; }
.kolom.k3 .icoon img { width: 38px; height: 29px; } .kolom.k4 .icoon img { width: 39px; height: 43px; }
.kolom ul { list-style: none; }
.kolom li + li { border-top: 2px solid #FFFAF3; }
.kolom li:last-child { border-bottom: 2px solid #FFFAF3; }
.kolom li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 24px; font: 400 18px/24px Roboto, sans-serif; color: var(--grey); text-decoration: none; }
.kolom li a::after { content: ''; flex: 0 0 32px; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M12 8L20 16L12 24' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 32px no-repeat; opacity: .6; transition: transform .2s; }
.kolom li a:hover { color: var(--char); } .kolom li a:hover::after { opacity: 1; }
.kolom li a:focus { outline: none; }
.kolom li a:focus-visible { outline: 2px solid var(--char); outline-offset: -2px; }
.kolom li a.aan { background: color-mix(in srgb, var(--k) 82%, #000); color: #fff; }   /* the frame's #CF8323 on orange */
.kolom li a.aan::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M12 8L20 16L12 24' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: 1; transform: rotate(90deg); }
.panelen { position: relative; margin-top: 39px; }
.panelen:not(:has(.open, .paneel:target)) { margin-top: 0; }
.panelen::before { content: ''; position: absolute; left: 142px; top: -34px; width: 68px; height: 34px; background: #F0EDE9; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateX(-50%); transition: left .25s; }
.panelen.k2::before { left: 452px; } .panelen.k3::before { left: 762px; } .panelen.k4::before { left: 1072px; }
.panelen:not(:has(.open))::before { display: none; }
.paneel { display: none; grid-template-columns: 540px minmax(0, 548px); gap: 32px; padding: 34px 40px 40px; background: #F0EDE9; }
.paneel.open, .paneel:target, body.cms-active .paneel { display: grid; }
body.cms-active .paneel + .paneel { margin-top: 12px; }   /* while editing every panel is open, so each text can be reached */
.paneel .k { font: 400 14px/18px Kufam, sans-serif; letter-spacing: 3px; color: var(--grey); }
.paneel h3 { margin-top: 10px; font: 600 24px/38px Kufam, sans-serif; color: var(--char); }
.paneel h3 + p { margin-top: 10px; font: 400 18px/28px Roboto, sans-serif; color: var(--char); }
.paneel ul { list-style: none; margin-top: 9px; }
.paneel li { position: relative; padding: 11px 0 10px 30px; border-top: 1px solid rgba(51, 51, 51, .4); font: 400 18px/24px Roboto, sans-serif; color: var(--char); }
.paneel li::before { content: ''; position: absolute; left: 0; top: 13px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.16 10.42L7.91 14.17L15.83 5.83' stroke='%23666' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
/* ---- the quote on the blue band, under the rainbow */
.citaat { position: relative; padding: 50px 0 38px; background: #B3D1D9; }
.citaat::before { content: ''; position: absolute; inset: 0 0 auto; height: 12px; background: var(--regenboog); }
.citaat .copy { display: flex; justify-content: center; gap: 19px; }
.citaat .copy > div { min-width: 0; max-width: 900px; }   /* the flex item may shrink: a fixed-width quote inside pushed the band past a phone screen */
.citaat .haak { font: 400 100px/86px Roboto, sans-serif; color: #3391B3; }
.citaat blockquote { margin: 0; font: 400 36px/44px Roboto, sans-serif; color: var(--char); }
.citaat p { font: italic 400 18px/34px Roboto, sans-serif; color: #fff; }
/* the closing band on the content pages: one line, one button */
.slot.slot-knop { min-height: 130px; margin-top: 20px; padding: 40px 56px; }
.slot-knop .slot-tekst { flex-basis: 720px; }
.slot-knop .slot-acties { flex: 0 0 auto; }
/* where no other mascot is in sight at the bottom of the page (Home, Over ons) the Contact mascot stands on the band */
.slot.slot-knop:has(.slot-pop) { margin-top: 150px; }
.slot-pop { position: absolute; left: 49.2%; bottom: 28px; width: 200px; height: auto; pointer-events: none; }
/* Over ons closes without a band (.lijn): the mascot stands on the footer's orange rule */
.slot.slot-knop.lijn { min-height: 110px; padding: 0 0 12px; border-radius: 0; background: none; }
.slot.lijn .slot-pop { bottom: -10px; }
body:has(.slot.lijn) .foot { margin-top: 0; }
body:has(.slot.lijn) main.col { z-index: 2; }   /* the mascot's shoes stand in front of the rule */
@media (max-width: 1100px) {
  .slot.slot-knop:has(.slot-pop) { margin-top: 110px; }
  .slot.slot-knop.lijn { padding: 0 0 22px; }
  .slot-pop { left: auto; right: 14px; bottom: auto; top: -88px; width: 120px; }
  .slot.lijn .slot-pop { bottom: auto; top: -124px; }   /* no band to stand in: the mascot stands on the sentence */
}

/* ================================================================ Over ons (Paper "About 11", 9-oct-2026)
   The facets stay in the hero band and stop at its edge. The two people stand on a grey band; the agents hang from a rule in
   the brand gradient, and the lines run on from their cards through a bus to the two helper groups: every line takes the
   colour of the gradient where it leaves the rule. Agents and helpers keep their back: it turns on hover, keyboard focus or
   a tap. Sizes are the frame's design px on the 1200 column (the page zoom scales them); under 1100 px the lines go. */
:root { --regenboog: linear-gradient(90deg, #2F8FC2 0%, #57A5C0 35%, #9BBE3C 62%, #FFC01E 100%); }
body.licht { background: #FFFAF3; }
body.licht::before { display: none; }
/* the light header: cream, 120 high, the knot and the word in ink, the menu in lower case with the orange bar under the open page */
.top.licht, .top.licht.donker { height: 120px; background: #FFFAF3; border-bottom: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.merk { display: flex; align-items: center; }
.merk img { display: block; height: 52px; width: auto; }   /* 110% of the old lockup's 47 (Richard, 14-oct-2026) */
.top.licht .navline { align-items: center; margin: 0; padding: 0; }
.top.licht .nav { gap: 36px; }
.top.licht .nav a { padding: 0; color: rgba(51, 51, 51, .6); text-transform: lowercase; }
.top.licht .nav a:hover, .top.licht .nav a:focus-visible, .top.licht .nav a.current { color: var(--char); }
.top.licht .nav a.current::after { top: 60px; bottom: auto; height: 16px; border-radius: 8px; }
.top.licht .menu-btn { color: var(--char); }
/* the hero: the mesh on navy under the header, the headline at 80, the cream pill under the lead */
.licht .hero.hero-d { margin-top: 120px; background: #FFFAF3; }   /* the body's cream, not navy (Richard, 20-oct-2026) */
.licht .hero-d #m { height: 100%; }
.sub.licht .hero-d > .wrap.n { display: block; }
.licht .hero-d h1 { font: 700 80px/80px Kufam, sans-serif; letter-spacing: .005em; color: #FFFAF3; }
.licht .hero-d p.lead { margin-top: 26px; font: 400 28px/38px Roboto, sans-serif; letter-spacing: .035em; color: rgba(255, 255, 255, .72); }
/* Home (Paper "01 Home (Final)"): white at 80, the lead at 32/40 nine pixels under it. Below the
   two rules above, not up with the rest of Home: at equal specificity the later rule wins. */
.p-index .hero-d h1 { color: #fff; }
.p-index .hero-d p.lead { max-width: 1015px; margin-top: 9px; font-size: 32px; line-height: 40px; letter-spacing: 1.26px; color: rgba(255, 255, 255, .8); }
.p-over-ons .hero.hero-d { padding: 70px 0 56px; }
.p-diensten .hero.hero-d { padding: 74px 0 63px; }
.p-diensten .hero-d h1 .r { color: #FC346A; } .p-diensten .hero-d h1 .p { color: #723C3D; }
.p-diensten .hero-d p.lead { max-width: none; margin-top: 9px; font-size: 32px; letter-spacing: 1.26px; color: rgba(255, 255, 255, .6); }
.p-diensten .btn-afspraak { margin-top: 49px; }
.btn-afspraak { display: inline-flex; align-items: center; gap: 14px; height: 48px; margin-top: 34px; padding: 0 6px 0 33px; border-radius: 30px; background: #FFFAF3;
  font: 700 18px/21px Roboto, sans-serif; letter-spacing: .11em; color: var(--char); text-decoration: none; }
.btn-afspraak span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #3391B3; color: #fff; }
.btn-afspraak svg { display: block; }
.p-over-ons .stoel, .p-over-ons .rol { font: 400 14px/18px Roboto, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.licht .rail { height: 3px; background: var(--regenboog); }
/* ---- the people: round portraits on their facets, the text beside them */
.mensen { padding: 50px 0; background: rgba(217, 217, 217, .4); }
.mensen .wrap { display: flex; gap: 60px; }
.mens { flex: 1 1 0; min-width: 0; display: flex; gap: 32px; align-items: flex-start; }
.portret { flex: 0 0 200px; width: 200px; height: 200px; border: 3px solid #4598B5; border-radius: 50%; overflow: hidden; background: #EEF0FC; }
.portret img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mens h3 { font: 500 32px/34px Kufam, sans-serif; color: var(--navy); }
.mens .rol { margin-top: 8px; color: #3491B3; }
.mens > div > p:not(.rol):not(.stoel) { margin-top: 14px; font: 400 18px/28px Roboto, sans-serif; color: var(--char); }
.mens .stoel { margin-top: 14px; color: #6B6B6B; }
/* ---- the agents: four cards on the rule, the helpers under the bus; the section holds the lines, so the cards keep their place */
.agenten { position: relative; padding-top: 20px; }
.agenten h2 { font: 600 24px/86px Kufam, sans-serif; color: var(--char); }
.agenten .rail { width: 900px; margin-left: 150px; }
.agents, .helpers { display: flex; gap: 40px; }
.agents { padding-top: 60px; }
.helpers { margin-top: 120px; }
.agent, .helper { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; perspective: 1400px; outline: none; cursor: pointer; }
.agent { min-height: 295px; }
.flip { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .1, .2, 1); }
.agenten article:hover > .flip, .agenten article:focus-within > .flip, .agenten article:focus > .flip { transform: rotateY(180deg); }
.voor, .achter { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.voor { position: relative; height: 100%; }
.achter { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; background: var(--char); color: #fff; }
.achter .k { font: 400 14px/18px Kufam, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--blue); }
.achter h3 { font: 700 24px/30px Kufam, sans-serif; color: #fff; }
.achter p:last-child { font: 400 16px/24px Roboto, sans-serif; }
.agent .voor, .agent .achter { border-radius: 0 20px 0 0; overflow: hidden; }
.agent .voor { display: flex; flex-direction: column; background: #F0EDE9; }
.agent header { display: flex; flex: 0 0 77px; align-items: center; justify-content: space-between; padding: 6px 19px 5px 24px; background: #B3D1D9; border-radius: 0 10px 0 0; }
.agent header p { font: 600 24px/30px Kufam, sans-serif; color: var(--char); }
.agent .icoon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 6px; }
.agent .icoon img { display: block; width: 30px; height: 30px; }
.a1 .icoon { background: var(--orange); } .a2 .icoon { background: #723C3D; } .a3 .icoon { background: #FC346A; } .a4 .icoon { background: #57A5C0; }
.a1 .icoon img { width: 17px; height: 29px; transform: rotate(45deg); }
.agent .voor > div { display: flex; flex-direction: column; gap: 6px; padding: 16px 24px 20px; }
.agent h3 { font: 700 20px/26px Kufam, sans-serif; color: var(--card-ink); }
.agent .voor > div > p:not(.stoel):not(.rol) { font: 400 17px/24px Roboto, sans-serif; color: #444; }
.agent .stoel { margin-top: 6px; color: var(--orange-ink); }
.agent .rol { color: #6B6B6B; }
.helper .voor { display: flex; gap: 24px; align-items: flex-start; padding: 48px 40px 40px; background: #B3D1D9; }
.helper .voor::before { content: ''; position: absolute; inset: 0 0 auto; height: 12px; background: var(--regenboog); }
.helper .icoon { display: flex; flex: 0 0 64px; height: 64px; align-items: center; justify-content: center; border-radius: 6px; background: var(--navy); }
.helper .icoon img { display: block; width: 38px; height: 38px; }
.helper .voor > div { display: flex; flex-direction: column; }
.helper .kicker { font: 400 18px/18px Roboto, sans-serif; letter-spacing: .1em; color: #fff; }
.helper h3 { margin-top: 4px; font: 700 24px/30px Kufam, sans-serif; color: var(--char); }
.helper .voor > div > p:not(.kicker):not(.rol):not(.meer) { margin-top: 12px; font: 400 18px/28px Roboto, sans-serif; color: var(--char); }
.helper .meer { margin-top: 12px; font: 400 16px/24px Roboto, sans-serif; color: var(--grey); }
.helper .rol { margin-top: 14px; color: var(--grey); }
/* the agent chart is drawn by the agenten package: a card carries its own stub, dot and
   corner, so the lines follow the cards. This site colours them in theme/overrides/agenten.css. */
/* ---- the tools: seven marks on one row */
/* ---- the one-row footer: the rainbow, then the copyright, the small print and the languages on cream */
.voet { position: relative; z-index: 1; margin-top: 60px; background: #FFFAF3; }
body:has(main .loop:last-of-type:last-child) .voet { margin-top: 0; }   /* the logo band already closes the page; air only where it is missing */
.voet::before { content: ''; display: block; height: 6px; background: var(--regenboog); }
.voet > .wrap { display: flex; align-items: flex-start; gap: 128px; padding: 18px 0 48px; }
.voet p { display: flex; align-items: center; height: 36px; font: 400 14px/16px Roboto, sans-serif; letter-spacing: .043em; color: var(--grey); }
.voet p i { font-style: normal; margin: 0 8px; }
.voet p a { color: inherit; text-decoration: none; }
.voet p a:hover { color: var(--char); }
.voet .sign { margin: 8px 0 0 auto; }   /* natural size, flush with the column's right edge (Richard, 20-oct-2026); 8px down off the row (Richard, 21-oct-2026) */

@media (max-width: 1100px) {
  .top.licht, .top.licht.donker { height: 62px; }
  .merk img { height: 32px; width: auto; }
  .top.licht .nav a.current::after { top: auto; bottom: -4px; height: 3px; border-radius: 0; }
  /* the open menu: a cream sheet under the bar, every page on its own row, the orange bar beside the open page */
  .top.licht.open .navline { padding: 4px 24px 18px; background: #FFFAF3; border-bottom: 1px solid var(--line); box-shadow: 0 22px 34px -14px rgba(19, 22, 59, .25); }
  .top.licht.open .nav { gap: 0; }
  .top.licht.open .nav a { padding: 14px 0; font-size: 19px; color: var(--char); }
  .top.licht.open .nav a + a { border-top: 1px solid rgba(19, 22, 59, .08); }
  .top.licht.open .nav a.current::after { top: 0; bottom: 0; left: -24px; right: auto; width: 4px; height: auto; border-radius: 0; }
  .licht .hero.hero-d { margin-top: 62px; padding: 48px 0 40px; overflow: hidden; }
  .licht .hero-d #m { height: 200%; }   /* the fabric blown up: the pale lower half stays out of view, the text keeps its contrast */
  .licht .hero-d h1 { font: 900 clamp(31px, 9.4vw, 58px)/.94 Kufam, sans-serif; letter-spacing: .02em; }
  .licht .hero-d p.lead { margin-top: 26px; font-size: 19px; line-height: 28px; letter-spacing: 0; }   /* 26, not Home's 9: the lead is small here */
  .licht .btn-afspraak { margin-top: 24px; }
  .teasers { padding: 32px 0; } .teasers .rij { flex-direction: column; gap: 24px; } .teaser { flex-basis: auto; min-height: 0; }
  .teaser h3 { min-height: 0; font-size: 27px; line-height: 34px; } .teaser .meer { margin-top: 12px; }
  .thuis .teaser { min-height: 0; } .thuis .teaser h3 { font-size: 28px; line-height: 32px; } .thuis .teaser p { line-height: 32px; }
  .loop .set { gap: 32px; padding-right: 32px; }
  .kolommen { flex-wrap: wrap; gap: 18px; } .kolom { flex-basis: calc(50% - 9px); min-height: 0; }
  .citaat .copy { gap: 12px; } .citaat .haak { font-size: 60px; line-height: 50px; } .citaat blockquote { font-size: 22px; line-height: 32px; }
  .mensen { padding: 32px 0; }
  .mensen .wrap { flex-direction: column; gap: 28px; }
  .mens { gap: 20px; }
  .portret { flex-basis: 120px; width: 120px; height: 120px; }
  .mens h3 { font-size: 26px; line-height: 30px; }
  .agenten h2 { line-height: 64px; }
  .agenten .rail { width: auto; margin-left: 0; }
  .agents { flex-wrap: wrap; gap: 18px; padding-top: 24px; }
  .agent { flex-basis: calc(50% - 9px); min-height: 250px; }
  .helpers { flex-direction: column; gap: 18px; margin-top: 18px; }
  .helper .voor { padding: 36px 24px 28px; }
  .voet > .wrap { flex-wrap: wrap; gap: 12px 32px; padding: 18px 0 40px; }
}
@media (max-width: 560px) {
  .agent { flex-basis: 100%; }
}

@media (max-width: 1100px) {
  body.sub::before { height: 860px; }
  .hero-d #m { height: 860px; }
  .hero.hero-d { padding-top: 120px; }
  .hero-d p.lead { margin-top: 30px; font-size: 19px; line-height: 28px; }
  .hero-d .btn-plan { margin-top: 24px; }
  .verwacht { padding: 24px 0; } .verwacht .sub { margin-top: 14px; }
  .panelen { margin-top: 0; }
  .panelen::before { display: none; }
  .paneel { grid-template-columns: 1fr; gap: 24px; margin: 6px 0 12px; padding: 24px 20px 26px; }
  .slot.slot-knop { min-height: 0; margin-top: 0; padding: 28px 24px; }
  .slot-knop .slot-tekst { flex-basis: auto; }
}
@media (max-width: 760px) {
  body.sub::before { height: 640px; }
  .hero-d #m { height: 640px; }
  .hero.hero-d { padding-top: 104px; }
  .kolom { flex-basis: 100%; }
  .citaat { padding: 46px 22px 28px; }   /* on desktop the centered 900px column brings the air; here the band needs its own */
  .citaat .copy { flex-direction: column; gap: 0; }   /* the quote mark above the text, off the band's edge (Richard, 21-oct-2026) */
  .citaat .haak { line-height: 28px; margin-bottom: -18px; }   /* the glyph's ink hangs below its box: pull the text up to it */
}
@media (prefers-reduced-motion: reduce) {
  .panelen::before, .kolom li a::after, .flip { transition: none; }
}

/* ================================================================ Blog (Paper "Blog 6", 9-oct-2026)
   On the light chrome. The hero carries only the headline; the featured article hangs as a bordered card at the third
   column, over the hero's edge. Seven cards follow in three masonry columns, dealt in reading order; each card is its
   article's link and carries its third of the fabric strip, its mascot and its category tile. Reading text 17 px and up. */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; white-space: nowrap; font: 400 14px/18px 'DM Mono', monospace; letter-spacing: 1px; text-transform: uppercase; color: var(--grey); }
.meta i { flex: 0 0 5px; height: 5px; background: var(--orange); }
.p-blog .hero.hero-d { padding: 70px 0 56px; }
/* the featured card: a zero-height rail at the top of the column, the card hangs from the hero into the page */
.uitgelicht { position: relative; z-index: 2; height: 0; }
.feat { position: absolute; right: 0; top: -296px; display: flex; flex-direction: column; align-items: center; width: 373px; padding-top: 24px;
  background: #F0EDE9; border: 4px solid #fff; border-top-right-radius: 20px; box-shadow: 4px 4px 8px rgba(0, 0, 0, .2); }
.feat .tag { position: absolute; left: 51px; top: -10px; padding: 11px 17px; border-radius: 6px; background: var(--navy); rotate: -6deg;
  font: 400 18px/22px 'DM Mono', monospace; letter-spacing: 2.8px; color: #fff; }
.feat .foto { display: block; width: 328px; height: 200px; object-fit: cover; }
.feat > div { align-self: stretch; display: flex; flex-direction: column; gap: 12px; padding: 22px 28px 28px; }
.feat h2 { font: 600 24px/30px Kufam, sans-serif; color: var(--char); }
.feat h2 a { color: inherit; text-decoration: none; }
.feat h2 a::after { content: ''; position: absolute; inset: 0; }   /* the whole card is the link */
.feat h2 a:focus-visible::after { outline: 2px solid var(--orange-ink); outline-offset: 3px; }
.feat > div > p:not(.meta) { font: 300 18px/26px Roboto, sans-serif; color: var(--grey); }
/* ---- the seven cards, dealt over three columns in reading order; the third column starts under the featured card */
.artikelen { padding-top: 60px; }
.posts { display: flex; gap: 40px; }
.posts .kol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.posts .k3 { padding-top: 230px; }
.post { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 24px;
  background: #F0EDE9; border: 4px solid #fff; border-top-right-radius: 20px; box-shadow: 4px 4px 8px rgba(0, 0, 0, .2); }
.post .beeld { width: 328px; height: 200px; background: url(../assets/blog/strook.svg) 0 0 / 984px 200px no-repeat; }
.post.d2 .beeld { background-position: -328px 0; } .post.d3 .beeld { background-position: -656px 0; }
.post h3 { align-self: stretch; padding: 20px 24px 0; font: 600 22px/28px Kufam, sans-serif; color: var(--char); }
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a::after { content: ''; position: absolute; inset: 0; }   /* the whole card is the link */
.post h3 a:focus-visible::after { outline: 2px solid var(--orange-ink); outline-offset: 3px; }
.post > p:not(.meta) { align-self: stretch; padding: 10px 24px 0; font: 300 18px/24px Roboto, sans-serif; color: var(--grey); }
.post > .meta { align-self: stretch; padding: 10px 24px 24px; }
/* the mascot lies over the strip, its feet on the frame's line; the box is the frame's, the picture hangs on its floor */
.post .pop { position: absolute; object-fit: contain; object-position: 50% 100%; pointer-events: none; }
.post.p1 .pop { left: -16px; top: -22px; width: 241px; height: 258px; }
.post.p2 .pop { left: -70px; top: -175px; width: 366px; height: 394px; }
.post.p3 .pop { left: 87px; top: -21px; width: 255px; height: 273px; rotate: -9.3deg; transform-origin: 0 0; }
.post.p4 .pop { left: 176px; top: -15px; width: 235px; height: 253px; }
.post.p5 .pop { left: 71px; top: -65px; width: 291px; height: 313px; }
.post.p6 .pop { left: -18px; top: -59px; width: 278px; height: 299px; }
.post.p7 .pop { left: -22px; top: -43px; width: 272px; height: 293px; }
.cat { position: absolute; z-index: 1; right: 45px; top: -4px; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; color: #fff; box-shadow: 4px 4px 8px rgba(0, 0, 0, .2); }   /* on the border's top edge, every card the same */
.post.p3 .cat, .post.p4 .cat { right: auto; left: 37px; }   /* the mascot stands at the right there */
.cat img { display: block; width: 30px; height: 30px; }
.c-fabricaide { background: var(--orange); } .c-fabricaide img { width: 28px; height: 28px; }
.c-draaien { background: #FC346A; } .c-draaien img { width: 34px; height: 26px; }
.c-achter { background: #3491B3; }
.c-groeien { background: #723C3D; } .c-groeien img { width: 28px; height: 30px; }
.c-bouwen { background: #57A5C0; } .c-bouwen img { width: 34px; height: 34px; }
/* ---- the closing band: one line and the two ways in */
.slotband { margin-top: 60px; margin-bottom: 80px; }
.slotband .band { position: relative; padding: 50px 60px 44px; background: #B3D1D9; }
.slotband .band::before { content: ''; position: absolute; inset: 0 0 auto; height: 12px; background: var(--regenboog); }
.slotband h2 { font: 600 36px/44px Kufam, sans-serif; color: var(--char); }
.slotband .rij { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.slotband .vraag { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 6px 0 28px; border-radius: 30px; background: #fff; }
.slotband .vraag input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: italic 400 20px/24px Roboto, sans-serif; letter-spacing: .02em; color: var(--char); }
.slotband .vraag input::placeholder { color: #8A929B; }
.slotband .vraag button { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #3491B3; color: #fff; cursor: pointer; }
.slotband .btn-afspraak { flex: 0 0 auto; }
.btn-afspraak.blauw { background: #3491B3; color: #fff; }
.btn-afspraak.blauw span { background: #fff; color: var(--char); }
/* under 1100 the masonry becomes one column; these rules live AFTER the desktop blog rules, which would otherwise win the cascade */
@media (max-width: 1100px) {
  .uitgelicht { height: auto; }
  .feat { position: static; width: min(373px, 100%); margin: 40px 0 0 auto; }
  .feat .foto, .post .beeld { max-width: 100%; }
  .artikelen { padding-top: 40px; }
  .posts { flex-direction: column; gap: 32px; }
  .posts .kol { gap: 32px; }
  .posts .k3 { padding-top: 0; }
  /* one mascot size, standing on its own card's strip, on the side the category tile leaves free */
  .posts .post .pop { left: -6px; right: auto; top: -26px; width: 210px; height: 225px; rotate: 0deg; }
  .posts .post.p3 .pop, .posts .post.p4 .pop { left: auto; right: -6px; }
  .slotband { margin-top: 40px; margin-bottom: 48px; }   /* longhand: the shorthand's side zeros would undo .wrap's centering */
  .slotband .band { padding: 38px 24px 32px; }
  .slotband h2 { font-size: 28px; line-height: 36px; }
  .slotband .rij { flex-wrap: wrap; }
}

/* ================================================================ Contact (Paper "Contact 3", 9-oct-2026)
   On the light chrome. The week planner on the grey band, the full column: week and arrows at the right, the rule, the days
   and the slots, "Zet vast" and the mail line at the right. Under the band the three points on the rule, each with its own
   bullet. "Zet vast" opens the dialog: first email and website, then the confirmation with the agenda menu. home.js draws
   the week (section 7). */
.p-contact .hero.hero-d { padding: 70px 0 56px; }
.p-contact .hero-d p.lead { max-width: 954px; font-size: 24px; line-height: 34px; letter-spacing: .025em; }
.afspraak { padding: 50px 0; background: rgba(217, 217, 217, .4); }
.planner { display: flex; flex-direction: column; }
.uwvraag { margin-bottom: 22px; padding: 14px 18px; border-radius: 10px; background: #FFE9CC; font: 400 18px/26px Roboto, sans-serif; color: var(--navy); overflow-wrap: anywhere; }
.uwvraag[hidden] { display: none; }
.uwvraag q { font-style: italic; font-weight: 500; }
.week { align-self: flex-end; display: flex; justify-content: space-between; align-items: center; width: 319px; padding-bottom: 14px; }
.week button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #3491B3; color: #fff; cursor: pointer; }
.week button:disabled { background: rgba(52, 145, 179, .2); cursor: default; }
.week .vorige svg { transform: rotate(180deg); }
.week svg { display: block; }
.bereik { font: 400 18px/36px Roboto, sans-serif; color: var(--char); }
.rooster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 20px; padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.dag { font: italic 400 16px/20px Roboto, sans-serif; text-align: center; color: var(--char); }
.tijd { height: 48px; padding: 0; border: 2px solid #3491B3; border-radius: 8px; background: none; font: 400 20px/24px Roboto, sans-serif; color: var(--char); cursor: pointer; }
.tijd:hover { background: rgba(52, 145, 179, .12); }
.tijd.sel { background: #3491B3; font-weight: 700; font-size: 24px; color: #fff; }
.tijd:disabled { border-color: #C3CAD2; background: none; color: #8A929B; text-decoration: line-through; cursor: default; }
.zetvast { align-self: flex-end; display: inline-flex; align-items: center; gap: 14px; height: 48px; margin-top: 30px; padding: 0 6px 0 33px; border: 0; border-radius: 30px; background: #3491B3;
  font: 400 18px/21px Roboto, sans-serif; letter-spacing: .05em; color: #fff; cursor: pointer; }
.zetvast:hover, .zetvast:focus-visible { background: #2A7A99; }
.zetvast:disabled { opacity: .5; cursor: default; }
.zetvast i { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--char); }
.zetvast.klein { align-self: flex-start; gap: 14px; height: 52px; margin-top: 10px; padding: 0 8px 0 26px; font-size: 16px; line-height: 20px; letter-spacing: .8px; }
.agenda .zetvast.klein { margin-top: 0; padding-right: 22px; }
.mail { align-self: flex-end; margin-top: 24px; font: 400 14px/18px Roboto, sans-serif; letter-spacing: .02em; color: var(--grey); }
.mail a, .mail button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; letter-spacing: inherit; color: var(--char); text-decoration: none; cursor: pointer; }
.mail a:hover, .mail button { text-decoration: underline; }
.voorb { padding: 60px 0 80px; }
.voorb h2 { font: 600 24px/29px Kufam, sans-serif; color: var(--char); }
.voorb .rail { margin-top: 30px; }
.punten { list-style: none; display: flex; gap: 60px; margin-top: 30px; }
.punten li { position: relative; flex: 0 0 360px; padding-left: 28px; font: 400 18px/28px Roboto, sans-serif; color: #002226; }
.punten li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }
.punten li:nth-child(2)::before { background: #57A5C0; } .punten li:nth-child(3)::before { background: #FC346A; }
.dlg { width: min(560px, calc(100% - 32px)); padding: 40px 44px 36px; border: 0; border-radius: 10px; background: #fff; color: var(--char);
  box-shadow: 0 13px 26px rgba(19, 22, 59, .16), 0 3px 4px rgba(19, 22, 59, .1); }
.dlg[open] { display: flex; flex-direction: column; gap: 28px; }
.dlg::backdrop { background: rgba(19, 22, 59, .55); }
.dlg-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dlg h2 { font: 700 32px/40px Kufam, sans-serif; color: var(--navy); }
.sluit { flex: 0 0 36px; display: flex; align-items: center; justify-content: center; height: 36px; padding: 0; border: 0; background: none; color: var(--char); cursor: pointer; }
.stap1:not([hidden]), .stap2:not([hidden]) { display: flex; flex-direction: column; }
.stap1 { gap: 18px; } .stap2 { gap: 28px; }
/* the floating label: at rest it sits in the field like a prompt, on focus or with text it moves into the border
   (huisstijl, proven in the zwevend-label demo 15-oct-2026); the example appears as placeholder only while focused */
.veldje { position: relative; display: block; padding-top: 12px; }
.veldje span { position: absolute; left: 12px; top: 25px; padding: 0 5px; background: #fff; pointer-events: none;
  font: italic 400 18px/24px Roboto, sans-serif; color: #8A929B;
  transition: top .15s ease, font-size .15s ease, color .15s ease, letter-spacing .15s ease; }
.veldje:has(textarea) span { top: 26px; }
.veldje:has(:focus) span, .veldje:has(input:not(:placeholder-shown)) span, .veldje:has(textarea:not(:placeholder-shown)) span {
  top: 2px; font: 500 16px/20px Roboto, sans-serif; letter-spacing: .1em; color: var(--orange-ink); }
.veldje input { display: block; width: 100%; height: 50px; padding: 0 16px; border: 1px solid rgba(19, 22, 59, .35); border-radius: 5px; background: #fff; font: 400 18px/24px Roboto, sans-serif; color: var(--card-ink); }
.veldje textarea { display: block; width: 100%; padding: 14px 16px 10px; border: 1px solid rgba(19, 22, 59, .35); border-radius: 5px; background: #fff; font: 400 18px/24px Roboto, sans-serif; color: var(--card-ink); resize: vertical; }
.veldje input:focus, .veldje textarea:focus { outline: 2px solid var(--orange-ink); outline-offset: -1px; }
.veldje input::placeholder, .veldje textarea::placeholder { color: transparent; transition: color .12s; font-style: italic; }
.veldje input:focus::placeholder, .veldje textarea:focus::placeholder { color: #B9C0C7; }
/* Chrome paints autofilled fields blue, which clashes with the floating label; the inset shadow covers it */
.veldje input:-webkit-autofill, .veldje input:-webkit-autofill:hover, .veldje input:-webkit-autofill:focus,
.veldje textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--card-ink); caret-color: var(--card-ink); }
.stap1 .mail, .stap2 .mail { margin-top: 0; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; }   /* a person never sees or reaches it; a robot fills it in */
.fout { font: 400 16px/22px Roboto, sans-serif; color: #B3261E; }
.fout[hidden] { display: none; }
.staat { font: 400 18px/28px Roboto, sans-serif; overflow-wrap: anywhere; }
.agenda-menu { list-style: none; width: 260px; margin-top: 10px; padding: 6px 0; border: 1px solid rgba(19, 22, 59, .15); border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(19, 22, 59, .12); }
.agenda-menu a { display: block; padding: 11px 18px; font: 400 16px/20px Roboto, sans-serif; color: var(--card-ink); text-decoration: none; }
.agenda-menu a:hover, .agenda-menu a:focus-visible { background: #FFE9CC; outline: none; }
@media (max-width: 1100px) {
  .afspraak { padding: 32px 0; }
  .week { width: 100%; }
  .voorb { padding: 40px 0 48px; }
  .punten { flex-direction: column; gap: 16px; }
  .punten li { flex-basis: auto; }
  .dlg { padding: 28px 22px 26px; }
  .dlg h2 { font-size: 26px; line-height: 34px; }
}
@media (max-width: 560px) {
  .rooster { gap: 8px 6px; }
  .dag { font-size: 12px; line-height: 16px; }
  .tijd { height: 44px; font-size: 17px; }
  .tijd.sel { font-size: 20px; }
  .bereik { font-size: 16px; }
  .zetvast { padding-left: 22px; font-size: 16px; gap: 10px; }
}
@media (prefers-reduced-motion: no-preference) { .tijd, .zetvast { transition: background-color .15s, border-color .15s; } }

/* ================================================================ Text pages: every page that has no design of its own, so every
   page made in the editor (an article, a statement). One reading column: the lead in the hero, tekst blocks, the closing block. */
.tekstpagina .hero.hero-d { padding: 70px 0 56px; }   /* the same band as the designed pages (licht everywhere, 14-oct-2026) */
.hero-d .kicker { margin-bottom: 22px; font: 400 16px/20px 'DM Mono', monospace; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.hero-d .kicker a { color: inherit; }
.tekstpagina .hero-d h1 { max-width: 1040px; white-space: normal; font-size: clamp(30px, 5vw, 60px); line-height: 1.04; }
.tekstpagina .hero-d p.lead { max-width: 1040px; margin-top: 36px; }   /* same width as the h1 (Richard, 20-oct-2026) */
main.col > .sec { width: min(1200px, 100% - 48px); margin: 64px auto 0; }
.sec .head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.sec .k { font: 400 14px/18px Kufam, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--orange-ink); }
.sec h2 { font: 700 32px/40px Kufam, sans-serif; color: var(--navy); }
.sec .head p { font: 300 22px/34px Roboto, sans-serif; color: var(--card-ink); }
.sec .head a { color: var(--tile); }
.art-beeld { margin-top: 56px; }
.art-beeld img { display: block; width: min(760px, 100%); height: auto; border-radius: 15px; }
.tekstpagina .slot.slot-knop { margin-top: 96px; }

/* The sidebar: the other blog items, right of an article's column (Paper canvas "Blog article
   sidebar", variant B, 14-oct-2026). The grid exists only outside the editor: there main keeps
   its own box (no display: contents) and the aside stays hidden, so editing is untouched. */
.artikel { width: min(1200px, 100% - 48px); margin-inline: auto; }
.artikel main.col > .sec, .artikel main.col > .art-beeld { width: 100%; }   /* the image keeps the text's left edge (Richard, 20-oct-2026) */
.artikel .slot.slot-knop { width: 100%; }
/* on blog pages the closing band wears the citaat skin (Richard, 14-oct-2026): the rainbow rule and the blue band */
.artikel .slot.slot-knop { margin-top: 56px; padding: 54px 48px 42px; background: #B3D1D9; border-radius: 0; }
.artikel .slot.slot-knop::before { content: ''; position: absolute; inset: 0 0 auto; height: 12px; background: var(--regenboog); }
.artikel .slot-knop .slot-tekst h2 { font: 400 36px/44px Roboto, sans-serif; color: var(--char); }   /* the citaat quote typography (Richard, 14-oct-2026) */
.artikel .slot .btn-plan { height: 48px; padding: 0 6px 0 33px; border-radius: 30px; background: #FFFAF3;
  color: var(--char) !important; font: 700 18px/21px Roboto, sans-serif; letter-spacing: .11em; box-shadow: none; }   /* the header afspraak-button look (Richard, 14-oct-2026) */
.artikel .slot .btn-plan::after { flex-basis: 36px; height: 36px; background-color: #3391B3; }
.zijbalk { margin-top: 64px; }
.zijbalk .k { margin: 0 0 10px; font: 400 14px/18px Kufam, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--orange-ink); }
.zij-item { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none; }
.zij-datum { font: 400 12px/16px Roboto, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #9A9484; }   /* a warm grey; --grey is too heavy on the cream */
.zij-titel { font: 400 18px/24px Kufam, sans-serif; color: var(--navy); }
.zij-item:hover .zij-titel, .zij-item:focus-visible .zij-titel { color: var(--tile); }
.zij-alle { display: inline-flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line); font: 700 15px/20px Kufam, sans-serif; color: var(--tile); text-decoration: none; }
.zij-alle svg { flex: 0 0 18px; }
.cms-active .zijbalk { display: none; }
@media (min-width: 1101px) {
  body:not(.cms-active) .artikel { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 80px; }
  body:not(.cms-active) .artikel main.col { display: contents; }
  body:not(.cms-active) .artikel main.col > * { grid-column: 1; }
  body:not(.cms-active) .zijbalk { grid-column: 2; grid-row: 1 / span 40; align-self: start; position: sticky; top: 144px; }
}
@media (max-width: 1100px) {
  main.col > .sec { margin-top: 44px; }
  .sec h2 { font-size: 26px; line-height: 32px; }
  .sec .head p { font-size: 18px; line-height: 28px; }
  .art-beeld { margin-top: 36px; }
  .tekstpagina .slot.slot-knop { margin-top: 56px; }
  .artikel .slot.slot-knop { padding: 36px 24px 32px; }   /* the desktop padding and type stand after the phone rules, so they win there without this */
  .artikel .slot-knop .slot-tekst h2 { font-size: 26px; line-height: 34px; }
}

/* ================================================================ In the editor (?admin=1, body.cms-active)
   The editor's own bar is fixed at the top, 60 px high: the site's bar hangs under it. What home.js would draw or open stays
   as the markup has it, so the parts a visitor only sees after a click lie open here to be edited. */
body.cms-active .top { top: 60px; }
.tijden { display: none; }
body.cms-active .tijden { display: block; margin-bottom: 18px; padding: 10px 14px; border: 1px dashed var(--tile); border-radius: 8px; font: 400 16px/22px Roboto, sans-serif; color: var(--card-ink); }
body.cms-active .uwvraag[hidden] { display: block; }
/* The agent and helper cards don't flip in the editor: hover and focus would turn the card away
   from the cursor. Both faces lie flat beneath each other, both editable (canvas "Agentkaarten
   in de editor", 14-oct-2026). */
body.cms-active .agenten article > .flip { height: auto; transform: none; transition: none; }
body.cms-active .agenten .achter { position: static; transform: none; margin-top: 14px; }
body.cms-active .agent { min-height: 0; }
body.cms-active .agenten article { cursor: auto; }
body.cms-active .mensen > .cms-add-row { width: min(1200px, 100% - 48px); max-width: none !important; margin: 16px auto 12px !important; }
/* ^ the editor drops its button after the list, outside the wrap. Its own sheet (editor.css) is UNLAYERED and the site's
   sheet sits in cascade layers, so an unlayered declaration beats ours at any specificity; only !important turns that
   around. Width spans the wrap; the engine's 760 cap is lifted for the same reason. */
body.cms-active .uwvraag q:empty::before { content: 'de zin die de bezoeker in het vraagvak typte'; }
body.cms-active .rooster { min-height: 0; }
body.cms-active .rooster::before { content: 'Hier tekent de pagina de week: maandag tot en met vrijdag, de tijden hierboven.'; grid-column: 1 / -1; padding: 22px 0; font: italic 400 16px/22px Roboto, sans-serif; color: var(--grey); }
body.cms-active .dlg { position: static; display: flex; flex: 0 0 100%; flex-direction: column; gap: 28px; max-width: 560px; margin: 56px 0 0; }
body.cms-active .dlg::before { content: 'Het venster na Zet vast, eerst het formulier, dan de bevestiging ({email} wordt het adres van de bezoeker)'; font: italic 400 16px/22px Roboto, sans-serif; color: var(--grey); }
body.cms-active #dlg-titel:empty::before { content: 'Wo 1 okt, 09:30'; }
body.cms-active .stap2[hidden] { display: flex; flex-direction: column; gap: 28px; padding-top: 28px; border-top: 1px dashed var(--line); }
body.cms-active .agenda-menu[hidden] { display: block; }
}

@layer blocks {

/* ---- block: agenten 1.0.0 (library) ---- */
/* The lines of the chart.

   They used to be twenty-one absolutely positioned <i> elements in one layer, each at
   its own pixel: left 133, 443, 753 and 1063 for four columns at one width. A fifth
   agent had nowhere to go. A card's own pieces now sit inside the card and are placed
   against it, so they follow it whatever the count: the stub up to the rule, the dot on
   the top edge, the stub down to the bus, and on the outer two cards the rounded corner
   that reaches the end of the rule. What is left in the separate layer is the frame the
   cards hang from: the line down from the root dot, that dot, and the bus at the foot.

   Colours come from two custom properties a site sets: --lijn per column, --stam for the
   root. The bus is the site's own rule, drawn in its overrides sheet, because its width
   is the width of the rule above the cards. A column past the last one a site has given
   a --lijn draws in the neutral default. */
.agenten { --stam: #9AA3B2; }
.agent, .helper { --lijn: #9AA3B2; }

/* the frame */
.verbindingen { position: absolute; z-index: 2; inset: 0; pointer-events: none; }   /* over the cards: the dots sit on their top edge */
.verbindingen i { position: absolute; display: block; }
.verbindingen .v-top { left: calc(50% - 2px); top: 7px; width: 3px; height: 99px; background: var(--stam); }
.verbindingen .v-dot { width: 16px; height: 16px; border: 3px solid; border-radius: 50%; background: #fff; }
.verbindingen .v-d0 { left: calc(50% - 8px); top: -8px; border-color: var(--stam); }

/* what belongs to a card */
.agent > i, .helper > i { position: absolute; display: block; }
.agent > .v-t, .agent > .v-a, .helper > .v-x { left: calc(50% - 2px); width: 3px; background: var(--lijn); }
.agent > .v-t { bottom: 100%; height: 60px; }
.agent > .v-a { top: 100%; height: 60px; }
.agent:first-child > .v-t, .agent:last-child > .v-t,
.agent:first-child > .v-a, .agent:last-child > .v-a { height: 45px; }   /* the outer two stop at the corner, the inner ones run through */
.helper > .v-x { bottom: 100%; height: 57px; }
.agent > .v-dot { left: calc(50% - 8px); top: -8px; width: 16px; height: 16px;
  border: 3px solid var(--lijn); border-radius: 50%; background: #fff; }
.agent > .v-hoek { display: none; width: 18px; height: 18px; border: 0 solid var(--lijn); }
.agent:first-child > .v-hoek, .agent:last-child > .v-hoek { display: block; }
.agent:first-child > .v-hoek { left: calc(50% - 2px); }
.agent:last-child > .v-hoek { left: calc(50% - 17px); }
.agent > .v-hoek-boven { bottom: calc(100% + 45px); }
.agent > .v-hoek-onder { top: calc(100% + 45px); }
.agent:first-child > .v-hoek-boven { border-width: 3px 0 0 3px; border-top-left-radius: 15px; }
.agent:last-child > .v-hoek-boven { border-width: 3px 3px 0 0; border-top-right-radius: 15px; }
.agent:first-child > .v-hoek-onder { border-width: 0 0 3px 3px; border-bottom-left-radius: 15px; }
.agent:last-child > .v-hoek-onder { border-width: 0 3px 3px 0; border-bottom-right-radius: 15px; }

/* ---- block: blog-grid 1.0.0 (library) ---- */
/* No style of its own. The columns, the cards, the strip behind each card, the mascot's
   place and the category mark are the site's (.artikelen, .posts, .kol, .post, .beeld,
   .pop, .cat in its foundation.css); this package renders the markup that stylesheet was
   written against. The p and d number on a card are stored, not derived from its place:
   p chooses where the mascot stands and d which part of the strip shows, and both are
   drawn per card rather than following from the order. */

/* ---- block: blog-uitgelicht 1.0.0 (library) ---- */
/* No style of its own. The card, its photo, the category mark and the meta line are the
   site's (.uitgelicht, .feat, .tag, .cat, .foto, .meta in its foundation.css); this
   package renders the markup that stylesheet was written against. The category colour
   comes from the c- class the field fills in, so a new category is one rule in the
   site's own sheet and no change here. */

/* ---- block: cta 1.0.4 (library) ---- */
/* cta: the band, its type and its buttons. Neutral: no site's colours. A site sets the --cta-* variables in its
   theme/overrides/cta.css; without them the band looks as Blue's did (the fallbacks), so Blue needs no bridge.
   --cta-from and --cta-to are the gradient's first two stops, for a site that keeps the gradient in its own colours. */
.cta-band {
  background: var(--cta-bg, linear-gradient(100deg, var(--cta-from, #17406e), var(--cta-to, var(--accent-strong)) 55%, #1c7fc4));
  border-radius: var(--cta-radius, 20px);
  padding: var(--cta-pad, 64px 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cta-gap, 30px);
  flex-wrap: wrap;
}
.cta-band h2 {
  color: var(--cta-ink, var(--on-accent));
  font-size: var(--cta-heading-size, clamp(24px, 3vw, 32px));
  max-width: none;
}
.cta-band p {
  color: var(--cta-muted, rgba(255, 255, 255, 0.8));
  margin-top: var(--cta-body-gap, 8px);
}
@media (max-width: 640px) {
  .cta-band {
    padding: var(--cta-pad-small, 44px 28px);
  }
}

/* ---- block: diensten-kolommen 1.0.0 (library) ---- */
/* No style of its own. The four columns, the shared panel and the open state are
   laid out by the site's own foundation.css (.verwacht, .kolommen, .kolom, .panelen,
   .paneel); the markup this package renders is the markup that stylesheet was written
   against, element for element and class for class. Per-site styling belongs in
   overrides/diensten-kolommen.css, as logoband's logo sizes do. */

/* ---- block: herkenning 1.0.1 (library) ---- */
/* herkenning: re-extracted from Brein Balans on 15-sep-2026, the site's current rules (the 11-sep copy had drifted) */
/* --- Herkenning ------------------------------------------------------- */
.herkenning {
  background: var(--surface-alt);
}

.herkenning-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 940px;
}

.herkenning-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-soft);
}

.herkenning-list li::before {
  content: "";
  position: absolute;
  left: 0;
  /* A check mark: the short left arm is what makes it read as a tick. At
     12x12 both arms matched and it read as a fold-out chevron (Thomas, 15-sep). */
  top: 0.55em;
  width: 13px;
  height: 7px;
  border-left: var(--stroke) solid var(--accent);
  border-bottom: var(--stroke) solid var(--accent);
  transform: rotate(-45deg);
}

.herkenning-note {
  font-size: var(--step--1);
  color: var(--ink-faint);
  font-style: italic;
}

/* ---- block: hero-image 2.0.1 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes hero, hero-image-only, hero-img; review before it becomes the block's own */
.hero {
  position: relative;
  background: var(--surface-deep);
  overflow: hidden;
}

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

.hero h1 {
  color: var(--on-deep);
  font-size: clamp(34px, 5vw, 54px);
  margin-bottom: 20px;
}

.hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 19px;
  margin-bottom: 34px;
}

.hero-image-only {
  min-height: 500px;
}

.hero-image-only .hero-img {
  opacity: 1;
}

@media (max-width: 900px) {
  .hero-image-only {
    min-height: 420px;
  }
}
@media (max-width: 640px) {
  .hero-image-only {
    min-height: 320px;
  }
}

/* ---- block: kaarten 1.1.0 (library) ---- */
/* kaarten: structure only. Each site styles its card grids in its own CSS (roadmap 91, 17-sep-2026) */

/* ---- block: logoband 1.0.0 (library) ---- */
/* logoband — the running bar of client logos and what we work with.
   Layout and animation belong to the site: this sheet only neutralises the two wrappers the
   repeats need, so the flex row still sees the logos themselves as its items. A site that
   wants a particular logo at a particular height says so in theme/overrides/logoband.css,
   which is joined after this one and always wins. */
.loop .rij, .loop .klant { display: contents; }

/* ---- block: mensen 1.0.0 (library) ---- */
/* No style of its own. The row, the round portrait and the type are the site's
   (.mensen, .mens, .portret, .rol, .stoel in its foundation.css); this package
   renders the markup that stylesheet was written against. The m1, m2, m3 class
   follows the position so a third person needs no CSS. */

/* ---- block: quote-band 1.0.2 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes quote-band, quote-band-mark; review before it becomes the block's own */
.quote-band {
  background: var(--surface-deep);
  padding: 80px 0;
  text-align: center;
}

.quote-band blockquote {
  max-width: 700px;
  margin: 0 auto;
  border: none;
  padding: 0;
}

.quote-band-mark {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 72px;
  font-weight: 800;
  color: var(--accent);
  line-height: 0.5;
  margin-bottom: 24px;
  user-select: none;
}

.quote-band blockquote p {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.92);
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

.quote-band cite {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  font-size: 15px;
}

.quote-band cite span {
  display: block;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin-top: 4px;
}

/* ---- block: stappen 1.1.0 (library) ---- */
/* stappen: numbered steps with an icon. Re-extracted from Brein Balans on 15-sep-2026 as every rule that targets its classes, responsive rules included (the 11-sep copy had 4 of them). */
/* --- Stappen ---------------------------------------------------------- */
/* Line icons on a flowing track, no numbers (Thomas, 15-sep-2026, Doop
   canvas frames "B5"). The icon is a mask painted in the page accent, so
   every brand page colours its own steps. A step's icon is a data-icon
   name; a new icon needs its file in assets/icons/ and one rule below. */
.stappen-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}

.stap {
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1fr;
  column-gap: 1.25rem;
  align-items: start;
}

.stap-icon {
  position: relative;
  display: block;
  grid-row: span 2;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 var(--stroke) var(--accent);
}

.stap-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--accent-strong);
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}

.stap-icon[data-icon=chart-no-axes-column]::after {
  --icon: url("../assets/icons/chart-no-axes-column.svg");
}

.stap-icon[data-icon=activity]::after {
  --icon: url("../assets/icons/activity.svg");
}

.stap-icon[data-icon=lightbulb]::after {
  --icon: url("../assets/icons/lightbulb.svg");
}

.stap-icon[data-icon=shield-check]::after {
  --icon: url("../assets/icons/shield-check.svg");
}

.stap-icon[data-icon=target]::after {
  --icon: url("../assets/icons/target.svg");
}

.stap-icon[data-icon=gauge]::after {
  --icon: url("../assets/icons/gauge.svg");
}

.stap-icon[data-icon=sliders-horizontal]::after {
  --icon: url("../assets/icons/sliders-horizontal.svg");
}

.stap-icon[data-icon=house]::after {
  --icon: url("../assets/icons/house.svg");
}

.stap-icon[data-icon=clipboard-check]::after {
  --icon: url("../assets/icons/clipboard-check.svg");
}

.stap-icon[data-icon=refresh-cw]::after {
  --icon: url("../assets/icons/refresh-cw.svg");
}

.stap-icon[data-icon=message-circle]::after {
  --icon: url("../assets/icons/message-circle.svg");
}

.stap-icon[data-icon=circle-help]::after {
  --icon: url("../assets/icons/circle-help.svg");
}

.stap-icon[data-icon=messages-square]::after {
  --icon: url("../assets/icons/messages-square.svg");
}

.stap h3 {
  font-size: var(--step-1);
  line-height: 1.25;
  margin: 0.2em 0 0.4em;
}

.stap p {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.7;
}

.stap p:empty {
  display: none;
}

@media (min-width: 861px) {
  /* One row of 4, or rows of 3 for 5 and 6 steps; the track runs from each
     icon to the next and ends in a chevron at the end of every row. */
  .stappen-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.75rem 0;
  }
  .stappen-list:has(> .stap:nth-child(5)) {
    grid-template-columns: repeat(3, 1fr);
  }
  .stap {
    display: block;
    padding-right: 2rem;
  }
  .stap-icon {
    margin-bottom: 1.5rem;
  }
  .stap h3 {
    margin-top: 0;
    text-wrap: balance;
  }
  .stap::before {
    content: "";
    position: absolute;
    left: 4rem;
    right: 0;
    top: calc(2rem - 1px);
    border-top: 2px solid var(--accent);
    opacity: 0.55;
  }
  .stap:last-child::before,
  .stappen-list:has(> .stap:nth-child(5)) > .stap:nth-child(3n)::before {
    right: 2rem;
  }
  .stap:last-child::after,
  .stappen-list:has(> .stap:nth-child(5)) > .stap:nth-child(3n)::after {
    content: "";
    position: absolute;
    right: 1.35rem;
    top: 1.4rem;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--accent);
    -webkit-mask: url("../assets/icons/chevron-right.svg") center/contain no-repeat;
    mask: url("../assets/icons/chevron-right.svg") center/contain no-repeat;
  }
}
}

@layer overrides {

/* ---- override: this site's adjustments to agenten ---- */
/* The Fabricaide site's own agent chart: the colour of each column's lines, the colour
   of the root, and the bus, whose width is the width of the rule above the cards.
   Lifted from the site's own foundation.css, 13-oct-2026 (FCMS-096). */
.agenten { --stam: #7DB377; }
.a1 { --lijn: #2F8FC2; } .a2 { --lijn: #55A3C0; } .a3 { --lijn: #A7BE38; } .a4 { --lijn: #FFC01E; }
.h1 { --lijn: #4299C1; } .h2 { --lijn: #D3BF2B; }
.verbindingen .v-bus { left: 150px; top: 524px; width: 900px; height: 3px; background: var(--regenboog); }
@media (max-width: 1100px) {
  .verbindingen, .agent > i, .helper > i { display: none; }   /* below the breakpoint the cards wrap, so the chart is not drawn */
}
body.cms-active .verbindingen, body.cms-active .agent > i, body.cms-active .helper > i { display: none; }   /* in the editor the faces lie stacked, so the chart's connectors point at nothing; the block's own display rules sit in the blocks layer, hence here (14-oct-2026) */

/* ---- override: this site's adjustments to hero-image ---- */
/* hero-image came out of Blue Accountants, and its rules sit on the bare .hero class, so
   they also reach the hero this site renders itself (section.hero.hero-d; the block's own
   markup is .hero-bg and .hero-image-only and never carries .hero-d). Blue's tokens do not
   exist here, so `color: var(--on-deep)` was invalid at computed-value time, fell back to
   inherit and painted every headline #333 on the mesh, `font-size: clamp(34px, 5vw, 54px)`
   cut the Home headline from 80 to 54, and `.hero p` cut the lead from 32 to 19 and hit
   the articles' kicker (a p too).

   The block reaches .hero-d with six declarations and no more: font-size, color and
   margin-bottom on the headline and on every p, so on the lead and the kicker. This sheet
   repeats those six with the site's own values and nothing else, so leading, tracking,
   family, max-width and the margins above still come from foundation.css and the two
   sheets cannot drift on them. Checked against the Paper frame "01 Home (Final)";
   every page carries the licht chrome since 14-oct-2026. */

.hero-d h1, .hero-d p.lead { margin-bottom: 0; }
.hero-d .kicker { font-size: 16px; color: rgba(255, 255, 255, .8); margin-bottom: 22px; }

/* the licht chrome, every page: the mesh sits on navy, white text */
.licht .hero.hero-d { background: var(--navy); }
.licht .hero-d h1 { font-size: 80px; color: #FFFAF3; }
.licht .hero-d p.lead { font-size: 28px; color: rgba(255, 255, 255, .72); }

/* the text pages: every page made in the editor, a smaller headline on the same band */
.tekstpagina .hero-d h1 { font-size: clamp(30px, 5vw, 60px); color: #FFFAF3; }

.p-index .hero-d h1 { color: #fff; }
.p-index .hero-d p.lead { font-size: 32px; color: rgba(255, 255, 255, .8); }
.p-diensten .hero-d p.lead { font-size: 32px; color: rgba(255, 255, 255, .6); }
.p-contact .hero-d p.lead { font-size: 24px; }

@media (max-width: 1100px) {
  .licht .hero-d h1 { font-size: clamp(31px, 9.4vw, 58px); }
  .licht .hero-d p.lead { font-size: 19px; }
}

/* ---- override: this site's adjustments to logoband ---- */
/* The Fabricaide site's own logoband: the row is one ink at one height, and three marks
   need their own, because the artwork is not square. The library block says nothing about
   size; this sheet is joined after it in the overrides layer and wins.
   Lifted from the site's own home.css, 13-oct-2026 (FCMS-093). */
.loop img { height: 30px; width: auto; filter: grayscale(1); }
.loop .klant img[src*="febo"]     { height: 26px; }   /* the heaviest wordmark, a step down keeps the row even */
.loop .klant img[src*="brainspa"] { height: 40px; }   /* a small word beside a large ring */
.loop .klant img[src*="carlogs"]  { height: 20px; }   /* a wide wordmark */
.loop .klant img[src*="bbc-logo"] { height: 52px; transform: translateY(4px); }   /* mark plus naam: at 30 the naam is 6px; the naam at the foot pulls the mark above the midline, the nudge centers the mass */
.loop .klant img[src*="vinbar"]   { height: 60px; transform: translateY(3px); }   /* a portrait mark with its naam at the foot, same nudge */
}