/* ==========================================================================
   Moors NV — style.css
   Branding door Debora (No Nonsense Design), één op één overgenomen van de WordPress-site
   (Danilo 13/9/26): goud, leigrijs, zand op wit; Roboto (tekst), Inter (koppen),
   changeling-neo (Adobe Fonts) alleen voor de drie pijlers onder "Waarom Moors NV?" (klant 15/9/26: de rest in Roboto). Layout volgt de Kadence-
   opbouw sectie voor sectie, met iets meer witruimte.
   ========================================================================== */

@font-face{font-family:'Roboto';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/roboto-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Kadence-palette van Debora */
  --gold:#b58422; --gold-dark:#8a6619; --gold-soft:rgba(181,132,34,.12);
  --slate:#3f5050; --slate-dark:#2b3638; --ink:#2b3638;
  --muted:#6b7d7d; --soft:#9eaaaa;
  --sand:#dcd7c9; --sand-light:#ebe9e0;
  --bg:#ffffff;
  --tint:#fbfaf7;          /* rgba(235,233,224,.2) op wit: de lichte wisselsectie van de oude site */
  --tint-2:#f8f7f4;        /* rgba(220,215,201,.2) op wit */
  --line:#e6e2d8; --line-strong:#cfc9b8;
  --font-body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-head:'Inter',var(--font-body);
  --font-display:'changeling-neo',var(--font-head);
  --radius:3px;
  --container:1290px; --container-narrow:860px; --pad:32px;
  --s-section:5rem; --s-tight:3rem;
  --hdr-h:112px;
  --nav-knop:268px;        /* breedte van de knop Service aanvraag, de thema-schakelaar en de menu-gaps: de tweede rij krijgt die als marge rechts, zodat beide rijen op dezelfde as eindigen */
}

/* --- reset --- */
*{box-sizing:border-box;margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font:400 16px/1.7 var(--font-body);color:var(--ink);background:var(--bg);min-height:100vh;display:flex;flex-direction:column;position:relative}
main{flex:1 0 auto}
.site-footer{flex-shrink:0}
a{color:inherit;text-decoration:none}
a[href^="tel:"]{white-space:nowrap}
img,svg{display:block;max-width:100%}
img{height:auto}
ul{list-style:none}
strong{font-weight:700}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.container--narrow{max-width:var(--container-narrow)}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--slate);color:#fff;padding:.5rem 1rem;z-index:100}
.skip-link:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* --- typografie (Kadence-instellingen van de oude site) --- */
h1,h2,h4{font-family:var(--font-head);font-weight:700;color:var(--slate);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(1.9rem,3.4vw,2.375rem)}
/* kleine hoofdletter-h2 van de slotsecties (Meer dan enkel …, Over Moors NV, Past een totaalproject …): Inter 20px */
.h2-klein,.meer h2{font-size:1.25rem;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(1.55rem,2.6vw,1.875rem);letter-spacing:0}
h3{font-family:var(--font-body);font-weight:700;font-size:1.35rem;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
h4{font-size:1.05rem}
p{max-width:70ch}
p.lead{font-size:1.05rem;line-height:1.6;color:var(--ink);max-width:60ch}
.eyebrow{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.tekst a:not(.btn),.prose a:not(.btn){color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.tekst a:not(.btn):hover,.prose a:not(.btn):hover{color:var(--gold)}
.tekst p+p,.prose p+p{margin-top:1rem}
.gecentreerd{text-align:center}
.gecentreerd p{margin-left:auto;margin-right:auto}

/* --- knoppen: 3px, vet, kleine letterspatiëring, pijl (Kadence) --- */
.btn{display:inline-flex;align-items:center;gap:.55rem;height:44px;padding:0 1rem;border-radius:var(--radius);font-weight:600;font-size:1rem;letter-spacing:0;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn svg{width:16px;height:16px;flex:none;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
/* Alle knoppen gevuld, geen outline meer (Danilo 15/9/26): de eerste knop goud, de tweede leigrijs,
   en bij hover wisselen ze van kleur. Knoptekst in zand (#ebe9e0), zoals Kadence.
   .btn-outline blijft als klassenaam bestaan (staat in alle pagina's) maar is nu de gevulde tweede knop. */
.btn-accent,.btn-primary{background:var(--gold);color:var(--sand-light)}
.btn-accent:hover,.btn-primary:hover{background:var(--slate);color:var(--sand-light)}
.btn-outline{background:var(--slate);color:var(--sand-light)}
.btn-outline:hover{background:var(--gold);color:var(--sand-light)}
/* de gouden knop hovert ook op een foto (hero, beeldband) gewoon naar leigrijs, nooit naar wit; geen randje op de tweede knop (Danilo 15/9/26) */


.btn-sm{height:40px;padding:0 1rem;font-size:.8rem}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.actions--center{justify-content:center}

/* --- header: logo links, rechts twee rijen die op dezelfde as eindigen, de knop Service aanvraag
       ernaast (Danilo 13/9/26). Sinds 15/9/26 een transparante laag bovenop de fotohero van elke
       pagina (niet sticky): witte links, licht logo, een donker verloop in de hero houdt het leesbaar. --- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;background:transparent;color:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:var(--hdr-h);padding-top:12px;padding-bottom:12px;position:relative}
.logo img{height:46px;width:auto}
.nav{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.nav-rij--onder{margin-right:var(--nav-knop)}
.nav-rij{display:flex;align-items:center;gap:1.4rem}
.nav-rij>a,.nav-dropdown__trigger{position:relative;padding:.25rem 0;color:var(--ink);font-size:.95rem;font-weight:400;text-transform:lowercase;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
.nav-rij>a:hover,.nav-dropdown__trigger:hover,.nav-rij>a[aria-current="page"],.nav-dropdown__trigger.is-current,.nav-dropdown__trigger[aria-expanded="true"]{color:var(--gold-dark)}
.nav-rij--onder>a{color:var(--ink);font-weight:700;text-transform:none;font-size:.95rem}
.nav-rij--onder>a:hover,.nav-rij--onder>a[aria-current="page"]{color:var(--gold-dark)}
/* knop Service aanvraag: goud, hovert naar leigrijs zoals de drie doelgroepbalken, in licht én donker (Danilo 15/9/26) */
.nav-rij>a.btn.nav-service{text-transform:none;height:40px;padding:0 1.1rem;font-size:.85rem;color:var(--sand-light);background:var(--gold);letter-spacing:.03em;margin:0}
.nav-rij>a.btn.nav-service:hover{background:#3f5050;color:var(--sand-light)}
.nav-dropdown__trigger svg{width:13px;height:13px;transition:transform .2s}
.nav-dropdown__trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
/* megamenu "voor wie": paneel over de volle headerbreedte, links label + pijl-links, rechts een projectfoto */
.nav-dropdown{position:static}
/* referentiekader is .header-inner: het paneel loopt van de logokant tot de rechterrand, onder de headerlijn */
.nav-mega{position:absolute;left:0;right:0;top:calc(100% + 1px);z-index:30;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:2rem;background:#f7f5f0;border-radius:0 0 12px 12px;box-shadow:0 30px 50px -20px rgba(43,54,56,.35)}
.nav-mega[hidden]{display:none}
.nav-mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-mega__links{padding:1.6rem 2rem 2rem 1rem;display:flex;flex-direction:column}
.nav-dropdown__kop{padding:.2rem 0 1rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-mega__links a{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 0;font-size:1.02rem;color:var(--ink)}
.nav-mega__links a svg{width:15px;height:15px}
.nav-mega__links a:hover,.nav-mega__links a[aria-current="page"]{color:var(--gold-dark)}
.nav-mega__foto{padding:1.4rem 1.4rem 1.4rem 0}
.nav-mega__foto img{width:100%;height:300px;object-fit:cover;border-radius:12px}
.nav-toggle{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.5);border-radius:var(--radius);background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:20px;height:2px;background:#fff;transition:transform .2s,opacity .2s,background .2s}
body.is-nav-open .nav-toggle{border-color:var(--line-strong)}
body.is-nav-open .nav-toggle span{background:var(--ink)}
.lightsw--mobiel{border-color:rgba(255,255,255,.45);color:#fff}
.lightsw--mobiel .bulb{stroke:#fff}
.lightsw--mobiel .tr{background:rgba(255,255,255,.35)}
.nav-mobile-extras{display:none}
/* desktopmenu op de foto: witte links, hover in licht goud. Staat bewust NA de algemene menuregels, anders wint
   color:var(--ink) daar en is het menu in de lichte modus onleesbaar (fout van 15/9/26) */
@media (min-width:1024px){
  /* hiërarchie (Danilo 15/9/26, variant D): rij 1 kleine hoofdletters met letterspatiëring en iets lichter,
     rij 2 de disciplines groot en vet in Inter; nowrap zodat "Ramen & Deuren" nooit breekt */
  .nav-rij>a,.nav-dropdown__trigger,.nav-rij--onder>a{color:#fff;white-space:nowrap}
  .nav-rij>a,.nav-dropdown__trigger{text-transform:uppercase;font-size:.72rem;font-weight:500;letter-spacing:.16em;color:rgba(255,255,255,.85)}
  .nav-rij--onder>a{font-family:var(--font-head);text-transform:none;font-size:.95rem;font-weight:700;letter-spacing:-.01em}
  .nav-rij{gap:1.7rem}
  .nav-rij--onder{gap:1.4rem}
  .nav{gap:.7rem}
  .nav-rij>a:hover,.nav-dropdown__trigger:hover,.nav-rij>a[aria-current="page"],.nav-dropdown__trigger.is-current,.nav-dropdown__trigger[aria-expanded="true"],.nav-rij--onder>a:hover,.nav-rij--onder>a[aria-current="page"]{color:#e2b552}
  .nav-rij .lightsw{border-color:rgba(255,255,255,.45);color:#fff}
  .nav-rij .lightsw .bulb{stroke:#fff}
  .nav-rij .lightsw .tr{background:rgba(255,255,255,.35)}
}

@media (max-width:1180px){:root{--nav-knop:0px}}
@media (max-width:1023px){
  :root{--hdr-h:84px;--pad:20px;--s-section:3.5rem;--s-tight:2.5rem}
  .logo img{height:44px}
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:0;background:var(--bg);z-index:40;padding:6rem var(--pad) 3rem;overflow:auto;transform:translateX(100%);transition:transform .25s ease;align-items:stretch;gap:0}
  .nav.is-open{transform:none}
  body.is-nav-open{position:fixed;width:100%;overflow:hidden}
  body.is-nav-open .nav-toggle{position:fixed;top:19px;right:var(--pad);z-index:50}
  body.is-nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.is-nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.is-nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-rij{flex-direction:column;align-items:stretch;gap:0}
  .nav-rij>a,.nav-dropdown__trigger{font-size:1.15rem;padding:.8rem 0;border-bottom:1px solid var(--line);width:100%;justify-content:space-between;text-transform:none}
  .nav-rij--onder{margin-top:1.4rem;padding-top:.4rem}
  .nav-rij--onder::before{content:"Onze specialisaties";display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:.4rem 0}
  .nav-rij>a.btn.nav-service{display:none}
  .nav-mega{position:static;display:block;box-shadow:none;background:var(--tint-2);padding:.4rem 0 .6rem}
  .nav-mega[hidden]{display:none}
  .nav-mega::before{display:none}
  .nav-mega__links{padding:0}
  .nav-dropdown__kop{padding:.4rem 1rem}
  .nav-mega__links a{padding:.6rem 1rem}
  .nav-mega__foto{display:none}
  .nav-mobile-extras{display:flex;flex-direction:column;gap:.7rem;margin-top:2rem}
  .nav-mobile-extras .btn{justify-content:center}
}

/* --- secties --- */
.sectie{padding:var(--s-section) 0}
.sectie--tight{padding:var(--s-tight) 0}
.bg-tint{background:var(--tint)}
.bg-tint-2{background:var(--tint-2)}
.bg-sand{background:var(--sand-light)}
.sec-head{max-width:70ch;margin-bottom:2.5rem}
.sec-head h2+p{margin-top:.8rem}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head--center p{margin-left:auto;margin-right:auto}
.kop-links{margin-bottom:2rem}
/* --- hero: op de home de achtergrondslider met het donkere tekstvlak (Kadence-hero), op elke andere
       pagina een foto op volle breedte met de kop erop (includes/hero.php, 15/9/26). De header ligt
       erbovenop, dus de hero begint bovenaan de pagina en houdt bovenaan ruimte vrij voor het menu. --- */
.hero{position:relative;min-height:min(100vh,900px);display:flex;align-items:center;color:#fff;isolation:isolate;overflow:hidden;background:var(--slate-dark)}
.hero__slides,.hero__foto{position:absolute;inset:0;z-index:-2}
.hero__foto img{width:100%;height:100%;object-fit:cover}
/* donker verloop bovenaan zodat het witte menu op elke foto leesbaar blijft */
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:360px;z-index:-1;background:linear-gradient(to bottom,rgba(20,26,27,.94),rgba(20,26,27,.7) 35%,rgba(20,26,27,0))}
/* slides vloeien over, zonder inzoom (inzoom weg op 16/9/26, Danilo) */
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero__slide.is-actief{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover}
/* de hero-inhoud volgt de gewone container (Danilo 15/9/26: "op een normale afstand, waar mensen het tekstblok verwachten") */
.hero .container{width:100%;padding-top:calc(var(--hdr-h) + 3rem);padding-bottom:5rem;display:flex;justify-content:flex-start}
/* paginahero: lager dan de home, verloop van links zodat de kop op elke foto leest */
/* home: volledig scherm op desktop, geen plafond (Danilo 15/9/26); svh houdt rekening met de browserbalk */
.hero--slider{min-height:100vh;min-height:100svh}
.hero--pagina{min-height:min(74vh,700px)}
.hero--pagina::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(43,54,56,.86),rgba(43,54,56,.5) 55%,rgba(43,54,56,.2))}
.hero--klein{min-height:min(52vh,460px)}
.hero__inhoud{max-width:800px}
.hero__inhoud .eyebrow{color:var(--gold);font-size:1.05rem}
.hero__inhoud h1{color:#fff;font-size:clamp(2rem,3.6vw,2.75rem);margin:0 0 1rem}
.hero__inhoud .lead{color:rgba(255,255,255,.9);font-size:1.1rem;max-width:58ch}
.hero__inhoud .actions{margin-top:1.6rem}
/* de kop bouwt op bij het laden, gestaffeld (uit bij bewegingsreductie) */
.hero__inhoud>*,.hero__paneel>*{animation:heroin .8s cubic-bezier(.2,.7,.2,1) both}
.hero__inhoud>:nth-child(2),.hero__paneel>:nth-child(2){animation-delay:.1s}
.hero__inhoud>:nth-child(3),.hero__paneel>:nth-child(3){animation-delay:.2s}
.hero__inhoud>:nth-child(4),.hero__paneel>:nth-child(4){animation-delay:.3s}
@keyframes heroin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* het donkere tekstvlak van de oude site, gecentreerd, met glaseffect en een gouden lijn bovenaan */
/* links uitgelijnd, brede lage rechthoek (Danilo 13/9/26) */
/* zwart doorschijnend zoals de oude site, 12px rond, geen gouden rand (Danilo 13/9/26) */
.hero__paneel{width:min(100%,860px);text-align:left;background:rgba(0,0,0,.72);border-radius:12px;padding:2.2rem 2.8rem 2.4rem}
.hero__paneel .eyebrow{color:var(--gold);font-size:1.6rem;margin-bottom:.5rem}
.hero__paneel h1{color:#fff;font-family:var(--font-body);font-size:clamp(1.9rem,3.2vw,2.375rem);margin:0 0 .9rem;max-width:26ch}
.hero__paneel p{font-size:1.02rem;max-width:66ch;margin:0;color:rgba(255,255,255,.92)}
.hero__paneel .actions{justify-content:flex-start;margin-top:1.4rem}
.hero__paneel .btn-accent{font-size:.9rem}
@media (max-width:600px){.hero__paneel{padding:2rem 1.4rem 2.2rem;text-align:left}.hero__paneel .actions{justify-content:flex-start}.hero__paneel h1{margin-left:0}}

/* --- "Wij bouwen voor": vierkante foto met grotere gouden knopbalk eronder (groter gemaakt 16/9/26, variant A) --- */
.doelgroepen{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.dg{display:flex;flex-direction:column}
.dg__foto{aspect-ratio:1;overflow:hidden}
.dg__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.dg:hover .dg__foto img{transform:scale(1.03)}
.dg__balk{display:flex;align-items:center;justify-content:space-between;background:var(--gold);color:var(--sand-light);padding:1.1rem 1.6rem;font-family:var(--font-body);font-weight:600;text-transform:uppercase;font-size:1.15rem;border-radius:0 0 0 12px}
.dg__balk svg{width:20px;height:20px;transition:transform .2s}
.dg:hover .dg__balk{background:var(--slate)}
.dg:hover .dg__balk svg{transform:translateX(4px)}

/* --- expertises: lijst met wisselende foto (Danilo 16/9/26, variant B; de zes kaarten van de oude site
       zijn vervangen). Links de zes disciplines als grote titels, rechts één foto die wisselt bij hover of focus
       (motion.js). De actieve discipline krijgt een gouden lijn links en toont zijn korte tekst. --- */
.expo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4rem;align-items:stretch}
.expo__lijst{display:flex;flex-direction:column;border-top:1px solid var(--line-strong)}
.expo__item{display:block;padding:1.4rem 0;border-bottom:1px solid var(--line-strong);color:var(--ink);position:relative;transition:padding .35s cubic-bezier(.2,.8,.2,1)}
.expo__item::before{content:"";position:absolute;left:0;top:1.6rem;bottom:1.6rem;width:3px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.expo__item h3{font-family:var(--font-head);font-size:1.9rem;color:var(--slate);letter-spacing:-.02em;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:color .25s}
.expo__item h3 svg{width:22px;height:22px;flex:none;color:var(--gold);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.expo__item p{font-size:.95rem;color:var(--muted);max-width:44ch;max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .7s cubic-bezier(.2,.8,.2,1),opacity .6s,margin-top .5s}
.expo__item.is-actief{padding-left:1.2rem}
.expo__item.is-actief::before{transform:scaleY(1)}
.expo__item.is-actief h3{color:var(--gold-dark)}
.expo__item.is-actief h3 svg{opacity:1;transform:none}
.expo__item.is-actief p{max-height:8rem;opacity:1;margin-top:.5rem}
.expo__foto{position:relative;overflow:hidden;border-radius:var(--radius);min-height:520px;margin:0}
.expo__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.expo__foto img.is-actief{opacity:1}
.expo__foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem 1.6rem 1.2rem;background:linear-gradient(to top,rgba(43,54,56,.8),rgba(43,54,56,0));color:#fff;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
/* mobiel en tablet: veegmodus (Danilo 16/9/26): elke discipline een kaart met eigen foto, horizontaal scrollen met snap,
   een stuk van de volgende kaart blijft zichtbaar als uitnodiging om te vegen; de grote foto en de hover-logica vallen weg */
.expo__item-foto{display:none}
@media (max-width:900px){
  .expo{display:block}
  .expo__foto{display:none}
  .expo__lijst{display:flex;flex-direction:row;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none;border-top:0;margin:0 calc(-1*var(--pad));padding:0 var(--pad) .5rem}
  .expo__lijst::-webkit-scrollbar{display:none}
  .expo__item{flex:0 0 82%;scroll-snap-align:start;border:1px solid var(--line-strong);border-radius:var(--radius);padding:0 0 1.3rem;overflow:hidden;transition:none}
  .expo__item::before{display:none}
  .expo__item.is-actief{padding-left:0}
  .expo__item-foto{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
  .expo__item h3,.expo__item.is-actief h3{font-size:1.3rem;color:var(--slate);padding:1rem 1.2rem 0}
  .expo__item h3 svg,.expo__item.is-actief h3 svg{opacity:1;transform:none}
  .expo__item p,.expo__item.is-actief p{max-height:none;opacity:1;margin-top:.4rem;padding:0 1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .expo__item,.expo__item::before,.expo__item p,.expo__foto img{transition:none}

}

/* --- "Waarom Moors NV?": één omkaderd blok met drie iconen --- */
.waarom-box{border:1px solid var(--gold);border-radius:12px;padding:1rem 2.5rem 3rem;text-align:center}
.waarom-box h2{margin-bottom:2.2rem}
.pijlers{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.pijler img{height:120px;width:auto;margin:0 auto 1rem}
.pijler h3{font-family:var(--font-display);font-size:1.5rem;font-weight:400;text-transform:uppercase;letter-spacing:.02em;color:var(--slate);margin-bottom:.4rem}
.pijler p{font-size:.9rem;color:var(--ink);margin:0 auto}

/* --- "Projecten die spreken": kop links, galerij in twee kolommen rechts --- */
.projecten-split{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:3rem;align-items:start}
/* galerij: één groot beeld links, vier kleine, met de discipline als bijschrift (Danilo 13/9/26: deze versie houden) */
.galerij-groot{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:1rem}
.galerij-groot figure{position:relative;overflow:hidden;border-radius:var(--radius);margin:0}
.galerij-groot img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.galerij-groot figure:hover img{transform:scale(1.04)}
.galerij-groot .groot{grid-column:span 2;grid-row:span 2}
.galerij-groot figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.2rem .9rem;background:linear-gradient(to top,rgba(43,54,56,.75),rgba(43,54,56,0));color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sec-head--split{max-width:none;display:grid;grid-template-columns:1fr auto;align-items:end;gap:2rem;margin-bottom:2rem}

/* --- "Waarom kiezen voor Moors NV?": drie plus twee kolommen, gecentreerde slotalinea --- */
/* gemeten op de oude site: elk blok een 1px kader in donker goud, 32px padding, geen afronding */
.argumenten-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem}
.argument-kol{grid-column:span 2;border:1px solid var(--gold-dark);padding:2rem}
.argument-kol--breed{grid-column:span 3}
.argument-kol h3{font-family:var(--font-body);font-size:1.25rem;color:var(--slate);margin-bottom:.6rem}
.argument-kol p{font-size:1rem;color:var(--slate)}
.slot-cta{max-width:640px;margin:3.5rem auto 0;text-align:center}
.slot-cta p{font-size:1.5rem;line-height:1.45;margin:0 auto 1.4rem}

/* --- split: tekst en foto naast elkaar --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.split__foto--staand img{aspect-ratio:3/4}
.split__tekst h2{margin-bottom:1rem}
.split__tekst .actions{margin-top:1.4rem}
.split__tekst p+p{margin-top:1rem}
.split--omgekeerd .split__foto{order:2}

/* --- dienstpagina (Kadence-opbouw) --- */
.voordelen{display:flex;flex-direction:column;gap:1.2rem}
.voordeel{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:2rem;align-items:center;padding:1.6rem 1.8rem;border:1px solid var(--ink)}
.voordeel:nth-child(odd){background:var(--sand-light)}
.voordeel:nth-child(even){background:var(--tint-2)}
.voordeel h3{font-size:1.5rem;margin-bottom:.5rem}
.voordeel p{font-size:1rem}
.voordeel img{width:200px;aspect-ratio:1;object-fit:cover;border-radius:20px}
.expertise{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:center}
.expertise__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.expertise__grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}
.expertise__grid .logo-vak{display:flex;align-items:center;justify-content:center;padding:1.5rem}
.expertise__grid .logo-vak img{aspect-ratio:auto;width:80%;object-fit:contain}
.proces{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:4rem;align-items:start}
.stappen{display:flex;flex-direction:column;margin-top:1.5rem}
.stap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.stap b{font-family:var(--font-body);font-size:1rem;font-weight:400;color:var(--ink);text-transform:uppercase}
.stap p{font-size:.9rem}
.proces__foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
.meer{align-items:center}

/* --- doelgroeppagina --- */
.fotoraster{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:center}
.fotoraster img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}
.fotoraster .logo-vak{display:flex;align-items:center;justify-content:center;padding:1.5rem}
.fotoraster .logo-vak img{aspect-ratio:auto;width:80%;object-fit:contain}
.argumenten-lijn{display:flex;flex-direction:column;gap:1rem}
.argumenten-lijn div{background:var(--tint-2);padding:1rem}
.argumenten-lijn h3{font-family:var(--font-head);font-size:.95rem;color:var(--slate);margin-bottom:.4rem}
.argumenten-lijn p{font-size:.9rem}
.tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tegels a{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--radius)}
.tegels img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tegels a:hover img{transform:scale(1.04)}
.tegels span{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .7rem;background:linear-gradient(to top,rgba(43,54,56,.8),rgba(43,54,56,0));color:var(--sand-light);font-family:var(--font-head);font-weight:700;font-size:1rem;text-align:center}
.zandkaart{background:var(--tint);padding:3rem 3rem 3rem 4rem;border-radius:0 32px 32px 0}
.zandkaart h3{font-family:var(--font-head);font-size:1.15rem;color:var(--slate);margin-bottom:.8rem}
.zandkaart p{font-size:.95rem}
.zandkaart .btn{margin-top:1.2rem}
.twee-kolom{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:0;align-items:stretch}
.twee-kolom>div:first-child{padding:3rem 3rem 3rem 0}

/* --- checklist en infoboxen (totaalprojecten) --- */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 2rem}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem}
.checklist svg{width:20px;height:20px;flex:none;color:var(--gold);margin-top:.15rem}
.infoboxen{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.infobox{background:var(--tint);border:1px solid var(--gold);padding:1.5rem}
.infobox h3{font-family:var(--font-head);font-size:1.25rem;font-weight:300;color:var(--gold);margin-bottom:.6rem}
.infobox p{font-size:1rem;color:var(--muted)}
.zandkaart--rond{background:var(--tint);border-radius:16px;padding:2rem}

/* --- over ons --- */
.dna{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.dna li{border:1px solid var(--gold);border-radius:12px;background:var(--tint);padding:1rem;text-align:center;font-family:var(--font-body);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.tijdlijn{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;position:relative;padding-top:2rem;margin-top:.5rem}
.tijdlijn::before{content:"";position:absolute;left:0;right:0;top:.5rem;height:1px;background:var(--gold)}
.tijdlijn li{position:relative}
.tijdlijn li::before{content:"";position:absolute;left:0;top:-1.95rem;width:11px;height:11px;border-radius:50%;background:var(--gold)}
.tijdlijn b{display:block;font-family:var(--font-head);font-size:1.5rem;color:var(--slate);margin-bottom:.4rem}
.tijdlijn p{font-size:.92rem}
.partners{display:flex;flex-wrap:wrap;gap:1rem 3rem;align-items:center;padding:1.2rem 0}
.partners span{color:var(--muted);font-size:.95rem}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.team img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);margin-bottom:.8rem}
.team figcaption b{display:block;color:var(--slate)}
.team figcaption span{color:var(--muted);font-size:.9rem}

/* --- realisaties --- */
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.filter a{padding:.25rem .8rem;border:1px solid var(--gold);border-radius:0;font-size:.9rem;color:var(--gold-dark)}
.filter a:hover,.filter a[aria-current="page"]{background:var(--gold);border-color:var(--gold);color:var(--sand-light)}
.projecten{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.project{display:block;border:5px solid var(--sand-light)}
.project__foto{aspect-ratio:4/3;overflow:hidden;margin-bottom:0}
.project__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.project:hover .project__foto img{transform:scale(1.03)}
.project__balk{background:var(--sand-light);padding:.5rem .6rem}
.project .tag{font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark)}
.project h3{font-family:var(--font-head);font-size:1rem;color:var(--slate);margin:0}
.project p{font-size:.85rem;color:var(--muted);margin-top:.1rem}
.leeg{padding:2rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--muted)}
.galerij{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.galerij figure{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius)}
.galerij img{width:100%;height:100%;object-fit:cover}
.galerij figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1rem .7rem;background:linear-gradient(to top,rgba(43,54,56,.75),rgba(43,54,56,0));color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.project-info{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:4rem;align-items:start}
.specs{border-top:1px solid var(--line)}
.specs div{display:grid;grid-template-columns:130px 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.specs dt{color:var(--muted)}
.specs dd a{color:var(--gold-dark)}
.project-galerij{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.project-galerij img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}

/* --- contact en service (Kadence-opbouw: foto links, formulier rechts, drie kaarten) --- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4rem;align-items:start}
.contact-grid__foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
.contact-grid__form>p{font-size:1.5rem;line-height:1.4;margin-bottom:1.6rem}
.form-grid{display:grid;gap:1rem}
.form-row{display:flex;flex-direction:column;gap:.35rem}
.form-row--2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{font-family:var(--font-body);font-size:.85rem;font-weight:700;color:var(--ink);letter-spacing:.02em}
label .verplicht{color:var(--gold)}
/* gemeten op de oude contactpagina: 12px rond, 1px #cbd5e0, lichte zandtint */
input,select,textarea{width:100%;height:44px;padding:0 .9rem;border:1px solid #cbd5e0;border-radius:12px;background:var(--tint);font-size:.95rem;color:var(--ink);transition:border-color .2s,box-shadow .2s}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7d7d' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:16px;padding-right:2.4rem}
textarea{height:auto;min-height:150px;padding:.7rem .9rem;resize:vertical;border-radius:12px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
input::placeholder,textarea::placeholder{color:var(--soft)}
.form-consent{display:flex;gap:.7rem;align-items:flex-start;font-family:var(--font-body);font-size:.88rem;font-weight:400;letter-spacing:0;color:var(--muted)}
.form-consent input{width:18px;height:18px;margin-top:.2rem;flex:none;accent-color:var(--gold)}
.form-consent a{color:var(--gold-dark);text-decoration:underline}
.form-grid button[type="submit"]{width:100%;justify-content:center;height:44px}
.form-status{font-size:.95rem;min-height:1.4rem}
.form-status.is-error{color:#9b2c2c}
.js-turnstile-target{min-height:65px}
.infokaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.infokaart{background:var(--bg);border:1px solid var(--slate);padding:2rem}
.infokaart h2{font-size:1.25rem;margin-bottom:1rem}
.infokaart ul{display:flex;flex-direction:column;gap:.8rem}
.infokaart li span{display:block;font-family:var(--font-body);font-size:.8rem;color:var(--ink);letter-spacing:.04em}
.infokaart li a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.infokaart li a:hover{color:var(--gold-dark)}
.infokaart li b{display:block;color:var(--slate);font-weight:700}
.infokaart .btw{font-size:.85rem;color:var(--muted)}

/* --- servicevoorwaarden (15/9/26): het papieren document als pagina, gouden balken zoals op het papier --- */
.doc h2{margin-bottom:.8rem}
.doc__kaart{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:1.5rem 1.8rem;border:1px solid var(--line-strong);border-radius:var(--radius);margin-bottom:2.5rem;font-size:.92rem;line-height:1.6}
.doc__kaart b{display:block;font-family:var(--font-head);font-size:1.05rem;color:var(--slate);margin-bottom:.3rem}
.doc__bedrijf a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.doc__titel{text-align:right}
.doc__titel b{text-transform:uppercase;letter-spacing:.04em}
.doc__titel small{display:block;margin-top:.4rem;color:var(--muted)}
.doc__balk{font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--sand-light);background:var(--gold);padding:.55rem 1rem;margin:2.2rem 0 1rem;border-radius:var(--radius)}
.doc__lijst{list-style:disc;padding-left:1.4rem;display:flex;flex-direction:column;gap:.45rem}
.doc__lijst li{padding-left:.2rem}
.doc__lijst a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}
.doc p+.doc__lijst{margin-top:.8rem}
.form-consent--akkoord{padding:1rem 1.2rem;border:1px solid var(--gold);border-radius:var(--radius);color:var(--ink);font-size:.92rem}
.form-datum{font-size:.85rem;color:var(--muted)}
@media (max-width:600px){.doc__kaart{grid-template-columns:1fr;gap:1rem}.doc__titel{text-align:left}}

/* --- prose (privacybeleid) --- */
.prose{max-width:var(--container-narrow);margin:0 auto}
.prose h2{font-size:1.4rem;margin:2.4rem 0 .8rem}
.prose h3{font-family:var(--font-head);font-size:1.1rem;color:var(--slate);margin:1.6rem 0 .5rem}
.prose ul{list-style:disc;padding-left:1.4rem;margin:.6rem 0 1rem}
.prose ol{list-style:decimal;padding-left:1.4rem;margin:.6rem 0 1.5rem}
.prose li+li{margin-top:.3rem}

/* --- footer zoals Kadence: licht, lijn erboven, koppen in het display-font --- */
.site-footer{background:var(--tint);border-top:1px solid var(--line-strong);padding:3.5rem 0 1.5rem;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr .9fr 1.3fr;gap:2.5rem}
.footer-logo img{width:150px;height:auto;margin-bottom:.9rem}
.footer-merk .btn{height:36px;font-size:.78rem;padding:0 .9rem;letter-spacing:.03em}
.site-footer h2{font-family:var(--font-body);font-size:.95rem;letter-spacing:.06em;color:var(--gold);margin-bottom:.8rem;text-transform:uppercase}
.site-footer ul{display:flex;flex-direction:column;gap:.35rem;font-size:.92rem}
.site-footer ul a{display:inline-flex;align-items:center;gap:.3rem}
.site-footer ul a:hover{color:var(--gold-dark)}
.site-footer ul a svg{width:13px;height:13px}
.footer-specialisaties ul{display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1rem}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:1rem;font-size:.8rem;color:var(--muted)}
.footer-bottom a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--gold)}
.footer-bottom a:hover{color:var(--gold-dark)}

/* --- coming soon: één op één naar de Kadence-maintenance-page van de oude site (gemeten 15/9/26) --- */
.cs-body{margin:0;background:var(--bg);font-family:var(--font-body);font-size:.95rem;line-height:1.4;color:var(--ink)}
.cs-bg{position:relative;background:var(--bg) url('/assets/img/villa-zwarte-gevel-avond-1500w.webp') 40% 5%/cover no-repeat}
.cs-overlay{position:absolute;inset:0;background:var(--gold);opacity:.2}
.cs-row{position:relative;max-width:55%;margin:0 auto;min-height:100vh;display:grid;align-content:center}
.cs-card{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:60px 24px;border-radius:6px;box-shadow:0 0 60px 5px rgba(0,0,0,.2);text-align:center}
.cs-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:6px;background:var(--sand);opacity:.9}
.cs-logo{max-width:300px;width:100%;height:auto}
.cs-titel{margin:0;font:inherit;font-size:.95rem;color:inherit;letter-spacing:0;text-transform:none}
.cs-titel em{font-style:italic}
.cs-lijst{list-style:none;margin:48px 0;padding:0;display:grid;gap:5px;text-align:left;font-size:clamp(.8rem,.73rem + .217vw,.9rem)}
.cs-lijst li{display:flex;align-items:center;gap:10px}
.cs-lijst svg{width:20px;height:20px;flex:none}
.cs-lijst a{color:var(--gold);text-decoration:none}
.cs-lijst a:hover{color:var(--gold-dark)}
.cs-contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem 4rem;font-size:clamp(.8rem,.73rem + .217vw,.9rem)}
.cs-contact p{margin:0}
.cs-adres{text-align:left}
.cs-gegevens{text-align:right}
.cs-gegevens a{color:var(--ink);text-decoration:underline}
@media (max-width:1024px){.cs-row{max-width:80%}.cs-titel{font-size:16px}}
@media (max-width:767px){.cs-row{max-width:100%}.cs-titel{font-size:.9rem}.cs-lijst{font-size:12px}}

/* --- responsive --- */
@media (max-width:1200px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:900px){
  .doelgroepen,.pijlers,.dna,.team,.infoboxen,.infokaarten,.tegels{grid-template-columns:1fr 1fr}
  .split,.expertise,.proces,.contact-grid,.project-info,.projecten-split,.twee-kolom{grid-template-columns:1fr;gap:2.5rem}
  .twee-kolom>div:first-child{padding:0}
  .zandkaart{border-radius:16px;padding:2rem}
  .split--omgekeerd .split__foto{order:0}
  .proces__foto{display:none}
  .argumenten-grid{grid-template-columns:1fr 1fr}
  .argument-kol,.argument-kol--breed{grid-column:span 1}
  .galerij,.galerij-groot{grid-template-columns:1fr 1fr}
  .galerij-groot{grid-auto-rows:200px}
  .galerij-groot .groot{grid-column:span 2;grid-row:span 1}
  .sec-head--split{grid-template-columns:1fr}
  .hero,.hero--slider{min-height:0}
  .hero--pagina{min-height:min(60vh,520px)}
  .hero .container{padding-top:calc(var(--hdr-h) + 2rem);padding-bottom:3.5rem}
  .contact-grid__foto{display:none}
}
@media (max-width:600px){
  .doelgroepen,.pijlers,.dna,.team,.infoboxen,.infokaarten,.checklist,.form-row--2,.expertise__grid,.fotoraster,.projecten,.galerij,.galerij-groot,.argumenten-grid{grid-template-columns:1fr}
  .galerij-groot .groot{grid-column:span 1}
  .tegels{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-specialisaties ul{grid-template-columns:1fr}
  .voordeel{grid-template-columns:1fr}
  .voordeel img{width:100%;aspect-ratio:16/9}
  .stap{grid-template-columns:1fr;gap:.4rem}
  .btn{white-space:normal;height:auto;min-height:46px;padding:.6rem 1.2rem;text-align:left}
  .specs div{grid-template-columns:1fr}
}

/* ==========================================================================
   Dynamiek (15/9/26, vraag Wout Moors): inschuiven bij scrollen, tellers, realisatiestrook,
   beeldband op de dienstpagina's, lightbox. Alles progressive enhancement via motion.js
   en lightbox.js; bewegingsreductie zet het uit.
   ========================================================================== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.rv--links{transform:translateX(-28px)}
.rv--rechts{transform:translateX(28px)}
.rv.is-in{opacity:1;transform:none}
/* kaarten komen iets op bij hover, foto's zoomen traag */
.doelgroep,.argument-kol,.infokaart{transition:transform .35s ease,box-shadow .35s ease}
.doelgroep:hover,.argument-kol:hover,.infokaart:hover{transform:translateY(-4px)}
.split__foto,.proces__foto,.expertise__grid>div,.fotoraster>*{overflow:hidden;border-radius:var(--radius)}
.split__foto img,.proces__foto img,.expertise__grid img,.fotoraster img,.voordeel img{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.split__foto:hover img,.proces__foto:hover img,.expertise__grid div:hover img,.fotoraster>*:hover img,.voordeel:hover img{transform:scale(1.03)}
/* stappenplan: de gouden lijn tekent zich, de punten verschijnen stap per stap */
.stappen{position:relative;padding-left:1.6rem}
.stappen::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.stappen.is-in::before{transform:scaleY(1)}
.stap{position:relative}
.stap::before{content:"";position:absolute;left:calc(-1.6rem - 4px);top:1.5rem;width:10px;height:10px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .4s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*220ms + .3s)}
.stappen.is-in .stap::before{transform:scale(1)}
/* tellers (home, boven "Waarom kiezen voor Moors NV?") */
.cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
.cijfer{border-top:2px solid var(--gold);padding-top:1rem}
.cijfer b{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;color:var(--slate);letter-spacing:-.02em}
.cijfer>span{display:block;margin-top:.4rem;font-size:.95rem;color:var(--muted)}
/* realisatiestrook op de home: horizontaal bladeren, slepen met de muis, knoppen */
.strook-sectie{overflow:hidden}
.strook__nav{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.strook__knop{width:44px;height:44px;border:1.5px solid var(--gold);border-radius:12px;background:transparent;color:var(--gold);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.strook__knop svg{width:18px;height:18px}
.strook__knop:hover{background:var(--gold);color:var(--sand-light)}
.strook__knop:disabled{opacity:.35;cursor:default;background:transparent;color:var(--gold)}
.strook{--strook-in:max(var(--pad),calc((100vw - var(--container))/2 + var(--pad)));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--strook-in);scrollbar-width:none;cursor:grab;padding:0 0 .5rem;margin-top:.5rem}
.strook::-webkit-scrollbar{display:none}
.strook.is-sleep{cursor:grabbing;scroll-snap-type:none;user-select:none}
.strook__spoor{display:flex;gap:1rem;width:max-content;padding:0 var(--pad) 0 var(--strook-in)}
.strook__item{position:relative;flex:none;width:min(72vw,520px);aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);scroll-snap-align:start;display:block}
.strook__item--groot{width:min(88vw,720px)}
.strook__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.strook__item:hover img{transform:scale(1.05)}
.strook__label{position:absolute;left:0;right:0;bottom:0;padding:2rem 1.2rem 1rem;background:linear-gradient(to top,rgba(43,54,56,.8),rgba(43,54,56,0));color:#fff;display:flex;flex-direction:column;gap:.15rem}
.strook__label b{font-family:var(--font-head);font-size:1.05rem;letter-spacing:.02em}
.strook__label i{font-style:normal;font-size:.85rem;color:var(--sand-light);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.strook__item:hover .strook__label i,.strook__item:focus-visible .strook__label i{opacity:1;transform:none}
/* filter op /realisaties/: het raster vaagt uit voor de link volgt (motion.js) */
.projecten{transition:opacity .22s ease,transform .22s ease}
.projecten.is-weg{opacity:0;transform:translateY(8px)}
/* beeldband op volle breedte op de dienstpagina's, de foto schuift traag mee met het scrollen */
.band{position:relative;min-height:min(70vh,640px);display:flex;align-items:center;overflow:hidden;isolation:isolate;color:#fff;margin-bottom:var(--s-section)}
.band__foto{position:absolute;inset:-8% 0;z-index:-2}
.band__foto img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(43,54,56,.8),rgba(43,54,56,.38) 60%,rgba(43,54,56,.15))}
.band__inhoud{padding:4rem var(--pad);max-width:var(--container);margin:0 auto;width:100%}
.band__inhoud .eyebrow{color:var(--gold)}
.band__inhoud h2{color:#fff;max-width:24ch;margin-bottom:1.4rem}
.band__inhoud p{color:rgba(255,255,255,.9);max-width:52ch;margin-bottom:1.6rem}
@supports (animation-timeline:view()){
  .band__foto{animation:bandschuif linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes bandschuif{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
}
/* lightbox (lightbox.js) */
.lb__bron{cursor:zoom-in}
body.is-lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;background:rgba(43,54,56,.94);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease}
.lb.is-open{opacity:1}
.lb[hidden]{display:none}
.lb__figuur{margin:0;max-width:min(92vw,1400px);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.lb__img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--radius);box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.lb__img.is-rechts{animation:lbin-r .3s cubic-bezier(.2,.8,.2,1)}
.lb__img.is-links{animation:lbin-l .3s cubic-bezier(.2,.8,.2,1)}
@keyframes lbin-r{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes lbin-l{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.lb__tekst{color:var(--sand-light);font-size:.9rem;text-align:center;max-width:60ch}
.lb__sluit,.lb__pijl{position:absolute;width:48px;height:48px;border:1.5px solid rgba(255,255,255,.35);border-radius:12px;background:rgba(0,0,0,.25);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s}
.lb__sluit:hover,.lb__pijl:hover{background:var(--gold);border-color:var(--gold)}
.lb__sluit{top:1rem;right:1rem}
.lb__sluit svg,.lb__pijl svg{width:22px;height:22px}
.lb__pijl{top:50%;transform:translateY(-50%)}
.lb__vorige{left:1rem}
.lb__volgende{right:1rem}
.lb__teller{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);color:var(--sand-light);font-size:.85rem;letter-spacing:.06em}
@media (max-width:900px){.cijfers{gap:1rem}}
@media (max-width:767px){.lb__pijl{top:auto;bottom:3rem;transform:none}.lb__img{max-height:70vh}}
@media (max-width:600px){.cijfers{grid-template-columns:1fr;gap:1rem}.cijfer b{font-size:2.2rem}}
@media (prefers-reduced-motion:reduce){
  .rv,.rv--links,.rv--rechts{opacity:1;transform:none;transition:none}
  .hero__inhoud>*,.hero__paneel>*{animation:none}
  .stappen::before,.stap::before{transform:none;transition:none}
  .band__foto{animation:none}
  .doelgroep:hover,.argument-kol:hover,.infokaart:hover{transform:none}
  .strook__item img,.split__foto img,.proces__foto img,.expertise__grid img,.fotoraster img,.voordeel img{transition:none}
}

/* ==========================================================================
   Donker thema (15/9/26, vraag Wout Moors; twee lagen sinds 15/9/26, Danilo): donkergrijs
   #2b3638 als pagina-achtergrond, leigrijs #3f5050 als tweede vlak (kaarten, wisselsecties,
   megamenu, invoervelden), de footer nog een stap donkerder. Tekst in zand, goud blijft goud.
   Beide tinten komen uit het huisstijlhandboek van Debora. Schakelaar .lightsw (lichtbol met
   schuifje, patroon leadlab.be), één in de desktopnavigatie en één naast de hamburger op
   mobiel. Keuze via theme.js.
   ========================================================================== */
.lightsw{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 11px;border:1.5px solid var(--line-strong);border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;flex:none;transition:border-color .25s}
.lightsw:hover{border-color:var(--gold)}
.lightsw .bulb{width:19px;height:19px;fill:transparent;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:fill .3s,stroke .3s,filter .3s}
.lightsw:hover .bulb{fill:rgba(181,132,34,.35);stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(181,132,34,.8))}
.lightsw .tr{width:28px;height:16px;border-radius:999px;background:var(--line-strong);position:relative;flex:none;transition:background .3s}
.lightsw .tr::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .35s cubic-bezier(.2,.8,.2,1)}
/* schuifje volgt html[data-theme], niet aria-pressed: het attribuut staat al vóór de eerste paint, dus het knopje springt niet meer bij elke paginawissel (Danilo 15/9/26) */
html[data-theme="dark"] .lightsw .tr{background:var(--gold)}
html[data-theme="dark"] .lightsw .tr::after{left:14px}
.lightsw--mobiel{display:none}
@media (max-width:1023px){.lightsw--mobiel{display:inline-flex;margin-left:auto;margin-right:.6rem}.header-inner{gap:.6rem}.nav-rij .lightsw{display:none}}
.logo__licht{display:none}
html[data-theme="dark"]{
  --bg:#2b3638;--vlak:#3f5050;--tint:#3f5050;--tint-2:#36453f;--ink:#ebe9e0;--slate:#f4f2ea;--muted:#c3cccc;--soft:#a5b1b1;
  --line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.3);--gold-soft:rgba(181,132,34,.28);--gold-dark:#d9a744;
  color-scheme:dark;
}
html[data-theme="dark"] .logo__licht{display:block}
html[data-theme="dark"] .logo__donker{display:none}
/* knoppen op donker (Danilo 15/9/26): alle knoppen goud, nooit wit, en ze hoveren naar leigrijs zoals in licht;
   staat een knop al op een leigrijs vlak (kaart, zandsectie, wisselsectie, infokaart, band), dan hovert hij naar donkergrijs */
html[data-theme="dark"] .btn-outline{background:var(--gold);color:var(--sand-light);border-color:transparent}
html[data-theme="dark"] .btn:hover{background:#3f5050;color:var(--sand-light);border-color:transparent}
html[data-theme="dark"] .bg-sand .btn:hover,html[data-theme="dark"] .bg-tint .btn:hover,html[data-theme="dark"] .zandkaart .btn:hover,html[data-theme="dark"] .infokaart .btn:hover,html[data-theme="dark"] .band .btn:hover{background:#2b3638}
html[data-theme="dark"] .nav-toggle{background:transparent}
/* het tweede vlak: leigrijs op donkergrijs */
html[data-theme="dark"] .nav-mega,html[data-theme="dark"] .bg-sand,html[data-theme="dark"] .infokaart,html[data-theme="dark"] .argumenten-lijn div,html[data-theme="dark"] .dna li,html[data-theme="dark"] .project__balk,html[data-theme="dark"] .infobox{background:var(--vlak)}
html[data-theme="dark"] .voordeel{border-color:var(--line-strong)}
html[data-theme="dark"] .voordeel:nth-child(odd){background:var(--vlak)}
html[data-theme="dark"] .voordeel:nth-child(even){background:rgba(63,80,80,.5)}
html[data-theme="dark"] .project{border-color:var(--vlak)}
html[data-theme="dark"] .infokaart{border-color:var(--line-strong)}
html[data-theme="dark"] .argument-kol{border-color:var(--gold)}
html[data-theme="dark"] .dna li{border-color:var(--gold)}
html[data-theme="dark"] .waarom-box{background:var(--vlak)}
html[data-theme="dark"] .filter a{color:var(--gold)}
html[data-theme="dark"] .filter a:hover,html[data-theme="dark"] .filter a[aria-current="page"]{color:#fff}
html[data-theme="dark"] .dg:hover .dg__balk{background:var(--gold-dark)}
/* background-color, niet background: anders verdwijnt het pijltje van de select (achtergrondafbeelding), Danilo 15/9/26 */
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background-color:var(--vlak);border-color:var(--line-strong);color:var(--ink)}
html[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcd7c9' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html[data-theme="dark"] .form-status.is-error{color:#f3b3b3}
html[data-theme="dark"] .site-footer{background:#1f2729;border-top-color:var(--line)}
/* foto's op donker (Danilo 15/9/26, variant B): dunne zandkleurige rand op 18% en een zachte schaduw eronder,
   zodat ze loskomen van het donkergrijs in plaats van afgeknipt te lijken */
html[data-theme="dark"] .dg__foto,html[data-theme="dark"] .expo__foto,html[data-theme="dark"] .split__foto,html[data-theme="dark"] .proces__foto,html[data-theme="dark"] .expertise__grid>div:not(.logo-vak),html[data-theme="dark"] .fotoraster>div:not(.logo-vak),html[data-theme="dark"] .strook__item,html[data-theme="dark"] .tegels a,html[data-theme="dark"] .galerij figure,html[data-theme="dark"] .project__foto,html[data-theme="dark"] .project-galerij img,html[data-theme="dark"] .voordeel img,html[data-theme="dark"] .contact-grid__foto img,html[data-theme="dark"] .nav-mega__foto img{outline:1px solid rgba(235,233,224,.18);outline-offset:-1px;box-shadow:0 24px 50px -28px rgba(0,0,0,.85)}
html[data-theme="dark"] .lightsw:hover .bulb{fill:rgba(181,132,34,.45);stroke:#f1c25a;filter:drop-shadow(0 0 8px rgba(181,132,34,.95)) drop-shadow(0 0 20px rgba(181,132,34,.5))}
html[data-theme="dark"] .cs-body{background:#fff;color:#2b3638}
/* tekening op /totaalprojecten/ (lijntekening op wit): in donker omkeren en met screen op de achtergrond mengen,
   zodat het wit wegvalt en de lijnen licht worden; geen rand of schaduw (Danilo 15/9/26) */
html[data-theme="dark"] .split__foto--tekening{outline:0;box-shadow:none}
html[data-theme="dark"] .split__foto--tekening img{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}
/* de drie pictogrammen van de klant zijn zwarte lijnen op transparant (witte vlakken weggehaald 15/9/26); in donker omkeren naar zand */
html[data-theme="dark"] .pijler img{filter:invert(1) sepia(.25) brightness(.95)}
/* "De kracht van één partner": kop boven, kaart eronder op volle breedte met drie kolommen (Danilo 15/9/26, optie 1) */
.checklist--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.checklist--3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.checklist--3{grid-template-columns:1fr}}
/* "Waarom Moors NV?": de drie pictogrammen rinkelen even zoals een belletje zodra het blok in beeld komt (gestaffeld,
   na de reveal) en opnieuw bij hover (Danilo 16/9/26). motion.js zet de class .rinkel en haalt hem na afloop weer weg,
   zodat de animatie telkens opnieuw kan starten. Uit bij bewegingsreductie. */
.pijler img{transform-origin:50% 40%}
@keyframes belletje{0%,100%{transform:rotate(0)}12%{transform:rotate(-10deg)}25%{transform:rotate(8deg)}38%{transform:rotate(-6deg)}50%{transform:rotate(4deg)}62%{transform:rotate(-2deg)}74%{transform:rotate(1deg)}}
.pijler.rinkel img{animation:belletje 1.1s ease-in-out}
@media (prefers-reduced-motion:reduce){.pijler.rinkel img{animation:none}}