/* Orderinvoer: V6-verhaalpagina. Alleen actief onder .vp-orderinvoer-page. */

.vp-orderinvoer-page {
  --oi-paper: var(--vp-kaart, #fbf9f4);
  --oi-band: var(--vp-band, #f3f0e9);
  --oi-line: var(--vp-zachte-rand, #e1dbce);
  --oi-ink: var(--vp-navy, #1e3a5f);
  --oi-navy: #142a46;
  --oi-navy-deep: #0d1828;
  --oi-orange: var(--vp-accent-op-licht, #a5441a);
  --oi-orange-dark: var(--vp-accent-hover, #883815);
  --oi-teal: var(--vp-teal, #0fa48d);
  --oi-shadow: 0 34px 70px -44px rgba(14, 17, 22, .62);
  background: var(--oi-paper);
  color: var(--oi-ink);
}

.vp-orderinvoer-page main {
  overflow-x: clip;
}

.vp-orderinvoer-page [id] {
  scroll-margin-top: 92px;
}

.vp-orderinvoer-page .vp-oi-section {
  padding-block: clamp(78px, 9vw, 132px);
  overflow: visible;
}

.vp-orderinvoer-page .vp-oi-section > .container,
.vp-orderinvoer-page .vp-oi-cta > .container {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}

.vp-orderinvoer-page h2,
.vp-orderinvoer-page h3,
.vp-orderinvoer-page p,
.vp-orderinvoer-page dl,
.vp-orderinvoer-page ul {
  margin-top: 0;
}

.vp-orderinvoer-page h2 {
  margin-bottom: 24px;
  color: var(--oi-ink);
  font-size: clamp(42px, 5.3vw, 70px);
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.vp-orderinvoer-page h2 span,
.vp-orderinvoer-page .vp-oi-hero h1 span,
.vp-orderinvoer-page .vp-oi-statement span,
.vp-orderinvoer-page .vp-oi-cta h2 span {
  color: var(--oi-orange);
}

.vp-orderinvoer-page h3,
.vp-orderinvoer-page dt {
  color: var(--oi-ink);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.13;
  letter-spacing: -.025em;
}

.vp-orderinvoer-page p,
.vp-orderinvoer-page dd,
.vp-orderinvoer-page li {
  color: var(--vp-body, #22303b);
  font-size: 17px;
  line-height: 1.64;
}

.vp-orderinvoer-page .vp-oi-lede {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.5;
}

.vp-orderinvoer-page .vp-oi-linkregel {
  margin: 30px 0 0;
}

.vp-orderinvoer-page .vp-oi-linkregel a,
.vp-orderinvoer-page .vp-oi-faq-list a {
  color: var(--oi-orange-dark);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.vp-orderinvoer-page .vp-oi-linkregel a:focus-visible,
.vp-orderinvoer-page .vp-oi-faq-list a:focus-visible {
  outline: 3px solid var(--oi-orange);
  outline-offset: 4px;
}

/* Hero */

.vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero {
  min-height: clamp(760px, 88vh, 940px);
  padding-block: clamp(138px, 12vw, 178px) clamp(84px, 8vw, 112px);
  display: flex;
  align-items: center;
}

.vp-orderinvoer-page .vp-oi-hero .vp-oi-hero-grid {
  width: 100%;
  max-width: 1180px;
  padding-inline: 20px;
  grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: center;
  display: grid;
}

.vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero .vp-x-hero-copy {
  width: auto;
  max-width: 590px;
  margin: 0;
  text-align: left;
}

.vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero h1 {
  max-width: 10.5ch;
  margin: 0 0 30px;
  font-size: clamp(58px, 6.9vw, 91px);
  text-align: left;
}

.vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero .large-paragraph {
  max-width: 590px;
  margin: 0;
  text-align: left;
}

.vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero .button-div {
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Gedeelde ruimtelijke taal */

.vp-orderinvoer-page .vp-oi-scene {
  --scene-paper: #fffdf8;
  --scene-band: #e8e1d5;
  --scene-line: #d1c8b9;
  position: relative;
  isolation: isolate;
  min-width: 0;
  border: 1px solid rgba(30, 58, 95, .1);
  border-radius: 34px;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .92), transparent 26%),
    linear-gradient(145deg, #f7f3eb, #e7e0d4);
  box-shadow: var(--oi-shadow), inset 0 1px rgba(255, 255, 255, .9);
  perspective: 1100px;
  transform-style: preserve-3d;
  overflow: hidden;
}

.vp-orderinvoer-page .vp-oi-scene::after {
  content: "";
  position: absolute;
  z-index: 12;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 -1px rgba(30, 58, 95, .08);
  pointer-events: none;
}

.vp-orderinvoer-page .vp-oi-halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 48%;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 53, .24), rgba(255, 107, 53, .07) 48%, transparent 72%);
  filter: blur(24px);
  transform: translate(-50%, -50%);
}

.vp-orderinvoer-page .vp-oi-floor {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 6%;
  width: 77%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(14, 17, 22, .27), rgba(30, 58, 95, .08) 46%, transparent 72%);
  filter: blur(10px);
  transform: translateX(-50%) rotateX(68deg);
}

.vp-orderinvoer-page .vp-oi-hero-scene {
  min-height: 570px;
  background:
    radial-gradient(circle at 19% 15%, rgba(255, 255, 255, .95), transparent 25%),
    linear-gradient(145deg, #f4efe6, #ded5c7);
}

.vp-oi-input-stack,
.vp-oi-output-sheet,
.vp-oi-local-core,
.vp-oi-route {
  position: absolute;
}

.vp-oi-input-stack {
  z-index: 3;
  left: 8%;
  top: 30%;
  width: 31%;
  height: 42%;
  transform: rotateX(13deg) rotateY(17deg) rotateZ(-7deg);
  transform-style: preserve-3d;
}

.vp-oi-input-stack > i,
.vp-oi-input-stack > div {
  position: absolute;
  inset: 0;
  border: 1px solid var(--scene-line);
  border-radius: 18px;
  background: var(--scene-paper);
  box-shadow: -18px 32px 40px -28px rgba(14, 17, 22, .52), inset 0 1px #fff;
}

.vp-oi-input-stack > i:first-child {
  background: #d8d0c4;
  transform: translate3d(-18px, 18px, -38px) rotate(-4deg);
}

.vp-oi-input-stack > i:nth-child(2) {
  background: #eee8de;
  transform: translate3d(-9px, 9px, -18px) rotate(-2deg);
}

.vp-oi-input-stack > div {
  padding: 28% 18%;
  transform: translateZ(12px);
}

.vp-oi-input-stack span,
.vp-oi-output-sheet span {
  width: 100%;
  height: 7px;
  margin-bottom: 24px;
  border-radius: 3px;
  background: var(--scene-line);
  display: block;
}

.vp-oi-input-stack span:nth-child(2) { width: 72%; background: var(--oi-teal); }
.vp-oi-input-stack span:nth-child(3) { width: 84%; }

.vp-oi-local-core {
  z-index: 6;
  left: 42%;
  top: 38%;
  width: 23%;
  aspect-ratio: 1;
  border-radius: 32px;
  background: linear-gradient(145deg, #31506e, var(--oi-navy-deep));
  box-shadow: -24px 40px 52px -29px rgba(14, 17, 22, .72), inset 0 1px rgba(255, 255, 255, .28);
  transform: rotateX(14deg) rotateY(-15deg) rotateZ(4deg);
}

.vp-oi-local-core::before {
  content: "";
  position: absolute;
  inset: 17px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 15px;
}

.vp-oi-local-core span {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 48%;
  height: 6px;
  border-radius: 3px;
  background: var(--oi-orange);
}

.vp-oi-local-core i {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--oi-teal);
  box-shadow: 0 0 14px rgba(15, 164, 141, .82);
}

.vp-oi-output-sheet {
  z-index: 4;
  right: 7%;
  top: 20%;
  width: 30%;
  height: 55%;
  padding: 15% 8% 7%;
  border: 1px solid var(--scene-line);
  border-radius: 20px;
  background: linear-gradient(145deg, #fffef9, #e8e1d5);
  box-shadow: -27px 47px 60px -36px rgba(14, 17, 22, .62), inset 0 1px #fff;
  transform: rotateX(10deg) rotateY(-17deg) rotateZ(5deg);
}

.vp-oi-output-sheet::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 42px;
  height: 42px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: #d5cdbf;
}

.vp-oi-output-sheet i {
  position: absolute;
  left: 13%;
  top: 10%;
  width: 22%;
  height: 8px;
  border-radius: 3px;
  background: var(--oi-navy);
}

.vp-oi-output-sheet span:nth-of-type(2) { width: 68%; }
.vp-oi-output-sheet span:nth-of-type(3) { width: 88%; }
.vp-oi-output-sheet b {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 12%;
  height: 9px;
  border-radius: 4px;
  background: var(--oi-orange);
}

.vp-oi-route {
  z-index: 2;
  top: 51%;
  height: 3px;
  background: linear-gradient(90deg, rgba(165, 68, 26, .12), var(--oi-orange));
}

.vp-oi-route::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 3px solid var(--oi-orange);
  border-top: 3px solid var(--oi-orange);
  transform: translateY(-50%) rotate(45deg);
}

.vp-oi-route--in { left: 32%; width: 11%; }
.vp-oi-route--out { left: 64%; width: 11%; }

/* Intro */

.vp-orderinvoer-page .vp-oi-intro {
  padding-top: clamp(96px, 11vw, 150px);
}

.vp-orderinvoer-page .vp-oi-split {
  grid-template-columns: minmax(0, 1fr) minmax(390px, .95fr);
  gap: clamp(54px, 8vw, 106px);
  align-items: center;
  display: grid;
}

.vp-oi-copy {
  max-width: 560px;
}

.vp-oi-source-scene {
  min-height: 470px;
}

.vp-oi-source-scene .vp-tool-beeld {
  position: absolute;
  z-index: 3;
  inset: 11% 7%;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateZ(50px) rotateX(4deg) rotateY(-8deg) rotateZ(-2deg);
}

.vp-oi-source-scene svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(-18px 29px 24px rgba(14, 17, 22, .2));
}

.vp-oi-svg-paper { fill: #fffdf8; stroke: #d1c8b9; stroke-width: 2; }
.vp-oi-svg-paper--back { fill: #dcd4c7; }
.vp-oi-svg-fold { fill: none; stroke: #bfb6a7; stroke-width: 2; }
.vp-oi-svg-line { fill: none; stroke: #1e3a5f; stroke-width: 6; stroke-linecap: round; opacity: .68; }
.vp-oi-svg-route { fill: none; stroke: #a5441a; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.vp-oi-svg-light { fill: none; stroke: #fbf9f4; stroke-width: 5; stroke-linecap: round; opacity: .82; }
.vp-oi-svg-teal { fill: #0fa48d; }
.vp-oi-svg-accent { fill: #a5441a; opacity: .92; }

/* Hoofdverhaal */

.vp-orderinvoer-page .vp-oi-flow {
  background: var(--oi-band);
}

.vp-oi-heading {
  max-width: 650px;
}

.vp-oi-heading--wide {
  max-width: 780px;
  margin-bottom: clamp(42px, 6vw, 72px);
}

.vp-oi-heading > p {
  max-width: 62ch;
  margin-bottom: 0;
  font-size: 19px;
}

.vp-oi-flow-stage {
  min-height: 520px;
  margin-bottom: 22px;
  border-color: rgba(30, 58, 95, .12);
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, .97), transparent 24%),
    linear-gradient(145deg, #f9f6ef, #e1d9cc);
}

.vp-oi-flow-source,
.vp-oi-flow-engine,
.vp-oi-flow-offer,
.vp-oi-flow-check,
.vp-oi-flow-line {
  position: absolute;
}

.vp-oi-flow-source {
  z-index: 3;
  left: 8%;
  top: 26%;
  width: 20%;
  height: 49%;
  padding: 8% 4% 4%;
  border: 1px solid var(--scene-line);
  border-radius: 20px;
  background: var(--scene-paper);
  box-shadow: -18px 34px 42px -29px rgba(14, 17, 22, .58), inset 0 1px #fff;
  transform: rotateX(12deg) rotateY(16deg) rotateZ(-6deg);
}

.vp-oi-flow-source i {
  position: absolute;
  top: -15px;
  left: 20px;
  width: 42%;
  height: 30px;
  border-radius: 11px 11px 0 0;
  background: #d5cdbf;
}

.vp-oi-flow-source span,
.vp-oi-flow-offer span {
  width: 100%;
  height: 7px;
  margin-bottom: 26px;
  border-radius: 4px;
  background: var(--scene-line);
  display: block;
}

.vp-oi-flow-source span:nth-of-type(2) { width: 68%; }
.vp-oi-flow-source span:nth-of-type(3) { width: 84%; background: var(--oi-teal); }

.vp-oi-flow-engine {
  z-index: 5;
  left: 40%;
  top: 26%;
  width: 21%;
  height: 49%;
  border-radius: 42px;
  background: linear-gradient(145deg, #31506e, var(--oi-navy-deep));
  box-shadow: -26px 44px 55px -31px rgba(14, 17, 22, .76), inset 0 1px rgba(255, 255, 255, .28);
  transform: rotateX(8deg) rotateY(-11deg) rotateZ(3deg);
}

.vp-oi-flow-engine::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 22px;
}

.vp-oi-flow-engine span {
  position: absolute;
  left: 24%;
  right: 24%;
  top: 44%;
  height: 7px;
  border-radius: 4px;
  background: var(--oi-orange);
}

.vp-oi-flow-engine i,
.vp-oi-flow-engine b {
  position: absolute;
  bottom: 21px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.vp-oi-flow-engine i { right: 23px; background: var(--oi-teal); box-shadow: 0 0 14px rgba(15, 164, 141, .78); }
.vp-oi-flow-engine b { right: 40px; background: #fff; opacity: .4; }

.vp-oi-flow-offer {
  z-index: 4;
  right: 8%;
  top: 20%;
  width: 22%;
  height: 58%;
  padding: 10% 5% 5%;
  border: 1px solid var(--scene-line);
  border-radius: 22px;
  background: linear-gradient(145deg, #fffdf8, #e9e2d6);
  box-shadow: -25px 44px 55px -34px rgba(14, 17, 22, .62), inset 0 1px #fff;
  transform: rotateX(9deg) rotateY(-15deg) rotateZ(4deg);
}

.vp-oi-flow-offer i {
  position: absolute;
  left: 18%;
  top: 11%;
  width: 28%;
  height: 8px;
  border-radius: 4px;
  background: var(--oi-navy);
}

.vp-oi-flow-offer span:nth-of-type(2) { width: 73%; }
.vp-oi-flow-offer span:nth-of-type(3) { width: 87%; }
.vp-oi-flow-offer b { position: absolute; left: 18%; right: 18%; bottom: 12%; height: 9px; border-radius: 4px; background: var(--oi-orange); }

.vp-oi-flow-check {
  z-index: 7;
  right: 5%;
  bottom: 11%;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--oi-teal);
  box-shadow: -18px 30px 38px -24px rgba(14, 17, 22, .7), inset 0 1px rgba(255, 255, 255, .4);
  transform: rotateX(12deg) rotateY(-14deg);
}

.vp-oi-flow-check span {
  position: absolute;
  left: 26px;
  top: 20px;
  width: 29px;
  height: 42px;
  border-right: 8px solid #fff;
  border-bottom: 8px solid #fff;
  transform: rotate(42deg);
}

.vp-oi-flow-line {
  z-index: 2;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, rgba(165, 68, 26, .12), var(--oi-orange));
}

.vp-oi-flow-line::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--oi-orange);
  border-top: 3px solid var(--oi-orange);
  transform: rotate(45deg);
}

.vp-oi-flow-line--a { left: 28%; width: 12%; }
.vp-oi-flow-line--b { left: 61%; width: 11%; }

.vp-oi-story {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0 clamp(8px, 2vw, 20px);
  display: grid;
}

.vp-oi-story article {
  min-width: 0;
  padding: clamp(30px, 4vw, 44px);
  border-left: 1px solid rgba(30, 58, 95, .16);
}

.vp-oi-story article:last-child { border-right: 1px solid rgba(30, 58, 95, .16); }
.vp-oi-story h3 { margin: 17px 0 14px; }
.vp-oi-story p { margin: 0; font-size: 16px; }
.vp-oi-index { color: var(--oi-orange); font-size: 14px; font-weight: 700; letter-spacing: .14em; }

.vp-orderinvoer-page .vp-oi-statement {
  max-width: 870px;
  margin: clamp(70px, 9vw, 118px) auto 0;
  color: var(--oi-ink);
  font-size: clamp(48px, 7vw, 86px);
  line-height: .97;
  font-weight: 650;
  letter-spacing: -.055em;
  text-align: center;
  text-wrap: balance;
}

/* Donker Vastpilot-moment */

.vp-orderinvoer-page .vp-oi-dark {
  padding-block: clamp(92px, 10vw, 150px);
  background: var(--oi-paper);
  color: var(--oi-ink);
}

.vp-oi-dark-grid {
  grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr);
  gap: clamp(54px, 8vw, 100px);
  align-items: center;
  display: grid;
}

.vp-orderinvoer-page .vp-oi-dark h2,
.vp-orderinvoer-page .vp-oi-dark h3 { color: var(--oi-ink); }
.vp-orderinvoer-page .vp-oi-dark h2 span { color: var(--oi-orange); }
.vp-orderinvoer-page .vp-oi-dark p { color: var(--vp-body, #22303b); }

.vp-oi-project-scene {
  min-height: 570px;
  border-color: rgba(255, 255, 255, .1);
  background:
    radial-gradient(circle at 19% 15%, rgba(255, 107, 53, .2), transparent 28%),
    linear-gradient(145deg, #243f60, #0b1523);
}

.vp-oi-project-file,
.vp-oi-key,
.vp-oi-service { position: absolute; }

.vp-oi-project-file {
  z-index: 3;
  left: 47%;
  top: 42%;
  width: 58%;
  height: 54%;
  padding: 15% 9% 7%;
  border-radius: 26px;
  background: linear-gradient(145deg, #fffdf8, #e7e0d5);
  box-shadow: -34px 52px 74px -38px rgba(0, 0, 0, .72), inset 0 1px #fff;
  transform: translate3d(-50%, -50%, 65px) rotateX(9deg) rotateY(-17deg) rotateZ(-5deg);
}

.vp-oi-project-file i {
  position: absolute;
  left: 26px;
  top: -18px;
  width: 42%;
  height: 34px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(145deg, #d9d0c2, #b8ad9c);
}

.vp-oi-project-file span { width: 100%; height: 9px; margin-bottom: 29px; border-radius: 4px; background: #d1c9bc; display: block; }
.vp-oi-project-file span:nth-of-type(2) { width: 70%; }
.vp-oi-project-file span:nth-of-type(3) { width: 87%; }
.vp-oi-project-file span:nth-of-type(4) { width: 51%; background: var(--oi-orange); }

.vp-oi-key {
  z-index: 7;
  left: 11%;
  bottom: 13%;
  width: 76px;
  height: 76px;
  border: 13px solid var(--oi-orange);
  border-radius: 50%;
  box-shadow: -12px 22px 30px -20px rgba(0, 0, 0, .76), inset 0 1px rgba(255, 255, 255, .35);
  transform: rotateX(12deg) rotateY(-18deg) rotateZ(10deg);
}

.vp-oi-key::after { content: ""; position: absolute; left: 52px; top: 18px; width: 84px; height: 19px; border-radius: 9px; background: linear-gradient(#b85125, #743014); }
.vp-oi-key i { position: absolute; left: 92px; top: 31px; width: 18px; height: 18px; border-right: 10px solid #743014; border-bottom: 10px solid #743014; }

.vp-oi-service {
  z-index: 6;
  right: 7%;
  bottom: 10%;
  width: 122px;
  height: 80px;
  border-radius: 24px;
  background: linear-gradient(145deg, #335270, #101b2a);
  box-shadow: -18px 30px 38px -22px rgba(0, 0, 0, .76), inset 0 1px rgba(255, 255, 255, .3);
  transform: rotateX(14deg) rotateY(-18deg) rotateZ(5deg);
}

.vp-oi-service span { position: absolute; left: 24px; top: 35px; width: 48px; height: 6px; border-radius: 3px; background: #f4a27c; }
.vp-oi-service i { position: absolute; right: 18px; bottom: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--oi-teal); box-shadow: 0 0 12px rgba(15, 164, 141, .8); }

.vp-oi-role-list article {
  padding: 24px 0;
  border-top: 1px solid rgba(30, 58, 95, .16);
}

.vp-oi-role-list article:last-child { border-bottom: 1px solid rgba(30, 58, 95, .16); }
.vp-oi-role-list h3 { margin: 0 0 10px; font-size: 21px; }
.vp-oi-role-list p { margin: 0; font-size: 16px; }

/* Klantinput */

.vp-oi-client-panel {
  grid-template-columns: minmax(0, 1.06fr) minmax(350px, .94fr);
  gap: clamp(48px, 7vw, 88px);
  padding: clamp(34px, 5vw, 62px) !important;
  border-radius: 28px;
  background: var(--oi-band);
  align-items: center;
  display: grid;
}

.vp-oi-client-list article {
  position: relative;
  padding: 22px 0 22px 30px;
  border-top: 1px solid rgba(30, 58, 95, .17);
}

.vp-oi-client-list article::before {
  content: "";
  position: absolute;
  top: 31px;
  left: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--oi-orange);
  transform: rotate(45deg);
}

.vp-oi-client-list h3 { margin: 0 0 9px; font-size: 21px; }
.vp-oi-client-list p { margin: 0; font-size: 16px; }

.vp-oi-tray-scene {
  min-height: 540px;
}

.vp-oi-input-tray {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 53%;
  width: 76%;
  height: 62%;
  padding: 12% 13% 7%;
  border: 12px solid var(--oi-navy);
  border-top-width: 5px;
  border-radius: 28px;
  background: linear-gradient(145deg, #e8e1d5, #b7aa98);
  box-shadow: 0 48px 60px -34px rgba(14, 17, 22, .68), inset 0 2px 3px rgba(255, 255, 255, .7);
  transform: translate3d(-50%, -50%, 28px) rotateX(54deg) rotateZ(-7deg);
  transform-style: preserve-3d;
}

.vp-oi-input-tray::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -20px; height: 28px; border-radius: 0 0 18px 18px; background: linear-gradient(#263f5c, #101b2a); }
.vp-oi-input-tray > div { position: relative; height: 25%; margin-top: -4px; border: 1px solid var(--scene-line); border-radius: 12px; background: var(--scene-paper); box-shadow: 0 13px 18px -15px rgba(14, 17, 22, .68), inset 0 1px #fff; transform: translateZ(32px); }
.vp-oi-input-tray > div:nth-child(2) { transform: translate3d(6px, -2px, 38px); }
.vp-oi-input-tray > div:nth-child(3) { transform: translate3d(-4px, -4px, 44px); }
.vp-oi-input-tray > div:nth-child(4) { transform: translate3d(3px, -6px, 50px); }
.vp-oi-input-tray i { position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--oi-orange); transform: translateY(-50%); }
.vp-oi-input-tray > div:nth-child(2) i { background: var(--oi-teal); }
.vp-oi-input-tray > div:nth-child(3) i { border-radius: 3px; background: var(--oi-navy); transform: translateY(-50%) rotate(45deg); }
.vp-oi-input-tray > div:nth-child(4) i { background: #60738c; }
.vp-oi-input-tray span { position: absolute; left: 36px; right: 17px; top: 50%; height: 5px; border-radius: 3px; background: var(--scene-line); transform: translateY(-50%); }

.vp-oi-review-marker {
  position: absolute;
  z-index: 7;
  right: 8%;
  bottom: 8%;
  width: 88px;
  height: 88px;
  border-radius: 24px;
  background: linear-gradient(145deg, #31506e, var(--oi-navy-deep));
  box-shadow: -19px 31px 39px -23px rgba(14, 17, 22, .75), inset 0 1px rgba(255, 255, 255, .28);
  transform: rotateX(13deg) rotateY(-16deg) rotateZ(6deg);
}

.vp-oi-review-marker span { position: absolute; left: 24px; top: 24px; width: 25px; height: 35px; border-right: 7px solid #fff; border-bottom: 7px solid #fff; transform: rotate(42deg); }
.vp-oi-review-marker i { position: absolute; right: 13px; bottom: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--oi-teal); }

/* Beslisfeiten */

.vp-orderinvoer-page .vp-oi-facts {
  padding-top: clamp(40px, 5vw, 70px);
}

.vp-oi-facts-head {
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(40px, 8vw, 90px);
  margin-bottom: clamp(44px, 6vw, 70px);
  align-items: end;
  display: grid;
}

.vp-oi-book-scene {
  min-height: 250px;
}

.vp-oi-decision-book {
  position: absolute;
  z-index: 3;
  left: 48%;
  top: 48%;
  width: 56%;
  height: 63%;
  transform: translate3d(-50%, -50%, 36px) rotateX(13deg) rotateY(-17deg) rotateZ(-8deg);
  transform-style: preserve-3d;
}

.vp-oi-decision-book > i,
.vp-oi-decision-book > div { position: absolute; inset: 0; border-radius: 16px; box-shadow: -18px 30px 38px -26px rgba(14, 17, 22, .68); }
.vp-oi-decision-book > i:first-child { background: var(--oi-navy); transform: translate3d(-9px, 8px, -20px); }
.vp-oi-decision-book > i:nth-child(2) { border: 1px solid var(--scene-line); background: #d9d2c6; transform: translate3d(-5px, 4px, -10px); }
.vp-oi-decision-book > div { padding: 29px 20px; border: 1px solid var(--scene-line); background: var(--scene-paper); box-shadow: inset 0 1px #fff, -18px 30px 38px -26px rgba(14, 17, 22, .68); }
.vp-oi-decision-book span { width: 100%; height: 6px; margin-bottom: 22px; border-radius: 3px; background: var(--scene-line); display: block; }
.vp-oi-decision-book span:nth-child(2) { width: 62%; }
.vp-oi-decision-book b { position: absolute; right: 16px; bottom: 15px; width: 20px; height: 20px; border: 5px solid var(--oi-teal); border-radius: 50%; }
.vp-oi-book-scene > em { position: absolute; z-index: 6; left: 54%; top: 23%; width: 18px; height: 112px; background: linear-gradient(#c45324, #813412); box-shadow: 0 13px 18px -13px rgba(14, 17, 22, .7); transform: rotateY(-17deg) rotateZ(-8deg); }

.vp-oi-fact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  display: grid;
}

.vp-oi-fact-grid > div {
  min-width: 0;
  min-height: 218px;
  padding: clamp(27px, 4vw, 40px);
  border: 1px solid var(--oi-line);
  border-radius: 24px;
  background: var(--oi-band);
}

.vp-oi-fact-grid > div:nth-child(2),
.vp-oi-fact-grid > div:nth-child(3) { background: #fdf1e9; }
.vp-oi-fact-grid dt { margin-bottom: 20px; font-weight: 700; }
.vp-oi-fact-grid dd { margin: 0; }

/* Pasvorm */

.vp-orderinvoer-page .vp-oi-fit {
  background: var(--oi-band);
}

.vp-oi-fit-grid {
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: clamp(52px, 9vw, 116px);
  align-items: start;
  display: grid;
}

.vp-oi-fit-scene {
  min-height: 300px;
  margin-top: 38px;
}

.vp-oi-fit-gate,
.vp-oi-fit-paper { position: absolute; }
.vp-oi-fit-gate { z-index: 3; left: 60%; top: 48%; width: 43%; height: 62%; border: 20px solid var(--oi-navy); border-radius: 50% 50% 20px 20px; background: linear-gradient(145deg, #c5bbab, #ebe5da); box-shadow: -25px 42px 54px -32px rgba(14, 17, 22, .62), inset 0 2px 2px rgba(255, 255, 255, .7); transform: translate3d(-50%, -50%, 35px) rotateX(5deg) rotateY(-17deg) rotateZ(1deg); }
.vp-oi-fit-gate span { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--scene-paper); box-shadow: inset 0 0 0 1px var(--scene-line); transform: translate(-50%, -50%); }
.vp-oi-fit-paper { z-index: 6; left: 15%; bottom: 10%; width: 30%; height: 47%; padding: 13% 5% 4%; border: 1px solid var(--scene-line); border-radius: 16px; background: var(--scene-paper); box-shadow: -20px 30px 38px -22px rgba(14, 17, 22, .66), inset 0 1px #fff; transform: rotateX(13deg) rotateY(-18deg) rotateZ(-7deg); }
.vp-oi-fit-paper i { position: absolute; left: 17%; top: 14%; width: 28%; height: 7px; border-radius: 3px; background: var(--oi-orange); }
.vp-oi-fit-paper span { width: 100%; height: 6px; margin-bottom: 20px; border-radius: 3px; background: var(--scene-line); display: block; }
.vp-oi-fit-paper span:nth-of-type(2) { width: 68%; }

.vp-oi-not-fit {
  padding-top: 12px;
}

.vp-oi-not-fit > h3 {
  max-width: 18ch;
  margin: 0 0 34px;
  font-size: clamp(30px, 4vw, 46px);
}

.vp-oi-not-fit ul {
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.vp-oi-not-fit li {
  position: relative;
  padding: 25px 0 25px 34px;
  border-top: 1px solid rgba(30, 58, 95, .18);
}

.vp-oi-not-fit li:last-child { border-bottom: 1px solid rgba(30, 58, 95, .18); }
.vp-oi-not-fit li::before { content: ""; position: absolute; left: 2px; top: 34px; width: 13px; height: 13px; border: 3px solid var(--oi-orange); transform: rotate(45deg); }

/* FAQ blijft volledig leesbaar; noindex-modulecontract verbiedt uitklappers. */

.vp-oi-faq-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 52px;
  margin: 0;
  display: grid;
}

/* Drie punten naast elkaar over de volle sectiebreedte, onder de koprij.
   Onder 768px klapt dit terug naar een kolom (drie items passen niet
   netjes in twee). */
.vp-oi-role-list,
.vp-oi-client-list {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(26px, 3vw, 44px);
  margin-top: 8px;
  display: grid;
}

.vp-oi-role-list article,
.vp-oi-client-list article {
  min-width: 0;
  padding: 19px 0 23px;
  border-top: 1px solid rgba(30, 58, 95, .16);
}

@media (max-width: 767px) {
  .vp-oi-role-list,
  .vp-oi-client-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vp-oi-faq-list > div {
  min-width: 0;
  padding: 28px 0 30px;
  border-top: 1px solid rgba(30, 58, 95, .18);
}

.vp-oi-faq-list > div:last-child { grid-column: 1 / -1; }
.vp-oi-faq-list dt { margin-bottom: 12px; font-weight: 700; }
.vp-oi-faq-list dd { margin: 0; }

/* CTA */

.vp-orderinvoer-page .vp-oi-cta {
  padding-block: clamp(52px, 7vw, 96px) clamp(110px, 12vw, 160px);
  background: var(--oi-paper);
}

.vp-orderinvoer-page .vp-oi-cta-panel {
  min-height: 500px;
  padding: clamp(40px, 6vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(290px, .78fr);
  gap: clamp(40px, 7vw, 80px);
  border-radius: 28px;
  background: var(--oi-band);
  align-items: center;
  display: grid;
}

.vp-orderinvoer-page .vp-oi-cta-panel h2 {
  max-width: 10ch;
  margin-bottom: 22px;
  color: var(--oi-ink);
}

.vp-orderinvoer-page .vp-oi-cta-panel p {
  max-width: 58ch;
  color: var(--vp-body, #22303b);
}

.vp-orderinvoer-page .vp-oi-cta-panel .button-div {
  margin-top: 30px;
  flex-wrap: wrap;
}

.vp-orderinvoer-page .vp-oi-cta-panel .button-div > .app-button,
.vp-orderinvoer-page .vp-oi-cta-panel .button-div > .app-button:first-of-type:not(.vp-cta-secondary),
.vp-orderinvoer-page .vp-oi-cta-panel .button-div > .app-button:not(:first-of-type):not(.vp-cta-primary),
.vp-orderinvoer-page .vp-oi-cta-panel .button-div > .app-button.vp-cta-secondary,
.vp-orderinvoer-page .vp-oi-cta-panel .button-div > .app-button.vp-cta-primary {
  background: transparent !important;
  border-color: var(--oi-orange-dark) !important;
  color: var(--oi-orange-dark) !important;
}

.vp-orderinvoer-page .vp-oi-cta-panel .button-div > .app-button:hover,
.vp-orderinvoer-page .vp-oi-cta-panel .button-div > .app-button:first-of-type:not(.vp-cta-secondary):hover,
.vp-orderinvoer-page .vp-oi-cta-panel .button-div > .app-button:not(:first-of-type):not(.vp-cta-primary):hover,
.vp-orderinvoer-page .vp-oi-cta-panel .button-div > .app-button.vp-cta-secondary:hover,
.vp-orderinvoer-page .vp-oi-cta-panel .button-div > .app-button.vp-cta-primary:hover {
  background: var(--oi-orange-dark) !important;
  color: #fff !important;
}

.vp-orderinvoer-page .vp-oi-cta-panel .button-div > .app-button:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht, #a5441a) !important;
  outline-offset: 3px;
}

.vp-oi-cta-scene {
  min-height: 350px;
}

.vp-oi-cta-route {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 47%;
  width: 54%;
  height: 62%;
  padding: 15% 9% 6%;
  border: 1px solid var(--scene-line);
  border-radius: 24px;
  background: var(--scene-paper);
  box-shadow: -28px 46px 58px -36px rgba(14, 17, 22, .65), inset 0 1px #fff;
  transform: translate3d(-50%, -50%, 44px) rotateX(13deg) rotateY(-16deg) rotateZ(-6deg);
}

.vp-oi-cta-route i { position: absolute; left: 14%; top: 12%; width: 28%; height: 9px; border-radius: 4px; background: var(--oi-navy); }
.vp-oi-cta-route span { width: 100%; height: 7px; margin-bottom: 27px; border-radius: 4px; background: var(--scene-line); display: block; }
.vp-oi-cta-route span:nth-of-type(2) { width: 68%; }
.vp-oi-cta-route b { position: absolute; left: 14%; right: 14%; bottom: 12%; height: 9px; border-radius: 4px; background: var(--oi-orange); }

.vp-oi-cta-arrow {
  position: absolute;
  z-index: 7;
  right: 8%;
  bottom: 9%;
  width: 86px;
  height: 86px;
  border-radius: 24px;
  background: linear-gradient(145deg, #31506e, var(--oi-navy-deep));
  box-shadow: -18px 31px 40px -24px rgba(14, 17, 22, .72), inset 0 1px rgba(255, 255, 255, .28);
  transform: rotateX(12deg) rotateY(-16deg) rotateZ(5deg);
}

.vp-oi-cta-arrow::before,
.vp-oi-cta-arrow::after { content: ""; position: absolute; background: #fff; }
.vp-oi-cta-arrow::before { left: 24px; top: 40px; width: 38px; height: 7px; border-radius: 4px; }
.vp-oi-cta-arrow::after { right: 21px; top: 29px; width: 23px; height: 23px; border-top: 7px solid #fff; border-right: 7px solid #fff; background: transparent; transform: rotate(45deg); }

@media (max-width: 991px) {
  .vp-orderinvoer-page .vp-oi-hero .vp-oi-hero-grid {
    max-width: 820px;
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero .vp-x-hero-copy {
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
  }

  .vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero h1,
  .vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero .large-paragraph { margin-inline: auto; text-align: center; }
  .vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero .button-div { justify-content: center; }
  .vp-oi-hero-scene { width: min(100%, 650px); min-height: 520px; margin-inline: auto; }

  .vp-orderinvoer-page .vp-oi-split,
  .vp-oi-dark-grid,
  .vp-oi-client-panel,
  .vp-oi-fit-grid { grid-template-columns: 1fr 1fr; gap: 42px; }

  .vp-oi-project-scene,
  .vp-oi-tray-scene { min-height: 500px; }
}

@media (max-width: 767px) {
  .vp-orderinvoer-page .vp-oi-section { padding-block: 72px; }
  .vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero { min-height: 0; padding-block: 130px 82px; }
  .vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero h1 { font-size: clamp(48px, 12vw, 68px); }
  .vp-orderinvoer-page h2 { font-size: clamp(38px, 10vw, 54px); }

  .vp-orderinvoer-page .vp-oi-split,
  .vp-oi-dark-grid,
  .vp-oi-client-panel,
  .vp-oi-fit-grid,
  .vp-oi-facts-head { grid-template-columns: 1fr; }

  .vp-oi-source-scene { min-height: 410px; order: -1; }
  .vp-oi-project-scene { min-height: 440px; }
  .vp-oi-client-panel { padding: 28px !important; }
  .vp-oi-tray-scene { min-height: 420px; }
  .vp-oi-book-scene { width: 210px; min-height: 210px; }

  .vp-oi-story,
  .vp-oi-fact-grid,
  .vp-oi-faq-list { grid-template-columns: 1fr; }

  .vp-oi-story article {
    padding: 30px 8px;
    border-right: 0;
    border-left: 0;
    border-top: 1px solid rgba(30, 58, 95, .16);
  }

  .vp-oi-story article:last-child { border-right: 0; border-bottom: 1px solid rgba(30, 58, 95, .16); }
  .vp-oi-flow-stage { min-height: 400px; }
  .vp-oi-flow-source { left: 5%; width: 24%; }
  .vp-oi-flow-engine { left: 38%; width: 25%; }
  .vp-oi-flow-offer { right: 4%; width: 25%; }
  .vp-oi-flow-check { width: 64px; height: 64px; }
  .vp-oi-flow-check span { left: 19px; top: 15px; width: 23px; height: 32px; border-width: 0 6px 6px 0; }

  .vp-oi-fact-grid > div { min-height: 0; }
  .vp-oi-faq-list > div:last-child { grid-column: auto; }

  .vp-orderinvoer-page .vp-oi-cta-panel {
    min-height: 0;
    padding: 36px 26px;
    grid-template-columns: 1fr;
  }

  .vp-oi-cta-scene { min-height: 320px; }
}

@media (max-width: 479px) {
  .vp-orderinvoer-page .vp-oi-section > .container,
  .vp-orderinvoer-page .vp-oi-cta > .container { padding-inline: 16px; }
  .vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero { padding-block: 112px 66px; }
  .vp-orderinvoer-page .vp-oi-hero .vp-oi-hero-grid { padding-inline: 16px; gap: 42px; }
  .vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero h1 { font-size: clamp(44px, 13.8vw, 60px); }
  .vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero .large-paragraph { font-size: 17px; }
  .vp-orderinvoer-page h2 { font-size: clamp(36px, 11vw, 48px); }
  .vp-orderinvoer-page p,
  .vp-orderinvoer-page dd,
  .vp-orderinvoer-page li { font-size: 16px; }

  .vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero .button-div,
  .vp-orderinvoer-page .vp-oi-cta-panel .button-div { align-items: stretch; }
  .vp-homepage-canon.vp-orderinvoer-page .vp-oi-hero .app-button,
  .vp-orderinvoer-page .vp-oi-cta-panel .app-button { width: 100%; }

  .vp-oi-hero-scene { min-height: 370px; border-radius: 25px; }
  .vp-oi-input-stack { left: 4%; top: 31%; width: 33%; height: 40%; }
  .vp-oi-local-core { left: 39%; top: 39%; width: 25%; border-radius: 22px; }
  .vp-oi-local-core::before { inset: 11px; border-radius: 13px; }
  .vp-oi-output-sheet { right: 2%; top: 21%; width: 31%; height: 51%; border-radius: 16px; }
  .vp-oi-route--in { left: 34%; width: 7%; }
  .vp-oi-route--out { left: 63%; width: 7%; }

  .vp-oi-source-scene { min-height: 310px; border-radius: 20px; }
  .vp-oi-flow-stage { min-height: 305px; border-radius: 20px; }
  .vp-oi-flow-source { height: 46%; border-radius: 14px; }
  .vp-oi-flow-engine { top: 29%; height: 44%; border-radius: 24px; }
  .vp-oi-flow-engine::before { inset: 10px; border-radius: 15px; }
  .vp-oi-flow-offer { height: 53%; border-radius: 15px; }
  .vp-oi-flow-check { right: 2%; bottom: 5%; width: 47px; height: 47px; }
  .vp-oi-flow-check span { left: 15px; top: 11px; width: 15px; height: 23px; border-width: 0 5px 5px 0; }
  .vp-orderinvoer-page .vp-oi-statement { margin-top: 66px; font-size: clamp(42px, 12vw, 56px); }

  .vp-oi-project-scene { min-height: 350px; border-radius: 20px; }
  .vp-oi-project-file { width: 61%; height: 56%; padding: 18% 8% 6%; }
  .vp-oi-key { left: 6%; width: 54px; height: 54px; border-width: 10px; }
  .vp-oi-key::after { left: 36px; top: 12px; width: 59px; height: 15px; }
  .vp-oi-key i { left: 66px; top: 22px; }
  .vp-oi-service { right: 4%; width: 88px; height: 62px; }
  .vp-oi-service span { left: 18px; top: 27px; width: 34px; }

  .vp-oi-client-panel { padding: 24px 18px !important; border-radius: 20px; }
  .vp-oi-tray-scene { min-height: 330px; border-radius: 20px; }
  .vp-oi-input-tray { width: 81%; height: 65%; }
  .vp-oi-review-marker { right: 4%; width: 64px; height: 64px; border-radius: 18px; }
  .vp-oi-review-marker span { left: 18px; top: 16px; width: 18px; height: 26px; border-width: 0 5px 5px 0; }

  .vp-oi-fact-grid > div { padding: 25px 22px; border-radius: 18px; }
  .vp-oi-fit-scene { min-height: 240px; border-radius: 20px; }
  .vp-oi-fit-gate { border-width: 15px; }
  .vp-oi-fit-paper { width: 34%; height: 48%; }
  .vp-oi-not-fit > h3 { font-size: 32px; }

  .vp-orderinvoer-page .vp-oi-cta-panel { padding: 28px 18px; border-radius: 20px; }
  .vp-oi-cta-scene { min-height: 250px; border-radius: 18px; }
  .vp-oi-cta-arrow { right: 4%; width: 62px; height: 62px; border-radius: 17px; }
  .vp-oi-cta-arrow::before { left: 17px; top: 29px; width: 28px; height: 5px; }
  .vp-oi-cta-arrow::after { right: 15px; top: 21px; width: 16px; height: 16px; border-width: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-orderinvoer-page *,
  .vp-orderinvoer-page *::before,
  .vp-orderinvoer-page *::after {
    animation: none !important;
  }

  html.vp-anim-armed .vp-orderinvoer-page [data-vp-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}