/* Cortex Digital v6: "Van lucht naar grond", made calmer and more finished.
   Painted scenes carry the atmosphere. Every band melts into the next one: each painting fades out (mask-image)
   into a row of colours sampled from its own edge, and that row fades into the band colour, which runs into the
   next band. The hero is a slow day and night cycle of three aligned paintings, with a code drawn sun and moon
   that pass behind the painted clouds (a cut out cloud layer sits on top of them).
   Code only draws what moves: the cloud headline, sun, moon, stars, the two Achterhoek flags, the dolphin's water,
   the swallow, the brain and its mycelium. */

:root{
  --ink:#1B1F1A; --muted:#454A40; --card:#FFF9F1; --light:#FFF6E9; --field-bg:#F4EADB;
  --bfg:var(--ink); --cfg:#1B1F1A; --btn:#1B1F1A; --btn-fg:#FFF9F1; --btn-hover:#3A4036;
  --fg:var(--ink); --bg:#C9E5F8;
  /* the band chain, top to bottom (painting edge colours are sampled in prep.py) */
  --herken-top:#C9E5F8; --herken-mid:#DCEDF6; --herken-bot:#ECEFE8;
  --verhaal-mid:#F5EBDA; --strip-top:#FADDB4; --strip-bot:#8A8740; --meadow-deep:#7A9443; --meadow-haze:#B9CFA0;
  --werk-sky:#92CAFC; --cobble:#B09187; --cobble-2:#A9897E;
  --path:#EFD6A6; --path-2:#E8CB95; --dusk-1:#C9A374; --dusk-2:#6E5638; --wp-top:#0B1818; --wp-bot:#131B19;
  --av-top:#7B82D6; --av-bot:#664E37; --soil:#5A3E2B; --deep:#3A2819;
  --paint-dim:transparent; --strip-f:none;
  --card-glass:rgba(255,249,241,.93); --nav-fg:#1B1F1A; --nav-bg:rgba(255,255,255,.2); --bar-plate:rgba(255,246,227,.88); --bar-line:rgba(20,33,61,.12); --barh:100px;
  /* scene palette for the code drawn sprites (one token per palette letter) */
  --c-K:#1B1F1A; --c-W:#FFFFFF; --c-w:#DCEBF8; --c-b:#B3D3F1; --c-Y:#FFD34E; --c-y:#FFF3A6; --c-Z:#FFC531; --c-z:#F7B733; --c-j:#FFD34E; --c-J:#EBC9A6; --c-o:#FFF0B0; --c-i:#3A2A1E;
  --c-O:#F59E3B; --c-R:#D9573F; --c-r:#A83F2F; --c-T:#D99A5B; --c-t:#B9763E; --c-d:#7A4B26;
  --c-G:#8CD15A; --c-H:#A8E07A; --c-g:#4F9F3A; --c-F:#2E7A3E; --c-f:#1F5C33; --c-S:#F1D9A8; --c-s:#D9B57A;
  --c-P:#F08AB4; --c-p:#C9628E; --c-C:#EF6A4F; --c-c:#C8503A; --c-B:#5FB3F5; --c-N:#2F4A6E; --c-L:#FFE27A;
  --c-M:#A3A9AE; --c-m:#767D84; --c-q:#FFF1D6; --c-V:#9A6A44; --c-v:#6E4A2E; --c-A:#A6D8C4; --c-a:#8CC7B0;
  --c-E:#4A3222; --c-e:#8B6542; --c-X:#E9A3B9; --c-x:#D98AA6; --c-U:#7CB64F; --c-u:#679E3F;
  --px-ink:#1B1F1A; --px-g:#4F9F3A; --px-c:#EF6A4F; --px-b:#3A95E6; --px-s:#C2C4BA;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --pixel:'Pixelify Sans','Courier New',monospace;
  --gut:clamp(16px,4vw,48px);
  --clip-xs:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px),0 4px,2px 4px,2px 2px,4px 2px);
  --clip-s:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 2px,calc(100% - 6px) 2px,calc(100% - 6px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 6px,calc(100% - 2px) 6px,calc(100% - 2px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 2px) calc(100% - 8px),calc(100% - 2px) calc(100% - 6px),calc(100% - 4px) calc(100% - 6px),calc(100% - 4px) calc(100% - 4px),calc(100% - 6px) calc(100% - 4px),calc(100% - 6px) calc(100% - 2px),calc(100% - 8px) calc(100% - 2px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 2px),6px calc(100% - 2px),6px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 6px),2px calc(100% - 6px),2px calc(100% - 8px),0 calc(100% - 8px),0 8px,2px 8px,2px 6px,4px 6px,4px 4px,6px 4px,6px 2px,8px 2px);
  --clip-l:polygon(15px 0,calc(100% - 15px) 0,calc(100% - 15px) 3px,calc(100% - 12px) 3px,calc(100% - 12px) 6px,calc(100% - 9px) 6px,calc(100% - 9px) 9px,calc(100% - 6px) 9px,calc(100% - 6px) 12px,calc(100% - 3px) 12px,calc(100% - 3px) 15px,100% 15px,100% calc(100% - 15px),calc(100% - 3px) calc(100% - 15px),calc(100% - 3px) calc(100% - 12px),calc(100% - 6px) calc(100% - 12px),calc(100% - 6px) calc(100% - 9px),calc(100% - 9px) calc(100% - 9px),calc(100% - 9px) calc(100% - 6px),calc(100% - 12px) calc(100% - 6px),calc(100% - 12px) calc(100% - 3px),calc(100% - 15px) calc(100% - 3px),calc(100% - 15px) 100%,15px 100%,15px calc(100% - 3px),12px calc(100% - 3px),12px calc(100% - 6px),9px calc(100% - 6px),9px calc(100% - 9px),6px calc(100% - 9px),6px calc(100% - 12px),3px calc(100% - 12px),3px calc(100% - 15px),0 calc(100% - 15px),0 15px,3px 15px,3px 12px,6px 12px,6px 9px,9px 9px,9px 6px,12px 6px,12px 3px,15px 3px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --muted:#B9C0CF; --card:#1E2537; --field-bg:#2B3550;
    --bfg:#F4F1EA; --cfg:#F4F1EA; --btn:#FFD45E; --btn-fg:#1B1F1A; --btn-hover:#FFE38F; --fg:#F4F1EA; --bg:#14224C;
    --herken-top:#16285A; --herken-mid:#22356A; --herken-bot:#34405E;
    --verhaal-mid:#4A4A5E; --strip-top:#7D705A; --strip-bot:#454420; --meadow-deep:#34401F; --meadow-haze:#3C4D55;
    --werk-sky:#476487; --cobble:#554A53; --cobble-2:#4E444B;
    --path:#584A33; --path-2:#52452F; --dusk-1:#3F3527; --dusk-2:#262019;
    --paint-dim:rgba(10,16,40,.55); --strip-f:brightness(.5) saturate(.85);
    --card-glass:rgba(30,37,55,.93); --nav-fg:#F4F1EA; --nav-bg:rgba(16,24,52,.62); --bar-plate:rgba(18,26,48,.88); --bar-line:rgba(0,0,0,.3);
    --c-W:#C9D3EA; --c-w:#A6B4D6; --c-b:#8291BA; --c-Y:#FFF2C4; --c-y:#FFFFFF; --c-Z:transparent; --c-z:#E6DCB8; --c-j:#E3D7AE; --c-J:#8C735C; --c-o:#FFE48A;
    --c-R:#A2493A; --c-r:#7A3329; --c-T:#9C6E43; --c-t:#845A35; --c-d:#553519;
    --c-G:#2F6431; --c-H:#3F7A3D; --c-g:#2D5F2F; --c-F:#1F4F33; --c-f:#153A26; --c-S:#6B5A3F; --c-s:#4E4130;
    --c-P:#E07FA8; --c-p:#B35C83; --c-C:#D2604A; --c-c:#A84A39; --c-B:#3C5FA8; --c-N:#18213D; --c-L:#FFD45E;
    --c-M:#737C8C; --c-m:#565E6C; --c-q:#D9CDB4; --c-A:#2B4470; --c-a:#253C63; --c-E:#2E1F15; --c-e:#5E432E;
    --c-X:#5C4A7E; --c-x:#4C3D6B; --c-U:#2F5A36; --c-u:#284D2E;
    --px-ink:#F4F1EA; --px-g:#6DBB5A; --px-c:#F07F66; --px-b:#7DB8F0; --px-s:#4A5368;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --muted:#B9C0CF; --card:#1E2537; --field-bg:#2B3550;
  --bfg:#F4F1EA; --cfg:#F4F1EA; --btn:#FFD45E; --btn-fg:#1B1F1A; --btn-hover:#FFE38F; --fg:#F4F1EA; --bg:#14224C;
  --herken-top:#16285A; --herken-mid:#22356A; --herken-bot:#34405E;
  --verhaal-mid:#4A4A5E; --strip-top:#7D705A; --strip-bot:#454420; --meadow-deep:#34401F; --meadow-haze:#3C4D55;
  --werk-sky:#476487; --cobble:#554A53; --cobble-2:#4E444B;
  --path:#584A33; --path-2:#52452F; --dusk-1:#3F3527; --dusk-2:#262019;
  --paint-dim:rgba(10,16,40,.55); --strip-f:brightness(.5) saturate(.85);
  --card-glass:rgba(30,37,55,.93); --nav-fg:#F4F1EA; --nav-bg:rgba(16,24,52,.62); --bar-plate:rgba(18,26,48,.88); --bar-line:rgba(0,0,0,.3);
  --c-W:#C9D3EA; --c-w:#A6B4D6; --c-b:#8291BA; --c-Y:#FFF2C4; --c-y:#FFFFFF; --c-Z:transparent; --c-z:#E6DCB8; --c-j:#E3D7AE; --c-J:#8C735C; --c-o:#FFE48A;
  --c-R:#A2493A; --c-r:#7A3329; --c-T:#9C6E43; --c-t:#845A35; --c-d:#553519;
  --c-G:#2F6431; --c-H:#3F7A3D; --c-g:#2D5F2F; --c-F:#1F4F33; --c-f:#153A26; --c-S:#6B5A3F; --c-s:#4E4130;
  --c-P:#E07FA8; --c-p:#B35C83; --c-C:#D2604A; --c-c:#A84A39; --c-B:#3C5FA8; --c-N:#18213D; --c-L:#FFD45E;
  --c-M:#737C8C; --c-m:#565E6C; --c-q:#D9CDB4; --c-A:#2B4470; --c-a:#253C63; --c-E:#2E1F15; --c-e:#5E432E;
  --c-X:#5C4A7E; --c-x:#4C3D6B; --c-U:#2F5A36; --c-u:#284D2E;
  --px-ink:#F4F1EA; --px-g:#6DBB5A; --px-c:#F07F66; --px-b:#7DB8F0; --px-s:#4A5368;
  color-scheme:dark;
}
@media (max-width:720px){ :root{ --u:1.5 } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.125rem/1.55 var(--body);overflow-x:hidden}
main{overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;font-stretch:112%;letter-spacing:-.02em;line-height:1;text-wrap:balance}
h2{font-size:clamp(2.25rem,4.6vw,3.875rem)}
h3{font-size:clamp(1.3125rem,2vw,1.625rem);font-weight:700;font-stretch:104%;letter-spacing:-.012em;line-height:1.12}
.wrap{width:min(1200px,calc(100% - 2*var(--gut)));margin-inline:auto;position:relative;z-index:2}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tag{font:500 .8125rem/1 var(--pixel);letter-spacing:.02em;color:var(--cmuted,var(--muted))}
::selection{background:#F08AB4;color:#1B1F1A}

/* ---------- the pixel corner system ---------- */
button.px{border:0;background:none;font-family:inherit;cursor:pointer}
.px{position:relative;isolation:isolate;--fill:transparent;--clip:var(--clip-s)}
.px::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);clip-path:var(--clip)}
.px:focus-visible::before,.inp:has(:focus-visible)::before{background:var(--focus-fill,var(--fill))}
.px:focus-visible,.inp:has(:focus-visible){outline:none;
  filter:drop-shadow(2px 0 0 var(--gap-c,var(--card))) drop-shadow(-2px 0 0 var(--gap-c,var(--card))) drop-shadow(0 2px 0 var(--gap-c,var(--card))) drop-shadow(0 -2px 0 var(--gap-c,var(--card)))
         drop-shadow(2px 0 0 var(--ring,var(--ink))) drop-shadow(-2px 0 0 var(--ring,var(--ink))) drop-shadow(0 2px 0 var(--ring,var(--ink))) drop-shadow(0 -2px 0 var(--ring,var(--ink)))}
:focus-visible{outline:3px solid var(--ring,var(--ink));outline-offset:3px}
.card{--fill:var(--card);--clip:var(--clip-l);color:var(--cfg);--cmuted:var(--muted);--ring:var(--cfg);
  filter:drop-shadow(0 1px 1px rgba(var(--shc),.14)) drop-shadow(0 14px 24px rgba(var(--shc),.2))}
.card::after{content:"";position:absolute;top:0;right:0;width:4px;height:4px;background:var(--lit,#F08AB4);opacity:0}
.card:hover::after,.card:focus-within::after{opacity:1}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;font:600 1.0625rem/1 var(--body);text-decoration:none;--fill:var(--btn);color:var(--btn-fg);cursor:pointer;border:0;background:none}
.btn.alt{--fill:var(--field-bg);color:inherit}
.btn:hover{--fill:var(--btn-hover)}
.btn.alt:hover{--fill:var(--card)}
.btn:active{transform:translateY(1px)}

/* ---------- code sprites (painted by JS, instanced as data URLs) ---------- */
.sp{display:block;position:absolute;width:calc(var(--aw,8) * var(--u,2) * 1px);height:calc(var(--ah,8) * var(--u,2) * 1px);
  background-repeat:no-repeat;background-size:calc(var(--aw,8) * var(--n,1) * var(--u,2) * 1px) 100%;image-rendering:pixelated;pointer-events:none}
.sp.spr{position:relative;flex:none;--u:3;background-position:100% 0}
.deco{position:absolute;inset:0;pointer-events:none;z-index:1}
[data-depth]{will-change:transform}
@media (prefers-reduced-motion: no-preference){
  .sp.anim{animation:sheet var(--t,1s) steps(var(--n,2)) infinite;animation-delay:var(--dl,0s)}
  .bob{animation:bob 6s ease-in-out infinite alternate}
  .flyby{animation:fly 46s linear infinite;animation-delay:var(--dl,0s)}
  .drift{animation:drift var(--dur,140s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
  .cross{animation:cross var(--dur,180s) linear infinite;animation-delay:var(--dl,0s)}
  .paused *,.paused,.tab-hidden *{animation-play-state:paused!important}
}
@keyframes sheet{from{background-position:0 0}to{background-position:calc(var(--aw) * var(--n) * var(--u) * -1px) 0}}
@keyframes bob{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-14px,0)}}
@keyframes fly{0%{transform:translate3d(-12vw,0,0)}38%{transform:translate3d(112vw,-40px,0)}100%{transform:translate3d(112vw,-40px,0)}}
@keyframes drift{from{transform:translate3d(calc(var(--dx,6vw) * -1),0,0)}to{transform:translate3d(var(--dx,6vw),0,0)}}
@keyframes cross{from{transform:translate3d(-30vw,0,0)}to{transform:translate3d(115vw,0,0)}}

/* ---------- painted clouds that drift over the seams ---------- */
.pcloud{position:absolute;pointer-events:none;width:var(--w);height:auto;max-width:none;z-index:1}
.pcloud img{width:100%;height:auto;max-width:none}

/* ---------- painted art: a stage with the painting's own aspect, edge rows above and below ----------
   --W is the painting width: at least the box width, and wide enough for --minh of height. */
.art{position:absolute;inset:0;container-type:size;pointer-events:none;z-index:0;
  --W:max(100cqw, calc(var(--ar) * var(--minh,0px))); --H:calc(var(--W) / var(--ar));
  --L:calc((100cqw - var(--W)) * var(--px,.5)); --T:calc((100cqh - var(--H)) * var(--py,.5))}
.art .stage{position:absolute;left:var(--L);top:var(--T);width:var(--W);height:var(--H)}
.art .stage > img,.art .stage > picture > img{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(transparent,#000 var(--ft,140px),#000 calc(100% - var(--fb,140px)),transparent);
          mask-image:linear-gradient(transparent,#000 var(--ft,140px),#000 calc(100% - var(--fb,140px)),transparent)}
.art .ext{position:absolute;left:var(--L);width:var(--W);background-size:100% 100%;background-repeat:no-repeat}
.art .ext.t{top:calc(var(--T) - var(--et,140px));height:calc(var(--et,140px) + var(--ft,140px));
  -webkit-mask-image:linear-gradient(transparent,#000 var(--et,140px));mask-image:linear-gradient(transparent,#000 var(--et,140px))}
.art .ext.b{top:calc(var(--T) + var(--H) - var(--fb,140px));height:calc(var(--fb,140px) + var(--eb,140px));
  -webkit-mask-image:linear-gradient(#000 var(--fb,140px),transparent);mask-image:linear-gradient(#000 var(--fb,140px),transparent)}
.art .dim{position:absolute;inset:-200px 0;background:var(--paint-dim);-webkit-mask-image:linear-gradient(transparent,#000 200px,#000 calc(100% - 200px),transparent);mask-image:linear-gradient(transparent,#000 200px,#000 calc(100% - 200px),transparent)}

/* ---------- bands ---------- */
.band{position:relative;color:var(--bfg);--shc:40,80,130;--pxl:rgba(27,31,26,.28);--dot:#F08AB4;--ring:var(--bfg)}
.sec{padding-block:clamp(64px,7vw,104px)}
.head{margin-bottom:clamp(30px,4vw,52px)}
.pxline{display:block;height:4px;width:168px;margin-top:20px;position:relative;
  background:repeating-linear-gradient(90deg,var(--pxl) 0 4px,transparent 4px 6px)}
.pxline::after{content:"";position:absolute;right:0;top:0;width:4px;height:4px;background:var(--dot)}
.pxline.arm{width:0}
.pxline.arm::after{opacity:0}
.pxline.go{animation:line .7s steps(28,end) forwards}
.pxline.go::after{animation:dot .7s step-end forwards}
@keyframes line{from{width:0}to{width:168px}}
@keyframes dot{0%{opacity:0}100%{opacity:1}}
.head p{margin-top:18px;max-width:52ch}

/* ===== 1 lucht: three aligned paintings that crossfade along one day ===== */
.hero{position:relative;overflow:clip;height:160vh;background:#67ABE4}
.hstage{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;isolation:isolate;
  padding:calc(118px + clamp(0px, (100svh - 940px) * .6, 120px)) 0 clamp(44px,5vw,72px)}
@media (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .hstage{position:relative;top:0;height:auto;min-height:max(100vh, 780px)}
  /* de vogels op een gewone plaats in plaats van een verschuiving: zonder eigen laag, die de browser na het
     scrollen net anders tekende achter de welkomstkaart (akkoord Ralph 2026-10-15, een beeldpunt verschil) */
  .hstage .birds .flyby{left:64vw;transform:none}
}
.sky{--ar:1.768;--px:.5;--py:1;--ft:150px;--fb:0px;--et:150px;
  --T:calc(100cqh - var(--art-b,0px) - var(--H));z-index:0}
.ph{position:absolute;inset:0;background:linear-gradient(var(--top) 0 calc(var(--T) + 60px),var(--bot) 0)}
.ph .ext.b{height:calc(var(--art-b,0px) + 4px);-webkit-mask-image:none;mask-image:none}
.ph-dag{--top:#67ABE4;--bot:#646C4C}
.ph-avond{--top:#6C7AC7;--bot:#6D5037;opacity:0}
.ph-nacht{--top:#062E6D;--bot:#173551;opacity:0}
.ph,.ovl img,.celes > *,.glow{will-change:opacity}
.celes{position:absolute;inset:0;overflow:hidden}
.orb{position:absolute;left:0;top:0;will-change:transform,opacity;opacity:0}
.orb canvas{position:absolute;left:0;top:0;image-rendering:pixelated}
.orb .halo{position:absolute;left:50%;top:50%;width:var(--hs,300px);height:var(--hs,300px);margin:calc(var(--hs,300px) / -2) 0 0 calc(var(--hs,300px) / -2);border-radius:50%;
  background:radial-gradient(closest-side,var(--hc) 0,transparent 100%)}
.sun{--hc:rgba(255,232,170,.55)}
.moon{--hc:rgba(190,215,255,.32)}
.sunlit{position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(255,243,214,.5),rgba(255,226,170,.16) 55%,transparent);mix-blend-mode:screen}
.stars{position:absolute;inset:0;opacity:0}
.stars i{position:absolute;width:2px;height:2px;background:#FFF8E0;box-shadow:0 0 3px 1px rgba(255,248,224,.45)}
.stars i.x{width:2px;height:2px;box-shadow:2px 0 #FFF8E0,-2px 0 #FFF8E0,0 2px #FFF8E0,0 -2px #FFF8E0,0 0 5px 1px rgba(255,248,224,.5)}
@media (prefers-reduced-motion: no-preference){ .stars i{animation:tw var(--tt,3.4s) ease-in-out infinite alternate;animation-delay:var(--td,0s)} }
@keyframes tw{from{opacity:.25}to{opacity:1}}
.ovl{position:absolute;left:var(--L);top:var(--T);width:var(--W);height:calc(var(--H) * .6);opacity:.84}
.ovl img{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(transparent,#000 var(--ft));mask-image:linear-gradient(transparent,#000 var(--ft))}
.ovl .o-avond,.ovl .o-nacht{opacity:0}
.glow{position:absolute;bottom:calc(var(--art-b,0px) - 8%);width:min(1100px,90%);aspect-ratio:1.5;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,170,90,.55),rgba(255,120,140,.26) 45%,transparent)}
.glow.r{right:-18%} .glow.l{left:-18%}
.hcloud{top:5%;--w:clamp(150px,17vw,250px);left:0;opacity:.96}
.birds{position:absolute;left:0;top:calc(var(--T) + var(--H) * .28);width:100%;will-change:opacity}
.birds .flyby{position:absolute;left:0;top:var(--y,0);transform:translate3d(64vw,0,0)}
.birds .sp{position:relative}
.hfoot{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:1;pointer-events:none;
  background:linear-gradient(in oklab,rgb(201 229 248 / 0),var(--herken-top))}
@supports not (background:linear-gradient(in oklab,red,blue)){ .hfoot{background:linear-gradient(transparent,var(--herken-top))} }

.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;padding:8px 0}
.top::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s ease;background:var(--bar-plate);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);box-shadow:0 1px 0 var(--bar-line),0 8px 24px rgba(20,33,61,.12)}
.top.scrolled::before{opacity:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .top::before{background:rgba(255,246,227,.96)} }
main [id]{scroll-margin-top:calc(var(--barh) + 12px)}
.topin{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;margin-left:-12px;margin-top:14px;text-decoration:none;font:800 1.125rem/1 var(--display);font-stretch:110%;letter-spacing:-.01em;white-space:nowrap;color:var(--nav-fg);--ring:var(--nav-fg);--gap-c:transparent;--fill:var(--nav-bg)}
.mark{width:32px;height:32px;flex:none}
.nav{display:flex;gap:clamp(2px,1vw,14px)}
.nav a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 10px 8px;text-decoration:none;color:var(--nav-fg);--ring:var(--nav-fg);--gap-c:transparent;--focus-fill:var(--nav-bg);--fill:var(--nav-bg)}
.nav a:hover{--fill:rgba(255,255,255,.34)}
.nav .ico{position:relative;width:52px;height:52px;background-size:100% 100%;image-rendering:pixelated;transition:transform .2s steps(2)}
.nav a:hover .ico{transform:translateY(-3px)}
.nav .lbl{font:500 .875rem/1 var(--pixel);white-space:nowrap}

.field{position:relative;z-index:2;width:100%}
.hwrap{width:min(1200px,calc(100% - 2*var(--gut)));margin-inline:auto}
.field h1{font-size:clamp(2.75rem,7vw,6rem);font-stretch:118%;line-height:.94;letter-spacing:-.035em;max-width:13ch;color:#FFFFFF;text-shadow:0 4px 0 #2E66A4,0 10px 24px rgba(20,50,110,.35)}
.field canvas{display:none;width:100%;position:relative;z-index:2}
.hero.px-on .field h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0}
.hero.px-on .field canvas{display:block}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,72px);align-items:end;margin-top:auto;padding-top:28px}
.intro{padding:clamp(24px,2.6vw,32px);max-width:540px;--fill:var(--card-glass);--shc:20,50,10}
.lede{font-size:clamp(1.125rem,1.5vw,1.25rem);line-height:1.5;max-width:36ch}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn.alt{--gap-c:var(--card)}
.portrait.balloon{margin:0 clamp(0px,12vw,220px) 0 0;align-self:start;display:flex;flex-direction:column;align-items:center;position:relative;z-index:3;--u:1.3;--pw:104px}
.balloon .env{position:relative}
.portrait{margin:0}
.frame{--fill:repeating-linear-gradient(0deg,rgba(90,50,20,.32) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,var(--c-T) 0 3px,var(--c-t) 3px 4px);--clip:var(--clip-l);padding:8px;cursor:pointer;
  filter:drop-shadow(0 10px 16px rgba(20,60,120,.25));--ring:var(--nav-fg);--gap-c:transparent}
.frame canvas{width:var(--pw,208px);aspect-ratio:3/4;background:#BFE3FF;clip-path:var(--clip-s)}
.balloon .tag{margin-top:10px;color:var(--cfg);background:var(--card-glass);padding:5px 8px}

/* ===== 2 herken: a calm pale sky ===== */
.herken{--shc:40,100,170;padding-top:clamp(72px,8vw,112px);padding-bottom:clamp(96px,10vw,140px);z-index:2;
  background:linear-gradient(var(--herken-top),var(--herken-mid) 45%,var(--herken-bot))}
.notes{display:grid;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);list-style:none;margin:0;padding:0}
.notes li{padding:26px 30px 32px;display:flex;flex-direction:column;gap:14px}
.notes li:nth-child(1){--lit:var(--px-c)}
.notes li:nth-child(2){--lit:var(--px-g);margin-top:36px}
.notes li:nth-child(3){--lit:var(--px-b);margin-top:72px}
.notes p{font:600 clamp(1.1875rem,1.5vw,1.3125rem)/1.35 var(--body);letter-spacing:-.005em}
.picon{height:104px;width:auto;align-self:flex-start;margin:-6px 0 0 -6px;filter:drop-shadow(0 6px 6px rgba(40,60,90,.16))}
@media (prefers-reduced-motion: no-preference){ .notes li:hover .picon{animation:nudge .9s ease-in-out infinite alternate} }
@keyframes nudge{from{transform:translateY(0)}to{transform:translateY(-2px)}}
.herken .c1{top:-58px;left:40vw;--w:clamp(260px,30vw,440px);--dx:3vw;--dur:150s}
.herken .c2{bottom:-74px;right:34vw;--w:clamp(220px,22vw,330px);--dx:3vw;--dur:170s;--dl:-60s}

/* ===== 3 verhaal: Achterhoekse nuchterheid, the flag ===== */
.verhaal{--shc:90,80,40;--dot:#8BC34A;padding-block:clamp(88px,9vw,140px) clamp(96px,10vw,150px);z-index:1;
  background:linear-gradient(var(--herken-bot),var(--verhaal-mid) 55%,var(--strip-top))}
.verhaal-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.verhaal-txt p{font-size:clamp(1.0625rem,1.35vw,1.1875rem);max-width:65ch}
.verhaal-txt p + p{margin-top:16px}
.values{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:28px 0 0;padding:0}
.values li{--fill:var(--card);--clip:var(--clip-xs);padding:9px 14px 10px;font:600 1rem/1 var(--body);display:flex;align-items:center;gap:10px;color:var(--cfg);
  filter:drop-shadow(0 4px 8px rgba(var(--shc),.14))}
.values li::after{content:"";width:6px;height:6px;flex:none;order:-1;background:var(--v)}
.values li:nth-child(1){--v:#2E7D32} .values li:nth-child(2){--v:#8BC34A} .values li:nth-child(3){--v:#C9A86A}
.vlag{margin:0;justify-self:center;display:flex;flex-direction:column;align-items:flex-start}
.vlag canvas{image-rendering:pixelated;width:var(--fw);height:var(--fh)}
.vlag figcaption{margin-top:16px;max-width:40ch;font-size:.9375rem;line-height:1.5;color:var(--muted)}

/* ===== 4 weilanden: the painted horizon strip, a code drawn bocage edge, then meadow ===== */
.doen{padding-top:0;padding-bottom:clamp(110px,11vw,170px);--shc:30,60,10;--dot:#FFD34E;
  background:linear-gradient(in oklab,var(--strip-top) 0,var(--strip-top) 40px,var(--strip-bot) var(--sh),var(--meadow-deep) calc(var(--sh) + 220px),var(--meadow-deep) calc(100% - 300px),var(--meadow-haze) calc(100% - 110px),var(--werk-sky))}
.doen{--sh:max(84px, 100vw / 5.917)}
.strip{position:relative;height:var(--sh)}
.strip .art{--ar:5.917;--py:.5;--ft:12%;--fb:4%;--et:1px;--eb:80px;filter:var(--strip-f)}
.bocage{display:block;width:100%;height:calc(var(--bh,32) * 2px);image-rendering:pixelated;margin-top:-6px;
  -webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.doen .head{margin-top:clamp(18px,2vw,32px)}
.signs{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,36px);align-items:stretch}
.signs .card{padding:26px 26px 28px;display:grid;gap:16px;align-content:start}
.signs .card p{color:var(--cmuted)}
.signs .card h3{margin-bottom:-6px}
.promise{margin-top:clamp(32px,3.6vw,48px);--fill:var(--btn);--clip:var(--clip-l);color:var(--btn-fg);padding:26px 30px 28px;max-width:560px;
  filter:drop-shadow(0 14px 22px rgba(30,60,10,.28))}
.promise p{font:700 clamp(1.25rem,1.7vw,1.5rem)/1.3 var(--display);font-stretch:104%;letter-spacing:-.01em}
.promise .dot{display:block;width:10px;height:10px;background:#F08AB4;margin-bottom:18px}

/* ===== 5 dorp: sky, the painted street (the clubhouse pole now flies the Achterhoek flag), cobbles ===== */
.werk{--shc:90,60,40;--dot:#EF6A4F;padding-bottom:clamp(110px,11vw,160px);
  background:linear-gradient(var(--cobble) 0,var(--cobble-2) calc(100% - 300px),var(--path))}
.werk-head{padding-top:clamp(64px,6vw,96px);padding-bottom:clamp(40px,4vw,64px);margin-bottom:clamp(-64px,-4vw,-40px);position:relative;z-index:2;border-image:conic-gradient(var(--werk-sky) 0 0) fill 0//0 100vmax}
.werk-head .head{margin-bottom:0}
.street{height:max(230px,calc(100vw / 2.333));position:relative;z-index:1}
.street .art{--ar:2.333;--py:1;--ft:110px;--fb:24px;--et:60px;--eb:90px}
.street .art{z-index:1}
.vflag{position:absolute;left:6.18%;top:calc(24.83% - 2px);width:7.11%;aspect-ratio:3/2;image-rendering:pixelated}
.cases{display:grid;gap:clamp(40px,5vw,72px);margin-top:clamp(28px,3vw,48px)}
.case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
.case.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.case.flip .vis{order:2}
.vis{margin:0;padding:12px}
.vis canvas{width:100%;aspect-ratio:4/3;clip-path:var(--clip-s);background:#EDE6D8;image-rendering:pixelated}
.vis:hover{--lit:var(--px-b)}
.case-txt{padding:clamp(24px,2.6vw,34px)}
.case-txt .tag{display:block;margin-bottom:14px}
.case-txt p{margin-top:14px;max-width:44ch;color:var(--cmuted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 0;padding:0}
.chips li{--fill:var(--field-bg);--clip:var(--clip-xs);padding:7px 11px 8px;font-size:.9375rem;font-weight:500;color:var(--cfg)}

/* ===== 6 pad: sand, three lanterns, and a dolphin that comes up for air ===== */
.werkwijze{--shc:110,80,30;--dot:#EF6A4F;padding-top:clamp(64px,7vw,100px);padding-bottom:clamp(170px,17vw,250px);
  background:linear-gradient(var(--path) 0,var(--path-2) 62%,var(--dusk-1) calc(100% - 190px),var(--dusk-2) calc(100% - 80px),var(--wp-top))}
.werkwijze .head p{font-size:clamp(1.0625rem,1.35vw,1.1875rem)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);align-items:start}
.steps li{position:relative}
.steps li:nth-child(2){margin-top:48px} .steps li:nth-child(3){margin-top:96px}
.steps .card{padding:24px 26px 28px;display:flex;flex-direction:column;gap:14px}
.step-top{display:flex;align-items:flex-end;gap:18px}
.num{font:800 clamp(3.5rem,6vw,4.75rem)/.8 var(--display);font-stretch:125%;letter-spacing:-.04em}
.steps p{font-size:1.0625rem;max-width:34ch;color:var(--cmuted)}
.lantern{right:calc(-16px - 6px);top:-48px;--u:1}
.steps li:nth-child(2) .lantern{right:auto;left:-22px}
.pond{position:relative;height:112px;margin:0 -6px -8px;--wh:22px}
.pond .leap{position:absolute;left:0;right:0;top:0;bottom:calc(var(--wh) - 6px);overflow:hidden}
.pond .lx{position:absolute;left:0;bottom:0;width:100%;height:100%}
.pond .ly{position:absolute;left:14%;bottom:0;width:52px;height:52px;transform:translateY(60px)}
.pond .rot{width:100%;height:100%;transform:rotate(15deg)}
.pond .rot img{width:100%;height:100%}
.pond canvas{position:absolute;left:0;bottom:0;width:100%;height:100%;image-rendering:pixelated;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
@media (prefers-reduced-motion: no-preference){
  .pond .lx{animation:lx 6.2s linear infinite}
  .pond .ly{animation:ly 6.2s infinite}
  .pond .rot{animation:rot 6.2s linear infinite}
}
@keyframes lx{0%{transform:translateX(0)}26%,100%{transform:translateX(var(--dx,52%))}}
@keyframes ly{0%{transform:translateY(60px);animation-timing-function:cubic-bezier(.2,.6,.4,1)}13%{transform:translateY(-30px);animation-timing-function:cubic-bezier(.6,0,.8,.4)}26%,100%{transform:translateY(60px)}}
@keyframes rot{0%{transform:rotate(12deg)}26%,100%{transform:rotate(88deg)}}
@media (prefers-reduced-motion: reduce){
  .pond .lx{transform:translateX(calc(var(--dx,52%) / 2))}
  .pond .ly{transform:translateY(-30px)}
  .pond .rot{transform:rotate(50deg)}
}

/* ===== 7 werkplaats ===== */
.over{--shc:0,0,0;--dot:#FFD34E;position:relative;isolation:isolate;background:linear-gradient(var(--wp-top),var(--wp-bot) 85%,var(--wp-bot));padding-block:clamp(130px,12vw,180px)}
.over .art{--ar:1.768;--py:.5;--ft:150px;--fb:170px;--et:80px;--eb:90px}
.over .art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,22,.42),rgba(6,8,22,.14) 55%,rgba(6,8,22,.08))}
.over-card{max-width:600px;padding:clamp(26px,3.2vw,40px)}
.over-top{display:flex;gap:clamp(18px,2vw,26px);align-items:flex-end;margin-bottom:22px}
.over-top .head{margin-bottom:6px}
.over .portrait{--pw:clamp(112px,10vw,140px);display:flex;flex-direction:column;gap:10px;align-items:flex-start;flex:none}
.over .frame{--fill:var(--c-d);padding:7px;filter:drop-shadow(0 8px 12px rgba(60,25,5,.3))}
.over-txt p{font-size:clamp(1.0625rem,1.35vw,1.1875rem);max-width:46ch}
.good{margin-top:28px}
.good h3{font-size:1.25rem}
.good ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.good li{display:flex;gap:14px;align-items:center}
.good li::before{content:"";width:10px;height:10px;flex:none;background:var(--c)}
.good li:nth-child(1){--c:#4F9F3A} .good li:nth-child(2){--c:#EF6A4F} .good li:nth-child(3){--c:#3A95E6} .good li:nth-child(4){--c:#F08AB4}
.over-bridge{position:absolute;left:0;right:0;bottom:0;height:220px;z-index:0;pointer-events:none;
  background:linear-gradient(in oklab,rgb(19 27 25 / 0),var(--wp-bot) 30%,#3A3552 62%,var(--av-top))}

/* ===== 8 brievenbus: painted sunset lane, a swallow on loops, the flag on the letterbox ===== */
.contact{--shc:60,20,40;--dot:#F08AB4;position:relative;isolation:isolate;background:linear-gradient(var(--av-top),var(--av-top) 30%,var(--av-bot) 80%);padding-block:clamp(120px,10vw,160px) clamp(150px,12vw,190px)}
.contact .art{--ar:1.768;--px:var(--fx,.74);--W:max(100cqw, calc(var(--ar) * 100cqh));--py:.5;--ft:120px;--fb:150px;--et:40px;--eb:60px}
.contact .stage{left:clamp(calc(100cqw - var(--W)), calc(var(--fx,.74) * 100cqw - .765 * var(--W)), 0px)}
.contact .ext{left:clamp(calc(100cqw - var(--W)), calc(var(--fx,.74) * 100cqw - .765 * var(--W)), 0px)}
.pflag{left:78.19%;top:53.05%;width:3.4%;height:7%;background-size:200% 100%!important;background-position:0 0}
.pflag.up{background-position:100% 0}
@media (prefers-reduced-motion: no-preference){ .pflag.up{animation:flagup .5s steps(1) 1} }
@keyframes flagup{0%{transform:translateY(0)}40%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.swallow{position:absolute;left:0;top:0;z-index:1;pointer-events:none;will-change:transform;image-rendering:pixelated}
.contact-col{display:grid;gap:18px;max-width:600px;margin-left:max(var(--gut),calc((100% - 1200px) / 2))}
.contact .wrap.contact-col{width:auto;margin-right:var(--gut)}
.form{padding:clamp(24px,3vw,38px);display:grid;gap:18px;--gap-c:var(--card)}
.form .head{margin-bottom:4px}
.form .head p{margin-top:16px;color:var(--cmuted)}
.fld{display:grid;gap:8px;font-weight:600;font-size:1rem}
.inp{display:block;--fill:var(--field-bg);--clip:var(--clip-s);--gap-c:var(--card)}
.inp input,.inp textarea{display:block;width:100%;border:0;background:transparent;color:inherit;font:400 1.0625rem/1.4 var(--body);padding:14px 16px;min-height:52px;outline:none}
.inp textarea{min-height:120px;resize:vertical}
.form .btn{justify-self:start;--gap-c:var(--card)}
.status:empty{display:none}
.status{min-height:1.5em;font-weight:600;display:flex;align-items:center;gap:12px}
.status:not(:empty)::before{content:"";width:10px;height:14px;flex:none;background:linear-gradient(#F08AB4 0 60%,#7A4B26 60%)}
.info{display:grid;gap:12px;padding:clamp(20px,2.4vw,28px)}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mail .addr{font:700 clamp(1.1875rem,1.8vw,1.5rem)/1.2 var(--display);font-stretch:104%;user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
.copy{min-height:44px;padding:0 16px;font-size:.9375rem;--fill:var(--field-bg);color:inherit}
.copy.done{--fill:#4F9F3A;color:#fff}

/* ===== 9 onder de grond: roots, mycelium and a brain that fires ===== */
.naam{--bfg:var(--light);color:var(--light);--ring:var(--light);--shc:0,0,0;--pxl:rgba(255,246,233,.35);--dot:#FFD34E;
  background-color:var(--soil);background-size:128px 128px;image-rendering:pixelated;padding-block:clamp(150px,13vw,190px) clamp(130px,12vw,170px)}
.naam .net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.naam .net.fx{z-index:1}
.naam-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(36px,6vw,96px);align-items:center;min-height:300px}
.naam-grid p{font-size:clamp(1.1875rem,1.5vw,1.3125rem);max-width:46ch}
.brainbox{justify-self:end;position:relative;z-index:2;width:min(100%,clamp(360px,30vw,420px));aspect-ratio:880/772;margin-right:clamp(0px,3vw,48px)}
.brainbox img,.brainbox .bfx{position:absolute;inset:0;width:100%;height:100%}
.brainbox .bfx{image-rendering:pixelated}

/* ===== 10 footer: diepe grond ===== */
.foot{background:linear-gradient(var(--soil),var(--deep) 120px);color:var(--light);--ring:var(--light);padding:clamp(56px,6vw,96px) 0 40px}
.wm{display:flex;align-items:center;gap:clamp(12px,2vw,24px)}
.fmark{width:clamp(56px,7vw,96px);height:auto;flex:none}
.word{flex:1;min-width:0;width:min(100%,680px);max-width:680px;height:auto;shape-rendering:crispEdges;overflow:visible}
.foot-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:44px;font-size:1rem}
.foot-row ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-row .muted{color:#DCC6A8}
.foot-row a{text-underline-offset:3px}
.foot .mail .addr{font-size:1.0625rem}
.foot .copy{min-height:36px;padding:0 12px;font-size:.875rem;--fill:#5A3E2B;color:var(--light);--gap-c:var(--deep)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .notes{grid-template-columns:1fr;gap:24px}
  .notes li:nth-child(n){margin-top:0}
  .notes li:nth-child(2){margin-left:clamp(0px,6vw,48px)}
  .notes li:nth-child(3){margin-left:clamp(0px,12vw,96px)}
  .naam-grid{grid-template-columns:1fr}
  .verhaal-grid{grid-template-columns:1fr}
  .vlag{justify-self:start}
  .signs{grid-template-columns:1fr}
  .case,.case.flip{grid-template-columns:1fr}
  .case.flip .vis{order:0}
  .steps{grid-template-columns:1fr;gap:40px}
  .steps li:nth-child(n){margin-top:0;max-width:520px}
  .steps li:nth-child(2){margin-left:auto}
  .brainbox{justify-self:center;margin-right:0}
}
@media (max-width:720px){
  .hstage{padding-top:84px;min-height:0}
  :root{--barh:60px}
  .top{padding:6px 0}
  .sky{--minh:230px;--px:.5;--ft:56px;--et:200px}
  .topin{align-items:center;gap:8px}
  .brand{margin-top:0;padding:8px 10px;margin-left:-10px}
  .nav{gap:2px}
  .nav a{padding:4px 4px 5px;gap:3px}
  .nav .ico{width:36px;height:36px}
  .nav .lbl{font-size:.6875rem}
  .hero-row{grid-template-columns:1fr;margin-top:auto}
  .portrait.balloon{order:-1;margin:0 8px 28px auto;--u:1.25;--pw:96px}
  /* the scroll stage has one screen of room on a phone: the card comes first, the balloon portrait waits for "Wie ik ben" */
  .hstage .portrait.balloon{display:none}
  .hstage{padding-bottom:40px}
  .street .art{--minh:230px;--px:.14;--ft:44px;--fb:16px;--et:40px;--eb:60px}
  .brainbox{order:-1;margin-bottom:8px}
  .naam{padding-top:150px}
  .foot-row{grid-template-columns:1fr}
  .notes li:nth-child(n){margin-left:0}
  .steps li:nth-child(n){margin-left:0}
  .lantern{display:none}
  .over{padding-top:0}
  .over .art{position:relative;height:66vw;min-height:250px;inset:auto;--minh:250px;--py:.55;--ft:60px;--fb:80px}
  .over .art::after{display:none}
  .over .card{margin-top:-56px}
  .over-top{flex-direction:column;align-items:flex-start}
  .contact{padding-top:0}
  .contact .art{position:relative;inset:auto;height:330px;--fx:.66;--ft:70px;--fb:90px}
  .contact-col{margin-top:-70px;margin-left:var(--gut)}
  .herken .c1{top:-34px;left:30vw}
  .herken .c2{display:none}
  .brainbox{width:min(100%,260px)}
}
@media (max-width:720px) and (prefers-reduced-motion: no-preference){ .hero{height:140vh} }
@media (max-width:520px){
  .nav .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav a{padding:4px 3px}
}
@media (max-width:480px){
  .brand{font-size:1rem;gap:8px}
  .mark{width:28px;height:28px}
  .notes li{padding:22px 22px 26px}
  .picon{height:96px}
  .promise{padding:24px}
  .signs .card{padding:22px}
}

.bocage{display:none!important}
.strip{-webkit-mask-image:linear-gradient(#000 96%,transparent 100%);mask-image:linear-gradient(#000 96%,transparent 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media (max-width:700px){.doen{--sh:170px}.strip .art{--minh:170px;--px:.55;--ft:3%;--fb:10%}}

.shot{display:block;margin:0;padding:12px;text-decoration:none;color:inherit;transition:transform .25s ease}
.shot .bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#2A2F2A;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% 100%,0 100%)}
.shot .bar i{width:8px;height:8px;background:#E8705A}.shot .bar i:nth-child(2){background:#F2C14E}.shot .bar i:nth-child(3){background:#7BBF6A}
.shot .bar b{margin-left:10px;font:500 .8125rem/1 var(--body);color:#E9E6DD;letter-spacing:.01em}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shot:hover{transform:translateY(-4px)}.shot:focus-visible{outline:3px solid var(--ring);outline-offset:4px}
.case.flip .shot{order:2}
@media (max-width:720px){.case.flip .shot{order:0}}
@media (prefers-reduced-motion: reduce){.shot{transition:none}.shot:hover{transform:none}}
.golink{display:inline-block;margin-top:20px;font:600 1rem/1.2 var(--body);color:var(--cfg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.golink:hover{text-decoration-color:var(--dot)}

/* slogan: stevige Archivo kop, creme met zwarte rand en schaduw (optie B) */
.field h1.slogan{font-family:var(--display);font-weight:900;font-stretch:125%;letter-spacing:-.01em;line-height:1.02;max-width:none;color:#F7F7F4;
  font-size:clamp(2.75rem,min(6.9vw,calc(19svh - 72px)),7.25rem);-webkit-text-stroke:.075em #111;paint-order:stroke fill;text-shadow:.07em .08em 0 #111;text-wrap:nowrap}
.slogan .w{display:inline-block;animation:slogan-in .7s cubic-bezier(.2,.8,.2,1.15) both}
.slogan .w:nth-of-type(2){animation-delay:.12s}.slogan .w:nth-of-type(3){animation-delay:.24s}
@keyframes slogan-in{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@media (max-width:720px){.field h1.slogan{font-size:min(15.5vw,4.6rem);text-wrap:wrap;line-height:1.04}.slogan .dk{display:none}}
@media (prefers-reduced-motion:reduce){.slogan .w{animation:none}}

.celes .orb{z-index:3}

/* ===== menubalk A: een rustige lichte balk die zweeft, tekstmenu met scherpe pixel iconen ===== */
:root{--bar-bg:rgba(255,250,240,.88);--bar-fg:#141414;--bar-hov:rgba(20,20,20,.06)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bar-bg:rgba(26,28,34,.86);--bar-fg:#F5F1E6;--bar-hov:rgba(255,255,255,.08)}}
:root[data-theme="dark"]{--bar-bg:rgba(26,28,34,.86);--bar-fg:#F5F1E6;--bar-hov:rgba(255,255,255,.08)}
.top{padding:14px 0!important}
.top::before{display:none!important}
.top .px::before,.top .px::after{display:none!important}
.topin{align-items:center!important;background:var(--bar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:22px;padding:8px 8px 8px 14px;box-shadow:0 10px 30px rgba(20,40,80,.16),0 2px 6px rgba(20,40,80,.08)}
.brand{margin:0!important;padding:4px 0!important;gap:10px!important;color:var(--bar-fg)!important;font:900 1.2rem/1 var(--display)!important;font-stretch:120%!important;letter-spacing:-.01em}
.brand .mark{width:34px;height:34px}
.brand span b{font-weight:500}
.nav{gap:2px!important;align-items:center}
.nav a{flex-direction:row!important;align-items:center!important;gap:8px!important;padding:9px 13px!important;border-radius:14px;color:var(--bar-fg)!important;transition:background .15s}
.nav a:hover{background:var(--bar-hov)}
.nav .ico{width:24px!important;height:24px!important;background-size:24px 24px!important;image-rendering:pixelated;transition:transform .15s}
.nav a:hover .ico{transform:translateY(-2px)}
.nav .lbl{font:600 .95rem/1 var(--display)!important;font-stretch:105%}
.nav a.cta{background:#FFD54A;color:#141414!important;margin-left:8px;padding:12px 18px!important;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.nav a.cta:hover{background:#FFDD6B}
@media (max-width:860px){.nav a.cta{display:none}}
@media (max-width:720px){
  .top{padding:10px 0!important}
  .topin{padding:6px 6px 6px 10px;border-radius:18px}
  .brand{font-size:1.02rem!important;gap:8px!important}.brand .mark{width:28px;height:28px}
  .nav .lbl{display:none}.nav a{padding:8px!important}
}
@media (max-width:370px){.brand{font-size:.92rem!important}.nav a{padding:7px 5px!important}}
@media (prefers-reduced-motion:reduce){.nav a:hover .ico{transform:none}}

/* modern brein: zachte gloed, footer woordmerk in de letter van de slogan */
.brainbox .bfx{image-rendering:auto!important}
.foot .fword{font:900 clamp(2.4rem,6.4vw,5.6rem)/1 var(--display);font-stretch:120%;letter-spacing:-.02em;color:#F4EAD5;white-space:nowrap}
.foot .fword b{font-weight:500}
.fmark{border-radius:22%}

.brainbox{background:url(/beelden/naam-brein.webp) center/100% 100% no-repeat}
@media (max-width:720px){.foot .fword{font-size:clamp(1.5rem,7.6vw,2.6rem)}.foot .fmark{width:52px}}

/* telefoon: introkaart compacter zodat de tekening zichtbaar blijft */
@media (max-width:720px){
  .hero .lede{font-size:1rem;line-height:1.45}
  .hero .intro{padding:18px 18px 20px}
  .hero .btns{margin-top:14px;gap:8px;flex-wrap:nowrap}
  .hero .btns .btn{padding-left:14px;padding-right:14px;white-space:nowrap}
}

/* telefoon liggend (laag scherm): geen vastgezette scrollscene, de hero groeit mee met de inhoud zodat niets wordt afgesneden */
@media (max-height:560px) and (orientation:landscape){
  .hero{height:auto!important}
  .hstage{position:relative!important;top:0!important;height:auto!important;min-height:0!important;padding-top:100px!important;padding-bottom:84px!important}
  .field h1.slogan{font-size:clamp(2.4rem,6.4vw,3.6rem)!important;text-wrap:nowrap}
  .slogan .dk{display:inline!important}
  .hero-row{margin-top:24px!important}
}

/* lage schermen (bijvoorbeeld Safari met balken van claude.ai): als de introkaart niet in het podium past, groeit de hero mee */
.hero.fit{height:auto!important}
.hero.fit .hstage{position:relative!important;top:0!important;height:auto!important;min-height:100svh!important;padding-bottom:64px!important}

/* Safari kleurt zijn balken met de achtergrond van de pagina: maak die het bruin van de voet, niet een vast blauw */
html{background:#1D0B03!important}

/* Werk: de kop staat onder de straat, vlak boven de drie projecten */
.werk{padding-top:0!important}
.werk-head{padding-top:clamp(28px,3vw,44px)!important;padding-bottom:0!important;margin-bottom:0!important;border-image:none!important}
/* donker: de verdonkering dekt ook de overloopstrook boven de straat, anders licht die op als een band */
.street .art .dim{-webkit-mask-image:linear-gradient(transparent,#000 110px,#000 calc(100% - 200px),transparent);mask-image:linear-gradient(transparent,#000 110px,#000 calc(100% - 200px),transparent)}
/* desktop: alleen lege lucht boven de daken eraf, en de straat schuift iets op onder het einde van Wat ik doe */
@media (min-width:721px){
  .street{height:calc(100vw / 2.333 * .92)!important;margin-top:-7vw}
  .street .art{--ft:70px}
}

/* contactformulier: naam en e-mail naast elkaar, telefoon en bijlage optioneel, knop met privacyregel */
.form .row2{display:grid;gap:18px}
@media (min-width:721px){ .form .row2{grid-template-columns:1fr 1fr} }
.fld .opt{font-weight:400;font-size:.9375rem;color:var(--cmuted)}
.fld .hint,.drop .hint{display:block;font-weight:400;font-size:.9375rem;line-height:1.4;color:var(--cmuted)}
.fld .hint{margin-top:-4px}
.inp input::placeholder{color:var(--cmuted);opacity:.85}
.inp textarea{resize:none}
.drop{display:flex;align-items:center;gap:14px;min-height:64px;padding:16px 18px;--fill:var(--field-bg);cursor:pointer;font-weight:400;font-size:1rem;line-height:1.35}
.drop::after{content:"";position:absolute;inset:6px;border:2px dashed color-mix(in oklab,var(--cmuted) 55%,transparent);pointer-events:none}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop .clip{flex:none;color:var(--cmuted)}
.drop b{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.drop.over{--fill:color-mix(in oklab,var(--field-bg),#FFD34E 30%)}
.drop.over::after{border-color:currentColor}
.drop:has(input:focus-visible){outline:3px solid var(--ring,#2B6CB0);outline-offset:3px}
@media (hover:none){ .drop .sleep{display:none} }
.files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.files:empty{display:none}
.files li{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;--fill:var(--field-bg);font-weight:400;font-size:.9375rem}
.files .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .sz{color:var(--cmuted);flex:none}
.files button{flex:none;width:36px;height:36px;display:grid;place-items:center;font:700 1.125rem/1 var(--body);color:inherit;--fill:color-mix(in oklab,var(--field-bg),currentColor 10%)}
.files-msg{margin:0;font-weight:600;font-size:.9375rem;color:#B5452F}
.files-msg:empty{display:none}
:root[data-theme="dark"] .files-msg{color:#F5A38E}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .files-msg{color:#F5A38E} }
.send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:4px}
.send .btn{justify-self:auto}
.privacy{margin:0;font-size:.9375rem;line-height:1.4;color:var(--cmuted);max-width:32ch}
@media (max-width:720px){ .send .btn{width:100%} .privacy{max-width:none} }

/* footer woordmerk met dezelfde diepte als de slogan */
.foot .fword{color:#F7F7F4;-webkit-text-stroke:.06em #111;paint-order:stroke fill;text-shadow:.06em .07em 0 #111}
/* zwart logo blijft zichtbaar op de donkere balk en de donkere grond */
.fmark{box-shadow:0 0 0 2px rgba(247,247,244,.18)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand .mark{border-radius:23%;box-shadow:0 0 0 1.5px rgba(247,247,244,.28)}}
:root[data-theme="dark"] .brand .mark{border-radius:23%;box-shadow:0 0 0 1.5px rgba(247,247,244,.28)}

/* ===== Waarom Cortex: geschilderde scene, wortels die samen een brein vormen ===== */
.naam{background:#2A1004!important;background-image:none!important;padding:0!important;min-height:calc(100vw / 1.787);display:flex;align-items:center;overflow:hidden}
.naam .scene{position:absolute;inset:0;background:url(/beelden/naam-achtergrond.webp) center/cover no-repeat;}
.naam .scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,16,4,.62),rgba(42,16,4,.25) 42%,transparent 58%),linear-gradient(transparent 82%,#2A1004)}
.naam .pulse{position:absolute;left:77%;top:57.7%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,120,.42),rgba(255,190,90,.12) 55%,transparent);mix-blend-mode:screen;opacity:.35}
@media (prefers-reduced-motion: no-preference){ .naam .pulse{animation:cortexpulse 5.5s ease-in-out infinite alternate} }
@keyframes cortexpulse{from{opacity:.15}to{opacity:.85}}
.naam .wrap{position:relative;z-index:2;padding-block:clamp(150px,14vw,230px) clamp(70px,7vw,110px)}
.naam-grid{display:block!important;min-height:0!important}
.naam-grid > div{max-width:min(46ch,48%)}
.naam h2{color:#FFF6E9}
.naam p{color:#F4E7D2;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.foot{background:linear-gradient(#2A1004,#1D0B03 160px)!important}
@media (max-width:720px){
  .naam{display:block;min-height:0}
  .naam .scene{position:relative;inset:auto;height:64vw;min-height:240px;background-position:80% 62%}
  .naam .scene::after{background:linear-gradient(transparent 70%,#2A1004)}
  .naam .pulse{width:46%}
  .naam .wrap{padding-block:8px 80px}
  .naam-grid > div{max-width:none}
}

/* naad contact > Waarom Cortex: de avondweide loopt over in het gras van de doorsnede */
:root{--grass-seam:#CBBC8E}
.contact .ext.b{display:none!important}
.contact{background:linear-gradient(var(--av-top),var(--av-top) 30%,var(--av-bot) 70%,var(--grass-seam) 94%)!important}
.naam .scene::after{z-index:1}
@media (max-width:720px){.naam .scene{background-position:80% 0}.contact{padding-bottom:48px!important}}

/* ===== verbeterronde: rust, lijn en een vaste kleurfamilie ===== */
/* 3 kaarten op een lijn */
.notes{align-items:stretch!important}
.notes li:nth-child(n){margin-top:0!important;margin-left:0!important}
.steps{align-items:stretch!important}
.steps li:nth-child(n){margin-top:0!important;margin-left:0!important}
.steps li > .card{height:100%}
/* 4 gedetailleerde iconen */
.hdico{display:block;width:72px;height:72px;image-rendering:auto;flex:none}
.step-top{align-items:center!important}
.step-top .hdico{width:60px;height:60px}
/* 5 verhaal in twee kolommen */
.verhaal-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.vcard{padding:clamp(24px,2.6vw,34px);--lit:#1F6B45}
.vcard h3{margin-bottom:18px}
.vcard ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.vcard li{display:grid;gap:4px;padding-left:22px;position:relative}
.vcard li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;background:var(--v)}
.vcard li:nth-child(1){--v:#1F6B45}.vcard li:nth-child(2){--v:#6DBB5A}.vcard li:nth-child(3){--v:#FFD54A}
.vcard b{font:700 1.125rem/1.2 var(--display);font-stretch:104%}
.vcard span{color:var(--cmuted)}
@media (max-width:980px){.verhaal-cols{grid-template-columns:1fr}}
/* 6 geen roze meer: groen en geel uit het logo en de knoppen */
.band,.band *{--dot:#FFD54A!important}
.card{--lit:#6DBB5A!important}
.promise .dot{background:#FFD54A!important}
.good li:nth-child(4){--c:#FFD54A!important}
.good li:nth-child(1){--c:#1F6B45!important}.good li:nth-child(2){--c:#6DBB5A!important}.good li:nth-child(3){--c:#C8503A!important}
::selection{background:#FFD54A!important;color:#141414}
/* 7 lopende tekst een maatje groter */
.head p,.verhaal-txt p,.steps p,.case-txt p,.over-txt p,.signs .card p,.naam-grid p{font-size:clamp(1.125rem,1.25vw,1.25rem)!important;line-height:1.55}
/* 8 footer: korte zin onder het woordmerk */
.foot .ftag{margin-top:14px;font:600 clamp(1.05rem,1.4vw,1.25rem)/1.3 var(--display);color:#E9D9BE}

.nav .ico{width:26px!important;height:26px!important;background-size:26px 26px!important;image-rendering:auto!important}
@media (max-width:720px){.nav .ico{width:28px!important;height:28px!important;background-size:28px 28px!important}}


/* telefoon: merknaam en menu passen naast elkaar, ook op smalle schermen */
@media (max-width:440px){
  .topin{padding:6px 4px 6px 8px!important;gap:6px!important}
  .brand{font-size:.98rem!important;gap:7px!important;min-width:0}
  .brand .mark{width:28px!important;height:28px!important}
  .nav{gap:0!important;flex:none}
  .nav a{padding:6px 5px!important}
  .nav .ico{width:24px!important;height:24px!important;background-size:24px 24px!important}
}
@media (max-width:370px){
  .brand{font-size:.86rem!important;gap:6px!important}
  .brand .mark{width:24px!important;height:24px!important}
  .nav a{padding:6px 4px!important}
  .nav .ico{width:22px!important;height:22px!important;background-size:22px 22px!important}
}

.swallow{image-rendering:auto!important;filter:drop-shadow(0 2px 2px rgba(30,20,60,.18))}

/* de hele tekening (met eik en dorp) loopt bovenaan zacht in uit de avondlucht van het contactblok */
.naam{background:linear-gradient(var(--grass-seam) 0 70px,#2A1004 71px)!important}
.naam .scene{-webkit-mask-image:linear-gradient(transparent,#000 64px);mask-image:linear-gradient(transparent,#000 64px)}
@media (max-width:720px){.naam .scene{background-position:78% 0;height:66vw;-webkit-mask-image:linear-gradient(transparent,#000 14px);mask-image:linear-gradient(transparent,#000 14px)}.naam{background:linear-gradient(var(--grass-seam) 0 20px,#2A1004 21px)!important}}

/* ===== verbeterronde 2 ===== */
/* 5 langere, zachte overgang van de weide naar de lucht boven Werk */
.doen{background:linear-gradient(in oklab,var(--strip-top) 0,var(--strip-top) 40px,var(--strip-bot) var(--sh),var(--meadow-deep) calc(var(--sh) + 220px),var(--meadow-deep) calc(100% - 560px),var(--meadow-haze) calc(100% - 300px),var(--werk-sky))!important}
/* 6 kleine labels in de gewone letter, de pixelletter alleen groot */
.tag{font:600 .8125rem/1 var(--body)!important;letter-spacing:.06em!important;text-transform:uppercase}
.balloon .tag,.over .portrait .tag{text-transform:none;letter-spacing:.01em!important;font-size:.875rem!important}
/* 7 slogan op telefoons iets kleiner, met lucht tot de rand */
@media (max-width:720px){.field h1.slogan{font-size:min(14.2vw,4.4rem)!important}}
/* 9 mobiel menu */
.mcta,.menu-toggle{display:none}
.topin{position:relative}
@media (max-width:720px){
  .topin{gap:8px!important}
  .brand{margin-right:auto!important}
  .mcta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;background:#FFD54A;color:#141414;font:700 .95rem/1 var(--display);text-decoration:none;flex:none}
  .menu-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border:0;border-radius:12px;background:var(--bar-hov);cursor:pointer;flex:none}
  .menu-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--bar-fg);transition:transform .2s,opacity .2s}
  .topin.open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .topin.open .menu-toggle span:nth-child(2){opacity:0}
  .topin.open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{display:none!important}
  .topin.open .nav{display:flex!important;flex-direction:column;align-items:stretch;position:absolute;left:0;right:0;top:calc(100% + 8px);padding:8px;gap:2px!important;
    background:var(--bar-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:18px;box-shadow:0 14px 34px rgba(20,40,80,.22)}
  .topin.open .nav a{min-height:50px;justify-content:flex-start!important;padding:10px 14px!important;gap:14px!important}
  .topin.open .nav .lbl{display:inline!important;position:static!important;width:auto!important;height:auto!important;clip:auto!important;font:600 1.05rem/1 var(--display)!important}
  .topin.open .nav .ico{width:30px!important;height:30px!important;background-size:30px 30px!important}
  .topin.open .nav a.cta{display:none!important}
}
@media (max-width:370px){.mcta{padding:0 12px;font-size:.88rem}}
/* 10 klein rond portret in de introkaart, alleen op telefoons */
.intro .mini{display:none}
@media (max-width:720px){
  .intro .mini{display:block;float:left;width:56px;height:56px;border-radius:50%;object-fit:cover;margin:2px 12px 6px 0;box-shadow:0 0 0 3px #FFD54A,0 4px 10px rgba(0,0,0,.18)}
}

/* ===== een doorlopende tekening: avondweide boven, de wortels en het brein eronder ===== */
.contact{background:#6C8BEA!important;padding-bottom:0!important}
.contact .art{--ar:1.792;--W:100cqw;--py:1;--ft:120px;--fb:0px;--et:120px}
.contact .stage,.contact .ext{left:0!important}
.contact .stage > img{-webkit-mask-image:linear-gradient(transparent,#000 var(--ft))!important;mask-image:linear-gradient(transparent,#000 var(--ft))!important}
.contact .contact-col{padding-bottom:calc(100vw / 1.792 * .62)}
.pflag{left:78.2%!important;top:57%!important}
.naam{background:#2A1004!important;min-height:calc(100vw * 1240 / 1792)!important}
.naam .scene{-webkit-mask-image:none!important;mask-image:none!important;background-size:100% auto!important;background-position:0 0!important}
.naam .scene::after{background:linear-gradient(90deg,rgba(42,16,4,.6),rgba(42,16,4,.2) 40%,transparent 56%)!important;
  -webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
.naam .pulse{left:70.9%!important;top:32.7%!important}
@media (max-width:720px){
  .contact{display:flex;flex-direction:column}
  .contact .wrap.contact-col{order:1;margin:0 var(--gut)!important;padding:96px 0 10px!important}
  .contact .wrap.contact-col{position:relative;z-index:3}
  .contact .art{margin-top:-78px}
  .contact .art{order:2;position:relative!important;inset:auto!important;height:calc(140vw / 1.792)!important;--W:140cqw!important;--ft:60px;--et:60px}
  .contact .stage,.contact .ext{left:calc(-40cqw * .85)!important}
  .naam{min-height:0!important}
  .naam .scene{height:calc(140vw * 1240 / 1792)!important;min-height:0!important;background-size:140% auto!important;background-position:85% 0!important}
  .naam .scene::after{background:linear-gradient(transparent 72%,#2A1004)!important;-webkit-mask-image:none;mask-image:none}
  .naam .pulse{left:calc(70.9% * 1.4 - 34%)!important;width:44%}
}

@media (max-width:720px){.topin.open .nav{background:#FFFAF0!important}}
@media (max-width:720px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]) .topin.open .nav{background:#1A1C22!important}}
@media (max-width:720px){:root[data-theme="dark"] .topin.open .nav{background:#1A1C22!important}}

/* mobiel: geen lege strook voor het huisje, en het huisje groot in beeld */
@media (max-width:720px){
  .werkwijze{padding-bottom:40px!important;background:linear-gradient(var(--path) 0,var(--path-2) 70%,var(--dusk-1) calc(100% - 60px),var(--wp-top))!important}
  .over .art{height:92vw!important;--minh:360px!important;--px:.62!important;--py:.78!important;--ft:28px!important;--et:20px!important}
  .over .card{margin-top:-40px!important}
}

/* het oude vlaggetje van de vorige brievenbus zat in de weg van de zwaluw */
.pflag{display:none!important}

/* introkaart op telefoons: strak binnen de marges, foto met naam als kopje, knoppen onder elkaar */
.intro .ihead{display:none}
@media (max-width:720px){
  .hero .hero-row{width:auto!important;margin-left:var(--gut)!important;margin-right:var(--gut)!important;min-width:0}
  .hero .intro{max-width:none!important;width:100%;box-sizing:border-box;min-width:0}
  .intro .mini{float:none!important;margin:0!important;width:52px!important;height:52px!important}
  .intro .ihead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .intro .ihead > img{align-self:flex-start}
  .intro .ihead b{display:block;font:800 1.15rem/1.15 var(--display);font-stretch:110%}
  .intro .ihead span{display:block;font-size:.9rem;color:var(--cmuted);margin-top:3px}
  .intro .lede .hi{display:none}
  .hero .btns{flex-direction:column;flex-wrap:nowrap!important;gap:10px!important}
  .hero .btns .btn{width:100%;white-space:normal!important}
}

/* overgang Wie ik ben > contact: loopt uit in dezelfde lucht als de tekening */
.over-bridge{background:linear-gradient(in oklab,rgb(19 27 25 / 0),var(--wp-bot) 25%,#3A3552 55%,#6C8BEA)!important}
/* mobiel: rustig en compact, icoon naast de tekst in de kaartjes */
@media (max-width:720px){
  .notes{gap:14px!important}
  .notes li{display:grid!important;grid-template-columns:64px 1fr;align-items:center;gap:16px!important;padding:18px 18px 18px 14px!important}
  .notes .picon{height:64px!important;width:64px!important;object-fit:contain;margin:0!important}
  .notes p{font-size:1.05rem!important}
  .signs{gap:14px!important}
  .signs .card{display:grid!important;grid-template-columns:52px 1fr;column-gap:14px;row-gap:6px!important;padding:18px!important;align-items:start}
  .signs .card .hdico{grid-row:1 / span 2;width:52px!important;height:52px!important}
  .signs .card h3{margin:0!important;align-self:center}
  .signs .card p{grid-column:2}
  .doen{padding-bottom:64px!important}
  .promise{margin-top:20px!important}
  .werk-head{padding-top:36px!important}
  .contact .wrap.contact-col{padding-top:32px!important}
  .over{padding-bottom:40px!important}
  .over-bridge{height:120px!important}
}

@media (max-width:720px){.herken{padding-bottom:56px!important}.verhaal{padding-top:64px!important;padding-bottom:72px!important}}

/* ===== Stap 4, nieuwe inhoud (besluit Ralph 2026-10-14, docs/voorstel-teksten.md) ===== */
/* welkom: de korte regel boven de slogan */
.field .kicker{margin:0 0 12px;font:700 clamp(1rem,1.35vw,1.25rem)/1.25 var(--display);font-stretch:108%;color:#FFFFFF;text-shadow:0 2px 0 #2E66A4,0 6px 16px rgba(20,50,110,.35)}
@media (max-width:720px){.field .kicker{font-size:.95rem;margin-bottom:8px}}
/* welkom: de uitnodiging met klein portret, onder de tekst */
.intro .uitnodiging{display:flex;align-items:center;gap:14px;margin-top:20px}
.intro .uitnodiging img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #FFD54A,0 4px 10px rgba(0,0,0,.18)}
.intro .uitnodiging b{display:block;font:800 1.15rem/1.15 var(--display);font-stretch:110%}
.intro .uitnodiging p{margin:3px 0 0;font-size:.95rem;color:var(--cmuted)}
.intro .uitnodiging a{display:inline-block;margin-top:6px;font:600 1rem/1.2 var(--body);color:var(--cfg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.intro .uitnodiging a:hover{text-decoration-color:#FFD54A}
@media (max-width:720px){.intro .uitnodiging{margin-top:14px;gap:12px}.intro .uitnodiging img{width:52px;height:52px}}
/* herken: zonder het oude blok ertussen loopt de lucht onderaan over in de zandkleur van het blok Wat ik doe */
.herken{background:linear-gradient(var(--herken-top),var(--herken-mid) 45%,var(--herken-bot) 78%,var(--strip-top))}
/* wie ik ben: ruimte tussen de alinea's, zoals in het oude blok Zo is het begonnen */
.over-txt > p + p{margin-top:16px}
/* wie ik ben: de lijst Waar je op kunt rekenen, met de vierkantjes van het oude blok */
.over .rekenen{margin-top:28px}
.over .rekenen h3{font-size:1.25rem;margin-bottom:16px}
.over .rekenen ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.over .rekenen li{display:grid;gap:4px;padding-left:22px;position:relative}
.over .rekenen li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;background:var(--v)}
.over .rekenen li:nth-child(1){--v:#1F6B45}.over .rekenen li:nth-child(2){--v:#6DBB5A}.over .rekenen li:nth-child(3){--v:#FFD54A}
.over .rekenen b{font:700 1.125rem/1.2 var(--display);font-stretch:104%}
.over .rekenen span{color:var(--cmuted)}