:root{
  --zwart:#100F0C;
  --diep:#191811;
  --goud:#F0B41F;
  --goud-diep:#C08D0C;
  --wit:#FFFFFF;
  --bot:#F2EFE6;
  --tekst:#C9C6BC;
  --grijs:#9B9890;
  --lijn:#2E2C24;
  --display:'Arial Black','Arial Bold','Helvetica Neue',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--zwart);color:var(--tekst);font-family:Arial,Helvetica,sans-serif;
     font-size:17px;line-height:1.62;overflow-x:clip;width:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--goud);color:var(--zwart)}

.wrap{max-width:1260px;margin:0 auto;padding:0 40px}
.wrap.smal{max-width:840px}

h1,h2,h3,h4{font-family:var(--display);font-weight:900;text-transform:uppercase;
            letter-spacing:-.035em;line-height:.86;color:var(--wit)}
h1{font-size:clamp(44px,10vw,142px)}
h1.klein{font-size:clamp(38px,6.6vw,88px)}
h2{font-size:clamp(32px,5.2vw,72px)}
p.groot{font-size:clamp(17px,1.45vw,21px);line-height:1.58;color:var(--tekst)}
strong,b{color:var(--wit)}

.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-size:12px;
         font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:var(--goud)}
.eyebrow::before{content:"";width:36px;height:3px;background:var(--goud);flex:none}

/* ============ navigatie ============ */
.nav{position:sticky;top:0;z-index:80;background:rgba(16,15,12,.92);backdrop-filter:blur(10px);
     border-bottom:2px solid var(--goud)}
.nav .wrap{display:flex;align-items:center;gap:30px;height:78px}
.merk{flex:none;display:flex;align-items:center}
.merk img{width:128px}
.nav ul{list-style:none;display:flex;gap:30px;margin-left:auto;align-items:center}
.nav ul a{font-family:var(--display);text-transform:uppercase;font-size:13px;letter-spacing:.06em;
          color:var(--bot);padding:6px 0;border-bottom:3px solid transparent;transition:.16s}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--goud);border-color:var(--goud)}
.nav .cta{flex:none;background:var(--goud);color:var(--zwart);font-family:var(--display);
          text-transform:uppercase;font-size:13px;letter-spacing:.06em;padding:15px 22px;transition:.16s}
.nav .cta:hover{background:var(--wit)}
.menuknop{display:none;margin-left:auto;background:var(--goud);color:var(--zwart);border:0;
          font-family:var(--display);text-transform:uppercase;font-size:13px;letter-spacing:.08em;
          padding:13px 18px;cursor:pointer}

/* ============ hero ============ */
.hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
      padding:120px 0 78px;min-height:78vh}
.hero.groot-hero{min-height:calc(100svh - 78px);padding-bottom:96px}
.hero.pagina{min-height:52vh;padding:96px 0 62px}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:50% 42%;
          filter:grayscale(.45) contrast(1.2) brightness(.55)}
.hero.pagina .bg{filter:grayscale(.35) contrast(1.14) brightness(.68)}
.hero .veil{position:absolute;inset:0;background:
   linear-gradient(180deg,rgba(16,15,12,.82) 0%,rgba(16,15,12,.3) 34%,rgba(16,15,12,.9) 84%,var(--zwart) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{color:var(--wit);text-shadow:0 6px 40px rgba(0,0,0,.5);line-height:1.04}
.hero h1 .zacht{background:var(--goud);color:var(--zwart);padding:.02em .12em .06em;
                -webkit-box-decoration-break:clone;box-decoration-break:clone;text-shadow:none}
.hero p.groot{max-width:600px;margin-top:26px;color:#DEDBD2}
.knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;font-family:var(--display);
     text-transform:uppercase;font-size:14px;letter-spacing:.05em;padding:21px 32px;cursor:pointer;
     border:0;transition:transform .14s,background .16s,color .16s}
.btn:hover{transform:translateY(-2px)}
.btn-goud{background:var(--goud);color:var(--zwart)}
.btn-goud:hover{background:var(--wit)}
.btn-lijn{border:3px solid var(--wit);color:var(--wit);background:transparent;padding:18px 30px}
.btn-lijn:hover{background:var(--wit);color:var(--zwart)}
.wa{width:19px;height:19px;flex:none}

/* ============ lopende band ============ */
.tickerhoes{overflow:hidden;position:relative;z-index:6;margin-top:-46px;padding:26px 0}
.ticker{background:var(--goud);transform:rotate(-1.6deg);width:112%;margin-left:-6%;
        padding:15px 0;overflow:hidden}
.ticker .rij{display:flex;gap:30px;white-space:nowrap;width:max-content;
             animation:loop 30s linear infinite;font-family:var(--display);text-transform:uppercase;
             font-size:clamp(17px,2.2vw,28px);letter-spacing:-.01em;color:var(--zwart)}
@keyframes loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ secties ============ */
section{padding:110px 0;position:relative}
section.paneel{background:var(--diep)}
section.strak{padding:88px 0}
.sec-kop{max-width:820px;margin-bottom:52px}
.sec-kop h2{margin:18px 0 20px}
.sec-kop p{max-width:700px}

/* ============ blokkenraster ============ */
.raster{display:grid;gap:14px}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
.cel{position:relative;background:var(--diep);padding:40px 30px 36px;overflow:hidden;
     transition:background .2s,transform .2s}
.cel::after{content:"";position:absolute;left:0;top:0;height:6px;width:100%;background:var(--goud);
            transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.cel .nr{font-family:var(--display);font-size:clamp(26px,2.5vw,38px);line-height:1;color:var(--goud);
         letter-spacing:-.04em;margin-bottom:18px;position:relative}
.cel h3{font-size:21px;color:var(--wit);margin-bottom:13px;position:relative}
.cel p{font-size:15.5px;line-height:1.6;color:var(--grijs);position:relative}
a.cel{display:block}
a.cel:hover{background:#211F16;transform:translateY(-3px)}
a.cel:hover::after{transform:scaleX(1)}
.pijl{margin-top:20px;font-family:var(--display);text-transform:uppercase;font-size:13px;
      letter-spacing:.08em;color:var(--goud)}
section.paneel .cel{background:#221F17}

/* gouden variant, voor het blok met de leuke dingen */
.cel.goud,section.paneel .cel.goud{background:var(--goud)}
.cel.goud .nr{color:var(--zwart);opacity:.55}
.cel.goud h3{color:var(--zwart)}
.cel.goud p{color:#3A3320}
.cel.goud::after{background:var(--zwart)}

/* de twee kolommen met opsommingen krijgen een label in plaats van een cijfer */
.r2 .cel .nr{font-size:13px;letter-spacing:.2em;color:var(--goud);
             margin-bottom:22px;padding-bottom:16px;border-bottom:3px solid var(--goud)}
.missie .cel .nr{color:var(--goud)}

/* ============ missieblok ============ */
.missie{background:var(--goud);color:var(--zwart);padding:calc(96px + 4vw) 0;
        clip-path:polygon(0 4vw,100% 0,100% 100%,0 calc(100% - 4vw));margin:-2vw 0}
.missie h2,.missie h3{color:var(--zwart)}
.missie .eyebrow{color:var(--zwart)}
.missie .eyebrow::before{background:var(--zwart)}
.missie p{color:#37301D}
.missie .groot{color:#2C2716}
.missie .cel{background:var(--zwart)}
.missie .cel h3{color:var(--wit)}
.missie .cel p{color:var(--grijs)}
.missie .cel .nr{color:var(--goud);opacity:1}
.missie h2{font-size:clamp(40px,7.4vw,106px)}

/* ============ twee kolommen ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.start{align-items:start}
.beeld{position:relative;aspect-ratio:4/5}
.beeld::before{content:"";position:absolute;left:-18px;top:-18px;width:130px;height:130px;
               background:var(--goud);z-index:0}
.beeld img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}

/* ============ lijsten ============ */
.lijst{list-style:none}
.lijst li{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--lijn)}
.lijst li:first-child{border-top:1px solid var(--lijn)}
.lijst i.tri{width:15px;height:15px;flex:none;margin-top:5px;background:var(--goud);
             clip-path:polygon(0 0,100% 50%,0 100%)}
.lijst li>div{font-family:var(--display);text-transform:uppercase;font-size:17px;
              letter-spacing:-.012em;color:var(--wit);line-height:1.24}
.lijst small{display:block;font-family:Arial,Helvetica,sans-serif;font-weight:normal;
             text-transform:none;letter-spacing:0;font-size:15px;line-height:1.6;
             color:var(--grijs);margin-top:8px}
.missie .lijst li>div{color:var(--zwart)}

/* ============ citaat ============ */
.citaat{border-left:8px solid var(--goud);padding:8px 0 8px 40px;max-width:1000px}
.citaat p{font-family:var(--display);text-transform:uppercase;letter-spacing:-.035em;line-height:.98;
          font-size:clamp(26px,4.4vw,58px);color:var(--wit)}
.citaat span{display:block;margin-top:22px;font-family:var(--display);text-transform:uppercase;
             font-size:12px;letter-spacing:.2em;color:var(--goud)}

/* ============ stappen en dagindeling ============ */
.dag{list-style:none}
.dag li{display:grid;grid-template-columns:96px 1fr;column-gap:22px;padding:20px 0;
        border-top:1px solid var(--lijn)}
.dag li:last-child{border-bottom:1px solid var(--lijn)}
.dag .t{grid-column:1;grid-row:1/span 2;font-family:var(--display);font-size:18px;color:var(--goud);
        letter-spacing:-.01em;text-transform:uppercase}
.dag h3{grid-column:2;grid-row:1;font-size:18px;color:var(--wit)}
.dag p{grid-column:2;grid-row:2;font-size:15px;color:var(--grijs);margin-top:7px;line-height:1.58}

/* ============ vragen ============ */
.vraag{border-top:1px solid var(--lijn);padding:30px 0}
.vraag:last-of-type{border-bottom:1px solid var(--lijn)}
.vraag h3{font-size:22px;color:var(--goud);margin-bottom:13px}
.vraag p{color:var(--tekst);font-size:16.5px}

/* ============ formulier ============ */
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
form .vol{grid-column:1/-1}
label{display:block;font-family:var(--display);text-transform:uppercase;font-size:11px;
      letter-spacing:.18em;color:var(--goud);margin-bottom:9px}
input,textarea{width:100%;background:#0B0A08;border:2px solid var(--lijn);color:var(--wit);
               font-family:Arial,Helvetica,sans-serif;font-size:16px;padding:16px 16px;
               transition:border-color .16s}
textarea{min-height:112px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--goud)}
input::placeholder,textarea::placeholder{color:#5E5C55}
form .btn{width:100%;padding:22px}
.mini{font-size:13.5px;color:var(--grijs);margin-top:14px;line-height:1.55}
.mini a{color:var(--goud);text-decoration:underline}
.klein-t{font-size:15px;color:var(--grijs);line-height:1.62}

/* ============ mobiele balk ============ */
.balk{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;background:var(--goud);
      padding:0}
.balk .btn{width:100%;justify-content:center;padding:18px;background:var(--goud);color:var(--zwart)}

/* ============ voettekst ============ */
footer{background:#0B0A08;border-top:2px solid var(--goud);padding:70px 0 44px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px}
footer img{width:132px;margin-bottom:18px}
footer h4{font-size:12px;letter-spacing:.2em;color:var(--goud);margin-bottom:16px}
footer ul{list-style:none}
footer ul li{margin-bottom:10px}
footer ul a{font-size:15px;color:var(--grijs);transition:color .16s}
footer ul a:hover{color:var(--goud)}
.slot{margin-top:44px;padding-top:24px;border-top:1px solid var(--lijn);display:flex;
      justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:#6B6960}

.kruimels{font-size:13px;color:var(--grijs);margin-bottom:20px;font-family:var(--display);
          text-transform:uppercase;letter-spacing:.1em}
.kruimels a{color:var(--grijs)}
.kruimels a:hover{color:var(--goud)}

.op{opacity:0;transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.op.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .op{opacity:1;transform:none;transition:none}
  .ticker .rij{animation:none}
  html{scroll-behavior:auto}
}

@media(max-width:1000px){
  .r4{grid-template-columns:1fr 1fr}
  .split{gap:44px}
}
@media(max-width:860px){
  .r3{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .beeld{aspect-ratio:16/10;max-width:560px}
}
@media(max-width:760px){
  .wrap{padding:0 22px}
  section{padding:70px 0}
  section.strak{padding:60px 0}
  .sec-kop{margin-bottom:36px}
  .nav .wrap{height:68px;gap:14px}
  .merk img{width:112px}
  .nav ul{display:none;position:absolute;top:68px;left:0;right:0;background:var(--zwart);
          flex-direction:column;align-items:stretch;gap:0;border-bottom:2px solid var(--goud);padding:4px 0}
  .nav ul.open{display:flex}
  .nav ul li a{display:block;padding:17px 22px;font-size:15px;border-bottom:1px solid var(--lijn);
               border-left:4px solid transparent}
  .nav ul li a:hover,.nav ul li a[aria-current]{border-bottom-color:var(--lijn);border-left-color:var(--goud)}
  .nav .cta{display:none}
  .menuknop{display:block}
  .r2,.r3,.r4{grid-template-columns:1fr}
  .cel{padding:32px 24px 30px}
  form{grid-template-columns:1fr}
  .balk{display:block}
  body{padding-bottom:60px}
  .hero{padding:70px 0 56px;min-height:auto}
  .hero.groot-hero{min-height:calc(100svh - 128px);padding-bottom:60px}
  .hero.pagina{min-height:auto;padding:60px 0 48px}
  .hero .knoppen .btn{width:100%}
  .hero .knoppen .btn-goud{display:none}   /* staat al vast onderin het scherm */
  .tickerhoes{margin-top:-30px;padding:20px 0}
  .ticker{padding:11px 0}
  .citaat{border-left-width:6px;padding-left:24px}
  .dag li{grid-template-columns:1fr}
  .dag .t{grid-column:1;grid-row:1;margin-bottom:6px}
  .dag h3{grid-column:1;grid-row:2}
  .dag p{grid-column:1;grid-row:3}
  .beeld::before{width:80px;height:80px;left:-10px;top:-10px}
  .fgrid{grid-template-columns:1fr;gap:34px}
  .missie{clip-path:polygon(0 5vw,100% 0,100% 100%,0 calc(100% - 5vw));padding:calc(72px + 5vw) 0}
}