/* ── webfonts, zelf gehost ──────────────────────────────────
   Eerder kwamen deze van fonts.googleapis.com. Dat kost twee extra
   verbindingen plus een render-blokkerend stylesheet, waardoor het font
   pas na de eerste paint arriveerde en de koppen 32-35px verspringen.
   Variabele fonts: 400 en 500 komen uit hetzelfde bestand. */
@font-face{
  font-family:"Bodoni Moda";
  src:url("../fonts/bodoni-moda-var.woff2") format("woff2");
  font-weight:400 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bodoni Moda";
  src:url("../fonts/bodoni-moda-italic-var.woff2") format("woff2");
  font-weight:400 500;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("../fonts/jost-var.woff2") format("woff2");
  font-weight:300 500;font-style:normal;font-display:swap;
}

/* Bijgestelde fallbacks. Bodoni is 13,1% breder dan Times, Jost 3,7% smaller
   dan de systeemsans (in de browser gemeten met canvas measureText). Zonder
   deze correctie brak de tekst in het reservefont over meer regels en sprong
   alles eronder omhoog zodra het webfont binnenkwam: 35px op de h1. */
@font-face{
  font-family:"Bodoni fallback";
  src:local("Times New Roman"),local("Didot"),local("Georgia"),local("serif");
  size-adjust:113.1%;
}
@font-face{
  font-family:"Jost fallback";
  src:local("Segoe UI"),local("Helvetica Neue"),local("Arial"),local("sans-serif");
  size-adjust:96.3%;
}

/* ═══════════════════════════════════════════════════════════════
   DOLCÉO — dolceo.nl
   ═══════════════════════════════════════════════════════════════ */

:root{
  --crema:#F7F2E8;
  --latte:#EDE3D2;
  --espresso:#2E211A;
  --terra:#C4703F;
  --pist:#6E7F5B;
  --brons:#A98756;
  /* #C4703F haalt als kleine tekst nergens AA: te donker op crème, te donker op
     espresso. Daarom een diepere tint voor licht en een lichtere voor donker. */
  --terra-op-licht:#A4522A;
  --terra-op-donker:#E8A578;
  --brons-op-donker:#C9AC80;
  --muted:#6B6157;
  --line:rgba(46,33,26,.14);

  --serif:"Bodoni Moda","Bodoni fallback",Didot,"Times New Roman",serif;
  --sans:"Jost","Jost fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --pad:clamp(20px,5vw,84px);
  --sec:clamp(90px,14vh,190px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--crema);color:var(--espresso);
  font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-loading,body.is-locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%;height:auto}
.lqip{display:block;background-size:cover;background-position:center}
/* <picture> is standaard inline en krijgt dan geen hoogte; de foto erin viel
   daardoor terug op zijn eigen beeldverhouding in plaats van het vlak te vullen.
   Zichtbaar op mobiel, waar de videolaag niet laadt. */
.hero__media picture,.band__media picture,.pull__media picture,.bezoek__media picture{
  display:block;width:100%;height:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,blockquote,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--terra);color:var(--crema)}

/* ── smooth-scroll wrapper ───────────────────────────────── */
#scroll{will-change:transform}

/* ── typografie ──────────────────────────────────────────── */
.sec-label{
  font-size:clamp(11px,.85vw,12.5px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-bottom:clamp(22px,3vw,40px);
}
.sec-label--light{color:rgba(247,242,232,.62)}

h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,5.4vw,74px);line-height:1.06;letter-spacing:-.018em;
}
h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,46px);line-height:1.1}
/* De drie kopjes in bezoek stonden als niveau 4 onder een h2: dat slaat
   niveau 3 over, en wie op koppen navigeert valt in dat gat. Nu h3, met deze
   opmaak in plaats van de grote serif van de overige h3-koppen. */
.bezoek h3{
  font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.2em;
  line-height:1.2;text-transform:uppercase;color:var(--terra-op-donker);
  margin-bottom:14px;
}

/* ── wordmark ────────────────────────────────────────────── */
.wm{display:inline-flex;align-items:flex-start;position:relative;font-family:var(--serif);
  font-weight:400;line-height:.9;letter-spacing:.14em;white-space:nowrap}
.wm i{font-style:normal;display:inline-block}
/* het accent hangt aan de E zelf, niet op een percentage van het hele woord:
   zo staat het bij elke maat en elke letterafstand exact goed */
.wm__e{position:relative}
.wm__acc{
  position:absolute;display:block;
  width:.235em;height:.355em;
  left:50%;transform:translateX(-50%);top:-.33em;
  background:var(--terra);
  -webkit-mask:url("../img/accent-mark.png") center/contain no-repeat;
  mask:url("../img/accent-mark.png") center/contain no-repeat;
  transition:background .5s;
}
/* boven de hero is alles crème; pas als de balk dichttrekt wordt het accent terracotta */
.nav:not(.solid) .wm__acc{background:var(--crema)}
.wm--xl{font-size:clamp(52px,12.5vw,178px)}
.wm--lg{font-size:clamp(44px,9vw,124px)}
.wm--sm{font-size:21px}

/* ═══════════════════════ preloader ═══════════════════════ */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--crema);
  display:grid;place-items:center;
  transition:transform 1.15s var(--ease) .15s;
}
.loader.done{transform:translateY(-101%)}
.loader__inner{text-align:center;width:min(78vw,420px)}
.loader__mark{position:relative;display:inline-block;margin-bottom:34px}
.loader__word{font-family:var(--serif);font-size:clamp(34px,7vw,60px);letter-spacing:.16em;
  display:flex;line-height:1}
.loader__word i{font-style:normal;opacity:0;transform:translateY(.34em);
  animation:lw .8s var(--ease) forwards}
.loader__word i:nth-child(1){animation-delay:.05s}
.loader__word i:nth-child(2){animation-delay:.11s}
.loader__word i:nth-child(3){animation-delay:.17s}
.loader__word i:nth-child(4){animation-delay:.23s}
.loader__word i:nth-child(5){animation-delay:.29s}
.loader__word i:nth-child(6){animation-delay:.35s}
@keyframes lw{to{opacity:1;transform:none}}
.loader__accent{position:absolute;width:.20em;left:calc(50% + .30em);top:-.34em;
  font-size:clamp(34px,7vw,60px);overflow:visible}
.loader__accent path{fill:var(--terra);opacity:0;transform:translateY(6px) scale(.8);
  transform-origin:bottom center;animation:la .9s var(--ease) .5s forwards}
@keyframes la{to{opacity:1;transform:none}}
.loader__bar{width:100%;height:1px;background:var(--line);overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;background:var(--espresso);
  transition:width .35s linear}

/* ═══════════════════════ nav ═══════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;gap:clamp(16px,4vw,56px);
  padding:clamp(16px,2.4vw,30px) var(--pad);
  transition:transform .55s var(--ease),background .5s,padding .5s,color .5s;
  color:var(--crema);
}
/* De sluier loopt door tot onder de balk. Zat hij alleen op de balk zelf, dan
   was hij ter hoogte van de letters al bijna uitgedoofd en verdwenen de links
   in een lichte plek van de video. */
.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:190px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,12,8,.72) 0%,rgba(18,12,8,.52) 42%,
    rgba(18,12,8,0) 100%);
  transition:opacity .5s;
}
.nav.solid::before{opacity:0}
.nav.solid{
  mix-blend-mode:normal;color:var(--espresso);
  background:rgba(247,242,232,.86);backdrop-filter:blur(14px) saturate(1.1);
  padding-top:clamp(11px,1.5vw,17px);padding-bottom:clamp(11px,1.5vw,17px);
  box-shadow:0 1px 0 var(--line);
}
.nav.hide{transform:translateY(-104%)}
.nav__brand{margin-right:auto}
.nav__links{display:flex;gap:clamp(18px,2.4vw,38px)}
.nav__links a{position:relative;font-size:13px;letter-spacing:.07em;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right .5s var(--ease)}
.nav__links a:hover::after{right:0}
.nav__cta{flex:0 0 auto;white-space:nowrap;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:100px;padding:9px 20px;
  transition:background .4s,color .4s,border-color .4s}
/* de knop staat het verst naar rechts, waar de video het lichtst is */
.nav:not(.solid) .nav__cta{background:rgba(18,12,8,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-color:rgba(247,242,232,.5)}
.nav.solid .nav__cta:hover{background:var(--espresso);color:var(--crema)}
.nav__burger{display:none;background:none;border:0;padding:10px;cursor:pointer;
  width:44px;height:44px;color:inherit}
.nav__burger i{display:block;height:1px;background:currentColor;margin:5px 0;
  transition:transform .45s var(--ease),opacity .3s}
.nav.open .nav__burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav.open .nav__burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* mobiel menu */
.menu{
  position:fixed;inset:0;z-index:110;background:var(--espresso);color:var(--crema);
  display:flex;flex-direction:column;
  /* de balk ligt erboven (z-index 120); zonder deze ruimte liep de eerste link
     dwars door het woordmerk */
  padding:clamp(78px,13vh,104px) var(--pad) var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--ease);
  visibility:hidden;
}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
/* de links vullen de ruimte boven de voet en staan daar gecentreerd */
.menu__list{flex:1;display:flex;flex-direction:column;justify-content:center}
.menu__list a{display:flex;align-items:baseline;gap:18px;padding:clamp(9px,1.6vh,16px) 0;
  font-family:var(--serif);font-size:clamp(32px,10vw,62px);line-height:1.05;
  opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.menu.open .menu__list a{opacity:1;transform:none}
.menu.open .menu__list a:nth-child(1){transition-delay:.24s}
.menu.open .menu__list a:nth-child(2){transition-delay:.31s}
.menu.open .menu__list a:nth-child(3){transition-delay:.38s}
.menu.open .menu__list a:nth-child(4){transition-delay:.45s}
.menu__list em{font-family:var(--sans);font-style:normal;font-size:12px;
  letter-spacing:.2em;color:var(--brons)}
.menu__foot{margin-top:auto;padding-top:40px;display:flex;justify-content:space-between;
  gap:20px;font-size:13px;color:rgba(247,242,232,.6);flex-wrap:wrap}

/* ═══════════════════════ hero ═══════════════════════ */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;
  display:flex;align-items:flex-end;background:var(--espresso)}
.hero__media{position:absolute;inset:-12% 0;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.14);animation:heroIn 2.6s var(--ease) .25s forwards}
@keyframes heroIn{to{transform:scale(1)}}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s var(--ease)}
.hero__video.on{opacity:1}
.hero__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,15,11,.46) 0%,rgba(22,15,11,.14) 26%,
    rgba(22,15,11,.52) 58%,rgba(22,15,11,.88) 100%)}
.hero__body{position:relative;z-index:2;color:var(--crema);
  padding:0 var(--pad) clamp(104px,17vh,190px);max-width:1500px;margin:0 auto;width:100%}
.hero__eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(247,242,232,.95);margin-bottom:clamp(14px,2.4vh,26px)}
.hero__h{font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,6.4vw,92px);line-height:1.04;letter-spacing:-.02em;max-width:15ch}
.hero__h .rev>span{transition-duration:1.15s}
.hero__h .rev:nth-child(2)>span{transition-delay:.12s}
@keyframes hw{to{opacity:1;transform:none}}
@keyframes ha{to{opacity:1;transform:rotate(20deg) skewX(-6deg)}}
.hero__tag{margin-top:clamp(20px,3vh,36px);font-size:clamp(11.5px,1vw,13.5px);
  letter-spacing:.26em;text-transform:uppercase;color:rgba(247,242,232,.9)}
.hero__tag .rev>span{transition-delay:.3s}
.hero__scroll{position:absolute;bottom:clamp(22px,4vh,44px);right:var(--pad);
  z-index:2;color:rgba(247,242,232,.8);display:grid;justify-items:center;gap:12px;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  opacity:0;animation:fadeIn 1s var(--ease) 1.5s forwards}
.hero__scroll i{display:block;width:1px;height:44px;background:currentColor;
  transform-origin:top;animation:drop 2.1s var(--ease-io) infinite}
@keyframes drop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fadeIn{to{opacity:1}}

/* ── reveal-primitief ────────────────────────────────────── */
.rev{display:block;overflow:hidden}
.rev>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.rev.in>span{transform:none}

[data-split] .ln{display:block;overflow:hidden}
[data-split] .ln>span{display:block;transform:translateY(105%);
  transition:transform 1.05s var(--ease)}
[data-split].in .ln>span{transform:none}
[data-split].in .ln:nth-child(2)>span{transition-delay:.08s}
[data-split].in .ln:nth-child(3)>span{transition-delay:.16s}
[data-split].in .ln:nth-child(4)>span{transition-delay:.24s}
[data-split].in .ln:nth-child(5)>span{transition-delay:.32s}

[data-fade]{opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-fade].in{opacity:1;transform:none}

[data-reveal] picture,[data-reveal] img{display:block}
[data-reveal]{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease)}
[data-reveal].in{clip-path:inset(0 0 0 0)}
[data-reveal] img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
[data-reveal].in img{transform:none}

/* ═══════════════════════ manifest ═══════════════════════ */
.manifest{padding:var(--sec) var(--pad);max-width:1500px;margin:0 auto}
.manifest__h{max-width:16ch;margin-bottom:clamp(30px,4vw,56px)}
.manifest__grid{display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(28px,5vw,72px);align-items:start}
.manifest__img{overflow:hidden}
.manifest__img img{width:100%;aspect-ratio:4/5;max-height:min(60vh,540px);object-fit:cover}
/* de tekstkolom is korter dan de foto ernaast; deze drie feiten vullen dat gat
   met inhoud in plaats van met lucht */
.manifest__feiten{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,38px);margin:clamp(40px,5vw,72px) 0 0;
  padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.manifest__feiten dt{font-size:clamp(11px,.85vw,12.5px);letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:clamp(8px,1vw,12px)}
.manifest__feiten dd{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,1.9vw,27px);line-height:1.15;letter-spacing:-.01em}
.manifest__cols{display:grid;gap:clamp(18px,2.2vw,30px);padding-top:clamp(6px,1.5vw,22px)}
.manifest__cols p{color:var(--muted);font-size:clamp(15px,1.15vw,17.5px)}

/* ═══════════════════════ marquee ═══════════════════════ */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(16px,2vw,26px) 0;background:var(--latte)}
.marquee__track{display:flex;gap:clamp(20px,2.5vw,40px);width:max-content;
  animation:mq 44s linear infinite;align-items:center}
.marquee__track span{font-family:var(--serif);font-size:clamp(18px,2.4vw,34px);
  white-space:nowrap;color:var(--espresso)}
.marquee__track b{color:var(--terra-op-licht);font-size:clamp(14px,1.6vw,22px)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ═══════════════════════ worlds ═══════════════════════ */
.worlds{padding:var(--sec) var(--pad);max-width:1500px;margin:0 auto}
.worlds__h{max-width:14ch;margin-bottom:clamp(38px,5vw,76px)}
.world{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);
  /* de tekst is korter dan de staande foto; gecentreerd verdeelt de ruimte
     boven en onder in plaats van alles onderaan te laten vallen */
  align-items:center;position:relative;margin-bottom:clamp(56px,8vw,120px)}
.world:last-child{margin-bottom:0}
.world--rev .world__img{order:2}
.world__num{font-family:var(--sans);font-weight:400;
  font-size:clamp(11px,.85vw,12.5px);letter-spacing:.24em;color:var(--muted);
  margin-bottom:clamp(10px,1.2vw,16px)}
.world__img{position:relative;z-index:1;overflow:hidden;will-change:transform}
.world__img img{width:100%;aspect-ratio:4/5;max-height:min(64vh,560px);object-fit:cover}
.world__txt{position:relative;z-index:1;padding-top:clamp(4px,1.2vw,18px)}
.world__txt h3{margin-bottom:clamp(14px,1.8vw,24px)}
.world__txt p{color:var(--muted);max-width:44ch;margin-bottom:clamp(20px,2.6vw,32px)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:8px 16px;color:var(--muted)}

/* ═══════════════════════ textuurband ═══════════════════════ */
.band{position:relative;height:clamp(320px,62vh,620px);overflow:hidden;
  display:grid;place-items:center}
.band__media{position:absolute;inset:-14% 0;will-change:transform}
.band__media img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:rgba(24,16,11,.42)}
.band__line{position:relative;z-index:2;color:var(--crema);text-align:center;
  font-family:var(--serif);font-size:clamp(22px,3.6vw,52px);line-height:1.15;
  letter-spacing:-.01em;padding:0 var(--pad);max-width:20ch}

/* ═══════════════════════ pull ═══════════════════════ */
.pull{position:relative;overflow:hidden;padding:calc(var(--sec) * 1.15) var(--pad);
  text-align:center;background:var(--espresso);color:var(--crema)}
.pull__media{position:absolute;inset:-12% 0;will-change:transform}
.pull__media img{width:100%;height:100%;object-fit:cover}
.pull::after{content:"";position:absolute;inset:0;background:rgba(24,16,11,.74)}
.pull__body{position:relative;z-index:2}
.pull blockquote{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(24px,4.4vw,58px);line-height:1.2;max-width:20ch;margin:0 auto;
  letter-spacing:-.01em}

/* ═══════════════════════ zaak ═══════════════════════ */
.zaak{padding:var(--sec) var(--pad);max-width:1500px;margin:0 auto}
.zaak__h{max-width:15ch;margin-bottom:clamp(40px,6vw,80px)}
.zaak__wide{margin-bottom:clamp(20px,3vw,40px);overflow:hidden}
.zaak__wide img{width:100%;aspect-ratio:21/9;object-fit:cover}
.zaak__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.zaak__grid figure{overflow:hidden}
.zaak__grid img{width:100%;aspect-ratio:3/2;object-fit:cover}
.zaak__grid figcaption{margin-top:16px;font-size:13.5px;line-height:1.55;
  color:var(--muted);max-width:40ch}

/* ═══════════════════════ craft ═══════════════════════ */
.craft{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,86px);
  align-items:center;padding:var(--sec) var(--pad);max-width:1500px;margin:0 auto}
.craft__img{overflow:hidden}
.craft__img img{width:100%}
.craft__txt h2{margin-bottom:clamp(18px,2.4vw,30px)}
.craft__txt p[data-fade]{color:var(--muted);max-width:46ch}
.swatches{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,22px);margin-top:clamp(26px,3.4vw,42px)}
.swatches li{display:grid;justify-items:center;gap:10px;font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.swatches i{display:block;width:clamp(30px,3.4vw,44px);height:clamp(30px,3.4vw,44px);
  border-radius:50%;background:var(--c);border:1px solid var(--line)}

/* ═══════════════════════ bezoek ═══════════════════════ */
.bezoek{position:relative;overflow:hidden;color:var(--crema);
  padding:calc(var(--sec) * 1.1) var(--pad)}
.bezoek__media{position:absolute;inset:-10% 0;will-change:transform}
.bezoek__media img{width:100%;height:100%;object-fit:cover}
.bezoek__veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(24,16,11,.93) 0%,rgba(24,16,11,.90) 46%,
    rgba(24,16,11,.84) 62%,rgba(24,16,11,.32) 80%,rgba(24,16,11,.28) 100%),
    rgba(24,16,11,.18)}
.bezoek__body{position:relative;z-index:2;max-width:1500px;margin:0 auto}
.bezoek h2{max-width:12ch;margin-bottom:clamp(40px,6vw,76px)}
.bezoek__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,46px);
  max-width:830px}
.bezoek__cols p{color:rgba(247,242,232,.8)}
.link{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:13px;
  letter-spacing:.1em;border-bottom:1px solid rgba(247,242,232,.32);padding-bottom:4px}
.link i{font-style:normal;transition:transform .45s var(--ease)}
.link:hover i{transform:translateX(6px)}

/* ═══════════════════════ footer ═══════════════════════ */
.foot{padding:clamp(56px,9vw,110px) var(--pad) clamp(26px,4vw,44px);
  background:var(--espresso);color:var(--crema);overflow:hidden}
.foot__wm{text-align:center;margin-bottom:clamp(40px,6vw,80px);
  color:rgba(247,242,232,.9)}
.foot__wm .wm__acc{background:var(--terra)}
.foot__row{display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;border-top:1px solid rgba(247,242,232,.16);
  padding-top:clamp(20px,2.6vw,32px);
  font-size:13px;color:rgba(247,242,232,.72)}
.foot__soc{display:flex;gap:24px}
.foot__soc a{position:relative}
.foot__soc a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;
  background:currentColor;transition:right .5s var(--ease)}
.foot__soc a:hover::after{right:0}

/* ═══════════════════════ responsive ═══════════════════════ */
@media (max-width:1000px){
  .craft{grid-template-columns:1fr}
  .manifest__grid{grid-template-columns:1fr}
  .bezoek__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:15.5px}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .world{grid-template-columns:1fr;gap:26px}
  .world--rev .world__img{order:0}
  .world__img img{aspect-ratio:4/3}
  .zaak__grid{grid-template-columns:1fr}
  .zaak__wide img{aspect-ratio:4/3}
  .bezoek__cols{grid-template-columns:1fr;gap:34px}
  .foot__row{flex-direction:column;text-align:center}
  .hero__media{inset:-6% 0}
  /* staand beeld snijdt het gevelbord af; iets naar links kadreren houdt de D erin */
  .hero__media img{object-position:34% center}
  /* zes stalen naast elkaar geeft op een smal scherm 5 + 1; twee rijen van drie
     leest rustiger */
  .swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 12px}
  /* het sluier loopt op 100deg: links donker voor de tekst, rechts open voor de
     gevel. Op een smal scherm staat alles onder elkaar en levert die schuine
     verdeling een donkere linkerhelft naast een felle rechterhelft op. Verticaal
     dekt gelijkmatig af. */
  .bezoek__veil{background:linear-gradient(180deg,rgba(24,16,11,.84) 0%,
    rgba(24,16,11,.78) 40%,rgba(24,16,11,.88) 100%),rgba(24,16,11,.22)}
  .manifest__feiten{grid-template-columns:1fr 1fr;gap:26px 20px}
}
@media (max-width:420px){
  .marquee__track span{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rev>span,[data-split] .ln>span{transform:none!important}
  [data-fade]{opacity:1!important;transform:none!important}
  [data-reveal]{clip-path:none!important}
  [data-reveal] img{transform:none!important}
}