/* ============================================================
   EFFECTIEF — DIENST-NEXT (nieuwe opzet dienstpagina's, 2026)
   Eigen, geprefixte laag (.nx-*) naast style.css; vervangt
   dienst-v2/dienst-hero op pagina's met de nieuwe opzet.
   Beeld alleen bij de cases en de klantlogo-strip.
   ============================================================ */
:root{--nx-edge:max(48px, calc((100vw - 1480px)/2 + 48px));--nx-ease:cubic-bezier(.16,1,.3,1)}

.nx-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-d,#c84e1f);margin-bottom:20px}
.nx-eyebrow::before{content:"";width:26px;height:2.5px;background:var(--terra,#E8602C);border-radius:2px}
.nx-tlink{display:inline-flex;gap:10px;font-weight:700;color:var(--ink,#0b161d);text-decoration:none;align-items:center}
.nx-tlink span{color:var(--terra,#E8602C);transition:transform .25s var(--nx-ease)}
.nx-tlink:hover span{transform:translateX(5px)}

/* reveals */
.nx-rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--nx-ease),transform .8s var(--nx-ease)}
.nx-rv.in{opacity:1;transform:none}
.nx-rv.d1{transition-delay:.08s}.nx-rv.d2{transition-delay:.16s}.nx-rv.d3{transition-delay:.24s}.nx-rv.d4{transition-delay:.32s}

/* ── HERO ── */
.nx-hero{overflow:hidden;padding-top:0}
.nx-hero .crumbs{padding:26px 0 30px;font-size:.88rem;color:var(--muted2,#9a9a9e)}
.nx-hero .crumbs a{color:inherit;text-decoration:none}
.nx-hero .crumbs b{color:var(--ink,#0b161d);font-weight:600}
.nx-hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.nx-hero .grid>*{min-width:0}
.nx-hero h1{font-weight:400;letter-spacing:-.03em;line-height:1.12;font-size:clamp(2.4rem,4.6vw,3.9rem);text-wrap:balance}
.nx-hero h1 b{font-weight:700}
.nx-hero h1 .accent{color:var(--terra,#E8602C);position:relative;white-space:nowrap}
.nx-hero h1 .accent svg{position:absolute;left:0;right:0;bottom:-.06em;width:100%;height:.16em;overflow:visible}
.nx-hero h1 .accent path{fill:none;stroke:var(--terra,#E8602C);stroke-width:4;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset 1.1s var(--nx-ease) .5s}
.nx-rv.in .accent path,.nx-hero .in .accent path{stroke-dashoffset:0}
.nx-hero .lead{color:var(--muted,#63666b);margin:26px 0 32px;max-width:34rem;font-size:1.1rem}
.nx-hero .acts{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nx-hero .checks{display:flex;gap:26px;flex-wrap:wrap;margin-top:36px;font-size:.92rem;font-weight:600}
.nx-hero .checks span{color:var(--groen,#2f9e6e);margin-right:7px}
.nx-paneel{position:relative;overflow:hidden;margin-top:-124px;margin-right:calc(-1*var(--nx-edge));
  background:linear-gradient(168deg,#ef6f3d,#E8602C 48%,#c84e1f);
  border-radius:0 0 0 clamp(90px,10vw,160px);
  padding:170px var(--nx-edge) clamp(64px,6vw,96px) clamp(34px,3vw,52px)}
.nx-paneel::before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%)}
.nx-paneel .rule{position:relative;width:44px;height:2.5px;background:rgba(255,255,255,.85);border-radius:2px;margin-bottom:22px}
.nx-paneel .w{position:relative;font-size:clamp(2.4rem,4.6vw,3.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.16;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85)}
.nx-paneel .w em{display:block;font-style:normal;-webkit-text-stroke:0;color:#fff}

/* ── marquee zusterdiensten ── */
.nx-marq{border-block:1px solid var(--line,#e7e7e4);padding:20px 0;overflow:hidden;white-space:nowrap;margin-top:54px;contain:paint}
.nx-marq .track{display:inline-flex;gap:56px;animation:nxmarq 26s linear infinite;padding-right:56px}
.nx-marq:hover .track{animation-play-state:paused}
.nx-marq a{display:inline-flex;gap:12px;align-items:baseline;text-decoration:none;color:var(--ink,#0b161d);font-weight:600;font-size:1.05rem}
.nx-marq a i{font-style:normal;color:var(--terra,#E8602C);font-weight:700}
.nx-marq a:hover{color:var(--terra-d,#c84e1f)}
@keyframes nxmarq{to{transform:translateX(-50%)}}

/* ── statement-hoofdstuk op ink ── */
.nx-chapter{position:relative;overflow:hidden;background:var(--ink,#0b161d);color:#fff;padding:clamp(96px,11vw,160px) 0}
.nx-chapter::before{content:"";position:absolute;width:720px;height:720px;right:-240px;top:-300px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,96,44,.34),transparent 66%)}
.nx-chapter::after{content:attr(data-ghost);position:absolute;left:-2vw;bottom:-.16em;font-weight:700;font-size:clamp(7rem,16vw,15rem);
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);pointer-events:none;white-space:nowrap}
.nx-chapter .wrap{position:relative;z-index:2}
.nx-chapter h2{font-weight:400;letter-spacing:-.03em;line-height:1.16;font-size:clamp(2rem,3.8vw,3.2rem);max-width:26ch;color:#fff;text-wrap:balance}
.nx-chapter h2 .out{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.8);font-weight:700}
.nx-chapter h2 b{color:var(--terra,#E8602C);font-weight:700}
.nx-chapter .sub{color:rgba(255,255,255,.6);margin-top:26px;max-width:52ch}

/* ── redactionele blokken ── */
.nx-blok{position:relative;padding:clamp(88px,9vw,130px) 0}
.nx-blok.grijs{background:var(--grey,#f6f6f4);border-radius:0 0 0 clamp(80px,9vw,150px)}
.nx-blok .grid{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,110px);align-items:start}
.nx-blok .grid>*{min-width:0}
.nx-blok h2{font-weight:400;letter-spacing:-.03em;line-height:1.14;font-size:clamp(2rem,3.4vw,2.8rem);text-wrap:balance}
.nx-blok h2 b{font-weight:700}
.nx-blok .body>p{color:var(--muted,#63666b);max-width:56ch;font-size:1.06rem}
.nx-blok .body .btn-terra{margin-top:34px}

/* probleem-kaarten: eigen vormentaal, geen nummers, afloop-hoek */
.nx-kaarten{margin-top:36px;display:flex;flex-direction:column;gap:14px}
.nx-kaart{position:relative;background:#fff;border:1px solid var(--line,#e7e7e4);
  border-radius:18px 18px 18px 44px;padding:24px 30px 24px 34px;
  display:flex;justify-content:space-between;gap:20px;align-items:center;
  transition:transform .35s var(--nx-ease),box-shadow .5s var(--nx-ease),border-radius .45s var(--nx-ease)}
.nx-kaart::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:3px;
  background:var(--terra,#E8602C);opacity:.85;transition:top .35s var(--nx-ease),bottom .35s var(--nx-ease)}
.nx-kaart:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(11,22,29,.1);border-radius:18px 18px 18px 64px}
.nx-kaart:hover::before{top:14px;bottom:14px}
.nx-kaart h5{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
.nx-kaart .sub{color:var(--muted,#63666b);font-size:.93rem;margin-top:3px}
.nx-kaart .pijl{color:var(--terra,#E8602C);font-weight:700;opacity:0;transform:translateX(-8px);transition:all .35s var(--nx-ease);flex:none}
.nx-kaart:hover .pijl{opacity:1;transform:none}

/* aanpak-kolommen: terracotta rule i.p.v. nummer */
.nx-apunten{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.nx-apunt{border:1px solid var(--line,#e7e7e4);border-radius:18px;padding:30px 26px;
  transition:border-color .35s,transform .35s var(--nx-ease),box-shadow .5s var(--nx-ease)}
.nx-apunt:hover{border-color:var(--terra,#E8602C);transform:translateY(-4px);box-shadow:0 22px 46px rgba(232,96,44,.12)}
.nx-apunt .rule{width:34px;height:3px;border-radius:2px;background:var(--terra,#E8602C);transition:width .45s var(--nx-ease)}
.nx-apunt:hover .rule{width:58px}
.nx-apunt h5{font-size:1.1rem;font-weight:700;margin:18px 0 6px;letter-spacing:-.01em}
.nx-apunt p{color:var(--muted,#63666b);font-size:.93rem}

/* cijfers */
.nx-cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,4vw,60px);margin-top:clamp(52px,6vw,76px)}
.nx-cijfer{border-top:2.5px solid var(--ink,#0b161d);padding-top:22px}
.nx-cijfer:first-child{border-top-color:var(--terra,#E8602C)}
.nx-cijfer .big{font-size:clamp(2.1rem,3.2vw,2.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.nx-cijfer .big b{color:var(--terra,#E8602C)}
.nx-cijfer p{color:var(--muted,#63666b);font-size:.93rem;margin-top:8px}

/* ── cases: enige beeldmoment ── */
.nx-cases{position:relative;overflow:hidden;background:var(--grey,#f6f6f4);padding:clamp(88px,9vw,130px) 0;
  border-radius:0 clamp(70px,7vw,120px) 0 0}
.nx-cases .kop{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,4.5vw,60px)}
.nx-cases .kop h2{font-weight:400;letter-spacing:-.03em;font-size:clamp(2.1rem,3.6vw,3rem)}
.nx-cases .kop h2 b{font-weight:700}
.nx-cases .kop p{color:var(--muted,#63666b);margin-top:12px;max-width:44ch}
.nx-rij{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:24px;align-items:stretch}
.nx-tegel{display:flex;flex-direction:column;text-decoration:none;color:var(--ink,#0b161d)}
.nx-tegel .ph{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3.1;flex:1}
.nx-tegel.groot .ph{aspect-ratio:auto;min-height:100%}
.nx-tegel .ph img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--nx-ease)}
.nx-tegel:hover .ph img.foto{transform:scale(1.05)}
.nx-tegel .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,22,29,.2),rgba(11,22,29,.6))}
.nx-tegel .wl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18%}
.nx-tegel .wl img{max-width:56%;max-height:30%;width:auto;height:auto;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 4px 16px rgba(0,0,0,.35))}
.nx-tegel .wl img.raw{filter:drop-shadow(0 6px 20px rgba(0,0,0,.35))}
.nx-tegel .chip{position:absolute;left:16px;bottom:16px;background:var(--terra,#E8602C);color:#fff;border-radius:11px;
  padding:9px 14px;font-weight:700;font-size:.92rem;line-height:1.15}
.nx-tegel .chip small{display:block;font-weight:500;font-size:.7rem;opacity:.9}
.nx-tegel .cap{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:16px}
.nx-tegel h3{font-size:1.12rem;font-weight:700}
.nx-tegel .cap span{color:var(--terra,#E8602C);font-weight:700;transition:transform .25s var(--nx-ease)}
.nx-tegel:hover .cap span{transform:translateX(5px)}
.nx-tegel .subt{color:var(--muted,#63666b);font-size:.93rem;margin-top:2px}

/* ── klantlogo-strip (hergebruikt render_logos-markup) ── */
.nx-logos{padding:clamp(56px,6vw,80px) 0 0}
.nx-logos .lbl{text-align:center;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted2,#9a9a9e);font-weight:600;margin-bottom:10px}
.nx-logos .logo-item img{filter:grayscale(1);opacity:.5;mix-blend-mode:multiply;transition:filter .3s,opacity .3s}
.nx-logos .logo-item:hover img{filter:none;opacity:1}

/* ── proces: sticky kop + ghost-nummers (functioneel, blijven) ── */
.nx-proces{padding:clamp(96px,10vw,140px) 0}
.nx-proces .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,110px);align-items:start}
.nx-proces .grid>*{min-width:0}
.nx-proces .links{position:sticky;top:120px}
.nx-proces .links h2{font-weight:400;letter-spacing:-.03em;font-size:clamp(2.1rem,3.6vw,3rem)}
.nx-proces .links h2 b{font-weight:700}
.nx-proces .links p{color:var(--muted,#63666b);margin-top:16px;max-width:38ch}
.nx-stap{position:relative;padding:34px 0 34px 120px;border-top:1px solid var(--line,#e7e7e4)}
.nx-stap .gn{position:absolute;left:0;top:14px;font-weight:700;font-size:4.6rem;line-height:1;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.5px var(--line,#e7e7e4);transition:all .4s var(--nx-ease)}
.nx-stap:hover .gn,.nx-stap.act .gn{-webkit-text-stroke-color:var(--terra,#E8602C)}
.nx-stap h4{font-size:1.25rem;font-weight:700;letter-spacing:-.015em;display:flex;justify-content:space-between;gap:10px 16px;align-items:baseline;flex-wrap:wrap}
.nx-stap h4 .dur{font-size:.82rem;font-weight:600;color:var(--terra-d,#c84e1f);background:var(--terra-l,#fbe9e1);border-radius:20px;padding:4px 12px;white-space:nowrap}
.nx-stap p{color:var(--muted,#63666b);margin-top:8px;max-width:52ch}

/* ── quote ── */
.nx-quote{position:relative;overflow:hidden;background:var(--grey,#f6f6f4);border-radius:0 0 0 clamp(80px,9vw,150px);
  padding:clamp(88px,9vw,130px) 0}
.nx-quote::before{content:"\201C";position:absolute;left:calc(var(--nx-edge) - 26px);top:-.12em;font-size:clamp(12rem,20vw,20rem);
  font-weight:700;color:var(--terra,#E8602C);opacity:.14;line-height:1;pointer-events:none}
.nx-quote .wrap{position:relative}
.nx-quote blockquote{font-size:clamp(1.6rem,2.9vw,2.4rem);line-height:1.35;letter-spacing:-.02em;max-width:32ch;font-weight:400}
.nx-quote blockquote b{font-weight:700;color:var(--terra-d,#c84e1f)}
.nx-quote .wie{margin-top:26px;color:var(--muted2,#9a9a9e);font-size:.95rem;font-weight:500}
.nx-quote .st{color:var(--terra,#E8602C);letter-spacing:2px;margin-right:10px}

/* ── faq ── */
.nx-faq{padding:clamp(88px,9vw,130px) 0}
.nx-faq .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,110px);align-items:start}
.nx-faq .grid>*{min-width:0}
.nx-faq h2{font-weight:400;letter-spacing:-.03em;font-size:clamp(2rem,3.4vw,2.8rem)}
.nx-faq h2 b{font-weight:700}
.nx-vraag{border-top:1px solid var(--line,#e7e7e4)}
.nx-vraag:last-child{border-bottom:1px solid var(--line,#e7e7e4)}
.nx-vraag button{width:100%;background:none;border:0;font:inherit;font-weight:600;font-size:1.08rem;color:var(--ink,#0b161d);
  padding:22px 0;display:flex;justify-content:space-between;gap:20px;cursor:pointer;text-align:left}
.nx-vraag .pl{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line,#e7e7e4);flex:none;position:relative;transition:all .35s var(--nx-ease)}
.nx-vraag .pl::before,.nx-vraag .pl::after{content:"";position:absolute;background:var(--ink,#0b161d);left:50%;top:50%;transition:all .35s var(--nx-ease)}
.nx-vraag .pl::before{width:12px;height:2px;transform:translate(-50%,-50%)}
.nx-vraag .pl::after{width:2px;height:12px;transform:translate(-50%,-50%)}
.nx-vraag.open .pl{background:var(--terra,#E8602C);border-color:var(--terra,#E8602C)}
.nx-vraag.open .pl::before{background:#fff}
.nx-vraag.open .pl::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;background:#fff}
.nx-vraag .ant{max-height:0;overflow:hidden;transition:max-height .5s var(--nx-ease)}
.nx-vraag .ant p{color:var(--muted,#63666b);padding:0 44px 24px 0;max-width:56ch}

/* ── slot ── */
.nx-slot{padding:40px 0 110px;overflow:hidden}
.nx-slot .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,90px);align-items:center}
.nx-slot .grid>*{min-width:0}
.nx-slot h2{font-weight:400;letter-spacing:-.03em;font-size:clamp(2rem,3.4vw,2.8rem)}
.nx-slot h2 b{font-weight:700}
.nx-slot p{color:var(--muted,#63666b);margin-top:14px;max-width:44ch}
.nx-slot .btn-terra{margin-top:40px}
.nx-paneel2{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(168deg,#ef6f3d,#E8602C 48%,#c84e1f);
  border-radius:28px 0 0 clamp(70px,7vw,120px);margin-right:calc(-1*var(--nx-edge));
  padding:clamp(48px,4.5vw,68px) var(--nx-edge) clamp(48px,4.5vw,68px) clamp(36px,3.5vw,60px);
  display:flex;flex-direction:column;gap:16px}
.nx-paneel2::before{content:"";position:absolute;width:380px;height:380px;right:-150px;top:-170px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 65%)}
.nx-paneel2>*{position:relative}
.nx-call{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;border-radius:14px;padding:14px 18px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);transition:background .25s}
.nx-call:hover{background:rgba(255,255,255,.18)}
.nx-call .ic{width:44px;height:44px;border-radius:50%;background:var(--ink,#0b161d);display:flex;align-items:center;justify-content:center;flex:none}
.nx-call .ic svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2}
.nx-call .t{font-size:.85rem;display:block;color:rgba(255,255,255,.75)}
.nx-call .n{font-weight:700;font-size:1.05rem}
.nx-reas{color:#fff;font-size:.88rem}

@media(prefers-reduced-motion:reduce){
  .nx-rv{opacity:1;transform:none;transition:none}
  .nx-marq .track{animation:none}
  .nx-hero h1 .accent path{stroke-dashoffset:0;transition:none}
}
@media(max-width:960px){
  .nx-hero .grid,.nx-blok .grid,.nx-proces .grid,.nx-faq .grid,.nx-slot .grid{grid-template-columns:1fr}
  .nx-paneel{margin:0;border-radius:20px 20px 20px 64px;padding:40px 28px 56px}
  .nx-paneel2{margin-right:-24px;margin-left:-24px;border-radius:24px 24px 24px 56px}
  .nx-cijfers{grid-template-columns:1fr 1fr}
  .nx-apunten{grid-template-columns:1fr}
  .nx-kaart .pijl{display:none}
  .nx-rij{grid-template-columns:1fr}
  .nx-tegel.groot .ph{aspect-ratio:4/3.1;min-height:0}
  .nx-proces .links{position:static}
  .nx-stap{padding-left:86px}
  .nx-stap .gn{font-size:3.4rem}
}