@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/BarlowCondensed-600.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/BarlowCondensed-800.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/BarlowCondensed-900.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Inter-400.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Inter-500.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Inter-600.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Inter-700.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;
}
.s-paesano{background-image:url(/img/s-paesano.jpg)}
.s-bonbon{background-image:url(/img/s-bonbon.jpg)}
.s-mayfair{background-image:url(/img/s-mayfair.jpg)}
.s-eighteen{background-image:url(/img/s-eighteen.jpg)}
.s-amnesia{background-image:url(/img/s-amnesia.jpg)}
.s-thevilla{background-image:url(/img/s-thevilla.jpg)}
.s-bbi{background-image:url(/img/s-bbi.jpg)}
.s-viplounge{background-image:url(/img/s-viplounge.jpg)}
.s-zla{background-image:url(/img/s-zla.jpg)}
.s-hpmotors{background-image:url(/img/s-hpmotors.jpg)}
.s-theritor{background-image:url(/img/s-theritor.jpg)}
.s-dermaart{background-image:url(/img/s-dermaart.jpg)}
.s-melliere{background-image:url(/img/s-melliere.jpg)}
.s-shato{background-image:url(/img/s-shato.jpg)}
.s-jinbian{background-image:url(/img/s-jinbian.jpg)}
.s-soho{background-image:url(/img/s-soho.jpg)}
.s-ultimatum{background-image:url(/img/s-ultimatum.jpg)}
.s-voetbal{background-image:url(/img/s-voetbal.jpg)}
.s-carre{background-image:url(/img/s-carre.jpg)}
.s-mndeluxe{background-image:url(/img/s-mndeluxe.jpg)}
.cs-bbi{background-image:url(/img/cs-bbi.jpg)}
.cs-carre{background-image:url(/img/cs-carre.jpg)}
.cs-dermaart{background-image:url(/img/cs-dermaart.jpg)}
.cs-eighteen{background-image:url(/img/cs-eighteen.jpg)}
.cs-jinbian{background-image:url(/img/cs-jinbian.jpg)}
.cs-mayfair{background-image:url(/img/cs-mayfair.jpg)}
.cs-melliere{background-image:url(/img/cs-melliere.jpg)}
.cs-mndeluxe{background-image:url(/img/cs-mndeluxe.jpg)}
.cs-theritor{background-image:url(/img/cs-theritor.jpg)}
.cs-viplounge{background-image:url(/img/cs-viplounge.jpg)}
.cs-zla{background-image:url(/img/cs-zla.jpg)}
.sv-apps{background-image:url(/img/sv-apps.jpg)}
.sv-branding{background-image:url(/img/sv-branding.jpg)}
.sv-content{background-image:url(/img/sv-content.jpg)}
.sv-grafisch{background-image:url(/img/sv-grafisch.jpg)}
.sv-marketing{background-image:url(/img/sv-marketing.jpg)}
.sv-seo{background-image:url(/img/sv-seo.jpg)}
.sv-webdesign{background-image:url(/img/sv-webdesign.jpg)}
.s-meir-office{background-image:url(/img/office-meir-v2.jpg)}
.ps-interior{background-image:url(/img/office-interior-v2.jpg)}
.ps-evening{background-image:url(/img/office-evening-v2.jpg)}


*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ground:#0b0b10; --panel:#17171f; --ink:#f6f4f0; --muted:#a8a8b3; --dim:#77777f;
  --accent:#fe136b; --accent-2:#ff4d92; --card:#1c1c25; --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.09); --maxw:1400px;
}
html{scroll-behavior:smooth}
html,body{background:var(--ground);color:var(--ink);font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.5}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic;color:var(--accent)}
::selection{background:var(--accent);color:#fff}
.wrapmax{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,4vw,64px)}
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.19,1,.22,1)}
html.js .reveal.in{opacity:1;transform:none}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:600 13px/1 'Inter';letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:100px;font:600 15px/1 'Inter';
  cursor:pointer;transition:.35s cubic-bezier(.19,1,.22,1);border:1px solid transparent}
.btn.fill{background:var(--accent);color:#fff;box-shadow:0 10px 40px -12px rgba(254,19,107,.7)}
.btn.fill:hover{transform:translateY(-2px);box-shadow:0 18px 52px -10px rgba(254,19,107,.9)}
.btn.ghost{border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn .ar{transition:transform .35s}
.btn:hover .ar{transform:translateX(4px)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:.4s ease}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav.scrolled{background:rgba(8,8,12,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.brand{display:flex;align-items:center;gap:10px;font-family:'Barlow Condensed';font-weight:900;font-size:23px;
  text-transform:uppercase;letter-spacing:.02em}
.brand .bolt{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px 2px rgba(254,19,107,.7)}
.nav-links{display:flex;gap:30px;font:600 14px/1 'Inter';color:#d7d5db;align-items:center}
.nav-links>a,.nav-item>a{position:relative;padding:4px 0;transition:.25s;display:inline-flex;align-items:center;gap:5px}
.nav-links>a::after,.nav-item>a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--accent);transition:.3s}
.nav-links>a:hover,.nav-item>a:hover{color:#fff}.nav-links>a:hover::after,.nav-item:hover>a::after{width:100%}
.nav-item{position:relative}
.nav-item .caret{font-size:15px;transition:transform .3s;opacity:.7}
.nav-item:hover .caret{transform:rotate(90deg)}
.nav-item:hover>a{color:#fff}
/* hover-bridge: pseudo-element closes the gap so the dropdown doesn't vanish */
.nav-item .drop{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);min-width:290px;padding-top:16px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.19,1,.22,1)}
.nav-item .drop::before{content:"";position:absolute;top:0;left:0;right:0;height:20px}
.nav-item:hover .drop,.nav-item:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.drop-in{background:rgba(16,16,20,.94);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--line);
  border-radius:18px;padding:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.85);display:flex;flex-direction:column;gap:2px}
.drop-in a{display:flex;flex-direction:column;gap:3px;padding:13px 16px;border-radius:12px;transition:background .2s}
.drop-in a::after{display:none}
.drop-in a:hover{background:rgba(254,19,107,.12)}
.drop-in a b{font:800 15px/1.1 'Barlow Condensed';text-transform:uppercase;letter-spacing:.02em;color:#fff}
.drop-in a span{font:500 12.5px/1.3 'Inter';color:var(--muted)}
.nav-cta{padding:11px 20px;font-size:13.5px}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav-burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;padding-top:74px}
.aura{position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(38vw 38vw at calc(72% + var(--mx,0px)) calc(46% + var(--my,0px)), rgba(254,19,107,.34), transparent 60%),
    radial-gradient(46vw 46vw at 18% 8%, rgba(90,20,120,.20), transparent 62%);
  filter:blur(8px);animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
.grain{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.vig{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(120% 90% at 50% 30%,transparent 55%,rgba(0,0,0,.55))}
.hero-grid{position:relative;z-index:4;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,4vw,64px)}
.hero-left{max-width:min(760px,52vw)}
.hero-stage{position:absolute;top:0;bottom:0;right:0;left:56%;z-index:2;pointer-events:none;overflow:hidden}
.hero h1{font-size:clamp(46px,7vw,104px);line-height:.9;margin:26px 0}
.hero h1 .r{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .r i{display:block;font-style:normal;transform:translateY(116%);animation:rise .95s cubic-bezier(.19,1,.22,1) forwards}
.hero h1 .r:nth-child(2) i{animation-delay:.10s}.hero h1 .r:nth-child(3) i{animation-delay:.20s}
.hero h1 em{font-style:italic;color:var(--accent)}
@keyframes rise{to{transform:translateY(0)}}
.lede{max-width:44ch;color:#cfcdd4;font-size:clamp(15px,1.15vw,18px);line-height:1.6;margin-bottom:34px;opacity:0;animation:fade 1s ease .5s forwards}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fade 1s ease .65s forwards}
.hero-rail{margin-top:40px;display:flex;gap:10px 22px;flex-wrap:wrap;font:600 12.5px/1 'Inter';letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);opacity:0;animation:fade 1s ease .8s forwards}
.hero-rail span{position:relative;padding-left:22px}
.hero-rail span::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}
@keyframes fade{to{opacity:1}}
.cglow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(52% 55% at 52% 50%,rgba(254,19,107,.30),transparent 68%);filter:blur(6px)}
.stage{position:absolute;inset:0;z-index:1;pointer-events:auto;perspective:1900px;perspective-origin:55% 50%;
  -webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 82%,transparent),linear-gradient(#000,#000);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mask:linear-gradient(90deg,transparent,#000 16%,#000 82%,transparent),linear-gradient(#000,#000)}
.tilt{position:absolute;top:50%;left:0;transform-style:preserve-3d;transform-origin:0 50%;transform:translateY(-50%) rotateY(-15deg) rotateX(3deg)}
.track{display:flex;gap:34px;padding:44px 0;width:max-content;animation:scroll 185s linear infinite;will-change:transform}
.stage:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.card{position:relative;width:clamp(255px,16vw,315px);flex:0 0 auto;border-radius:18px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);box-shadow:0 40px 70px -30px rgba(0,0,0,.85),0 6px 18px -8px rgba(0,0,0,.6);
  transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s;transform:translateZ(0)}
.card:nth-child(even){transform:translateZ(46px) translateY(-14px)}
.card:hover{transform:translateZ(90px) translateY(-14px);box-shadow:0 50px 90px -28px rgba(254,19,107,.5)}
.chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#16161f;border-bottom:1px solid var(--line)}
.dot{width:9px;height:9px;border-radius:50%}.dot.r{background:#ff5f57}.dot.y{background:#febc2e}.dot.g{background:#28c840}
.bar{margin-left:8px;flex:1;height:19px;border-radius:100px;background:#0d0d14;border:1px solid var(--line);display:flex;align-items:center;
  padding:0 11px;font:500 10.5px/1 'Inter';color:#6d6d78;overflow:hidden;white-space:nowrap}
.shot{aspect-ratio:4/5;background-size:cover;background-position:top center}
figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:13px 15px;background:rgba(10,10,15,.6);backdrop-filter:blur(6px)}
figcaption b{font-family:'Barlow Condensed';font-weight:800;font-size:17px;text-transform:uppercase}
figcaption span{font:600 10.5px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* CLIENT MARQUEE */
.logos{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:34px 0;overflow:hidden;background:#0a0a0f;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logos .run{display:flex;align-items:center;gap:0;width:max-content;animation:scroll2 46s linear infinite}
.logos:hover .run{animation-play-state:paused}
.logos .lg{display:flex;align-items:center;padding:0 clamp(26px,4vw,54px)}
.logos .lg img{height:clamp(22px,2.3vw,32px);width:auto;filter:brightness(0) invert(1);opacity:.5;transition:opacity .35s}
.logos .lg:hover img{opacity:1}
@keyframes scroll2{to{transform:translateX(-50%)}}

/* SECTION SHELL */
section.blk{position:relative;padding:clamp(80px,10vw,150px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:58px}
.sec-head h2{font-size:clamp(34px,5vw,72px);line-height:.95;max-width:16ch}
.sec-head p{max-width:38ch;color:var(--muted);font-size:16px;line-height:1.65}
.sec-num{font:600 13px/1 'Inter';letter-spacing:.2em;color:var(--dim)}

/* POSITIONING statement */
.stmt{padding:clamp(90px,12vw,170px) 0;text-align:center;position:relative;overflow:hidden}
.stmt::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 60% at 50% 40%,rgba(254,19,107,.14),transparent 70%)}
.stmt h2{font-size:clamp(38px,6.4vw,104px);line-height:.92;max-width:18ch;margin:0 auto}
.stmt h2 em{font-style:italic;color:var(--accent)}
.stmt p{margin-top:26px;color:#cfcdd4;font-size:clamp(15px,1.3vw,19px)}

/* DIENSTEN bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.svc{position:relative;background:linear-gradient(180deg,var(--panel),#0a0a10);border:1px solid var(--line);border-radius:20px;
  padding:34px;overflow:hidden;transition:.45s cubic-bezier(.19,1,.22,1);min-height:230px;display:flex;flex-direction:column;justify-content:space-between}
.svc::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(135deg,rgba(254,19,107,.5),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.45s}
.svc:hover{transform:translateY(-6px);border-color:transparent}
.svc:hover::before{opacity:1}
.svc:hover .glow{opacity:1}
.svc .glow{position:absolute;top:-40%;right:-20%;width:60%;height:80%;background:radial-gradient(circle,rgba(254,19,107,.28),transparent 65%);filter:blur(20px);opacity:0;transition:.45s;pointer-events:none}
.svc .no{font:600 12px/1 'Inter';letter-spacing:.2em;color:var(--dim)}
.svc h3{font-size:clamp(24px,2vw,32px);margin:14px 0 10px}
.svc p{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:34ch}
.svc .tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px}
.svc .tags span{font:600 11px/1 'Inter';letter-spacing:.06em;text-transform:uppercase;color:#c9c7cf;
  border:1px solid var(--line);border-radius:100px;padding:7px 11px}
.svc.wide{grid-column:span 3}.svc.third{grid-column:span 2}

/* WERK */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--card);
  display:flex;flex-direction:column;transition:.45s cubic-bezier(.19,1,.22,1)}
.case-img{aspect-ratio:4/3;background-size:cover;background-position:top center;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.case:hover{transform:translateY(-6px);border-color:rgba(254,19,107,.4);box-shadow:0 40px 80px -40px rgba(254,19,107,.4)}
.case:hover .case-img{transform:scale(1.05)}
.case-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px}
.case-sector{font:600 11px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.case-body h3{font-size:clamp(21px,1.7vw,27px)}
.case-metric{color:#cfcdd4;font-size:14px}
.case-link{margin-top:10px;font:600 13px/1 'Inter';color:var(--muted);display:inline-flex;gap:7px;transition:.3s}
.case-link i{transition:transform .3s}
.case:hover .case-link{color:#fff}.case:hover .case-link i{transform:translateX(4px)}

/* AANPAK */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line-2);border:1px solid var(--line-2);border-radius:20px;overflow:hidden}
.step{background:var(--ground);padding:38px 30px;transition:.4s;position:relative}
.step:hover{background:var(--panel)}
.step .sn{font-family:'Barlow Condensed';font-weight:900;font-size:54px;color:transparent;-webkit-text-stroke:1.4px rgba(254,19,107,.55);line-height:1}
.step h3{font-size:23px;margin:16px 0 10px}
.step p{color:var(--muted);font-size:14px;line-height:1.6}

/* CIJFERS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
.stat{text-align:center}
.stat b{display:block;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(44px,5.5vw,82px);line-height:1}
.stat b .u{color:var(--accent)}
.stat span{display:block;margin-top:8px;font:600 13px/1.3 'Inter';letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* WAAROM split */
.why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.why h2{font-size:clamp(34px,4.6vw,68px);line-height:.96}
.why h2 em{font-style:italic;color:var(--accent)}
.why .pts{display:flex;flex-direction:column;gap:22px}
.why .pt{display:flex;gap:16px;align-items:flex-start}
.why .pt .ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--accent);background:rgba(254,19,107,.06)}
.why .pt h4{font-family:'Inter';font-weight:700;font-size:16px;margin-bottom:5px}
.why .pt p{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:46ch}

/* FAQ */
.faqwrap{max-width:860px;margin:0 auto}
.faq{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 4px;font-family:'Barlow Condensed';font-weight:800;font-size:clamp(20px,2vw,27px);text-transform:uppercase;letter-spacing:.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.pm{position:relative;flex:0 0 auto;width:20px;height:20px}
.pm::before,.pm::after{content:"";position:absolute;background:var(--accent);border-radius:2px;transition:.35s}
.pm::before{top:9px;left:0;width:20px;height:2px}
.pm::after{top:0;left:9px;width:2px;height:20px}
.faq[open] .pm::after{transform:rotate(90deg);opacity:0}
.faq-a{overflow:hidden;padding:0 4px 26px}
.faq-a p{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:70ch}

/* CTA FOOTER */
.cta{position:relative;text-align:center;padding:clamp(90px,12vw,160px) 0;overflow:hidden}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 50% 60%,rgba(254,19,107,.20),transparent 68%)}
.cta h2{font-size:clamp(42px,7vw,116px);line-height:.9;max-width:16ch;margin:0 auto 12px}
.cta .sub{color:#cfcdd4;font-size:clamp(15px,1.3vw,19px);margin-bottom:36px}
.cta .contactline{margin-top:34px;display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:14.5px}
.cta .contactline a{color:#fff;border-bottom:1px solid rgba(254,19,107,.5);padding-bottom:1px}

/* FOOTER */
footer.ft{border-top:1px solid var(--line);padding:64px 0 40px;background:#0a0a0f}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:30px;margin-bottom:48px}
.ft-brand p{color:var(--muted);font-size:14px;line-height:1.65;max-width:34ch;margin-top:16px}
.ft-col h5{font:700 12px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.ft-col a,.ft-col p{display:block;color:var(--muted);font-size:14px;margin-bottom:10px;transition:.25s}
.ft-col a:hover{color:var(--accent)}
.ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line-2);padding-top:26px;color:var(--dim);font-size:12.5px}
.ft-bottom .rt{display:flex;gap:20px}

/* RESPONSIVE */
@media (max-width:1000px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .svc.wide,.svc.third{grid-column:span 1}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:34px 22px}
  .why{grid-template-columns:1fr;gap:34px}
  .cases{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){.cases{grid-template-columns:1fr}}
@media (max-width:900px){
  .nav-links,.nav .nav-cta{display:none}
  .nav-burger{display:flex}
  .hero{flex-direction:column;justify-content:center;padding-top:100px;padding-bottom:54px}
  .hero-grid{order:1}.hero-left{max-width:none;order:1}
  .hero-stage{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:52vh;order:2;margin-top:22px;pointer-events:auto}
  .tilt{transform:translateY(-50%) rotateY(-18deg) rotateX(5deg)}
  .hero h1{font-size:clamp(44px,13vw,74px)}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .track,.logos .run,.aura{animation:none}
  .hero h1 .r i,.lede,.hero-cta,.hero-rail{animation:none;transform:none;opacity:1}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}


/* ---- multi-view router ---- */
.views{position:relative}
.view{display:none}
.view.active{display:block;animation:viewin .5s ease}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-hero{padding:calc(74px + clamp(56px,9vw,120px)) 0 clamp(36px,5vw,64px);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(52% 90% at 82% 0,rgba(254,19,107,.17),transparent 64%)}
.page-title{font-size:clamp(42px,6.4vw,94px);line-height:.92;margin:22px 0 20px;max-width:17ch}
.page-title em{font-style:italic;color:var(--accent)}
.page-intro{max-width:58ch;color:#cfcdd4;font-size:clamp(16px,1.3vw,19px);line-height:1.62}
/* werk filters + grid */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:42px}
.chip{font:600 13px/1 'Inter';color:#c9c7cf;background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:11px 20px;cursor:pointer;transition:.25s}
.chip:hover{border-color:var(--accent);color:#fff}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.workgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wcard{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--card);transition:.45s cubic-bezier(.19,1,.22,1)}
.wcard.hide{display:none}
.wcard-img{aspect-ratio:4/5;background-size:cover;background-position:top center;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.wcard:hover{transform:translateY(-6px);border-color:rgba(254,19,107,.45);box-shadow:0 40px 80px -42px rgba(254,19,107,.5)}
.wcard:hover .wcard-img{transform:scale(1.06)}
.wcard-body{padding:17px 20px;display:flex;flex-direction:column;gap:5px}
.wcard-top{display:flex;align-items:center;justify-content:space-between}
.wcard-body h3{font-size:22px}
.wcard-arrow{color:var(--accent);transition:transform .3s;font-size:17px}
.wcard:hover .wcard-arrow{transform:translate(3px,-3px)}
.wcard-sector{font:600 11px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* about */
.about-photo{height:min(58vh,540px);border-radius:24px;background-size:cover;background-position:center;margin-bottom:clamp(44px,6vw,80px);border:1px solid var(--line)}
.about-story{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,70px);padding-bottom:clamp(48px,7vw,88px)}
.about-story h2{font-size:clamp(30px,3.6vw,54px);line-height:1;letter-spacing:-.01em}
.about-story h2 em{font-style:italic;color:var(--accent)}
.about-story .body p{color:#cfcdd4;font-size:16px;line-height:1.75;margin-bottom:18px}
.photo-strip{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:clamp(20px,3vw,40px)}
.photo-strip>div{height:clamp(260px,34vw,380px);border-radius:20px;background-size:cover;background-position:center;border:1px solid var(--line)}
/* contact */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,4vw,60px);padding-bottom:clamp(80px,10vw,140px);align-items:start}
.cform{display:flex;flex-direction:column;gap:18px}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cform label{font:600 11px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;display:block}
.cform input,.cform textarea{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 16px;color:var(--ink);font:400 15px/1.5 'Inter';transition:.25s}
.cform input::placeholder,.cform textarea::placeholder{color:#5f5f6a}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(254,19,107,.15)}
.cform textarea{resize:vertical;min-height:130px}
.cinfo{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:22px}
.cinfo .ci h5{font:700 12px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:9px}
.cinfo .ci p{color:var(--muted);font-size:15px;line-height:1.6}
.cinfo .ci a{color:var(--accent);font-size:15px}
.cinfo .ci-photo{height:180px;border-radius:14px;background-size:cover;background-position:center;margin-top:4px}
/* mobile menu */
body.menu-open{overflow:hidden}
@media (max-width:900px){
  .nav-links{position:fixed;inset:74px 0 auto 0;background:rgba(8,8,12,.98);backdrop-filter:blur(16px);flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .4s cubic-bezier(.19,1,.22,1);display:flex}
  body.menu-open .nav-links{transform:translateY(0)}
  .nav-links a{padding:16px clamp(22px,4vw,64px);font-size:17px;width:100%}
  .nav-links a::after{display:none}
  .nav-links{max-height:calc(100vh - 74px);overflow-y:auto}
  .nav-item{width:100%}
  .nav-item .caret{display:none}
  .nav-item>a{padding:16px clamp(22px,4vw,64px);font-size:17px;width:100%}
  .nav-item .drop{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;padding-top:0;min-width:0;width:100%}
  .nav-item .drop::before{display:none}
  .drop-in{background:rgba(255,255,255,.03);border:0;border-radius:0;box-shadow:none;padding:0 clamp(22px,4vw,64px) 10px;gap:0}
  .drop-in a{padding:11px 0}
  .nav-burger{display:flex;z-index:60}
  body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .nav-burger span:nth-child(2){opacity:0}
  body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .workgrid{grid-template-columns:repeat(2,1fr)}
  .about-story,.photo-strip,.contact-grid{grid-template-columns:1fr}
}
@media (max-width:560px){ .workgrid{grid-template-columns:1fr} .cform .row2{grid-template-columns:1fr} }


/* ===== state-of-the-art interaction layer ===== */
/* intro loader */
.loader{position:fixed;inset:0;z-index:300;background:var(--ground);display:grid;place-items:center;transition:opacity .7s ease,visibility .7s}
body.loaded .loader{opacity:0;visibility:hidden;pointer-events:none}
.loader-in{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader-bolt{width:15px;height:15px;border-radius:50%;background:var(--accent);box-shadow:0 0 34px 5px rgba(254,19,107,.7);animation:lpulse 1s ease-in-out infinite}
@keyframes lpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.55}}
.loader-word{overflow:hidden;padding-bottom:.08em}
.loader-word i{display:block;font-family:'Barlow Condensed';font-weight:900;text-transform:uppercase;font-size:clamp(26px,4vw,42px);letter-spacing:.03em;color:var(--ink);transform:translateY(112%);animation:rise .85s cubic-bezier(.19,1,.22,1) .1s forwards}
.loader-bar{width:170px;height:2px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
.loader-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));animation:lload 1.05s ease forwards}
@keyframes lload{to{width:100%}}
/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));z-index:190;transition:width .1s linear}
/* custom cursor */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:310;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button,body.has-cursor summary,body.has-cursor .chip,body.has-cursor input,body.has-cursor textarea,body.has-cursor .card,body.has-cursor .case,body.has-cursor .wcard{cursor:none}
body.has-cursor .cur-dot,body.has-cursor .cur-ring{opacity:1}
.cur-dot{width:6px;height:6px;background:var(--accent);margin:-3px 0 0 -3px}
.cur-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.45);margin:-19px 0 0 -19px;transition:width .3s cubic-bezier(.19,1,.22,1),height .3s cubic-bezier(.19,1,.22,1),margin .3s,background .3s,border-color .3s,opacity .3s}
.cur-ring.hover{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(254,19,107,.12);border-color:transparent}
.cur-ring.label{width:88px;height:88px;margin:-44px 0 0 -44px;background:var(--accent);border-color:transparent}
.cur-label{position:absolute;inset:0;display:grid;place-items:center;font:700 10.5px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .25s}
.cur-ring.label .cur-label{opacity:1}
/* blur-to-focus reveal (upgrade) */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.19,1,.22,1)}
html.js .reveal.in{opacity:1;transform:none}
/* split-text scroll reveal */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.02em .06em .16em 0;margin:0 -.06em -.16em 0}
.split .w > i{display:inline-block;font-style:inherit;color:inherit;transform:translateY(116%);transition:transform .85s cubic-bezier(.19,1,.22,1)}
.split.in .w > i{transform:none}
.split.done .w{overflow:visible}
[data-magnetic]{will-change:transform;transition:transform .35s cubic-bezier(.19,1,.22,1)}
@media (prefers-reduced-motion:reduce){
  .loader-bolt,.loader-word i,.loader-bar i{animation:none}
  .loader-word i{transform:none}.loader-bar i{width:100%}
  html.js .reveal{opacity:1;transform:none;filter:none}
  .split .w > i{transform:none}
}


/* ===== Diensten: hover-reveal service list ===== */
.svc-list{position:relative;border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:24px;padding:clamp(22px,3vw,38px) 4px;
  border-bottom:1px solid var(--line);position:relative;transition:opacity .35s,padding-left .45s cubic-bezier(.19,1,.22,1)}
.svc-idx{font:600 13px/1 'Inter';color:var(--dim);letter-spacing:.1em}
.svc-name{font-family:'Barlow Condensed';font-weight:900;text-transform:uppercase;font-size:clamp(30px,5vw,66px);line-height:.95;letter-spacing:-.01em;transition:color .3s}
.svc-desc{color:var(--muted);font-size:14.5px;max-width:36ch;text-align:right;transition:color .3s}
.svc-ar{color:var(--accent);font-size:22px;opacity:0;transform:translateX(-10px);transition:.45s cubic-bezier(.19,1,.22,1)}
.svc-list:hover .svc-row{opacity:.32}
.svc-row:hover{opacity:1;padding-left:22px}
.svc-row:hover .svc-name{color:var(--accent)}
.svc-row:hover .svc-ar{opacity:1;transform:none}
.svc-preview{position:fixed;top:0;left:0;width:290px;aspect-ratio:4/5;border-radius:14px;background-size:cover;background-position:top center;
  box-shadow:0 40px 80px -28px rgba(0,0,0,.85);pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.9);
  transition:opacity .3s ease,transform .3s cubic-bezier(.19,1,.22,1);z-index:40;border:1px solid var(--line)}
.svc-preview.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* detail grid */
.dt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dt-card{background:linear-gradient(180deg,var(--panel),#0a0a10);border:1px solid var(--line);border-radius:18px;padding:28px;transition:.4s cubic-bezier(.19,1,.22,1)}
.dt-card:hover{transform:translateY(-5px);border-color:rgba(254,19,107,.4)}
.dt-card h3{font-size:22px;margin-bottom:16px}
.dt-card ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.dt-card li{color:var(--muted);font-size:14.5px;padding-left:20px;position:relative}
.dt-card li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dt-card.dt-cta{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,rgba(254,19,107,.12),#0a0a10);border-color:rgba(254,19,107,.3)}
/* ===== Aanpak: sticky-scroll proces ===== */
.proc{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);gap:clamp(30px,5vw,70px);padding-bottom:clamp(40px,6vw,80px)}
.proc-sticky{position:sticky;top:130px;align-self:start}
.proc-num{font-family:'Barlow Condensed';font-weight:900;font-size:clamp(110px,15vw,210px);line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(254,19,107,.6);transition:.5s cubic-bezier(.19,1,.22,1)}
.proc-label{font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;font-size:clamp(20px,2.3vw,30px);margin-top:8px;transition:.4s}
.proc-track{margin-top:22px;height:3px;background:var(--line);border-radius:3px;overflow:hidden;max-width:280px}
.proc-track span{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .6s cubic-bezier(.19,1,.22,1)}
.proc-count{margin-top:14px;font:600 13px/1 'Inter';letter-spacing:.12em;color:var(--muted)}
.proc-steps{display:flex;flex-direction:column}
.proc-step{min-height:68vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line-2);opacity:.35;transition:opacity .5s}
.proc-step.active{opacity:1}
.proc-step .ps-n{font-family:'Barlow Condensed';font-weight:900;font-size:38px;color:var(--accent);line-height:1}
.proc-step h3{font-size:clamp(28px,3.4vw,46px);margin:12px 0 18px;line-height:.98}
.proc-step p{color:#cfcdd4;font-size:clamp(16px,1.25vw,19px);line-height:1.7;max-width:46ch}
@media (max-width:1000px){
  .dt-grid{grid-template-columns:1fr 1fr}
  .proc{grid-template-columns:1fr;gap:0}
  .proc-sticky{position:static;margin-bottom:10px}.proc-num{font-size:90px}
  .proc-step{min-height:auto;padding:38px 0}.proc-step.active{opacity:1}.proc-step{opacity:1}
}
@media (max-width:560px){ .dt-grid{grid-template-columns:1fr} .svc-desc,.svc-ar{display:none} .svc-row{grid-template-columns:auto 1fr} .svc-preview{display:none} }
/* ===== Case-detail ===== */
.case-back{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 'Inter';letter-spacing:.06em;color:var(--muted);transition:.25s}
.case-back:hover{color:var(--accent)} .case-back span{transition:transform .3s;font-size:16px} .case-back:hover span{transform:translateX(-4px)}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.case-tags span{font:600 11px/1 'Inter';letter-spacing:.08em;text-transform:uppercase;color:#c9c7cf;border:1px solid var(--line);border-radius:100px;padding:8px 13px}
.case-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.case-shot{height:min(64vh,640px);background-size:cover;background-position:top center;border-radius:22px;border:1px solid var(--line);box-shadow:0 50px 100px -50px rgba(0,0,0,.85)}
.case-metricbox{display:inline-flex;flex-direction:column;gap:6px;margin-top:clamp(30px,4vw,50px);border-left:2px solid var(--accent);padding-left:20px}
.case-metricbox b{font-family:'Barlow Condensed';font-weight:900;font-size:clamp(30px,4vw,52px);line-height:1}
.case-metricbox span{font:600 12px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* ===== Legal ===== */
.legal{max-width:760px;padding:clamp(10px,2vw,20px) 0 clamp(80px,10vw,140px)}
.legal h3{font-size:clamp(20px,2vw,26px);margin:34px 0 12px}
.legal p{color:#cfcdd4;font-size:16px;line-height:1.75;margin-bottom:10px}
.legal a{color:var(--accent)}
.legal-note{margin-top:34px;color:var(--dim);font-size:13px}
/* ===== licht CH-blok (Klarna-scroll-highlight patroon, CH-huisstijl) ===== */
.lightsec{background:#f5f3ef;color:#141310;padding:clamp(86px,11vw,168px) 0;position:relative;z-index:1}
.lightsec .eyebrow-d{color:#8f8b81}
.lightsec-top{max-width:940px;margin:0 auto clamp(50px,7vw,86px);text-align:center}
.lightsec h2{font-family:'Barlow Condensed';font-weight:900;text-transform:uppercase;color:#141310;
  font-size:clamp(40px,6.4vw,96px);line-height:.9;letter-spacing:-.012em;margin-top:22px;text-wrap:balance}
.lightsec h2 em{font-style:italic;color:var(--accent)}
.lightsec-top p{color:#6b6860;font-size:clamp(16px,1.3vw,19px);line-height:1.65;margin:22px auto 0;max-width:58ch}
.lightsec-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,74px);align-items:center}
.lightsec-photo{aspect-ratio:4/5;border-radius:30px;background-size:cover;background-position:center;
  box-shadow:0 60px 100px -55px rgba(0,0,0,.45);border:1px solid rgba(0,0,0,.06)}
.hl-list{display:flex;flex-direction:column}
.hl{display:block;text-decoration:none;color:inherit;border-top:1px solid rgba(20,19,16,.12);
  padding:clamp(18px,2.1vw,28px) 6px;transition:padding-left .5s cubic-bezier(.19,1,.22,1)}
.hl:last-child{border-bottom:1px solid rgba(20,19,16,.12)}
.hl-n{font:600 11.5px/1 'Inter';letter-spacing:.16em;text-transform:uppercase;color:#b3a89a;transition:color .4s}
.hl b{display:block;font-family:'Barlow Condensed';font-weight:900;text-transform:uppercase;
  font-size:clamp(25px,3.4vw,48px);line-height:.98;color:#cdc7bb;transition:color .45s;margin-top:9px}
.hl p{max-height:0;overflow:hidden;opacity:0;color:#6b6860;font-size:15px;line-height:1.6;margin:0;
  transition:max-height .6s cubic-bezier(.19,1,.22,1),opacity .4s,margin-top .4s}
.hl.active .hl-n{color:var(--accent)}
.hl.active b{color:#141310}
.hl.active p{max-height:110px;opacity:1;margin-top:12px}
.hl:hover b{color:var(--accent)}
.lightsec-cta{text-align:center;margin-top:clamp(46px,6vw,76px)}
@media (hover:none){ .hl p{max-height:110px;opacity:1;margin-top:12px} .hl b{color:#141310} .hl-n{color:var(--accent)} }
@media (max-width:900px){ .lightsec-grid{grid-template-columns:1fr;gap:36px} .lightsec-photo{max-width:440px;margin:0 auto;width:100%} }


/* ===== magnetic floating contact bubble ===== */
.fab{position:fixed;right:clamp(16px,2.5vw,38px);bottom:clamp(16px,2.5vw,38px);z-index:60;width:104px;height:104px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:#fff;text-decoration:none;
  box-shadow:0 20px 50px -12px rgba(254,19,107,.7);transition:transform .4s cubic-bezier(.19,1,.22,1),box-shadow .4s,opacity .4s;will-change:transform}
.fab:hover{box-shadow:0 28px 64px -10px rgba(254,19,107,.95)}
.fab-txt{position:absolute;inset:0;width:100%;height:100%;fill:#fff;animation:fabspin 16s linear infinite}
.fab-txt text{font:700 8.4px/1 'Inter';letter-spacing:.16em}
@keyframes fabspin{to{transform:rotate(360deg)}}
.fab-ar{font-size:24px;line-height:1;transition:transform .35s cubic-bezier(.19,1,.22,1)}
.fab:hover .fab-ar{transform:translate(4px,-4px)}
body.route-contact .fab{opacity:0;transform:scale(.6);pointer-events:none}
@media (max-width:560px){ .fab{width:74px;height:74px} .fab-txt text{font-size:7px} .fab-ar{font-size:20px} }
@media (prefers-reduced-motion:reduce){ .fab-txt{animation:none} ::view-transition-group(*){animation:none} }
/* ===== view transitions ===== */
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.4,0,.2,1)}


/* ===== doc pages (diensten, tools, blog, uitleg) ===== */
.doc-hero{position:relative;padding:clamp(130px,17vw,210px) 0 clamp(40px,6vw,72px);overflow:hidden}
.aura2{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:min(900px,90vw);height:520px;
  background:radial-gradient(closest-side,rgba(254,19,107,.22),transparent 70%);filter:blur(20px);pointer-events:none;z-index:-1}
.doc-h1{font-size:clamp(46px,8vw,120px);line-height:.9;margin:20px 0 0}
.doc-lede{color:#cfcdd4;font-size:clamp(17px,1.5vw,22px);line-height:1.6;max-width:60ch;margin:24px 0 34px}
.doc-h2{font-size:clamp(34px,5vw,72px);line-height:.92;margin:0 0 30px}
.doc-p{color:#dcdae3;font-size:clamp(16px,1.3vw,18px);line-height:1.75;max-width:66ch}
.doc-p strong,.doc-ul strong{color:#fff;font-weight:700}
.doc-h3{font-family:'Barlow Condensed';font-weight:800;font-size:clamp(21px,2.4vw,31px);line-height:1.05;margin:40px 0 12px;color:#fff}
.doc-ul{color:#cfcdd4;font-size:clamp(16px,1.3vw,18px);line-height:1.65;max-width:66ch;margin:14px 0 26px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.doc-ul li{position:relative;padding-left:26px}
.doc-ul li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.doc-table-wrap{overflow-x:auto;margin:26px 0 32px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fff}
.doc-table{width:100%;border-collapse:collapse;font-size:clamp(14px,1.15vw,16px);min-width:460px}
.doc-table th,.doc-table td{text-align:left;padding:13px 18px;border-bottom:1px solid rgba(0,0,0,.08);vertical-align:top}
.doc-table tr:last-child td{border-bottom:none}
.doc-table th{background:rgba(254,19,107,.08);color:#14141a;font-family:'Barlow Condensed';font-weight:700;
  font-size:clamp(13px,1.05vw,15px);letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid rgba(254,19,107,.28)}
.doc-table td{color:#43434d;line-height:1.55}
.doc-table tbody tr:hover td,.doc-table tr:hover td{background:rgba(20,20,26,.025)}
.doc-quote{margin:30px 0;padding:8px 0 8px 24px;border-left:3px solid var(--accent);
  font-size:clamp(19px,1.9vw,25px);line-height:1.5;color:#fff;font-style:italic;max-width:62ch}
/* blog hero + inline beelden */
/* 2-koloms artikel-header: tekst links, hero-beeld rechts (vult de lege ruimte) */
.art-head-grid{display:block}
.art-head-txt{min-width:0}
@media(min-width:920px){
  .art-head-grid:has(.art-hero-img:not([hidden])){display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(34px,4.5vw,68px);align-items:center}
}
.art-hero-img{margin:clamp(30px,4vw,40px) 0 0;max-width:none;padding:0}
@media(min-width:920px){ .art-head-grid .art-hero-img{margin:0} }
.art-hero-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px;border:1px solid var(--line);display:block}
.art-fig{margin:clamp(30px,4vw,44px) 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.art-fig img{width:100%;height:auto;display:block;max-height:540px;object-fit:cover}
.art-fig figcaption{font:500 13px/1.5 'Inter';color:var(--muted);padding:12px 18px}
/* ===== editoriaal blog-artikel systeem ===== */
.art-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:transparent;pointer-events:none}
.art-progress #artProg{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 12px rgba(254,19,107,.6);transition:width .1s linear}
.art-head{padding-bottom:clamp(20px,3vw,34px)}
.art-crumb{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.art-pill{display:inline-block;padding:7px 15px;border-radius:100px;background:rgba(254,19,107,.12);
  border:1px solid rgba(254,19,107,.35);color:var(--accent);font:700 12px/1 'Inter';letter-spacing:.06em;text-transform:uppercase}
.art-title{font-size:clamp(34px,4.4vw,66px);line-height:1.0;letter-spacing:-.015em;margin:20px 0 0;max-width:24ch}
.art-title em,.art-rel-b h4 em,.doc-h2 em,.doc-h3 em,.art-h3 em,.cg-head h3 em,.art-rel-h em{font-style:italic;color:var(--accent)}
.art-deck{color:#cfcdd4;font-size:clamp(18px,1.7vw,23px);line-height:1.5;max-width:60ch;margin:20px 0 0;font-weight:400}
.art-byline{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,3vw,34px);flex-wrap:wrap}
.art-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),#b30d4d);color:#fff;font-family:'Barlow Condensed';font-weight:800;font-size:18px;letter-spacing:.02em}
.art-avatar.lg{width:60px;height:60px;font-size:23px}
.art-by{display:flex;flex-direction:column;line-height:1.3}
.art-by b{color:var(--ink);font-size:15px}
.art-by span{color:var(--muted);font-size:13px}
.art-byline .art-meta{margin-left:auto;color:var(--muted);font-size:13.5px}
@media(max-width:560px){ .art-byline .art-meta{margin-left:0;flex-basis:100%} }
/* layout: sticky TOC + main */
.art-layout{display:block}
@media(min-width:1040px){ .art-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:start} }
.art-toc{display:none}
@media(min-width:1040px){ .art-toc{display:block;position:sticky;top:96px} }
.art-toc-in{border-left:1px solid var(--line);padding-left:20px}
.art-toc h4{font-family:'Barlow Condensed';font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);margin:0 0 14px}
.art-toc nav{display:flex;flex-direction:column;gap:9px}
.art-toc nav a{color:var(--muted);font-size:13.5px;line-height:1.35;text-decoration:none;transition:color .25s,border-color .25s;
  border-left:2px solid transparent;margin-left:-22px;padding-left:20px}
.art-toc nav a:hover{color:#e6e4ea}
.art-toc nav a.on{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.art-main{max-width:840px;min-width:0}
.art-main .article{max-width:none}
/* TL;DR / key takeaways */
.tldr{background:#fff;border:1px solid rgba(0,0,0,.08);
  border-left:4px solid var(--accent);border-radius:14px;padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,32px);margin:0 0 clamp(30px,4vw,44px)}
.tldr h4{font-family:'Barlow Condensed';font-weight:800;font-size:clamp(19px,2vw,24px);text-transform:uppercase;letter-spacing:.03em;color:#14141a;margin:0 0 14px}
.tldr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tldr li{position:relative;padding-left:26px;color:#43434d;font-size:clamp(15px,1.25vw,17px);line-height:1.55}
.tldr li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* callout boxes */
.callout{display:block;position:relative;margin:clamp(26px,3.4vw,38px) 0;padding:20px 24px 20px 58px;border-radius:14px;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-left:3px solid #b9b9c2;font-size:clamp(15px,1.2vw,16.5px);line-height:1.65;color:#43434d}
.callout b{color:#14141a;font-weight:700;margin-right:5px}
.callout::before{content:"";position:absolute;left:20px;top:21px;width:23px;height:23px;background:currentColor;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.callout-tip{border-left-color:var(--accent)}
.callout-tip::before{color:var(--accent);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12c.5.5 1 1.5 1 2h6c0-.5.5-1.5 1-2a7 7 0 0 0-4-12z'/%3E%3C/svg%3E")}
.callout-note{border-left-color:#4a90d9}
.callout-note::before{color:#4a90d9;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}
.callout-warning{border-left-color:#e0a83d}
.callout-warning::before{color:#e0a83d;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.callout-example{border-left-color:#5bb59a}
.callout-example::before{color:#5bb59a;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E")}
/* pull quote */
.pullquote{margin:clamp(34px,4.5vw,52px) 0;padding:6px 0 6px 28px;border-left:3px solid var(--accent);
  font-family:'Barlow Condensed';font-weight:600;font-style:italic;font-size:clamp(26px,3.2vw,40px);line-height:1.12;color:var(--ink);max-width:22ch}
/* stat callout */
.stat-callout{display:flex;flex-direction:column;gap:4px;margin:clamp(30px,4vw,42px) 0;padding:0 0 0 22px;border-left:3px solid var(--accent);max-width:38ch}
.stat-callout b{font-family:'Barlow Condensed';font-weight:900;font-size:clamp(44px,6vw,72px);line-height:.9;color:var(--accent)}
.stat-callout span{color:var(--muted);font-size:14.5px;line-height:1.4}
/* author bio + related */
.art-author{display:flex;gap:20px;align-items:flex-start;margin:clamp(50px,7vw,90px) 0 0;padding:clamp(24px,3vw,32px);
  background:var(--panel);border:1px solid var(--line);border-radius:18px}
.art-author-txt b{color:var(--ink);font-size:17px}
.art-author-txt p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:6px 0 12px;max-width:52ch}
.art-author-link{color:var(--accent);font-weight:600;font-size:14.5px;text-decoration:none}
.art-related{margin-top:clamp(50px,7vw,90px)}
.art-rel-h{font-family:'Barlow Condensed';font-weight:900;font-size:clamp(28px,3.6vw,46px);text-transform:uppercase;color:var(--ink);margin:0 0 clamp(20px,2.6vw,30px)}
.art-rel-h em{font-style:italic;color:var(--accent)}
.art-rel-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:680px){ .art-rel-grid{grid-template-columns:repeat(3,1fr)} }
.art-rel-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;transition:.4s cubic-bezier(.19,1,.22,1)}
.art-rel-card:hover{transform:translateY(-5px);border-color:rgba(254,19,107,.4)}
.art-rel-img{aspect-ratio:16/10;overflow:hidden;background:#111}
.art-rel-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.art-rel-card:hover .art-rel-img img{transform:scale(1.05)}
.art-rel-b{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.art-rel-b h4{font-size:17px;line-height:1.1;color:var(--ink);margin:0}
.art-rel-b .art-meta{color:var(--muted);font-size:12.5px}
/* uitleg term-pagina */
.term-article{max-width:none}
.term-rel-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:680px){ .term-rel-grid{grid-template-columns:repeat(3,1fr)} }
.term-rel-card{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:22px;text-decoration:none;transition:.4s cubic-bezier(.19,1,.22,1)}
.term-rel-card:hover{transform:translateY(-4px);border-color:rgba(254,19,107,.4)}
.term-rel-card h4{font-size:18px;line-height:1.1;color:var(--ink);margin:0}
.term-rel-card .term-arrow{color:var(--accent);font-size:18px;margin-top:4px}
/* ===== lichte accent-kaarten die poppen tegen de donkere body (TL;DR, callouts, tabellen) ===== */
.tldr,.callout,.doc-table-wrap,.art-author,.art-rel-card{box-shadow:0 14px 40px rgba(0,0,0,.35)}
.art-h3{font-size:clamp(22px,2.4vw,32px);margin:34px 0 12px}
.blk .sec-num{display:inline-block;margin-bottom:16px}
/* packages */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
.pkg{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel),#0a0a10);
  border:1px solid var(--line);border-radius:20px;padding:32px 28px;transition:.4s cubic-bezier(.19,1,.22,1)}
.pkg:hover{transform:translateY(-5px);border-color:rgba(254,19,107,.4)}
.pkg.pop{border-color:rgba(254,19,107,.45);background:linear-gradient(165deg,rgba(254,19,107,.10),#0a0a10)}
.pkg-badge{position:absolute;top:-12px;left:28px;background:var(--accent);color:#fff;font:800 11px/1 'Barlow Condensed';
  text-transform:uppercase;letter-spacing:.1em;padding:7px 12px;border-radius:100px}
.pkg-top h3{font-size:26px}
.pkg-price{font-family:'Barlow Condensed';font-weight:900;font-size:34px;color:var(--accent);margin:8px 0 6px}
.pkg-note{color:var(--muted);font-size:14px;margin-bottom:20px}
.pkg-feats{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.pkg-feats li{color:#d3d1d9;font-size:14.5px;padding-left:22px;position:relative}
.pkg-feats li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* feature grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;transition:.35s}
.feat:hover{border-color:rgba(254,19,107,.35);transform:translateY(-3px)}
.feat-b{display:block;width:12px;height:12px;border-radius:50%;background:var(--accent);margin-bottom:16px;box-shadow:0 0 18px 1px rgba(254,19,107,.6)}
.feat h4{font-size:20px;margin-bottom:8px}
.feat p{color:var(--muted);font-size:14.5px;line-height:1.6}
/* process steps */
.pstep-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pstep{border-top:2px solid var(--line);padding-top:20px}
.pstep-n{font-family:'Barlow Condensed';font-weight:900;font-size:44px;color:transparent;-webkit-text-stroke:1.5px rgba(254,19,107,.7);display:block;margin-bottom:12px}
.pstep h4{font-size:20px;margin-bottom:8px}
.pstep p{color:var(--muted);font-size:14.5px;line-height:1.6}
/* compare */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmp-col{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px}
.cmp-col.accent{border-color:rgba(254,19,107,.4);background:linear-gradient(165deg,rgba(254,19,107,.08),#0a0a10)}
.cmp-col h4{font-size:24px;margin-bottom:16px}
.cmp-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.cmp-col li{color:#d3d1d9;font-size:15px;padding-left:20px;position:relative}
.cmp-col li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--muted)}
.cmp-col.accent li::before{background:var(--accent)}
/* let's go band */
.letsgo{text-align:center;padding:clamp(30px,5vw,60px) 0}
.letsgo h2{font-size:clamp(34px,5.5vw,80px);line-height:.92}
.letsgo p{color:#cfcdd4;font-size:17px;max-width:52ch;margin:20px auto 30px}
.built{margin-top:40px;font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-size:20px}
/* calculators */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.calc{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px}
.calc h3{font-size:26px}
.calc-sub{color:var(--muted);font-size:14px;margin:6px 0 20px}
.calc-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.calc-opt{display:flex;justify-content:space-between;align-items:center;background:#0a0a12;border:1px solid var(--line);
  border-radius:12px;padding:15px 18px;cursor:pointer;font:600 15px/1 'Inter';color:var(--ink);transition:.25s}
.calc-opt span{font-family:'Barlow Condensed';font-weight:900;color:var(--muted)}
.calc-opt:hover{border-color:rgba(254,19,107,.4)}
.calc-opt.active{border-color:var(--accent);background:rgba(254,19,107,.10)}
.calc-opt.active span{color:var(--accent)}
.calc-add{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.calc-add label{display:flex;align-items:center;gap:10px;color:#cfcdd4;font-size:14.5px;cursor:pointer}
.calc-add input{accent-color:var(--accent);width:17px;height:17px}
.calc-out{border-top:1px solid var(--line);padding-top:18px;font-size:16px;color:var(--muted)}
.calc-total{font-family:'Barlow Condensed';font-weight:900;font-size:40px;color:var(--accent);margin-left:8px}
/* tool capture form */
.tool-form{max-width:620px}
.tool-fields{display:flex;flex-direction:column;gap:14px;margin:26px 0}
.fld{display:flex;flex-direction:column;gap:7px}
.fld span{font:600 13px/1 'Inter';color:var(--muted)}
.fld input{background:#0a0a12;border:1px solid var(--line);border-radius:12px;padding:15px 17px;color:var(--ink);font:400 15px/1 'Inter';transition:.25s}
.fld input:focus{outline:none;border-color:var(--accent)}
.tool-note{color:var(--dim);font-size:13px;margin-top:16px}
/* blog */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.art-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;transition:.4s cubic-bezier(.19,1,.22,1);overflow:hidden}
.art-card:hover{transform:translateY(-5px);border-color:rgba(254,19,107,.4)}
.art-card-img{margin:-28px -28px 22px;border-bottom:1px solid var(--line);overflow:hidden;aspect-ratio:16/10;background:#111}
.art-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.art-card:hover .art-card-img img{transform:scale(1.05)}
.art-cat{font:600 11px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.art-card h3{font-size:24px;line-height:1.02;margin-bottom:12px}
.art-card p{color:var(--muted);font-size:14.5px;line-height:1.6;flex:1}
.art-meta{display:block;color:var(--dim);font-size:12.5px;margin-top:18px;letter-spacing:.02em}
.article{max-width:760px;margin:0 auto}
/* in het editoriale artikel: tekst op leesbare measure, beeld/tabel vullen de bredere hoofdkolom */
.art-main .doc-p,.art-main .doc-ul,.art-main .doc-h2,.art-main .doc-h3,.art-main .doc-quote{max-width:76ch}
/* schone typografische schaal + ruime verticale ritme in artikel/term */
.art-main .doc-h2{font-size:clamp(26px,2.9vw,40px);line-height:1.06;letter-spacing:-.01em;margin:clamp(58px,7vw,92px) 0 clamp(18px,2vw,26px)}
.art-main .doc-h3,.art-main .art-h3{font-size:clamp(20px,1.9vw,25px);line-height:1.15;margin:clamp(42px,5vw,58px) 0 clamp(12px,1.4vw,16px)}
.art-main .doc-p,.art-main .doc-ul,.art-main .tldr li{font-size:clamp(16px,1.12vw,17.5px);line-height:1.78}
.art-main .doc-p{margin:0 0 clamp(20px,1.9vw,26px)}
.art-main .doc-ul{margin:clamp(8px,1.2vw,16px) 0 clamp(24px,2.4vw,32px)}
.art-main .doc-ul li{padding-left:28px}
.art-main .tldr{margin:0 0 clamp(44px,5.5vw,64px)}
.art-main .callout{font-size:clamp(16px,1.1vw,17px);margin:clamp(38px,4.5vw,52px) 0}
.art-main .pullquote{margin:clamp(44px,5.5vw,64px) 0}
.art-main .doc-table-wrap{margin:clamp(34px,4vw,44px) 0}
.art-main .art-fig{margin:clamp(42px,5vw,56px) 0}
.art-main .doc-quote{margin:clamp(38px,4.5vw,52px) 0}
.art-main .doc-table{font-size:clamp(14.5px,1.05vw,16px)}
.art-main .doc-table th,.art-main .doc-table td{padding:15px 20px}
.art-main .art-fig,.art-main .doc-table-wrap,.art-main .tldr{width:100%}
.art-main .art-fig img{max-height:600px}
.art-cta{margin-top:40px}
/* uitleg */
.uitleg-cat{margin-bottom:clamp(40px,6vw,70px)}
.uitleg-h3{font-size:clamp(24px,3vw,38px);margin-bottom:22px;color:var(--muted)}
.uitleg-h3::after{content:"";display:block;width:60px;height:2px;background:var(--accent);margin-top:12px}
.term-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.term-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;transition:.35s}
.term-card:hover{border-color:rgba(254,19,107,.4);transform:translateY(-3px)}
.term-card h4{font-size:19px;margin-bottom:8px}
.term-card p{color:var(--muted);font-size:13.5px;line-height:1.5}
.term-arrow{position:absolute;top:20px;right:20px;color:var(--accent);opacity:0;transform:translateX(-6px);transition:.3s}
.term-card:hover .term-arrow{opacity:1;transform:none}
.snel{background:linear-gradient(165deg,rgba(254,19,107,.10),var(--panel));border:1px solid rgba(254,19,107,.3);border-radius:16px;padding:24px 26px;margin-bottom:10px}
.snel span{font:700 11px/1 'Barlow Condensed';text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.snel p{color:var(--ink);font-size:17px;line-height:1.6;margin-top:10px}
@media (max-width:1000px){
  .pkg-grid,.feat-grid,.art-grid,.term-grid{grid-template-columns:1fr 1fr}
  .pstep-grid{grid-template-columns:1fr 1fr}
  .calc-grid,.cmp{grid-template-columns:1fr}
}
@media (max-width:620px){
  .pkg-grid,.feat-grid,.art-grid,.term-grid,.pstep-grid{grid-template-columns:1fr}
}
/* context-mockup hero (portrait Higgsfield) + case narrative */
.case-shot-ctx{height:auto;aspect-ratio:4/5;max-width:600px;margin:0 auto;background-position:center;background-size:cover}
.case-narr{max-width:820px;margin:clamp(40px,6vw,80px) auto 0;display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.cn-block{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);align-items:start;padding-bottom:clamp(28px,4vw,48px);border-bottom:1px solid var(--line-2)}
.cn-block:last-child{border-bottom:0;padding-bottom:0}
.cn-num{font-family:'Barlow Condensed';font-weight:900;font-size:clamp(40px,5vw,64px);color:transparent;-webkit-text-stroke:1.5px rgba(254,19,107,.6);line-height:1}
.cn-block h3{font-size:clamp(24px,3vw,38px);margin-bottom:12px}
.cn-block p{color:#cfcdd4;font-size:clamp(16px,1.3vw,18px);line-height:1.7}
.cn-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.cn-list li{color:#d3d1d9;font-size:15px;padding-left:20px;position:relative}
.cn-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media (max-width:620px){ .cn-block{grid-template-columns:1fr;gap:8px} .cn-list{grid-template-columns:1fr} }
.cn-result{display:inline-flex;flex-direction:column;gap:4px;margin-top:20px;border-left:3px solid var(--accent);padding:6px 0 6px 20px}
.cn-result b{font-family:'Barlow Condensed';font-weight:900;font-size:clamp(26px,3.4vw,44px);line-height:1;color:var(--ink)}
.cn-result span{font:600 12px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.case-faq{max-width:820px;margin:clamp(48px,7vw,90px) auto 0}
/* case result-galerij */
.case-gallery{max-width:1080px;margin:clamp(48px,7vw,86px) auto 0}
.cg-head{margin:0 0 clamp(20px,3vw,34px)}
.cg-head .eyebrow{color:var(--accent)}
.cg-head h3{font-family:'Barlow Condensed';font-weight:900;font-size:clamp(30px,4vw,52px);line-height:.98;letter-spacing:-.01em;color:var(--ink);text-transform:uppercase;margin:6px 0 0}
.cg-head h3 em{font-style:italic;color:var(--accent)}
.cg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,18px)}
.cg-grid.cg-n3,.cg-grid.cg-n4{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){ .cg-grid.cg-n3,.cg-grid.cg-n4{grid-template-columns:repeat(3,1fr)} }
.cg-item{position:relative;margin:0;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--panel);aspect-ratio:4/3}
.cg-item.cg-lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media(max-width:620px){ .cg-item.cg-lead{grid-column:span 2;grid-row:auto;aspect-ratio:4/3} }
.cg-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.19,1,.22,1);display:block}
.cg-item:hover img{transform:scale(1.05)}
.cg-item::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);border-radius:16px;pointer-events:none}
/* reviews */
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rev-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;transition:.4s cubic-bezier(.19,1,.22,1)}
.rev-card:hover{transform:translateY(-5px);border-color:rgba(254,19,107,.4)}
.rev-stars{color:var(--accent);font-size:16px;letter-spacing:2px;margin-bottom:16px}
.rev-card blockquote{color:#d8d6de;font-size:15px;line-height:1.6;flex:1;font-style:italic}
.rev-card figcaption{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
.rev-card figcaption b{display:block;font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.02em}
.rev-card figcaption span{color:var(--accent);font:600 13px/1 'Inter';letter-spacing:.02em}
@media (max-width:1000px){ .rev-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .rev-grid{grid-template-columns:1fr} }
/* do's & don'ts (uitleg) */
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.dodont>div{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:24px;background:#fff;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.dodont .do{border-color:rgba(254,19,107,.35)}
.dodont h4{font-size:19px;margin-bottom:14px;color:#14141a}
.dodont .do h4{color:var(--accent)}
.dodont ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.dodont li{color:#43434d;font-size:14.5px;line-height:1.5;padding-left:22px;position:relative}
.dodont .do li::before{content:"\2713";position:absolute;left:0;color:var(--accent);font-weight:700}
.dodont .dont li::before{content:"\2715";position:absolute;left:0;color:var(--dim);font-weight:700}
@media (max-width:620px){ .dodont{grid-template-columns:1fr} }
/* ===== service hero (split with visual) ===== */
.svc-hero{padding-bottom:clamp(30px,4vw,50px)}
.svc-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px);align-items:center}
.svc-hero-txt .doc-h1{font-size:clamp(42px,6vw,96px)}
.svc-hero-vis{position:relative}
.svc-hero-img{aspect-ratio:4/5;border-radius:26px;background-size:cover;background-position:center;
  box-shadow:0 60px 110px -50px rgba(0,0,0,.85),0 0 0 1px var(--line);position:relative}
.svc-hero-vis::after{content:"";position:absolute;inset:-20%;background:radial-gradient(closest-side,rgba(254,19,107,.22),transparent 70%);z-index:-1;filter:blur(10px)}
.svc-hero-tag{position:absolute;left:20px;bottom:20px;display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:100px;background:rgba(13,13,15,.72);backdrop-filter:blur(14px);
  font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:16px;color:#fff}
.svc-hero-tag .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px 1px rgba(254,19,107,.7)}
/* in de praktijk */
.prk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.prk-card{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--panel);transition:.4s cubic-bezier(.19,1,.22,1)}
.prk-card:hover{transform:translateY(-5px);border-color:rgba(254,19,107,.45)}
.prk-img{aspect-ratio:4/3;background-size:cover;background-position:top center}
.prk-name{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:18px}
.prk-name i{color:var(--accent);font-style:normal;opacity:0;transform:translateX(-6px);transition:.3s}
.prk-card:hover .prk-name i{opacity:1;transform:none}
@media (max-width:900px){ .svc-hero-grid{grid-template-columns:1fr;gap:34px} .svc-hero-vis{max-width:440px} .prk-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .prk-grid{grid-template-columns:1fr} }
/* diensten overview: visual 6-card grid */
.dsvc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dsvc-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.45s cubic-bezier(.19,1,.22,1)}
.dsvc-card:hover{transform:translateY(-6px);border-color:rgba(254,19,107,.45)}
.dsvc-img{aspect-ratio:4/3;background-size:cover;background-position:center;position:relative}
.dsvc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(13,13,19,.85))}
.dsvc-tag{position:absolute;left:16px;top:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:100px;background:rgba(10,10,14,.7);backdrop-filter:blur(12px);
  font:700 12px/1 'Barlow Condensed';text-transform:uppercase;letter-spacing:.06em;color:#fff}
.dsvc-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 1px rgba(254,19,107,.7)}
.dsvc-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;position:relative}
.dsvc-n{font-family:'Barlow Condensed';font-weight:900;font-size:22px;color:transparent;-webkit-text-stroke:1.2px rgba(254,19,107,.7);position:absolute;top:-26px;right:24px;background:rgba(13,13,19,.7);padding:4px 10px;border-radius:8px}
.dsvc-body h3{font-size:27px;margin-bottom:10px}
.dsvc-body p{color:var(--muted);font-size:14.5px;line-height:1.6;flex:1}
.dsvc-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:16px;color:var(--accent)}
.dsvc-link i{font-style:normal;transition:transform .3s}
.dsvc-card:hover .dsvc-link i{transform:translateX(5px)}
@media (max-width:1000px){ .dsvc-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .dsvc-grid{grid-template-columns:1fr} }
/* ===== lichte Klarna-showcase (echte klant-visuals, masonry) ===== */
.showcase{background:#f4f2ee;color:#141310;padding:clamp(84px,11vw,150px) 0;position:relative;z-index:1}
.showcase .eyebrow-d{color:#8f8b81}
.sc-head{text-align:center;max-width:760px;margin:0 auto clamp(44px,6vw,72px)}
.sc-head h2{font-family:'Barlow Condensed';font-weight:900;text-transform:uppercase;color:#141310;
  font-size:clamp(38px,6vw,86px);line-height:.9;letter-spacing:-.012em;margin-top:20px;text-wrap:balance}
.sc-head h2 em{font-style:italic;color:var(--accent)}
.sc-head p{color:#6b6860;font-size:clamp(16px,1.3vw,19px);line-height:1.6;margin-top:20px}
.sc-grid{column-count:4;column-gap:18px}
.sc-card{position:relative;break-inside:avoid;margin-bottom:18px;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 50px -28px rgba(20,19,16,.4);background:#e9e6df;cursor:default;
  transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s}
.sc-card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -30px rgba(254,19,107,.4)}
.sc-card img{width:100%;display:block;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.sc-card:hover img{transform:scale(1.04)}
.sc-card figcaption{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:100px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.3)}
.sc-card .sc-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.sc-card figcaption b{font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:16px;color:#141310}
.sc-card .sc-disc{font:600 12px/1 'Inter';color:#8a8578}
.sc-cta{text-align:center;margin-top:clamp(40px,5vw,64px)}
@media (max-width:1100px){ .sc-grid{column-count:3} }
@media (max-width:760px){ .sc-grid{column-count:2} }
@media (max-width:440px){ .sc-grid{column-count:1} }
/* schone dark->light overgang: cream-sectie als afgeronde panel op het zwart (geen gradient-smeer) */
.showcase{border-radius:clamp(28px,3.6vw,54px);position:relative;z-index:2}
/* CH eigen-merk brand-craft strip (Over ons) */
.brandcraft{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,18px)}
@media(min-width:680px){.brandcraft{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.brandcraft{grid-template-columns:repeat(6,1fr)}}
.brandcraft figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:var(--panel)}
.brandcraft img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.19,1,.22,1)}
.brandcraft figure:hover img{transform:scale(1.06)}

/* ===== Apps & webapps: dienst-hub badges ===== */
.dsvc-new{position:absolute;right:16px;top:16px;z-index:2;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 11px;border-radius:20px;background:var(--accent);color:#fff}
.drop-new{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;background:var(--accent);color:#fff;margin-left:7px;vertical-align:middle}
@media(min-width:900px){.dsvc-wide{grid-column:span 1}}

/* ===== Apps & webapps: cases ===== */
.apps-cases .apps-list{display:flex;flex-direction:column;gap:clamp(46px,7vw,96px);margin-top:clamp(40px,5vw,64px)}
.app-case{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,52px);align-items:center}
@media(min-width:900px){
  .app-case{grid-template-columns:1.05fr .95fr}
  .app-case:nth-child(even) .app-shot{order:2}
}
.app-shot{position:relative}
.app-site{display:inline-flex;align-items:center;gap:6px;margin-left:14px;font-size:13px;font-weight:600;
  color:var(--accent,#FE136B);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s}
.app-site:hover{border-bottom-color:currentColor}
.app-site i{font-style:normal;font-size:11px;transform:translateY(-1px)}
@media(max-width:640px){.app-site{margin-left:0;margin-top:6px}}
/* ===== device-cards: photorealistische Dynamic Mockups renders ===== */
.appcard{position:relative;transition:transform .55s cubic-bezier(.19,1,.22,1);
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.38))}
.appcard img{display:block;width:100%;height:auto}
.appcard.single{max-width:330px;margin-left:auto;margin-right:auto}
.hero-appcard{max-width:600px;margin-left:auto;margin-right:auto}
.app-case:hover .appcard{transform:translateY(-9px)}
@media(max-width:600px){.appcard.single{max-width:268px}}
/* ===== transparante PNG-telefoon-mockups, gecentreerd naast elkaar ===== */
.pstage{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:clamp(6px,1.4vw,20px);padding:clamp(8px,1.8vw,22px) 0}
.pstage::before{content:"";position:absolute;inset:-4% -2% -2%;z-index:0;pointer-events:none;
  background:radial-gradient(52% 52% at 50% 48%,rgba(254,19,107,.15),transparent 72%);filter:blur(30px)}
.pmock{position:relative;z-index:1;height:auto;filter:drop-shadow(0 24px 38px rgba(0,0,0,.45));
  transition:transform .5s cubic-bezier(.19,1,.22,1)}
.pstage.n1 .pmock{width:clamp(210px,58%,290px)}
.pstage.n2 .pmock{width:clamp(158px,45%,232px)}
.pstage.n3 .pmock{width:clamp(128px,31%,206px)}
.app-case:hover .pmock{transform:translateY(-10px)}
.app-case:hover .pmock:nth-child(2){transform:translateY(-16px)}
@media(max-width:600px){
  .pstage.n3 .pmock{width:30%}
  .pstage.n2 .pmock{width:46%}
  .pstage.n1 .pmock{width:64%}
}
.app-shot-badge{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;padding:6px 12px;border-radius:20px;backdrop-filter:blur(8px)}
.dev-phone .app-shot-badge{top:22px;right:22px}
.app-shot-badge.live{background:rgba(12,13,18,.7);color:#4ade80;border:1px solid rgba(74,222,128,.3)}
.app-shot-badge.live .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18)}
.app-shot-badge.conf{background:rgba(12,13,18,.78);color:var(--accent);border:1px solid rgba(254,19,107,.35)}
.app-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.app-cat{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.app-klant{font-size:12px;color:var(--muted)}
.app-klant::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--muted);margin-right:12px;vertical-align:middle}
.app-name{font-size:clamp(24px,2.6vw,34px);line-height:1.05;letter-spacing:-.02em;margin:0 0 14px}
.app-wat{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 18px;max-width:52ch}
.app-conf{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--accent);
  background:rgba(254,19,107,.08);border:1px solid rgba(254,19,107,.22);border-radius:10px;padding:10px 14px;margin:0 0 20px}
.app-lock{font-size:14px}
.app-feats{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:1fr;gap:9px}
@media(min-width:560px){.app-feats{grid-template-columns:1fr 1fr}}
.app-feats li{position:relative;padding-left:22px;font-size:13px;line-height:1.45;color:var(--ink)}
.app-feats li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:4px;
  background:var(--accent);box-shadow:0 0 0 3px rgba(254,19,107,.14)}
.app-stack{display:flex;flex-wrap:wrap;gap:0;margin:0 0 18px}
.app-tech{display:inline-block;font-size:11px;font-weight:600;padding:5px 11px;border-radius:7px;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);margin:0 7px 7px 0}
.app-stack-lg .app-tech{font-size:12.5px;padding:8px 14px}
.app-result{font-size:14px;line-height:1.6;color:var(--muted);padding-top:16px;border-top:1px solid var(--line);margin:0}
.app-result b{color:var(--ink);font-weight:700}


/* ===== app-cases: transparante toestel-mockup als hero ===== */
.appcase-shot{margin:0 auto;max-width:820px;padding:10px 0 4px;
  filter:drop-shadow(0 38px 56px rgba(0,0,0,.6)) drop-shadow(0 8px 18px rgba(0,0,0,.4))}
.appcase-shot img{display:block;width:100%;height:auto}
.case-klant{opacity:.62;font-weight:600}
@media(max-width:760px){.appcase-shot{max-width:100%;padding:4px 0}}

/* ===== app-kaarten: exact hetzelfde formaat als de andere cases ===== */
.wc-abinbev{background-image:url(/img/card-abinbev.jpg)}
.wc-kollaborate{background-image:url(/img/card-kollaborate.jpg)}
.wc-command{background-image:url(/img/card-command.jpg)}
.wc-studio{background-image:url(/img/card-studio.jpg)}

/* multi-page: intro-loader enkel bij het eerste bezoek van een sessie */
html.no-loader .loader{display:none !important}
html.no-loader .hero,html.no-loader .page-hero,html.no-loader .doc-hero{opacity:1 !important}

/* ===== website-cases: MacBook-mockup als hero ===== */
.webcase-shot{max-width:1000px}
.webcase-shot img{border-radius:14px}


/* footer-kopjes: h2 in plaats van h5 zodat de kopvolgorde niet springt (a11y).
   Exact dezelfde stijl als de oude .ft-col h5, zodat het ontwerp niet verandert. */
.ft-col .ft-h{font:700 12px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 16px}

/* ===== 6/8: knopcontrast WCAG-conform zonder de merkkleur te wijzigen =====
   #FE136B op wit geeft 3,80:1. Dat volstaat voor "grote tekst" (>=18,66px vet),
   niet voor normale tekst. Gevulde knoppen dus naar 19px/700. Merkroze blijft. */
.btn.fill{font-size:19px;font-weight:700;padding:16px 30px;letter-spacing:-.01em}
.btn.fill .ar{font-size:17px}
@media(max-width:600px){.btn.fill{font-size:18.7px;padding:15px 26px}}

/* ===== 6/8: cursor. Onderzoek (Eric Bailey, Funka) is duidelijk: nooit de
   echte cursor verbergen, dat botst met OS-instellingen voor toegankelijkheid.
   De ring blijft als subtiel accent, de systeemcursor blijft altijd zichtbaar. */
body.has-cursor,
body.has-cursor a, body.has-cursor button, body.has-cursor summary,
body.has-cursor .chip, body.has-cursor input, body.has-cursor textarea,
body.has-cursor .card, body.has-cursor .case, body.has-cursor .wcard{cursor:auto}
body.has-cursor a, body.has-cursor button, body.has-cursor summary,
body.has-cursor .chip, body.has-cursor .card, body.has-cursor .case,
body.has-cursor .wcard{cursor:pointer}
body.has-cursor input, body.has-cursor textarea{cursor:text}
/* de dot verdwijnt, de ring wordt subtieler en volgt als accent */
body.has-cursor .cur-dot{display:none}
body.has-cursor .cur-ring{opacity:.5;mix-blend-mode:screen}
@media (prefers-reduced-motion: reduce){body.has-cursor .cur-ring{display:none}}

/* ===== 6/8: licht ritme op alle paginatypes, niet enkel de homepage =====
   Onderzoek: afwisselende sectie-achtergronden geven visueel ritme en rust.
   LES: niet blind alle tekst donker maken, want binnen donkere kaarten valt die weg.
   Daarom worden de kaarten hier ook licht, in plaats van de tekst te forceren. */
.blk-licht{background:#f5f3ef;color:#141310;position:relative;z-index:1}
.blk-licht h1,.blk-licht h2,.blk-licht h3,.blk-licht h4,
.blk-licht .doc-h1,.blk-licht .doc-h2,.blk-licht .sec-head h2{color:#141310}
.blk-licht p,.blk-licht li,.blk-licht .doc-p,.blk-licht .doc-lede,
.blk-licht .sec-head p,.blk-licht .feat h4{color:#3a382f}
.blk-licht em{color:var(--accent)}
.blk-licht .eyebrow,.blk-licht .sec-num{color:#8f8b81}

/* kaarten binnen een licht blok worden ook licht */
.blk-licht .feat,.blk-licht .faq,.blk-licht .card,.blk-licht .pkg{
  background:#fffdfa;border:1px solid rgba(20,19,16,.13);box-shadow:0 2px 14px rgba(20,19,16,.05)}
.blk-licht .pkg.pop{background:linear-gradient(165deg,rgba(254,19,107,.07),#fffdfa);
  border-color:rgba(254,19,107,.42);box-shadow:0 10px 34px -14px rgba(254,19,107,.35)}
.blk-licht .pkg h3,.blk-licht .pkg-top h3{color:#141310}
.blk-licht .pkg p,.blk-licht .pkg li,.blk-licht .pkg-sub{color:#3a382f}
.blk-licht .pkg .prijs,.blk-licht .pkg-prijs{color:var(--accent)}
.blk-licht .pkg-badge{background:var(--accent);color:#fff}
.blk-licht .pkg a,.blk-licht .pkg .pkg-cta{color:#141310}
.blk-licht .pkg a.btn.fill,.blk-licht .btn.fill{color:#fff}
.blk-licht .faq summary{color:#141310}
.blk-licht .faq-a p{color:#3a382f}
.blk-licht .app-tech,.blk-licht .chip{background:rgba(20,19,16,.06);border-color:rgba(20,19,16,.14);color:#3a382f}
.blk-licht .btn.ghost{border-color:rgba(20,19,16,.26);color:#141310}
.blk-licht hr,.blk-licht .line{border-color:rgba(20,19,16,.12)}





/* lichte blokken die binnen een wrapper zitten in plaats van een volle sectie */
.blk-licht-in{padding:clamp(48px,6vw,84px) clamp(24px,4vw,56px);border-radius:22px;margin:clamp(40px,5vw,72px) 0}
.blk-licht-in::before,.blk-licht-in::after{display:none}
.blk-licht .art-toc-in{background:#fffdfa;border:1px solid rgba(20,19,16,.12)}
.blk-licht .art-toc a{color:#3a382f}
.blk-licht .article,.blk-licht .article p,.blk-licht .article li{color:#2e2c25}
.blk-licht .article h2,.blk-licht .article h3,.blk-licht .art-h3{color:#141310}
.blk-licht .tldr{background:#fffdfa;border-color:rgba(254,19,107,.28)}
.blk-licht .callout{background:#fffdfa;border-color:rgba(20,19,16,.14)}
.blk-licht .pullquote{color:#141310;border-color:var(--accent)}
.blk-licht .doc-table{background:#fffdfa}
.blk-licht .doc-table td{color:#2e2c25;border-color:rgba(20,19,16,.1)}
.blk-licht .term-rel-card{background:#fffdfa;border:1px solid rgba(20,19,16,.13)}
.blk-licht .term-rel-card h4{color:#141310}
.blk-licht .art-author,.blk-licht .art-author p{color:#3a382f}
.blk-licht .cn-block h3{color:#141310}
.blk-licht .cn-num{color:rgba(20,19,16,.22)}


/* ===== 6/8: kopniveaus genormaliseerd voor toegankelijkheid.
   De tag wordt gepromoveerd (h3->h2 enz), de klasse .lvl3/.lvl4 draagt de oude styling. */
.lvl3{font-family:'Barlow Condensed',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.lvl3 em{font-style:italic;color:var(--accent)}
.svc .lvl3{font-size:clamp(24px,2vw,32px);margin:14px 0 10px}
.case-body .lvl3{font-size:clamp(21px,1.7vw,27px)}
.step .lvl3{font-size:23px;margin:16px 0 10px}
.why .pt .lvl4{font-family:'Inter';font-weight:700;font-size:16px;margin-bottom:5px}
.ft-col .lvl5{font:700 12px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.wcard-body .lvl3{font-size:22px}
.cinfo .ci .lvl5{font:700 12px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:9px}
.dt-card .lvl3{font-size:22px;margin-bottom:16px}
.proc-step .lvl3{font-size:clamp(28px,3.4vw,46px);margin:12px 0 18px;line-height:.98}
.legal .lvl3{font-size:clamp(20px,2vw,26px);margin:34px 0 12px}
.doc-.lvl3{font-family:'Barlow Condensed';font-weight:800;font-size:clamp(21px,2.4vw,31px);line-height:1.05;margin:40px 0 12px;color:#fff}
.art-rel-b .lvl4 em, .doc-.lvl3 em, .art-.lvl3 em, .cg-head .lvl3 em{font-style:italic;color:var(--accent)}
.art-toc .lvl4{font-family:'Barlow Condensed';font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);margin:0 0 14px}
.tldr .lvl4{font-family:'Barlow Condensed';font-weight:800;font-size:clamp(19px,2vw,24px);text-transform:uppercase;letter-spacing:.03em;color:#14141a;margin:0 0 14px}
.art-rel-b .lvl4{font-size:17px;line-height:1.1;color:var(--ink);margin:0}
.term-rel-card .lvl4{font-size:18px;line-height:1.1;color:var(--ink);margin:0}
.art-.lvl3{font-size:clamp(22px,2.4vw,32px);margin:34px 0 12px}
.pkg-top .lvl3{font-size:26px}
.feat .lvl4{font-size:20px;margin-bottom:8px}
.pstep .lvl4{font-size:20px;margin-bottom:8px}
.cmp-col .lvl4{font-size:24px;margin-bottom:16px}
.calc .lvl3{font-size:26px}
.art-card .lvl3{font-size:24px;line-height:1.02;margin-bottom:12px}
.art-main .doc-.lvl3{max-width:76ch}
.art-main .doc-.lvl3, .art-main .art-.lvl3{font-size:clamp(20px,1.9vw,25px);line-height:1.15;margin:clamp(42px,5vw,58px) 0 clamp(12px,1.4vw,16px)}
.uitleg-.lvl3{font-size:clamp(24px,3vw,38px);margin-bottom:22px;color:var(--muted)}
.uitleg-.lvl3::after{content:"";display:block;width:60px;height:2px;background:var(--accent);margin-top:12px}
.term-card .lvl4{font-size:19px;margin-bottom:8px}
.cn-block .lvl3{font-size:clamp(24px,3vw,38px);margin-bottom:12px}
.cg-head .lvl3{font-family:'Barlow Condensed';font-weight:900;font-size:clamp(30px,4vw,52px);line-height:.98;letter-spacing:-.01em;color:var(--ink);text-transform:uppercase;margin:6px 0 0}
.cg-head .lvl3 em{font-style:italic;color:var(--accent)}
.dodont .lvl4{font-size:19px;margin-bottom:14px;color:#14141a}
.dodont .do .lvl4{color:var(--accent)}
.dsvc-body .lvl3{font-size:27px;margin-bottom:10px}
/* footer-kopjes: h2 in plaats van .lvl5 zodat de kopvolgorde niet springt (a11y).
   Exact dezelfde stijl als de oude .ft-col .lvl5{font:700 12px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.blk-licht .lvl3, .blk-licht .lvl4{color:#141310}
.blk-licht .feat .lvl4{color:#3a382f}
.blk-licht .pkg .lvl3, .blk-licht .pkg-top .lvl3{color:#141310}
.blk-licht .article .lvl3, .blk-licht .art-.lvl3{color:#141310}
.blk-licht .term-rel-card .lvl4{color:#141310}
.blk-licht .cn-block .lvl3{color:#141310}

/* ===== 6/8: dienstpagina's zijn nu 700-1600 woorden over 11+ secties.
   De standaard blok-padding van 150px boven en onder geeft dan 300px gat
   tussen twee korte secties. Voor de uitgeschreven secties dus compacter,
   en iets meer lucht tussen de alinea's voor leesbaarheid op lange tekst. */
.blk-tekst{padding:clamp(44px,5vw,74px) 0}
.blk-tekst .doc-h2{font-size:clamp(28px,3.6vw,46px);margin:0 0 22px}
.blk-tekst .doc-p{margin:0 0 clamp(22px,2.1vw,30px);max-width:70ch}
.blk-tekst .doc-p:last-child{margin-bottom:0}
.blk-tekst .doc-p strong{color:#fff;font-weight:700}
.blk-licht.blk-tekst .doc-p strong{color:#141310}
.blk-tekst .faq{margin-bottom:10px}

/* ===== 6/8: twee contrastfouten die al in de v40-staging zaten.
   1) .sc-head is ontworpen voor de lichte showcase-sectie (color:#141310).
      Op /over-ons/ staat diezelfde opmaak in een donkere section.blk,
      waardoor "Op onszelf net zo kritisch." zwart-op-zwart onzichtbaar was.
   2) De inhoudsopgave-kop van een artikel gebruikt var(--ink) (bijna wit),
      maar het artikelblok is licht. "Inhoud." stond dus wit-op-wit.
   Chirurgisch: enkel het donkere geval terugzetten, de lichte blijft zoals ontworpen. */
section.blk:not(.blk-licht) .sc-head h2{color:var(--ink)}
.blk-licht .art-toc h4,.blk-licht .art-toc .lvl4{color:#141310}
.blk-licht .art-toc nav a:hover{color:#141310}

/* 6/8: AV Automotive terug in het portfolio (keuze Thierry). */
.s-avauto{background-image:url(/img/s-avauto.jpg)}






/* 6/8: getypte wordmark vervangen door het echte logo (flyer logo wit.png,
   #ffffff + #fe136b, transparant). De roze bol hoorde bij de getypte versie
   en vervalt, want het echte logo heeft zijn eigen merkteken in de HERO-bliksem. */
.brand{gap:0}
.brand .bolt{display:none}
.brand img{display:block;height:26px;width:auto}
.ft-brand .brand img{height:30px}
@media (max-width:900px){ .brand img{height:23px} }

/* ═══ 6/8 · designronde na Thierry's feedback ═══ */

/* 1. Header-knop. De WCAG-fix van vanochtend zette .btn.fill op 19px/700 met
   padding 16/30, en die regel staat NA .nav-cta en overschreef hem dus. Daardoor
   werd de headerknop log en bloedde de gloed onder de balk uit.
   Oplossing: de kleine knop krijgt een 14% donkerder roze (#ea0158, 4.52:1 met wit)
   zodat 14px tekst gewoon voldoet, en mag weer compact zijn. Het merkroze #FE136B
   blijft op alle grote knoppen, waar 3.80:1 al volstaat als grote tekst. */
.btn.fill.nav-cta{font-size:14px;font-weight:700;padding:11px 22px;letter-spacing:0;
  background:#ea0158;box-shadow:0 6px 18px -10px rgba(254,19,107,.55)}
.btn.fill.nav-cta:hover{background:#fe136b;transform:translateY(-1px);
  box-shadow:0 10px 24px -10px rgba(254,19,107,.75)}

/* 2. Het FAQ-blok op de cases was een lichte kaart die op een donkere pagina zweefde.
   Zelfde donkere behandeling als de rest van de casepagina, dan valt het in het ritme. */
.case-faq.blk-licht{background:transparent;color:inherit}
.case-faq.blk-licht .doc-h2,.case-faq.blk-licht .faq summary{color:var(--ink)}
.case-faq.blk-licht .faq{background:rgba(255,255,255,.03);border-color:var(--line)}
.case-faq.blk-licht .faq-a p{color:var(--muted)}
.case-faq.blk-licht::before,.case-faq.blk-licht::after{display:none}

/* 3. Mobiel: de showcase klapte onder 440px naar één kolom, dus veertien kaarten
   onder elkaar. Twee kolommen aanhouden en tot zes voorbeelden tonen. */
@media (max-width:760px){
  .sc-grid .sc-card:nth-child(n+7){display:none}
}
/* NIET naar 2 kolommen forceren onder 440px: de kaarten zijn breder dan zo'n kolom
   en lopen er dan buiten, waardoor de bijschriften rechts wegvallen. Eén kolom is
   het ontwerp; het probleem was de lengte, en dat lost de limiet van 6 hierboven op. */
@media (max-width:440px){
  .sc-grid{column-count:1}
}
/* het FAQ-blok op de cases zat in een kolom van de narratieve grid en stond
   daardoor links in plaats van gecentreerd onder de case */
.case-faq{margin-left:auto;margin-right:auto;width:100%}

/* ═══════════ 6/8 · mobiele fundering ═══════════
   Gemeten op WebKit (= Safari/iOS) op iPhone SE, 14 en 14 Pro Max. */

/* 1. Dynamische viewport. 100vh op iOS rekent met de adresbalk ingeklapt, dus
      alles wat op 100vh staat springt bij het scrollen. dvh volgt de echte hoogte. */
.nav-links{max-height:calc(100dvh - 74px)}
.about-photo{height:min(58dvh,540px)}
.proc-step{min-height:68dvh}
.case-shot{height:min(64dvh,640px)}

/* 2. Notch en home-indicator. Werkt alleen samen met viewport-fit=cover in de meta. */
@supports (padding:env(safe-area-inset-left)){
  .nav .row{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
  .fab{right:max(clamp(16px,2.5vw,38px),env(safe-area-inset-right));
       bottom:max(clamp(16px,2.5vw,38px),env(safe-area-inset-bottom))}
  .ft{padding-bottom:max(30px,env(safe-area-inset-bottom))}
  .nav-links a{padding-left:max(clamp(22px,4vw,64px),env(safe-area-inset-left))}
}

/* 3. Basisgedrag dat op mobiel het verschil maakt. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:86px}
body{overscroll-behavior-y:none}
a,button,summary,[role=button],.faq summary{-webkit-tap-highlight-color:rgba(254,19,107,.18);touch-action:manipulation}

@media (max-width:900px){
  /* 4. Invoervelden onder 16px laten iOS automatisch inzoomen bij focus, en het
        zoomt daarna niet terug uit. 16px is de drempel, geen smaakkwestie. */
  input,textarea,select,.cform input,.cform textarea,.fld input{font-size:16px}

  /* 5. Tikdoelen minstens 44px hoog (Apple HIG). Burger stond op 28, footerlinks op 19. */
  .nav-burger{width:44px;height:44px;align-items:center;justify-content:center;margin-right:-8px}
  .brand{min-height:44px;align-items:center}
  .ft-col a{min-height:44px;display:flex;align-items:center;margin-bottom:2px;font-size:15px}
  .ft-brand .brand{min-height:auto}

  /* 6. Leesbaarheid: niets onder 15px in lopende tekst. */
  .ft-col p{font-size:15px}
  .case-metric p{font-size:15px}

  /* 7. Hero-knoppen even breed onder elkaar, in plaats van twee ongelijke pillen. */
  .hero-cta{display:grid;grid-template-columns:1fr;gap:12px;width:100%}
  .hero-cta .btn{width:100%;justify-content:center}
}

/* 8. Op kleine toestellen een compactere balk: 74px is 11% van een SE-scherm. */
@media (max-width:600px){
  .nav .row{height:62px}
  .nav-links{max-height:calc(100dvh - 62px)}
  html{scroll-padding-top:74px}
}
@media (max-width:900px){
  /* laatste tikdoelen onder 44px: contactgegevens, footer-onderbalk, footerlogo */
  .ci a{min-height:44px;display:inline-flex;align-items:center}
  .rt a{min-height:44px;display:inline-flex;align-items:center;padding:0 2px}
  .ft-brand .brand{min-height:44px;display:inline-flex;align-items:center}
}

@media (max-width:900px){
  /* Vangnet in plaats van per element jagen: alles wat je kan aantikken haalt 44px.
     De uitzonderingen zijn elementen die al ruim genoeg zijn of die in een rij staan
     waar extra hoogte de lay-out zou breken. */
  .chip,.wfilter,a.case-back,a.art-author-link,.art-rel-card,.term-rel-card,
  .nav-links>a,.nav-item>a,.drop a{min-height:44px;display:inline-flex;align-items:center}
  .chip{padding-top:0;padding-bottom:0}
  .art-rel-card,.term-rel-card{display:flex}

  /* Lopende tekst niet onder 15px. Eyebrows en labels mogen kleiner blijven,
     dat is een bewust typografisch middel, maar 12,5px is te klein om te lezen. */
  .doc-p,.art-deck,.page-intro,.pkg-note,.cn-block p,.faq-a p,li{font-size:max(15px,1em)}
  .eyebrow,.eyebrow-d,.sec-num,.art-meta,.wcard-sector,.sc-disc{font-size:13px}
}

@media (max-width:900px){
  /* laatste kleine tekst, per gemeten selector */
  .drop-in a span{font-size:14px}
  .art-toc-in nav a{font-size:15px;min-height:44px;display:flex;align-items:center}
  .stat-callout span,.art-author-txt p,.ft-brand p{font-size:15px}
  .art-meta{font-size:14px}
  .ft-bottom span{font-size:13px}
  .contactline span a{min-height:44px;display:inline-flex;align-items:center}
}


/* ═══ 6/8 · lichte blokken als paneel in plaats van een verloop ═══
   Thierry: de fade blijft er smoezelig uitzien, ook met easing en dithering.
   Een verloop van 231 helderheidsniveaus over een paar honderd pixels is nu eenmaal
   een vieze overgang. Het lichte blok krijgt daarom dezelfde behandeling als de
   showcase-sectie die er wél goed uitziet: een effen vlak met een ruime radius.
   Geen verloop, dus ook geen banding. */
.blk-licht{border-radius:clamp(28px,3.6vw,54px);position:relative;z-index:2}
.blk-licht::before,.blk-licht::after{content:none;display:none}
.lightsec{border-radius:clamp(28px,3.6vw,54px);position:relative;z-index:2}
/* het blok binnen een kaart (case-faq) heeft geen eigen radius nodig */
.blk-licht-in,.case-faq.blk-licht{border-radius:0}

/* ═══ 6/8 · app-mockups begrenzen ═══
   De staande telefoon-mockups (700x1381, ratio 0,51) vulden de volle kolombreedte
   van 820px en werden daardoor 1618px hoog: bijna twee schermen voor één beeld.
   Bovendien werd een bron van 700px opgerekt naar 820px, dus ook nog onscherp.
   Begrenzen op hoogte in plaats van breedte, want de ratio verschilt per mockup. */
.appcase-shot{display:flex;justify-content:center}
.appcase-shot img{max-height:min(72vh,660px);width:auto;max-width:100%;margin:0 auto}
/* de laptop-mockups van de website-cases zijn liggend en mogen wel breed blijven */
.appcase-shot.webcase-shot img{max-height:none;width:100%}
@media (max-width:900px){
  .appcase-shot img{max-height:min(62vh,540px)}
}

/* Twee lichte panelen die tegen elkaar aan staan (gat 0px) kregen allebei een volle
   radius, met donkere inkepingen op de naad tot gevolg. Ze horen als één doorlopend
   paneel te lezen: de bovenste vierkante onderhoeken, de onderste vierkante bovenhoeken. */
.blk-licht:has(+ .lightsec),.blk-licht:has(+ .blk-licht),
.lightsec:has(+ .blk-licht),.lightsec:has(+ .lightsec){
  border-bottom-left-radius:0;border-bottom-right-radius:0}
.blk-licht + .lightsec,.blk-licht + .blk-licht,
.lightsec + .blk-licht,.lightsec + .lightsec{
  border-top-left-radius:0;border-top-right-radius:0}
/* telefoonnummer prominent op de contactpagina */
.ci-tel{font-family:'Barlow Condensed';font-weight:800;font-size:clamp(22px,2.4vw,30px);
  letter-spacing:.01em;color:var(--ink);text-decoration:none}
.ci-tel:hover{color:var(--accent)}