/* ==========================================================================
   Brandatelier: beursstand-, beurs- en venuepagina's (main.bx).
   Opbouw en bewegingen overgenomen van Brandatelier/Website Brandatelier v2
   (trade-fairs/ en locations/), omgezet naar de tokens in tokens.css:
   Philosopher → Fraunces, koper/oranje → bordeaux/beige, zwart → houtskool.
   Gedrag (reveal, filters): assets/js/beurs.js.
   ========================================================================== */

/* Thema per band: licht (ivoor) of donker (houtskool) */
.bx [data-theme="light"]{--surface:var(--ivory);--surface-raised:var(--ivory-2);--ink:var(--charcoal);--ink-muted:var(--stone-dark);--line:rgba(20,19,17,.14);--line-strong:var(--stone-dark);--acc:var(--bordeaux);--on-acc:var(--ivory)}
.bx [data-theme="dark"]{--surface:var(--charcoal);--surface-raised:var(--charcoal-3);--ink:var(--ivory);--ink-muted:var(--on-dark-2);--line:rgba(245,241,231,.16);--line-strong:var(--on-dark-2);--acc:var(--beige);--on-acc:var(--charcoal)}
.bx{--section:112px;--bx-ease:cubic-bezier(.16,1,.3,1);--glow:var(--glow-ember)}
@media(min-width:768px){.bx{--section:144px}}
.bx a{color:inherit;text-decoration:none}

.bx .band{position:relative;background:var(--surface);color:var(--ink);padding-block:var(--section)}
.bx .band--tight{padding-block:calc(var(--section)*.6)}

/* Sectiekop: label in een smalle kolom, kop en lead ernaast */
.bx .sh{display:grid;gap:24px;margin-bottom:64px}
@media(min-width:1024px){.bx .sh{grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:start}.bx .sh>.eyebrow{grid-column:1/span 3;padding-top:14px}.bx .sh>.sh__main{grid-column:4/span 9}}
.bx .sh__main{display:grid;gap:24px}
.bx .sh__lead{max-width:36rem;color:var(--ink-muted);font-size:18px;line-height:1.625;margin:0}

/* Type */
.bx .eyebrow{display:flex;align-items:center;gap:12px;margin:0;color:var(--ink-muted);font:600 12px/1.33 var(--font-sans);letter-spacing:.18em;text-transform:uppercase}
.bx .eyebrow::before{content:"";flex:none;width:32px;height:1px;background:var(--acc)}
.bx .h1{margin:0;font:400 clamp(44px,5.4vw,76px)/1.06 var(--font-serif);text-wrap:balance}
.bx .h2{margin:0;font:400 clamp(30px,3.2vw,44px)/1.1 var(--font-serif);letter-spacing:-.01em;text-wrap:balance}
.bx .h3{margin:0;font:600 22px/1.33 var(--font-sans);letter-spacing:-.02em}
.bx .caption{margin:0;font:600 12px/1.33 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.bx .num{font-variant-numeric:tabular-nums}
.bx .arrow{display:inline-block;transition:transform .3s var(--bx-ease)}
.bx a:hover .arrow{transform:translate(2px,-2px)}
.bx .tlink{position:relative;display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid var(--line-strong);font:600 14px/1.43 var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.bx .tlink::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--acc);transition:width .5s var(--bx-ease)}
.bx .tlink:hover::after{width:100%}
.bx .tlink--accent{color:var(--acc);border-color:var(--acc)}
.bx .section-foot{margin-top:40px}
.bx .actions{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center}

/* Gloed (zachte vlek achter de hero) */
.bx .glow{position:absolute;width:42vw;max-width:640px;aspect-ratio:1;border-radius:50%;background:var(--glow);filter:blur(120px);opacity:.55;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.bx .glow{animation:bx-drift 18s ease-in-out infinite alternate}}
@keyframes bx-drift{from{transform:translate(0,0)}to{transform:translate(6vw,-4vw)}}

/* Pagina-hero */
.bx .phero{position:relative;display:grid;align-items:end;min-height:min(80dvh,780px);padding:120px 0 64px;overflow:hidden;background:var(--charcoal);color:var(--ivory)}
.bx .phero--short{min-height:0;padding-top:140px;padding-bottom:80px}
.bx .phero__media{position:absolute;inset:0}
.bx .phero__media img,.bx .phero__media picture img{width:100%;height:100%;object-fit:cover;opacity:.72}
.bx .phero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--charcoal) 4%,rgba(20,19,17,.5) 45%,rgba(20,19,17,.2) 80%),linear-gradient(to right,rgba(20,19,17,.7),transparent 70%)}
.bx .phero .wrap{position:relative}
.bx .phero .eyebrow{color:var(--on-dark-2)}
.bx .phero .eyebrow::before{background:var(--beige)}
.bx .phero h1{margin-top:24px;max-width:18ch}
.bx .phero__sub{margin:20px 0 0;max-width:40rem;font-size:20px;line-height:1.5;color:var(--on-dark-2)}
.bx .phero .actions{margin-top:40px}
.bx .phero .tlink{border-color:var(--on-dark-2)}
.bx .phero .tlink::after{background:var(--beige)}
.bx .phero__meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin:20px 0 0;color:var(--on-dark-2);font-size:18px}
.bx .phero__meta span+span::before{content:"";display:inline-block;width:6px;height:6px;margin:0 20px 2px -16px;background:var(--beige)}
.bx .phero__notice{margin-top:28px;display:inline-block;padding:10px 16px;border:1px solid rgba(245,241,231,.3);color:var(--beige-light);font-size:15px}
.bx .phero .btn-primary{background:var(--ember);color:var(--charcoal)}

/* Filters en tegels (overzicht beurzen) */
.bx .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.bx .filter{min-height:44px;padding:10px 18px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:600 13px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .3s var(--bx-ease),color .3s var(--bx-ease),border-color .3s var(--bx-ease)}
.bx .filter:hover{border-color:var(--acc);color:var(--acc)}
.bx .filter[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.bx .filter .num{margin-left:8px;opacity:.7}
.bx .tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:640px){.bx .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.bx .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bx .tile{position:relative;display:grid;gap:10px;align-content:start;min-height:196px;padding:28px 24px;background:var(--surface);transition:background .4s var(--bx-ease)}
.bx .tile:hover{background:var(--surface-raised)}
.bx .tile[hidden]{display:none}
.bx .tile__cat{font:600 11px/1.4 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.bx .tile__name{font:500 24px/1.2 var(--font-serif);transition:transform .5s var(--bx-ease)}
.bx .tile:hover .tile__name{transform:translateX(6px)}
.bx .tile__where{color:var(--ink-muted);font-size:15px}
.bx .tile__when{margin-top:auto;padding-top:16px;font-size:14px;color:var(--acc);font-variant-numeric:tabular-nums}
.bx .tile .arrow{position:absolute;top:24px;right:24px;color:var(--acc)}
.bx .empty{padding:48px 0;color:var(--ink-muted)}

/* Venuerijen met foto bij hover */
.bx .rows{border-top:1px solid var(--line-strong)}
.bx .row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 24px;padding:28px 0;border-bottom:1px solid var(--line);transition:padding .5s var(--bx-ease)}
.bx .row:hover{padding-left:12px}
.bx .row__name{font:400 clamp(26px,3.2vw,44px)/1.1 var(--font-serif)}
.bx .row__meta{color:var(--ink-muted);font-size:15px}
.bx .row__count{display:flex;align-items:baseline;gap:10px;grid-row:1/span 2;grid-column:2}
.bx .row__count b{font:400 clamp(40px,5vw,72px)/1 var(--font-serif);color:var(--acc)}
.bx .row__count span{font:600 12px/1.33 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.bx .row__thumb{display:none}
@media(min-width:1024px){
  .bx .row{grid-template-columns:4fr 3fr 2fr 2fr}
  .bx .row__meta{grid-column:2}
  .bx .row__count{grid-row:auto;grid-column:3}
  .bx .row__go{grid-column:4;justify-self:end}
  .bx .row__thumb{display:block;position:absolute;right:22%;top:50%;width:240px;opacity:0;transform:translate(0,-46%) scale(.96);transition:opacity .4s var(--bx-ease),transform .6s var(--bx-ease);pointer-events:none;z-index:2}
  .bx .row__thumb img{width:240px;aspect-ratio:4/3;object-fit:cover}
  .bx .row:hover .row__thumb{opacity:1;transform:translate(0,-50%) scale(1)}
}
@media(max-width:1023px){.bx .row__go{display:none}}

/* Feitenbord */
.bx .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(min-width:1024px){.bx .facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:599px){.bx .facts{grid-template-columns:minmax(0,1fr)}}
.bx .fact{display:grid;align-content:start;gap:10px;padding:28px 24px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.bx .fact dt{font:600 12px/1.33 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.bx .fact dd{margin:0;font:600 20px/1.35 var(--font-sans);letter-spacing:-.02em}
.bx .fact dd a{border-bottom:1px solid var(--acc)}
.bx .fact--wide{grid-column:1/-1}
.bx .fact--wide dd{font-weight:500;font-size:17px;line-height:1.55;max-width:60ch}

/* Briefing: lead links, kader rechts */
.bx .brief{display:grid;gap:40px}
@media(min-width:1024px){.bx .brief{grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}.bx .brief__lead{grid-column:1/span 7}.bx .brief__side{grid-column:9/span 4}}
.bx .brief__lead p{margin:0 0 20px;font-size:clamp(20px,1.8vw,26px);line-height:1.5;letter-spacing:-.01em}
.bx .brief__side{display:grid;gap:12px;align-content:start;padding:28px;background:var(--surface-raised)}
.bx .brief__side p{margin:0;line-height:1.6}

/* Deadlines */
.bx .deadlines{display:grid;border-top:1px solid var(--line-strong)}
.bx .deadline{display:grid;gap:12px;padding:32px 0;border-bottom:1px solid var(--line)}
@media(min-width:1024px){.bx .deadline{grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:baseline}.bx .deadline__n{grid-column:1/span 1}.bx .deadline .h3{grid-column:2/span 5}.bx .deadline p{grid-column:7/span 6}}
.bx .deadline__n{font-size:15px;color:var(--acc);font-variant-numeric:tabular-nums}
.bx .deadline p{margin:0;color:var(--ink-muted);line-height:1.6}

/* Cellen (aandachtspunten) */
.bx .cells{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:768px){.bx .cells{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bx .cell{display:grid;gap:14px;align-content:start;padding:36px 32px 40px;background:var(--surface)}
@media(min-width:768px){.bx .cells--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bx a.cell{transition:background-color .3s}
.bx a.cell:hover{background:var(--surface-raised)}
.bx .cell__n{font-size:14px;color:var(--acc);font-variant-numeric:tabular-nums}
.bx .cell p{margin:0;color:var(--ink-muted);line-height:1.6}

/* Processtrook: lijn tekent zich bij het binnenkomen, blokjes kleuren na elkaar */
.bx .process{position:relative;display:grid;gap:40px;margin:0;padding:0;list-style:none}
@media(min-width:900px){.bx .process{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
.bx .process__track{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);display:none}
.bx .process__track i{position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--bx-ease) .2s}
.bx .process.is-in .process__track i{transform:scaleX(1)}
@media(min-width:900px){.bx .process__track{display:block}}
.bx .step{position:relative;display:grid;gap:14px;align-content:start;padding-top:32px}
@media(max-width:899px){.bx .step{padding:0 0 0 28px;border-left:1px solid var(--line)}}
.bx .step::before{content:"";position:absolute;top:-4px;left:0;width:9px;height:9px;background:var(--surface);border:1px solid var(--acc);transition:background .4s var(--bx-ease)}
@media(max-width:899px){.bx .step::before{top:4px;left:-5px}}
.bx .process.is-in .step::before{background:var(--acc)}
.bx .step__n{font:400 32px/1 var(--font-serif);color:var(--acc)}
.bx .step p{margin:0;color:var(--ink-muted);line-height:1.6}
@media(prefers-reduced-motion:no-preference){.bx .process.is-in .step:nth-child(3)::before{transition-delay:.3s}.bx .process.is-in .step:nth-child(4)::before{transition-delay:.7s}.bx .process.is-in .step:nth-child(5)::before{transition-delay:1.1s}}

/* FAQ met plus/min */
.bx .faq{border-top:1px solid var(--line-strong)}
.bx .faq details{border-bottom:1px solid var(--line)}
.bx .faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;cursor:pointer;list-style:none;font:600 clamp(19px,1.6vw,22px)/1.35 var(--font-sans);letter-spacing:-.02em;transition:color .3s var(--bx-ease)}
.bx .faq summary::-webkit-details-marker{display:none}
.bx .faq .pm{position:relative;flex:none;width:20px;height:20px}
.bx .faq .pm::before,.bx .faq .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--acc);transition:transform .4s var(--bx-ease)}
.bx .faq .pm::after{transform:rotate(90deg)}
.bx .faq details[open] .pm::after{transform:rotate(0)}
.bx .faq summary:hover{color:var(--acc)}
.bx .faq .answer{max-width:60ch;margin:0;padding:0 0 32px;color:var(--ink-muted);line-height:1.7;font-size:17px}

/* Verwante beurzen */
.bx .related{display:grid;border-top:1px solid var(--line-strong)}
.bx .related a,.bx .related .related__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);transition:padding .5s var(--bx-ease)}
.bx .related a:hover{padding-left:12px}
.bx .related .h3{transition:color .3s var(--bx-ease)}
.bx .related a:hover .h3{color:var(--acc)}
.bx .related .small{grid-column:1;color:var(--ink-muted);font-size:15px}
.bx .related .arrow{grid-row:1/span 2;grid-column:2;color:var(--acc);font-size:20px}

/* Kleine lijst (wat we regelen) */
.bx .bx-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.bx .bx-list li{border-top:1px solid var(--line-strong);padding-top:20px;display:grid;gap:10px}
.bx .bx-list p{margin:0;color:var(--ink-muted);line-height:1.6}
.bx .bx-list a{border-bottom:1px solid var(--acc)}

/* Contactblok onderaan */
.bx .h-contact{padding-top:var(--section);padding-bottom:var(--section)}

/* Reveal: blokken komen zacht omhoog uit een blur */
@media(prefers-reduced-motion:no-preference){
  .js .bx [data-reveal]{opacity:0;transform:translateY(24px);filter:blur(10px);transition:opacity .7s var(--bx-ease),transform .7s var(--bx-ease),filter .7s var(--bx-ease);transition-delay:calc(var(--d,0)*80ms)}
  .js .bx [data-reveal].is-in{opacity:1;transform:none;filter:none}
  .bx .phero__media img{animation:bx-settle 1.8s var(--bx-ease) both}
}
@keyframes bx-settle{from{transform:scale(1.06);opacity:0}to{transform:none;opacity:.72}}

/* ==========================================================================
   BUILD-HERO (landingspagina /beursstand/): een stand van tekening naar render naar gebouwd.
   Overgenomen van Website Brandatelier v2 (assets/css/site.css, blok "Home: drawing-to-build hero"),
   omgezet naar de tokens: zwart → houtskool, crème → ivoor, taupe → on-dark-2, oranje → beige, Philosopher → Fraunces.
   Eén scrollwaarde --p (0 tot 1), geschreven door beurs.js zolang de hero in beeld is:
   0.00-0.06  leeg millimeterpapier
   0.04-0.44  de stand tekent zichzelf, onderdeel per onderdeel (stroke-dashoffset op paden met pathLength=1)
   0.40-0.58  de render verschijnt onder de lijnen
   0.58-0.76  de gebouwde stand vervangt de render, lijnen en raster verdwijnen
   0.76-1.00  tweede regel van de titel, knoppen en cijfers
   Zonder JS of met reduced motion blijft --p op 1: de gebouwde stand, niet vastgepind.
   ========================================================================== */
.bx .build{--p:1;position:relative;background:var(--charcoal);color:var(--ivory)}
.js .bx .build{--p:0;height:420vh;height:420dvh}
.bx .build{
  --grid:calc(1 - clamp(0,(var(--p) - .56) / .18,1));
  --render:clamp(0,(var(--p) - .40) / .16,1);
  --photo:clamp(0,(var(--p) - .58) / .16,1);
  --lines:calc(1 - clamp(0,(var(--p) - .6) / .14,1));
  --t2:clamp(0,(var(--p) - .76) * 7,1);
  --t3:clamp(0,(var(--p) - .82) * 7,1);
  --t4:clamp(0,(var(--p) - .88) * 8,1);
  --bh-top:88px;
}
.bx .build__stage{position:relative;height:100vh;height:100dvh;min-height:560px;overflow:hidden;isolation:isolate;background:var(--charcoal)}
.js .bx .build__stage{position:sticky;top:0}
/* Het blad is een 16:9-vak dat de stage vult, zodat tekening, render en foto op elkaar passen. */
.bx .build__sheet{position:absolute;left:50%;top:50%;width:max(100%,177.78vh);aspect-ratio:16/9;transform:translate(-50%,-50%) scale(calc(1.06 - var(--photo) * .06));transform-origin:62% 50%;z-index:-2}
.bx .build__sheet>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.bx .build__grid{position:absolute;inset:0;z-index:-3;opacity:var(--grid);
  background-image:
    linear-gradient(rgba(245,241,231,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(245,241,231,.13) 1px,transparent 1px),
    linear-gradient(rgba(245,241,231,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,241,231,.05) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px}
/* Render en foto zijn uit de tekening gemaakt en kwamen iets groter en meer naar links terug; deze correctie legt ze terug op de lijnen. */
.bx .build__render,.bx .build__photo{transform-origin:0 0;transform:translate(var(--reg-x,0),var(--reg-y,0)) scale(var(--reg-s,1))}
.bx .build__sheet{--reg-x:10.15%;--reg-y:5.44%;--reg-s:.92}
.bx .build__render,.bx .build__photo{-webkit-mask-image:radial-gradient(ellipse 62% 70% at 56% 52%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 70% at 56% 52%,#000 55%,transparent 100%)}
.bx .build__render{opacity:calc(var(--render) * (1 - var(--photo) * .9))}
.bx .build__photo{opacity:var(--photo)}
.bx .build__glow{position:absolute;left:50%;top:18%;width:36%;aspect-ratio:1;border-radius:50%;background:var(--glow);filter:blur(100px);opacity:calc(var(--photo) * .6);pointer-events:none}
.bx .build .draw{position:absolute;inset:0;width:100%;height:100%;opacity:calc(.25 + var(--lines) * .75);visibility:visible}
.bx .build .draw__p{fill:none;stroke:var(--ivory);stroke-width:1.6;stroke-linecap:square;stroke-dasharray:1;vector-effect:non-scaling-stroke;
  stroke-dashoffset:calc(1 - clamp(0,(var(--p) - var(--s,.05)) / .1,1));opacity:calc(var(--lines))}
.bx .build .draw__lines .draw__p:nth-child(1){--s:.04}  .bx .build .draw__lines .draw__p:nth-child(2){--s:.08;stroke-opacity:.5}
.bx .build .draw__lines .draw__p:nth-child(3){--s:.10}  .bx .build .draw__lines .draw__p:nth-child(4){--s:.14;stroke-opacity:.5}
.bx .build .draw__lines .draw__p:nth-child(5){--s:.16}  .bx .build .draw__lines .draw__p:nth-child(6){--s:.17}
.bx .build .draw__lines .draw__p:nth-child(7){--s:.22;stroke-opacity:.6} .bx .build .draw__lines .draw__p:nth-child(8){--s:.23;stroke:var(--beige)}
.bx .build .draw__lines .draw__p:nth-child(9){--s:.27}  .bx .build .draw__lines .draw__p:nth-child(10){--s:.30;stroke:var(--beige)}
.bx .build .draw__lines .draw__p:nth-child(11){--s:.33} .bx .build .draw__lines .draw__p:nth-child(12){--s:.36;stroke-opacity:.7}
.bx .build .draw__dims{opacity:calc(var(--grid) * clamp(0,(var(--p) - .3) / .08,1))}
.bx .build .draw__dims .draw__p{--s:.3;stroke:var(--on-dark-2);stroke-width:1;opacity:1}
.bx .build .draw__dims text{fill:var(--on-dark-2);font:500 15px/1 var(--font-sans);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.bx .build__titleblock{position:absolute;right:var(--gutter);bottom:96px;display:grid;gap:6px;margin:0;padding:14px 18px;border:1px solid rgba(245,241,231,.3);font:500 11px/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);opacity:var(--grid)}
.bx .build__titleblock span:first-child{color:var(--ivory)}
.bx .build__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to right,rgba(20,19,17,.85),rgba(20,19,17,.4) 42%,transparent 70%),linear-gradient(to top,var(--charcoal) 2%,transparent 36%);opacity:calc(.55 + var(--photo) * .45)}
.bx .build__steps{position:absolute;top:calc(var(--bh-top) + 28px);right:var(--gutter);display:flex;gap:22px;margin:0;padding:0;list-style:none;font:500 12px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)}
.bx .build__steps li{display:flex;align-items:center;gap:10px;opacity:.45;transition:opacity .4s var(--bx-ease),color .4s var(--bx-ease)}
.bx .build__steps li::before{content:"";width:18px;height:1px;background:currentColor;transition:width .5s var(--bx-ease)}
.bx .build__steps li.is-on{opacity:1;color:var(--beige)}
.bx .build__steps li.is-on::before{width:32px}
.bx .build__copy{position:absolute;left:0;right:0;bottom:clamp(120px,20vh,200px);margin:0 auto}
.bx .build__copy .eyebrow{color:var(--on-dark-2)}
.bx .build__copy .eyebrow::before{background:var(--beige)}
.bx .build__title{margin:24px 0 0;max-width:16ch;font:400 clamp(40px,5.4vw,84px)/1.04 var(--font-serif);letter-spacing:-.01em}
.bx .build__title span{display:block}
.bx .build__title em{font-style:italic;font-weight:400;color:var(--beige);padding-right:.06em}
.bx .build__title .l2{opacity:var(--t2);transform:translate3d(0,calc((1 - var(--t2)) * 40px),0);clip-path:inset(0 0 calc((1 - var(--t2)) * 100%) 0)}
.bx .build__after{opacity:var(--t3);transform:translate3d(0,calc((1 - var(--t3)) * 24px),0)}
.bx .build__sub{margin:28px 0 0;max-width:34rem;font-size:18px;line-height:1.6;color:var(--on-dark-2)}
.bx .build__after .actions{margin-top:36px}
.bx .build .btn-primary{background:var(--ember);color:var(--charcoal)}
.bx .build .btn-primary:hover{background:var(--ivory);color:var(--charcoal)}
.bx .build .tlink{border-color:var(--on-dark-2)}
.bx .build .tlink::after{background:var(--beige)}
.js .bx .build__after{pointer-events:none}
.js .bx .build.is-ready .build__after{pointer-events:auto}
.bx .build__foot{position:absolute;left:0;right:0;bottom:28px;margin:0 auto;opacity:var(--t4)}
.bx .build__stats{display:flex;flex-wrap:wrap;gap:8px 48px;margin:0;padding-top:18px;border-top:1px solid rgba(245,241,231,.16)}
.bx .build__stats div{display:flex;align-items:baseline;gap:12px}
.bx .build__stats dt{order:2;font:500 12px/1.33 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2)}
.bx .build__stats dd{margin:0;font:400 20px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--beige)}
@media(min-width:1024px){
  /* Titel en tekst blijven in de linkerkolom, zodat ze de stand niet overlappen. */
  .bx .build__title{font-size:clamp(40px,4.4vw,72px);max-width:min(40vw,620px)}
  .bx .build__sub{max-width:min(36vw,30rem)}
  /* De stand blijft weg van de titel: blad naar rechts, linkerrand vervaagd. */
  .bx .build__sheet{transform:translate(-44%,-48%) scale(calc(.96 - var(--photo) * .04));-webkit-mask-image:linear-gradient(to right,transparent,#000 24%);mask-image:linear-gradient(to right,transparent,#000 24%)}
}
@media(max-width:767px){
  .js .bx .build{height:340vh;height:340dvh}
  .bx .build__sheet{width:190vw;top:34%;transform:translate(-62%,-55%) scale(calc(1.06 - var(--photo) * .06))}
  .bx .build__copy{bottom:56px}
  .bx .build__copy .eyebrow{display:none}
  .bx .build__foot,.bx .build__titleblock{display:none}
  .bx .build__steps{top:calc(var(--bh-top) + 48px);left:var(--gutter);right:auto;gap:14px;font-size:11px}
  .bx .build__shade{background:linear-gradient(to top,var(--charcoal) 10%,rgba(20,19,17,.6) 50%,rgba(20,19,17,.15))}
}
@media(prefers-reduced-motion:no-preference){
  .js .bx .build__title .l1{animation:bx-title-in 1.4s var(--bx-ease) .3s both}
  .js .bx .build__grid{animation:bx-grid-in 1.6s var(--bx-ease) both}
}
@keyframes bx-title-in{from{opacity:0;transform:translateY(28px);filter:blur(12px)}}
@keyframes bx-grid-in{from{opacity:0;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){
  .js .bx .build{--p:1;height:auto}
  .js .bx .build__stage{position:relative}
  .js .bx .build__after{pointer-events:auto}
}

/* ==========================================================================
   BEURS-HOME (landingspagina /beursstand/): blokken uit de v2-homepage (home.html),
   omgezet naar de tokens. Statement, twee panelen, sectoren, billboard, redenen, oranje call-to-action.
   ========================================================================== */
.bx .statement{margin:0;font:italic 400 clamp(32px,4vw,58px)/1.18 var(--font-serif);text-wrap:balance;padding-bottom:.08em}
.bx .mono{font-variant-numeric:tabular-nums}
.bx .intro{display:grid;gap:40px}
.bx .intro__body p{margin:0;font-size:18px;line-height:1.7;color:var(--ink-muted);max-width:36rem}
@media(min-width:1024px){
  .bx .intro{grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}
  .bx .intro .statement{grid-column:1/span 9}
  .bx .intro__body{grid-column:6/span 6}
}

.bx .trio{display:grid;gap:24px}
.bx .panel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:480px;overflow:hidden;background:var(--charcoal);color:var(--ivory);isolation:isolate}
.bx .panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--charcoal) 12%,rgba(20,19,17,.6) 48%,rgba(20,19,17,.05))}
.bx .panel__img{position:absolute;inset:0;z-index:-2}
.bx .panel__img img,.bx .panel__img picture{display:block;width:100%;height:100%}
.bx .panel__img img{object-fit:cover;transition:transform .9s var(--bx-ease)}
.bx .panel:hover .panel__img img{transform:scale(1.03)}
.bx .panel__body{display:grid;gap:14px;padding:32px}
.bx .panel__kicker{margin:0;font:500 12px/1.33 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)}
.bx .panel__title{margin:0;font:400 clamp(28px,2.6vw,40px)/1.1 var(--font-serif);transition:transform .5s var(--bx-ease)}
.bx .panel:hover .panel__title{transform:translateX(8px)}
.bx .panel__text{margin:0;max-width:30rem;color:var(--on-dark-2);line-height:1.6}
.bx .panel__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:10px;padding-top:16px;border-top:1px solid rgba(245,241,231,.18)}
.bx .panel__proof{font:500 14px/1.4 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ember)}
.bx .panel__cta{font:600 13px/1.4 var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
@media(min-width:1024px){
  .bx .trio--duo{grid-template-columns:7fr 5fr}
  .bx .trio--duo>.panel{min-height:680px}
  .bx .trio--duo>.panel:nth-child(2){margin-top:120px}
}

.bx .sectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
@media(min-width:1024px){.bx .sectors{grid-template-columns:repeat(5,minmax(0,1fr))}}
.bx .sectors li{display:flex;align-items:center;min-height:112px;padding:20px 16px 20px 0;border-bottom:1px solid var(--line);font:600 clamp(18px,1.7vw,24px)/1.2 var(--font-sans);letter-spacing:-.02em;color:var(--ink-muted);transition:color .4s var(--bx-ease)}
.bx .sectors li::before{content:"";width:0;height:1px;margin-right:0;background:var(--acc);transition:width .4s var(--bx-ease),margin .4s var(--bx-ease)}
.bx .sectors li:hover{color:var(--acc)}
.bx .sectors li:hover::before{width:20px;margin-right:12px}

.bx .billboard{position:relative;display:grid;align-items:end;min-height:82vh;min-height:82dvh;padding:96px 0 80px;overflow:hidden;background:var(--charcoal);color:var(--ivory)}
.bx .billboard__img{position:absolute;inset:0}
.bx .billboard__img img,.bx .billboard__img picture{display:block;width:100%;height:100%}
.bx .billboard__img img{object-fit:cover;opacity:.62}
.bx .billboard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--charcoal) 8%,rgba(20,19,17,.35) 60%,rgba(20,19,17,.6))}
.bx .billboard .wrap{position:relative;display:grid;gap:24px}
.bx .billboard .statement{max-width:18ch}
.bx .billboard__mark{width:88px;height:auto}

.bx .reasons{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line-strong)}
@media(min-width:768px){
  .bx .reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bx .reason:nth-child(odd){border-right:1px solid var(--line)}
  .bx .reason:nth-child(even){padding-left:32px}
}
.bx .reason{display:grid;gap:12px;align-content:start;padding:40px 32px 48px 0;border-bottom:1px solid var(--line)}
.bx .reason .h3{display:flex;gap:14px;align-items:baseline}
.bx .reason .h3 .mono{font-size:14px;font-weight:500;color:var(--acc);letter-spacing:0}
.bx .reason p{margin:0;color:var(--ink-muted);max-width:34ch;padding-left:34px;line-height:1.6}

.bx .cta{display:grid;gap:40px;padding:clamp(32px,5vw,72px);background:var(--ember);color:var(--charcoal)}
@media(min-width:1024px){.bx .cta{grid-template-columns:7fr 5fr;align-items:end;gap:64px}}
.bx .cta h2{margin:0;font:400 clamp(34px,3.8vw,58px)/1.08 var(--font-serif);text-wrap:balance}
.bx .cta p{margin:0;font-size:18px;line-height:1.6;max-width:32rem}
.bx .cta .actions{margin-top:32px}
.bx .cta .btn{background:var(--charcoal);border:1px solid var(--charcoal);color:var(--ivory)}
.bx .cta .btn:hover{background:transparent;color:var(--charcoal)}
.bx .cta .tlink{border-color:var(--charcoal);color:var(--charcoal)}
.bx .cta .tlink::after{background:var(--charcoal)}
.bx .cta :focus-visible{outline-color:var(--charcoal)}

/* Build-hero: de tekst blijft tussen header/kruimelpad en de cijfers, ook op een laag scherm.
   Vroeger hing het tekstblok alleen aan de onderkant en schoof het bij een lange titel onder de header. */
.bx .build__copy{top:calc(var(--bh-top) + 76px);bottom:clamp(96px,14vh,150px);display:flex;flex-direction:column;justify-content:safe flex-end}
.bx .build__title{font-size:clamp(34px,min(5vw,7.4vh),76px)}
@media(min-width:1024px){.bx .build__title{font-size:clamp(34px,min(4.2vw,7.4vh),68px);max-width:min(44vw,680px)}}
@media(max-width:767px){.bx .build__copy{top:calc(var(--bh-top) + 90px);bottom:40px}}
/* Laag scherm (bv. laptop met zoom): titel breder zodat elke regel op één lijn past, minder witruimte. */
@media(min-width:768px) and (max-height:760px){
  .bx .build__copy{top:calc(var(--bh-top) + 64px);bottom:84px}
  .bx .build__title{margin-top:16px;max-width:min(64vw,860px);font-size:clamp(30px,min(4vw,7.4vh),60px)}
  .bx .build__sub{margin-top:16px;font-size:16px;line-height:1.55;max-width:min(52vw,34rem)}
  .bx .build__after .actions{margin-top:22px}
  .bx .build__titleblock{bottom:84px}
  .bx .build__foot{bottom:20px}
  .bx .build__stats{padding-top:12px}
}
@media(max-width:767px) and (max-height:760px){
  .bx .build__copy{top:calc(var(--bh-top) + 76px);bottom:24px}
  .bx .build__title{font-size:clamp(28px,8vw,38px)}
  .bx .build__sub{margin-top:14px;font-size:15px;line-height:1.5}
  .bx .build__after .actions{margin-top:18px;gap:14px 24px}
}
/* Pagina-hero: ruimte onder de header. */
.bx .phero{padding-top:140px}

/* ==========================================================================
   BEURSFICHE PROEF (main.bx.fv2, pilotLayout: true in de beurs-JSON).
   Stadsfoto met oranje overlay, logo van de beurs, kleinere tekst, minstens 40px marge, raster met de andere beurzen.
   ========================================================================== */
.fv2{--gutter:clamp(40px,6vw,104px)}
@media(max-width:599px){.fv2{--gutter:24px}}
.fv2 .h1{font-size:clamp(34px,4vw,58px)}
.fv2 .h2{font-size:clamp(26px,2.5vw,36px)}
.fv2 .h3{font-size:18px}
.fv2 .sh{margin-bottom:48px}
.fv2 .sh__lead{font-size:16px}
.fv2 .phero__sub{font-size:17px}
.fv2 .fact{padding:22px 22px 26px}
.fv2 .fact dt{font-size:11px}
.fv2 .fact dd{font-size:17px}
.fv2 .fact--wide dd{font-size:15px;max-width:70ch}
.fv2 .brief__lead p{font-size:clamp(17px,1.4vw,20px)}
.fv2 .brief__side p,.fv2 .deadline p,.fv2 .cell p{font-size:15px}
.fv2 .faq summary{font-size:17px;padding:22px 0}
.fv2 .faq .answer{font-size:15px}

/* Hero: stadsfoto in grijswaarden onder een oranje overlay, zodat de witte tekst goed leesbaar blijft */
.fv2 .phero--city .phero__media img{opacity:1;filter:grayscale(1) contrast(1.1) brightness(.9)}
.fv2 .phero--city .phero__media::after{background:linear-gradient(to top,rgba(20,19,17,.92) 0%,rgba(20,19,17,.35) 45%,rgba(20,19,17,.1) 100%),linear-gradient(rgba(255,139,71,.78),rgba(163,60,0,.82));background-blend-mode:normal,multiply}
.fv2 .phero--city .glow{display:none}
.bx .phero__logo{display:inline-flex;align-items:center;min-height:64px;margin-bottom:28px;padding:12px 18px;background:#fff;border-radius:2px}
.bx .phero__logo img{display:block;height:var(--lh,46px);width:auto}
.bx .phero__logo span{font:600 12px/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--stone-dark)}
.fv2 .phero__credit{position:absolute;right:var(--gutter);bottom:14px;margin:0;font-size:11px;color:rgba(245,241,231,.7)}
.fv2 .phero__credit a{text-decoration:underline}

/* Meer beurzen: compact raster, elke cel linkt naar de beurspagina */
.fv2 .fairgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--line);border:1px solid var(--line)}


.fv2 .fairgrid a{display:grid;gap:4px;height:100%;padding:16px 18px;background:var(--surface);transition:background-color .25s}
.fv2 .fairgrid a:hover{background:var(--surface-raised)}
.fv2 .fairgrid__name{font:600 15px/1.3 var(--font-sans);letter-spacing:-.01em;transition:color .25s}
.fv2 .fairgrid a:hover .fairgrid__name{color:var(--acc)}
.fv2 .fairgrid__meta{font-size:12px;line-height:1.4;color:var(--ink-muted)}
/* Proef, ronde 2 (Nina): rustiger hero zonder knoppen en datumregel, foto zwakker, beurzenraster in twee kolommen. */
.fv2 .phero{min-height:min(64vh,600px);min-height:min(64dvh,600px)}
.fv2 .phero--city .phero__media img{opacity:.34;filter:grayscale(1) contrast(.95)}
.fv2 .phero--city .phero__media::after{background:linear-gradient(to top,rgba(20,19,17,.9) 0%,rgba(20,19,17,.2) 55%,rgba(20,19,17,0) 100%),linear-gradient(rgba(255,139,71,.42),rgba(163,60,0,.5))}
.fv2 .fairgrid{grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.fv2 .fairgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fv2 .fairgrid a{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 16px}
.fv2 .phero--city .phero__media img{object-position:50% 30%}
/* Proef, ronde 3: kerncijfers als één rustige rij in plaats van een tabel met kaders. */
.fv2 .keyfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px;margin:0;padding-top:28px;border-top:1px solid var(--line-strong)}
@media(min-width:900px){.fv2 .keyfacts{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:479px){.fv2 .keyfacts{grid-template-columns:minmax(0,1fr)}}
.fv2 .keyfact{display:grid;gap:10px;align-content:start}
.fv2 .keyfact dt{font:600 11px/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.fv2 .keyfact dd{margin:0}
.fv2 .keyfact__value{font:400 clamp(24px,2.2vw,32px)/1.15 var(--font-serif);letter-spacing:-.01em}
.fv2 .keyfact__value a{border-bottom:1px solid var(--acc)}
.fv2 .keyfact__value a:hover{color:var(--acc)}
.fv2 .keyfact__note{font-size:14px;line-height:1.5;color:var(--ink-muted);max-width:28ch}
.fv2 .brief__gap{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
@media(min-width:768px){.fv2 .cells:not(.cells--3) .cell:last-child:nth-child(odd){grid-column:1/-1}}

/* Proef, ronde 5: "Voor je boekt" als slider, foto links en tekst rechts.
   Overgang: de nieuwe foto schuift open als een gordijn (clip-path) en zoomt terug, de tekst komt regel per regel uit een blur.
   Zonder JS staan de slides onder elkaar; met reduced motion alleen een korte fade.
   Geldt voor alle .bx-pagina's: de beursfiches en sinds 26 oktober 2026 ook de venuepagina's. */
.bx .bslider{position:relative}
.bx .bslider__track{display:grid;gap:56px}
.js .bx .bslider__track{gap:0}
.bx .bslide{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.bx .bslide{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}
.js .bx .bslide{grid-area:1/1;visibility:hidden;pointer-events:none}
.js .bx .bslide.is-active,.js .bx .bslide.is-leaving{visibility:visible}
.js .bx .bslide.is-active{pointer-events:auto;z-index:2}
.js .bx .bslide.is-leaving{z-index:1}
.bx .bslide__media{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--charcoal-3)}
.bx .bslide__media picture,.bx .bslide__media img{display:block;width:100%;height:100%}
.bx .bslide__media img{object-fit:cover}
.bx .bslide__media figcaption{position:absolute;left:14px;bottom:12px;padding:4px 10px;background:rgba(20,19,17,.72);color:var(--on-dark-2);font:600 10px/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase}
.bx .bslide__copy{display:grid;gap:18px;align-content:center}
.bx .bslide__n{margin:0;font:500 13px/1 var(--font-sans);letter-spacing:.12em;color:var(--acc);font-variant-numeric:tabular-nums}
.bx .bslide__n span{color:var(--ink-muted)}
.bx .bslide__title{margin:0;font:400 clamp(26px,2.4vw,36px)/1.12 var(--font-serif)}
.bx .bslide__text{margin:0;font-size:16px;line-height:1.7;color:var(--ink-muted);max-width:44ch}
.bx .bslider__nav{display:none}
.js .bx .bslider__nav{display:flex;align-items:center;gap:12px;margin-top:36px}
.bx .bslider__bar{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.bx .bslider__bar i{position:absolute;inset:0;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--prog,.333));transition:transform .9s var(--bx-ease)}
.bx .bslider__btn{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--line-strong);border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.bx .bslider__btn:hover{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.bx .bslider__btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.bx .bslider__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:no-preference){
  .js .bx .bslide.is-active .bslide__media{animation:bs-curtain 1.15s var(--bx-ease) both}
  .js .bx .bslider[data-dir="prev"] .bslide.is-active .bslide__media{animation-name:bs-curtain-prev}
  .js .bx .bslide.is-active .bslide__media img{animation:bs-zoom 1.6s var(--bx-ease) both}
  .js .bx .bslide.is-leaving .bslide__media{animation:bs-dim 1.15s var(--bx-ease) both}
  .js .bx .bslide.is-active .bslide__copy>*{animation:bs-text-in .9s var(--bx-ease) both}
  .js .bx .bslide.is-active .bslide__copy>:nth-child(1){animation-delay:.25s}
  .js .bx .bslide.is-active .bslide__copy>:nth-child(2){animation-delay:.35s}
  .js .bx .bslide.is-active .bslide__copy>:nth-child(3){animation-delay:.45s}
  .js .bx .bslide.is-leaving .bslide__copy{animation:bs-text-out .5s var(--bx-ease) both}
  .js .bx .bslider.is-static .bslide .bslide__media,.js .bx .bslider.is-static .bslide .bslide__media img,.js .bx .bslider.is-static .bslide .bslide__copy>*{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .js .bx .bslide.is-active{animation:bs-fade .3s ease both}
  .js .bx .bslide.is-leaving{visibility:hidden}
}
@keyframes bs-curtain{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes bs-curtain-prev{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes bs-zoom{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes bs-dim{to{filter:brightness(.35)}}
@keyframes bs-text-in{from{opacity:0;transform:translateY(28px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes bs-text-out{to{opacity:0;transform:translateY(-16px);filter:blur(6px)}}
@keyframes bs-fade{from{opacity:0}}
/* Slide zonder eigen foto: zichtbare placeholder in hetzelfde formaat */
.bx .bslide__media--ph{display:grid;place-items:center;padding:24px;text-align:center;border:1px dashed var(--line-strong);background:var(--surface-raised)}
.bx .bslide__media--ph span{max-width:28ch;font:600 12px/1.5 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}

/* ==========================================================================
   SNELHEID en SHOWREEL (beurspagina's): overgenomen van kastenlab.be (event-design.html),
   omgezet naar de tokens. Beeld links (vastgepind op desktop), lijst rechts die van links binnenschuift;
   drie vierkante video's van stands, aan halve snelheid (beurs.js).
   ========================================================================== */
.bx .speed{display:grid;gap:40px;align-items:start}
@media(min-width:900px){.bx .speed{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px}.bx .speed__media{position:sticky;top:96px}}
.bx .speed__media{position:relative;margin:0;overflow:hidden;aspect-ratio:1/1;background:var(--surface-raised)}
.bx .speed__media picture,.bx .speed__media img{display:block;width:100%;height:100%}
.bx .speed__media img{object-fit:cover}
.bx .speed__media figcaption{position:absolute;left:14px;bottom:12px;padding:4px 10px;background:rgba(20,19,17,.72);color:var(--on-dark-2);font:600 10px/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase}
.bx .speed__copy{display:grid;gap:20px}
.bx .speed__title{margin:8px 0 0;font:italic 400 clamp(28px,3vw,44px)/1.15 var(--font-serif)}
.bx .speed__title strong{font-style:normal;font-weight:400;color:var(--acc)}
.bx .speed__lead{margin:0 0 12px;font-size:17px;line-height:1.6;color:var(--ink-muted);max-width:42ch}
.bx .speed__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.bx .speed__list li{padding:18px 0;border-bottom:1px solid var(--line)}
.bx .speed__list p{margin:0;font-size:15px;line-height:1.7;color:var(--ink-muted)}
.bx .speed__list strong{font-weight:600;color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
  .js .bx .speed__list li[data-reveal]{transform:translateX(-40px);filter:none;transition:opacity 1s var(--bx-ease),transform 1.2s var(--bx-ease);transition-delay:calc(var(--d,0) * 160ms)}
  .js .bx .speed__list li[data-reveal].is-in{transform:none}
}
.bx .reel{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.bx .reel{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bx .reel__item{display:grid;gap:10px;margin:0}
.bx .reel__frame{overflow:hidden;border:1.5px solid var(--line)}
.bx .reel__video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.bx .reel__label{font:600 11px/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}

/* ==========================================================================
   SAMENGEVOEGDE BEURSPAGINA (industriële beurzen in Antwerp Expo, 26 oktober 2026)
   Cellen direct onder een brief, en een tussenkop (h3 in de stijl van een h2) binnen dezelfde band.
   ========================================================================== */
.bx .brief+.cells{margin-top:56px}
.bx .sh--sub{margin-top:clamp(72px,9vw,120px)}
/* Primaire knop in een donkere band: oranje zoals in de hero (koper heeft op houtskool te weinig contrast). */
.bx [data-theme="dark"] .btn-primary{background:var(--ember);color:var(--charcoal)}
.bx [data-theme="dark"] .btn-primary:hover{background:var(--ivory);color:var(--charcoal)}

/* ==========================================================================
   STANDEN DIE WE BOUWDEN (27 oktober 2026): foto's van eigen standen (Des'Arch). Data: _data/standen.json, partial standen.njk.
   Uitgelicht (beursstandenpagina): mozaïek van tot acht foto's met de gegevens ernaast. Raster (Standenbouw): drie foto's per stand.
   ========================================================================== */
.bx .stand{display:grid;gap:28px}
.bx .stand__mosaic{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(120px,30vw,200px)}
.bx .stand__mosaic figure{margin:0;overflow:hidden;background:var(--surface-raised)}
.bx .stand__mosaic picture,.bx .stand__mosaic img{display:block;width:100%;height:100%}
.bx .stand__mosaic img{object-fit:cover;transition:transform .9s var(--bx-ease)}
.bx .stand__mosaic figure:hover img{transform:scale(1.03)}
.bx .stand__mosaic .is-lead{grid-column:span 2;grid-row:span 2}
.bx .stand__mosaic .is-tall{grid-row:span 2}
.bx .stand__meta .h3{margin:0 0 18px}
.bx .stand__facts{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0 0 18px;padding:14px 0;border-block:1px solid var(--line)}
.bx .stand__facts dt{color:var(--ink-muted);font:600 11px/1.9 var(--font-sans);letter-spacing:.14em;text-transform:uppercase}
.bx .stand__facts dd{margin:0}
.bx .stand__meta p{margin:0;color:var(--ink-muted);line-height:1.6}
.bx .stand-foot{margin-top:40px}
@media (min-width:900px){
  .bx .stand--featured{grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:48px;align-items:end}
  .bx .stand--featured .stand__mosaic{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(130px,11vw,190px)}
}
.bx .stands{display:grid;gap:64px 32px}
.bx .stands .stand__mosaic{grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,clamp(100px,22vw,170px));grid-auto-rows:0}
.bx .stands .stand__mosaic .is-lead{grid-column:1;grid-row:1/span 2}
@media (min-width:900px){.bx .stands{grid-template-columns:repeat(2,minmax(0,1fr))}.bx .stands--single{grid-template-columns:minmax(0,1fr);max-width:760px}.bx .stands .stand__mosaic{grid-template-rows:repeat(2,clamp(110px,10vw,170px))}}