html:not(.js) .nav{background:rgba(19,14,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--lijn-zacht)}
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--nacht)}
.hero-media{position:relative;height:max(360px,33vw);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.hero-beeld{position:absolute;inset:0;overflow:hidden}
.hero-beeld img{position:absolute;left:0;bottom:0;width:100%;max-width:none;height:auto;transform:translateY(44%);filter:brightness(.8) saturate(.88) sepia(.06)}
.hero-beeld .hero-licht{display:none;filter:brightness(1.16) saturate(.96) sepia(.04);
  -webkit-mask-image:radial-gradient(circle var(--lr,320px) at var(--lx,50%) var(--ly,62%),#000 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.16) 68%,transparent 100%);
  mask-image:radial-gradient(circle var(--lr,320px) at var(--lx,50%) var(--ly,62%),#000 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.16) 68%,transparent 100%)}
.hero.met-lamp .hero-beeld .hero-licht{display:block}
.hero.met-lamp .hero-beeld .hero-foto{filter:brightness(.6) saturate(.84) sepia(.08)}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,14,11,.72) 0%,rgba(19,14,11,0) 30%),
    linear-gradient(90deg,rgba(19,14,11,.5) 0%,rgba(19,14,11,0) 16%,rgba(19,14,11,0) 84%,rgba(19,14,11,.5) 100%),
    radial-gradient(42% 46% at 0% 100%,rgba(19,14,11,.78) 0%,rgba(19,14,11,.5) 55%,rgba(19,14,11,0) 100%)}
@media (min-width:1061px){
  .hero-media::after{background:linear-gradient(180deg,rgba(19,14,11,.62) 0,rgba(19,14,11,.52) 60px,rgba(19,14,11,0) 160px),
    linear-gradient(180deg,rgba(19,14,11,.72) 0%,rgba(19,14,11,0) 30%),
    linear-gradient(90deg,rgba(19,14,11,.5) 0%,rgba(19,14,11,0) 16%,rgba(19,14,11,0) 84%,rgba(19,14,11,.5) 100%),
    radial-gradient(42% 46% at 0% 100%,rgba(19,14,11,.78) 0%,rgba(19,14,11,.5) 55%,rgba(19,14,11,0) 100%)}
}
.hero-beam{position:absolute;inset:-10% -40%;z-index:2;pointer-events:none;mix-blend-mode:screen;transform:translateX(70%);
  background:linear-gradient(104deg,transparent 38%,rgba(234,218,198,.11) 46%,rgba(234,218,198,.03) 53%,transparent 60%)}
@keyframes aan{from{filter:brightness(.4);transform:scale(1.05)}to{filter:none;transform:none}}
@keyframes rijs{from{transform:translateY(.22em)}to{transform:none}}
@keyframes schuif{from{transform:translateY(24px)}to{transform:none}}
@keyframes veeg{from{transform:translateX(-72%)}to{transform:translateX(70%)}}
@keyframes lijn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){
  .hero-beeld{animation:aan 2.8s cubic-bezier(.4,0,.2,1) both}
  .hero-beam{animation:veeg 3.6s var(--ease-in-out) .5s both}
  .hero-title .line-in{animation:rijs 1.4s var(--ease) both}
  .hero-title .line:nth-child(1) .line-in{animation-delay:.45s}
  .hero-title .line:nth-child(2) .line-in{animation-delay:.58s}
  .hero-title .line:nth-child(3) .line-in{animation-delay:.71s}
  .hero .eyebrow,.hero-sub,.hero-cta,.hero-strip li,.hero-caption{animation:schuif 1.1s var(--ease) both}
  .hero .eyebrow{animation-delay:.35s}.hero-caption{animation-delay:.9s}.hero-sub{animation-delay:1s}.hero-cta{animation-delay:1.1s}
  .hero-strip li:nth-child(1){animation-delay:1.25s}.hero-strip li:nth-child(2){animation-delay:1.33s}.hero-strip li:nth-child(3){animation-delay:1.41s}.hero-strip li:nth-child(4){animation-delay:1.49s}
  .hero-strip::before{animation:lijn 1.6s var(--ease) 1.1s both}
}
.hero-inner{position:relative;z-index:3;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;align-items:end;margin-top:calc(-1 * clamp(64px,6.4vw,120px))}
.hero-kop{grid-column:1/8}
.hero .eyebrow{margin-bottom:30px;align-items:flex-start}
@media (min-width:1181px){.hero .eyebrow{width:max-content;max-width:calc(100vw - 2 * var(--gutter))}}
.hero .eyebrow::before{margin-top:calc(.825em - .5px)}
.hero .eyebrow .eb>span{white-space:nowrap}
.hero .eyebrow .eb{position:relative;isolation:isolate}
.hero .eyebrow .eb::before{content:"";position:absolute;inset:-10px -24px;z-index:-1;background:rgba(19,14,11,.6);filter:blur(8px);pointer-events:none}
@media (max-width:1180px){.hero .eyebrow .eb>span:first-child{display:block}.hero .eyebrow .eb-p{display:none}}
.hero-title{font-size:var(--t-hero);line-height:.95;letter-spacing:-.02em}
.hero-title .line,.hero-title .line-in{display:block}
.hero-onder{grid-column:8/13;display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding-bottom:.35em}
.hero-caption{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gips-3)}
.hero-caption::before{content:"";width:22px;height:1px;background:var(--lijn);flex:none}
.hero-sub{font-size:var(--t-lead);line-height:1.6;color:var(--gips-2);max-width:40ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-strip{list-style:none;margin:clamp(48px,5vw,72px) 0 0;padding:22px 0 clamp(28px,3vw,40px);display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.hero-strip::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--koper),var(--lijn) 38%,var(--lijn));transform-origin:0 50%}
.hero-strip li{display:flex;flex-direction:column;gap:4px;padding-right:12px}
.hero-strip .k{font-family:var(--display);font-size:var(--t-titel);color:var(--gips);line-height:1.15}
.hero-strip .v{font-size:14px;color:var(--gips-3);line-height:1.45}
@media (max-width:1180px){.hero-kop{grid-column:1/8}.hero-onder{grid-column:8/13}.hero-title{font-size:clamp(50px,8.2vw,96px)}}
@media (max-width:980px){
  .hero-media{height:min(64vw,520px);-webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,#000 66%,transparent 100%)}
  .hero-beeld img{left:-6%;width:112%;transform:translateY(35.4%)}
  .hero-inner{margin-top:calc(-1 * clamp(28px,6vw,56px));gap:0}
  .hero-kop,.hero-onder{grid-column:1/13}
  .hero-onder{margin-top:30px;gap:24px;padding-bottom:0}
  .hero-caption{order:3}
  .hero-strip{grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:40px}
}
@media (max-width:640px){
  .hero-title{font-size:clamp(44px,12.6vw,64px)}
  .hero .eyebrow{margin-bottom:20px;font-size:11.5px;letter-spacing:.16em;gap:12px}
  .hero .eyebrow::before{width:28px}
  .hero-sub{font-size:16.5px}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1 1 100%}
  .hero-strip .k{font-size:20px}
  .hero-strip .v{font-size:13.5px}
}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .met-canvas .wand canvas{transition:filter .6s var(--ease)}
  #lampAuto{display:none}
  .met-canvas:not(.lamp-loopt) .wand:not(:hover):not(:focus-within) canvas{filter:brightness(.12)}
  .met-canvas:not(.lamp-loopt) .wand:not(:focus-within) .lamp,.met-canvas.lamp-loopt .wand:hover .lamp{opacity:0 !important}
}
.principe-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.principe-kop{grid-column:1/9;grid-row:1}
.principe-tekst{grid-column:1/7;grid-row:2;margin-top:52px;font-size:var(--t-lead)}
.principe-beeld{grid-column:9/13;grid-row:1/4;align-self:start;margin-top:8px}
.principe-beeld .kader-dubbel{aspect-ratio:4/5}
.principe-beeld img{object-position:50% 50%;transform:scale(1.1);transform-origin:100% 50%;filter:grayscale(.45) sepia(.28) brightness(.8) contrast(1.22)}
.principe-beeld figcaption{margin-top:34px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--gips-3);line-height:1.7;max-width:36ch}
.principe .details{grid-column:1/9;grid-row:3;margin-top:64px}
@media (max-width:980px){
  .principe-kop,.principe-tekst,.principe .details{grid-column:1/13;grid-row:auto}
  .principe-beeld{grid-column:1/13;grid-row:auto;margin-top:48px;max-width:520px;margin-right:18px}
  .principe .details{margin-top:56px}
}
.proefvlak .intro h2{font-size:clamp(44px,6vw,92px)}
.wand-wrap{position:relative;--inzet:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)))}
.wand{position:relative;width:100%;height:clamp(460px,68vh,720px);height:clamp(460px,68svh,720px);
  background:#0d0a08;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  border-top:1px solid var(--lijn-zacht);border-bottom:1px solid var(--lijn-zacht)}
.wand:focus-visible{outline-offset:6px}
.wand canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
html:not(.kan-lamp) .proefvlak:not(.met-canvas) .wand{display:none}
html:not(.kan-lamp) .proefvlak:not(.met-canvas) .wand-ui{position:relative;left:auto;bottom:auto;margin:0 var(--inzet)}
.proefvlak:not(.met-canvas) .wand canvas,.proefvlak:not(.met-canvas) .lamp,.proefvlak:not(.met-canvas) .wand-meet,
.proefvlak:not(.met-canvas) .wand-tag,.proefvlak:not(.met-canvas) .wand-bediening,.proefvlak:not(.met-canvas) .hoogte,
.proefvlak:not(.met-canvas) #lampAuto{display:none}
.met-canvas .wand-standen{display:none}
.alleen-lamp{display:none}
.kan-lamp .alleen-lamp{display:inline}
.kan-lamp .alleen-foto{display:none}
.met-canvas .wand{cursor:none}
.wand-tag{position:absolute;left:var(--inzet);top:clamp(20px,2.4vw,36px);max-width:calc(100% - 2 * var(--inzet));display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;pointer-events:none;padding:10px 16px;background:rgba(19,14,11,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--lijn-zacht)}
.wand-tag b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;color:var(--gips);min-width:1.6em;transition:color .4s}
.wand-tag b.is-hoog{color:var(--koper-licht)}
.wand-tag span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gips-3)}
.wand-meet{position:absolute;right:var(--inzet);bottom:clamp(20px,2.4vw,36px);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(237,229,217,.78);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.9);text-align:right;line-height:1.8;font-variant-numeric:tabular-nums}
.lamp{position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1px solid var(--koper-licht);pointer-events:none;will-change:transform;
  box-shadow:0 0 0 1px rgba(19,14,11,.4),0 0 36px 6px var(--koper-gloed);transition:opacity .4s}
.lamp::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#f3ebdf;box-shadow:0 0 12px 3px #e6d3bd}
.wand-ui{position:absolute;left:var(--inzet);bottom:clamp(24px,3vw,48px);z-index:2;width:min(100% - 32px,440px);cursor:auto;
  background:rgba(19,14,11,.78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--lijn);padding:20px 22px 12px}
.wand-ui::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--koper-licht),transparent)}
.ws-kop{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gips-3);margin-bottom:4px}
.wand-standen ol{list-style:none;margin:0;padding:0}
.wand-standen li{padding:12px 0 13px;border-top:1px solid var(--lijn-zacht)}
.wand-standen li:first-child{border-top:0}
.wand-standen li:last-child{padding-bottom:0}
.ws-naam{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.ws-naam b{font-family:var(--display);font-weight:400;font-size:25px;line-height:1.1;color:var(--gips)}
.wand-standen li.is-hoog .ws-naam b{color:var(--koper-licht)}
.ws-naam span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gips-3);white-space:nowrap}
.wand-standen li p:not(.ws-naam){font-size:14.5px;line-height:1.55;color:var(--gips-2)}
.wand-standen strong{color:var(--gips);font-weight:500}
.niveau-kop{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.niveau-kop label{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gips-3)}
.niveau-kop output{font-family:var(--display);font-size:34px;line-height:1;color:var(--koper-licht);font-variant-numeric:tabular-nums}
.ticks{display:flex;justify-content:space-between;margin-top:-8px}
.ticks button{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--gips-3);min-height:44px;min-width:44px;display:inline-flex;align-items:center;transition:color .2s}
.ticks button:first-child{justify-content:flex-start}.ticks button:last-child{justify-content:flex-end}
.ticks button:hover,.ticks button[aria-pressed="true"]{color:var(--gips)}
.ticks button[aria-pressed="true"]{color:var(--koper-licht)}
.niveau-tekst{font-size:15px;line-height:1.55;color:var(--gips-2);margin-top:6px;display:grid}
.niveau-tekst>span{grid-area:1/1}
.niveau-tekst .nt-maat{visibility:hidden}
.niveau-tekst strong{color:var(--gips)}
.hoogte + .niveau-tekst{margin-top:14px}
.wand-ctrl{display:grid;grid-template-columns:auto auto;justify-content:start;gap:20px 48px;align-items:center;margin-top:36px}
.wand-uitleg{font-size:15.5px;color:var(--gips-2);max-width:56ch}
.wand-uitleg strong{color:var(--gips);font-weight:500}
.hoogte{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--lijn-zacht)}
.hoogte label{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gips-3)}
.hoogte output{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--koper-licht);text-align:right;min-width:6ch;font-variant-numeric:tabular-nums}
.hoogte input{grid-column:1/3}
@media (max-width:980px){
  .wand-ctrl{grid-template-columns:1fr;gap:18px 32px}
  .wand-ctrl .btn{justify-self:start}
}
@media (min-width:1181px){.p2 .m{white-space:nowrap}}
@media (min-width:981px) and (max-width:1180px){
  .p1 figcaption,.p2 figcaption{flex-direction:column;gap:6px}
  .p1 .m,.p2 .m{text-align:left;max-width:none}
}
@media (min-width:761px) and (max-height:500px){
  .wand-ui{position:relative;left:auto;bottom:auto;width:auto;max-width:560px;margin:14px var(--inzet) 0;background:var(--leem);backdrop-filter:none;-webkit-backdrop-filter:none}
  .niveau-tekst .nt-maat{display:none}
}
@media (max-width:760px){
  .wand{height:clamp(400px,62svh,520px)}
  .wand-ui{position:relative;left:auto;bottom:auto;width:auto;margin:14px var(--gutter) 0;background:var(--leem);backdrop-filter:none;-webkit-backdrop-filter:none}
  .wand-tag{top:14px;padding:8px 12px}.wand-tag b{font-size:24px}
  .wand-meet{bottom:14px;font-size:11px}
  .wand-ctrl{gap:16px}
  .niveau-tekst .nt-maat{display:none}
}
.reeks{margin-top:clamp(64px,7vw,104px);padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--lijn-zacht)}
.reeks-fig{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(48px,9vw,150px);align-items:center;margin:0}
.reeks-kader{grid-column:1;grid-row:1;justify-self:start;aspect-ratio:3/4;width:auto;height:min(78vh,760px)}
.reeks-kader img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.reeks-kader{isolation:isolate;background-color:#574f48}
.reeks-kader.kader::after{z-index:2}
.reeks-kader .rf{opacity:0}
.reeks-kader .rf.is-aan,.reeks-kader:not(.na-laden) .rf:first-child{opacity:1}
html:not(.kan-reeks) .reeks-kader .rf~.rf{display:none}
.kan-reeks .reeks-kader .rf{transition:opacity 0s linear .7s}
.kan-reeks .reeks-kader.leeg .rf{transition:none}
.kan-reeks .reeks-kader .rf.is-aan{z-index:1;transition:opacity .7s var(--ease)}
.reeks-tekst{grid-column:2;grid-row:1}
.reeks-tekst .label{margin-bottom:clamp(28px,3vw,40px)}
.reeks-cap{grid-column:1;grid-row:2;position:relative;margin-top:16px;padding-top:12px;border-top:1px solid var(--lijn-zacht);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;line-height:1.6;color:var(--gips-3)}
.reeks-cap::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:linear-gradient(90deg,var(--koper-diep),var(--koper-licht));
  transform-origin:0 50%;transform:scaleX(var(--p,0))}
.kan-reeks .reeks-cap::before{transition:transform .7s var(--ease)}
html:not(.kan-reeks) .reeks-cap .cap-reeks,.kan-reeks .reeks-cap .cap-stil{display:none}
.reeks-regels{list-style:none;margin:0;padding:0;max-width:12.5em;font-size:var(--t-sub)}
.reeks-regels li{position:relative;font-family:var(--display);line-height:1.08;color:var(--gips);padding:22px 0 26px;border-top:1px solid var(--lijn-zacht);
  transition:color .6s var(--ease)}
.reeks-regels li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--koper);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease)}
.reeks-regels .n{display:block;margin-bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;line-height:1.4;color:var(--gips-3);transition:color .6s var(--ease)}
.kan-reeks .reeks-regels li{color:var(--gips-3)}
.kan-reeks .reeks-regels li.is-aan{color:var(--gips)}
.kan-reeks .reeks-regels li.is-aan::before{transform:scaleX(1)}
.kan-reeks .reeks-regels li.is-aan .n{color:var(--koper-licht)}
.reeks-knop{display:none;margin-top:clamp(24px,3vw,36px)}
.kan-reeks .reeks-knop{display:inline-flex}
@media (max-width:980px){
  .reeks-fig{grid-template-columns:minmax(0,1fr)}
  .reeks-tekst{display:contents}
  .reeks-tekst .label{grid-row:1;margin-bottom:28px}
  .reeks-kader{grid-row:2;width:100%;height:auto;max-width:520px}
  .reeks-cap{grid-row:3;max-width:520px}
  .reeks-knop{grid-row:4;justify-self:start;margin-top:20px}
  .reeks-regels{grid-row:5;max-width:none;font-size:clamp(24px,5.6vw,30px);margin-top:28px}
  .reeks-regels li{padding:18px 0 20px}
  .kan-reeks .reeks-regels{grid-row:3;display:grid;margin-top:20px}
  .kan-reeks .reeks-regels li{grid-area:1/1}
  .kan-reeks .reeks-regels li:not(.is-aan){clip-path:inset(50%)}
  .kan-reeks .reeks-cap{grid-row:4}
  .kan-reeks .reeks-knop{grid-row:5}
}
@media (max-width:379px){
  .kan-reeks .reeks-regels{margin-top:12px}
  .kan-reeks .reeks-regels li{padding:12px 0 14px}
  .kan-reeks .reeks-regels .n{margin-bottom:8px}
}
.band.band-licht{aspect-ratio:auto;height:clamp(360px,60vh,620px);min-height:0;max-height:none;border-top:1px solid var(--lijn-zacht);
  background:linear-gradient(100deg,rgba(234,218,198,.10) 0%,rgba(234,218,198,.035) 34%,rgba(19,14,11,0) 62%),var(--nacht)}
.band-licht::before{content:"";position:absolute;left:0;right:0;bottom:46%;height:1px;z-index:-1;transform:rotate(-.6deg);transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(227,203,176,.95) 0%,rgba(184,152,122,.55) 30%,rgba(154,122,96,.22) 62%,rgba(154,122,96,0) 92%);
  box-shadow:0 0 22px 3px rgba(184,152,122,.12);opacity:.5}
.band-licht::after{background:linear-gradient(180deg,rgba(19,14,11,.6) 0%,rgba(19,14,11,0) 22%)}
@media (max-width:760px){.band.band-licht{height:clamp(320px,88vw,440px)}.band-licht::before{bottom:50%}}
.coll{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,110px);align-items:start}
.coll-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.coll-item{--m:none;--mp:50% 50%;--ms:cover;border-bottom:1px solid var(--lijn);padding:34px 0 36px;display:grid;grid-template-columns:118px minmax(0,1fr);gap:32px;position:relative;cursor:default}
.coll-item::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--koper);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.coll-item.is-active::before{transform:scaleX(1)}
.monster{display:flex;flex-direction:column;gap:12px}
.monster i{display:block;width:118px;aspect-ratio:1;background-image:var(--m);background-position:var(--mp);background-size:var(--ms);background-color:var(--leem);position:relative;overflow:hidden;filter:var(--grade);box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.monster i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(19,14,11,.72) 0%,rgba(19,14,11,.25) 35%,rgba(238,226,208,.16) 62%,rgba(19,14,11,.4) 100%);background-size:220% 100%;background-position:100% 0;transition:background-position 1.2s var(--ease)}
.coll-item.is-active .monster i::after,.coll-item:hover .monster i::after{background-position:0 0}
.monster span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gips-3);line-height:1.7}
.coll-item h3{font-size:clamp(30px,3.1vw,44px);line-height:1.04;margin-bottom:14px;transition:color .3s}
.coll-item h3 a{text-decoration:none;display:inline-block;padding-block:7px;margin-block:-7px}
.coll-item p{max-width:46ch;font-size:16.5px}
.coll-item .meer{margin-top:12px}
.coll-item.is-active h3{color:var(--koper-licht)}
.coll-item .inline-kader{display:none}
.coll-media{position:sticky;top:calc(var(--nav-h) + 20px);margin:0}
.coll-media .kader{aspect-ratio:4/5;max-height:calc(100vh - 150px);width:100%}
.coll-media .cm{position:absolute;inset:0;overflow:hidden;transition:clip-path 1s var(--ease),transform 1.6s var(--ease);clip-path:inset(0 0 0 100%);transform:scale(1.06)}
.coll-media .cm img{width:100%;height:100%;object-fit:cover;filter:var(--grade)}
#c1 img,.coll-item[data-img="c1"] .inline-kader img{object-position:50% 50%}
#c2 img,.coll-item[data-img="c2"] .inline-kader img{object-position:50% 0;transform:scale(1.4286);transform-origin:6.667% 0}
#c3 img,.coll-item[data-img="c3"] .inline-kader img{object-position:25% 50%}
#c4 img,.coll-item[data-img="c4"] .inline-kader img{object-position:50% 0}
#c5 img,.coll-item[data-img="c5"] .inline-kader img{object-position:50% 50%}
@media (min-width:981px){.coll-list{padding-bottom:clamp(64px,calc(560px - 45vh),220px)}}
.coll-media .cm.is-active{clip-path:inset(0 0 0 0);transform:scale(1);z-index:1}
.coll-media .cm.was-active{clip-path:inset(0 0 0 0);transform:scale(1)}
.coll-media figcaption{margin-top:18px;display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--gips-3)}
#collCap{text-wrap:balance}
#collNr{white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.grootboek dd span.nw{display:inline}
.wand-tag b,.niveau-kop output{white-space:nowrap}
@media (max-width:980px){
  .coll{grid-template-columns:1fr}
  .coll-media{display:none}
  .coll-item{grid-template-columns:1fr;gap:16px;padding:28px 0 32px}
  .coll-item .monster{display:none}
  .coll-item .inline-kader{display:block;aspect-ratio:4/5;max-width:520px;position:relative;overflow:visible;margin-bottom:22px}
  .coll-item .inline-kader .kader{position:absolute;inset:0}
  .coll-item .inline-kader .chip{position:absolute;left:14px;bottom:-22px;width:64px;height:64px;background-image:var(--m);background-position:var(--mp);background-size:var(--ms);border:1px solid var(--lijn);box-shadow:0 14px 30px -10px rgba(0,0,0,.9);filter:var(--grade);z-index:2}
  .coll-item .spec{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gips-3);padding-left:92px;margin-top:-10px;min-height:20px;max-width:none}
  .coll-item.geen-staal .spec{padding-left:0}
}
@media (min-width:981px){.coll-item .spec{display:none}}
.werk-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 28px}
.p1{grid-column:1/7}.p1 img{object-position:50% 50%}
.p1 .m{max-width:none}
.p1 .meer,.p2 .meer,.p3 .meer{margin-top:4px}
.p1 a:hover .meer,.p2 a:hover .meer,.p3 a:hover .meer{color:var(--gips)}
.p2{grid-column:8/13;margin-top:120px}.p2 img{object-position:50% 50%}
.p3{grid-column:1/11;margin-top:24px}.p3 .kader{aspect-ratio:15/8}.p3 img{object-position:50% 0}
.werk-voet{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;margin-top:var(--blok);padding-top:28px;border-top:1px solid var(--lijn-zacht)}
@media (max-width:980px){
  .werk-grid{gap:48px 0}
  .werk-grid .fig{grid-column:1/13!important;margin-top:0!important}
}
.bewijs{background:var(--leem);position:relative;overflow:hidden;isolation:isolate}
.bewijs-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.score-blok{grid-column:1/5}
.score-uitleg{font-size:15.5px;color:var(--gips-2);max-width:30ch}
.score-blok .meer{margin-top:18px}
.stappen-drie{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:761px) and (max-width:980px){.stappen-drie .stap:nth-child(3){border-left:1px solid var(--lijn-zacht);padding-left:24px}.stappen-drie .stap:nth-child(3)::before{left:-4px}}
@media (max-width:760px){.stappen-drie{grid-template-columns:1fr}.stappen-drie .stap{border-left:0;padding-left:0;padding-top:30px;padding-bottom:30px;border-bottom:1px solid var(--lijn-zacht)}.stappen-drie .stap::before{left:0}}
.bewijs .citaat-blok{grid-column:6/13;padding-top:12px}
.bewijs .grootboek{grid-column:1/13;margin-top:88px}
.bewijs-voet{grid-column:1/13;margin-top:40px}
@media (max-width:980px){.score-blok,.bewijs .citaat-blok{grid-column:1/13}.bewijs .citaat-blok{margin-top:40px}.bewijs .grootboek{margin-top:64px}}
.details svg text{font-size:9.5px}
@media (max-width:1180px){.details svg text{display:none}}
#site .st-4ed6ba95{--m:url(/img/gevel-hoek-laag-zonlicht-w1600.jpg);--mp:19.5% 54.4%;--ms:435%}
#site .st-50aeefcd{--m:url(/img/badkamer-boogspiegel-licht-langs-wand-w1200.jpg);--mp:63.3% 40.2%;--ms:400%}
#site .st-649492d4{--v:.8}
#site .st-9ec163ce{--m:url(/img/grachtenpand-deuren-kozijnen-gespoten-w1600.jpg);--mp:51.6% 71.6%;--ms:416.67%}
#site .st-b0a148a6{--m:url(/img/restauratie-rondboog-stuc-w480.jpg);--mp:46% 29%;--ms:162%}
#site .st-db2b9f3c{--m:url(/img/sierpleister-brons-gespaand-w2000.jpg);--mp:18.5% 33.9%;--ms:800%}
