/* Apex Mining · een locatie van Epic Mining
   Kernkleuren uit brand book v2. Woestijnzand #E6C79C is het locatie-accent.
   Typografie draagt de hiërarchie; lijnen in plaats van kaarten. */
:root{
  --midnight:#080727; --ink:#100F38; --orange:#FF9902; --orange-h:#E68A02; --hash:#00DE8F; --violet:#645CFF;
  --text:#080727; --soft:#55566A; --slate:#A3ADCB; --rule:#DDE1EA; --paper:#FFFFFF; --stone:#F4F2EE;
  --sand:#E6C79C; --sand-dark:#7D5E35;
  --display:"Inter Tight", Inter, Arial, sans-serif; --body:Inter, Arial, sans-serif;
  --max:1240px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--paper); color:var(--text); font:400 18px/1.65 var(--body); -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--display); margin:0; text-wrap:balance}
h1{font-size:clamp(42px,6.4vw,84px); line-height:.98; font-weight:800; letter-spacing:-.035em}
h2{font-size:clamp(34px,4.4vw,58px); line-height:1.02; font-weight:800; letter-spacing:-.03em}
h3{font-size:22px; line-height:1.25; font-weight:700; letter-spacing:-.015em}
.wrap{max-width:var(--max); margin:0 auto; padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px))}
.big{font-size:clamp(20px,1.7vw,23px); line-height:1.5; color:var(--soft)}
.night{background:var(--midnight); color:#fff}
.night .big{color:var(--slate)}
:focus-visible{outline:3px solid var(--violet); outline-offset:3px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; font:700 17px/1 var(--body); padding:19px 30px; border-radius:8px; text-decoration:none; white-space:nowrap; transition:background .15s, transform .15s}
.btn.go{background:var(--orange); color:var(--midnight)}
.btn.go:hover{background:var(--orange-h); transform:translateY(-1px)}
.textlink{font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color:var(--sand)}
.textlink:hover{text-decoration-color:currentColor}
@media (max-width:480px){.btn{width:100%; justify-content:center; white-space:normal}}

/* header */
.notice{background:var(--midnight); color:var(--slate); font-size:14.5px; text-align:center; padding:9px 24px}
.notice a{color:#fff; font-weight:600}
.notice b{color:var(--sand); font-weight:600}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); background:#fff; z-index:30}
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--rule)}
.top .wrap{display:flex; align-items:center; gap:36px; height:76px}
.top .logo img{height:26px; width:auto}
.top nav{display:flex; gap:28px; margin-left:auto; font-size:15.5px; font-weight:500}
.top nav a{text-decoration:none; color:var(--soft)}
.top nav a:hover{color:var(--text)}
.top .btn{padding:14px 22px; font-size:15.5px}
.tools{display:flex; align-items:center; gap:12px}
.login{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--rule); color:var(--midnight); transition:border-color .15s}
.login svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.login:hover{border-color:var(--midnight)}
.lang{position:relative}
.lang summary{list-style:none; display:flex; align-items:center; gap:10px; height:46px; padding:0 12px 0 10px; border:1.5px solid var(--rule); border-radius:12px; background:#fff; cursor:pointer; transition:border-color .15s}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover, .lang[open] summary{border-color:var(--midnight)}
.lang svg{width:26px; height:26px; flex:none}
.lang .chev{width:18px; height:18px; fill:none; stroke:var(--midnight); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s}
.lang[open] .chev{transform:rotate(180deg)}
.lang ul{position:absolute; right:0; top:calc(100% + 8px); margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--rule); border-radius:12px; box-shadow:0 12px 32px rgba(8,7,39,.12); min-width:180px}
.lang li a{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--text); font-size:15.5px; font-weight:500}
.lang li a:hover{background:var(--stone)}
.lang li a[aria-current]{font-weight:700}
.lang li svg{width:22px; height:22px}
@media (max-width:1000px){.top nav{display:none} .tools{margin-left:auto}}
@media (max-width:760px){.top .btn{display:none} .top .wrap{gap:16px} .login, .lang summary{height:42px} .login{width:42px}}

/* hero */
.hero{position:relative; color:#fff; background:var(--midnight); isolation:isolate; overflow:hidden}
.hero::before{content:""; position:absolute; left:-6%; top:12%; width:clamp(160px,18vw,260px); aspect-ratio:1; border-radius:50%; z-index:-1; background:repeating-linear-gradient(-45deg, rgba(230,199,156,.16) 0 3px, transparent 3px 12px)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(40px,6vw,96px); align-items:center; padding-block:clamp(56px,8vw,110px) clamp(120px,14vw,200px)}
.hero .copy{display:grid; gap:24px; justify-items:start}
.hero h1{max-width:12ch}
.hero p.intro{max-width:44ch; font-size:clamp(18px,1.4vw,20px); color:#D5DBEE; line-height:1.55; margin:0}
.trust{display:flex; flex-wrap:wrap; gap:10px 28px; margin:0; padding:0; list-style:none; font-size:18px}
.trust li{display:flex; align-items:center; gap:10px}
.trust svg{width:22px; height:22px; flex:none}
.trust svg path:first-child{fill:var(--sand)}
.trust .tick{fill:none; stroke:var(--midnight); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.hero .actions{display:flex; flex-wrap:wrap; gap:16px; margin-top:8px}
.hero .actions .btn{font-size:16px; padding:18px 24px}
.hero .actions .btn.line{padding-block:16.5px}
.btn.sand{background:var(--sand); color:var(--midnight)}
.btn.sand:hover{background:#EFD6B3; transform:translateY(-1px)}
.btn.line{border:1.5px solid rgba(255,255,255,.85); color:#fff; padding-block:17.5px}
.btn.line:hover{background:rgba(255,255,255,.08)}
.tp-line{display:flex; align-items:center; gap:6px; margin:0; font-size:17px; color:#fff}
.tp-line strong{font-weight:700}
.tp-star{width:22px; height:22px; margin-left:6px; background:#00B67A; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.hero .frame{position:relative; padding:clamp(30px,4vw,56px) clamp(14px,2vw,26px); transform:rotate(-2deg)}
.hero .frame::before{content:""; position:absolute; inset:0; background:var(--sand); border-radius:22px; transform:rotate(4deg) skewX(-2deg); box-shadow:0 30px 80px rgba(0,0,0,.35); z-index:-1}
.hero .frame .video, .hero .frame .wvideo{border-radius:4px; transform:rotate(2deg)}
.swoop{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(70px,12vw,200px); z-index:-1}
.swoop .s1{fill:#7FA4E0; opacity:.55}
.swoop .s2{fill:#fff}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .frame{transform:rotate(-1.5deg); margin-inline:6px}
}
@media (max-width:480px){.hero .actions{width:100%} .trust{font-size:16.5px; gap:10px 20px}}
.tp{display:inline-flex; align-items:center; gap:8px}
.tp i{display:inline-flex; gap:2px}
.tp i::before{content:""; width:86px; height:16px; background:repeating-linear-gradient(90deg,#00B67A 0 16px,transparent 16px 17.5px)}

/* video */
.video{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:6px; background:var(--ink); color:#fff; text-decoration:none; isolation:isolate}
.video img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s}
.video:hover img{transform:scale(1.03)}
.video::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,7,39,0) 30%, rgba(8,7,39,.85) 100%)}
.video .pl{position:absolute; left:50%; top:45%; translate:-50% -50%; width:clamp(58px,6.5vw,80px); aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.95); display:grid; place-items:center}
.video .pl::after{content:""; margin-left:5px; border-left:19px solid var(--midnight); border-top:11px solid transparent; border-bottom:11px solid transparent}
.video .cap{position:absolute; left:clamp(16px,2vw,26px); right:clamp(16px,2vw,26px); bottom:clamp(14px,2vw,22px); font:600 clamp(15px,1.4vw,18px)/1.3 var(--display)}
.video .cap small{display:block; font:500 14px/1.4 var(--body); color:var(--slate); margin-top:4px}
@media (max-width:520px){.video .pl{width:52px; top:38%} .video .pl::after{border-left-width:14px; border-top-width:8px; border-bottom-width:8px}}
.vrow{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:end}
@media (max-width:900px){.vrow{grid-template-columns:1fr}}

/* bekend van */
.press{padding-block:clamp(40px,5vw,64px)}
.press .wrap{display:grid; gap:28px; justify-items:center}
.press p{margin:0; font-size:17px; letter-spacing:.14em; color:var(--text)}
.press .logos{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:28px 48px; width:100%}
.press img{height:clamp(44px,5vw,64px); width:auto; max-width:200px; object-fit:contain; filter:grayscale(1); opacity:.8}
.press img.wide{height:clamp(28px,2.8vw,36px)}
@media (max-width:700px){.press .logos{justify-content:center; gap:24px 36px}}

/* numbers */
.numbers{padding-block:clamp(80px,10vw,140px)}
.numbers .wrap{display:grid; gap:56px}
.numbers h2{max-width:16ch}
.figs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px 40px}
@media (max-width:760px){.figs{grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 20px}}
.figs div{display:grid; gap:4px}
.figs b{display:inline-block; font:800 clamp(48px,6vw,84px)/.95 var(--display); letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.figs span{color:var(--soft); font-size:17px}
@media (max-width:760px){.figs b{font-size:clamp(34px,10vw,48px)}}

/* for who */
.who{padding-block:clamp(80px,10vw,130px); background:var(--stone)}
.who .wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,6vw,96px)}
@media (max-width:900px){.who .wrap{grid-template-columns:1fr}}
.who .side{position:sticky; top:120px; align-self:start; display:grid; gap:24px; justify-items:start}
.who .side .big{margin:0; max-width:34ch}
@media (max-width:900px){.who .side{position:static}}
.who ol{list-style:none; margin:0; padding:0}
.who li{padding-block:30px; border-top:1px solid #D9D3C8; display:grid; grid-template-columns:64px minmax(0,1fr); gap:24px; align-items:start}
.who li > div{display:grid; gap:8px}
.who .ic{width:64px; height:64px; border-radius:16px; background:var(--midnight); display:grid; place-items:center}
.who .ic svg{width:32px; height:32px; fill:none; stroke:var(--sand); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.who .ic .dot{fill:var(--sand); stroke:none}
@media (max-width:520px){.who li{grid-template-columns:52px minmax(0,1fr); gap:18px} .who .ic{width:52px; height:52px; border-radius:14px} .who .ic svg{width:26px; height:26px}}
.who li:last-child{border-bottom:1px solid #D9D3C8}
.who li p{color:var(--soft)}

/* why mining */
.why{padding-block:clamp(80px,10vw,140px)}
.why .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(40px,6vw,88px); align-items:start}
@media (max-width:900px){.why .wrap{grid-template-columns:1fr}}
.why .copy{display:grid; gap:26px}
.plain{list-style:none; padding:0; margin:0; display:grid; gap:0}
.plain li{padding:14px 0 14px 30px; border-bottom:1px solid var(--rule); position:relative}
.plain li::before{content:""; position:absolute; left:2px; top:24px; width:14px; height:8px; border-left:2.5px solid var(--sand-dark); border-bottom:2.5px solid var(--sand-dark); transform:rotate(-45deg)}
.night .plain li{border-color:rgba(255,255,255,.14)}
.night .plain li::before{border-color:var(--sand)}
.aside{font-size:17px; color:var(--soft); padding-left:22px; border-left:3px solid var(--sand)}
.aside strong{color:var(--text)}

/* how */
.how{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:980px){.how{grid-template-columns:1fr}}
.how .pic{position:relative; min-height:520px}
.how .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%}
@media (max-width:980px){.how .pic{min-height:0; aspect-ratio:4/3}}
.how .copy{padding:clamp(56px,7vw,110px) max(24px, env(safe-area-inset-right,0px)) clamp(56px,7vw,110px) clamp(24px,5vw,88px); display:grid; gap:32px; max-width:700px}
@media (max-width:980px){.how .copy{padding-left:max(24px, env(safe-area-inset-left,0px))}}
.steps{list-style:none; margin:0; padding:0; counter-reset:s; display:grid}
.steps li{counter-increment:s; display:grid; grid-template-columns:56px 1fr; gap:4px 18px; padding-block:18px; border-top:1px solid rgba(255,255,255,.12)}
.steps li::before{content:counter(s); grid-row:span 2; font:300 40px/1 var(--display); color:var(--sand); letter-spacing:-.03em}
.steps b{font:700 19px/1.3 var(--display)}
.steps span{color:var(--slate); font-size:16.5px}
.under{padding-block:clamp(48px,6vw,80px)}

/* emirates */
.uae-hero{position:relative; color:#fff; background:var(--midnight); isolation:isolate; overflow:hidden}
.uae-hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.uae-hero::before{content:""; position:absolute; right:-4%; top:-30%; width:clamp(220px,30vw,420px); aspect-ratio:1; border-radius:50%; z-index:-1; background:repeating-linear-gradient(-45deg, rgba(230,199,156,.16) 0 3px, transparent 3px 12px)}
.uae-hero .wrap{width:100%; padding-block:clamp(72px,9vw,120px)}
.uae-hero h2{max-width:16ch}
.uae .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,88px); align-items:start}
@media (max-width:900px){.uae .wrap{grid-template-columns:1fr}}
.facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:#F7F0E5; border:1px solid #EADCC6; border-radius:22px; overflow:hidden}
@media (max-width:520px){.facts{grid-template-columns:1fr}}
.facts div{position:relative; display:grid; gap:10px; align-content:start; padding:clamp(24px,2.6vw,34px)}
.facts div:nth-child(odd){border-right:1px solid #EADCC6}
.facts div:nth-child(-n+2){border-bottom:1px solid #EADCC6}
@media (max-width:520px){.facts div{border-right:0 !important; border-bottom:1px solid #EADCC6} .facts div:last-child{border-bottom:0}}
.facts .ic{position:absolute; top:clamp(22px,2.4vw,30px); right:clamp(22px,2.4vw,30px)}
.facts .ic svg{width:30px; height:30px; fill:none; stroke:#B8956A; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.facts b{font:800 clamp(34px,3vw,44px)/1 var(--display); letter-spacing:-.04em; color:var(--text); white-space:nowrap; padding-right:40px}
.facts p{margin:0; color:#6B5E4E; font-size:16px; line-height:1.55}
.fine{font-size:14px; color:var(--soft)}

/* gallery */
.gallery{padding-block:clamp(80px,10vw,130px); background:var(--stone)}
.gallery .wrap{display:grid; gap:48px}
.gallery header{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:end}
@media (max-width:900px){.gallery header{grid-template-columns:1fr}}
.frames{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; align-items:start}
.frames figure{margin:0; display:grid; gap:10px}
.frames img{width:100%; object-fit:cover; border-radius:4px}
.frames figcaption{font-size:14.5px; color:var(--soft)}
.f1{grid-column:1 / span 5}.f1 img{aspect-ratio:4/5}
.f2{grid-column:6 / span 7}.f2 img{aspect-ratio:16/10}
.f3{grid-column:6 / span 3; margin-top:-38%!important}.f3 img{aspect-ratio:1}
.f4{grid-column:9 / span 4; margin-top:-38%!important}.f4 img{aspect-ratio:4/3}
@media (max-width:900px){.frames{grid-template-columns:1fr 1fr} .f1,.f2,.f3,.f4{grid-column:auto; margin-top:0!important} .f2{grid-column:span 2; order:-1}}

/* system */
.system{padding-block:clamp(80px,10vw,140px)}
.system .wrap{display:grid; gap:56px}
.system .lay{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(40px,6vw,88px); align-items:start}
@media (max-width:900px){.system .lay{grid-template-columns:1fr}}
.machine img{border-radius:4px; aspect-ratio:4/3; object-fit:cover; width:100%}
dl.spec{margin:24px 0 0; display:grid; grid-template-columns:auto 1fr; gap:0}
dl.spec dt, dl.spec dd{margin:0; padding:13px 0; border-bottom:1px solid var(--rule)}
dl.spec dt{color:var(--soft); padding-right:28px; font-size:16px}
dl.spec dd{font-weight:600; text-align:right}
.dash{margin-top:36px; background:var(--midnight); color:#fff; border-radius:10px; padding:22px; display:grid; gap:14px; box-shadow:0 30px 70px -35px rgba(8,7,39,.55)}
.dash .t{display:flex; justify-content:space-between; font-size:14px; color:var(--slate)}
.dash .t b{color:#fff; font-weight:600}
.bars{height:100px; display:flex; align-items:flex-end; gap:5px}
.bars i{flex:1; background:linear-gradient(180deg,var(--hash),rgba(0,222,143,.2)); border-radius:3px 3px 0 0}
.dash ul{list-style:none; margin:0; padding:0; display:grid}
.dash li{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid rgba(255,255,255,.1); font-size:15px; color:#D7DCEC}
.dash li em{font-style:normal; color:var(--hash); font-weight:600}
.dash li em::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--hash); margin-right:7px; vertical-align:1px}
.dash + p{margin-top:10px}

/* ownership */
.own{padding-block:clamp(80px,10vw,130px); background:var(--stone)}
.own .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,88px); align-items:start}
@media (max-width:900px){.own .wrap{grid-template-columns:1fr}}
.own .copy{display:grid; gap:24px}
.docs{list-style:none; margin:0; padding:0}
.docs li{display:grid; grid-template-columns:1fr auto; gap:16px; padding-block:22px; border-top:1px solid #D9D3C8; align-items:baseline}
.docs li:last-child{border-bottom:1px solid #D9D3C8}
.docs b{font:700 21px/1.3 var(--display)}
.docs span{color:var(--soft); font-size:16px; text-align:right; max-width:28ch}
@media (max-width:560px){.docs li{grid-template-columns:1fr} .docs span{text-align:left}}

/* results */
.results{padding-block:clamp(80px,10vw,140px)}
.results .wrap{display:grid; gap:64px}
blockquote.lead-quote{margin:0; font:700 clamp(28px,3.4vw,46px)/1.18 var(--display); letter-spacing:-.025em; max-width:24ch}
blockquote.lead-quote + p{margin-top:20px; color:var(--soft)}
.more{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr); gap:40px; padding-top:40px; border-top:1px solid var(--rule)}
@media (max-width:900px){.more{grid-template-columns:1fr}}
.more blockquote{margin:0; display:grid; gap:12px; font-size:18px}
.more cite{font-style:normal; font-size:15px; color:var(--soft)}
.more .stat b{display:block; font:800 clamp(56px,6vw,84px)/.95 var(--display); letter-spacing:-.05em; color:var(--sand-dark)}
.more .stat p{color:var(--soft)}

/* team */
.team{padding-block:clamp(80px,10vw,130px); border-top:1px solid var(--rule)}
.team .wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,6vw,96px)}
@media (max-width:900px){.team .wrap{grid-template-columns:1fr}}
.people{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
@media (max-width:520px){.people{grid-template-columns:1fr}}
.people li{padding-block:18px; border-top:1px solid var(--rule); display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:16px; align-items:center}
.people li img{grid-row:1 / span 2; width:64px; height:64px; border-radius:50%; object-fit:cover}
.people b{font:700 20px/1.3 var(--display)}
.people span{color:var(--soft); font-size:16px}

/* letter */
.letter{padding-block:clamp(80px,10vw,140px); background:var(--midnight); color:#E3E7F4}
.letter .wrap{max-width:760px}
.letter h2{color:#fff; margin-bottom:36px}
.letter p{font-size:clamp(18px,1.5vw,20px); line-height:1.75; margin-bottom:20px}
.letter .sign{margin-top:36px; color:#fff; font:700 20px/1.3 var(--display)}
.letter .sign span{display:block; font:400 16px/1.5 var(--body); color:var(--slate)}

/* faq */
.faq{padding-block:clamp(80px,10vw,140px)}
.faq .wrap{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(40px,6vw,96px)}
@media (max-width:900px){.faq .wrap{grid-template-columns:1fr}}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none; cursor:pointer; padding:22px 0; display:flex; justify-content:space-between; gap:24px; font:700 19px/1.35 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:12px; height:12px; margin-top:6px; border-right:2px solid var(--text); border-bottom:2px solid var(--text); transform:rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:12px}
.faq details p{padding-bottom:24px; color:var(--soft); max-width:62ch}

/* call */
.call{position:relative; color:#fff; background:var(--midnight); isolation:isolate; overflow:hidden}
.call > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.call::before{content:""; position:absolute; right:-6%; top:-40%; width:clamp(240px,32vw,460px); aspect-ratio:1; border-radius:50%; z-index:-1; background:repeating-linear-gradient(-45deg, rgba(230,199,156,.14) 0 3px, transparent 3px 12px)}
.call .wrap{padding-block:clamp(80px,10vw,140px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(40px,6vw,88px); align-items:center}
@media (max-width:900px){.call .wrap{grid-template-columns:1fr}}
.call .copy{display:grid; gap:26px}
.book{background:#fff; color:var(--text); border-radius:10px; padding:32px; display:grid; gap:18px}
.book .slot{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:36px 0; text-align:center; color:var(--soft); font-size:15.5px}
.book small{font-size:15px; color:var(--soft)}

/* locations */
.others{padding-block:clamp(72px,9vw,120px)}
.others .wrap{display:grid; gap:48px}
.others header{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:end}
@media (max-width:900px){.others header{grid-template-columns:1fr}}
.sites{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--rule)}
@media (max-width:900px){.sites{grid-template-columns:1fr 1fr}}
.sites a{display:grid; gap:10px; padding:28px 24px 28px 0; text-decoration:none}
.sites svg{width:34px; height:auto}
.sites b{font:800 17px/1.1 var(--display); text-transform:uppercase}
.sites span{font-size:15.5px; color:var(--soft)}
.sites a:hover b{text-decoration:underline; text-underline-offset:4px}
.sites .here span{color:var(--sand-dark); font-weight:600}

/* footer */
.foot{background:var(--midnight); color:var(--slate); padding-block:64px 36px; font-size:15.5px}
.foot .wrap{display:grid; gap:44px}
.cols{display:grid; grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); gap:32px}
@media (max-width:860px){.cols{grid-template-columns:1fr 1fr}}
.cols p{max-width:34ch; margin-top:16px}
.cols h4{margin:0 0 12px; color:#fff; font:600 15.5px/1.3 var(--body)}
.cols ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.cols a{text-decoration:none}
.cols a:hover{color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:grid; gap:4px; font-size:14px}

/* mobile cta */
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px max(16px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px)); background:rgba(8,7,39,.96); display:none}
.sticky .btn{width:100%; justify-content:center}
@media (max-width:760px){.sticky{display:block} body{padding-bottom:80px}}

/* waarom minen: variant 1, kopen of maken */
.why1{padding-block:clamp(80px,10vw,140px)}
.why1 .wrap{display:grid; gap:clamp(40px,5vw,64px)}
.why1 .head{display:grid; gap:20px; max-width:760px}
.why1 .head h2{max-width:16ch}
.why1 .duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,24px)}
.why1 .side{border-radius:20px; padding:clamp(24px,3vw,40px); display:grid; gap:14px; align-content:start}
.why1 .side h3{font-size:clamp(24px,2.2vw,30px)}
.why1 .side p{margin:0; font-size:18px; line-height:1.55}
.why1 .art{margin-bottom:10px}
.why1 .art svg{width:100%; max-width:420px; height:auto; display:block}
.why1 .buy{background:var(--stone)}
.why1 .buy p{color:var(--soft)}
.why1 .buy .eur{fill:#fff; stroke:#C9C4BA; stroke-width:2}
.why1 .buy .eur-t{font:700 44px var(--display); fill:var(--soft)}
.why1 .buy .arrow{fill:none; stroke:#B9B4AA; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.why1 .buy .coin{fill:#fff; stroke:var(--sand-dark); stroke-width:2}
.why1 .buy .coin-t{font:700 44px var(--display); fill:var(--sand-dark)}
.why1 .make{background:var(--midnight); color:#fff}
.why1 .make p{color:var(--slate)}
.why1 .make .rig{fill:#1B1A4A; stroke:#3A3970; stroke-width:2}
.why1 .make .fan{fill:none; stroke:#5B5A90; stroke-width:2; stroke-dasharray:6 5; transform-box:fill-box; transform-origin:center; animation:spin 1.6s linear infinite}
.why1 .make .led{fill:var(--hash)}
.why1 .make .track{stroke:#2C2B62; stroke-width:3; stroke-dasharray:2 8; stroke-linecap:round}
.why1 .make .bit{fill:var(--sand)}
.why1 .make .wallet{fill:var(--sand)}
.why1 .make .wallet-line{stroke:var(--sand-dark); stroke-width:2}
.why1 .make .clasp{fill:var(--midnight)}
.week{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; max-width:420px}
.week li{position:relative; text-align:center; font:600 13px/1 var(--body); color:var(--slate); padding:30px 0 0}
.week li::before{content:"₿"; position:absolute; left:50%; top:0; translate:-50% 0; width:22px; height:22px; border-radius:50%; background:var(--sand); color:var(--midnight); font:800 13px/22px var(--display); opacity:.15; animation:day 7s infinite}
.week li:nth-child(2)::before{animation-delay:.5s} .week li:nth-child(3)::before{animation-delay:1s} .week li:nth-child(4)::before{animation-delay:1.5s}
.week li:nth-child(5)::before{animation-delay:2s} .week li:nth-child(6)::before{animation-delay:2.5s} .week li:nth-child(7)::before{animation-delay:3s}
@keyframes day{0%,4%{opacity:.15; transform:scale(.7)} 10%,85%{opacity:1; transform:scale(1)} 100%{opacity:.15; transform:scale(.7)}}
@keyframes spin{to{transform:rotate(360deg)}}
.why1 .tail{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:20px clamp(40px,6vw,88px); align-items:center}
.why1 .tail .big{grid-column:1; margin:0; color:var(--text); font-weight:500}
.why1 .tail > p:not(.big){grid-column:1; margin:0; color:var(--soft)}
.why1 .tail .video{grid-column:2; grid-row:1 / span 2}
@media (max-width:900px){
  .why1 .duo, .why1 .tail{grid-template-columns:1fr}
  .why1 .tail .video{grid-column:1; grid-row:auto}
}
@media (prefers-reduced-motion:reduce){.why1 .make .fan, .week li::before{animation:none; opacity:1}}

/* waarom minen: variant 2, Mitchell vertelt */
.why2{padding-block:clamp(80px,10vw,140px); background:#fff}
.why2 .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(40px,6vw,88px); align-items:start}
.why2 .wvideo{position:sticky; top:120px}
.why2 .story{display:grid; gap:20px}
.why2 .story > p{margin:0; font-size:clamp(18px,1.4vw,20px); line-height:1.6; color:var(--soft)}
.why2 .story h2{margin-bottom:8px}
.why2 blockquote{margin:16px 0; padding:0; display:grid; gap:20px}
.why2 blockquote p{margin:0; font:700 clamp(24px,2.3vw,32px)/1.25 var(--display); letter-spacing:-.02em; color:var(--text)}
.why2 blockquote p::before{content:"“"; color:var(--sand-dark)}
.why2 blockquote p::after{content:"”"; color:var(--sand-dark)}
.why2 blockquote footer{display:grid; grid-template-columns:48px auto; column-gap:14px; align-items:center; font-weight:700; color:var(--text)}
.why2 blockquote footer img{grid-row:1 / span 2; width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:20% 20%}
.why2 blockquote footer span{font-weight:400; font-size:15.5px; color:var(--soft)}
@media (max-width:900px){.why2 .wrap{grid-template-columns:1fr} .why2 .wvideo{position:relative; top:auto}}

/* echte beelden */
.video.card{background:var(--midnight); isolation:isolate}
.video.card::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 85% 15%, rgba(230,199,156,.28), transparent 45%), repeating-linear-gradient(-45deg, rgba(230,199,156,.08) 0 3px, transparent 3px 14px)}
.video.card .cap{font-size:clamp(20px,2vw,28px)}
.realdash{margin:36px 0 0; display:grid; gap:10px}
.realdash img{width:100%; border-radius:10px; border:1px solid var(--rule); box-shadow:0 30px 70px -35px rgba(8,7,39,.45)}
.realdash figcaption{font-size:14.5px; color:var(--soft)}
.wvideo{border-radius:6px; overflow:hidden; background:var(--ink); box-shadow:0 20px 50px -30px rgba(8,7,39,.6)}
.wvideo iframe{display:block; width:100%; aspect-ratio:16/9; height:auto; border:0}
.how .media{padding:clamp(56px,7vw,110px) clamp(24px,5vw,88px) clamp(56px,7vw,110px) max(24px, calc((100vw - 1240px) / 2)); display:grid; gap:20px; align-content:start}
.how .media > p{margin:0; color:var(--slate); font-size:17px; line-height:1.55; max-width:52ch}
.how .media figure{margin:16px 0 0}
.how .media figure img{width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:6px}
@media (max-width:980px){.how .media{order:2; padding:0 24px 64px}}
@media (min-width:981px){.how .media{position:sticky; top:76px; align-self:start}}

/* jij bezit de machine (donker) */
.system{background:var(--midnight); color:#fff; position:relative; isolation:isolate; overflow:hidden}
.system::before{content:""; position:absolute; left:-6%; bottom:-20%; width:clamp(240px,30vw,440px); aspect-ratio:1; border-radius:50%; z-index:-1; background:repeating-linear-gradient(-45deg, rgba(230,199,156,.12) 0 3px, transparent 3px 12px)}
.system header{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px clamp(40px,6vw,88px); align-items:end}
.system header .big{margin:0; color:var(--slate)}
.system .lay{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center}
.services{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 32px}
.services li{display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:16px; row-gap:4px; align-items:start}
.services .ic{grid-row:1 / span 2; width:48px; height:48px; border-radius:12px; background:rgba(230,199,156,.12); border:1px solid rgba(230,199,156,.28); display:grid; place-items:center}
.services .ic svg{width:24px; height:24px; fill:none; stroke:var(--sand); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.services b{font:700 18px/1.3 var(--display); color:#fff; padding-top:2px}
.services li > span:last-child{color:var(--slate); font-size:16px; line-height:1.5}
.system .realdash{margin:0}
.system .realdash img{border:0; box-shadow:0 0 0 10px rgba(230,199,156,.9), 0 40px 90px -30px rgba(0,0,0,.7); border-radius:8px}
.system .realdash figcaption{color:var(--slate); margin-top:14px}
@media (max-width:900px){.system header, .system .lay{grid-template-columns:1fr} .services{grid-template-columns:1fr}}

/* waarom de emiraten (zand) */
.ev p{margin:0}
.ev .src{font-size:14px; color:var(--soft)}
.ev3{padding-block:clamp(80px,10vw,130px); background:#EFDDBF; position:relative; isolation:isolate; overflow:hidden}
.ev3::before{content:""; position:absolute; right:-140px; top:-140px; width:clamp(300px,34vw,520px); aspect-ratio:1; border-radius:50%; z-index:-1; background:repeating-linear-gradient(-45deg, rgba(125,94,53,.16) 0 2px, transparent 2px 11px)}
.ev3 .wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:start}
.ev3 .copy{display:grid; gap:26px}
.ev3 .copy .big{color:#4A3B27}
.ev3 .video{border-radius:10px; box-shadow:0 30px 60px -30px rgba(8,7,39,.55)}
.ev3 .list{display:grid; padding-top:8px}
.ev3 .list div{display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:24px 0; border-bottom:1px solid rgba(8,7,39,.16)}
.ev3 .list div:first-child{border-top:2px solid var(--midnight)}
.ev3 .list b{font:800 clamp(44px,4.4vw,64px)/.95 var(--display); letter-spacing:-.045em; color:var(--midnight)}
.ev3 .list p{color:#4A3B27; font-size:17px; line-height:1.5; max-width:38ch}
.ev3 .src{color:#6B5A42; margin-top:20px}
@media (max-width:900px){.ev3 .wrap{grid-template-columns:1fr}}


.ev3 .vframe{position:relative; padding:clamp(26px,3.4vw,46px) clamp(12px,1.8vw,22px); transform:rotate(-2deg); margin-top:6px}
.ev3 .vframe::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--midnight); border-radius:22px; transform:rotate(4deg) skewX(-2deg); box-shadow:0 30px 70px -30px rgba(8,7,39,.55)}
.ev3 .vframe .video{transform:rotate(2deg); box-shadow:none; border-radius:4px}

/* de machine is van jou: stapel documenten */
.ov p{margin:0}
.ov1{padding-block:clamp(80px,10vw,130px); background:var(--stone); overflow:hidden}
.ov1 .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(48px,7vw,110px); align-items:center}
.ov1 .stack{position:relative; width:100%; max-width:520px; aspect-ratio:1/1.02}
.ov1 .paper{position:absolute; width:64%; aspect-ratio:1/1.32; background:#fff; border-radius:6px; box-shadow:0 1px 0 rgba(8,7,39,.05), 0 24px 50px -24px rgba(8,7,39,.35); padding:26px 26px; display:grid; align-content:start; gap:10px}
.ov1 .paper b{font:700 17px/1.2 var(--display); color:var(--midnight)}
.ov1 .paper small{font-size:13px; color:var(--soft)}
.ov1 .paper i{display:block; height:7px; border-radius:4px; background:#ECEAE4}
.ov1 .paper i.s{width:62%} .ov1 .paper i.m{width:84%}
.ov1 .p1{left:2%; top:6%; transform:rotate(-8deg)}
.ov1 .p2{left:12%; top:3%; transform:rotate(-3deg)}
.ov1 .p3{left:22%; top:2%; transform:rotate(2deg)}
.ov1 .p4{left:30%; top:5%; transform:rotate(6deg); border:2px solid var(--sand)}
.ov1 .seal{position:absolute; right:22px; bottom:24px; width:86px; height:86px; border-radius:50%; border:2px dashed var(--sand-dark); color:var(--sand-dark); display:grid; place-items:center; text-align:center; font:800 11px/1.15 var(--display); letter-spacing:.06em; transform:rotate(-12deg)}
.ov1 .copy{display:grid; gap:24px}
.ov1 ol{list-style:none; margin:0; padding:0; counter-reset:d; display:grid; gap:14px}
.ov1 ol li{counter-increment:d; display:grid; grid-template-columns:34px minmax(0,1fr); gap:2px 12px}
.ov1 ol li::before{content:counter(d); grid-row:1 / span 2; width:28px; height:28px; border-radius:50%; background:var(--midnight); color:var(--sand); font:700 14px/28px var(--display); text-align:center}
.ov1 ol b{font:700 18px/1.3 var(--display)}
.ov1 ol span{color:var(--soft); font-size:16px}
.ov1 .what{padding:22px 24px; background:#fff; border-radius:14px; font-size:16.5px; color:var(--soft); line-height:1.55}
.ov1 .what strong{color:var(--text)}
@media (max-width:900px){.ov1 .wrap{grid-template-columns:1fr; gap:40px} .ov1 .stack{max-width:420px; margin-inline:auto} .ov1 .paper{padding:18px} .ov1 .paper b{font-size:15px} .ov1 .seal{width:64px; height:64px; right:14px; bottom:16px; font-size:9px}}


/* klanten (kaarten + telefoons) */
.kv p, .kv blockquote{margin:0}
.flag{width:20px; height:20px; border-radius:50%; flex:none; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.tpr{display:inline-flex; align-items:center; gap:8px; font-size:16px}
.tpr i{width:20px; height:20px; background:#00B67A; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.k3{padding-block:clamp(90px,11vw,150px); background:linear-gradient(180deg,#fff,#FBF6EE)}
.k3 .head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:20px 40px}
.k3 .head h2{max-width:14ch}
.k3 .head .meta{display:flex; gap:28px; align-items:center; flex-wrap:wrap; color:var(--soft)}
.k3 .head .meta b{color:var(--text)}
.k3 .cards{margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.k3 .card{background:#fff; border-radius:20px; padding:32px 30px; box-shadow:0 1px 0 rgba(8,7,39,.04), 0 30px 60px -40px rgba(125,94,53,.5); display:grid; gap:22px; align-content:space-between; position:relative}
.k3 .card::before{content:"“"; font:800 72px/.6 var(--display); color:var(--sand); height:30px}
.k3 .card blockquote{font-size:18px; line-height:1.6; color:var(--text)}
.k3 .card.lead{background:var(--midnight); color:#fff}
.k3 .card.lead blockquote{color:#fff; font:700 21px/1.45 var(--display); letter-spacing:-.01em}
.k3 .person{display:flex; align-items:center; gap:14px}
.k3 .av{width:46px; height:46px; border-radius:50%; background:var(--sand); color:var(--midnight); display:grid; place-items:center; font:800 18px/1 var(--display)}
.k3 .person b{display:block; font-weight:700}
.k3 .person div span{display:flex; align-items:center; gap:6px; font-size:14.5px; color:var(--soft)}
.k3 .card.lead .person div span{color:var(--slate)}
@media (max-width:900px){.k3 .cards{grid-template-columns:1fr}}
.rnote{margin-top:14px; font-size:14px; color:var(--soft)}
.rnote a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.phones{margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.phones img{width:100%; border-radius:22px; border:6px solid var(--midnight); box-shadow:0 30px 60px -30px rgba(8,7,39,.5)}
.phones img:nth-child(even){transform:translateY(28px)}
.phones + .rnote{margin-top:48px}
@media (max-width:700px){.phones{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* cta's tussen de secties */
.cta-row{margin-top:32px; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center}
.cta-row.center{justify-content:center; margin-top:clamp(40px,5vw,56px)}
.system header .cta-row{margin-top:0; grid-column:2}
@media (max-width:900px){.system header .cta-row{grid-column:auto}}
.letter .cta-row{margin-top:40px}

/* team: raster met 80+ tegel */
.team .wrap{display:block}
.team .top2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px clamp(40px,6vw,88px); align-items:end}
.team .top2 .big{margin:0}
.team .grid12{margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:24px 18px}
.team .grid12 figure{margin:0}
.team .grid12 img, .team .grid12 .initial{width:100%; aspect-ratio:1; border-radius:16px; object-fit:cover; display:block}
.team .grid12 .initial{background:var(--sand); color:var(--midnight); display:grid; place-items:center; font:800 clamp(48px,5vw,72px)/1 var(--display)}
.team .grid12 figcaption{margin-top:12px; display:grid; gap:2px}
.team .grid12 figcaption b{font:700 17px/1.2 var(--display)}
.team .grid12 figcaption span{font-size:14px; color:var(--soft)}
.team .grid12 .plus{background:var(--midnight); border-radius:16px; aspect-ratio:1; display:grid; place-items:center; text-align:center; padding:16px; color:#fff}
.team .grid12 .plus b{display:block; font:800 clamp(34px,3.4vw,48px)/1 var(--display); color:var(--sand)}
.team .grid12 .plus span{font-size:13.5px; color:var(--slate); display:block; margin-top:6px}
@media (max-width:900px){.team .top2{grid-template-columns:1fr} .team .grid12{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.team .grid12{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* brief van mitchell (papier) */
.lv p{margin:0} .lv figure{margin:0}
.l2{padding-block:clamp(80px,10vw,130px); background:var(--midnight); position:relative; overflow:hidden}
.l2 .paper{position:relative; max-width:760px; margin:0 auto; background:#FBF7F0; color:#2A2A35; border-radius:4px; padding:clamp(32px,5vw,72px); transform:rotate(-.8deg); box-shadow:0 40px 90px -30px rgba(0,0,0,.6); display:grid; gap:18px; font:400 clamp(17px,1.3vw,19px)/1.75 Georgia, "Times New Roman", serif}
.l2 .lh{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:22px; border-bottom:1px solid #E8DFCF; margin-bottom:10px; font:500 13px/1 var(--body); color:#8B7A62; letter-spacing:.04em}
.l2 .lh img{height:22px; width:auto}
.l2 h2{font-family:var(--display); color:var(--midnight); font-size:clamp(30px,3vw,42px)}
.l2 .sig2{display:grid; gap:2px; margin-top:12px; font-family:var(--body)} .l2 .hand{font:italic 34px/1 Georgia, serif; color:var(--midnight); margin-bottom:6px} .l2 .sig2 b{font:700 17px/1.2 var(--display)} .l2 .sig2 span:last-child{font-size:14px; color:#8B7A62}
.l2 .polaroid{position:absolute; right:-70px; top:120px; width:200px; background:#fff; padding:10px 10px 14px; transform:rotate(6deg); box-shadow:0 20px 40px -16px rgba(0,0,0,.5); font:500 13px/1.3 var(--body); color:#555}
.l2 .polaroid img{width:100%; aspect-ratio:1; object-fit:cover; object-position:20% 30%; display:block; margin-bottom:8px}
@media (max-width:1000px){.l2 .polaroid{position:static; transform:rotate(2deg); width:180px; margin-top:10px}}
@media (max-width:700px){
  .l2 .paper{transform:none; padding:28px 22px; border-radius:6px}
  .l2 .lh{flex-direction:column; align-items:flex-start; gap:10px}
  .l2 .polaroid{position:static; transform:rotate(-2deg); width:min(220px,70%); margin:14px 0 4px}
}

/* dienstensectie: uitlijning */
.system header{align-items:end}
.system header .intro{display:grid; gap:24px; justify-items:start}
.system header .intro .cta-row{margin-top:0; grid-column:auto}
.services li{display:flex; gap:16px; align-items:flex-start}
.services li > div{display:grid; gap:4px}
.services li > div > span{color:var(--slate); font-size:16px; line-height:1.5}
.services .ic{flex:none}

/* gesprek: knop in plaats van agenda */
.call .copy .big{color:#C9CDE0}
.book h3{font-size:20px}
.book .get{list-style:none; margin:0 0 6px; padding:0; display:grid; gap:0}
.book .get li{position:relative; padding:13px 0 13px 32px; border-top:1px solid var(--rule); font-size:16.5px; color:var(--text)}
.book .get li:last-child{border-bottom:1px solid var(--rule)}
.book .get li::before{content:""; position:absolute; left:4px; top:20px; width:13px; height:7px; border-left:2.5px solid var(--sand-dark); border-bottom:2.5px solid var(--sand-dark); transform:rotate(-45deg)}

/* footer: onderdeel van Epic Global */
.foot .global{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:40px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12); color:#C9CDE0; font-size:15.5px}
.foot .global img{height:28px; width:auto}

/* zandkleurig kader rond de procesvideo (zoals de hero) */
.sandframe{position:relative; padding:clamp(24px,3vw,40px) clamp(12px,1.6vw,20px); transform:rotate(2deg); margin:6px 6px 10px}
.sandframe::before{content:""; position:absolute; inset:0; z-index:0; background:var(--sand); border-radius:22px; transform:rotate(-4deg) skewX(2deg); box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.sandframe .video{position:relative; z-index:1; transform:rotate(-2deg); border-radius:4px}
@media (max-width:520px){.sandframe{transform:rotate(1.5deg)}}

/* trustpilot widget */
.tp-box{width:236px; max-width:100%; min-height:20px}
.tp-box > a{color:inherit; text-decoration:none}
.k3 .head .meta .tp-box{width:240px}
.sandframe .wvideo, .ev3 .vframe .wvideo{position:relative; z-index:1}
.sandframe .wvideo{transform:rotate(-2deg); border-radius:4px}
.ev3 .vframe .wvideo{transform:rotate(2deg); border-radius:4px; box-shadow:none}