/* ═══════════ LETTERS (lokaal, geen Google) ═══════════ */
@font-face{font-family:'Barlow Condensed';font-weight:200;font-style:normal;font-display:swap;src:url(../fonts/barlow-condensed-latin-200-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:200;font-style:italic;font-display:swap;src:url(../fonts/barlow-condensed-latin-200-italic.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/barlow-condensed-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:300;font-style:italic;font-display:swap;src:url(../fonts/barlow-condensed-latin-300-italic.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/barlow-condensed-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/barlow-condensed-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/inter-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format('woff2')}

/* ═══════════ BASIS ═══════════ */
:root{
  --bg:#24272C; --bg2:#2C3036; --bg3:#363A40; --line:rgba(226,208,203,.12); --line2:rgba(226,208,203,.22);
  --rose:#E2D0CB; --rose-d:#C4ADA7; --paper:#EEE8E5; --dim:#B4B8BD; --muted:#868C94;
  --glow:#F2C27B; --glow-d:#C98F45;
  --fd:'Barlow Condensed','Arial Narrow',sans-serif; --fb:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1320px; --pad:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--paper);font-family:var(--fb);font-weight:300;font-size:16px;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (hover:hover) and (pointer:fine){
  html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='30' viewBox='0 0 22 30'%3E%3Cpolygon points='2,2 20,2 11,28' fill='rgba(36,39,44,.55)' stroke='%23E2D0CB' stroke-width='1.6'/%3E%3C/svg%3E") 11 2,auto}
}

/* typografie */
.eyebrow{font-family:var(--fb);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-d);display:flex;align-items:center;gap:12px}
.eyebrow b{font-weight:500;color:var(--muted)}
.eyebrow::before{content:'';width:28px;height:1px;background:currentColor;opacity:.6}
.h-xl{font-family:var(--fd);font-weight:200;font-size:clamp(56px,10vw,150px);line-height:.88;letter-spacing:.01em;text-transform:uppercase}
.h-l{font-family:var(--fd);font-weight:200;font-size:clamp(40px,6vw,84px);line-height:.95;text-transform:uppercase;letter-spacing:.01em}
.h-m{font-family:var(--fd);font-weight:300;font-size:clamp(28px,3.2vw,42px);line-height:1.02;text-transform:uppercase;letter-spacing:.02em}
.h-s{font-family:var(--fd);font-weight:400;font-size:22px;line-height:1.1;text-transform:uppercase;letter-spacing:.04em}
.h-xl em,.h-l em,.h-m em,.h-s em{font-style:italic;color:var(--rose)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--dim);max-width:60ch}
.body{color:var(--dim);max-width:62ch}
.body p+p{margin-top:1em}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border:1px solid var(--line2);
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.btn:hover{border-color:var(--rose);color:var(--rose)}
.btn.solid{background:var(--rose);border-color:var(--rose);color:var(--bg)}
.btn.solid:hover{background:var(--paper);border-color:var(--paper);color:var(--bg)}
.btn.glow{background:var(--glow);border-color:var(--glow);color:#2a1e10}
.btn.glow:hover{background:#ffd79b;border-color:#ffd79b;color:#2a1e10}
.btn svg{width:14px;height:14px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.link{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--rose);
  border-bottom:1px solid var(--line2);padding-bottom:4px;transition:border-color .3s}
.link:hover{border-color:var(--rose)}
.chip{display:inline-block;font-size:11px;letter-spacing:.08em;color:var(--dim);border:1px solid var(--line);padding:3px 9px;border-radius:2px}

/* verschijnen */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ═══════════ NAVIGATIE ═══════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;display:flex;align-items:center;
  transition:background .4s,height .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(36,39,44,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);height:62px;border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{height:30px;width:auto}
.logo svg *{fill:none;stroke:var(--rose);stroke-width:5}
.logo span{display:flex;flex-direction:column;line-height:1.05;padding-left:12px;border-left:1px solid var(--line2)}
.logo small{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.logo b{font-family:var(--fd);font-weight:400;font-size:17px;letter-spacing:.18em;text-transform:uppercase}
.menu{display:flex;align-items:center;gap:30px;list-style:none}
.menu a{font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--dim);
  position:relative;padding:8px 0;transition:color .3s}
.menu a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.menu a:hover,.menu a.on{color:var(--paper)}
.menu a:hover::after,.menu a.on::after{transform:scaleX(1)}
.lang{display:flex;border:1px solid var(--line);margin-left:6px}
.lang button{font-size:11px;letter-spacing:.12em;color:var(--muted);padding:6px 10px;min-height:32px}
.lang button.on{background:var(--rose);color:var(--bg)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.burger i{display:block;width:22px;height:1.5px;background:var(--paper);transition:transform .3s,opacity .3s}
.nav.open .burger i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (max-width:980px){
  .burger{display:flex}
  .menu{position:fixed;inset:62px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:rgba(36,39,44,.98);
    border-bottom:1px solid var(--line);padding:8px var(--pad) 22px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
  .nav.open .menu{opacity:1;transform:none;pointer-events:auto}
  .nav.open{background:rgba(36,39,44,.98)}
  .menu a{display:block;padding:14px 0;font-size:14px;border-bottom:1px solid var(--line)}
  .lang{margin:16px 0 0;align-self:flex-start}
}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero-slide.on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 9s linear}
.hero-slide.on img{transform:scale(1)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(36,39,44,.55) 0%,rgba(36,39,44,.05) 30%,rgba(36,39,44,.25) 60%,rgba(36,39,44,.95) 100%),
             linear-gradient(90deg,rgba(36,39,44,.75) 0%,rgba(36,39,44,0) 60%)}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(40px,8vh,90px)}
.hero .tag{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-d);margin-bottom:22px}
.hero .tag i{width:7px;height:7px;border-radius:50%;background:#8fd19e;box-shadow:0 0 0 0 rgba(143,209,158,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(143,209,158,.55)}70%{box-shadow:0 0 0 10px rgba(143,209,158,0)}100%{box-shadow:0 0 0 0 rgba(143,209,158,0)}}
.hero h1 span{display:block}
.hero h1 .it{font-style:italic;color:var(--rose)}
.hero .sub{display:flex;flex-wrap:wrap;gap:8px 26px;margin:26px 0 34px;font-family:var(--fd);font-weight:300;font-size:clamp(18px,2vw,24px);letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
.hero .sub span{display:flex;align-items:center;gap:26px}
.hero .sub span+span::before{content:'';width:5px;height:5px;transform:rotate(45deg);border:1px solid var(--rose)}
.hero-cap{position:absolute;right:var(--pad);bottom:clamp(40px,8vh,90px);z-index:3;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.hero-cap .lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.hero-cap .lbl b{color:var(--paper);font-weight:400}
.hero-dots{display:flex;gap:6px}
.hero-dots button{width:22px;height:20px;position:relative}
.hero-dots button::before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(238,232,229,.25);transition:background .3s}
.hero-dots button.on::before{background:var(--rose)}
.hero-scroll{position:absolute;left:50%;bottom:18px;z-index:3;width:1px;height:44px;background:linear-gradient(var(--rose),transparent);animation:drop 2.2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){.hero-cap{display:none}.hero::after{background:linear-gradient(180deg,rgba(36,39,44,.6),rgba(36,39,44,.15) 35%,rgba(36,39,44,.92) 85%)}}

/* ═══════════ INTRO ═══════════ */
.intro{padding:clamp(80px,12vw,150px) 0 clamp(60px,8vw,100px)}
.intro .wrap.two{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end}
.intro .statement{font-family:var(--fd);font-weight:200;font-size:clamp(30px,3.6vw,52px);line-height:1.12;letter-spacing:.01em}
.intro .statement em{font-style:italic;color:var(--rose)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:clamp(50px,7vw,90px)}
.pillar{padding:28px 26px 8px 0;border-right:1px solid var(--line);text-decoration:none;transition:background .3s}
.pillar+.pillar{padding-left:26px}
.pillar:last-child{border-right:none}
.pillar .n{font-family:var(--fd);font-size:14px;letter-spacing:.2em;color:var(--rose-d)}
.pillar h3{margin:10px 0 8px}
.pillar p{font-size:14px;color:var(--muted)}
.pillar:hover h3{color:var(--rose)}
@media (max-width:860px){.intro .wrap.two{grid-template-columns:1fr}.pillars{grid-template-columns:1fr}.pillar,.pillar+.pillar{padding:22px 0;border-right:none;border-bottom:1px solid var(--line)}}

/* ═══════════ SECTIEKOP ═══════════ */
.sec{padding:clamp(80px,10vw,140px) 0;position:relative}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,70px)}
.sec-hd .l{display:flex;flex-direction:column;gap:20px}
.sec-hd p{max-width:46ch;color:var(--dim)}
.sec.alt{background:var(--bg2)}

/* ═══════════ PRODUCTEN ═══════════ */
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.feature+.feature{margin-top:clamp(90px,11vw,160px)}
.f-strip+.feature{margin-top:0}
.feature.rev-l{grid-template-columns:1fr 1.25fr}
.feature.rev-l .f-vis{order:2}
.f-vis{position:relative}
.f-main{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg2)}
.f-main img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.f-main:hover img{transform:scale(1.03)}
.f-small{position:absolute;width:38%;aspect-ratio:3/4;right:-6%;bottom:-8%;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45);border:6px solid var(--bg)}
.f-small img{width:100%;height:100%;object-fit:cover}
.f-num{position:absolute;left:-2px;top:-34px;font-family:var(--fd);font-weight:200;font-size:20px;letter-spacing:.2em;color:var(--muted)}
.f-txt{display:flex;flex-direction:column;gap:24px}
.f-list{list-style:none;display:grid;gap:10px;margin-top:4px}
.f-list li{display:flex;gap:14px;align-items:baseline;color:var(--dim);font-size:15px}
.f-list li::before{content:'';flex:0 0 7px;height:7px;transform:rotate(45deg) translateY(-2px);border:1px solid var(--rose)}
.f-strip{margin-top:clamp(70px,8vw,110px);margin-bottom:clamp(110px,12vw,170px)}
.f-strip .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--bg3) transparent}
.strip button{scroll-snap-align:start;aspect-ratio:3/4;overflow:hidden;background:var(--bg2);position:relative}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .4s}
.strip button:hover img{transform:scale(1.04)}
@media (max-width:900px){.feature,.feature.rev-l{grid-template-columns:1fr}.feature.rev-l .f-vis{order:0}.f-small{right:-2%;bottom:-6%}.strip{grid-auto-columns:42%}}

/* Ceres: van patroon naar lamp */
.ceres-vis{position:relative;aspect-ratio:1;background:radial-gradient(circle at 50% 50%,#3a3330 0%,#24272C 70%);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ceres-vis svg{width:88%;height:88%}
.ceres-vis .glow{position:absolute;width:42%;height:42%;border-radius:50%;background:radial-gradient(circle,rgba(242,194,123,.55),rgba(242,194,123,0) 70%);filter:blur(10px);animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.65;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
.ceres-vis .cap{position:absolute;left:18px;bottom:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cr-path{fill:none;stroke:var(--glow);stroke-width:1.1;stroke-linecap:round;opacity:.9}
.cr-fill{fill:var(--glow);opacity:.85}
.in .cr-path{animation:draw 3.2s var(--ease) forwards}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(50px,6vw,80px);border-top:1px solid var(--line)}
.step{padding:24px 22px 4px 0;position:relative}
.step+.step{padding-left:22px;border-left:1px solid var(--line)}
.step svg{width:40px;height:40px;stroke:var(--glow);fill:none;stroke-width:1.2;margin-bottom:14px}
.step b{display:block;font-family:var(--fd);font-weight:400;font-size:19px;letter-spacing:.05em;text-transform:uppercase}
.step p{font-size:14px;color:var(--muted);margin-top:4px}
.step .k{font-size:11px;letter-spacing:.2em;color:var(--glow-d)}
@media (max-width:860px){.process{grid-template-columns:1fr 1fr}.step:nth-child(3){padding-left:0;border-left:none}.step{border-top:1px solid var(--line)}}
.soon{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--glow);letter-spacing:.06em}
.soon::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px var(--glow)}

/* kleinere eigen ontwerpen */
.minis{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:clamp(90px,10vw,140px)}

/* ═══════════ KAARTEN (algemeen) ═══════════ */
.card{position:relative;display:flex;flex-direction:column;background:var(--bg2);text-align:left;overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 50px rgba(0,0,0,.35)}
.card .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg3)}
.card .ph img,.card .ph svg{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .ph img,.card:hover .ph svg{transform:scale(1.04)}
.card .bd{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .meta{display:flex;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.card .meta .live{color:#8fd19e}
.card p{font-size:14px;color:var(--dim)}
.card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.card .go{position:absolute;right:16px;top:16px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(36,39,44,.75);
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s var(--ease)}
.card:hover .go{opacity:1;transform:none}
.card .go svg{width:14px;height:14px;stroke:var(--rose);fill:none;stroke-width:1.6}
.card.tall .ph{aspect-ratio:4/5}

/* ═══════════ KARAKTERS ═══════════ */
.chars{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
.char-card .ph{aspect-ratio:auto;height:clamp(380px,48vw,620px)}
.char-card .ph img{object-fit:cover}
.char-card.rozen .ph{background:radial-gradient(ellipse at 40% 40%,#8b2430 0%,#5a141c 70%)}
.char-card.rozen .ph img{object-fit:contain;padding:6% 10% 0;object-position:bottom;filter:drop-shadow(0 20px 30px rgba(0,0,0,.4))}
.char-card .over{position:absolute;inset:auto 0 0 0;padding:28px;background:linear-gradient(transparent,rgba(20,22,26,.92));display:flex;flex-direction:column;gap:12px}
.char-card .over p{max-width:46ch}
@media (max-width:900px){.chars{grid-template-columns:1fr}.char-card .ph{height:auto;aspect-ratio:4/5}.char-card .over{position:static;background:none;padding:22px 22px 26px}}

/* ═══════════ LAB ═══════════ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.filters button{font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);color:var(--dim);transition:all .3s;min-height:40px}
.filters button:hover{border-color:var(--line2);color:var(--paper)}
.filters button.on{background:var(--rose);border-color:var(--rose);color:var(--bg)}
.filters button span{opacity:.6;margin-left:6px}
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;grid-auto-flow:dense}
.lab-grid .card.hide{display:none}
.lab-grid .card.big{grid-column:span 2}
.lab-grid .card.big .ph{aspect-ratio:16/8.4}
@media (max-width:1050px){.lab-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.lab-grid{grid-template-columns:1fr}.lab-grid .card.big{grid-column:auto}.minis{grid-template-columns:1fr}}

/* ═══════════ PORTFOLIO ═══════════ */
.pf-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:end;margin-bottom:clamp(40px,5vw,70px)}
.pf-grid{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15vw,220px);gap:10px}
.pf-item{position:relative;overflow:hidden;background:var(--bg3);text-align:left}
.pf-item.w2{grid-column:span 2}.pf-item.h2{grid-row:span 2}
.pf-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.85) brightness(.88)}
.pf-item:hover img{transform:scale(1.05);filter:none}
.pf-item .t{position:absolute;inset:auto 0 0 0;padding:16px 18px;background:linear-gradient(transparent,rgba(20,22,26,.85));
  display:flex;flex-direction:column;gap:2px;transform:translateY(8px);opacity:.92;transition:transform .5s var(--ease),opacity .4s}
.pf-item:hover .t{transform:none;opacity:1}
.pf-item .t b{font-family:var(--fd);font-weight:400;font-size:19px;letter-spacing:.05em;text-transform:uppercase}
.pf-item .t small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.pf-more{display:flex;justify-content:center;margin-top:34px}
@media (max-width:900px){.pf-intro{grid-template-columns:1fr}.pf-grid{grid-template-columns:repeat(2,1fr)}.pf-item.w2{grid-column:span 2}}

/* ═══════════ OVER & CONTACT ═══════════ */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,100px);align-items:start}
.about-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg3)}
.about-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.about-ph::after{content:'';position:absolute;inset:14px;border:1px solid rgba(226,208,203,.25);pointer-events:none}
.motto{font-family:var(--fd);font-style:italic;font-weight:200;font-size:30px;color:var(--rose);margin-top:26px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 30px;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.facts dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin-top:4px;font-size:15px}
.facts a{text-decoration:none;border-bottom:1px solid var(--line2)}
.facts a:hover{color:var(--rose)}
.skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
@media (max-width:900px){.about{grid-template-columns:1fr}.about-ph{max-width:380px}}
.contact{text-align:center;padding:clamp(100px,13vw,180px) 0;background:radial-gradient(ellipse at 50% 120%,rgba(226,208,203,.10),transparent 60%)}
.contact .h-xl{margin:22px 0 34px}
.contact .eyebrow{justify-content:center}
.contact .eyebrow::before{display:none}
.contact .btns{justify-content:center}
.foot{border-top:1px solid var(--line);padding:26px 0;font-size:12px;color:var(--muted)}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a{text-decoration:none;letter-spacing:.12em;text-transform:uppercase}
.foot a:hover{color:var(--rose)}

/* ═══════════ VENSTERS (galerij en app) ═══════════ */
.ov{position:fixed;top:72px;right:0;bottom:0;width:min(94vw,1240px);z-index:500;background:#1b1d21;display:flex;flex-direction:column;
  transform:translateX(102%);visibility:hidden;transition:transform .6s cubic-bezier(.16,1,.3,1),visibility 0s .6s;
  box-shadow:-24px 0 60px rgba(0,0,0,.45);border-top:1px solid var(--line)}
.ov::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rose-d);opacity:.7}
.ov.open{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.16,1,.3,1),visibility 0s}
#app{width:min(97vw,1480px);z-index:510}
.ov-bd{position:fixed;top:72px;left:0;right:0;bottom:0;z-index:490;background:rgba(16,18,21,.62);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .45s}
.ov-bd.on{opacity:1;pointer-events:auto}
@media (max-width:820px){.ov,#app{width:100%}}
@keyframes ovin{from{opacity:0}to{opacity:1}}
.ov-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--pad);border-bottom:1px solid var(--line);min-height:64px}
.ov-top .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ov-top .t small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-d)}
.ov-top .t b{font-family:var(--fd);font-weight:300;font-size:24px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-top .r{display:flex;align-items:center;gap:10px}
.x{width:44px;height:44px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:22px;transition:border-color .3s,color .3s}
.x:hover{border-color:var(--rose);color:var(--rose)}
.gal{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:0}
.gal-st{position:relative;display:flex;flex-direction:column;min-height:0}
.gal-img{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:20px}
.gal-img img{max-width:100%;max-height:100%;object-fit:contain;opacity:0;transition:opacity .4s}
.gal-img img.ld{opacity:1}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:72px;font-size:34px;color:var(--dim);transition:color .3s}
.gal-nav:hover{color:var(--rose)}
.gal-nav.p{left:6px}.gal-nav.n{right:6px}
.gal-th{display:flex;gap:6px;padding:10px 20px 16px;overflow-x:auto;scrollbar-width:thin;min-width:0}
.gal-th button{flex:0 0 76px;height:54px;overflow:hidden;opacity:.45;transition:opacity .3s;outline-offset:-2px}
.gal-th button.on,.gal-th button:hover{opacity:1}
.gal-th button.on{outline:2px solid var(--rose)}
.gal-th img{width:100%;height:100%;object-fit:cover}
.gal-tx{border-left:1px solid var(--line);padding:30px 30px 40px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.gal-tx .chips{display:flex;flex-wrap:wrap;gap:6px}
.gal-tx .links{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.gal-tx .links a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);text-decoration:none;transition:border-color .3s}
.gal-tx .links a:hover{border-color:var(--rose)}
.gal-tx .links a b{font-weight:400;font-size:14px;color:var(--rose)}
.gal-tx .links a small{font-size:12px;color:var(--muted)}
.gal-empty{color:var(--muted);font-size:14px;text-align:center;max-width:36ch;line-height:1.7}
.gal-empty svg{width:100%;max-width:520px;margin:0 auto 18px}
@media (max-width:900px){.gal{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;overflow-y:auto}.gal-st{min-height:60vh}.gal-tx{border-left:none;border-top:1px solid var(--line)}}
.app-frame{flex:1;position:relative;background:#111}
.app-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.app-frame .ld{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;letter-spacing:.1em}

/* ═══════════ TOPICS: delen die van opzij binnenkomen ═══════════ */
.band{padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(40px,5vw,60px);display:flex;flex-direction:column;gap:20px}
.topics{background:var(--bg2);position:relative;padding-bottom:clamp(60px,8vw,110px)}
.topic{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(520px,64vh,720px);position:relative;overflow:hidden}
.topic+.f-strip,.topic+.wrap{margin-top:0}
.t-vis{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:420px}
.t-rhombi .t-vis{background:var(--rose-d)}
.t-ceres .t-vis{background:radial-gradient(ellipse at 50% 55%,#5a4632 0%,#2e2a26 70%)}
.t-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(44,48,54,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(44,48,54,.07) 1px,transparent 1px);background-size:32px 32px}
.t-ceres .t-grid{background-image:linear-gradient(rgba(242,194,123,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(242,194,123,.06) 1px,transparent 1px)}
.t-wm{position:absolute;font-family:var(--fd);font-weight:200;font-style:italic;font-size:clamp(90px,13vw,200px);line-height:1;letter-spacing:-.02em;
  color:rgba(44,48,54,.10);bottom:-4%;left:-1%;white-space:nowrap;pointer-events:none;will-change:transform}
.t-ceres .t-wm{color:rgba(242,194,123,.07);left:auto;right:-1%}
.t-card{position:relative;z-index:2;width:min(56%,420px);aspect-ratio:4/5;overflow:hidden;
  box-shadow:0 10px 34px rgba(30,32,36,.38),0 36px 70px rgba(30,32,36,.32);transition:transform .8s var(--ease)}
.t-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.t-card:hover img{transform:scale(1.04)}
.t-card2{position:absolute;z-index:3;width:min(26%,190px);aspect-ratio:1;right:9%;bottom:10%;overflow:hidden;border:5px solid var(--paper);
  box-shadow:0 20px 40px rgba(30,32,36,.4);transform:rotate(3deg)}
.t-ceres .t-card2{right:auto;left:9%;transform:rotate(-3deg);border-color:#2e2a26}
.t-card2 img{width:100%;height:100%;object-fit:cover}
.t-txt{position:relative;z-index:4;background:var(--bg);padding:clamp(40px,5vw,80px) clamp(28px,5vw,84px);display:flex;flex-direction:column;justify-content:center;gap:22px}
.t-txt.cut-l{clip-path:polygon(clamp(24px,4vw,64px) 0,100% 0,100% 100%,0 100%);margin-left:calc(-1 * clamp(24px,4vw,64px));padding-left:calc(clamp(28px,5vw,84px) + clamp(24px,4vw,64px))}
.t-txt.cut-r{clip-path:polygon(0 0,100% 0,calc(100% - clamp(24px,4vw,64px)) 100%,0 100%);margin-right:calc(-1 * clamp(24px,4vw,64px));padding-right:calc(clamp(28px,5vw,84px) + clamp(24px,4vw,64px))}
.t-ceres{margin-top:clamp(70px,8vw,120px)}
/* binnenkomen van opzij */
.from-l,.from-r{transition:transform 1.2s var(--ease),opacity 1.2s var(--ease),clip-path 1.2s var(--ease)}
.from-l{transform:translateX(-90px);opacity:0}
.from-r{transform:translateX(90px);opacity:0}
.from-l.in,.from-r.in{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.from-l,.from-r{transform:none;opacity:1;transition:none}}
@media (max-width:900px){
  .topic{grid-template-columns:1fr}
  .t-ceres .t-vis{order:-1}
  .t-txt.cut-l,.t-txt.cut-r{clip-path:none;margin:0;padding:36px 22px 44px}
  .t-vis{min-height:0;padding:44px 0}
  .t-card{width:64%}
}
/* V-snede onderaan een vlak (zoals het logo) */
.vcut{position:relative}
.vcut::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:clamp(26px,3vw,46px);z-index:6;clip-path:polygon(0 100%,50% 0,100% 100%);background:var(--to,var(--bg))}
.vtop{padding-top:clamp(90px,11vw,150px)}

/* tabs boven de fotostrook */
.f-strip{margin-top:clamp(40px,5vw,60px)!important;margin-bottom:0!important}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs button{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);color:var(--dim);min-height:36px}
.tabs button.on{background:var(--rose);color:var(--bg);border-color:var(--rose)}
.strip{grid-auto-columns:minmax(200px,1fr)}
.strip button{aspect-ratio:1}

/* ═══════════ LAB ═══════════ */
.lab{background:var(--bg);position:relative}
.lab-hero{position:relative;min-height:clamp(480px,72vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.t-bg{position:absolute;inset:-10% 0;background-size:cover;background-position:center;will-change:transform}
.t-over{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,26,30,.55),rgba(24,26,30,.6) 50%,rgba(36,39,44,1));}
.lab-wm{position:absolute;right:-1%;bottom:4%;font-family:var(--fd);font-weight:200;font-size:clamp(120px,22vw,340px);line-height:.8;color:rgba(226,208,203,.06);letter-spacing:-.02em;text-transform:uppercase;pointer-events:none}
.lab-hero-in{position:relative;z-index:2;padding-bottom:clamp(50px,7vw,90px);display:flex;flex-direction:column;gap:22px}
.lab-hero-in .lead{max-width:56ch}
.lab-hero::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:clamp(26px,3vw,46px);z-index:3;clip-path:polygon(0 100%,50% 0,100% 100%);background:var(--bg)}
.tools{display:flex;flex-direction:column;gap:clamp(70px,9vw,130px);padding-top:clamp(70px,8vw,110px);padding-bottom:clamp(80px,9vw,120px)}
.tool{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.tool.alt{grid-template-columns:1fr 1.15fr}
.tool.alt .tool-vis{order:2}
.tool-vis{position:relative;padding:clamp(18px,2.4vw,34px)}
.tool-vis::before{content:'';position:absolute;inset:0;background:var(--brand,var(--bg3));clip-path:polygon(0 0,100% 0,calc(100% - 44px) 100%,0 100%)}
.tool.alt .tool-vis::before{clip-path:polygon(44px 0,100% 0,100% 100%,0 100%)}
.tool-shot{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);background:#111}
.tool-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.tool-shot.contain img{object-fit:contain;background:#1b1d21}
.tool-txt{display:flex;flex-direction:column;gap:18px}
.tool-head{display:flex;align-items:center;gap:18px}
.tool-head img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.tool-head .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tool .f-list li{font-size:14px}
.tool .chips{display:flex;flex-wrap:wrap;gap:6px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fd19e}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.off{color:var(--muted)}
@media (max-width:900px){.tool,.tool.alt{grid-template-columns:1fr}.tool.alt .tool-vis{order:0}}
.more{padding-bottom:clamp(90px,10vw,140px)}
.more-hd{border-top:1px solid var(--line);padding-top:28px;margin-bottom:22px}
.more-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.more-item{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--line);text-align:left;transition:padding .4s var(--ease)}
.more-item:hover{padding-left:8px}
.more-item b{font-family:var(--fd);font-weight:400;font-size:20px;letter-spacing:.05em;text-transform:uppercase}
.more-item b small{font-family:var(--fb);font-size:10px;letter-spacing:.16em;color:var(--muted);margin-left:8px;vertical-align:middle}
.more-item span{font-size:13px;color:var(--muted)}
.more-item:hover b{color:var(--rose)}
@media (max-width:980px){.more-list{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.more-list{grid-template-columns:1fr}}

/* ═══════════ PORTFOLIO + KCAP-TOOLS ═══════════ */
.pf{background:var(--bg)}
.pf-hero .t-over{background:linear-gradient(180deg,rgba(24,26,30,.35),rgba(24,26,30,.55) 50%,rgba(36,39,44,1))}
.pf-body{padding-top:clamp(50px,6vw,80px)}
.kt{padding-top:clamp(90px,10vw,140px);padding-bottom:clamp(90px,10vw,140px)}
.kt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.kt-grid{grid-template-columns:1fr}}
.card.text .ph{display:none}
.card.text{border-top:2px solid var(--rose-d)}

/* grote schermen: banden niet over de volle breedte */
:root{--max:1680px}
.hero,.topic,.lab-hero{max-width:var(--max);margin-left:auto;margin-right:auto}
@media (min-width:1700px){.hero{height:min(100svh,980px)}.topic+.topic,.f-strip+.topic{margin-top:28px}}

/* hover-film in de toolbeelden */
.tool-pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .5s;background:#111;pointer-events:none}
.tool-shot.contain .tool-pv{object-fit:contain}
.tool.pv-on .tool-pv{opacity:1}
.tool-scrub{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s;pointer-events:none;display:block}
.tool-scrub.on{opacity:1}
.pv-hint{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;padding-left:2px;color:var(--paper);background:rgba(20,22,26,.6);border:1px solid rgba(255,255,255,.25);transition:opacity .4s}
.tool.pv-on .pv-hint{opacity:0}
.film-list{display:flex;flex-direction:column;gap:8px}
.film-list button{text-align:left;padding:13px 16px;border:1px solid var(--line);font-size:14px;color:var(--dim);transition:border-color .3s,color .3s}
.film-list button:hover,.film-list button.on{border-color:var(--rose);color:var(--paper)}

/* uitschuifpaneel: zelf breder slepen of volledig scherm */
.fs{width:44px;height:44px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--dim);transition:border-color .3s,color .3s}
.fs:hover{border-color:var(--rose);color:var(--paper)}
.fs svg{width:16px;height:16px}.fs .b{display:none}
.ov.full .fs .a{display:none}.ov.full .fs .b{display:inline}
.ov.full{width:100vw!important;top:0;z-index:600;border-top:none}
.ov.full::before{display:none}
.ov-grip{position:absolute;left:-7px;top:0;bottom:0;width:14px;cursor:ew-resize;z-index:5;touch-action:none}
.ov-grip::after{content:'';position:absolute;left:5px;top:50%;width:4px;height:56px;margin-top:-28px;border-radius:2px;background:var(--rose-d);opacity:.55;transition:opacity .3s,height .3s,margin .3s}
.ov-grip:hover::after,.ov.drag .ov-grip::after{opacity:1;height:96px;margin-top:-48px}
.ov.full .ov-grip{display:none}
.ov.drag{transition:none!important;user-select:none}
.ov.drag iframe,.ov.drag video{pointer-events:none}
body.ov-drag{cursor:ew-resize}
@media (max-width:820px){.ov-grip,.fs{display:none}}
.ov{max-width:100vw}
@media (max-width:820px){.ov,#app{width:100%!important}}

/* ════════ BEWEGING: hoofdstukken, parallax, onthullingen ════════ */
/* hoofdstukopener: schuine plaat van links, logo dat zichzelf tekent, groot nummer in diepte */
.chap{position:relative;max-width:var(--max);margin:0 auto;min-height:clamp(440px,66vh,680px);display:flex;align-items:flex-end;overflow:hidden;
  padding:clamp(110px,12vw,170px) 0 clamp(54px,6vw,84px)}
.chap-sec{padding-top:0}
.chap-slab{position:absolute;left:0;top:14%;bottom:20%;width:44%;pointer-events:none;
  background:linear-gradient(100deg,rgba(196,173,167,.16),rgba(196,173,167,.05));clip-path:polygon(0 0,100% 0,calc(100% - 110px) 100%,0 100%);
  translate:calc((1 - min(1, var(--p,0) * 2.1)) * -101%) 0}
.chap::after{content:'';position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--line2);transform-origin:left;
  transform:scaleX(min(1, calc(var(--p,0) * 1.9)))}
.chap-num{position:absolute;right:3%;top:50%;font-family:var(--fd);font-weight:200;font-size:clamp(220px,32vw,500px);line-height:.78;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(226,208,203,.15);pointer-events:none;user-select:none;
  translate:0 calc(-50% + (var(--p,.5) - .5) * -260px)}
.chap-mark{position:absolute;right:clamp(60px,26vw,460px);top:15%;width:clamp(110px,13vw,210px);fill:none;stroke:var(--rose-d);stroke-width:1.1;opacity:.6;
  pointer-events:none;rotate:calc((var(--p,.5) - .5) * 16deg);translate:0 calc((var(--p,.5) - .5) * 120px)}
.chap-mark path{stroke-dasharray:1;stroke-dashoffset:clamp(0, calc(1 - var(--p,0) * 2.6), 1)}
.chap-mark path:nth-child(2){stroke-dashoffset:clamp(0, calc(1.3 - var(--p,0) * 2.6), 1)}
.chap-mark path:nth-child(3){stroke-dashoffset:clamp(0, calc(1.6 - var(--p,0) * 2.6), 1)}
.chap-in{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;width:100%}
.chap .h-xl{translate:calc((var(--p,.5) - .5) * -70px) 0}
.chap .lead{max-width:52ch}
/* in de foto-koppen van Lab en Portfolio dezelfde taal */
.lab-hero .chap-num{z-index:1;-webkit-text-stroke:1px rgba(238,232,229,.22);right:auto;left:52%}
.lab-hero .chap-mark{z-index:1;top:12%;right:8%;stroke:var(--paper);opacity:.45}
.lab-hero .t-bg{scale:calc(1.06 + var(--p,.5) * .1)}
.lab-hero-in{z-index:2}

/* koppen woord voor woord omhoog */
.split.rv{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .08em 0;margin:0 -.08em -.08em 0}
.split .w>span{display:inline-block;transform:translateY(112%);transition:transform 1.15s var(--ease);transition-delay:calc(var(--i,0) * 75ms + .05s)}
.split.in .w>span,.in .split .w>span{transform:none}

/* hero: beeld zoomt in, tekst schuift weg */
.hero .hero-slides{scale:calc(1 + var(--hp,0) * .14);transform-origin:50% 65%}
.hero .hero-in{translate:0 calc(var(--hp,0) * -110px);opacity:calc(1 - var(--hp,0) * 1.4)}
.hero .hero-cap,.hero .hero-scroll{opacity:calc(1 - var(--hp,0) * 2)}

/* diepte in de productpanelen en tools */
.topic .t-card{translate:0 calc((var(--p,.5) - .5) * -60px)}
.topic .t-card2{translate:0 calc((var(--p,.5) - .5) * 90px)}
.topic .t-wm{translate:calc((var(--p,.5) - .5) * 160px) 0}
.tool .tool-shot{translate:0 calc((var(--p,.5) - .5) * -40px)}
.tool .tool-vis::before{translate:calc((var(--p,.5) - .5) * 40px) 0}

/* beelden onthullen met een veeg */
.wipe.rv{opacity:1;transform:none;position:relative}
.wipe.rv::before{content:'';position:absolute;inset:-1px;z-index:6;background:var(--bg);transform-origin:50% 100%;transition:transform 1.25s var(--ease);transition-delay:inherit;pointer-events:none}
.wipe.rv.in::before{transform:scaleY(0)}
.wipe.rv>img,.wipe.rv .ph img{scale:1.14;transition:scale 1.7s var(--ease),transform 1.2s var(--ease),filter .6s}
.wipe.rv.in>img,.wipe.rv.in .ph img{scale:1}

/* scrollvoortgang in de menubalk */
.sbar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--rose-d);transform-origin:left;transform:scaleX(var(--sp,0));pointer-events:none}

/* hoofdstukrail rechts */
.rail{position:fixed;right:clamp(16px,1.6vw,30px);top:50%;translate:0 -50%;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:16px;
  opacity:0;pointer-events:none;transition:opacity .6s}
.rail.on{opacity:1;pointer-events:auto}
.rail a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--muted);font-size:10px;letter-spacing:.22em;text-transform:uppercase;transition:color .3s}
.rail a span{opacity:0;translate:8px 0;transition:opacity .4s,translate .4s var(--ease);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.rail a b{font-family:var(--fd);font-weight:400;font-size:13px;letter-spacing:.08em}
.rail a i{display:block;width:16px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.rail a:hover,.rail a.on{color:var(--rose)}
.rail a.on i{width:40px}
.rail:hover a span,.rail a.on span{opacity:1;translate:0 0}
@media (max-width:1360px){.rail{display:none}}

@media (max-width:760px){
  .chap{min-height:0;padding-top:90px}
  .chap-num{font-size:52vw;right:-4%;top:30%}
  .chap-mark{right:8%;top:10%;width:90px}
  .chap-slab{width:70%}
}
@media (prefers-reduced-motion:reduce){
  .split .w>span{transform:none;transition:none}
  .wipe.rv::before{display:none}
  .chap-mark path{stroke-dashoffset:0}
}

/* ════════ GALERIJ: mozaiek in het paneel, lightbox bij klikken ════════ */
.gal-mos{min-height:0;overflow-y:auto;padding:4px;container-type:inline-size;scrollbar-width:thin}
.mos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(110px,13cqw,190px);gap:4px;grid-auto-flow:dense}
.mos{position:relative;overflow:hidden;background:var(--bg3);cursor:zoom-in;outline-offset:-2px;
  animation:mosIn 1s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms + .15s)}
.mos img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.9);transition:transform 1.2s var(--ease),filter .5s}
.mos:hover img{transform:scale(1.06);filter:none}
.mos.big{grid-column:span 3;grid-row:span 3}
.mos.big img{filter:none;animation:kb 16s ease-in-out infinite alternate}
.mos.wide{grid-column:span 2}
.mos.tall{grid-row:span 2}
.mos::after{content:'';position:absolute;inset:0;border:1px solid rgba(226,208,203,0);transition:border-color .4s;pointer-events:none}
.mos:hover::after{border-color:rgba(226,208,203,.5)}
@keyframes mosIn{from{clip-path:inset(0 0 100% 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,-1%)}}
@container (max-width:620px){.mos-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:26cqw}.mos.big{grid-column:span 3;grid-row:span 2}}
@container (max-width:420px){.mos-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:40cqw}.mos.big{grid-column:span 2;grid-row:span 2}.mos.wide{grid-column:span 2}}
.gal-mos .gal-empty{padding:80px 20px;margin:0 auto}
.gal-film{display:flex;align-items:center;justify-content:center;height:100%;padding:clamp(12px,2vw,28px);background:#0e0f11}
.gal-film video{width:100%;max-height:100%;background:#000}

.lb{position:fixed;inset:0;z-index:700;background:rgba(12,13,15,.97);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.lb.open{opacity:1;visibility:visible;transition:opacity .35s}
.lb-top{display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad);min-height:64px}
.lb-cnt{font-family:var(--fd);font-size:15px;letter-spacing:.2em;color:var(--muted)}
.lb .gal-st{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.lb .gal-img{cursor:zoom-out}
.lb .gal-img img{cursor:default;scale:.97;transition:opacity .4s,scale .6s var(--ease)}
.lb .gal-img img.ld{scale:1}
.lb .gal-th{justify-content:center}
@media (prefers-reduced-motion:reduce){.mos,.mos.big img{animation:none}}
@media (max-width:900px){.gal-mos{overflow:visible}}
@media (max-width:900px){.gal{display:block;overflow-y:auto}.gal-tx{border-top:1px solid var(--line)}}
.lb .gal-th{justify-content:flex-start}.lb .gal-th>button:first-child{margin-left:auto}.lb .gal-th>button:last-child{margin-right:auto}
/* portfolio: tabs architectuur, stedenbouw, impressies */
.pf-tabs{margin-bottom:22px}
.pf-tabs button small{font-size:10px;color:var(--muted);margin-left:6px;letter-spacing:.1em}
.pf-tabs button.on small{color:inherit;opacity:.7}
.pf-item .t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ════════ RUSTIG: alles langzamer en zachter ════════ */
:root{--ease:cubic-bezier(.22,.08,.12,1)}
.rv{transform:translateY(18px);transition:opacity 1.9s var(--ease),transform 1.9s var(--ease)}
.rv.d1{transition-delay:.2s}.rv.d2{transition-delay:.4s}.rv.d3{transition-delay:.6s}
.from-l,.from-r{transition:transform 2.2s var(--ease),opacity 2.2s var(--ease),clip-path 2.2s var(--ease)}
.from-l{transform:translateX(-60px)}.from-r{transform:translateX(60px)}
.from-l.in,.from-r.in{transform:none}
.split .w>span{transition:transform 1.9s var(--ease);transition-delay:calc(var(--i,0) * 120ms + .15s)}
.wipe.rv::before{transition:transform 2.2s var(--ease)}
.wipe.rv>img,.wipe.rv .ph img{transition:scale 2.6s var(--ease),transform 2s var(--ease),filter 1s}
.ov{transition:transform 1s var(--ease),visibility 0s 1s}
.ov.open{transition:transform 1s var(--ease),visibility 0s}
.ov-bd{transition:opacity .9s}
.lb,.lb.open{transition:opacity .7s,visibility 0s .7s}
.lb.open{transition:opacity .7s}
.mos{animation-duration:1.8s;animation-delay:calc(var(--i,0) * 90ms + .4s)}
.mos img,.pf-item img,.t-card img,.card .ph img,.strip img{transition:transform 2.2s var(--ease),filter 1s}
.tool-pv{transition:opacity 1.2s}
.chap-slab{transition:none}
/* parallax zachter */
.chap-num{translate:0 calc(-50% + (var(--p,.5) - .5) * -160px)}
.chap-mark{rotate:calc((var(--p,.5) - .5) * 8deg);translate:0 calc((var(--p,.5) - .5) * 70px)}
.chap .h-xl{translate:calc((var(--p,.5) - .5) * -36px) 0}
.topic .t-card{translate:0 calc((var(--p,.5) - .5) * -36px)}
.topic .t-card2{translate:0 calc((var(--p,.5) - .5) * 50px)}
.topic .t-wm{translate:calc((var(--p,.5) - .5) * 90px) 0}
.tool .tool-shot{translate:0 calc((var(--p,.5) - .5) * -24px)}
.tool .tool-vis::before{translate:calc((var(--p,.5) - .5) * 24px) 0}
.hero .hero-slides{scale:calc(1 + var(--hp,0) * .08)}
.hero .hero-in{translate:0 calc(var(--hp,0) * -70px);opacity:calc(1 - var(--hp,0) * 1.2)}

/* ════════ NIETS AFSNIJDEN ════════ */
/* hero: hele foto, met dezelfde foto wazig erachter */
.hero-slide{transition:opacity 2.6s ease}
.hs-bg{position:absolute;inset:-80px;background-size:cover;background-position:center;filter:blur(46px) brightness(.45) saturate(1.1)}
.hero-slide img{position:relative;object-fit:contain;object-position:72% 50%;transform:scale(1.03);transition:transform 16s linear}
.hero-slide.on img{transform:scale(1)}
@media (max-width:760px){.hero-slide img{object-position:50% 30%}}
/* kaders volgen de verhouding van de foto */
.char-card .ph{height:auto;aspect-ratio:4/5}
.chars,.minis{align-items:start}
.t-card.land{width:min(84%,600px)}
.t-card2.land{width:min(34%,240px)}
.strip{display:flex}
.strip button{flex:0 0 auto;height:clamp(170px,19vw,250px);width:auto;aspect-ratio:3/4}
.gal-th button{flex:0 0 auto;width:auto;height:54px}
.gal-th img{width:auto;height:100%}
/* portfolio en galerij: rijen op fotoverhouding, geen uitsnede */
.pf-grid{display:flex;flex-wrap:wrap;gap:10px;--rh:clamp(160px,18vw,270px)}
.pf-grid::after{content:'';flex-grow:1000000}
.pf-item{flex:calc(var(--r,1.5) * 100) 1 calc(var(--r,1.5) * var(--rh));aspect-ratio:var(--r,1.5)}
.mos-grid{display:flex;flex-wrap:wrap;gap:4px;--rh:clamp(110px,15cqw,190px)}
.mos-grid::after{content:'';flex-grow:1000000}
.mos{flex:calc(var(--r,1.5) * 100) 1 calc(var(--r,1.5) * var(--rh));aspect-ratio:var(--r,1.5)}
.mos.big{flex:1 1 100%;aspect-ratio:var(--r,1.5);max-height:74vh;background:#141619}
.mos.big img{object-fit:contain}
.mos.big.vid img{object-fit:cover}
@media (max-width:760px){.pf-grid{--rh:120px;gap:6px}}
/* video's */
.play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(20,22,26,.5);border:1px solid rgba(238,232,229,.55);
  backdrop-filter:blur(4px);transition:background .8s,transform 1.2s var(--ease);z-index:2;pointer-events:none}
.play::after{content:'';position:absolute;left:25px;top:20px;border-left:16px solid var(--paper);border-top:11px solid transparent;border-bottom:11px solid transparent}
.play.sm{left:auto;top:auto;right:12px;bottom:auto;top:12px;margin:0;width:34px;height:34px}
.play.sm::after{left:13px;top:10px;border-left-width:10px;border-top-width:7px;border-bottom-width:7px}
.mos:hover .play,.pf-item:hover .play{background:rgba(196,173,167,.7);transform:scale(1.06)}
.mos .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;font-size:12px;color:var(--paper);background:linear-gradient(transparent,rgba(14,15,17,.85));text-align:left;z-index:2}
.pf-item.vid .t{transform:none;opacity:1}
.yt{width:min(100%,calc((100vh - 210px) * 16 / 9));aspect-ratio:16/9;background:#000}
.yt iframe{width:100%;height:100%;border:0;display:block}
@media (prefers-reduced-motion:reduce){.hero-slide img{transition:none}}
/* kaders nooit hoger dan het scherm; dan past de foto erin in plaats van eraf te vallen */
.ph,.t-card,.tool-shot,.about-ph{max-height:min(78vh,700px)}
.char-card .ph{max-height:min(74vh,640px);background:#1d1f23}
.ph img,.t-card img,.t-card2 img,.tool-shot img,.about-ph img,.char-card .ph img{object-fit:contain}
.tool-shot img{object-position:center}
/* een losse kaart onder de producten: breed, beeld links en tekst rechts */
.minis:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.minis > .card:only-child{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:end;background:none}
.minis > .card:only-child .bd{padding:0 0 10px}
.minis > .card:only-child .h-m{font-size:clamp(30px,3.4vw,48px)}
@media (max-width:760px){.minis > .card:only-child{grid-template-columns:1fr;gap:16px}}
/* V-cursor met spook-V, alleen met muis */
#v-cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .4s;will-change:transform}
#v-trail{position:fixed;inset:0;width:100vw;height:100vh;z-index:9998;pointer-events:none;opacity:0;transition:opacity .6s}
html.vcur,html.vcur *{cursor:none!important}
html.vcur iframe{cursor:auto!important}
#v-cursor{transform-origin:11px 30px}

/* sleepgreep: duidelijk lipje met nudge en hint */
.ov-grip{left:-26px;width:34px}
.ov-grip::after{display:none}
.grip-tab{position:absolute;left:6px;top:50%;width:20px;height:92px;margin-top:-46px;border-radius:12px 0 0 12px;
  background:radial-gradient(circle,rgba(36,39,44,.7) 1.1px,transparent 1.5px) center/6px 7px,var(--rose-d);
  box-shadow:-6px 0 18px rgba(0,0,0,.35);transition:width .9s var(--ease),left .9s var(--ease),background-color .6s}
.grip-tab i{position:absolute;left:5px;top:-16px;width:8px;height:8px;border-left:1.5px solid var(--rose-d);border-bottom:1.5px solid var(--rose-d);transform:rotate(45deg);opacity:.85}
.grip-hint{position:absolute;right:32px;top:50%;translate:0 -50%;white-space:nowrap;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);
  background:rgba(20,22,26,.85);padding:7px 10px;border:1px solid var(--line2);opacity:0;pointer-events:none;transition:opacity .8s}
.ov-grip:hover .grip-tab,.ov.drag .grip-tab{left:0;width:26px}
.ov-grip:hover .grip-hint{opacity:1}
.ov.open .grip-tab{animation:gripNudge 2.8s var(--ease) 1.4s 2}
.ov.open .grip-hint{animation:gripHint 5s ease 1.4s both}
@keyframes gripNudge{0%,100%{translate:0}35%{translate:-10px}65%{translate:0}}
@keyframes gripHint{0%{opacity:0}18%{opacity:1}75%{opacity:1}100%{opacity:0}}
.ov.full .ov-grip{display:none}

/* Rozenbottel-boek onder de karakters */
.book{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,70px);align-items:center;margin-top:clamp(80px,9vw,130px)}
.book-vis{position:relative;display:block;padding:clamp(16px,2.2vw,30px);cursor:pointer}
.book-vis::before{content:'';position:absolute;inset:0;background:#7a1b24;clip-path:polygon(0 0,100% 0,calc(100% - 46px) 100%,0 100%);transition:translate 1.6s var(--ease)}
.book-vis img{position:relative;width:100%;height:auto;box-shadow:0 28px 60px rgba(0,0,0,.5);transition:transform 2s var(--ease)}
.book-vis:hover img{transform:scale(1.015)}
.book-vis:hover::before{translate:-8px 0}
.book-txt{display:flex;flex-direction:column;gap:22px}
@media (max-width:900px){.book{grid-template-columns:1fr}}

/* ════════ HOOFDSTUKKEN: eigen tint, zachte schaduw en lijn bij elke overgang ════════ */
:root{--tone-a:#24272C;--tone-b:#2B2F35;--tone-c:#1C1F23}
.intro{background:var(--tone-a)}
.topics{background:var(--tone-b)}
#karakters{background:var(--tone-a)}
.lab{background:var(--tone-c)}
.pf{background:var(--tone-b)}
#over{background:var(--tone-a)}
.contact{background:radial-gradient(ellipse at 50% 120%,rgba(226,208,203,.10),transparent 60%),var(--tone-c)}
.lab .lab-hero .t-over{background:linear-gradient(180deg,rgba(24,26,30,.55),rgba(24,26,30,.6) 50%,var(--tone-c))}
.pf .pf-hero .t-over{background:linear-gradient(180deg,rgba(24,26,30,.35),rgba(24,26,30,.55) 50%,var(--tone-b))}
.topics,#karakters,.lab,.pf,#over,.contact{position:relative;isolation:isolate}
.topics::before,#karakters::before,.lab::before,.pf::before,#over::before,.contact::before{
  content:'';position:absolute;left:0;right:0;top:0;height:clamp(60px,8vw,110px);z-index:3;pointer-events:none;
  background:linear-gradient(rgba(8,9,11,.42),rgba(8,9,11,.12) 40%,transparent)}
.topics::after,#karakters::after,.lab::after,.pf::after,#over::after,.contact::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:4;pointer-events:none;
  background:linear-gradient(var(--rose-d),var(--rose-d)) no-repeat max(var(--pad),calc(50% - var(--wrap) / 2 + var(--pad))) 0/120px 1px,
             linear-gradient(90deg,transparent,rgba(226,208,203,.16) 12%,rgba(226,208,203,.16) 88%,transparent)}
.foot{background:var(--tone-c)}
/* rozé accenten als omkadering: dunne lijnen rond beelden en kaarten */
:root{--rl:rgba(214,190,184,.45);--rl-h:rgba(226,208,203,.85)}
.t-card,.tool-shot,.book-vis img,.about-ph{outline:1px solid var(--rl);outline-offset:12px;transition:outline-color 1.2s var(--ease),outline-offset 1.2s var(--ease)}
.t-rhombi .t-card{outline-color:rgba(36,39,44,.35)}
.t-card:hover,.tool:hover .tool-shot,.book-vis:hover img{outline-color:var(--rl-h);outline-offset:8px}
.t-rhombi .t-card:hover{outline-color:rgba(36,39,44,.7)}
.char-card,.kt-grid .card,.minis .card .ph{box-shadow:inset 0 0 0 1px rgba(214,190,184,.18);transition:box-shadow 1.2s var(--ease)}
.char-card:hover,.kt-grid .card:hover,.minis .card:hover .ph{box-shadow:inset 0 0 0 1px var(--rl-h)}
.char-card .ph,.minis .card .ph{position:relative}
.char-card::after{content:'';position:absolute;inset:0;border:1px solid rgba(214,190,184,.22);pointer-events:none;z-index:7;transition:border-color 1.2s var(--ease)}
.char-card:hover::after{border-color:var(--rl-h)}
.char-card{position:relative}
.pf-item::after{content:'';position:absolute;inset:8px;border:1px solid rgba(226,208,203,0);pointer-events:none;z-index:3;transition:border-color 1.2s var(--ease),inset 1.2s var(--ease)}
.pf-item:hover::after{border-color:rgba(226,208,203,.7);inset:12px}
.more-item{border-left:1px solid transparent;padding-left:14px;transition:border-color 1s var(--ease)}
.more-item:hover{border-left-color:var(--rose-d)}
.tabs button{transition:border-color .8s,color .8s,background .8s}
.tabs button:not(.on):hover{border-color:var(--rose-d);color:var(--paper)}
.btn:not(.solid){transition:border-color .8s,color .8s,background .8s}

/* ════════ LEESBAARHEID: steviger letters en meer contrast ════════ */
:root{--dim:#CDD1D6;--muted:#A3A9B1;--paper:#F3EEEB}
body{font-weight:400;text-rendering:optimizeLegibility}
.h-xl,.h-l,.chap .h-xl{font-weight:300}
.h-m,.ov-top .t b{font-weight:400}
.intro .statement{font-weight:300;color:var(--paper)}
.hero .sub{font-weight:400}
.motto{font-weight:300}
.lead{color:#D9DCE0;font-weight:400}
.body,.body p,.f-list li,.card p,.char-card .over p,.more-item span,.gal-tx p,.pillar p,.step p,.kt-grid .card p{color:var(--dim);font-weight:400}
.eyebrow{color:#D5BDB7}
.chip{color:#C3C8CE;border-color:rgba(226,208,203,.24)}
.pf-item .t small,.meta span,.c-loc,.lb-cnt{color:#B5BBC2}
.btn{font-weight:500}
/* intro: drie korte zinnen groot, uitleg eronder; rechts in twee alinea's */
.intro .wrap.two{align-items:end}
.intro-l{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.intro .statement{font-size:clamp(40px,5.2vw,78px);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.intro-sub{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#D9DCE0;max-width:46ch}
.intro-r{display:flex;flex-direction:column;gap:16px;max-width:48ch}
/* toolrijen rustiger, zoals Ceres: kop, één zin, korte alinea, knoppen */
.tool-txt{gap:22px}
.tool-txt .body{max-width:54ch}
.tool-txt .badge.off{margin-top:-6px}
.t-ceres .t-card{width:min(66%,480px)}
.t-ceres .t-card{width:min(50%,380px)}
.t-ceres .t-card.land{width:min(86%,620px)}
.t-vis{padding:clamp(40px,5vw,70px) 0}
.t-rhombi .t-card{width:min(60%,440px)}.t-rhombi .t-card.land{width:min(86%,620px)}
#skills{display:none}.t-ceres .btns .btn{padding:0 18px}

/* tools en boek in dezelfde opbouw als Rhombi en Ceres */
.tools{display:flex;flex-direction:column;gap:clamp(60px,7vw,110px);padding:clamp(70px,8vw,110px) 0 clamp(80px,9vw,120px)}
.tool.topic,.tool.alt.topic{grid-template-columns:1fr 1fr;gap:0;align-items:stretch;max-width:var(--max);margin:0 auto;width:100%}
.tool.alt .tool-vis{order:2}
.tool-vis.t-vis{padding:clamp(40px,5vw,70px) clamp(24px,4vw,60px);background:var(--brand)}
.tool-vis::before{display:none}
.tool .t-grid{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)}
.tool .t-wm,.book .t-wm{color:rgba(255,255,255,.05);left:auto;right:-1%;white-space:nowrap}
.tool.alt .t-wm{right:auto;left:-1%}
.tool-shot{position:relative;z-index:2;width:min(100%,640px);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.tool .tool-txt.t-txt{background:var(--tone-c)}
.book.topic{max-width:var(--max);margin:clamp(90px,10vw,140px) auto 0;grid-template-columns:1fr 1fr}
.book .t-vis{background:radial-gradient(ellipse at 50% 55%,#8a2430 0%,#4a1218 75%);padding:clamp(40px,5vw,70px) clamp(24px,4vw,60px)}
.book .t-grid{background-image:linear-gradient(rgba(255,220,200,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,220,200,.05) 1px,transparent 1px)}
.book-card{position:relative;z-index:2;display:block;width:min(100%,640px);cursor:pointer}
.book-card img{width:100%;height:auto;box-shadow:0 30px 70px rgba(0,0,0,.55);outline:1px solid var(--rl);outline-offset:12px;transition:outline-color 1.2s var(--ease),outline-offset 1.2s var(--ease)}
.book-card:hover img{outline-color:var(--rl-h);outline-offset:8px}
.book-vis::before{display:none}
.book .book-txt.t-txt{background:var(--tone-a)}
#karakters{padding-bottom:0}
@media (max-width:900px){.tool.topic,.tool.alt.topic,.book.topic{grid-template-columns:1fr}.tool.alt .tool-vis{order:0}}

/* ════════ RUST: beelden schuiven niet meer, ze verschijnen zacht ════════ */
.t-vis.from-l,.t-vis.from-r,.tool-vis.from-l,.tool-vis.from-r,.book-vis.from-l{transform:none!important;transition:opacity 2.4s ease}
.t-txt.from-l{transform:translateX(-24px)}.t-txt.from-r{transform:translateX(24px)}
.t-txt.from-l.in,.t-txt.from-r.in{transform:none}
.t-txt.from-l,.t-txt.from-r{transition:transform 2.4s var(--ease),opacity 2.4s ease}
/* geen veeg over foto's: alleen zacht in beeld komen */
.wipe.rv::before{display:none}
.wipe.rv{opacity:0;transform:none;transition:opacity 2s ease}
.wipe.rv.in{opacity:1}
.wipe.rv>img,.wipe.rv .ph img{scale:1}
/* foto's bewegen niet mee met scrollen */
.topic .t-card,.topic .t-card2,.tool .tool-shot,.book-card{translate:none!important}
.hero .hero-slides{scale:1}
/* watermerken en lijnen blijven langzaam meebewegen */
.topic .t-wm{translate:calc((var(--p,.5) - .5) * 60px) 0}

/* ════════ BEGRIJPELIJKHEID ════════ */
/* Ceres: van software tot lamp, met echte beelden en een doorlopende lijn */
.process.flow{border-top:none;gap:clamp(14px,2vw,28px);position:relative}
.process.flow::before{content:'';position:absolute;left:4%;right:4%;top:calc(clamp(110px,11vw,170px) / 2);height:1px;background:linear-gradient(90deg,transparent,var(--glow-d) 8%,var(--glow-d) 92%,transparent);opacity:.55}
.process.flow .step,.process.flow .step+.step{padding:0;border:none;position:relative}
.st-img{position:relative;z-index:1;height:clamp(110px,11vw,170px);display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:16px}
.st-img img{max-height:100%;max-width:100%;width:auto;object-fit:contain;box-shadow:0 14px 34px rgba(0,0,0,.45);outline:1px solid rgba(242,194,123,.35);outline-offset:6px;transition:outline-color 1.2s var(--ease),outline-offset 1.2s var(--ease)}
.st-img:hover img{outline-color:rgba(242,194,123,.85);outline-offset:3px}
.process.flow .step+.step::after{content:'→';position:absolute;left:calc(-1 * clamp(14px,2vw,28px) / 2 - 6px);top:calc(clamp(110px,11vw,170px) / 2 - 12px);color:var(--glow-d);font-size:16px}
@media (max-width:860px){.process.flow{grid-template-columns:1fr 1fr;row-gap:34px}.process.flow::before,.process.flow .step:nth-child(3)::after{display:none}}
.to-lamp{color:var(--glow);font-size:13px;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid rgba(242,194,123,.4);align-self:flex-start;padding-bottom:3px;transition:border-color .8s}
.to-lamp:hover{border-color:var(--glow)}

/* visuele inhoudsopgave onder de intro */
.vidx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);margin-top:clamp(50px,6vw,80px)}
.vi{display:block;text-decoration:none;color:var(--paper)}
.vi-ph{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg3);outline:1px solid rgba(214,190,184,.18);outline-offset:6px;transition:outline-color 1.2s var(--ease)}
.vi-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.82);transition:transform 2.2s var(--ease),filter 1.2s}
.vi:hover .vi-ph{outline-color:var(--rl-h)}
.vi:hover .vi-ph img{transform:scale(1.04);filter:none}
.vi-t{display:flex;gap:10px;align-items:baseline;margin-top:14px;font-family:var(--fd);font-size:20px;letter-spacing:.08em;text-transform:uppercase}
.vi-t b{font-weight:400;font-size:12px;color:var(--rose-d);letter-spacing:.2em}
@media (max-width:760px){.vidx{grid-template-columns:1fr 1fr}}

/* contact: korte zin en duidelijke routes */
.ct-lead{margin:0 auto 30px;text-align:center}
.ct-btns{justify-content:center}

/* bijschriften */
.lb-cap{text-align:center;color:var(--dim);font-size:14px;min-height:22px;padding:0 var(--pad) 6px}
.mos .cap{opacity:0;transition:opacity .8s}
.mos:hover .cap,.mos.big .cap,.mos.vid .cap{opacity:1}
.vi-ph img{object-position:50% 25%}

/* Rhombi-waaier, zoals de Instagram-strook op rhombi.nl */
.f-strip .hd-r{display:flex;gap:22px;align-items:center}
.ig-handle{color:var(--rose)}
.tabs .ig-ico{width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.fan-wrap{position:relative;margin:0 calc(-1 * var(--pad))}
.fan-wrap::before,.fan-wrap::after{content:'';position:absolute;top:0;bottom:0;width:var(--pad);z-index:3;pointer-events:none}
.fan-wrap::before{left:0;background:linear-gradient(90deg,var(--tone-b),transparent)}
.fan-wrap::after{right:0;background:linear-gradient(-90deg,var(--tone-b),transparent)}
.strip.fan{display:flex;gap:16px;padding:6px var(--pad) 14px;justify-content:safe center;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip.fan::-webkit-scrollbar{display:none}
.fan-item{flex:0 0 auto;height:clamp(240px,24vw,320px);width:auto;max-width:440px;aspect-ratio:auto;scroll-snap-align:center;position:relative;display:block;overflow:hidden;
  background:var(--bg3);clip-path:polygon(20px 0,100% 0,100% 100%,0 100%,0 20px);border-radius:0 0 16px 0;text-decoration:none;
  transition:transform 1.2s var(--ease),box-shadow 1.2s var(--ease)}
.fan-item::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(214,190,184,.25);transition:box-shadow 1s}
.fan-item:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(196,173,167,.14)}
.fan-item:hover::before{box-shadow:inset 0 0 0 1px rgba(226,208,203,.65)}
.strip.fan .fan-item img{height:100%;width:auto;max-width:none;display:block;object-fit:cover;transform:none}
.fan-ov{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;padding:14px;background:linear-gradient(to top,rgba(18,21,26,.8),rgba(18,21,26,0) 45%);opacity:0;transition:opacity .9s}
.fan-ov span{font-size:12px;line-height:1.4;color:var(--paper);text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fan-item:hover .fan-ov{opacity:1}
.ig-badge{position:absolute;top:10px;right:10px;width:20px;height:20px;color:var(--rose);opacity:.85;z-index:3;pointer-events:none}
.fan-empty{padding:40px 0;color:var(--muted);font-size:14px}
.fan-empty a{color:var(--rose)}
@media (max-width:760px){.fan-item{height:240px}.f-strip .hd{flex-wrap:wrap;gap:12px}}
.fan-wrap{width:min(100vw,var(--max));margin:0;left:50%;translate:-50% 0}
.fan-wrap::before,.fan-wrap::after{width:clamp(30px,6vw,110px)}
.strip.fan{padding:6px clamp(30px,6vw,110px) 14px}
/* eigen naam boven de titel */
.hero-name{display:flex;align-items:center;gap:14px;margin-bottom:18px;font-family:var(--fd);font-weight:400;font-size:clamp(18px,1.8vw,26px);letter-spacing:.32em;text-transform:uppercase;color:var(--rose)}
.hero-name::before{content:'';width:clamp(28px,3vw,48px);height:1px;background:currentColor;opacity:.7}

/* ════════ INLAADSCHERM: het logo tekent zichzelf, rustig ════════ */
#ldr{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity 1.2s ease,visibility 0s 1.2s}
#ldr.gone{opacity:0;visibility:hidden}
html.no-ldr #ldr{display:none}
.ldr-mark{width:clamp(90px,11vw,140px);fill:none;stroke:var(--rose);stroke-width:2.4;stroke-linejoin:miter}
.ldr-mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:ldrDraw 1.5s cubic-bezier(.45,0,.2,1) forwards}
.ldr-mark path:nth-child(2){animation-delay:.45s}
.ldr-mark path:nth-child(3){animation-delay:.8s}
@keyframes ldrDraw{to{stroke-dashoffset:0}}
.ldr-name{font-family:var(--fd);font-weight:300;font-size:15px;letter-spacing:.42em;text-transform:uppercase;color:var(--dim);opacity:0;animation:ldrIn 1.2s ease 1.3s forwards}
.ldr-name b{font-weight:400;color:var(--paper)}
.ldr-line{width:120px;height:1px;background:var(--line2);position:relative;overflow:hidden;opacity:0;animation:ldrIn 1s ease 1.5s forwards}
.ldr-line::after{content:'';position:absolute;inset:0;background:var(--rose-d);transform:translateX(-100%);animation:ldrBar 1.8s cubic-bezier(.45,0,.2,1) 1.5s infinite}
@keyframes ldrIn{to{opacity:1}}
@keyframes ldrBar{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.ldr-mark path{animation:none;stroke-dashoffset:0}.ldr-name,.ldr-line{opacity:1;animation:none}}

/* contactformulier */
.ct-form{max-width:680px;margin:6px auto 0;text-align:left;display:flex;flex-direction:column;gap:18px}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct-form label{display:flex;flex-direction:column;gap:7px}
.ct-form label>span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-d)}
.ct-form input,.ct-form select,.ct-form textarea{font:inherit;font-size:15px;color:var(--paper);background:rgba(255,255,255,.035);border:1px solid var(--line2);padding:12px 14px;border-radius:0;outline:none;transition:border-color .8s,background .8s}
.ct-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--rose-d) 50%),linear-gradient(-45deg,transparent 50%,var(--rose-d) 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.ct-form select option{background:var(--bg);color:var(--paper)}
.ct-form textarea{resize:vertical;min-height:130px}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{border-color:var(--rose);background:rgba(255,255,255,.06)}
.ct-send{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:4px}
.ct-alt{font-size:13px;color:var(--muted)}
.ct-alt a{color:var(--dim)}
.ct-msg{min-height:22px;font-size:14px;margin:0}
.ct-msg.ok{color:#9fd3a8}.ct-msg.err{color:#e5a59a}
.hp{position:absolute;left:-9999px}
html.vcur .ct-form input,html.vcur .ct-form textarea,html.vcur .ct-form select{cursor:text!important}
@media (max-width:640px){.ct-row{grid-template-columns:1fr}}

/* ════════ TEKST: niet meer van opzij, alleen zacht in beeld ════════ */
.t-txt.from-l,.t-txt.from-r,.tool-txt.from-l,.tool-txt.from-r,.book-txt.from-l,.book-txt.from-r,.lab-hero-in.from-l,.lab-hero-in.from-r{transform:none!important;transition:opacity 2s ease}
.from-l,.from-r{transform:none!important}
.chap .h-xl{translate:none}

/* ════════ LEESBAARHEID OP FOTO'S: zachte schaduw en diepte ════════ */
/* hero: donkere gloed achter de tekst, tekst met lichte schaduw */
.hero-in{position:relative}
.hero-in::before{content:'';position:absolute;z-index:-1;left:-8%;right:35%;top:-30%;bottom:-20%;pointer-events:none;
  background:radial-gradient(ellipse at 28% 62%,rgba(16,18,21,.62) 0%,rgba(16,18,21,.35) 45%,transparent 72%)}
.hero h1,.hero .hero-name,.hero .sub,.hero .tag{text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.35)}
.hero .btn:not(.solid){background:rgba(20,22,26,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hero-cap .lbl{text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* koppen van Tools en Architectuur boven de foto */
.lab-hero-in::before{content:'';position:absolute;z-index:-1;left:-10%;right:20%;top:-25%;bottom:-25%;pointer-events:none;
  background:radial-gradient(ellipse at 30% 60%,rgba(16,18,21,.55) 0%,rgba(16,18,21,.25) 50%,transparent 75%)}
.lab-hero-in{position:relative;z-index:2}
.lab-hero .h-xl,.lab-hero .eyebrow,.lab-hero .lead{text-shadow:0 2px 18px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.4)}
/* bijschriften op tegels en kaarten */
.pf-item .t b,.pf-item .t small,.char-card .over h3,.char-card .over p,.mos .cap,.fan-ov span{text-shadow:0 1px 8px rgba(0,0,0,.55)}
.char-card .over{background:linear-gradient(transparent,rgba(16,18,21,.55) 30%,rgba(16,18,21,.94))}

/* ════════ EEN GRID: blokken en inhoud lijnen op dezelfde randen ════════ */
:root{--max:1560px;--wrap:calc(var(--max) + 2 * var(--pad))}
.hero,.topic,.lab-hero,.chap,.book.topic,.tool.topic{max-width:var(--max)}
.fan-wrap{width:min(100vw,var(--max))}
/* beeld en tekst in de grote blokken: dezelfde binnenmarge als de rest */
.t-txt,.tool .tool-txt.t-txt,.book .book-txt.t-txt{padding-left:clamp(28px,4vw,72px);padding-right:clamp(28px,4vw,72px)}
.t-txt.cut-l{padding-left:calc(clamp(28px,4vw,72px) + clamp(24px,4vw,64px))}
.t-txt.cut-r{padding-right:calc(clamp(28px,4vw,72px) + clamp(24px,4vw,64px))}
@media (max-width:900px){.t-txt.cut-l,.t-txt.cut-r{padding:36px 22px 44px}}

/* ════════ RHOMBI-WAAIER ════════ */
.fan-wrap{position:relative;width:min(100vw,var(--max));left:50%;translate:-50% 0;margin:10px 0 0;outline:none;overflow:hidden;padding-bottom:6px}
.fan-wrap::before,.fan-wrap::after{display:none}
.fan-stage{position:relative;height:430px;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.fan-stage .fan-item{position:absolute;left:50%;top:18px;max-width:none;flex:none;transform-origin:50% 115%;
  transition:transform 1.4s cubic-bezier(.22,.08,.12,1),filter 1.2s ease,opacity 1s ease,width 1s ease;will-change:transform;cursor:pointer;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.fan-stage .fan-item:hover{transform-origin:50% 115%}
.fan-stage .fan-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.fan-stage .fan-item.cur{box-shadow:0 28px 60px rgba(0,0,0,.55),0 0 0 1px rgba(226,208,203,.35)}
.fan-stage .fan-item.cur .fan-ov{opacity:1}
.fan-stage .fan-item:not(.cur) .fan-ov,.fan-stage .fan-item:not(.cur) .ig-badge{opacity:0}
.fan-nav{position:absolute;top:calc(50% - 30px);z-index:200;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--paper);background:rgba(20,22,26,.55);border:1px solid var(--line2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .8s,background .8s}
.fan-nav svg{width:22px;height:22px}
.fan-nav:hover{border-color:var(--rose);background:rgba(20,22,26,.8)}
.fan-nav.p{left:max(var(--pad),calc(50% - var(--max) / 2 + var(--pad)))}
.fan-nav.n{right:max(var(--pad),calc(50% - var(--max) / 2 + var(--pad)))}
.fan-bar{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:4px}
.fan-cnt{font-family:var(--fd);font-size:14px;letter-spacing:.2em;color:var(--muted);min-width:56px;text-align:right}
.fan-track{position:relative;width:min(220px,40vw);height:1px;background:var(--line2)}
.fan-track i{position:absolute;left:0;top:0;bottom:0;background:var(--rose);transition:width 1.2s cubic-bezier(.22,.08,.12,1)}
.fan-wrap.empty .fan-nav,.fan-wrap.empty .fan-bar{display:none}
.fan-stage .fan-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
@media (max-width:760px){.fan-nav{width:44px;height:44px;top:calc(50% - 26px)}.fan-stage{height:330px}}
@media (prefers-reduced-motion:reduce){.fan-stage .fan-item{transition:none}}
.fan-stage .fan-item{clip-path:none;border-radius:2px 2px 14px 2px}
.fan-wrap{left:auto;translate:none;margin-left:calc(50% - min(50vw, var(--max) / 2))}
.fan-stage .fan-item,.fan-stage .fan-item:hover{transform-origin:50% 50%}
.fan-stage{height:auto}

/* diverse ontwerpen: zelfde opbouw als Rhombi en Ceres */
.t-diverse{margin-top:clamp(70px,8vw,120px)}
.t-diverse .t-vis{background:radial-gradient(ellipse at 50% 50%,#4a4e55 0%,#2c3036 75%)}
.t-diverse .t-grid{background-image:linear-gradient(rgba(226,208,203,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(226,208,203,.05) 1px,transparent 1px)}
.t-diverse .t-wm{color:rgba(226,208,203,.06)}
.t-diverse .t-card{width:min(56%,420px)}.t-diverse .t-card.land{width:min(86%,620px)}

/* app live in het zijpaneel (configurator) */
.mos-embed{position:relative;margin-bottom:10px;display:flex;flex-direction:column;gap:8px}
.mos-embed iframe{width:100%;aspect-ratio:4/3;max-height:72vh;border:0;background:#1b1d21;display:block}
.mos-embed .link{align-self:flex-end;font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* zijpaneel tools: punten als lijst, films naast de app */
.gal-pts{list-style:none;margin:14px 0 4px;display:flex;flex-direction:column;gap:8px}
.gal-pts li{position:relative;padding-left:18px;color:var(--dim);font-size:14px;line-height:1.5}
.gal-pts li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--rose-d)}
.mos-films{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-bottom:10px}
.mos-films figure{margin:0;background:#111;display:flex;flex-direction:column}
.mos-films video{width:100%;aspect-ratio:16/9;background:#000;display:block}
.mos-films figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px 10px}

/* ════════ TOOLS: twee groepen, groot + compact ════════ */
.tools{gap:clamp(40px,5vw,70px)}
.tool-filter{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.tool-filter button{font:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:9px 16px;cursor:pointer;background:none;color:var(--dim);border:1px solid rgba(226,208,203,.22);transition:color .6s,border-color .6s,background .6s}
.tool-filter button:hover{color:var(--paper);border-color:var(--rose-d)}
.tool-filter button.on{background:var(--rose);border-color:var(--rose);color:#24272C}
.tool-group{display:flex;flex-direction:column;gap:clamp(56px,6vw,96px)}
.tool-group[hidden]{display:none}
.tg-hd{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;border-bottom:1px solid rgba(226,208,203,.14);padding-bottom:14px;margin-bottom:calc(-1 * clamp(20px,3vw,50px))}
.tg-hd .eyebrow{font-size:13px}
.tg-hd p{color:var(--muted);font-size:15px;margin:0}
.tool-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.tool-card{display:flex;flex-direction:column;background:rgba(255,255,255,.025);border:1px solid rgba(226,208,203,.12);transition:border-color 1s var(--ease),background 1s var(--ease)}
.tool-card:hover{border-color:rgba(226,208,203,.4);background:rgba(255,255,255,.04)}
.tool-card .tc-shot{width:100%;aspect-ratio:16/9;box-shadow:none;outline:none;background:var(--brand,#111);cursor:pointer;translate:none}
.tool-card .tc-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform 1.4s var(--ease)}
.tool-card:hover .tc-shot img{transform:scale(1.03)}
.tc-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.tc-body .tool-head{gap:14px}.tc-body .tool-head img{width:40px;height:40px}
.tc-body .h-m{font-size:clamp(22px,2vw,28px)}
.tc-line{color:var(--dim);margin:0;flex:1}
.tc-body .btns{margin-top:4px}.tc-body .btn{padding:0 18px}
.pf-mode .tool-cards,.pf-mode .tool-filter{display:none}
@media (max-width:900px){.tool-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tc-body{padding:14px}.tc-line{font-size:14px}.tc-body .tool-head img{display:none}}
@media (max-width:520px){.tc-body .btns .btn:not(.solid){display:none}.tc-body .h-m{font-size:19px}}

/* ════════ FIGUREN: van tekening tot beeldje ════════ */
.cmake{margin-top:clamp(56px,7vw,100px);display:flex;flex-direction:column;gap:clamp(36px,4vw,56px)}
.cm-hd{display:flex;flex-direction:column;gap:18px}
.cm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid rgba(226,208,203,.16)}
.cm-steps li{position:relative;padding:16px 18px 4px 0;font-size:clamp(15px,1.3vw,18px);color:var(--paper)}
.cm-steps li b{display:block;font-family:var(--fd);font-weight:300;font-size:13px;letter-spacing:.2em;color:var(--rose);margin-bottom:6px}
.cm-steps li::before{content:'';position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--rose);transition:width 1.4s var(--ease) calc(var(--i) * .25s)}
.cm-hd.in .cm-steps li::before{width:calc(100% - 18px)}
.cm-row{display:grid;grid-template-columns:minmax(120px,.22fr) 1fr;gap:clamp(18px,3vw,40px);align-items:start}
.cm-who{font-family:var(--fd);font-weight:300;font-size:clamp(26px,2.6vw,38px);text-transform:uppercase;letter-spacing:.02em;margin:0;padding-top:6px}
.cm-sets{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,1.6vw,22px)}
.cm-set{all:unset;cursor:pointer;display:flex;flex-direction:column;background:rgba(255,255,255,.025);border:1px solid rgba(226,208,203,.12);transition:border-color 1s var(--ease),background 1s var(--ease)}
.cm-set:hover,.cm-set:focus-visible{border-color:rgba(226,208,203,.45);background:rgba(255,255,255,.045)}
.cm-th{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;aspect-ratio:16/10;overflow:hidden;background:#15171b}
.cm-th span{overflow:hidden;background:#1d2025}
.cm-th span:first-child{grid-row:span 2}
.cm-th span:nth-child(4){grid-column:2 / span 2}
.cm-th img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;transition:transform 1.6s var(--ease)}
.cm-set:hover .cm-th img{transform:scale(1.05)}
.cm-tx{padding:14px 16px 16px}
.cm-tx b{font-weight:500;font-size:16px;color:var(--paper);display:flex;align-items:baseline;gap:8px}
.cm-tx b small{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.cm-tx p{margin:6px 0 0;color:var(--dim);font-size:14px;line-height:1.5}
@media (max-width:760px){.cm-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-row{grid-template-columns:1fr}.cm-who{padding-top:0}}
.cm-sets{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.cm-sets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cm-sets{grid-template-columns:1fr}}

/* over de naam */
.name-note{border-left:1px solid var(--rose-d);padding:2px 0 2px 16px;max-width:56ch}
.name-note span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin-bottom:6px}
.name-note p{margin:0;font-size:14px;line-height:1.6;color:var(--dim);font-style:italic}
.t-ceres .name-note{border-left-color:rgba(242,194,123,.5)}.t-ceres .name-note span{color:var(--glow)}
#galTx .name-note{margin:18px 0 4px}

.tool-share{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--dim);font:400 12px var(--fb);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:10px 6px;transition:color .3s}
.tool-share svg{width:16px;height:16px}
.tool-share:hover,.tool-share.ok{color:var(--rose)}
.tool-card .tool-share span{display:none}
/* Figuren: kaart en sets per figuur in één kolom; stappen erboven */
.cmake{margin:0 0 clamp(28px,3.4vw,48px)}
.chars{align-items:start}
.char-col{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);min-width:0}
.char-col .cm-sets{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.char-col .cm-sets{grid-template-columns:1fr}}
.chars{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.chars{grid-template-columns:1fr}}

/* inhoud: rij beelden die vergroten, met de onderdelen eronder */
.toc{margin-top:clamp(44px,6vw,80px)}
.toc-row{display:flex;gap:10px;height:clamp(150px,17vw,230px)}
.toc-i{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border:1px solid var(--line);background:var(--tone-b,#2a2e34);transition:flex-grow .7s var(--ease),border-color .4s}
.toc-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) brightness(.62);transform:scale(1.04);transition:filter .7s,transform 1.2s var(--ease)}
.toc-i svg{display:none}
.toc-i.no-img svg{display:block;position:absolute;left:50%;top:42%;width:46px;translate:-50% -50%;fill:none;stroke:var(--rose);stroke-width:5;opacity:.7}
.toc-i::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(18,20,24,.85));pointer-events:none}
.toc-i.on{flex-grow:3.2;border-color:rgba(226,208,203,.45)}
.toc-i.on img{filter:none;transform:scale(1)}
.toc-a{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:14px 16px;text-decoration:none;color:var(--paper)}
.toc-a b{font-family:var(--fd);font-weight:400;font-size:14px;letter-spacing:.08em;color:var(--rose)}
.toc-a span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-sub{display:flex;gap:10px;height:0;overflow:hidden;opacity:0;transition:height .55s var(--ease),opacity .4s,margin .55s var(--ease)}
.toc-sub.open{height:clamp(84px,8vw,112px);opacity:1;margin-top:10px}
.toc-st{position:relative;flex:0 1 200px;min-width:0;overflow:hidden;border:1px solid var(--line);background:var(--tone-b,#2a2e34);text-decoration:none;color:var(--paper);opacity:0;translate:0 10px;animation:tocIn .5s var(--ease) forwards;animation-delay:var(--d)}
.toc-st img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6);transition:filter .5s,transform .9s var(--ease)}
.toc-st span{position:absolute;left:12px;right:12px;bottom:10px;font-size:12px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.toc-st:hover{border-color:rgba(226,208,203,.45)}
.toc-st:hover img{filter:none;transform:scale(1.05)}
.toc-st:hover span{color:var(--rose)}
@keyframes tocIn{to{opacity:1;translate:0 0}}
@media (max-width:760px){
  .toc-row{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(-1 * var(--gut,20px));margin-right:calc(-1 * var(--gut,20px));padding:0 var(--gut,20px) 6px;scrollbar-width:none}
  .toc-row::-webkit-scrollbar{display:none}
  .toc-i{flex:0 0 46vw;height:190px;scroll-snap-align:center;transition:flex-basis .5s var(--ease),height .5s var(--ease)}
  .toc-i.on{flex-basis:66vw;height:230px}
  .toc-sub{overflow-x:auto;scrollbar-width:none}
  .toc-sub.open{height:92px}
  .toc-st{flex:0 0 36vw}
}