/* g49 base: the g22 layout on the deep green, no glass cards. Every block sits on the page itself. */
html:root{--g-wall:#0b1512;--g-floor:#090f0d}
html,body,body.inner{background:#0b1512}
html:root .g-sky,html:root .g-sky-grain{background:none}
html:root .g-sky::before{display:none}
html:root .g-sky-grain,html:root header.gh::after{display:none!important}
.v-lev{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
html body :is(.g45-row,.g40-ex,.g-close-in,.pk-sum,.pk-rows,.pk-d,.pk-conf,.g46-vk,.g37-form,.g43-ctq){background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html body :is(.g45-row,.g40-ex,.g-close-in)::before,html body :is(.g45-row,.g40-ex,.g-close-in)::after{display:none!important}
/* packages: hairlines instead of boxes */
html:root body .gx-rail{border:0!important}
html:root body .gx-rail .gx-label.g45-row.g45-row{padding:26px 0!important;margin:0!important;border:0!important;border-top:1px solid rgba(255,255,255,.14)!important}
html:root body .gx-rail .gx-label.g45-row.g45-row:last-of-type{border-bottom:1px solid rgba(255,255,255,.14)!important}
html body .g40-ex{padding:0!important}
html body .g-close-in{padding:0!important}
html:root header.gh.g37-solid{background:rgba(10,19,16,.93);box-shadow:inset 0 -1px 0 rgba(255,255,255,.14)}
html:root body :is(.mw-f,.g-print,.wp-f,.pt){border-radius:10px!important;overflow:hidden}
html:root body .gx-frame{border-radius:10px!important;overflow:hidden}
/* one second-action button: exactly the size and type of the main button */
html:root body :is(.gx-lnk,.g-tl,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:56px;min-height:56px;padding:0 30px!important;border:0!important;border-radius:999px;white-space:nowrap;font-size:17px!important;font-weight:650!important;line-height:1!important;color:#f3eee4;text-decoration:none!important;background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
html:root body :is(.gx-lnk,.g-tl,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *):hover{background:rgba(255,255,255,.1)}
html:root body :is(.gx-lnk,.g-tl,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *)::before,html:root body :is(.gx-lnk,.g-tl,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *)::after{display:none!important}
html:root body .g-tl{justify-self:start;width:max-content}
html:root body .g43-ex{color:#a6dcc1!important}
html:root body .g22-n.g22-n-cta{font-style:normal!important;font-family:inherit!important;font-size:inherit!important;padding:8px 16px!important;border-radius:999px;background:none!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)!important;color:#f3eee4!important}
html:root body .g22-n.g22-n-cta::before{display:none!important}

/* ==== Bouwtekening (direction A). Layout first: these rules hold with or without motion. ==== */
/* line drawings sit under every picture; the real picture is drawn over them */
html body .g22-p .gx-frame{background:#0c1814 var(--bt-bp) center top/cover no-repeat}
html body .g22-p0 .gx-frame{--bt-bp:url(/g48w/bouw2/img/ankerweg.webp)}
html body .g22-p1 .gx-frame{--bt-bp:url(/g48w/bouw2/img/bruinhart.webp)}
html body .g22-p2 .gx-frame{--bt-bp:url(/g48w/bouw2/img/stilposter.webp)}
html body .g22-p3 .gx-frame{--bt-bp:url(/g48w/bouw2/img/overstek.webp)}
html body .g22-p4 .gx-frame{--bt-bp:url(/g48w/bouw2/img/libi.webp)}
html body .g46-oever .g32-lf{background:#0c1814 url(/g48w/bouw2/img/oever.webp) center/cover no-repeat}
html body .g40-sw .g-print{background:#0c1814 url(/g48w/bouw2/img/stilwater.webp) center/cover no-repeat}
html body .g40-sw .g37-try-d{position:relative;background:#0c1814 url(/g48w/bouw2/img/demo.webp) 0 0/100% 100% no-repeat;border-radius:4px}
html body .g40-ak .g-print{position:relative;background:#0c1814 url(/g48w/bouw2/img/ankerweg.webp) center/cover no-repeat}
html body .g-hm-a .mw-f{background:#0c1814 url(/g48w/bouw2/img/mope-gevel.webp) center/cover no-repeat}
html body .g-hm-b .mw-f{background:#0c1814 url(/g48w/bouw2/img/mope-beker.webp) center/cover no-repeat}
html body .g-team2 .wp-person:nth-child(1) .pt{background:#0c1814 url(/g48w/bouw2/img/team-mo.webp) center/cover no-repeat}
html body .g-team2 .wp-person:nth-child(2) .pt{background:#0c1814 url(/g48w/bouw2/img/team-1.webp) center/cover no-repeat}
html body .g-close-art .g-print{background:#0c1814 url(/g48w/bouw2/img/ondoro.webp) center/cover no-repeat}

/* ---- prices: a staircase. Four packages side by side on one baseline; each step up is more site. ---- */
html:root body #prijzen.gx-room15{display:grid!important;grid-template-columns:minmax(0,1fr) 600px!important;grid-template-rows:auto auto auto auto!important;column-gap:96px!important;row-gap:0!important;padding:150px 64px 110px!important;align-items:start}
html:root body #prijzen .gx-offer{display:contents!important}
html:root body #prijzen .gx-offer h2{grid-column:1;grid-row:1;align-self:end;margin:0 0 28px!important}
html:root body #prijzen .gx-otxt{grid-column:1;grid-row:2;align-self:start;max-width:560px;margin:0!important}
html:root body #prijzen .gx-otxt p{margin:0}
html:root body #prijzen .gx-otxt .gx-acts{margin-top:32px}
html:root body #prijzen .g46-oever{grid-column:2;grid-row:1/3;width:600px!important;margin:0!important;align-self:start}
html:root body #prijzen .g46-oever .g32-lf{display:block;border-radius:10px;overflow:hidden;aspect-ratio:16/10}
html:root body #prijzen .g46-oever .g32-lf img{display:block;width:100%;height:100%;object-fit:cover}
html:root body #prijzen .gx-rail{grid-column:1/-1;grid-row:3;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:end!important;gap:0!important;margin:96px 0 0!important;padding:0!important;width:auto!important;position:relative}
html:root body #prijzen .gx-rail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(143,220,181,.5);transform-origin:0 50%}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row{display:flex!important;flex-direction:column;align-items:flex-start;gap:0;position:relative;isolation:isolate;min-height:var(--bt-h);padding:30px 28px 34px!important;margin:0!important;border:0!important;box-sizing:border-box}
html:root body #prijzen .gx-rail .g45-row:nth-child(1){--bt-h:340px}
html:root body #prijzen .gx-rail .g45-row:nth-child(2){--bt-h:410px}
html:root body #prijzen .gx-rail .g45-row:nth-child(3){--bt-h:480px}
html:root body #prijzen .gx-rail .g45-row:nth-child(4){--bt-h:550px}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row::before{content:""!important;display:block!important;position:absolute;inset:0;z-index:-1;pointer-events:none;border-top:1px solid rgba(143,220,181,.5);border-left:1px solid rgba(143,220,181,.22);background:linear-gradient(180deg,rgba(69,196,139,.10),rgba(69,196,139,.025) 55%,rgba(69,196,139,0));transform-origin:50% 100%}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row:last-child::before{border-right:1px solid rgba(143,220,181,.22)}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row::after{display:none!important}
html:root body #prijzen .g45-row .gx-spot{display:none!important}
html:root body #prijzen .g45-row>*{margin:0!important;grid-area:auto!important;position:static!important;text-align:left!important;justify-self:auto!important}
html:root body #prijzen .g45-row h3{font-size:24px!important;line-height:1.2!important;display:flex;align-items:center;gap:10px}
html:root body #prijzen .g45-row .gx-price{margin-top:14px!important;font-size:44px!important;line-height:1!important;white-space:nowrap}
html:root body #prijzen .g45-row .gx-price .g30-from{font-size:17px}
html:root body #prijzen .g45-row .g45-wl{margin-top:10px!important}
html:root body #prijzen .g45-row .g45-was{display:flex!important;gap:12px;align-items:baseline;position:static!important}
html:root body #prijzen .g45-row .g-save{margin:0!important}
html:root body #prijzen .g45-row>p:not([class]){margin-top:20px!important;font-size:16px;line-height:1.45;max-width:260px}
html:root body #prijzen .g45-row .gx-t{margin-top:auto!important;padding-top:24px}
html:root body #prijzen .g45-row .g22-om-ex{margin-top:6px!important}
html:root body #prijzen .gx-terms{grid-column:1/-1;grid-row:4;margin:28px 0 0!important;max-width:none!important}

/* every section that draws a construction rule */
html body :is(.g37-ex,.g-hmerk,.g-people2,.g-close){position:relative}
.bt-rule{position:absolute;left:64px;right:64px;top:56px;height:1px;background:linear-gradient(90deg,rgba(143,220,181,.42),rgba(143,220,181,.12) 70%,rgba(143,220,181,0));transform-origin:0 50%;pointer-events:none}
/* the construction line that runs along the edge of a drawing */
.bt-lw{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3;border-radius:4px}
.bt-line{position:absolute;inset:0;pointer-events:none;z-index:3}
.bt-line.bt-v{border-left:1px solid rgba(170,240,205,.95);box-shadow:-8px 0 18px -8px rgba(120,220,170,.55)}
.bt-tiles,.bt-bands{position:absolute;inset:0;pointer-events:none;z-index:1}
.bt-tiles{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr)}
.bt-tiles i{display:block;background-image:var(--bt-src);background-size:800% 500%;background-position:calc(var(--c) * 100% / 7) calc(var(--r) * 100% / 4);box-shadow:inset 0 0 0 .5px rgba(143,220,181,.25)}
.bt-bands{display:flex;flex-direction:column}
.bt-bands i{flex:1;display:block;background-image:var(--bt-src);background-size:100% 400%;background-position:0 calc(var(--n) * 100% / 3)}
html:root body #prijzen .g45-row .g22-om-ex .g-tl{display:block;margin-top:2px}
/* overflow:hidden makes a wrapper its own scroller, which freezes view() on the picture inside; clip keeps the corners without that */
html:root body :is(.mw-f,.pt,.wp-f,.g32-lf){overflow:clip!important}

/* ==== g49 bouw2: each section gets its own composition (desktop 1440 first). Loaded after bt-layout.css. ==== */
html:root body :is(.g37-ex,.g-hmerk,.g-people2,.g-close){overflow-x:clip}
html:root body :is(#prijzen h2,.g37-ex-hd h2,.g-hmerk h2,.g-people2 h2){font-size:64px!important;line-height:1.02!important;letter-spacing:-.015em}

/* Overstek: the line drawing under the real screen, like the other examples */
html:root body .g40-ak .g-print{position:relative;background:#0c1814 url(/g48w/bouw2/img/ovs-bp.webp) center top/cover no-repeat}

/* ---- examples: Stilwater as a working stage, Overstek as a wide panorama ---- */
html:root body .g37-ex .g37-ex-hd{margin-bottom:64px!important}
html:root body .g40-ex.g40-sw{display:grid!important;grid-template-columns:minmax(0,4fr) minmax(0,8fr)!important;column-gap:56px!important;align-items:end!important}
html:root body .g40-sw .g40-ex-t{grid-column:1;grid-row:1;align-self:end;max-width:none!important}
html:root body .g40-sw .g37-try-d{grid-column:2;grid-row:1;width:auto!important;max-width:none!important;margin:0!important}
html:root body .g40-ex :is(h3){font-size:34px!important;line-height:1.1!important}

html:root body .g40-ex.g40-ak{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;grid-template-rows:auto auto;column-gap:56px!important;margin-top:150px!important;align-items:start!important}
html:root body .g40-ak .g37-exf{grid-column:1/-1;grid-row:1;width:auto!important;max-width:none!important;margin:0!important;display:block}
html:root body .g40-ak .g-print{display:block;aspect-ratio:16/10;overflow:clip;border-radius:10px!important}
html:root body .g40-ak .g-print img{width:100%!important;height:100%!important;object-fit:cover;object-position:50% 0}
html:root body .g40-ak .g40-ex-t{grid-column:1/-1;grid-row:2;display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:baseline;margin-top:34px!important;max-width:none!important}
html:root body .g40-ak .g40-ex-t .lab{grid-column:1;grid-row:1;margin:0!important}
html:root body .g40-ak .g40-ex-t h3{grid-column:2;grid-row:1;margin:0!important;font-size:44px!important}
html:root body .g40-ak .g40-ex-t .g-tl{grid-column:2;grid-row:2;justify-self:start;margin-top:22px!important}

/* ---- brand: a collage, the shopfront large and the cups laid over its corner ---- */
html:root body .g-hmerk .g-hm{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:auto auto!important;column-gap:32px!important;row-gap:0!important;align-items:start!important}
html:root body .g-hmerk .g-hm-t{grid-column:1/6;grid-row:1;align-self:start;max-width:none!important;padding-top:20px}
html:root body .g-hmerk .g-hm-a{grid-column:6/13;grid-row:1/3;margin:0 calc(-1 * var(--b2-gut,64px)) 0 0!important;width:auto!important;max-width:none!important}
html:root body .g-hmerk .g-hm-a .mw-f{aspect-ratio:4/3;border-radius:10px 0 0 10px!important}
html:root body .g-hmerk .g-hm-b.g-hm-b{grid-column:2/7;grid-row:2;margin:56px 0 0!important;width:auto!important;max-width:none!important;position:relative;z-index:2}
html:root body .g-hmerk .g-hm-b .mw-f{aspect-ratio:3/2;border-radius:10px!important;box-shadow:0 40px 80px -30px rgba(0,0,0,.75)}
html:root body .g-hmerk :is(.g-hm-a,.g-hm-b) .mw-f img{width:100%!important;height:100%!important;object-fit:cover}

/* ---- team: a large headline, the two portraits larger and stepped ---- */
html:root body .g-team2{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:32px!important;align-items:start!important}
html:root body .g-team2>div:first-child{grid-column:1/6;padding-top:40px}
html:root body .g-team2 .wall2{grid-column:6/13;display:grid!important;grid-template-columns:1fr 1fr!important;gap:40px!important;width:auto!important;max-width:none!important;margin:0!important}
html:root body .g-team2 .wp-person{width:auto!important;max-width:none!important;margin:0!important}
html:root body .g-team2 .wp-person:nth-child(2){margin-top:120px!important}
html:root body .g-team2 .pt{display:block;aspect-ratio:4/5;width:100%!important;height:auto!important}
html:root body .g-team2 .pt img{width:100%!important;height:100%!important;object-fit:cover}
html:root body .g-team2 .wl b{font-size:22px}

/* ---- close: the headline spans the page, the last example runs off the right edge ---- */
html:root body .g-close .g-close-in{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:32px!important;row-gap:56px!important;align-items:start!important}
html:root body .g-close .g-close-in>div{display:contents}
html:root body .g-close h2{grid-column:1/-1;grid-row:1;max-width:none!important;font-size:120px!important;line-height:.98!important;letter-spacing:-.02em;margin:0!important;white-space:nowrap}
html:root body .g-close .g-close-in>div>:not(h2){grid-column:1/6}
html:root body .g-close .g-close-in>div>.sub{grid-row:2;margin:0!important;font-size:19px;max-width:30em}
html:root body .g-close .g-close-in>div>.g-acts{grid-row:3;margin:0!important}
html:root body .g-close .g-close-in>div>.g-fine{grid-row:4;margin:0!important}
html:root body .g-close .g-close-art{grid-column:6/13;grid-row:2/6;margin:0!important;width:auto!important;max-width:none!important;display:block}
html:root body .g-close .g-close-art .g-print{display:block;aspect-ratio:16/10;border-radius:10px!important;overflow:clip}
html:root body .g-close .g-close-art .g-print img{width:100%!important;height:100%!important;object-fit:cover;object-position:50% 0}
html:root body .g-hmerk .g-hm-a figcaption{text-align:right;padding-right:calc(var(--b2-gut,64px) + 4px)}

/* g49 colour: richer jade instead of pastel mint; deep brown buttons with a warm gradient */
html:root{--g-mint:#45c48b;--g-mint2:#5fd29c;--mint:#7fd3a6;--sun:#45c48b}
html:root body :is(.g-save,.g-ilab,.g-pk2,.gx-cp span,.g43-ex,.g46-fv-h){color:#7fd3a6!important}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta){background:linear-gradient(172deg,#9a6440 0%,#6e3f24 46%,#4a2818 100%)!important;color:#f8ecdd!important;border:0!important;border-radius:999px!important;box-shadow:inset 0 1px 0 rgba(255,214,170,.34),inset 0 -1px 0 rgba(0,0,0,.35),0 16px 30px -16px rgba(40,16,4,.95)!important;text-shadow:0 1px 0 rgba(40,16,4,.4)}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):hover{background:linear-gradient(172deg,#ab744c 0%,#7c4a2b 46%,#55301d 100%)!important}
html:root body :is(.gx-lnk,.g-tl,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *){background:linear-gradient(172deg,rgba(154,100,64,.20),rgba(74,40,24,.14))!important;box-shadow:inset 0 0 0 1px rgba(214,152,108,.48)!important;color:#f3e6d6!important}
html:root body :is(.gx-lnk,.g-tl,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *):hover{background:linear-gradient(172deg,rgba(154,100,64,.34),rgba(74,40,24,.26))!important}
html:root body .g22-n.g22-n-cta{box-shadow:inset 0 0 0 1px rgba(214,152,108,.55)!important}

/* g49 palette k1b (k1 a shade richer): brown buttons stay; labels, Gratis and lines in warm cinnamon, so the page has two colours on the deep green: wood and cinnamon */
html:root{--mint:#e09c66;--g-mint:#e8a874;--g-mint2:#e8a874;--sun:#e8a874;--g-pop2:#f4b67c;--b2-line:rgba(232,168,116,.55);--b2-scan:rgba(255,218,180,.95);--b2-scan-glow:rgba(230,160,100,.6);--b2-glint:#f6d6b4}
html:root body :is(.lab,.g-hmerk .g-hm-t .lab){color:#e09c66!important}
html:root body .lab::before{background:linear-gradient(90deg,rgba(232,168,116,.2),#e8a874)!important;box-shadow:none!important}
html:root body :is(.g-save,.g-ilab,.g-pk2,.gx-cp span,.g43-ex,.g46-fv-h){color:#e09c66!important}
html:root body .g45-h1 .g45-g{color:#f4b67c!important}
html:root body .st-l .g45-g{-webkit-text-fill-color:#f4b67c}
html:root body .g43-act{color:#f2c79f!important;background:rgba(222,150,100,.16)!important;box-shadow:inset 0 0 0 1px rgba(232,168,116,.45)!important}
html:root body :is(.g-tl,.gx-lnk)::after{background:#e8a874!important}
html:root body #prijzen .gx-rail::after{background:rgba(232,168,116,.55)!important}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row::before{border-top-color:rgba(232,168,116,.55)!important;border-left-color:rgba(232,168,116,.2)!important;background:linear-gradient(180deg,rgba(222,150,100,.10),transparent 60%)!important}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row:last-child::before{border-right-color:rgba(232,168,116,.2)!important}

/* g49 palette sr (Moreno 8 Nov): the Surinamese flag on the site. Deep green stays the ground; flag yellow carries
   the actions (buttons, Gratis, the offer); red is used sparingly, a warm brick red, only in the wordmark and the small
   label dash, never on a button or a warning. Loaded after color.css and pal-k1b.css. */
html:root{--mint:#e9cf72;--g-mint:#f0c93a;--g-mint2:#f0c93a;--sun:#f0c93a;--g-pop2:#f4cf45;--b2-line:rgba(240,201,58,.5);--b2-scan:rgba(255,240,186,.95);--b2-scan-glow:rgba(240,201,58,.55);--b2-glint:#fbe9a6;--sr-red:#cf4a3c}

/* buttons: flag yellow, deep green text */
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta){background:linear-gradient(172deg,#f8dc6a 0%,#efc634 48%,#d6a915 100%)!important;color:#0f2419!important;text-shadow:none!important;box-shadow:inset 0 1px 0 rgba(255,250,214,.7),inset 0 -1px 0 rgba(120,84,0,.35),0 16px 30px -16px rgba(0,0,0,.85)!important}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):hover{background:linear-gradient(172deg,#fbe486 0%,#f3cf4c 48%,#ddb222 100%)!important}
html:root body :is(.gx-lnk,.g-tl,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *){background:rgba(240,201,58,.07)!important;box-shadow:inset 0 0 0 1px rgba(240,201,58,.5)!important;color:#f6efdc!important}
html:root body :is(.gx-lnk,.g-tl,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *):hover{background:rgba(240,201,58,.16)!important}
html:root body .g22-n.g22-n-cta{box-shadow:inset 0 0 0 1px rgba(240,201,58,.6)!important}
html:root body :is(.g-tl,.gx-lnk)::after{background:#f0c93a!important}

/* labels: soft yellow text, a short brick-red dash in front */
html:root body :is(.lab,.g-hmerk .g-hm-t .lab){color:#e9cf72!important}
html:root body .lab::before{background:var(--sr-red)!important;box-shadow:none!important}
html:root body :is(.g-save,.g-ilab,.g-pk2,.gx-cp span,.g43-ex,.g46-fv-h){color:#e9cf72!important}

/* Gratis and the offer chip in flag yellow */
html:root body .g45-h1 .g45-g{color:#f4cf45!important}
html:root body .st-l .g45-g{-webkit-text-fill-color:#f4cf45}
html:root body .g43-act{color:#f8dc6a!important;background:rgba(240,201,58,.13)!important;box-shadow:inset 0 0 0 1px rgba(240,201,58,.5)!important}

/* the price staircase: yellow lines, a warm yellow fill on hover */
html:root body #prijzen .gx-rail::after{background:rgba(240,201,58,.5)!important}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row::before{border-top-color:rgba(240,201,58,.5)!important;border-left-color:rgba(240,201,58,.18)!important;background:linear-gradient(180deg,rgba(240,201,58,.08),transparent 60%)!important}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row:last-child::before{border-right-color:rgba(240,201,58,.18)!important}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row:hover::before{background:linear-gradient(180deg,rgba(240,201,58,.2),rgba(240,201,58,.05) 60%,rgba(240,201,58,0))!important;border-top-color:rgba(255,232,150,.95)!important}

/* g49 palette sr2 (Moreno 8 Nov): yellow a touch deeper, buttons get a fresher, clearly visible gradient. Loaded after pal-sr.css. */
html:root{--mint:#e3c564;--g-mint:#ebc22f;--g-mint2:#ebc22f;--sun:#ebc22f;--g-pop2:#efc83a;--b2-line:rgba(235,194,47,.5);--b2-scan-glow:rgba(235,194,47,.55)}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta){background:linear-gradient(165deg,#ffe896 0%,#f6d24c 32%,#e8b927 66%,#cc960c 100%)!important;color:#0f2419!important;box-shadow:inset 0 1px 0 rgba(255,252,226,.85),inset 0 -2px 0 rgba(150,98,0,.35),0 14px 28px -14px rgba(0,0,0,.85),0 0 0 1px rgba(160,110,0,.35)!important}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):hover{background:linear-gradient(165deg,#fff0b4 0%,#f9da62 32%,#edc236 66%,#d6a014 100%)!important}
html:root body :is(.lab,.g-hmerk .g-hm-t .lab,.g-save,.g-ilab,.g-pk2,.gx-cp span,.g43-ex,.g46-fv-h){color:#e3c564!important}
html:root body :is(.gx-lnk,.g-tl,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *){box-shadow:inset 0 0 0 1px rgba(235,194,47,.5)!important}
html:root body .g22-n.g22-n-cta{box-shadow:inset 0 0 0 1px rgba(235,194,47,.6)!important}
html:root body :is(.g-tl,.gx-lnk)::after{background:#ebc22f!important}
/* Gratis carries the same gradient as the buttons */
html:root body .g45-h1 .g45-g,html:root body .st-l .g45-g{background:linear-gradient(170deg,#ffe58a 10%,#f0c83a 50%,#d7a414 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
html:root body .g43-act{color:#f3d35a!important;background:rgba(235,194,47,.13)!important;box-shadow:inset 0 0 0 1px rgba(235,194,47,.5)!important}
html:root body #prijzen .gx-rail::after{background:rgba(235,194,47,.5)!important}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row::before{border-top-color:rgba(235,194,47,.5)!important}

/* ==== g49 bouw2 motion: Bouwtekening builds, Stroming carries everything in from the side, Lichtval passes a light over it.
   Transform, translate, opacity, clip-path and background-position only. Reduced motion shows the final state. ==== */
@keyframes bt-write{from{clip-path:inset(-12% 100% -24% 0)}to{clip-path:inset(-12% 0 -24% 0)}}
@keyframes bt-fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bt-develop-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes bt-show{from{visibility:hidden}to{visibility:visible}}
@keyframes bt-scan-down{0%{transform:translateY(0);opacity:0}6%{opacity:1}90%{opacity:1}100%{transform:translateY(100%);opacity:0}}
@keyframes bt-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes bt-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bt-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes bt-in{from{opacity:0}to{opacity:1}}
@keyframes bt-wipe-x{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes bt-scan-x{0%{transform:translateX(0);opacity:0}4%{opacity:1}92%{opacity:1}100%{transform:translateX(100%);opacity:0}}
@keyframes bt-circle{from{clip-path:circle(0% at var(--bt-o))}to{clip-path:circle(85% at var(--bt-o))}}
@keyframes bt-col{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes bt-band{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes bt-last{0%,97%{opacity:0}100%{opacity:1}}
@keyframes bt-lift{from{translate:0 0;opacity:1}to{translate:0 -110px;opacity:.15}}
@keyframes st-drift{from{translate:var(--st-x,0px) var(--st-y,0px);opacity:0}}
@keyframes st-in{from{translate:var(--st-x,0px) 0;opacity:0}}
@keyframes st-open{to{translate:var(--st-o,0px) 0}}
@keyframes st-par{from{translate:var(--st-f) 0}to{translate:var(--st-t) 0}}
@keyframes st-names{from{translate:8vw -50%}to{translate:-46vw -50%}}
@keyframes st-close{from{translate:28vw 0;scale:1.35}}
@keyframes lv-sweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes lv-glow{from{opacity:0;scale:.84}to{opacity:.62;scale:1}}
@keyframes lv-in{from{opacity:0}to{opacity:1}}

/* the light that passes over a headline; at rest the headline is plain cream */
.b2-lt{background:linear-gradient(100deg,#f3eee4 0 34%,#ffffff 42%,var(--b2-glint,#f1d9bd) 45%,#6b6a62 56% 100%);background-size:300% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent!important}
.b2-lt em{color:inherit!important;background:inherit;-webkit-background-clip:text;background-clip:text}

/* the light on the packages and behind the work */
.lv-sp-box{position:relative;isolation:isolate}
.lv-spill{position:absolute;inset:-26% -15%;z-index:-1;pointer-events:none;background:center/100% 100% no-repeat;opacity:.62;-webkit-mask:radial-gradient(closest-side,#000 52%,transparent);mask:radial-gradient(closest-side,#000 52%,transparent)}
.lv-rim{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit}
.g-team2 .wp-person:first-child .lv-rim{box-shadow:inset -2px 0 0 rgba(255,228,196,.42),inset -110px 0 80px -80px rgba(240,196,150,.26)}
.g-team2 .wp-person:last-child .lv-rim{box-shadow:inset 2px 0 0 rgba(255,228,196,.42),inset 110px 0 80px -80px rgba(240,196,150,.26)}
html:root body .gx-rail .g45-row>*{transition:opacity .7s ease}
html.b2-on body .gx-rail.lv-focus .g45-row:not(.lv-lit)>*{opacity:.45!important}
html:root body .gx-rail .gx-label.g45-row.g45-row::before{transition:background .8s ease,border-color .8s ease}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row.lv-lit::before{background:linear-gradient(180deg,rgba(214,152,108,.26),rgba(214,152,108,.06) 60%,rgba(214,152,108,0))!important;border-top-color:var(--b2-scan,rgba(232,180,136,.9))!important}
html:root body #prijzen .gx-rail .g45-row.lv-lit .gx-price{color:#fffaf0}

/* start offsets for everything that flows in */
html:root body .gx-offer>h2{--st-x:-60px}
html:root body .g46-oever{--st-x:-90px}
html:root body .gx-rail>.g45-row:nth-child(1){--st-x:150px}
html:root body .gx-rail>.g45-row:nth-child(2){--st-x:200px}
html:root body .gx-rail>.g45-row:nth-child(3){--st-x:250px}
html:root body .gx-rail>.g45-row:nth-child(4){--st-x:300px}
html:root body .g37-ex-hd{--st-x:-90px}
html:root body .g40-sw .g40-ex-t{--st-x:-110px}
html:root body .g37-try-d{--st-x:240px}
html:root body .g40-ak .g37-exf{--st-x:320px}
html:root body .g40-ak .g40-ex-t{--st-x:-120px}
html:root body .g37-ex-all{--st-x:-70px}
html:root body .g-hm-t{--st-x:-70px}
html:root body .g-team2>div:first-child{--st-x:-80px}
html:root body .g-close-in>div>:not(h2){--st-x:-60px}
html:root body .g-close-art{--st-x:260px}

/* team: the two names as one quiet line behind the portraits */
html:root body .g-people2{position:relative}
html:root body .g-people2>.wrap{position:relative;z-index:1}
.st-names{position:absolute;left:0;top:62%;z-index:0;margin:0;white-space:nowrap;font-size:230px;line-height:1;font-weight:400;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px rgba(243,238,228,.085);pointer-events:none;user-select:none;translate:6vw -50%}
.st-names i{display:inline-block;width:.6em}
.st-l{display:block}

@media (prefers-reduced-motion:no-preference){
  /* hero on load: the prints drift in from both banks and are built from their drawing, centre first */
  html:root body .gx-hall .gx-print>span{animation:st-drift 2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*.11s + .1s)}
  html:root body .g22-p0>span{--st-x:-220px}
  html:root body .g22-p1>span{--st-x:-140px}
  html:root body .g22-p2>span{--st-x:0px;--st-y:28px}
  html:root body .g22-p3>span{--st-x:140px}
  html:root body .g22-p4>span{--st-x:220px}
  html:root body .g22-p2{--bt-dl:1.0s}
  html:root body :is(.g22-p1,.g22-p3){--bt-dl:1.45s}
  html:root body :is(.g22-p0,.g22-p4){--bt-dl:1.85s}
  html:root body .g22-p .gx-frame>:is(img,video){animation:bt-develop-down 1.7s cubic-bezier(.65,0,.25,1) var(--bt-dl) both}
  html:root body .g22-p .gx-frame::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-top:1px solid var(--b2-scan,rgba(175,240,208,.95));box-shadow:0 -10px 22px -10px var(--b2-scan-glow,rgba(120,220,170,.7));animation:bt-scan-down 1.7s cubic-bezier(.65,0,.25,1) var(--bt-dl) both}
  html:root body .g22-p .gx-refl{animation:bt-show .01s linear calc(var(--bt-dl) + 1.3s) backwards}
  /* the headline: two lines settle from opposite sides, then a light passes over each */
  html:root body .g22-h1.st-split{animation:none!important;opacity:1!important}
  .st-l{display:block;animation:st-drift 1.7s cubic-bezier(.16,1,.3,1) both,lv-sweep 2.6s cubic-bezier(.45,0,.3,1) 1s both}
  .st-l:nth-child(1){--st-x:-64px}
  .st-l:nth-child(2){--st-x:64px;animation-delay:.14s,1.25s}
  html:root body .g22-side{animation:bt-fadeup .9s cubic-bezier(.2,.7,.2,1) .9s both}

  @supports (animation-timeline:view()){
    html.b2-on body [data-rv]>*,html.b2-on body .rise{opacity:1!important;translate:none!important;transform:none;transition:none!important}

    /* hero: the headline lifts away and the fan opens a little wider as you leave */
    html.b2-on body .g47-head{animation:bt-lift linear both;animation-timeline:scroll(root);animation-range:0 760px}
    html.b2-on body .gx-hall .gx-print{animation:st-open linear both;animation-timeline:scroll(root block);animation-range:0px 760px}
    html:root body .g22-p0{--st-o:-64px}
    html:root body .g22-p1{--st-o:-34px}
    html:root body .g22-p3{--st-o:34px}
    html:root body .g22-p4{--st-o:64px}

    html.b2-on .bt-rule{animation:bt-draw linear both;animation-timeline:view();animation-range:cover 0% cover 30%}

    /* section headlines: they flow in, are written, and a light passes over them */
    html.b2-on body :is(.g37-ex-hd h2,.g-hmerk h2,.g-people2 h2){animation:bt-write linear both,lv-sweep linear both;animation-timeline:view(),view();animation-range:cover 4% cover 26%,cover 14% cover 42%}
    html.b2-on body #prijzen h2{animation:bt-write linear both,st-in linear both,lv-sweep linear both;animation-timeline:view(),view(),view();animation-range:cover 4% cover 26%,entry 0% entry 85%,cover 14% cover 42%}

    /* every block flows in from its side and comes to rest exactly in the grid */
    html.b2-on body :is(.g46-oever,.gx-rail>.g45-row,.g37-ex-hd,.g40-sw .g40-ex-t,.g37-try-d,.g40-ak .g37-exf,.g40-ak .g40-ex-t,.g37-ex-all,.g-hm-t,.g-team2>div:first-child){animation:st-in linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
    html.b2-on body .g37-try-d{animation-range:entry 0% entry 55%}
    html.b2-on body .g40-ak .g37-exf{animation-range:entry 0% entry 70%}

    /* prices: baseline first, then four steps rise from it, left to right, then their text */
    html.b2-on body #prijzen .gx-rail{view-timeline:--bt-rail block}
    html.b2-on body #prijzen .gx-rail::after{animation:bt-draw linear both;animation-timeline:--bt-rail;animation-range:cover 0% cover 14%}
    html.b2-on body #prijzen .gx-rail .gx-label.g45-row.g45-row::before{animation:bt-grow linear both;animation-timeline:--bt-rail}
    html.b2-on body #prijzen .g45-row>*{animation:bt-rise linear both;animation-timeline:--bt-rail}
    html.b2-on body #prijzen .gx-rail .gx-label.g45-row:nth-child(1)::before{animation-range:cover 6% cover 22%}
    html.b2-on body #prijzen .gx-rail .gx-label.g45-row:nth-child(2)::before{animation-range:cover 10% cover 26%}
    html.b2-on body #prijzen .gx-rail .gx-label.g45-row:nth-child(3)::before{animation-range:cover 14% cover 30%}
    html.b2-on body #prijzen .gx-rail .gx-label.g45-row:nth-child(4)::before{animation-range:cover 18% cover 34%}
    html.b2-on body #prijzen .g45-row:nth-child(1)>*{animation-range:cover 16% cover 26%}
    html.b2-on body #prijzen .g45-row:nth-child(2)>*{animation-range:cover 20% cover 30%}
    html.b2-on body #prijzen .g45-row:nth-child(3)>*{animation-range:cover 24% cover 34%}
    html.b2-on body #prijzen .g45-row:nth-child(4)>*{animation-range:cover 28% cover 38%}
    html.b2-on body #prijzen .g46-oever .g32-lf img{animation:bt-wipe-x linear both;animation-timeline:view();animation-range:cover 8% cover 34%}
    html.b2-on body #prijzen .gx-otxt{animation:bt-rise linear both;animation-timeline:view();animation-range:cover 6% cover 22%}

    /* Stilwater: the booking demo is drawn first, then a line runs across it and builds the real thing */
    html.b2-on body .g40-sw{view-timeline:--bt-sw block}
    html.b2-on body .g40-sw .awd{animation:bt-wipe-x linear both;animation-timeline:--bt-sw;animation-range:cover 12% cover 42%}
    html.b2-on body .g40-sw .g37-try-d .bt-line{animation:bt-scan-x linear both;animation-timeline:--bt-sw;animation-range:cover 12% cover 42%}
    html.b2-on body .g40-sw .g-print img{animation:bt-in linear both;animation-timeline:--bt-sw;animation-range:cover 6% cover 26%}

    /* Overstek: the facade goes up column by column, left to right, over its drawing */
    html.b2-on body .g40-ak{view-timeline:--bt-ak block}
    html.b2-on body .g40-ak .bt-cols i{animation:bt-col linear both;animation-timeline:--bt-ak;animation-range:cover calc(8% + var(--d) * 22%) cover calc(20% + var(--d) * 22%)}
    html.b2-on body .g40-ak .g-print img{animation:bt-last linear both;animation-timeline:--bt-ak;animation-range:cover 8% cover 44%}

    /* brand: the photographs grow out of the logo and drift at different speeds */
    html.b2-on body .g-hm-a .mw-f{--bt-o:57% 25%}
    html.b2-on body .g-hm-b .mw-f{--bt-o:34% 63%}
    html.b2-on body .g-hmerk .mw-f img{animation:bt-circle linear both;animation-timeline:view();animation-range:cover 10% cover 46%}
    html.b2-on body :is(.g-hm-a,.g-hm-b.g-hm-b){animation:st-par linear both;animation-timeline:view();animation-range:cover}
    html:root body .g-hm-a{--st-f:30px;--st-t:-20px}
    html:root body .g-hm-b.g-hm-b{--st-f:90px;--st-t:-90px}
    html.b2-on body .g-hmerk :is(.g-hm-t>p,figcaption){animation:bt-rise linear both;animation-timeline:view();animation-range:cover 6% cover 24%}

    /* team: portraits develop like a photograph, a rim of light comes up, the names drift behind */
    html.b2-on body .g-team2 .pt img{animation:bt-in linear both;animation-timeline:view();animation-range:cover 12% cover 40%}
    html.b2-on body .g-team2 .wp-person:nth-child(2) .pt img{animation-range:cover 18% cover 46%}
    html.b2-on body .g-team2 figcaption{animation:bt-rise linear both;animation-timeline:view();animation-range:cover 8% cover 26%}
    html.b2-on .lv-rim{animation:lv-in linear both;animation-timeline:view();animation-range:entry 40% cover 60%}
    .st-names{animation:st-names linear both;animation-timeline:view();animation-range:cover}

    /* close: the headline arrives large from the right and settles; Ondoro is stacked band by band */
    html.b2-on body .g-close{view-timeline:--stc block}
    html.b2-on body .g-close h2{position:relative;z-index:2;transform-origin:0 50%;animation:st-close linear both,lv-sweep linear both;animation-timeline:--stc,--stc;animation-range:entry 5% entry 72%,entry 50% cover 50%}
    html.b2-on body :is(.g-close-in>div>:not(h2),.g-close-art){animation:st-in linear both;animation-timeline:--stc;animation-range:entry 55% entry 100%}
    html.b2-on body .g-close-art{animation-range:entry 62% entry 100%}
    html.b2-on body .g-close-art{view-timeline:--bt-cl block}
    html.b2-on body .g-close-art .bt-bands i{animation:bt-band linear both;animation-timeline:--bt-cl;animation-range:cover calc(8% + var(--n) * 7%) cover calc(22% + var(--n) * 7%)}
    html.b2-on body .g-close-art .g-print img{animation:bt-last linear both;animation-timeline:--bt-cl;animation-range:cover 8% cover 44%}

    html.b2-on .lv-spill{animation:lv-glow linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
  }
}

/* builders */
html body :is(.g37-ex,.g-hmerk,.g-people2,.g-close){position:relative}
.bt-rule{position:absolute;left:64px;right:64px;top:56px;height:1px;background:linear-gradient(90deg,var(--b2-line,rgba(143,220,181,.42)),rgba(143,220,181,0) 70%);transform-origin:0 50%;pointer-events:none}
.bt-lw{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3;border-radius:4px}
.bt-line{position:absolute;inset:0;pointer-events:none;z-index:3}
.bt-line.bt-v{border-left:1px solid var(--b2-scan,rgba(170,240,205,.95));box-shadow:-8px 0 18px -8px var(--b2-scan-glow,rgba(120,220,170,.55))}
.bt-cols,.bt-bands{position:absolute;inset:0;pointer-events:none;z-index:1}
.bt-cols{display:grid;grid-template-columns:repeat(8,1fr)}
.bt-cols i{display:block;background-image:var(--bt-src);background-size:800% auto;background-position:calc(var(--c) * 100% / 7) 0;box-shadow:inset 1px 0 0 rgba(255,255,255,.06)}
.bt-bands{display:flex;flex-direction:column}
.bt-bands i{flex:1;display:block;background-image:var(--bt-src);background-size:100% 400%;background-position:0 calc(var(--n) * 100% / 3)}

/* ==== g49 bouw3 (Moreno 8 Nov): no negative line drawings under the photos; photos come out of the dark as light falls on them; every package stays readable. Loaded after b2-motion.css. ==== */

/* the photos rest on plain dark, never on their line drawing */
html body :is(.g22-p .gx-frame,.g46-oever .g32-lf,.g40-sw .g-print,.g40-sw .g37-try-d,.g40-ak .g-print,.g-hm-a .mw-f,.g-hm-b .mw-f,.g-team2 .wp-person .pt,.g-close-art .g-print){background:#0c1814!important}

/* the light comes up from below over the photo: a dark veil withdraws upwards, the photo settles from slightly larger */
@keyframes lv-veil{from{translate:0 0}to{translate:0 -100%}}
@keyframes lv-settle{from{scale:1.08}to{scale:1}}
.lv-vbox{position:relative;overflow:clip}
.lv-veil{position:absolute;left:0;right:0;top:0;height:200%;z-index:4;pointer-events:none;background:linear-gradient(180deg,#0b1511 0 50%,rgba(11,21,17,.85) 62%,rgba(11,21,17,0) 100%)}
html:not(.b2-on) .lv-veil{display:none}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.b2-on body .lv-vbox{view-timeline:--lvv block}
    html.b2-on body .lv-vbox .lv-veil{animation:lv-veil linear both;animation-timeline:--lvv;animation-range:cover 8% cover 42%}
    html.b2-on body .lv-vbox img{opacity:1!important;animation:lv-settle linear both!important;animation-timeline:--lvv!important;animation-range:cover 8% cover 48%!important}
    html.b2-on body .g-team2 .wp-person:nth-child(2) .lv-veil{animation-range:cover 14% cover 48%}
  }
}

/* packages: all four stay fully readable while you scroll; the one under the pointer lights up */
html:root body #prijzen .gx-rail .g45-row>*{opacity:1}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row::before{transition:background .35s ease,border-color .35s ease}
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row:hover::before{background:linear-gradient(180deg,rgba(214,152,108,.24),rgba(214,152,108,.06) 60%,rgba(214,152,108,0))!important;border-top-color:rgba(255,214,176,.9)!important}

/* ==== g49 bouw4 (Moreno 8 Nov): no frame before the photo. Nothing stands behind a photo while it appears; its frame,
   shadow and gloss arrive with it. Loaded after b3-fix.css (replaces its plate and veil). ==== */
html body :is(.g22-p .gx-frame,.g46-oever .g32-lf,.g40-sw .g-print,.g40-sw .g37-try-d,.g40-ak .g-print,.g-hm-a .mw-f,.g-hm-b .mw-f,.g-team2 .wp-person .pt,.g-close-art .g-print){background:transparent!important}
.lv-veil{display:none!important}
html body .g-team2 .wp-f{background:transparent!important}
html body .lv-vbox{overflow:visible}

/* the whole frame is revealed, shadow included, so no empty box shows first */
@keyframes b4-dev{0%{clip-path:inset(-90px -90px 100% -90px)}88%{clip-path:inset(-90px -90px 0 -90px)}100%{clip-path:inset(-90px -90px -140px -90px)}}
@keyframes b4-wipe{0%{clip-path:inset(-90px 100% -140px -90px)}100%{clip-path:inset(-90px -90px -140px -90px)}}
@keyframes b4-circle{from{clip-path:circle(0% at var(--bt-o))}to{clip-path:circle(160% at var(--bt-o))}}
@keyframes b4-frame{0%,96%{box-shadow:none}}
/* the photo rises out of nothing from below; at the very end the mask lets go so the shadow can show */
@keyframes b4-rise{
  0%{-webkit-mask-image:linear-gradient(180deg,transparent 0 50%,#000 62% 100%);mask-image:linear-gradient(180deg,transparent 0 50%,#000 62% 100%);-webkit-mask-position:0 0;mask-position:0 0}
  99.8%{-webkit-mask-image:linear-gradient(180deg,transparent 0 50%,#000 62% 100%);mask-image:linear-gradient(180deg,transparent 0 50%,#000 62% 100%);-webkit-mask-position:0 100%;mask-position:0 100%}
  100%{-webkit-mask-image:none;mask-image:none}}

@media (prefers-reduced-motion:no-preference){
  /* hero prints: the frame itself is developed top to bottom behind the line of light */
  html:root body .g22-p .gx-frame>:is(img,video){animation:none!important}
  html:root body .g22-p .gx-frame{animation:b4-dev 1.7s cubic-bezier(.65,0,.25,1) var(--bt-dl) both}

  @supports (animation-timeline:view()){
    html.b2-on body :is(.lv-vbox){-webkit-mask-size:100% 200%;mask-size:100% 200%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:b4-rise linear both;animation-timeline:--lvv;animation-range:cover 8% cover 46%}
    html.b2-on body .g-team2 .wp-person:nth-child(2) .lv-vbox{animation-range:cover 14% cover 50%}

    /* Oever: the whole print is wiped in, not the photo inside a waiting frame */
    html.b2-on body #prijzen .g46-oever .g32-lf img{animation:none!important}
    html.b2-on body #prijzen .g46-oever .g32-lf{animation:b4-wipe linear both;animation-timeline:view();animation-range:cover 8% cover 34%}

    /* Overstek and Ondoro: the columns and bands stand on nothing; the frame's shadow and gloss arrive with the finished picture */
    html.b2-on body .g40-ak .g-print{animation:b4-frame linear both;animation-timeline:--bt-ak;animation-range:cover 8% cover 44%}
    html.b2-on body .g40-ak .g-print::before,html.b2-on body .g40-ak .g-print::after{animation:bt-last linear both;animation-timeline:--bt-ak;animation-range:cover 8% cover 44%}
    html.b2-on body .g-close-art .g-print{animation:b4-frame linear both;animation-timeline:--bt-cl;animation-range:cover 8% cover 44%}
    html.b2-on body .g-close-art .g-print::before,html.b2-on body .g-close-art .g-print::after{animation:bt-last linear both;animation-timeline:--bt-cl;animation-range:cover 8% cover 44%}

    /* Mopé: the photographs grow out of a point as a circle, frame and shadow included */
    html.b2-on body .g-hmerk .mw-f img{animation:none!important}
    html.b2-on body .g-hmerk .mw-f{animation:b4-circle linear both;animation-timeline:view();animation-range:cover 8% cover 58%}
  }
}

/* ==== g49 bouw6 (Moreno 8 Nov): buttons and navigation of our own; the flag ribbon closes the page on the footer's bottom line. Loaded last. ==== */

/* primary: flag-yellow pill with a deep green arrow chip; on hover the arrow moves on and the light passes */
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(#x){display:inline-flex!important;align-items:center;gap:16px;padding:0 8px 0 28px!important;height:56px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(#x)::after{content:""!important;display:block!important;opacity:1!important;flex:none;width:40px;height:40px;margin:0!important;border-radius:50%;-webkit-mask:none!important;mask:none!important;background:#10271c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='%23f2cd45' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;transition:background-position .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(#x):hover{transform:translateY(-1px);background:linear-gradient(165deg,#fff0b4 0%,#f9da62 32%,#edc236 66%,#d6a014 100%)!important;color:#0f2419!important}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(#x):hover::after{transform:rotate(-45deg)}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(#x):focus-visible{outline:2px solid #f2cd45;outline-offset:3px}

/* secondary: a text link with a drawn line and an arrow, no second pill next to the main button */
html:root body :is(.gx-lnk,.g-tl,.link.g46-na,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *):not(#x){display:inline-flex!important;align-items:center;gap:10px;padding:0 2px!important;border-radius:0!important;box-shadow:none!important;color:#f6efdc!important;font-weight:600;background:linear-gradient(#ebc22f,#ebc22f) left calc(50% + .95em)/100% 1px no-repeat!important;transition:color .25s,background-size .35s cubic-bezier(.2,.8,.2,1)}
html:root body :is(.gx-lnk,.g-tl,.link.g46-na,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *):not(#x)::after{content:""!important;display:block!important;opacity:1!important;flex:none;width:16px;height:16px;background:#ebc22f!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h12M10.5 5 15.5 10 10.5 15' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h12M10.5 5 15.5 10 10.5 15' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
html:root body :is(.gx-lnk,.g-tl,.link.g46-na,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *):not(#x):hover{color:#f6d462!important;background-size:0% 1px!important}
html:root body :is(.gx-lnk,.g-tl,.link.g46-na,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *):not(#x):hover::after{transform:translateX(5px)}

/* navigation: the links sit in one dark capsule; a yellow line glides to the link under the pointer; Contact is the yellow action */
html:root body .g22-nav{position:relative;align-items:center;gap:2px;padding:5px 5px 5px 10px;border-radius:999px;background:#0d1c16;box-shadow:inset 0 0 0 1px rgba(246,239,220,.1),0 18px 40px -24px rgba(0,0,0,.9)}
html:root body .g22-nav .g22-n:not(.g22-n-cta){color:#e9e3d4;transition:color .2s}
html:root body .g22-nav .g22-n:not(.g22-n-cta):hover,html:root body .g22-nav .g22-n[aria-expanded="true"]{color:#fff6dc}
html:root body .g22-nav .g22-n:not(.g22-n-cta)::before{background:none!important;box-shadow:none!important}
.nv-ind{position:absolute;left:0;bottom:6px;height:2px;width:var(--w,0px);border-radius:2px;background:#ebc22f;transform:translateX(var(--x,0px));opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(.2,.8,.2,1),width .38s cubic-bezier(.2,.8,.2,1),opacity .2s}
.g22-nav.nv-on .nv-ind{opacity:1}
html:root body .g22-nav .g22-n.g22-n-cta:not(#x){margin-left:8px;padding:0 18px!important;height:38px;display:inline-flex;align-items:center;border-radius:999px;font-weight:650;font-size:15px;color:#0f2419!important;background:linear-gradient(165deg,#ffe896 0%,#f6d24c 32%,#e8b927 66%,#cc960c 100%)!important;box-shadow:inset 0 1px 0 rgba(255,252,226,.85),0 0 0 1px rgba(160,110,0,.35)!important}
html:root body .g22-nav .g22-n.g22-n-cta:not(#x):hover{background:linear-gradient(165deg,#fff0b4 0%,#f9da62 32%,#edc236 66%,#d6a014 100%)!important}

/* footer: the flag ribbon is the last line of the page, right above the address line; the address line sits closer */
html:root body footer.gf .legal-line:not(#x){margin-top:48px!important;padding-top:0!important;border-top:0!important}
html:root body footer.gf .legal-line:not(#x)::before{content:"";display:block;height:10px;margin-bottom:24px;background:linear-gradient(180deg,#3d9455 0 20%,#efe9dc 20% 30%,#c4453a 30% 70%,#efe9dc 70% 80%,#3d9455 80% 100%);border-radius:1px}

/* ==== g49 bouw7 (Moreno 8 Nov): the header never becomes a full bar; the logo floats without a background; the nav pill
   floats and blends with the page; the second action is a word with a ring arrow, no underline; no names behind the team. Loaded after b6-custom.css. ==== */

/* header: no solid bar when you scroll back up, only the floating logo and pill */
html:root body .gh.g37-solid:not(#x),html:root body .gh:not(#x){background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important}
html:root body .gh .gh-wm:not(#x){background:none!important;box-shadow:none!important}
html:root body .gh .gh-wm img{filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}

/* the pill: a soft dark tint with blur so it floats over whatever is behind, more room inside */
html:root body .g22-nav:not(#x){gap:4px;padding:7px 7px 7px 14px;background:rgba(11,24,18,.46);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);box-shadow:inset 0 0 0 1px rgba(246,239,220,.13),inset 0 1px 0 rgba(255,255,255,.06),0 20px 44px -26px rgba(0,0,0,.9)}
html:root body .g22-nav .g22-n:not(.g22-n-cta):not(#x){padding:11px 18px!important}
html:root body .g22-nav .nv-ind{bottom:8px}
html:root body .g22-nav .g22-n.g22-n-cta:not(#x){height:42px;padding:0 20px!important;margin-left:10px}

/* second action: the words, then a small ring with the arrow; on hover the ring fills yellow */
html:root body :is(.gx-lnk,.g-tl,.link.g46-na,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *):not(#x){background:none!important;gap:14px}
html:root body :is(.gx-lnk,.g-tl,.link.g46-na,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *):not(#x)::after{width:36px;height:36px;border-radius:50%;-webkit-mask:none!important;mask:none!important;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='%23ebc22f' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat!important;box-shadow:inset 0 0 0 1px rgba(235,194,47,.55)!important;transition:background-color .3s,box-shadow .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
html:root body :is(.gx-lnk,.g-tl,.link.g46-na,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *):not(#x):hover{color:#fff6dc!important}
html:root body :is(.gx-lnk,.g-tl,.link.g46-na,.g-close-in a:not(.g37-cta,.g37-req,.gx-btn,:has(img),:has(video))):not(.g45-row *,.pk-rows *):not(#x):hover::after{transform:translateX(4px);background:#ebc22f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='%230f2419' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat!important;box-shadow:inset 0 0 0 1px #ebc22f!important}

/* team: only the names on the cards */
.st-names{display:none!important}

/* close: both actions on one line, like in the hero */
html:root body .g-close .g-close-in>div>.g-acts:not(#x){display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:30px!important}

/* ==== g49 bouw8 (Moreno 8 Nov): one centred pill, the logo in its middle, three links left and three right. Loaded after b7-fix.css. ==== */
html:root body .gh.gh-mid:not(#x){display:flex!important;justify-content:center!important;align-items:center}
html:root body .gh-mid .g22-nav:not(#x){display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0;padding:7px 7px 7px 7px;margin:0 auto!important}
html:root body .gh-mid .nv-l,html:root body .gh-mid .nv-r{display:flex;align-items:center;gap:4px}
html:root body .gh-mid .nv-l{justify-content:flex-end;padding-left:8px}
html:root body .gh-mid .nv-r{justify-content:flex-start}
html:root body .gh-mid .nv-wm:not(#x){display:flex;align-items:center;padding:0 30px;margin:0!important;position:static!important}
html:root body .gh-mid .nv-wm img{height:27px;width:auto;filter:none}
html:root body .gh-mid .nv-r .g22-n-cta:not(#x){margin-left:8px}
html:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x){padding:11px 17px!important}

/* the menus under Diensten and Over SuriWeb: a solid dark panel in the same pill language, nothing reads through */
html:root body .gh .g22-dd-m:not(#x){background:#0f1f18!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;border-radius:18px!important;box-shadow:inset 0 0 0 1px rgba(246,239,220,.12),0 30px 60px -28px rgba(0,0,0,.95)!important;padding:10px!important;margin-top:10px!important}
html:root body .gh .g22-dd-m a:not(#x){border-radius:12px;padding:12px 16px!important;transition:background .2s}
html:root body .gh .g22-dd-m a:not(#x):hover{background:rgba(235,194,47,.09)!important}
html:root body .gh .g22-dd-m a b{font-style:normal;color:#fff6dc}
html:root body .gh .g22-dd-m .g24-mf a{color:#ebc22f!important}

/* ==== g49 bouw9 (Moreno 8 Nov): Over ons, Websites and Contact in the language of the home page.
   Large headlines with the passing light, portraits that rise out of nothing, blocks that flow in, cards of our own. ==== */

/* type */
html.b9-sub body main h1:not(#x){font-size:96px!important;line-height:.98!important;letter-spacing:-.022em!important}
html.b9-sub body main h2.b2-lt:not(.pk-h):not(#x){font-size:64px!important;line-height:1.02!important;letter-spacing:-.015em}
html.b9-sub body main h1 .st-l{display:block}

/* portraits on the first screen rise from nothing once the page has loaded */
html.b9-sub body .b9-load:not(#x){background:transparent!important}
@media (prefers-reduced-motion:no-preference){
  html.b9-sub body .b9-load{-webkit-mask-size:100% 200%;mask-size:100% 200%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:b4-rise 1.5s cubic-bezier(.2,.7,.2,1) .7s both}
  html.b9-sub body .b9-load+*,html.b9-sub body figure:has(.b9-load) figcaption{animation:bt-fadeup .9s cubic-bezier(.2,.7,.2,1) 1.5s both}
  html.b9-sub body figure:nth-of-type(2) .b9-load{animation-delay:.95s}
  html.b9-sub body main :is(.g-roomo-t,.g37-open-t)>:not(h1){animation:bt-fadeup .9s cubic-bezier(.2,.7,.2,1) .5s both}
  html.b9-sub body .g37-card{animation:st-drift 1.4s cubic-bezier(.16,1,.3,1) .35s both;--st-x:90px}

  @supports (animation-timeline:view()){
    html.b2-on.b9-sub body main h2.b2-lt{animation:bt-write linear both,lv-sweep linear both;animation-timeline:view(),view();animation-range:cover 4% cover 26%,cover 14% cover 42%}
    html.b2-on.b9-sub body :is(.g46-story-t,.g-prop14,.g-invite .wrap>*,.g-vac-inv .wrap>*,.pk-end-in>*,.faq-main>*){animation:st-in linear both;animation-timeline:view();animation-range:entry 0% entry 80%;--st-x:70px}
    html.b2-on.b9-sub body .g-prop14 .pp-row{animation:bt-rise linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
  }
}

/* ---- Over ons: headline left, the two portraits large and stepped on the right ---- */
html.b9-sub body .g25-oo .g-roomo-in:not(#x){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:32px!important;align-items:center!important}
html.b9-sub body .g25-oo .g-roomo-t:not(#x){grid-column:1/7;max-width:none!important}
html.b9-sub body .g25-oo .g-roomo-t .lead{font-size:19px;line-height:1.6;max-width:32em}
html.b9-sub body .g25-oo .g-roomo-x:not(#x){grid-column:7/13;width:auto!important;max-width:none!important;margin:0!important}
html.b9-sub body .g25-oo .g25-team:not(#x){display:grid!important;grid-template-columns:1fr 1fr!important;gap:36px!important;width:auto!important;max-width:none!important;margin:0!important;padding-bottom:90px}
html.b9-sub body .g25-oo .g25-team .wp-person:not(#x){width:auto!important;max-width:none!important;margin:0!important}
html.b9-sub body .g25-oo .g25-team .wp-person:nth-child(2):not(#x){margin-top:90px!important}
html.b9-sub body .g25-oo .g25-team .pt:not(#x){display:block;aspect-ratio:4/5;width:100%!important;height:auto!important;border-radius:12px;overflow:hidden}
html.b9-sub body .g25-oo .g25-team .pt img{width:100%!important;height:100%!important;object-fit:cover}
html.b9-sub body .g46-story .g46-story-in:not(#x){display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;column-gap:64px!important;align-items:start}
html.b9-sub body .g46-story .g46-story-t p{font-size:18px;line-height:1.7}

/* ---- Websites: the summary is a card of its own ---- */
html.b9-sub body .pk-sum:not(#x){background:#0f2119!important;border-radius:22px!important;box-shadow:inset 0 0 0 1px rgba(246,239,220,.1),0 40px 80px -42px rgba(0,0,0,.85)!important;border:0!important}

/* ---- Contact: headline and people left, the form as a card of its own on the right ---- */
html.b9-sub body .g37-card:not(#x){background:#0f2119!important;border-radius:24px!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(246,239,220,.1),0 50px 90px -46px rgba(0,0,0,.9)!important;padding:40px!important}
html.b9-sub body .g37-card .g37-in:not(#x),html.b9-sub body .g37-card textarea:not(#x),html.b9-sub body .g37-card select:not(#x){background:rgba(246,239,220,.04)!important;border:1px solid rgba(246,239,220,.16)!important;border-radius:12px!important;color:#f6efdc!important;transition:border-color .2s,box-shadow .2s}
html.b9-sub body .g37-card :is(.g37-in,textarea,select):focus:not(#x){outline:none!important;border-color:#ebc22f!important;box-shadow:0 0 0 3px rgba(235,194,47,.18)!important}
html.b9-sub body .g37-card .g37-pill span:not(#x){border-radius:999px!important;box-shadow:inset 0 0 0 1px rgba(246,239,220,.2)!important;background:transparent!important;color:#e9e3d4!important}
html.b9-sub body .g37-card .g37-pill input:checked+span:not(#x){background:linear-gradient(165deg,#ffe896 0%,#f6d24c 32%,#e8b927 66%,#cc960c 100%)!important;color:#0f2419!important;box-shadow:none!important}
html.b9-sub body .g37-team .g37-pf:not(#x){border-radius:12px;overflow:hidden}

/* ==== g49 bouw10 (Moreno 8 Nov): the navigation stands apart. Wider, more room between the links, no background on landing;
   the pill only comes back when you scroll up over the page. Loaded after b9-pages.css. ==== */
html:root body .gh:not(.g37-solid) .g22-nav:not(#x):not(#y){background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
html:root body .gh-mid .g22-nav:not(#x){padding:8px 10px!important}
html:root body .gh-mid .nv-l,html:root body .gh-mid .nv-r{gap:14px!important}
html:root body .gh-mid .nv-wm:not(#x){padding:0 52px!important}
html:root body .gh-mid .nv-wm img{height:30px}
html:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x){padding:12px 16px!important}
html:root body .gh-mid .nv-r .g22-n-cta:not(#x){margin-left:14px!important}
html:root body .gh:not(.g37-solid) .nv-wm img{filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}

/* nav type B: the headline serif, a little larger, so the navigation speaks with the voice of the headlines */
html:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x){font-family:Newsreader,Georgia,serif!important;font-size:20px!important;font-weight:400!important;letter-spacing:-.005em!important}
html:root body .gh-mid .g22-nav .g22-n.g22-n-cta:not(#x){font-family:Newsreader,Georgia,serif!important;font-size:19px!important;font-weight:500!important;height:42px;padding:0 22px!important}
html:root body .gh-mid .g22-nav .g22-n svg{width:13px;height:13px;margin-left:3px}

/* nav N2 "Kapitälchen": the serif in small capitals, widely spaced, each link a soft glass chip of its own */
html:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x){font-family:Newsreader,Georgia,serif!important;font-size:19px!important;font-weight:500!important;font-variant-caps:all-small-caps;letter-spacing:.14em!important;padding:12px 20px 13px!important;border-radius:999px;background:rgba(246,239,220,.07)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;transition:background .3s,color .3s}
html:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x):hover,html:root body .gh-mid .g22-nav .g22-n[aria-expanded="true"]:not(#x){background:rgba(235,194,47,.16)!important;color:#fff6dc}
html:root body .gh-mid .nv-l,html:root body .gh-mid .nv-r{gap:10px!important}
html:root body .gh-mid .g22-nav .g22-n.g22-n-cta:not(#x){font-family:Newsreader,Georgia,serif!important;font-size:19px!important;font-weight:600!important;font-variant-caps:all-small-caps;letter-spacing:.14em!important;height:44px;padding:0 24px 1px!important}
html:root body .g22-nav .nv-ind{display:none!important}

/* ==== g49 bouw11 (Moreno 8 Nov): ghost button, a hover that carries all three flag colours, package cards that show
   what is in each one, and the Prijzen page. Loaded after b10-nav.css. ==== */
:root{--sr-g:#3fa25c;--sr-y:#ebc22f;--sr-r:#cf4a3c;--sr-w:#efe9dc}

/* primary button: yellow pill; on hover the arrow chip turns flag red and a green ring lights around the pill */
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(#x):not(#y){box-shadow:inset 0 1px 0 rgba(255,252,226,.85),0 0 0 0 rgba(15,36,25,0),0 0 0 0 rgba(63,162,92,0),0 14px 30px -18px rgba(0,0,0,.8)!important;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .45s cubic-bezier(.2,.8,.2,1),background .3s!important}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(#x):not(#y):hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,252,226,.9),0 0 0 4px #0d1f16,0 0 0 6px var(--sr-g),0 18px 40px -16px rgba(235,194,47,.45)!important}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(#x):not(#y)::after{transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .3s!important}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(#x):not(#y):hover::after{transform:rotate(-45deg);background:var(--sr-r) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='%23fff6dc' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important}

/* ghost button for "Bekijk ons portfolio": an outlined pill; on hover the outline becomes the flag, green, white, red, white, green */
html:root body a.g46-na:not(#x):not(#y){position:relative;isolation:isolate;display:inline-flex!important;align-items:center;gap:12px;height:56px;padding:0 24px 0 28px!important;border:0!important;border-radius:999px!important;color:#f6efdc!important;font-weight:600;background:rgba(246,239,220,.02)!important;box-shadow:none!important;text-decoration:none!important;transition:color .3s,transform .3s cubic-bezier(.2,.8,.2,1),background .3s!important}
html:root body a.g46-na:not(#x):not(#y)::before{content:""!important;display:block!important;opacity:1!important;position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(90deg,rgba(246,239,220,.42),rgba(246,239,220,.42));background-size:100% 100%;transition:opacity .3s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html:root body a.g46-na:not(#x):not(#y):hover::before{background:linear-gradient(90deg,var(--sr-g) 0%,var(--sr-g) 17%,var(--sr-w) 23%,var(--sr-r) 33%,var(--sr-r) 67%,var(--sr-w) 77%,var(--sr-g) 83%,var(--sr-g) 100%);padding:2px}
html:root body a.g46-na:not(#x):not(#y)::after{content:""!important;display:block!important;width:18px!important;height:18px!important;border-radius:0!important;box-shadow:none!important;background:var(--sr-y)!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important;transition:transform .35s cubic-bezier(.2,.8,.2,1)!important}
html:root body a.g46-na:not(#x):not(#y):hover{transform:translateY(-2px);color:#fff6dc!important;background:rgba(246,239,220,.05)!important}
  background:linear-gradient(#0e2118,#0e2118) padding-box,linear-gradient(90deg,var(--sr-g) 0%,var(--sr-g) 18%,var(--sr-w) 24%,var(--sr-r) 34%,var(--sr-r) 66%,var(--sr-w) 76%,var(--sr-g) 82%,var(--sr-g) 100%) border-box!important}
html:root body a.g46-na:not(#x):not(#y):hover::after{transform:translateX(4px)}
html:root body a.g46-na:not(#x):not(#y):focus-visible{outline:2px solid var(--sr-y);outline-offset:3px}
html:root body .g37-ex-all{margin-top:40px}

/* ---- package cards ---- */
html:root body #prijzen .gx-rail .g45-row:nth-child(1){--bt-h:790px}
html:root body #prijzen .gx-rail .g45-row:nth-child(2){--bt-h:840px}
html:root body #prijzen .gx-rail .g45-row:nth-child(3){--bt-h:890px}
html:root body #prijzen .gx-rail .g45-row:nth-child(4){--bt-h:940px}
html:root body #prijzen .gx-rail .g45-row:nth-child(3){--pc-hi:1}
html:root body #prijzen .g45-row .pc-who{margin-top:16px!important;font-size:15.5px;line-height:1.45;color:rgba(246,239,220,.74);max-width:250px}
html:root body #prijzen .g45-row .pc-pg{margin-top:22px!important;display:grid;gap:6px;width:100%;padding-top:20px;border-top:1px solid rgba(246,239,220,.1)}
html:root body #prijzen .pc-tiles{display:flex;gap:5px;height:26px;align-items:flex-end}
html:root body #prijzen .pc-tiles i{display:block;width:17px;height:22px;border-radius:3px;background:linear-gradient(180deg,rgba(235,194,47,.95),rgba(204,150,12,.85));box-shadow:inset 0 1px 0 rgba(255,250,220,.6)}
html:root body #prijzen .pc-tiles i:first-child{height:26px}
html:root body #prijzen .pc-tiles .pc-more{background:none;box-shadow:inset 0 0 0 1.5px rgba(235,194,47,.7);position:relative}
html:root body #prijzen .pc-tiles .pc-more::before{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:var(--sr-y);font:600 15px/1 Manrope,system-ui,sans-serif}
html:root body #prijzen .pc-pg b{font:500 19px/1.25 Newsreader,Georgia,serif;color:#fff6dc;margin-top:6px}
html:root body #prijzen .pc-names{font-size:13px;line-height:1.45;color:rgba(246,239,220,.6)}
html:root body #prijzen :is(.pc-get,.pc-inc){list-style:none;padding:0!important;display:grid;gap:9px;width:100%}
html:root body #prijzen .pc-get{margin-top:18px!important}
html:root body :is(.pc-get,.pc-inc) li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.4}
html:root body .pc-get li{color:#fff6dc;font-weight:600}
html:root body :is(.pc-get,.pc-inc) li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
  background:var(--sr-y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4 8.6 13.4 14.6 6.9' fill='none' stroke='%230f2419' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
html:root body .pc-inc li{color:rgba(246,239,220,.8)}
html:root body .pc-inc li::before{background:rgba(63,162,92,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4 8.6 13.4 14.6 6.9' fill='none' stroke='%237fd496' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:inset 0 0 0 1px rgba(127,212,150,.35)}
html:root body #prijzen .pc-al{margin-top:20px!important;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(127,212,150,.85)}
html:root body #prijzen .pc-inc{margin-top:10px!important}
html:root body #prijzen .g45-row .gx-t{padding-top:22px}
/* Groei: the step most firms take, lit a little more */
html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row:nth-child(3)::before{background:linear-gradient(180deg,rgba(235,194,47,.15),rgba(235,194,47,.04) 55%,rgba(235,194,47,0))!important;border-top:2px solid var(--sr-y)!important}
html:root body .gx-terms .pc-all{margin-left:10px;color:var(--sr-y);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---- Prijzen page ---- */
html:root body .pz-hero{padding:200px 0 40px!important}
html:root body .pz-hero h1{font-size:96px!important;line-height:1!important;letter-spacing:-.025em;max-width:13ch;margin:18px 0 0}
html:root body .pz-hero .sub{max-width:620px;margin-top:28px;font-size:19px;line-height:1.55;color:rgba(246,239,220,.8)}
html:root body:has(.pz-hero) #prijzen{padding-top:40px!important}
html:root body .pz-tbl{padding:140px 0 60px!important}
html:root body .pz-tbl h2,html:root body .pz-year h2,html:root body .pz-brand h2{font-size:64px!important;line-height:1.02!important;margin:16px 0 48px}
html:root body .pz-scroll{overflow-x:auto}
html:root body .pz-tbl table{width:100%;border-collapse:collapse;font-size:15.5px;font-variant-numeric:tabular-nums}
html:root body .pz-tbl th,html:root body .pz-tbl td{padding:18px 20px;text-align:left;border-bottom:1px solid rgba(246,239,220,.1);color:rgba(246,239,220,.85)}
html:root body .pz-tbl thead th{font:500 24px/1.2 Newsreader,Georgia,serif;color:#fff6dc;border-bottom:1px solid rgba(235,194,47,.5);padding-bottom:22px}
html:root body .pz-tbl thead th.pt-hi{color:var(--sr-y)}
html:root body .pz-tbl tbody th{font-weight:500;color:rgba(246,239,220,.7);width:32%}
html:root body .pz-tbl tbody tr:last-child td{font:500 22px/1.2 Newsreader,Georgia,serif;color:#fff6dc}
html:root body .pz-tbl td:nth-child(4){background:rgba(235,194,47,.05)}
html:root body .pz-tbl .pt-y::before{content:"";display:inline-block;width:20px;height:20px;border-radius:50%;vertical-align:middle;background:var(--sr-y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4 8.6 13.4 14.6 6.9' fill='none' stroke='%230f2419' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
html:root body .pz-tbl .pt-n::before{content:"";display:inline-block;width:14px;height:1.5px;background:rgba(246,239,220,.3);vertical-align:middle}
html:root body .pz-year{padding:120px 0!important}
html:root body .pz-two{display:grid;grid-template-columns:7fr 5fr;gap:80px;align-items:end}
html:root body .pz-year .sub{max-width:560px;font-size:18px;line-height:1.55;color:rgba(246,239,220,.8)}
html:root body .pz-list{list-style:none;padding:32px 36px!important;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;border-radius:22px;background:linear-gradient(160deg,rgba(63,162,92,.12),rgba(63,162,92,.03));box-shadow:inset 0 0 0 1px rgba(127,212,150,.2)}
html:root body .pz-brand{padding:60px 0 140px!important}
html:root body .pz-b3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
html:root body .pz-b3 a{display:grid;gap:10px;align-content:start;padding:30px 30px 34px;border-radius:22px;text-decoration:none;color:rgba(246,239,220,.78);background:rgba(246,239,220,.035);box-shadow:inset 0 0 0 1px rgba(246,239,220,.1);transition:box-shadow .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
html:root body .pz-b3 a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(235,194,47,.6)}
html:root body .pz-b3 b{font:500 26px/1.2 Newsreader,Georgia,serif;color:#fff6dc}
html:root body .pz-b3 .pz-p{font:500 40px/1 Newsreader,Georgia,serif;color:var(--sr-y)}
html:root body .pz-more{margin-top:40px;font-size:17px;color:rgba(246,239,220,.8);display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* after scrolling up: the pill is near solid, so the link chips never sit on a washed grey */
html:root body .gh.g37-solid .g22-nav:not(#x):not(#y){background:rgba(10,22,16,.86)!important}
/* Vacatures: the two job links stack, so they never run under the portraits */
html:root body .vac-jump:not(#x){display:flex!important;flex-direction:column;align-items:flex-start;gap:14px;margin-top:32px}
html:root body .vac-tc:not(#x){margin-top:20px!important;position:static!important}
html:root body :is(.werkwijze,.blog,main){overflow-x:clip}

/* ==== g49 bouw12 (Moreno 8 Nov): nav 2 without chips, styled Contact, the arrows move on hover, a stronger package ladder
   with "Altijd inbegrepen" folded, card text waits for its card, a better Prijzen page. Loaded after b11.css. ==== */
@keyframes b12-arrow{0%{transform:translateX(0);opacity:1}45%{transform:translateX(14px);opacity:0}46%{transform:translateX(-12px);opacity:0}100%{transform:translateX(0);opacity:1}}

/* nav 2: small capitals, no chip behind each link; only the whole nav gets the glass pill after scrolling up */
html:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x){background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;padding:12px 16px 13px!important;position:relative}
html:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x):not(#y)::after{content:""!important;display:block!important;opacity:1!important;position:absolute;left:16px;right:16px;bottom:6px;height:1px;background:#ebc22f;transform:scaleX(0);transform-origin:50% 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
html:root body .gh-mid .g22-nav .g22-dd-b:not(#x)::after{right:34px}
html:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x):hover{background:transparent!important;color:#fff6dc}
html:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x):not(#y):hover::after,html:root body .gh-mid .g22-nav .g22-n[aria-expanded="true"]:not(#x):not(#y)::after{transform:scaleX(1)}
html:root body .gh-mid .nv-l,html:root body .gh-mid .nv-r{gap:6px!important}

/* Contact: a small version of the main button, small capitals, a dark chip with the arrow */
html:root body .gh-mid .g22-nav .g22-n.g22-n-cta:not(#x):not(#y){display:inline-flex!important;align-items:center;gap:12px;height:46px;padding:0 5px 1px 22px!important;margin-left:18px!important;border-radius:999px;
  font-family:Newsreader,Georgia,serif!important;font-size:19px!important;font-weight:600!important;font-variant-caps:all-small-caps;letter-spacing:.14em!important;color:#0f2419!important;
  background:linear-gradient(165deg,#ffe896 0%,#f6d24c 32%,#e8b927 66%,#cc960c 100%)!important;box-shadow:inset 0 1px 0 rgba(255,252,226,.85),0 10px 24px -14px rgba(0,0,0,.8)!important;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .4s!important}
html:root body .gh-mid .g22-nav .g22-n.g22-n-cta:not(#x):not(#y)::after{content:""!important;display:block!important;opacity:1!important;position:static!important;-webkit-mask:none!important;mask:none!important;transform:none!important;background-color:#10271c!important;flex:none;width:36px;height:36px;border-radius:50%;background:#10271c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='%23f2cd45' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:background-color .3s}

/* every arrow loops forward on hover: out to the right, back in from the left */
html:root body a.g46-na:not(#x):not(#y):hover::after{transform:none;animation:b12-arrow .55s cubic-bezier(.5,0,.2,1)}
html:root body :is(.gx-lnk,.g-tl):not(.g46-na):not(#x):hover::after{animation:b12-arrow .55s cubic-bezier(.5,0,.2,1)}

/* ---- package ladder ---- */
html:root body #prijzen .pc-base{margin-top:20px!important;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(235,194,47,.9)}
html:root body #prijzen .pc-base+.pc-get{margin-top:12px!important}
html:root body #prijzen details.pc-al{margin-top:22px!important;width:100%;border-top:1px solid rgba(246,239,220,.1);font-size:inherit;letter-spacing:0;text-transform:none}
html:root body #prijzen details.pc-al summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:14px 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(127,212,150,.9)}
html:root body #prijzen details.pc-al summary::-webkit-details-marker{display:none}
html:root body #prijzen details.pc-al summary::after{content:"";width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(127,212,150,.4);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.2c1.4 1.5 2.7 2.7 4 3.6 1.3-.9 2.6-2.1 4-3.6' fill='none' stroke='%237fd496' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .3s}
html:root body #prijzen details.pc-al[open] summary::after{transform:rotate(180deg)}
html:root body #prijzen details.pc-al summary:focus-visible{outline:2px solid #ebc22f;outline-offset:4px;border-radius:4px}
html:root body #prijzen details.pc-al .pc-inc{margin-top:12px!important}
html:root body #prijzen .gx-rail .g45-row:nth-child(1){--bt-h:600px}
html:root body #prijzen .gx-rail .g45-row:nth-child(2){--bt-h:690px}
html:root body #prijzen .gx-rail .g45-row:nth-child(3){--bt-h:770px}
html:root body #prijzen .gx-rail .g45-row:nth-child(4){--bt-h:850px}

/* card text waits until its card has grown to full height */
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){
  html.b2-on body #prijzen .g45-row:nth-child(1)>*{animation-range:cover 22% cover 30%!important}
  html.b2-on body #prijzen .g45-row:nth-child(2)>*{animation-range:cover 26% cover 34%!important}
  html.b2-on body #prijzen .g45-row:nth-child(3)>*{animation-range:cover 30% cover 38%!important}
  html.b2-on body #prijzen .g45-row:nth-child(4)>*{animation-range:cover 34% cover 42%!important}
}}

/* ---- Prijzen page ---- */
html:root body .pz-hero{padding:190px 0 20px!important}
html:root body .pz-hero-in{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:end}
html:root body .pz-deal{padding:34px 36px 36px;border-radius:26px;background:linear-gradient(160deg,rgba(235,194,47,.13),rgba(235,194,47,.03) 60%);box-shadow:inset 0 0 0 1px rgba(235,194,47,.32),0 40px 80px -50px rgba(0,0,0,.9);color:rgba(246,239,220,.84);font-size:16.5px;line-height:1.55}
html:root body .pz-deal .pz-deal-k{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ebc22f}
html:root body .pz-deal .pz-deal-p{font:500 40px/1.05 Newsreader,Georgia,serif;color:#fff6dc;margin:12px 0 14px}
html:root body .pz-deal .g22-acts{margin-top:26px}
html:root body #prijzen.pz-pr .gx-offer:not(#x){display:none!important}
html:root body #prijzen.pz-pr .gx-rail:not(#x){margin-top:20px!important;grid-row:auto!important}
html:root body #prijzen.pz-pr:not(#x){padding-top:80px!important}
html:root body .pz-faq{padding:60px 0 140px!important}
html:root body .pz-faq .pz-two{align-items:start}
html:root body .pz-faq h2{font-size:64px!important;line-height:1.02!important;margin:16px 0 0}
html:root body .pz-qs details{border-bottom:1px solid rgba(246,239,220,.12)}
html:root body .pz-qs details:first-child{border-top:1px solid rgba(246,239,220,.12)}
html:root body .pz-qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font:500 22px/1.3 Newsreader,Georgia,serif;color:#fff6dc}
html:root body .pz-qs summary::-webkit-details-marker{display:none}
html:root body .pz-qs summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(235,194,47,.55);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.2c1.4 1.5 2.7 2.7 4 3.6 1.3-.9 2.6-2.1 4-3.6' fill='none' stroke='%23ebc22f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s}
html:root body .pz-qs details[open] summary::after{transform:rotate(180deg)}
html:root body .pz-qs details p{margin:0 0 26px;max-width:620px;font-size:16.5px;line-height:1.6;color:rgba(246,239,220,.8)}
html:root body .pz-tbl{padding-top:120px!important}
html:root body #prijzen.pz-pr .pc-all:not(#x){display:none}
html:root body .gx-terms .pc-all{white-space:nowrap}

/* main button hover A "Glans": a light sweep crosses the yellow, the chip turns flag red and the arrow loops,
   a soft green light falls under the button (no hard ring). The sweep is a second background layer of the button itself. */
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(.g22-n):not(#x):not(#y){background:linear-gradient(105deg,rgba(255,255,240,0) 35%,rgba(255,255,248,.85) 50%,rgba(255,255,240,0) 65%) -200% 0/60% 100% no-repeat,linear-gradient(165deg,#ffe896 0%,#f6d24c 32%,#e8b927 66%,#cc960c 100%)!important}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(.g22-n):not(#x):not(#y):hover{background:linear-gradient(105deg,rgba(255,255,240,0) 35%,rgba(255,255,248,.85) 50%,rgba(255,255,240,0) 65%) -200% 0/60% 100% no-repeat,linear-gradient(165deg,#fff0b4 0%,#f9da62 32%,#edc236 66%,#d6a014 100%)!important;animation:b12-sheen 1.1s cubic-bezier(.45,0,.25,1) both}
@keyframes b12-sheen{from{background-position:-200% 0,0 0}to{background-position:300% 0,0 0}}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(#x):not(#y):hover{box-shadow:inset 0 1px 0 rgba(255,252,226,.9),0 18px 34px -12px rgba(63,162,92,.7),0 8px 18px -10px rgba(235,194,47,.6)!important}
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta,.g22-n-cta):not(#x):not(#y):hover::after{transform:none!important;background:#cf4a3c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='%23fff6dc' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat!important;animation:b12-chip .55s cubic-bezier(.5,0,.2,1)}
@keyframes b12-chip{0%{background-position:50% 50%}45%{background-position:160% 50%}46%{background-position:-60% 50%}100%{background-position:50% 50%}}

/* ==== g49 bouw13 (Moreno 8 Nov eve): hover 1 "Glans" kept; the arrows turn up again on hover; Contact smaller, no arrow, with a hover;
   three menu hovers to choose from (html[data-nh]); "Altijd inbegrepen" on one line across all four cards. Loaded after hov-a.css. ==== */

/* main button: the chip arrow turns to the upper right again (no loop) */
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(.g22-n):not(#x):not(#y):hover::after{animation:none!important;transform:rotate(-45deg)!important}
/* ghost button: the yellow arrow turns to the upper right too */
html:root body a.g46-na:not(#x):not(#y)::after{transition:transform .45s cubic-bezier(.2,.8,.2,1)!important}
html:root body a.g46-na:not(#x):not(#y):hover::after{animation:none!important;transform:rotate(-45deg)!important}

/* Contact in the menu: smaller, no arrow; hover = the same light sweep as the main button and a soft green glow under it */
html:root body .gh-mid .g22-nav .g22-n.g22-n-cta:not(#x):not(#y){height:38px;padding:0 20px 1px!important;gap:0;font-size:16.5px!important;
  background:linear-gradient(105deg,rgba(255,255,240,0) 35%,rgba(255,255,248,.85) 50%,rgba(255,255,240,0) 65%) -200% 0/60% 100% no-repeat,linear-gradient(165deg,#ffe896 0%,#f6d24c 32%,#e8b927 66%,#cc960c 100%)!important}
html:root body .gh-mid .g22-nav .g22-n.g22-n-cta:not(#x):not(#y)::after{display:none!important}
html:root body .gh-mid .g22-nav .g22-n.g22-n-cta:not(#x):not(#y):hover{transform:translateY(-1px);animation:b12-sheen 1.1s cubic-bezier(.45,0,.25,1) both;
  box-shadow:inset 0 1px 0 rgba(255,252,226,.9),0 14px 26px -12px rgba(63,162,92,.75),0 6px 14px -8px rgba(235,194,47,.6)!important}
html:root body .gh-mid .g22-nav .g22-n.g22-n-cta:not(#x):not(#y):focus-visible{outline:2px solid #ebc22f;outline-offset:3px}

/* menu links: the bouw12 underline goes; each variant below draws its own hover */
html:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x):not(#y)::after{display:none!important}
html:root body .gh-mid .g22-nav .g22-dd-b:not(#x):not(#y)::after{display:none!important}
html:root body .gh-mid .g22-nav{position:relative}
html:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta){transition:color .3s}
html:root body .nh-roll{display:inline-flex;overflow:hidden;vertical-align:top}
html:root body .nh-roll>span{display:inline-grid}
html:root body .nh-roll i{font-style:normal;grid-area:1/1;transition:transform .42s cubic-bezier(.6,0,.15,1);transition-delay:calc(var(--i,0)*14ms);white-space:pre}
html:root body .nh-roll i+i{display:none}

/* 1 · Glaspil: a soft glass pill glides to the link under the pointer */
html[data-nh="1"]:root body .g22-nav .nv-ind:not(#x){display:block!important;top:50%;bottom:auto!important;height:40px;margin-top:-20px;border-radius:999px;z-index:-1;
  width:var(--pw,0px);transform:translateX(var(--px,0px));background:linear-gradient(180deg,rgba(246,239,220,.16),rgba(246,239,220,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(246,239,220,.2),0 10px 24px -14px rgba(0,0,0,.7);transition:transform .42s cubic-bezier(.2,.8,.2,1),width .42s cubic-bezier(.2,.8,.2,1),opacity .25s}
html[data-nh="1"]:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x):hover{color:#fff6dc!important}

/* 2 · Rollende letters: the word rolls up letter by letter and comes back in flag yellow */
html[data-nh="2"]:root body .nh-roll i+i{display:block;transform:translateY(105%);color:#f2cd45}
html[data-nh="2"]:root body .g22-n:is(:hover,[aria-expanded="true"]) .nh-roll i:first-child{transform:translateY(-105%)}
html[data-nh="2"]:root body .g22-n:is(:hover,[aria-expanded="true"]) .nh-roll i+i{transform:none}

/* 3 · Lichtval: warm light rises behind the word and the word lights up */
html[data-nh="3"]:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x):not(#y)::before{content:""!important;display:block!important;position:absolute;inset:-8px -22px;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 55%,rgba(242,205,69,.5),rgba(242,205,69,.16) 45%,rgba(242,205,69,0) 72%)!important;opacity:0;transform:translateY(10px) scale(.7);transform-origin:50% 100%;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
html[data-nh="3"]:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x):not(#y):is(:hover,[aria-expanded="true"])::before{opacity:1;transform:none}
html[data-nh="3"]:root body .gh-mid .g22-nav .g22-n:not(.g22-n-cta):not(#x):is(:hover,[aria-expanded="true"]){color:#fff8e2!important}

@media (prefers-reduced-motion:reduce){html:root body .nh-roll i,html[data-nh] body .g22-nav .nv-ind{transition:none!important}}

/* ---- packages: extras show what they cost when bought separately; "Altijd inbegrepen" sits on one line across the four cards ---- */
html:root body #prijzen .pc-get .pc-val{display:inline-block;margin-left:4px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:rgba(235,194,47,.78);white-space:nowrap}
html:root body #prijzen .gx-rail .g45-row>details.pc-al:not(#x):not(#y){margin-top:auto!important;padding-top:0}
html:root body #prijzen .gx-rail .g45-row>.pc-get:not(#x){margin-bottom:28px!important}
html:root body .gh-mid .g22-nav:not(#x){isolation:isolate}
html:root body #prijzen .gx-rail .g45-row>.gx-t.g45-lt:not(#x):not(#y){margin-top:22px!important}
html:root body #prijzen .gx-rail .g45-row:nth-child(1):not(#x){--bt-h:680px}
html:root body #prijzen .gx-rail .g45-row:nth-child(2):not(#x){--bt-h:760px}
html:root body #prijzen .gx-rail .g45-row:nth-child(3):not(#x){--bt-h:840px}
html:root body #prijzen .gx-rail .g45-row:nth-child(4):not(#x){--bt-h:920px}

/* ==== g49 bouw14 (Moreno 9 Nov): Glaspil stays; logo letters turn on hover; main button hover = a ring, no glow; ghost links as full buttons;
   more room under the nav; Overstek example close to its text with a new reveal; prijzen without yellow cards; packages show hosting on top. ==== */

/* logo: each letter turns once around its own horizontal axis */
html:root body .gh-wm.b14-lg{display:inline-flex;align-items:center}
html:root body .gh-wm.b14-lg svg{display:block;width:150px;height:auto;overflow:visible}
html:root body .gh-wm.b14-lg .b14-lt{transform-box:fill-box;transform-origin:50% 50%}
html:root body .gh-wm.b14-lg:is(:hover,:focus-visible) .b14-lt{animation:b14-turn .9s cubic-bezier(.45,0,.2,1) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes b14-turn{0%{transform:scaleY(1)}25%{transform:scaleY(0)}50%{transform:scaleY(-1)}75%{transform:scaleY(0)}100%{transform:scaleY(1)}}

/* main button hover: a clear ring around the button instead of a glow (green; ?bh=r shows red) */
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(.g22-n):not(#x):not(#y):hover{box-shadow:inset 0 1px 0 rgba(255,252,226,.9),0 0 0 3px #0f2419,0 0 0 5px #45a964!important}
html[data-bh="r"]:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(.g22-n):not(#x):not(#y):hover{box-shadow:inset 0 1px 0 rgba(255,252,226,.9),0 0 0 3px #0f2419,0 0 0 5px #d24f3f!important}

/* subpages: more room between the nav and the first label */
html.b9-sub:root body main>:first-child:not(#x){margin-top:52px!important}

/* example links become full ghost buttons, the same size as the main button */
html:root body a.b14-gh:not(#x):not(#y){display:inline-flex!important;align-items:center;gap:14px;height:56px;padding:0 24px 0 28px!important;border-radius:999px!important;font-size:17px!important;font-weight:650!important;
  background:rgba(246,239,220,.05)!important;box-shadow:inset 0 0 0 1px rgba(246,239,220,.32)!important;color:#f6efdc!important;text-decoration:none!important}
html:root body a.b14-gh:not(#x):not(#y):hover{background:rgba(246,239,220,.1)!important;box-shadow:inset 0 0 0 1px rgba(246,239,220,.55)!important}

/* home, Overstek: text and screenshot side by side, close together; the screenshot bigger */
html:root body .g40-ak:not(#x):not(#y){display:grid!important;grid-template-columns:minmax(300px,.72fr) minmax(0,1.5fr)!important;gap:clamp(40px,4.5vw,72px)!important;align-items:center!important;max-width:1180px;margin-inline:auto!important}
html:root body .g40-ak>.g40-ex-t:not(#x){order:-1;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:0!important;margin:0!important;max-width:none!important}
html:root body .g40-ak>.g40-ex-t h3:not(#x){font-size:clamp(34px,3vw,44px)!important;line-height:1.08;margin:0!important}
html:root body .g40-ak>.g37-exf:not(#x){width:100%!important;max-width:none!important;margin:0!important;transform:none}
html:root body .g40-ak .g-print:not(#x){display:block;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -36px rgba(0,0,0,.75)}
html:root body .g40-ak .g-print img:not(#x){display:block;width:100%;height:auto}
html:root body :is(.bt-cols,.bt-bands){display:none!important}

/* new reveal for example screenshots: the page comes into focus out of the dark, with a soft light passing once */
@keyframes b14-focus{from{opacity:0;filter:blur(16px) brightness(.55);transform:translateY(36px) scale(.965)}60%{opacity:1}to{opacity:1;filter:none;transform:none}}
@keyframes b14-sweep{from{transform:translateX(-120%)}to{transform:translateX(160%)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html.b2-on body :is(.g40-ak,.g-close-art) .g-print:not(#x):not(#y){animation:b14-focus linear both!important;animation-timeline:view()!important;animation-range:entry 5% cover 38%!important;position:relative}
    html.b2-on body :is(.g40-ak,.g-close-art) .g-print img:not(#x):not(#y){animation:none!important;opacity:1!important;clip-path:none!important}
    html.b2-on body :is(.g40-ak,.g-close-art) .g-print:not(#x)::before{display:none!important}
    html.b2-on body :is(.g40-ak,.g-close-art) .g-print:not(#x):not(#y)::after{content:""!important;display:block!important;opacity:1!important;position:absolute;inset:0;z-index:2;pointer-events:none;
      background:linear-gradient(100deg,transparent 30%,rgba(255,246,214,.22) 48%,rgba(255,246,214,.06) 56%,transparent 70%)!important;mix-blend-mode:screen;
      animation:b14-sweep linear both!important;animation-timeline:view()!important;animation-range:entry 30% cover 55%!important}
  }
}

/* closing section: the example keeps a clear distance from the buttons */
html:root body .g-close .g-close-in:not(#x):not(#y){column-gap:clamp(72px,8vw,128px)!important;gap:clamp(72px,8vw,128px)!important}
html:root body .g-close .g-close-art:not(#x){margin-left:clamp(24px,3vw,48px)!important}
html:root body .g-close .g-acts:not(#x):not(#y){flex-wrap:wrap!important;row-gap:16px!important}

/* package cards: hosting on top */
html:root body .g45-row>.pc-host:not(#x):not(#y){display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0 0 18px!important;padding:0 0 12px!important;border-bottom:1px solid rgba(246,239,220,.14);font-size:13.5px!important;line-height:1.35!important}
html:root body .g45-row>.pc-host:not(#x) :is(b,span){font-size:13.5px!important}
html:root body .pc-host b{color:#f2cd45;font-weight:650}
html:root body .pc-host span{color:rgba(246,239,220,.62)}
html:root body #prijzen .gx-rail .g45-row:nth-child(1):not(#x){--bt-h:740px}
html:root body #prijzen .gx-rail .g45-row:nth-child(2):not(#x){--bt-h:860px}
html:root body #prijzen .gx-rail .g45-row:nth-child(3):not(#x){--bt-h:960px}
html:root body #prijzen .gx-rail .g45-row:nth-child(4):not(#x){--bt-h:1040px}
html:root body .pc-go{margin:28px 0 0}

/* websites: what each package holds, inside the row */
html:root body .pk-get{display:flex!important;flex-direction:column;gap:7px;margin:14px 0 4px;padding:12px 0 0;border-top:1px solid rgba(246,239,220,.1);font-size:14.5px;line-height:1.4;color:rgba(246,239,220,.84)}
html:root body .pk-gb{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#f2cd45;font-weight:650}
html:root body .pk-gi{position:relative;padding-left:22px}
html:root body .pk-gi::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;border-left:2px solid #45a964;border-bottom:2px solid #45a964;transform:rotate(-45deg)}

/* prijzen: no yellow cards */
html:root body .pz-hero .pz-hero-in:not(#x){display:block!important}
html:root body .pz-hero h1:not(#x){font-size:clamp(48px,5.2vw,76px)!important;line-height:1.02!important;max-width:15ch}
html:root body .pz-hero .sub:not(#x){max-width:60ch;margin-top:22px}
html:root body .pz-iv:not(#x){margin-top:26px}
html:root body .pz-acts:not(#x){display:flex;gap:18px;flex-wrap:wrap;margin-top:30px}
html:root body .pz-year .pz-list:not(#x):not(#y){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;align-content:center}
html:root body .pz-year .pz-list li:not(#x){font-size:17px;color:#f6efdc;border-bottom:1px solid rgba(246,239,220,.12);padding-bottom:14px}
html:root body .pz-b3o:not(#x){display:grid!important;grid-template-columns:repeat(3,1fr);gap:0!important}
html:root body .pz-b3o>a:not(#x):not(#y){display:flex!important;flex-direction:column;gap:10px;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  padding:28px 36px 30px 0!important;margin-right:36px;border-top:1px solid rgba(246,239,220,.22)!important;text-decoration:none;color:#f6efdc;transition:border-color .3s}
html:root body .pz-b3o>a:hover{border-top-color:#f2cd45!important}
html:root body .pz-b3o>a b{font-family:var(--serif,"Newsreader",serif);font-weight:400;font-size:34px;line-height:1.05}
html:root body .pz-b3o .pz-p{font-family:var(--serif,"Newsreader",serif);font-size:22px;color:#f2cd45!important}
html:root body .pz-b3o>a>span:last-child{color:rgba(246,239,220,.7);font-size:15.5px;line-height:1.5;max-width:30ch}

/* over ons, proposal: notes keep room on the right; the link to the sample proposal is readable */
html:root body .g25-prop .g-prop14:not(#x){max-width:1180px}
html:root body .g25-prop .ann:not(#x){max-width:280px;white-space:normal!important;overflow-wrap:anywhere}
html:root body .g25-prop .g43-vv .pp-paper:not(#x):not(#y){background:#fbf8f0!important}
html:root body .g25-prop .g43-vv .pp-paper a.g-tl:not(#x):not(#y){color:#0f2419!important;opacity:1!important}

/* Overstek fix: undo the bouw2 two-row placement (screenshot on top, text under); no blueprint layer behind the screenshot */
html:root body .g40-ex.g40-ak:not(#x):not(#y){margin-top:120px!important;grid-template-rows:auto!important}
html:root body .g40-ak .g37-exf:not(#x):not(#y){grid-column:2!important;grid-row:1!important}
html:root body .g40-ak .g40-ex-t:not(#x):not(#y){grid-column:1!important;grid-row:1!important;display:flex!important;flex-direction:column;align-items:flex-start;margin-top:0!important}
html:root body .g40-ak .g40-ex-t :is(.lab,h3,a):not(#x):not(#y){grid-column:auto!important;grid-row:auto!important;margin:0!important}
html:root body .g40-ak .g40-ex-t a:not(#x):not(#y){margin-top:10px!important;align-self:flex-start;width:auto!important}
html:root body .g40-ak .g-print:not(#x):not(#y){background:#0c1814!important;border-radius:14px!important}
html:root body .g40-ak .g-print img:not(#x):not(#y){display:block!important;opacity:1!important}

/* vacatures: the form on the page */
html:root body .vac-apply-in:not(#x){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,5vw,80px);align-items:start}
html:root body .vac-apply-t h2{font-size:clamp(38px,3.6vw,54px);line-height:1.05;margin:8px 0 18px}

/* ==== g49 bouw15 (Moreno 9 Nov): the red arrow points up on hover; logo hover options (?lg=1 roll, 2 wave, 3 turn); Websites carries the prices. ==== */

/* main button: the red chip's arrow points straight up on hover */
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(.g22-n):not(#x):not(#y):hover::after{animation:none!important;transform:rotate(-90deg)!important}

/* logo hover: only the chosen variant moves */
html:root body .gh-wm.b14-lg .b15-b{display:none}
html:root body .gh-wm.b14-lg:is(:hover,:focus-visible) .b14-lt{animation:none!important}
html[data-lg="3"]:root body .gh-wm.b14-lg:is(:hover,:focus-visible) .b14-lt{animation:b14-turn .9s cubic-bezier(.45,0,.2,1) both!important;animation-delay:calc(var(--i,0) * 55ms)!important}

/* 1 · Rol: each letter rolls up and the same letter comes back from below, one after the other */
html[data-lg="1"]:root body .gh-wm.b14-lg svg{overflow:hidden!important;clip-path:inset(-1px 0)}
html[data-lg="1"]:root body .gh-wm.b14-lg .b15-b{display:inline}
html[data-lg="1"]:root body .gh-wm.b14-lg :is(.b15-a,.b15-b){transition:transform .62s cubic-bezier(.65,0,.2,1);transition-delay:calc(var(--i,0) * 38ms)}
html[data-lg="1"]:root body .gh-wm.b14-lg .b15-b{transform:translateY(66px)}
html[data-lg="1"]:root body .gh-wm.b14-lg:is(:hover,:focus-visible) .b15-a{transform:translateY(-66px)}
html[data-lg="1"]:root body .gh-wm.b14-lg:is(:hover,:focus-visible) .b15-b{transform:none}

/* 2 · Golf: the letters lift in a wave and settle */
html[data-lg="2"]:root body .gh-wm.b14-lg:is(:hover,:focus-visible) .b15-a{animation:b15-wave .7s cubic-bezier(.3,0,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes b15-wave{0%{transform:none}35%{transform:translateY(-9px)}70%{transform:translateY(2px)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){html:root body .gh-wm.b14-lg :is(.b15-a,.b15-b){transition:none!important;animation:none!important}}

/* Websites: the comparison, hosting and questions now live here */
html:root body #vergelijken{scroll-margin-top:120px}

/* ==== g49 bouw15: Overstek options on the home page (html[data-ex]) ==== */
html:root body .b15-row{display:none}

/* 1 · Paar: same grid and edges as Stilwater (text 1fr, visual 2fr) */
html[data-ex="1"]:root body .g40-ex.g40-ak:not(#x):not(#y){max-width:none!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;gap:clamp(48px,4.4vw,64px)!important;margin-top:160px!important}
html[data-ex="1"]:root body .g40-ak>.g40-ex-t h3:not(#x):not(#y){font-size:clamp(30px,2.5vw,36px)!important}

/* 2 · Werkrij: no separate Overstek block; three equal cards in one row */
html[data-ex="2"]:root body .g40-ak:not(#x):not(#y){display:none!important}
html[data-ex="2"]:root body .b15-row{display:block;margin-top:150px}
html:root body .b15-row .lab{margin:0 0 26px}
html:root body .b15-row-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,40px)}
html:root body .b15-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:#f6efdc}
html:root body .b15-shot{display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#0c1814;box-shadow:0 30px 60px -34px rgba(0,0,0,.8),inset 0 0 0 1px rgba(246,239,220,.08);margin-bottom:16px}
html:root body .b15-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
html:root body .b15-card:hover .b15-shot img{transform:scale(1.03)}
html:root body .b15-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#f2cd45;font-weight:650}
html:root body .b15-card b{font-weight:400;font-size:28px;line-height:1.1}
html:root body .b15-l{color:rgba(246,239,220,.68);font-size:15.5px}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  html.b2-on body .b15-shot{animation:b14-focus linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
}}

/* 3 · Podium: one wide screenshot, caption and button on one line beneath */
html[data-ex="3"]:root body .g40-ex.g40-ak:not(#x):not(#y){grid-template-columns:1fr auto!important;grid-template-rows:auto auto!important;max-width:1240px!important;row-gap:28px!important;margin-top:160px!important}
html[data-ex="3"]:root body .g40-ak .g37-exf:not(#x):not(#y){grid-column:1/-1!important;grid-row:1!important}
html[data-ex="3"]:root body .g40-ak .g40-ex-t:not(#x):not(#y){grid-column:1/-1!important;grid-row:2!important;flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:32px}
html[data-ex="3"]:root body .g40-ak .g40-ex-t h3:not(#x):not(#y){font-size:clamp(28px,2.4vw,36px)!important;flex:1}
html[data-ex="3"]:root body .g40-ak .g40-ex-t .lab:not(#x):not(#y){flex:none;margin-right:8px!important}
html[data-ex="3"]:root body .g40-ak .g40-ex-t a:not(#x):not(#y){margin-top:0!important;align-self:center}

/* ==== g49 bouw15 (Moreno 9 Nov): Werkwijze, better styling. No "Op deze pagina" side list; each part gets a headline column and room;
   the steps read as one line that fills as you scroll; payment as three moments on one line. ==== */
html:root body .sp .sp-rail:not(#x),html:root body .sp .sp-toc:not(#x){display:none!important}
html:root body .wrap.sp:not(#x):not(#y){display:block!important;max-width:1312px}
html:root body .sp .sp-main:not(#x):not(#y){max-width:none!important;width:100%!important;margin:0!important}
html:root body .sp .sp-sec:not(#x):not(#y){display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr);column-gap:clamp(48px,6vw,96px);row-gap:28px;align-items:start;
  padding:120px 0 0!important;margin:0!important;border:0!important}
html:root body .sp .sp-sec>h2:not(#x):not(#y){grid-column:1;grid-row:1/span 6;position:sticky;top:140px;font-size:clamp(44px,4.4vw,64px)!important;line-height:1.02!important;margin:0!important;max-width:10ch}
html:root body .sp .sp-sec>:not(h2):not(#x){grid-column:2}

/* steps: big titles on one vertical line that fills with light as you scroll */
html:root body .sp .g43-st:not(#x):not(#y){position:relative;display:flex!important;flex-direction:column;gap:38px;margin:6px 0 0!important;padding:0 0 0 46px!important;list-style:none}
html:root body .sp .g43-st:not(#x)::before{content:""!important;display:block!important;position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:rgba(246,239,220,.14)!important;border:0!important}
html:root body .sp .g43-st:not(#x)::after{content:""!important;display:block!important;position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:linear-gradient(#f2cd45,#45a964)!important;transform-origin:top;transform:scaleY(1)}
html:root body .sp .g43-st>li:not(#x):not(#y){position:relative;padding:0!important;margin:0!important;border:0!important}
html:root body .sp .g43-st>li:not(#x):not(#y)::before{content:""!important;display:block!important;position:absolute;left:-44px;top:9px;width:16px;height:16px;border-radius:50%;background:#0f2419!important;box-shadow:inset 0 0 0 2px #f2cd45!important;z-index:1;border:0!important;transform:none!important}
html:root body .sp .g43-st>li:last-child:not(#x):not(#y)::before{background:#f2cd45!important}
html:root body .sp .g43-st>li>b:not(#x):not(#y){display:block;font-size:clamp(26px,2.2vw,32px)!important;line-height:1.15!important;font-weight:400!important;color:#f6efdc;margin:0 0 8px!important}
html:root body .sp .g43-st>li>p:not(#x):not(#y){font-size:17px!important;line-height:1.55!important;color:rgba(246,239,220,.74)!important;max-width:52ch;margin:0!important}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  html.b2-on body .sp .g43-st{view-timeline:--b15st block}
  html.b2-on body .sp .g43-st::after{animation:b15-fill linear both;animation-timeline:--b15st;animation-range:entry 30% exit 60%}
}}
@keyframes b15-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
html:root body .sp .g43-plan:not(#x){font-size:16px;color:rgba(246,239,220,.66);max-width:60ch;margin:14px 0 0!important}
html:root body .sp .g43-portal:not(#x):not(#y){background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:4px 0 4px 24px!important;border-left:2px solid #f2cd45!important;margin:6px 0 0!important}
html:root body .sp .g43-portal p:not(.lab):not(#x){font-size:18px!important;line-height:1.5;color:#f6efdc}

/* payment: the three amounts as columns, then three moments on one line */
html:root body .sp #betalen .rows:not(#x):not(#y){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0!important;border:0!important}
html:root body .sp #betalen .rows>div:not(#x):not(#y){display:flex!important;flex-direction:column;gap:8px;padding:22px 26px 24px 0!important;margin-right:26px;border:0!important;border-top:1px solid rgba(246,239,220,.24)!important;opacity:1!important;transform:none!important}
html:root body .sp #betalen .rows dt:not(#x):not(#y){font-family:var(--serif,"Newsreader",serif);font-size:26px!important;color:#f2cd45!important;font-weight:400!important;white-space:nowrap}
html:root body .sp #betalen .rows dd:not(#x):not(#y){margin:0!important;font-size:16px!important;line-height:1.5;color:rgba(246,239,220,.76)!important}
html:root body .sp .g43-pay:not(#x):not(#y){position:relative;display:grid!important;grid-template-columns:repeat(3,1fr);gap:0!important;margin:34px 0 0!important;padding:0!important;list-style:none}
html:root body .sp .g43-pay:not(#x)::before{content:""!important;display:block!important;position:absolute;left:8px;right:8%;top:8px;height:2px;background:linear-gradient(90deg,#f2cd45,#45a964)!important}
html:root body .sp .g43-pay>li:not(#x):not(#y){position:relative;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:34px 20px 0 0!important;display:flex;flex-direction:column;gap:4px}
html:root body .sp .g43-pay>li:not(#x):not(#y)::before{content:""!important;display:block!important;position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#0f2419;box-shadow:inset 0 0 0 2px #f2cd45}
html:root body .sp .g43-pay .g43-pay-k:not(#x){font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#f2cd45;font-weight:650}
html:root body .sp .g43-pay b:not(#x):not(#y){font-size:26px!important;font-weight:400!important;color:#f6efdc}
html:root body .sp #betalen>.sub:not(#x){margin-top:22px!important}

/* agreements: the sentence large */
html:root body .sp #afspraken .qa p:not(#x):not(#y){font-family:var(--serif,"Newsreader",serif);font-size:clamp(24px,2vw,30px)!important;line-height:1.35!important;color:#f6efdc!important;max-width:30ch}
html:root body .sp #afspraken .qa:not(#x):not(#y){border:0!important;padding:0!important;background:none!important}
html:root body .g-invite:not(#x):not(#y){padding-top:150px!important}
html:root body .g-invite .serif:not(#x):not(#y){font-size:clamp(34px,3vw,44px)!important}

/* ==== g49 bouw16 (9 Nov): phone, tablet and very wide screens. Every rule sits in a media query below 1101px or from 1920px,
   so 1180-1919px stays exactly as bouw15. Loaded last. ==== */
.rs-mb,.rs-menu{display:none}

@media (max-width:1100px){
  html:root,html:root body{overflow-x:clip!important}
  html:root body{min-width:0!important}
  /* header: logo left, Menu button right */
  html:root body .gh.gh-mid:not(#x):not(#y){justify-content:stretch!important;left:0!important;right:0!important;width:auto!important;padding-left:16px!important;padding-right:16px!important}
  html:root body .gh-mid .g22-nav:not(#x):not(#y){display:flex!important;align-items:center!important;width:100%!important;max-width:none!important;gap:10px!important;margin:0!important;padding:6px!important;grid-template-columns:none!important}
  html:root body .gh-mid .g22-nav .nv-l:not(#x):not(#y){display:none!important}
  html:root body .gh-mid .g22-nav .nv-r:not(#x):not(#y){display:flex!important;order:2;margin-left:auto;gap:0!important;padding:0!important}
  html:root body .gh-mid .g22-nav .nv-r>:not(.g22-n-cta):not(#x):not(#y){display:none!important}
  html:root body .gh-mid .g22-nav .nv-wm:not(#x):not(#y){order:1;padding:0 0 0 8px!important;min-height:44px;flex:none}
  html:root body .gh-mid .nv-r .g22-n-cta:not(#x):not(#y){margin-left:0!important;height:44px!important}
  html:root body .gh-mid .g22-nav .rs-mb{order:3}
  .rs-mb{display:inline-flex;align-items:center;gap:12px;height:44px;min-width:44px;padding:0 18px 0 16px;border:0;border-radius:999px;background:rgba(246,239,220,.08);box-shadow:inset 0 0 0 1px rgba(246,239,220,.22);color:#fff6dc;font:500 18px/1 Newsreader,Georgia,serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .rs-mb:focus-visible,.rs-menu a:focus-visible{outline:2px solid #ebc22f;outline-offset:3px}
  .rs-mb-l{display:grid;gap:6px;width:20px}
  .rs-mb-l i{display:block;height:1.5px;border-radius:1px;background:currentColor;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .rs-mb[aria-expanded="true"] .rs-mb-l i:first-child{transform:translateY(3.75px) rotate(45deg)}
  .rs-mb[aria-expanded="true"] .rs-mb-l i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  /* the panel */
  .rs-menu:not([hidden]){display:block;position:fixed;inset:0;z-index:2147483000;overflow-y:auto;overscroll-behavior:contain;background:#0f1f18;padding:calc(env(safe-area-inset-top,0px) + 96px) 28px calc(env(safe-area-inset-bottom,0px) + 40px)}
  html.rs-open,html.rs-open body{overflow:hidden!important}
  html:root.rs-open body .gh:not(#x):not(#y){z-index:2147483001!important;transform:none!important;opacity:1!important;visibility:visible!important}
  html:root.rs-open body .gh .g22-nav:not(#x):not(#y){background:transparent!important;box-shadow:none!important}
  html:root.rs-open body .gh .nv-r:not(#x):not(#y){visibility:hidden}
  .rs-menu:focus{outline:0}
  .rs-mn ul{list-style:none;margin:0 0 36px;padding:0}
  .rs-mn li{border-bottom:1px solid rgba(246,239,220,.12)}
  .rs-mn li a{display:flex;align-items:center;min-height:64px;color:#fff6dc;text-decoration:none;font:400 clamp(30px,8vw,44px)/1.1 Newsreader,Georgia,serif;letter-spacing:-.01em}
  .rs-mn li a[aria-current="page"]{color:#ebc22f}
  html:root body .rs-menu a.rs-cta:not(#x){width:100%;justify-content:space-between;font-size:18px;text-decoration:none}

  /* tap targets and small text */
  html:root body footer a:not(#x){display:inline-flex;align-items:center;min-height:44px}
  html:root body main summary:not(#x){min-height:44px}
  html:root body :is(main,footer) label:has(input[type="checkbox"],input[type="radio"]):not(#x){min-height:44px}
  html:root body main :is(.pk-exa,.link,.g42-hpl,.pc-all,.g-tl,.gx-lnk):not(#x):not(#y){min-height:44px;display:inline-flex;align-items:center}
  html:root body main :is(.awd-chips .chip,.awd-tabs button):not(#x):not(#y){min-height:44px}
}

@media (max-width:1100px){
  /* home hero: headline sized to the screen, lines may wrap */
  html:root body .g22-hall .g22-h1:not(#x):not(#y){font-size:clamp(40px,9.6vw,92px)!important;line-height:1.02!important;max-width:100%!important}
  html:root body .g22-hall .g22-h1 .st-l:not(#x){white-space:normal!important;display:block}
  html:root body .g22-hall .g22-head:not(#x):not(#y){padding-left:32px!important;padding-right:32px!important}
  html:root body .g22-hall .g22-side:not(#x):not(#y){width:auto!important;max-width:100%!important;flex-wrap:wrap}
  html:root body .g22-hall .g22-line:not(#x):not(#y){width:auto!important;max-width:36em!important}
  html:root body .g22-hall .g22-acts:not(#x):not(#y){width:auto!important;max-width:100%!important;flex-wrap:wrap;gap:14px!important}
}
@media (max-width:1100px){
  /* hero gallery: below the words, in the flow, scaled to the width */
  html:root body .g22-hall:not(#x):not(#y){height:auto!important;min-height:0!important;padding-bottom:24px!important}
  html:root body .g22-hall .gx-wall:not(#x):not(#y){position:relative!important;inset:auto!important;height:58vw!important;margin-top:28px!important;perspective-origin:50% 30%!important}
  html:root body .g22-wall:not(#x):not(#y){--yc:1vw!important;--ym:4vw!important;--yo:7vw!important}
  html:root body .g22-wall .g22-p2:not(#x):not(#y){--w:74vw!important;--x:0px!important}
  html:root body .g22-hall .g22-wall .g22-p:not(#x):not(#y):not(#z){top:var(--y)!important}
  html:root body .g22-wall .g22-p1:not(#x):not(#y){--w:56vw!important;--x:-52vw!important}
  html:root body .g22-wall .g22-p3:not(#x):not(#y){--w:56vw!important;--x:52vw!important}
  html:root body .g22-wall .g22-p0:not(#x):not(#y){--w:44vw!important;--x:-86vw!important}
  html:root body .g22-wall .g22-p4:not(#x):not(#y){--w:44vw!important;--x:86vw!important}
  html:root body .g22-hall .g22-line:not(#x):not(#y):not(#z){white-space:normal!important}
  /* home prices: two cards per row on tablet, no staircase */
  html:root body #prijzen .gx-rail:not(#x):not(#y){grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch!important;row-gap:0!important}
  html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row:not(#x):not(#y){--bt-h:auto;min-height:0!important;width:auto!important;padding:28px 24px 30px!important}
  html:root body #prijzen .gx-rail .gx-label.g45-row.g45-row:not(#x):not(#y):not(#z){translate:none!important;animation-name:none!important}
}
@media (max-width:599px){
  html:root body #prijzen .gx-rail:not(#x):not(#y){grid-template-columns:minmax(0,1fr)!important}
  html:root body .gh-mid .nv-r .g22-n-cta:not(#x):not(#y):not(#z):not(#w){display:none!important}
  html:root body .g22-hall .g22-head:not(#x):not(#y){padding-left:20px!important;padding-right:20px!important}
  html:root body .g22-hall .g22-acts:not(#x):not(#y){flex-direction:column;align-items:stretch}
  html:root body .g22-hall .g22-acts>a:not(#x):not(#y){justify-content:space-between;width:100%;margin:0!important}
}
@media (max-width:1100px){
  /* inner pages: the page headline fits the screen */
  html:root.b9-sub body main h1:not(#x):not(#y):not(#z){font-size:clamp(42px,8.4vw,84px)!important;line-height:1.02!important;max-width:100%!important}
}
@media (max-width:599px){
  html:root.b9-sub body main h1:not(#x):not(#y):not(#z){font-size:clamp(40px,11.4vw,54px)!important}
  /* demo widgets: picture left, words and price right */
  html:root body .fd .fd-o:not(#x):not(#y){display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;column-gap:14px!important;align-items:start!important;text-align:left}
  html:root body .fd .fd-o>img:not(#x){grid-row:1/3;width:88px!important;height:auto!important}
  html:root body .fd .fd-o>:is(.t,.pr):not(#x){grid-column:2!important;min-width:0}
}
@media (max-width:1100px){
  html:root body .fd .fd-o:not(#x):not(#y){display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;column-gap:14px!important;align-items:start!important;text-align:left}
  html:root body .fd .fd-o>img:not(#x){grid-row:1/3;width:88px!important;height:auto!important}
  html:root body .fd .fd-o>:is(.t,.pr):not(#x){grid-column:2!important;min-width:0}
}
@media (max-width:900px){
  /* one column below 900px: werkwijze sections and payment steps, brand tiers, demos beside their text, contact details */
  html:root body main :is(.sp-sec,.g43-pay,.mk-tier,.g38-demo,.g40-ex,.kq-col,.pk-row):not(#x):not(#y):not(#z){grid-template-columns:minmax(0,1fr)!important}
  html:root body main :is(.sp-sec,.g43-pay,.mk-tier,.g38-demo,.g40-ex,.kq-col)>*:not(#x):not(#y):not(#z){grid-column:auto!important;grid-row:auto!important;min-width:0}
  html:root body main .pk-row>*:not(input):not(#x):not(#y):not(#z){grid-column:1/-1!important;grid-row:auto!important;min-width:0}
  html:root body main .pk-row>input:not(#x):not(#y):not(#z){grid-column:1!important;grid-row:auto!important}
  html:root body .fd .fd-o:not(#x):not(#y){display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;column-gap:14px!important;align-items:start!important;text-align:left}
  html:root body .fd .fd-o>img:not(#x){grid-row:1/3;width:88px!important;height:auto!important}
  html:root body .fd .fd-o>:is(.t,.pr):not(#x){grid-column:2!important;min-width:0}
  html:root body main :is(h1,h2,h3):not(#x){overflow-wrap:break-word}
}

/* ==== very wide screens: the page grows as one piece, same proportions as the 1600px layout ==== */
@media (min-width:1920px){html:root body :is(main,footer,header.gh):not(#x){zoom:1.2}}
@media (min-width:2240px){html:root body :is(main,footer,header.gh):not(#x){zoom:1.4}}
@media (min-width:2560px){html:root body :is(main,footer,header.gh):not(#x){zoom:1.6}}
@media (max-width:1100px){
  /* home prices intro: heading, example and words in one column */
  html:root body #prijzen.gx-room:not(#x):not(#y):not(#z){grid-template-columns:minmax(0,1fr)!important}
  html:root body #prijzen.gx-room>:not(.gx-offer):not(#x):not(#y):not(#z),html:root body #prijzen .gx-offer>*:not(#x):not(#y):not(#z){grid-column:1/-1!important;grid-row:auto!important;max-width:100%!important;min-width:0}
  html:root body #prijzen .gx-otxt:not(#x):not(#y):not(#z){max-width:40em!important;width:auto!important}
  /* werkwijze price steps: words may wrap */
  html:root body main dl.rows :is(dt,dd,b,span):not(#x):not(#y){white-space:normal!important;min-width:0}
  html:root body main dl.rows:not(#x):not(#y){column-gap:24px!important}
  html:root body main dl.rows>*:not(#x){min-width:0}
  /* demo widgets: price below the name, not on top of it */
  html:root body .fd .fd-o>:is(.t,.pr):not(#x):not(#y){position:static!important;inset:auto!important;transform:none!important}
  html:root body .fd .fd-o>img:not(#x):not(#y):not(#z){grid-column:1!important;grid-row:1/span 2!important}
  html:root body .fd .fd-o>.t:not(#x):not(#y):not(#z){grid-column:2!important;grid-row:1!important}
  html:root body .fd .fd-o>.pr:not(#x):not(#y):not(#z){grid-column:2!important;grid-row:2!important;margin-top:4px!important}
}


/* ==== g49 bouw18 (Moreno 9 Nov evening) ==== */

/* home hero: headline, line and buttons sit lower, more air under the menu */
html:root body .g22-hall .g47-head:not(#x):not(#y){padding-top:150px!important}

/* main button hover: the arrow points to the top right, not straight up */
html:root body :is(.btn:not(.ghost),.gx-btn,.g37-cta):not(.g22-n):not(#x):not(#y):not(#z):hover::after{transform:rotate(-45deg)!important}

/* home examples: "Bekijk Stilwater" and the portfolio button line up with the text above */
html:root body :is(.g37-ex :is(a.b14-gh,a.gx-lnk,a.g46-na),a.pc-goa):not(#x):not(#y){margin-left:0!important}

/* closing section (home, portfolio and the rest): headline on top, then one compact text column beside the picture,
   the two actions side by side, the main button plus a text link with an arrow */
html:root body .g-close .g-close-in:not(#x):not(#y):not(#z){display:grid!important;gap:0 clamp(56px,6vw,104px)!important;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)!important;
  grid-template-rows:auto auto auto auto auto 1fr!important;column-gap:clamp(56px,6vw,104px)!important;row-gap:0!important;align-items:start}
html:root body .g-close-in>div:not(#x){display:contents!important}
html:root body .g-close-in h2:not(#x):not(#y){grid-column:1/-1!important;grid-row:1!important;margin:0 0 64px!important}
html:root body .g-close-in .sub:not(#x):not(#y){grid-column:1!important;grid-row:2!important;margin:0!important;max-width:44ch}
html:root body .g-close-in .g-acts:not(#x):not(#y){grid-column:1!important;grid-row:3!important;display:flex!important;flex-flow:row wrap!important;align-items:center!important;gap:18px 36px!important;margin:36px 0 0!important}
html:root body .g-close-in .g-acts .g-mail:not(#x){display:contents!important}
html:root body .g-close-in .g-fine:not(#x):not(#y){grid-column:1!important;grid-row:4!important;margin:22px 0 0!important}
html:root body .g-close-in .g-iv:not(#x):not(#y){grid-column:1!important;grid-row:5!important;margin:40px 0 0!important}
html:root body .g-close-in>.g-close-art:not(#x):not(#y){grid-column:2!important;grid-row:2/7!important;margin:0!important;align-self:start}
/* the second action is a text link with an arrow (no outline pill) */
html:root body .g-close-in .g-acts a.b18-tl:not(#x):not(#y){height:auto!important;padding:0!important;background:none!important;border:0!important;transform:none}
html:root body .g-close-in .g-acts a.b18-tl:not(#x):not(#y)::before{display:none!important}

/* package summary card (Websites and Merkidentiteit): real inner space */
html:root body aside.pk-sum:not(#x):not(#y){padding:30px 34px 34px!important;box-sizing:border-box}
html:root body aside.pk-sum>.lab:not(#x):not(#y){padding:0 0 18px!important}
html:root body aside.pk-sum :is(.btn,.g37-req,.gx-btn):not(#x):not(#y){width:100%;justify-content:center}

/* package rows: no permanent tint on Op maat; every row gets the same quiet hover, the chosen row keeps its own look */
html:root body .pk-row.pk-om22:not(:has(input:checked)):not(#x):not(#y){background-image:none!important}
html:root body .pk-rows .pk-row:not(:has(input:checked)):not(#x):not(#y){transition:background-color .25s}
html:root body .pk-rows .pk-row:not(:has(input:checked)):hover:not(#x):not(#y){background-color:rgba(246,239,220,.025)!important}

/* forms: pills with room around the words, no radio dot over the text */
html:root body .g37-pill:not(#x){position:relative}
html:root body .g37-pill input:not(#x):not(#y){position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important;pointer-events:none}
html:root body .g37-pill span:not(#x):not(#y){display:inline-flex!important;align-items:center;min-height:46px;padding:0 22px!important;font-size:15px!important;line-height:1;cursor:pointer;transition:box-shadow .2s,background .2s,color .2s}
html:root body .g37-pill:hover input:not(:checked)+span:not(#x):not(#y){box-shadow:inset 0 0 0 1px rgba(246,239,220,.5)!important}
html:root body .g37-pill input:focus-visible+span:not(#x):not(#y){outline:2px solid #ebc22f;outline-offset:3px}
html:root body .g37-pills:not(#x):not(#y){display:flex!important;flex-wrap:wrap;gap:10px!important}

/* contact form: calmer card, roomier fields */
html:root body .g37-card.g37-card-ct:not(#x):not(#y){padding:48px 48px 44px!important;border-radius:24px!important}
html:root body .g37-card-ct .g37-fh:not(#x):not(#y){font-size:clamp(30px,2.4vw,36px)!important;margin:0 0 22px!important}
html:root body .g37-card-ct .g37-grid:not(#x):not(#y){gap:24px 20px!important;margin-top:28px!important}
html:root body .g37-card-ct :is(.g37-fld>label,.g37-fld>legend):not(#x):not(#y){font-size:14px!important;margin:0 0 10px!important;color:rgba(246,239,220,.8)!important}
html:root body .g37-card-ct .g37-in:not(#x):not(#y){height:54px!important;padding:0 18px!important;font-size:16px!important}
html:root body .g37-card-ct textarea:not(#x):not(#y){min-height:150px!important;padding:16px 18px!important;font-size:16px!important}
html:root body .g37-card-ct .g42-hpl:not(#x):not(#y){display:inline-block;margin-top:18px!important}

/* werkwijze: the line ends on the last dot (Live) and fills as you scroll; each step lights up when the line reaches it */
html:root body .sp .g43-st:not(#x)::before,html:root body .sp .g43-st:not(#x)::after{bottom:var(--b18-end,10px)!important}
html.b18-st body .sp .g43-st:not(#x)::after{animation:none!important;transform:scaleY(var(--b18-p,0))!important;transition:transform .12s linear}
html.b18-st body .sp .g43-st>li:not(#x):not(#y){opacity:.38;transform:translateX(14px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
html.b18-st body .sp .g43-st>li.b18-on:not(#x):not(#y){opacity:1;transform:none}
html.b18-st body .sp .g43-st>li:not(#x):not(#y)::before{transition:background-color .35s,box-shadow .35s,transform .35s}
html.b18-st body .sp .g43-st>li.b18-on:not(#x):not(#y)::before{background:#f2cd45!important;box-shadow:0 0 0 6px rgba(242,205,69,.14)!important}
html.b18-st body .sp .g43-st>li:last-child:not(.b18-on):not(#x):not(#y)::before{background:#0f2419!important}
html.b18-st body .sp .g43-st>li:last-child.b18-on:not(#x):not(#y)::before{transform:scale(1.3)!important;box-shadow:0 0 0 8px rgba(242,205,69,.16),0 0 24px rgba(242,205,69,.5)!important}
html.b18-st body .sp .g43-st>li:last-child.b18-on>b:not(#x):not(#y){color:#f2cd45!important}
@media (prefers-reduced-motion:reduce){html.b18-st body .sp .g43-st>li:not(#x):not(#y){opacity:1;transform:none}}
html:root body .g37-pill span:not(#x):not(#y)::before{display:none!important}
@media (min-width:1101px){html:root body .pk.pk-side:not(#x):not(#y):not(#z){grid-template-columns:minmax(0,1fr) 392px!important}}
html:root body aside.pk-sum :is(a,p,div):not(#x){max-width:100%;box-sizing:border-box}
html:root body aside.pk-sum .g-tl:not(#x):not(#y),html:root body aside.pk-sum a.gx-lnk:not(#x):not(#y){display:flex!important;justify-content:space-between;width:100%}
html:root body aside.pk-sum :is(.g-tl,a.gx-lnk):not(#x):not(#y):not(#z){font-size:16px!important;gap:10px!important}

/* ==== g49 bouw19 (Moreno 9 Nov night) ==== */

/* hero: the five prints stand straight, no inward tilt */
html:root body .gx-hall .g22-p:not(#x):not(#y){--a:0deg!important}

/* hero entrance: no scan line, no top-down develop; the variant below (?hi=1|2|3) does the entrance */
html:root body .g22-p .gx-frame:not(#x):not(#y)::after{content:none!important;animation:none!important}
html:root body .g22-p .gx-frame:not(#x)>:is(img,video){animation:none!important}

@media (prefers-reduced-motion:no-preference){
  /* 1 · Licht aan: the prints arrive in the dark and their light switches on, Stilwater first, then outwards */
  @keyframes b19-light{0%{filter:brightness(.05) saturate(.3)}55%{filter:brightness(.6) saturate(.85)}100%{filter:none}}
  @keyframes b19-halo{0%{box-shadow:0 0 0 0 rgba(255,232,180,0)}50%{box-shadow:0 0 140px 18px rgba(255,232,180,.26)}}
  html[data-hi="1"]:root body .g22-p .gx-frame:not(#x)>:is(img,video){animation:b19-light 1.5s cubic-bezier(.3,0,.2,1) var(--bt-dl) both!important}
  html[data-hi="1"]:root body .g22-p .gx-frame:not(#x){animation:b19-halo 2.2s ease-out var(--bt-dl) both}

  /* 2 · Scherpstellen: each print comes into focus like a lens, Stilwater first */
  @keyframes b19-focus{0%{filter:blur(22px) brightness(.7);transform:scale(1.07)}100%{filter:none;transform:none}}
  html[data-hi="2"]:root body .g22-p .gx-frame:not(#x)>:is(img,video){animation:b19-focus 1.4s cubic-bezier(.2,.7,.2,1) var(--bt-dl) both!important}

  /* 3 · Uitwaaieren: Stilwater rises first, the other four slide out from behind it to their place */
  @keyframes b19-fan{from{translate:calc(var(--x,0px) * -1) 0;scale:.92;opacity:0}}
  @keyframes b19-rise{from{translate:0 36px;opacity:0}}
  html[data-hi="3"]:root body .gx-hall .g22-p2:not(#x)>span{animation:b19-rise 1s cubic-bezier(.2,.8,.2,1) .15s both!important}
  html[data-hi="3"]:root body .gx-hall .g22-p:not(.g22-p2):not(#x)>span{animation:b19-fan 1.6s cubic-bezier(.75,0,.2,1) 1s both!important}
  html[data-hi="3"]:root body .gx-hall :is(.g22-p0,.g22-p4):not(#x)>span{animation-delay:1.12s!important}
  html[data-hi="3"]:root body .g22-p .gx-refl:not(#x){animation:bt-show .01s linear 2.4s backwards!important}
}

/* merkidentiteit: the big photos are a size smaller and sit under the text column */
html:root body .g46-mc-part>figure.g46-mc-ov:is(:has(img[src*="-gids-"]),:has(img[src*="kaart"])):not(#x):not(#y),
html:root body .g41-world>figure.g41-big:not(#x):not(#y){width:72%!important;max-width:72%!important;margin-left:auto!important;margin-right:0!important}

/* text links with an arrow: on hover the arrow glides forward and stays, no restart */
html:root body :is(.gx-lnk,.g-tl,a.g46-na):not(#x):not(#y)::after{transition:transform .38s cubic-bezier(.2,.8,.2,1),background-color .3s,box-shadow .3s}
html:root body :is(.gx-lnk,.g-tl,a.g46-na):not(#x):not(#y):not(#z):hover::after{animation:none!important;transform:translateX(5px)!important}

/* werkwijze, betalen in delen: the line ends on the last dot and the three parts light up one after the other */
html:root body .sp .g43-pay:not(#x):not(#y)::before{right:calc(33.333% - 9px)!important;transform-origin:0 50%;transition:transform 1.8s cubic-bezier(.45,0,.2,1)}
html.b19-js body .sp .g43-pay:not(.b19-go):not(#x):not(#y)::before{transform:scaleX(0)}
html.b19-js body .sp .g43-pay>li:not(#x):not(#y){opacity:.3;transform:translateY(10px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0) * .82s)}
html.b19-js body .sp .g43-pay>li:not(#x):not(#y)::before{transition:background-color .4s,box-shadow .4s,transform .4s;transition-delay:calc(var(--k,0) * .82s)}
html.b19-js body .sp .g43-pay>li:nth-child(2){--k:1}
html.b19-js body .sp .g43-pay>li:nth-child(3){--k:2}
html.b19-js body .sp .g43-pay.b19-go>li:not(#x):not(#y){opacity:1;transform:none}
html.b19-js body .sp .g43-pay.b19-go>li:not(#x):not(#y)::before{background:#f2cd45!important;box-shadow:0 0 0 6px rgba(242,205,69,.14)!important}
html.b19-js body .sp .g43-pay.b19-go>li:last-child:not(#x):not(#y)::before{transform:scale(1.25);box-shadow:0 0 0 8px rgba(242,205,69,.16),0 0 24px rgba(242,205,69,.5)!important}
@media (prefers-reduced-motion:reduce){html.b19-js body .sp .g43-pay>li:not(#x):not(#y){opacity:1;transform:none}html.b19-js body .sp .g43-pay:not(#x):not(#y)::before{transform:none}}

/* home merk section: the pickup sits whole in its crop */
html:root body img[src*="ovs3-pickup"]:not(#x){object-position:62% 60%!important}

/* ==== g49 bouw21 (9 Nov late): responsive fixes from the qa20 audit ==== */

/* B1 merkidentiteit, merkgids: below 1440 the page list gets real room beside the spread */
@media (min-width:1001px) and (max-width:1439px){
  html:root body .g46-gr:not(#x):not(#y){grid-template-columns:minmax(0,1fr) clamp(250px,24vw,300px)!important}
  html:root body .g46-gr>.g46-gr-m:not(#x):not(#y){width:auto!important;min-width:0!important;max-width:100%!important}
}

/* B3 hosting en onderhoud: text left, example card right, both inside the screen */
@media (min-width:1101px){
  html:root body .g-roomo:not(.g25-oo) .g-roomo-in:not(#x):not(#y){grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important;column-gap:clamp(48px,5vw,96px)!important;align-items:center!important}
}
@media (max-width:1100px){
  html:root body .g-roomo:not(.g25-oo) .g-roomo-in:not(#x):not(#y){grid-template-columns:minmax(0,1fr)!important}
}
html:root body .g-roomo .g-roomo-t dd:not(#x){white-space:normal!important}

/* B4 closing headline (home, portfolio): wraps and scales under 1200 */
@media (max-width:1199px){
  html:root body .g-close h2:not(#x):not(#y):not(#z){white-space:normal!important;font-size:clamp(44px,9vw,104px)!important;text-wrap:balance;max-width:100%!important}
}

/* B5 gratis homepage: under 1240 the opening stacks so the headline keeps its width */
@media (max-width:1239px){
  html:root body .g37-open-in:not(#x):not(#y){grid-template-columns:minmax(0,1fr)!important;row-gap:48px!important}
  html:root body .g37-open-t:not(#x):not(#y){max-width:none!important}
}

/* B6 merkidentiteit two-column headlines + U1 long Dutch words: smaller and allowed to wrap */
@media (max-width:1299px){
  html:root body section.g31-pair .g31-col h2:not(#x):not(#y){white-space:normal!important;font-size:clamp(34px,4.6vw,56px)!important;text-wrap:balance}
}
@media (max-width:700px){
  html:root body main h2.serif:not(#x):not(#y):not(#z):not(#w),html:root body main article.prose h2:not(#x):not(#y):not(#z):not(#w),html:root body main :is(.pz-two,.vac-h,.cw-side) h2:not(#x):not(#y):not(#z):not(#w){
    font-size:min(var(--b21-h2,40px),9.4vw)!important;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal;word-break:normal}
}

/* B7 + U6 comparison tables on phones: scroll sideways inside their own box */
@media (max-width:700px){
  html:root body main table:not(#x){display:block!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  html:root body main table :is(th,td):not(#x){min-width:7.5em}
}

/* B8 single-line text links on phones: wrap instead of being cut */
@media (max-width:900px){
  html:root body :is(p.vac-jump,section#kosten)>a.g-tl:not(#x):not(#y),html:root body main a.g-tl:not(#x):not(#y){white-space:normal!important;justify-content:flex-start!important;text-align:left;height:auto!important}
  html:root body p.vac-jump:not(#x){flex-wrap:wrap!important}
}

/* B9 buttons and forms on phones: labels wrap inside the pill, cards less padding */
@media (max-width:560px){
  html:root body main :is(#mk-go,#pk-mail,button.g37-go,.sj-demo a.btn,.g-hm-t a.gx-lnk,a.btn,.gx-btn,.g37-cta):not(.g22-n):not(#x):not(#y){white-space:normal!important;height:auto!important;min-height:52px;padding-top:12px!important;padding-bottom:12px!important;line-height:1.25!important;text-align:left;max-width:100%!important;box-sizing:border-box}
  html:root body aside.pk-sum:not(#x):not(#y){padding:24px 20px 26px!important}
  html:root body .g37-card:not(#x):not(#y):not(#z),html:root body .g37-card.g37-card-ct:not(#x):not(#y){padding:26px 18px 24px!important}
}

/* B10 Ankerweg product list on phones: name and price on one row, code above, stock and order below */
@media (max-width:560px){
  html:root body ul#aw-res>li:not(#x):not(#y){grid-template-areas:none!important;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr) auto!important;column-gap:14px!important;row-gap:8px!important}
  html:root body ul#aw-res>li>.code:not(#x){grid-column:1/-1!important;grid-row:auto!important;width:auto!important}
  html:root body ul#aw-res>li>.n:not(#x){grid-column:1!important;grid-row:auto!important}
  html:root body ul#aw-res>li>.p:not(#x){grid-column:2!important;grid-row:auto!important}
  html:root body ul#aw-res>li>.s:not(#x){grid-column:1/-1!important;grid-row:auto!important;justify-self:start!important}
  html:root body ul#aw-res>li>.qty:not(#x){grid-column:1!important;grid-row:auto!important}
  html:root body ul#aw-res>li>.awd-btn:not(#x){grid-column:2!important;grid-row:auto!important}
}

/* B11 Bruinhart demo tiles 601-1100: keep the desktop tile, photo full, title over it */
@media (min-width:601px) and (max-width:1100px){
  html:root body ul.fd-opts.lay-bold button.fd-o:not(#x):not(#y){display:block!important;position:relative!important;aspect-ratio:1/1;padding:0!important}
  html:root body ul.fd-opts.lay-bold button.fd-o>img:not(#x):not(#y){position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  html:root body ul.fd-opts.lay-bold button.fd-o>.t:not(#x):not(#y){position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;padding:40px 12px 12px!important;background:linear-gradient(rgba(0,0,0,0),rgba(20,24,23,.88))!important}
  html:root body ul.fd-opts.lay-bold button.fd-o>.t b:not(#x){font-size:clamp(14px,2.1vw,20px)!important;overflow-wrap:break-word;hyphens:auto}
}

/* B12 Stilwater price columns on phones: one under the other */
@media (max-width:600px){
  html:root body .cw-cols:not(#x):not(#y){grid-template-columns:minmax(0,1fr)!important;row-gap:40px!important}
}

/* B13 werkwijze price rows (tablet and small laptop): amount above the explanation */
@media (min-width:811px) and (max-width:1360px){
  html:root body .sp dl.rows>div:not(#x):not(#y){flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
}

/* U2 werkwijze, betalen in delen, on phones: a vertical line from dot to dot */
@media (max-width:810px){
  html:root body .sp .g43-pay:not(#x):not(#y)::before{display:none!important}
  html:root body .sp .g43-pay>li:not(#x):not(#y){padding:0 0 30px 40px!important}
  html:root body .sp .g43-pay>li:not(#x):not(#y)::before{top:4px!important;left:0!important}
  html:root body .sp .g43-pay>li:not(:last-child):not(#x):not(#y)::after{content:"";position:absolute;left:8px;top:24px;bottom:-2px;width:2px;background:linear-gradient(#f2cd45,#45a964);transform-origin:50% 0;transition:transform .8s cubic-bezier(.45,0,.2,1);transition-delay:calc(var(--k,0) * .82s + .3s)}
  html.b19-js body .sp .g43-pay:not(.b19-go)>li:not(#x):not(#y)::after{transform:scaleY(0)}
}

/* U3 blog cards: the "Voorbeeld" label sits above the mockup title instead of on it */
@media (max-width:1100px){
  html:root body .g43-pv .g43-m-lab:not(#x):not(#y){position:static!important;display:block;margin:0 0 4px!important}
}

/* U5 werkwijze: no empty strip before the closing question */
html:root body .sp+section.g-invite:not(#x):not(#y){margin-top:0!important;padding-top:clamp(72px,7vw,110px)!important}

/* M1 websites: the sticky price bar does not cover the footer */
@media (max-width:700px){html:root body:has(#pk-bar) footer:not(#x){padding-bottom:calc(var(--b21-bar,84px) + 16px)!important}}