/* Alyssa Collins v11 · Delta Six · block letters, Archivo, her orange; photo backgrounds only in the hero, planner band and closing band */
:root{
  --papier:#131110;--papier2:#1c1816;--diep:#0b0908;--wit:#f4eee4;
  --inkt:#efe6d8;--grijs:#b3a898;--grijs2:#8a7f73;--lijn:#2f2824;--lijn2:#3a332e;
  --or:#f2843f;--or2:#ff9a55;--donker:#141110;
  --disp:'Archivo','Arial Narrow',sans-serif;--ui:'Inter',system-ui,sans-serif;--serif:'Playfair Display',Georgia,serif;--script:'Parisienne','Playfair Display',cursive;
  --max:1360px;--pad:clamp(18px,4vw,56px);--sec:clamp(90px,11vw,150px);
  --ease:cubic-bezier(.2,.7,.1,1);--ease2:cubic-bezier(.65,0,.35,1);--veer:cubic-bezier(.34,1.4,.5,1);
}
*,*:before,*:after{box-sizing:border-box}
html{background:var(--papier) url(../img/papier-donker.webp) 0 0/512px;-webkit-text-size-adjust:100%;overflow-x:clip;font-variant-numeric:lining-nums}
/* v22: native scrolling; menu and lightbox lock the page */
html.scroll-stop,html.scroll-stop body{overflow:hidden}
body{margin:0;background:transparent;color:var(--inkt);font:400 16.5px/1.65 var(--ui);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--or);color:var(--donker)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
main{position:relative}
main>section{position:relative;z-index:1}
.verborgen{display:none!important}

/* the v9 background: calligraphic ink lines in the style of her Flow Study piece (inkt.js) */
.inkt-bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}

/* type */
.label{font:600 11.5px/1.3 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--grijs);display:inline-flex;align-items:center;gap:10px}
.label:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--or)}
.label.kaal:before{display:none}
.h1,.h2,.h3{font-family:var(--disp);font-weight:800;font-stretch:108%;text-transform:uppercase;letter-spacing:-.025em;margin:0;line-height:.92}
.h1{font-size:clamp(2.6rem,6.2vw,6rem)}
.h2{font-size:clamp(2.2rem,5vw,4.6rem)}
.h3{font-size:clamp(1.4rem,2vw,1.9rem);line-height:1}
.h1 em,.h2 em,.h3 em,.vraag em,.doel-rij h3 em,.boek-stap h2 em{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:-.01em;font-stretch:100%;color:var(--or)}
.lead{font-size:clamp(1rem,1.2vw,1.13rem);color:var(--grijs);max-width:34em;margin:0}
p{margin:0 0 1em}
.flair{font:italic 500 clamp(1.25rem,1.9vw,1.75rem)/1.15 var(--serif);color:var(--or);margin:0}
.flair-noot{display:inline-block;font:italic 500 clamp(1.15rem,1.6vw,1.6rem)/1.1 var(--serif);color:var(--or);transform:rotate(-6deg);white-space:nowrap}
.flair-noot:after{content:"";display:block;width:70%;height:10px;margin-top:4px;border-bottom:1.5px solid currentColor;border-radius:0 0 50% 50%}
.hoofdstuk{font:700 11.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--grijs);display:flex;align-items:center;gap:12px}
.hoofdstuk b{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%;font-size:10.5px;letter-spacing:0;color:var(--inkt)}

/* buttons: ink label with an orange arrow block, secondary with bracket corners */
.btn{position:relative;display:inline-flex;align-items:center;height:58px;background:var(--inkt);color:var(--donker);padding:0 0 0 26px;gap:22px;font:700 12.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .3s}
.btn .pijl{align-self:stretch;width:58px;display:grid;place-items:center;background:var(--or);color:var(--donker);transition:background .3s}
.btn .pijl svg{width:18px;height:18px;transform:rotate(-45deg);transition:transform .45s var(--ease)}
.btn:hover{background:#fff}
.btn:hover .pijl{background:var(--or2)}
.btn:hover .pijl svg{transform:rotate(0)}
.btn.rand{background:transparent;color:var(--inkt);padding:0 24px;gap:10px;box-shadow:inset 0 0 0 1px var(--lijn2)}
.btn.rand:before,.btn.rand:after{content:"";position:absolute;width:12px;height:12px;border:1.5px solid var(--inkt);pointer-events:none;transition:width .45s var(--ease),height .45s var(--ease)}
.btn.rand:before{left:0;top:0;border-right:0;border-bottom:0}
.btn.rand:after{right:0;bottom:0;border-left:0;border-top:0}
.btn.rand:hover:before,.btn.rand:hover:after{width:100%;height:100%}
.btn .ic{width:18px;height:18px;flex:none}
.btn.rand .ic{color:var(--or)}
.btn:not(.rand) .ic{margin-right:-10px}
.btn.klein{height:46px;padding-left:18px;gap:16px;font-size:11.5px}
.btn.klein .pijl{width:46px}
.knoppen,.pilbalk{display:flex;flex-wrap:wrap;gap:12px}
.linkpijl{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;padding:10px 0;border-bottom:1.5px solid var(--inkt);transition:gap .4s var(--ease),color .3s}
.linkpijl svg{width:16px;height:16px;color:var(--or)}
.linkpijl:hover{gap:16px;color:var(--or)}

/* giant block-letter name at the top of every page */
.kop-merk{position:relative;padding:92px var(--pad) 0;overflow:hidden;border-bottom:3px solid var(--inkt)}
.kop-merk-naam{display:flex;gap:.22em;width:max-content;font:800 100px/.74 var(--disp);font-stretch:112%;text-transform:uppercase;letter-spacing:-.045em;white-space:nowrap;margin-bottom:-.035em}
.kop-merk-naam span{display:inline-block;color:var(--inkt);translate:0 110%;transition:translate 1.1s var(--veer)}
.kop-merk-naam span:last-child{color:var(--or)}
.klaar .kop-merk-naam span{translate:0 0}
.klaar .kop-merk-naam span:last-child{transition-delay:.1s}
@media (max-width:700px){.kop-merk{padding-top:80px}.kop-merk-naam{flex-direction:column;gap:.02em;line-height:.8}}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--pad);transition:transform .6s var(--ease),background .4s,height .4s}
.nav.vast{height:68px;background:rgba(19,17,16,.97);box-shadow:0 1px 0 var(--lijn)}
.nav.weg{transform:translateY(-100%)}
.logo{display:flex;align-items:baseline;gap:.28em;font:800 20px/1 var(--disp);font-stretch:112%;letter-spacing:-.03em;text-transform:uppercase;color:var(--inkt);white-space:nowrap;position:relative;z-index:2}
.logo em{font-style:normal;color:var(--or)}
.nav .logo{opacity:0;pointer-events:none;transition:opacity .4s}
.nav.vast .logo,.menu-open .nav .logo{opacity:1;pointer-events:auto}
.menu{display:flex;gap:clamp(18px,2.2vw,34px);list-style:none;margin:0;padding:0}
.menu a{font:600 12.5px/1 var(--ui);color:var(--inkt);padding:10px 0;position:relative}
.menu a:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.menu a:hover:after,.menu a[aria-current]:after{transform:scaleX(1);transform-origin:left}
.nav-rechts{display:flex;align-items:center;gap:18px;position:relative;z-index:2}
.klok{font:600 10.5px/1.35 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--grijs2);text-align:right;white-space:nowrap}
.klok span{display:block;color:var(--inkt)}
.burger{display:none;width:46px;height:46px;background:var(--papier2);border:1px solid var(--lijn);place-items:center;align-content:center;gap:5px}
.burger i{display:block;width:18px;height:1.5px;background:var(--inkt);transition:transform .4s var(--ease)}
.menu-open .burger{background:var(--or);border-color:var(--or)}
.menu-open .burger i{background:var(--donker)}
.menu-open .burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-open .burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mobiel-menu{position:fixed;inset:0;z-index:90;background:var(--diep);color:var(--inkt);padding:110px var(--pad) 40px;display:flex;flex-direction:column;gap:4px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease2);overflow:auto}
.menu-open .mobiel-menu{clip-path:inset(0 0 0 0)}
.menu-open .nav.vast{background:transparent;box-shadow:none}
.mobiel-menu a{font:800 2.1rem/1.1 var(--disp);font-stretch:108%;text-transform:uppercase;letter-spacing:-.02em;padding:10px 0;border-bottom:1px solid var(--lijn)}
.mobiel-menu a em{font-style:normal;color:var(--or)}
.mobiel-menu .btn{margin-top:26px;font:700 12.5px/1 var(--ui);letter-spacing:.12em;border:0;justify-content:space-between;padding:0 0 0 22px}
@media (max-width:1180px){.menu{display:none}.burger{display:grid}.klok{display:none}}
@media (max-width:560px){.nav .btn .txt-lang{display:none}.nav{height:68px}.nav .btn.klein{padding-left:14px;gap:12px}.logo{font-size:17px}}

/* photo bands: her own work and studio, dim and warm (only hero, planner band, closing band) */
.foto-band,.hero{isolation:isolate;overflow:hidden}
.band-foto,.hero-film{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.band-foto{object-fit:cover;filter:brightness(.36) sepia(.35) saturate(.85) contrast(1.05)}
.foto-band:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,9,8,.86),rgba(11,9,8,.45) 60%,rgba(11,9,8,.25)),linear-gradient(0deg,rgba(11,9,8,.7),transparent 30%,transparent 70%,rgba(11,9,8,.7))}

/* hero: block-letter name over a dim film of her work */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero-film{background:#120d0a}
.hero-film img,.hero-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* v26 (22-10-2026): de kleur zit in het filmbestand zelf; de donkerte is deze laag (= brightness .42).
   Een filter op de video liet de browser elk beeld vier keer over het hele scherm rekenen: de film haperde. */
.hero-film::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.58);pointer-events:none}
.hero-film video{opacity:0;transition:opacity 1.6s}
.hero-film video.speelt{opacity:1}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,9,8,.8) 0%,rgba(11,9,8,.45) 55%,rgba(11,9,8,.2) 100%),linear-gradient(0deg,var(--papier) 0%,rgba(19,17,16,0) 30%),linear-gradient(180deg,rgba(11,9,8,.55),rgba(11,9,8,0) 30%)}
.hero .kop-merk{border-bottom-color:rgba(239,230,216,.9)}
.hero-grid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;padding-top:clamp(34px,5vh,60px);padding-bottom:clamp(40px,7vh,80px)}
.hero-tekst{display:flex;flex-direction:column;gap:24px;min-width:0}
.hero .h1{font-size:clamp(2.2rem,4.6vw,4.4rem);max-width:15em}
.hero .lead{color:#cfc5b7}
.bewijs{display:flex;flex-wrap:wrap;gap:8px 0;font:500 13px/1.4 var(--ui);color:#cfc5b7}
.bewijs>*{display:inline-flex;align-items:center}
.bewijs>*+*:before{content:"";width:5px;height:5px;background:var(--or);margin:0 14px;transform:rotate(45deg)}
.bewijs b{color:var(--inkt);font-weight:700;margin-right:5px}
.bewijs a{border-bottom:1px solid rgba(239,230,216,.35)}
.bewijs a:hover{color:var(--or)}
.hero-zij{display:flex;flex-direction:column;align-items:flex-end;gap:26px;padding-bottom:6px}
.stempel{width:116px;height:116px;border-radius:50%;background:var(--or);display:grid;place-items:center;text-align:center;font:800 10.5px/1.15 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--donker);box-shadow:0 12px 26px -12px rgba(0,0,0,.7);animation:stempel 16s linear infinite}
.stempel b{display:block;font:800 25px/1 var(--disp);font-stretch:108%;letter-spacing:-.02em;margin-bottom:3px}
.stempel:hover{background:var(--or2)}
@keyframes stempel{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-4deg) translateY(-4px)}}
.hero [data-r]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.klaar .hero [data-r]{opacity:1;transform:none}
.klaar .hero [data-r]:nth-child(2){transition-delay:.08s}.klaar .hero [data-r]:nth-child(3){transition-delay:.16s}.klaar .hero [data-r]:nth-child(4){transition-delay:.24s}.klaar .hero [data-r]:nth-child(5){transition-delay:.32s}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .hero-zij{flex-direction:row;align-items:center;justify-content:space-between;order:-1}
  .hero-zij .flair-noot{font-size:1.15rem}
  .stempel{width:86px;height:86px;font-size:8.5px}.stempel b{font-size:19px}
  .hero .h1{font-size:clamp(2rem,8.6vw,3.2rem)}
  .hero-tekst{gap:16px}
  .hero .lead{font-size:15px}
  .hero .pilbalk{flex-direction:column;align-items:flex-start;gap:10px}
  .bewijs{font-size:12px}.bewijs>*+*:before{margin:0 9px}
  .hero .label .nz{display:none}
}

/* sections */
.sec{padding:var(--sec) 0;position:relative}
.sec-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(40px,5vw,72px);flex-wrap:wrap}
.links{display:flex;flex-direction:column;gap:18px;max-width:920px}

/* 01 fresh from the studio: big full images, no frames, sliding sideways (after xavicanti.com) */
.verse{position:relative}
.verse-pin{position:relative}
.verse-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.verse-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-top:70px}
.verse-spoor{display:flex;align-items:flex-start;gap:clamp(30px,4vw,70px);padding:0 var(--pad);margin-top:clamp(28px,4.5vh,54px);will-change:transform}
.stuk{flex:none;margin:0;margin-top:var(--y,0)}
.stuk a{display:block}
.stuk .beeld{height:var(--h,56vh);aspect-ratio:3/4;overflow:hidden;background:var(--papier2)}
.stuk img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.stuk a:hover img{transform:scale(1.04)}
.stuk figcaption,.werk figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:12px;font:700 10.5px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--grijs2)}
.stuk figcaption b,.werk figcaption b{font:800 1.05rem/1 var(--disp);font-stretch:108%;letter-spacing:-.01em;color:var(--inkt)}
.verse-voet{display:flex;align-items:center;gap:18px;padding-top:clamp(16px,3vh,28px)}
.voortgang{flex:1;max-width:360px;height:3px;background:var(--lijn);position:relative}
.voortgang i{position:absolute;inset:0;background:var(--or);transform-origin:left;transform:scaleX(var(--p,0))}
.verse-hint{font:700 10.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--grijs2)}

/* 02 what I tattoo */
.wat{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,110px);align-items:start}
.wat-tekst{display:flex;flex-direction:column;gap:24px}
.doelen{border-top:2px solid var(--inkt);margin-top:10px}
.doel-rij{display:grid;grid-template-columns:40px minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:center;padding:24px 0;border-bottom:1px solid var(--lijn);transition:padding .5s var(--ease)}
.doel-rij .nr{font:700 12px/1 var(--ui);letter-spacing:.14em;color:var(--grijs2)}
.doel-rij h3{font:800 clamp(1.35rem,2vw,1.95rem)/.95 var(--disp);font-stretch:108%;text-transform:uppercase;letter-spacing:-.025em;margin:0}
.doel-rij p{margin:0;color:var(--grijs);font-size:14.5px}
.doel-rij:hover{padding-left:12px}
.beeld-los{position:relative;position:sticky;top:110px}
.beeld-los img{width:100%;aspect-ratio:4/5;object-fit:cover}
.onderschrift{display:block;margin-top:12px;font:700 10.5px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--grijs2)}

/* 03 meet alyssa */
.over{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,6vw,110px);align-items:center}
.collage{position:relative;aspect-ratio:1/1.1;max-width:560px;width:100%}
.collage img{width:100%;height:100%;object-fit:cover}
.c-groot{position:absolute;left:0;top:0;width:72%;aspect-ratio:4/5}
.c-klein{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:3/4;outline:10px solid var(--papier)}
.over-tekst{display:flex;flex-direction:column;gap:22px}
.over-tekst p{color:#cfc5b7;margin:0}
.quote{font:800 clamp(1.5rem,2.6vw,2.4rem)/1 var(--disp);font-stretch:108%;text-transform:uppercase;letter-spacing:-.02em;margin:0}
.quote:before{content:"\201C";display:block;font:800 5rem/.6 var(--serif);color:var(--or);margin-bottom:6px}
.quote cite{display:block;margin-top:14px;font:700 11.5px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--grijs);font-style:normal}
.feiten{display:flex;flex-wrap:wrap;gap:8px}
.pil{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1.5px solid var(--inkt);font:600 12px/1 var(--ui);color:var(--inkt)}

/* 04 process and rates */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--inkt)}
.stap-k{padding:30px 24px 26px 0;border-right:1px solid var(--lijn);display:flex;flex-direction:column;gap:14px;position:relative}
.stap-k+.stap-k{padding-left:24px}
.stap-k:last-child{border-right:0}
.stap-k .n{width:30px;height:30px;border:1.5px solid var(--inkt);border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--ui)}
.stap-k h3{font:800 1.6rem/1 var(--disp);font-stretch:108%;text-transform:uppercase;letter-spacing:-.02em;margin:0}
.stap-k p{font-size:15px;line-height:1.6;color:var(--grijs);margin:0}
.stap-k .data{margin-top:auto;padding-top:12px;font:700 11.5px/1.4 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--or)}
.stap-k:before{content:"";position:absolute;top:-2px;left:0;height:2px;width:100%;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease2)}
.stap-k.zicht:before{transform:scaleX(1)}
.tarieven{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,5vw,64px);border:2px solid var(--inkt);background:var(--papier2)}
.tarief{padding:26px 22px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--lijn)}
.tarief:last-child{border-right:0}
.tarief b{font:800 2.6rem/1 var(--disp);font-stretch:108%;letter-spacing:-.03em}
.tarief span{font:700 11px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--grijs2)}
.tarief small{font-size:13.5px;color:var(--grijs);line-height:1.5}
.tarief-noot{margin:14px 0 0;font:italic 500 1.1rem/1.4 var(--serif);color:var(--or)}

/* planner band on a dim photo of her studio */
.teaser-band{position:relative}
.teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(80px,10vw,130px) var(--pad)}
.teaser-tekst{display:flex;flex-direction:column;gap:22px}
.demo-kaart{width:min(100%,380px);margin-left:auto;background:var(--wit);color:var(--donker);padding:26px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 60px -24px rgba(0,0,0,.8);transform:rotate(3deg)}
.demo-kaart .label{color:#5f5750}
.demo-kaart .rij{display:flex;justify-content:space-between;gap:12px;font:500 13px/1.3 var(--ui);color:#5f5750;padding-bottom:10px;border-bottom:1px dashed #d6cfc4}
.demo-kaart .rij b{color:var(--donker);font-weight:700;text-align:right}
.demo-kaart .prijs{font:800 2.7rem/1 var(--disp);font-stretch:108%;letter-spacing:-.03em}
.demo-kaart .mini-bereik{height:8px;background:#e4dccf;position:relative;overflow:hidden}
.demo-kaart .mini-bereik i{position:absolute;left:0;width:100%;top:0;bottom:0;background:var(--or);transform-origin:0 0;transform:translateX(18%) scaleX(.34);animation:schuif 5s var(--ease2) infinite alternate}
@keyframes schuif{to{transform:translateX(30%) scaleX(.4)}}
.vinkjes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vinkjes li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;font-weight:500;color:#e2d9cc}
.vinkjes li:before{content:"";flex:none;width:18px;height:18px;margin-top:3px;background:var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141110' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
.onder-knop{font:600 12px/1.4 var(--ui);letter-spacing:.06em;margin:-6px 0 0;color:var(--grijs)}

/* 05 flash: plain picture, name on an old-paper label in ink script */
.flash-rij{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(30px,4vw,60px)}
.flash-stuk{display:flex;flex-direction:column}
.flash-stuk .beeld{background:#ece2cc;aspect-ratio:4/5;overflow:hidden;display:flex;align-items:center;justify-content:center}
.flash-stuk .beeld img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform 1s var(--ease)}
.flash-stuk:hover .beeld img{transform:scale(1.04)}
.papierlabel{position:relative;margin:-26px 18px 0;padding:16px 22px 14px;text-align:center;background:#e9dcc0 url(../img/papier.webp) center/280px;background-blend-mode:multiply;color:#1f140b;box-shadow:0 18px 30px -16px rgba(0,0,0,.85),inset 0 0 40px rgba(110,70,25,.4);clip-path:polygon(0 6%,3% 0,24% 4%,52% 0,79% 5%,100% 1%,98% 52%,100% 96%,71% 100%,44% 95%,18% 100%,0 96%,2% 48%)}
.papierlabel h2,.papierlabel h3{margin:0;font:400 clamp(1.7rem,2.4vw,2.2rem)/1.15 var(--script);color:#1f140b}
.papierlabel span{display:block;margin-top:4px;font:italic 500 .95rem/1.3 var(--serif);color:#5a4630}
.flash-stuk p{margin:18px 4px 12px;font-size:15px;color:var(--grijs)}
.flash-stuk .linkpijl{align-self:flex-start;margin-left:4px}
.flash-notes{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(50px,6vw,80px);border-top:2px solid var(--inkt)}
.flash-notes div{padding:24px 22px 0 0}
.flash-notes div+div{padding-left:22px;border-left:1px solid var(--lijn)}
.flash-notes b{display:block;font:800 1.5rem/1 var(--disp);font-stretch:108%;text-transform:uppercase;margin-bottom:8px}
.flash-notes span{font-size:14px;color:var(--grijs)}

/* closing band on a dim close-up of her Twin Dragons */
.slot{position:relative;padding:clamp(110px,14vw,190px) 0;text-align:center}
.slot .wrap{display:flex;flex-direction:column;align-items:center;gap:26px}
.slot .h2{max-width:13em;font-size:clamp(2.4rem,6vw,5.6rem)}
.slot .lead{color:#cfc5b7}
.slot .knoppen{justify-content:center}
.slot.foto-band:before{background:radial-gradient(70% 80% at 50% 50%,rgba(11,9,8,.55),rgba(11,9,8,.85)),linear-gradient(0deg,rgba(11,9,8,.8),transparent 25%,transparent 75%,rgba(11,9,8,.8))}

/* footer */
.voet{position:relative;z-index:1;background:var(--diep);color:var(--inkt);padding:72px 0 28px;border-top:1px solid var(--lijn);overflow:hidden}
.voet-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.voet h2,.voet h4{font:700 11px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin:0 0 18px}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:#b9b0a5}
.voet ul a:hover{color:var(--or)}
.voet .logo{font-size:24px;margin-bottom:18px}
.voet p{color:#b9b0a5;font-size:14.5px;max-width:26em}
.voet .flair{font-size:1.3rem}
.voet-reus{font:800 clamp(2.4rem,8.6vw,8.4rem)/.8 var(--disp);font-stretch:112%;text-transform:uppercase;letter-spacing:-.045em;color:#2a2320;margin:60px 0 0;white-space:nowrap}
.voet-reus span{color:#3a2618}
/* v27: de reuzennaam is sierletter (aria-hidden); als css-tekst telt hij niet mee als leestekst */
.voet-reus::before{content:attr(data-a) " "}.voet-reus::after{content:attr(data-b);color:#3a2618}
.voet-onder{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px;padding-top:22px;border-top:1px solid var(--lijn);font:500 12px/1.5 var(--ui);color:#8d847a}

/* inner page head */
.pagina-kop{padding:clamp(50px,6vw,90px) 0 clamp(40px,5vw,70px);position:relative}
.pagina-kop .wrap{display:flex;flex-direction:column;gap:22px}
.pagina-kop .h1{max-width:12em}

/* portfolio: plain images, no frames */
.grid-werk{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);align-items:start}
.werk{display:block;text-align:left;width:100%}
.werk:nth-child(3n+2){margin-top:clamp(30px,6vw,90px)}
.werk figure{margin:0}
.werk .beeld{aspect-ratio:3/4;overflow:hidden;background:var(--papier2)}
.werk img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.werk:hover img{transform:scale(1.04)}
.insta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(50px,7vw,90px);padding:40px;background:var(--diep);border-top:2px solid var(--inkt)}
.lightbox{position:fixed;inset:0;z-index:180;background:rgba(8,7,6,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.lightbox.open{opacity:1;visibility:visible;transition:opacity .4s}
.lightbox figure{margin:0;display:flex;flex-direction:column;gap:12px;align-items:center}
.lightbox img{max-height:80vh;max-width:min(84vw,860px);width:auto;object-fit:contain}
.lightbox figcaption{font:800 1.2rem/1 var(--disp);font-stretch:108%;text-transform:uppercase}
.lightbox figcaption span{font:700 11px/1 var(--ui);letter-spacing:.16em;color:var(--grijs2);margin-left:12px}
.lb-knop{position:absolute;width:54px;height:54px;background:var(--or);color:var(--donker);display:grid;place-items:center}
.lb-knop svg{width:20px;height:20px}
.lb-knop:hover{background:var(--or2)}
.lb-vorige{left:24px;top:50%}.lb-volgende{right:24px;top:50%}.lb-sluit{right:22px;top:22px}

/* accordion */
.acc{border-top:2px solid var(--inkt)}
.acc-item{border-bottom:1px solid var(--lijn)}
.acc-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;font:800 clamp(1.15rem,1.7vw,1.5rem)/1.1 var(--disp);font-stretch:106%;text-transform:uppercase;letter-spacing:-.01em}
.acc-item summary::-webkit-details-marker{display:none}
.plus{flex:none;width:40px;height:40px;border:1.5px solid var(--inkt);position:relative;transition:background .3s}
.plus:before,.plus:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--inkt);transform:translate(-50%,-50%)}
.plus:after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease)}
.acc-item[open] .plus{background:var(--or);border-color:var(--or)}
.acc-item[open] .plus:before,.acc-item[open] .plus:after{background:var(--donker)}
.acc-item[open] .plus:after{transform:translate(-50%,-50%) rotate(0)}
.acc-item summary:hover{color:var(--or)}
.acc-body{padding:0 0 26px;max-width:48em;color:var(--grijs)}
.acc-body p{margin:0}
.acc-body b{color:var(--inkt)}
.acc-body a{color:var(--or)}
.twee-kol{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.plak{position:sticky;top:110px;display:flex;flex-direction:column;gap:20px}

/* care timeline */
.tijdlijn{display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--inkt);margin-top:28px}
.tl{padding:24px 18px 24px 0;border-right:1px solid var(--lijn);display:flex;flex-direction:column;gap:10px}
.tl+.tl{padding-left:18px}.tl:last-child{border-right:0}
.tl b{font:800 1.45rem/1 var(--disp);font-stretch:106%;text-transform:uppercase}
.tl span{font:700 11px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.tl p{font-size:14.5px;line-height:1.55;color:var(--grijs);margin:0}

/* forms */
.veld{display:flex;flex-direction:column;gap:10px;position:relative;margin-bottom:24px}
.veld label,.vlabel{font:700 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--grijs)}
.veld input,.veld textarea,.veld select{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--inkt);padding:12px 0;font:500 1.08rem/1.4 var(--ui);color:var(--inkt);border-radius:0;outline:none;transition:border-color .3s}
.veld select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23efe6d8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center/18px no-repeat;padding-right:28px}
.veld select option{background:var(--papier2);color:var(--inkt)}
.veld textarea{min-height:110px;resize:vertical}
.veld input:focus,.veld textarea:focus,.veld select:focus{border-bottom-color:var(--or)}
.veld input::placeholder,.veld textarea::placeholder{color:#6f655b}
.veld [aria-invalid=true]{border-bottom-color:#e2583c}
.melding{font:600 13px/1.4 var(--ui);color:#f08a6c}
.schud{animation:schud .4s}
@keyframes schud{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.rij2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span,.chip-knop{display:inline-flex;align-items:center;height:42px;padding:0 16px;border:1.5px solid var(--lijn2);font:600 13px/1 var(--ui);cursor:pointer;transition:all .25s;color:var(--inkt)}
.chip input:checked+span{background:var(--inkt);border-color:var(--inkt);color:var(--donker)}
.chip span:hover,.chip-knop:hover{border-color:var(--or);color:var(--or)}
.chip input:checked+span:hover{color:var(--donker)}
.chip input:focus-visible+span{outline:2px solid var(--or);outline-offset:2px}

/* booking */
.boek-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(32px,5vw,80px);align-items:start}
.formulier{display:flex;flex-direction:column}
.boek-stap{padding:30px 0 10px;border-top:2px solid var(--inkt)}
.boek-stap h2{font:800 clamp(1.5rem,2.4vw,2.1rem)/1 var(--disp);font-stretch:108%;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 10px}
.boek-stap .hulp{font-size:14.5px;color:var(--grijs);margin:0 0 20px}
.locaties{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:20px}
.loc{text-align:left;padding:18px 18px 16px;border:1.5px solid var(--lijn2);background:var(--papier2);transition:border-color .3s,background .3s,transform .4s var(--veer)}
.loc b{display:block;font:800 1.25rem/1 var(--disp);font-stretch:108%;text-transform:uppercase}
.loc span{display:block;margin-top:6px;font:700 10.5px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--grijs2)}
.loc:hover{border-color:var(--inkt);transform:translateY(-3px)}
.loc.gekozen{border-color:var(--or);background:rgba(242,132,63,.12)}
.loc.gekozen span{color:var(--or)}
.loc-select{display:none}
.kalender{border:2px solid var(--inkt);background:var(--papier2);padding:20px;max-width:480px}
.kal-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.kal-kop b{font:800 1.3rem/1 var(--disp);font-stretch:108%;text-transform:uppercase}
.kal-kop button{width:40px;height:40px;border:1.5px solid var(--inkt);display:grid;place-items:center}
.kal-kop button:hover:not(:disabled){background:var(--or);border-color:var(--or);color:var(--donker)}
.kal-kop button:disabled{opacity:.25;cursor:default}
.kal-kop svg{width:16px;height:16px}
.kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.kal-grid .dg{font:700 10.5px/1 var(--ui);letter-spacing:.12em;color:var(--grijs2);padding:8px 0}
.kal-grid button{aspect-ratio:1;font:600 14px/1 var(--ui);color:#4a413a;cursor:default}
.kal-grid button.vrij{color:var(--inkt);background:rgba(239,230,216,.07);box-shadow:inset 0 0 0 1px var(--lijn2);cursor:pointer;transition:all .2s}
.kal-grid button.vrij:hover{box-shadow:inset 0 0 0 1.5px var(--or)}
.kal-grid button.kies{background:var(--or);color:var(--donker);box-shadow:none}
.legenda{display:flex;gap:18px;margin-top:12px;font:700 10.5px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--grijs2)}
.legenda i{display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;background:rgba(239,230,216,.1);box-shadow:inset 0 0 0 1px var(--lijn2)}
.legenda .k i{background:var(--or);box-shadow:none}
.kal-uitleg{font:500 13px/1.5 var(--ui);color:var(--grijs);margin:12px 0 0}
.anders{margin-top:18px}
.anders>button{font:700 12px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;border-bottom:1.5px solid var(--inkt);padding:6px 0}
.anders>button:hover{color:var(--or);border-color:var(--or)}
.anders-paneel{margin-top:18px;padding:22px;border:1.5px dashed var(--lijn2);display:none}
.anders-paneel.aan{display:block}
.tbd{padding:20px 22px;border-left:4px solid var(--or);background:var(--papier2);max-width:480px;margin-bottom:16px}
.tbd b{font:800 1.3rem/1.1 var(--disp);font-stretch:108%;text-transform:uppercase}
.tbd p{margin:8px 0 0;font-size:14.5px;color:var(--grijs)}
.boek-zij{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.info-kaart{background:var(--papier2);padding:26px;display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--inkt)}
.info-kaart:first-child{border-top-color:var(--or)}
.info-kaart h3{font:800 1.3rem/1 var(--disp);font-stretch:108%;text-transform:uppercase;margin:0}
.info-kaart p,.info-kaart li{font-size:14.5px;color:var(--grijs);line-height:1.6;margin:0}
.info-kaart ul{margin:0;padding-left:18px}
.info-kaart .noot{font:italic 500 1rem var(--serif);color:var(--or)}
.info-kaart .btn{align-self:flex-start}
.bedankt{display:none;background:var(--papier2);padding:32px;flex-direction:column;gap:16px;border-top:3px solid var(--or)}
.bedankt.aan{display:flex}
.bedankt p{color:var(--grijs)!important;margin:0}
.bedankt pre,pre.brief{white-space:pre-wrap;font:500 14px/1.65 var(--ui);color:#d9cfc2;background:var(--diep);padding:20px;margin:0;max-height:340px;overflow:auto;border-left:4px solid var(--or)}

/* planner */
.planner{max-width:1140px;margin:0 auto;padding:clamp(40px,5vw,70px) var(--pad) 90px;min-height:80vh}
.planner-titel{font:700 11.5px/1.3 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin:0 0 14px}
.planner-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.teller{font:700 11.5px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase}
.privacy{font:500 12.5px/1.5 var(--ui);color:var(--grijs);display:flex;gap:8px;align-items:center}
.privacy svg{width:15px;height:15px;color:var(--or);flex:none}
.planner .voortgang{max-width:none;height:4px;background:var(--papier2);margin-bottom:clamp(36px,5vw,60px)}
.planner .voortgang i{transform:scaleX(0);transition:transform .7s var(--ease)}
.stap{display:none;flex-direction:column;gap:26px}
.stap.aan{display:flex;animation:stapIn .6s var(--ease)}
@keyframes stapIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.vraag{font:800 clamp(2rem,4.4vw,3.8rem)/.95 var(--disp);font-stretch:108%;text-transform:uppercase;letter-spacing:-.025em;margin:0}
.hulp{color:var(--grijs);margin:0;max-width:40em}
.keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.keuze{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;padding:20px 22px;background:var(--papier2);border:1.5px solid var(--lijn);transition:border-color .3s,transform .5s var(--veer),background .3s;min-height:84px;justify-content:center}
.keuze:hover{border-color:var(--inkt);transform:translateY(-4px)}
.keuze.gekozen{border-color:var(--or);background:rgba(242,132,63,.13)}
.keuze b{font:800 1.12rem/1.1 var(--disp);font-stretch:106%;text-transform:uppercase}
.keuze span{font:500 13px/1.4 var(--ui);color:var(--grijs)}
.keuzes.beelden{grid-template-columns:repeat(3,1fr);gap:14px}
.keuze.met-beeld{padding:0;min-height:0;overflow:hidden}
.keuze.met-beeld .kb{aspect-ratio:4/5;overflow:hidden}
.keuze.met-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.keuze.met-beeld:hover img{transform:scale(1.05)}
.keuze.met-beeld.gekozen{outline:3px solid var(--or);outline-offset:-3px}
.keuze.met-beeld.gekozen:after{content:"";position:absolute;top:12px;right:12px;width:34px;height:34px;background:var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141110' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/18px no-repeat}
.stap-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px}
.terug{font:700 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--grijs);display:inline-flex;align-items:center;gap:8px;padding:12px 0}
.terug:hover{color:var(--inkt)}
.terug svg{width:16px;height:16px}
.maat-blok{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.maat-getal{font:800 clamp(3.6rem,8vw,6.4rem)/1 var(--disp);font-stretch:108%;color:var(--or)}
.maat-vgl{font:500 14px/1.4 var(--ui);color:var(--grijs);margin-top:6px;min-height:1.4em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:linear-gradient(90deg,var(--or),var(--inkt));outline:none;margin:22px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;background:var(--diep);border:6px solid var(--or);cursor:grab}
input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--diep);border:5px solid var(--or)}
.schaal{display:flex;justify-content:space-between;font:600 11px/1 var(--ui);letter-spacing:.1em;color:var(--grijs2)}
.maat-visual{border:1.5px dashed var(--lijn2);background:var(--papier2);padding:16px;text-align:center}
.maat-visual svg{width:100%;height:auto;display:block;max-height:420px}
.maat-visual .uitleg{display:block;margin-top:10px;font:700 10px/1.5 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--grijs2)}
.mv-lijf{fill:rgba(214,178,140,.14);stroke:rgba(214,178,140,.5);stroke-width:1.2}
.mv-tat{fill:rgba(242,132,63,.22);stroke:var(--or);stroke-width:1.6;stroke-dasharray:5 4;transition:all .35s var(--ease)}
.mv-tat.te-groot{stroke:#e2583c;fill:rgba(226,88,60,.25)}
.mv-maat{font:600 11px var(--ui);fill:var(--grijs);letter-spacing:.06em}
.mv-lat{stroke:var(--grijs2);stroke-width:1}
.uitkomst-kop{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.prijs-blok{background:var(--diep);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:18px;border-top:3px solid var(--or)}
.prijs-groot{font:800 clamp(2.7rem,6vw,4.8rem)/.95 var(--disp);font-stretch:108%;letter-spacing:-.03em;color:var(--or)}
.bereik{position:relative;height:74px;margin-top:6px}
.bereik .baan{position:absolute;left:0;right:0;top:30px;height:8px;background:var(--lijn2)}
.bereik .vul{position:absolute;top:30px;height:8px;left:var(--van);width:calc(var(--tot) - var(--van));background:var(--or);animation:groei 1.2s var(--ease) both;transform-origin:left}
@keyframes groei{from{transform:scaleX(0)}}
.bereik .mark{position:absolute;top:0;transform:translateX(-50%);font:700 10.5px/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--or);white-space:nowrap}
.bereik .mark:after{content:"";display:block;width:1px;height:14px;background:currentColor;margin:4px auto 0}
.bereik .mark.dep{left:var(--dep)}
.bereik .eind,.bereik .begin{position:absolute;bottom:0;font:600 11px/1 var(--ui);color:#9d9489}
.bereik .eind{right:0}.bereik .begin{left:0}
.uit-feiten{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--lijn2)}
.uit-feiten div{padding:16px 18px;border-right:1px solid var(--lijn2);border-bottom:1px solid var(--lijn2)}
.uit-feiten div:nth-child(2){border-right:0}
.uit-feiten div:last-child{border-bottom:0;border-right:0}
.uit-feiten b{display:block;font:800 1.3rem/1.15 var(--disp);text-transform:uppercase}
.uit-feiten span{font:700 10.5px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#9d9489}
.stijl-blok{position:relative;overflow:hidden;min-height:280px;background:var(--papier2);display:flex;flex-direction:column}
.stijl-blok img{flex:1;width:100%;height:100%;min-height:280px;object-fit:cover}
.stijl-blok .s{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(0deg,rgba(11,9,8,.92),transparent);display:flex;flex-direction:column;gap:6px}
.stijl-blok .s b{font:800 1.1rem/1 var(--disp);text-transform:uppercase}
.tip{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;background:var(--papier2);border-left:4px solid var(--or);font-size:15.5px;color:#d9cfc2}
.tip svg{width:22px;height:22px;flex:none;color:var(--or)}

/* reveal */
[data-z]{opacity:0;translate:0 40px;transition:opacity .9s var(--ease),translate 1.1s var(--veer)}
[data-z].zicht{opacity:1;translate:0 0}

/* cursor (v19, 19-10-2026): her orange ink drop is the real mouse cursor, drawn by the system, so it moves at
   exactly the same moment as the mouse. One drop everywhere and no effects: no disc with a word over the work
   (it covered the text) and no bigger drop on a click (it jumped). !important so buttons, summaries and chips
   that set their own cursor get the drop too; text fields keep the text cursor. */
@media (hover:hover) and (pointer:fine){
  html,html *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='%23f2843f' stroke='%23141110' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E") 6 6,auto!important}
  html input:not([type=range]):not([type=radio]):not([type=checkbox]),html textarea{cursor:text!important}
}
a.kop-merk-naam:focus-visible{outline:3px solid var(--or);outline-offset:6px}

/* intro (v12): first visit to the home page, old paper with her line that burns away (intro.js).
   Hidden unless the inline head script set .intro-bezig, so returning visitors never see it. */
.intro{display:none}
.intro-bezig,.intro-bezig body{overflow:hidden}
.intro-bezig .intro{display:block;position:fixed;inset:0;z-index:300;cursor:pointer;background:radial-gradient(120% 90% at 50% 45%,#efe1c2 0%,#e2cfa6 52%,#c9a978 84%,#9c7646 100%)}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* under the intro the hero is already in its final state, so the burn reveals the finished site */
.intro-bezig .hero [data-r],.intro-bezig .kop-merk-naam span,.intro-bezig .hero-film video{transition:none!important}
.intro-skip{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:2;height:44px;padding:0 18px;display:inline-flex;align-items:center;gap:10px;font:700 11.5px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:#2a1b0e;background:rgba(239,225,194,.72);box-shadow:inset 0 0 0 1.5px rgba(42,27,14,.55);cursor:pointer;transition:background .25s,color .25s,opacity .2s}
.intro-skip svg{width:14px;height:14px}
.intro-skip:hover,.intro-skip:focus-visible{background:#2a1b0e;color:#efe1c2;outline:none}
.intro.brandt .intro-skip{opacity:0;pointer-events:none}

/* promo film at the top of the portfolio, shown once inhoud.js has a file for it */
.promo{margin:0 0 clamp(40px,6vw,80px)}
.promo-film{position:relative;aspect-ratio:16/9;background:var(--diep);overflow:hidden;border-top:3px solid var(--or)}
.promo-film video{width:100%;height:100%;object-fit:cover}
.promo-geluid{position:absolute;right:16px;bottom:16px;height:42px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;background:rgba(11,9,8,.72);color:var(--inkt);font:700 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--lijn2)}
.promo-geluid:hover{background:var(--or);color:var(--donker)}
.promo-geluid svg{width:16px;height:16px}
@media (max-width:700px){.promo-film{aspect-ratio:4/5}}

/* Delta Six-zegel: de handtekening onderaan elke website (Handtekening-SOP 10-10-2026, toegevoegd 19-10-2026). Bron: brandgevoel-sop/zegel/ */
.d6-zegel{position:relative;display:inline-grid;place-items:center;width:96px;height:96px;flex:none;color:inherit;text-decoration:none;transition:transform .55s cubic-bezier(.2,1.2,.3,1),opacity .25s,color .25s}
html.d6z-js .d6-zegel{opacity:0;transform:scale(1.7) rotate(-12deg)}
html.d6z-js .d6-zegel.is-aan{opacity:1;transform:none}
.d6-zegel__ring{position:absolute;inset:0;width:100%;height:100%;animation:d6z-draai 22s linear infinite}
.d6-zegel__ring text{font-family:inherit;font-weight:700;font-size:10.5px;letter-spacing:.22em;fill:currentColor}
.d6-zegel__merk{position:relative;width:46px;height:23px;fill:currentColor}
.d6-zegel::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #A600FF;opacity:0;transform:scale(.8);pointer-events:none}
.d6-zegel.is-aan::after{animation:d6z-inkt .9s ease-out .5s}
.d6-zegel:hover,.d6-zegel:focus-visible{color:#B83CFF}
.d6-zegel:hover .d6-zegel__ring{animation-play-state:paused}
.d6-zegel:active{transform:scale(.94)}
@keyframes d6z-draai{to{transform:rotate(360deg)}}
@keyframes d6z-inkt{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(1.35)}}
.d6z-facet{position:fixed;width:12px;height:12px;background:#A600FF;transform:rotate(45deg);z-index:2147483000;pointer-events:none;animation:d6z-val 1.4s ease-out forwards}
@keyframes d6z-val{to{transform:translate(var(--dx),var(--dy)) rotate(405deg);opacity:0}}
.d6z-toast{position:fixed;left:50%;top:24px;transform:translate(-50%,-60px);background:#0A0A0A;color:#fff;padding:10px 16px;border-radius:99px;font:600 13px/1.3 system-ui,sans-serif;z-index:2147483001;opacity:0;transition:.4s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.d6z-toast.is-aan{transform:translate(-50%,0);opacity:1}
@media(prefers-reduced-motion:reduce){html.d6z-js .d6-zegel{opacity:1;transform:none;transition:none}.d6-zegel__ring{animation:none}.d6-zegel.is-aan::after{animation:none}}
.voet-onder{align-items:center}
.voet-kaal{padding:0 0 28px}
/* the ring text in her condensed display letter: Inter ran past the end of the circle (279 of 251), Archivo 75% fits (245) */
.voet .d6-zegel__ring text{font-family:var(--disp);font-stretch:75%}

/* responsive */
@media (max-width:980px){
  .wat,.over,.teaser,.twee-kol,.boek-grid,.uitkomst-kop{grid-template-columns:1fr}
  .beeld-los{position:relative;top:0;max-width:520px}
  .collage{width:92%;margin:0 auto}
  .stappen{grid-template-columns:1fr 1fr}
  .stap-k{padding:24px 14px 18px 0}.stap-k:nth-child(2){border-right:0}.stap-k:nth-child(3){padding-left:0}.stap-k:nth-child(n+3){border-top:1px solid var(--lijn)}
  .tarieven{grid-template-columns:1fr 1fr}.tarief:nth-child(2){border-right:0}.tarief:nth-child(n+3){border-top:1px solid var(--lijn)}
  .grid-werk{grid-template-columns:1fr 1fr}
  .werk:nth-child(3n+2){margin-top:0}.werk:nth-child(2n){margin-top:clamp(30px,8vw,70px)}
  .voet-grid{grid-template-columns:1fr 1fr}
  .demo-kaart{margin:0}
  .plak,.boek-zij{position:static}
  .tijdlijn{grid-template-columns:1fr}.tl,.tl+.tl{padding:20px 0;border-right:0;border-bottom:1px solid var(--lijn)}
  .flash-notes{grid-template-columns:1fr}.flash-notes div+div{padding-left:0;border-left:0;border-top:1px solid var(--lijn)}.flash-notes div{padding:20px 0}
  .keuzes.beelden{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:800px){
  .verse-pin{height:auto!important}
  .verse-sticky{position:relative;height:auto;padding:var(--sec) 0 0}
  .verse-kop{padding-top:0}
  .verse-spoor{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;padding-bottom:10px;scrollbar-width:none;gap:16px}
  .verse-spoor::-webkit-scrollbar{display:none}
  .stuk{scroll-snap-align:center;margin-top:0!important}
  .stuk .beeld{height:auto;width:76vw}
  .verse-voet{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .stappen,.tarieven{grid-template-columns:1fr}
  .stap-k,.stap-k+.stap-k{padding:22px 0;border-right:0;border-top:1px solid var(--lijn)}
  .tarief{border-right:0!important;border-top:1px solid var(--lijn)}.tarief:first-child{border-top:0}
  .grid-werk{grid-template-columns:1fr}.werk:nth-child(2n){margin-top:0}
  .rij2,.maat-blok{grid-template-columns:1fr}
  .voet-grid{grid-template-columns:1fr}
  .doel-rij{grid-template-columns:40px 1fr;gap:6px 14px}.doel-rij p{grid-column:2}
  .insta{padding:26px}
  .lb-vorige,.lb-volgende{top:auto;bottom:24px}.lb-vorige{left:calc(50% - 64px)}.lb-volgende{right:calc(50% - 64px)}
  .papierlabel{margin:-22px 10px 0}
  .keuzes.beelden{gap:8px}
  .c-klein{outline-width:6px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-z],.hero [data-r]{opacity:1;translate:0 0;transform:none}
  .kop-merk-naam span{translate:0 0}
}

/* v27 (22-10-2026), PageSpeed */
/* de kop in de hero staat er meteen: hij is het grootste tekstblok (LCP) en wachtte op het invliegen */
.hero .h1[data-r]{opacity:1;transform:none;transition:none}
/* naam bovenin: vaste maat uit de breedte (gemeten 0,1075 en 0,2075), dus geen sprong als het lettertype laadt;
   zonder container-eenheden (oude Safari) schaalt site.js hem zoals eerst */
@supports (font-size:1cqi){.kop-merk{container-type:inline-size}.kop-merk-naam{font-size:10.748cqi}@media (max-width:700px){.kop-merk-naam{font-size:20.748cqi}}}
/* inkt komt zacht op zodra de shader klaar is (compileert op de achtergrond) */
.inkt-bg{opacity:0;transition:opacity .45s}.inkt-bg.aan{opacity:1}