/* =========================================================
   Noventra — the first two stops of the homepage film (index.html):
   the three promises over the clouds, and 'Wat we doen' at the building.
   ========================================================= */

/* ---- stop 0: three promises, one after another, as big type over the clouds ---- */
.block.hero .brand-mark{width:clamp(48px,5.5vw,70px); margin-bottom:.8rem}
.block.hero .wm{height:clamp(18px,2.2vw,24px); margin-bottom:1.6rem}

/* 'Outbound én inbound' between two arrows: one going out, one coming in */
.intro-flow{display:inline-flex; align-items:center; gap:.8rem; padding:.5rem 1rem; border-radius:999px;
            color:#fff !important; background:rgba(13,14,17,.32); border:1px solid rgba(255,255,255,.22);
            backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-shadow:none !important}
.intro-flow i{position:relative; width:34px; height:2px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.25)}
.intro-flow i::after{content:""; position:absolute; top:0; width:12px; height:100%; border-radius:2px; background:var(--red)}
.intro-flow .flow-out::after{animation:flowRight 1.6s linear infinite}
.intro-flow .flow-in::after{animation:flowLeft 1.6s linear infinite}
@keyframes flowRight{from{left:-12px} to{left:34px}}
@keyframes flowLeft{from{left:34px} to{left:-12px}}

.block h2.intro-lines{display:grid; justify-items:center; gap:.08em; margin:1.3rem 0 9rem;
                      font-size:clamp(2.2rem,4.8vw,4.3rem); line-height:1; letter-spacing:-.045em;
                      text-shadow:none; filter:drop-shadow(0 4px 22px rgba(4,6,12,.45))}
/* the masks would clip a text shadow into boxes: the shadow comes from the filter above */
.intro-line, .intro-line > *{text-shadow:none}
/* each line rises out of a mask, the next a moment later */
.intro-line{display:block; overflow:hidden; padding:.06em .1em .1em}
.intro-line > *{display:inline-block; transform:translateY(105%); transition:transform .9s cubic-bezier(.2,.75,.2,1)}
.block.on .intro-line > *{transform:none}
.block.on .intro-line:nth-child(2) > *{transition-delay:.14s}
.block.on .intro-line:nth-child(3) > *{transition-delay:.28s}
.intro-line:nth-child(1), .intro-line:nth-child(2){color:rgba(255,255,255,.94)}
/* the last promise in brand orange, underlined by a stroke that draws itself */
.intro-line:nth-child(3){position:relative; padding-bottom:.22em}
.intro-line em{position:relative; text-shadow:none;
               background:linear-gradient(100deg, #ffb27f 0%, #ff6a2c 45%, #f33801 100%);
               -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.intro-line:nth-child(3)::after{content:""; position:absolute; left:50%; bottom:.04em; width:min(78%, 9.5em); height:.08em;
                                border-radius:1em; background:linear-gradient(90deg, transparent, var(--red) 20%, #ffb27f 80%, transparent);
                                transform:translateX(-50%) scaleX(0); transition:transform 1s cubic-bezier(.2,.75,.2,1) .55s}
.block.on .intro-line:nth-child(3)::after{transform:translateX(-50%) scaleX(1)}

/* ---- stop 1: 'Wat we doen' as a panel, with the goods flow drawn live ---- */
/* centred, low in the frame: the name on the building stays in view above it */
.block.wwd{max-width:none; align-items:center; justify-content:flex-end; padding-bottom:9vh}
.block.wwd .wwd-card{width:min(1120px, 100%)}
.haze.bottom{background:linear-gradient(to top, rgba(4,6,12,.8) 0%, rgba(4,6,12,.32) 40%, transparent 66%)}
.wwd-card{display:grid; gap:clamp(1.4rem,3vw,2.6rem); align-items:center; padding:clamp(1.4rem,2.4vw,2.2rem) clamp(1.4rem,3vw,2.6rem);
          border-radius:28px; background:linear-gradient(150deg, rgba(14,17,24,.72), rgba(9,11,17,.5));
          border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
          box-shadow:0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12)}
@media(min-width:1000px){ .wwd-card{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} }
.wwd .wwd-text h2{margin-bottom:.8rem; font-size:clamp(1.7rem,2.6vw,2.3rem)}
.wwd .wwd-text p{font-size:clamp(.95rem,1.2vw,1.05rem); line-height:1.65}
.wwd-flow .tab-panel p{font-size:.92rem}
/* lower screens: a more compact panel, so it fits under the name on the building */
@media(max-height:820px){
  .wwd-card{padding:1.3rem 1.6rem; gap:1.4rem}
  .wwd .wwd-text h2{font-size:1.75rem}
  .wwd .wwd-text p{font-size:.9rem; line-height:1.55}
  .wwd-signals{margin-top:.9rem}
  .wwd-flow{gap:.6rem; padding:.9rem 1rem}
  .flow-map{max-height:96px}
}
.wwd .wwd-text p{text-shadow:none}

/* the three things the AI looks for */
.wwd-signals{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 0; padding:0}
.wwd-signals li{display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .8rem; border-radius:999px;
                font-size:.8rem; font-weight:700; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14)}
.wwd-signals i{position:relative; width:8px; height:8px; border-radius:50%; background:var(--red)}
.wwd-signals i::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--red); opacity:0;
                      animation:signalPing 2.4s ease-out infinite}
.wwd-signals li:nth-child(2) i::after{animation-delay:.8s}
.wwd-signals li:nth-child(3) i::after{animation-delay:1.6s}
@keyframes signalPing{0%{transform:scale(.4); opacity:.9} 70%,100%{transform:scale(1.6); opacity:0}}

.wwd-flow{display:grid; gap:1rem; padding:clamp(1rem,2vw,1.4rem); border-radius:22px;
          background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1)}
.wwd-flow .tabs{margin-top:0; justify-self:start}
.wwd-flow .tab-panel{margin-top:0; max-width:none; padding:0}
.wwd-flow .tab-panel.on{animation:panelIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes panelIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* the diagram: suppliers -> your chain -> customers */
.flow-map{display:block; width:100%; height:auto; overflow:visible}
.flow-line{fill:none; stroke:rgba(255,255,255,.22); stroke-width:2; stroke-dasharray:4 6; transition:stroke .4s}
.flow-dot{fill:#fff; opacity:0; transition:opacity .4s}
.flow-node circle{fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.28); stroke-width:1.5; transition:fill .4s, stroke .4s}
.flow-node path{fill:none; stroke:rgba(255,255,255,.6); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .4s}
.flow-map text{fill:rgba(255,255,255,.62); font-size:14px; font-weight:700; text-anchor:middle; letter-spacing:.02em; transition:fill .4s}
.flow-hub rect{fill:#f33801; filter:drop-shadow(0 10px 22px rgba(243,56,1,.55))}
.flow-hub path{fill:#fff}
.flow-hub text{fill:#fff}
.flow-scan{fill:none; stroke:rgba(243,56,1,.7); stroke-width:1.5; transform-box:fill-box; transform-origin:center;
           animation:hubScan 2.8s ease-out infinite}
.flow-scan-2{animation-delay:1.4s}
@keyframes hubScan{from{transform:scale(.85); opacity:.9} to{transform:scale(1.9); opacity:0}}

/* the active side: an orange solid route with goods moving along */
.wwd-flow[data-mode="outbound"] .flow-side-out .flow-line,
.wwd-flow[data-mode="inbound"] .flow-side-in .flow-line{stroke:#f33801; stroke-dasharray:none; stroke-width:2.5}
.wwd-flow[data-mode="outbound"] .flow-side-out .flow-dot,
.wwd-flow[data-mode="inbound"] .flow-side-in .flow-dot{opacity:1}
.wwd-flow[data-mode="outbound"] .flow-node-out circle,
.wwd-flow[data-mode="inbound"] .flow-node-in circle{fill:rgba(243,56,1,.18); stroke:#f33801}
.wwd-flow[data-mode="outbound"] .flow-node-out path,
.wwd-flow[data-mode="inbound"] .flow-node-in path{stroke:#fff}
.wwd-flow[data-mode="outbound"] .flow-node-out text,
.wwd-flow[data-mode="inbound"] .flow-node-in text{fill:#fff}

/* ---- phones and the static page: everything stacked, no masks ---- */
body.static .intro-line > *{transform:none; transition:none}
body.static .intro-line:nth-child(3)::after{transform:translateX(-50%) scaleX(1); transition:none}
body.static .block.wwd{justify-content:center}
body.static .block h2.intro-lines{margin-bottom:0}
@media(max-width:560px){
  .block h2.intro-lines{font-size:clamp(2.1rem,10vw,2.8rem)}
  .wwd-signals li{font-size:.74rem}
}

@media(prefers-reduced-motion:reduce){
  .intro-line > *{transform:none; transition:none}
  .intro-line:nth-child(3)::after{transform:translateX(-50%) scaleX(1); transition:none}
  .intro-flow i::after, .wwd-signals i::after, .flow-scan{animation:none}
  .wwd-flow .tab-panel.on{animation:none}
}
/* the stop rail sits on the left: keep the same room on both sides, so the panel stays centred */
@media(min-width:1100px){
  .block.wwd:not(.hero):not(.outro){padding-left:clamp(11rem,13vw,13.5rem); padding-right:clamp(11rem,13vw,13.5rem)}
}

/* ---- stop 2: OrangeChain as an app panel beside the dashboard on the wall ---- */
.block.oc{max-width:none; align-items:flex-end; padding-top:calc(var(--nav-h) + 1.4rem); padding-bottom:1.6rem}
.oc-panel{width:min(500px, 100%); border-radius:24px; overflow:hidden;
          background:linear-gradient(160deg, rgba(14,17,24,.8), rgba(9,11,17,.62));
          border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
          box-shadow:0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12)}
/* a window bar, like the app itself */
.oc-bar{display:flex; align-items:center; gap:.4rem; padding:.7rem 1rem; border-bottom:1px solid rgba(255,255,255,.08);
        background:rgba(255,255,255,.03)}
.oc-bar span{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18)}
.oc-bar span:first-child{background:#f33801}
.oc-bar b{margin-left:.6rem; font-size:.78rem; letter-spacing:.02em; color:rgba(255,255,255,.8)}
.oc-bar em{margin-left:auto; margin-right:.6rem; display:inline-flex; align-items:center; gap:.4rem; font-style:normal; font-size:.7rem; font-weight:700;
           letter-spacing:.14em; text-transform:uppercase; color:#3ccf7d}
.oc-view{display:inline-flex; align-items:center; gap:.4rem; padding:.38rem .75rem; border-radius:999px; cursor:pointer;
         border:1px solid rgba(243,56,1,.55); background:rgba(243,56,1,.14); font:700 .74rem/1 inherit; color:#fff;
         transition:background .2s}
.oc-view:hover{background:#f33801}
.oc-view svg{width:13px; height:13px}
.oc-bar em::before{content:""; width:7px; height:7px; border-radius:50%; background:#3ccf7d; box-shadow:0 0 0 3px rgba(60,207,125,.2);
                   animation:ocLive 1.6s ease-in-out infinite}
@keyframes ocLive{50%{opacity:.35}}
.oc-body{display:flex; flex-direction:column; padding:1.3rem 1.5rem 1.4rem}
.oc .oc-body h2{margin:0 0 .5rem; font-size:clamp(1.9rem,3vw,2.5rem);
                background:linear-gradient(100deg, #fff 30%, #ffb27f 75%, #f33801); -webkit-background-clip:text; background-clip:text;
                -webkit-text-fill-color:transparent; text-shadow:none}
.oc .oc-body > p{font-size:.95rem; line-height:1.6; text-shadow:none}

/* the stage: one small animated picture per feature */
.oc-stage{position:relative; height:104px; margin:1rem 0 .9rem; border-radius:16px; overflow:hidden;
          background:radial-gradient(ellipse 60% 90% at 50% 100%, rgba(243,56,1,.16), transparent 70%), rgba(255,255,255,.035);
          border:1px solid rgba(255,255,255,.08)}
.oc-scene{position:absolute; inset:0; width:100%; height:100%; opacity:0; transform:translateY(8px); transition:opacity .45s, transform .45s}
.oc-panel[data-active="0"] .oc-scene-0, .oc-panel[data-active="1"] .oc-scene-1,
.oc-panel[data-active="2"] .oc-scene-2, .oc-panel[data-active="3"] .oc-scene-3{opacity:1; transform:none}
/* 0: action radar */
.oc-scene-0 .ring{fill:none; stroke:rgba(255,255,255,.14)}
.oc-scene-0 .sweep{fill:rgba(243,56,1,.35); transform-origin:0 0; animation:ocSweep 3s linear infinite}
@keyframes ocSweep{to{transform:rotate(360deg)}}
.oc-scene-0 .blip.ok{fill:rgba(255,255,255,.55)}
.oc-scene-0 .blip.act{fill:#f33801; animation:ocBlip 1.5s ease-in-out infinite}
.oc-scene-0 .blip.b2{animation-delay:.75s}
@keyframes ocBlip{50%{opacity:.3}}
/* 1: realtime status */
.oc-scene-1 .pulse-base{stroke:rgba(255,255,255,.08); stroke-width:2; fill:none}
.oc-scene-1 .pulse{fill:none; stroke:#f33801; stroke-width:2.5; stroke-linejoin:round; stroke-dasharray:420; stroke-dashoffset:420;
                   animation:ocPulse 2.4s linear infinite}
@keyframes ocPulse{to{stroke-dashoffset:-420}}
.oc-scene-1 .pills rect{fill:rgba(255,255,255,.07)}
.oc-scene-1 .pill-dots circle{fill:#3ccf7d; animation:ocBlip 2.4s ease-in-out infinite}
.oc-scene-1 .pill-dots circle:nth-child(2){animation-delay:.8s}
.oc-scene-1 .pill-dots circle:nth-child(3){animation-delay:1.6s; fill:#f33801}
/* 2: ERP link */
.oc-scene-2 .sys{fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.2)}
.oc-scene-2 .sys.oc{fill:rgba(243,56,1,.2); stroke:#f33801}
.oc-scene-2 text{fill:#fff; font-size:13px; font-weight:700; text-anchor:middle}
.oc-scene-2 .wire{fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.5; stroke-dasharray:4 5}
.oc-scene-2 .packet{fill:#f33801}
.oc-scene-2 .packet.back{fill:#3ccf7d}
/* 3: AI completes the data: empty cells fill in, one after another */
.oc-scene-3 .filled{fill:rgba(255,255,255,.12)}
.oc-scene-3 .gap{fill:none; stroke:rgba(255,255,255,.3); stroke-dasharray:3 3; animation:ocFill 3.6s ease-in-out infinite; animation-delay:var(--d)}
@keyframes ocFill{0%,30%{fill:rgba(243,56,1,0); stroke:rgba(255,255,255,.3)} 45%,85%{fill:#f33801; stroke:#f33801} 100%{fill:rgba(243,56,1,0)}}

/* the four features: one open at a time, with a progress bar while they take turns */
.oc-features{display:grid; gap:.4rem}
.oc-item{border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); transition:background .3s, border-color .3s}
.oc-item.open{background:rgba(243,56,1,.1); border-color:rgba(243,56,1,.45)}
.oc-item button{position:relative; display:flex; align-items:center; gap:.75rem; width:100%; padding:.65rem .8rem; border:0; background:none;
                font:inherit; color:#fff; text-align:left; cursor:pointer; overflow:hidden; border-radius:14px}
.oc-item button:focus-visible{outline:2px solid var(--red); outline-offset:2px}
.oc-icon{display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:9px; background:rgba(255,255,255,.08); transition:background .3s}
.oc-icon svg{width:16px; height:16px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.oc-item.open .oc-icon{background:#f33801}
.oc-title{display:grid; line-height:1.3}
.oc-title b{font-size:.9rem}
.oc-title em{font-style:normal; font-size:.78rem; color:rgba(255,255,255,.6)}
.oc-desc{display:none; margin:0 !important; padding:0 .9rem .8rem 3.45rem; font-size:.84rem !important; line-height:1.55;
         color:rgba(255,255,255,.82) !important; text-shadow:none !important}
.oc-item.open .oc-desc{display:block; animation:panelIn .4s cubic-bezier(.2,.7,.2,1)}
.oc-progress{position:absolute; left:0; bottom:0; height:2px; width:100%; transform-origin:left; transform:scaleX(0); background:#f33801}
.oc-panel.auto .oc-item.open .oc-progress{animation:ocProgress 5s linear forwards}
.oc-panel.paused .oc-progress{animation-play-state:paused !important}
@keyframes ocProgress{to{transform:scaleX(1)}}

/* lower screens: drop the stage so the panel keeps fitting */
/* the stage only where there is height for it */
@media(max-height:939px){ .oc-stage{display:none} .oc .oc-body > p{margin-bottom:1rem} }
@media(max-height:780px){
  .oc-body{padding:1rem 1.3rem 1.1rem}
  .oc .oc-body h2{font-size:1.8rem}
  .oc .oc-body > p{font-size:.86rem; line-height:1.5}
  .oc-item button{padding:.5rem .7rem}
  .oc-desc{font-size:.8rem !important}
}
/* narrower screens: a narrower panel, clear of the dashboard on the wall */
@media(max-width:1199px){ .oc-panel{width:min(420px, 100%)} }
body.static .block.oc{align-items:stretch}
body.static .oc-panel{width:100%}
@media(prefers-reduced-motion:reduce){
  .oc-scene *, .oc-bar em::before{animation:none !important}
}
/* very low screens: closed features show only their title */
@media(max-height:690px){
  .oc-item:not(.open) .oc-title em{display:none}
  .oc-bar{padding:.55rem 1rem}
  .oc .label{margin-bottom:.4rem}
}
/* safety net for any screen that is lower still: the panel never runs off, its body scrolls */
.oc-panel{display:flex; flex-direction:column; max-height:100%}
.oc-body{overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent}
@media(max-height:690px){ .oc-desc{padding-bottom:.6rem} .oc .oc-body h2{font-size:1.6rem; margin-bottom:.3rem} }

/* ---- stop 3: Werkwijze, told in big type: four steps that take turns, story-style ---- */
.block.journey{max-width:none; align-items:flex-start; padding-top:calc(var(--nav-h) + 2vh); padding-bottom:4vh}
.w-panel{width:min(600px, 100%); max-height:100%; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent;
         padding:clamp(1.4rem,2.6vw,2.2rem) clamp(1.4rem,2.6vw,2.3rem); border-radius:28px;
         background:linear-gradient(150deg, rgba(14,17,24,.74), rgba(9,11,17,.52));
         border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
         box-shadow:0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12)}
.journey .w-panel h2, .journey .w-panel p, .journey .w-panel .label{text-shadow:none}
.journey h2{font-size:clamp(1.9rem,3vw,2.6rem); margin-bottom:.6rem}
.journey .w-intro{font-size:clamp(.95rem,1.15vw,1.05rem); line-height:1.6; max-width:50ch; color:rgba(255,255,255,.72)}
.w-steps{margin-top:clamp(1.4rem,3.6vh,2.4rem)}

/* the four steps as segments: the current one fills up, the ones behind it stay full */
.w-tabs{list-style:none; margin:0 0 clamp(1.2rem,3.4vh,2.2rem); padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:.7rem}
.w-tabs button{display:block; width:100%; padding:.2rem 0 .3rem; border:0; background:none; font:inherit; text-align:left; color:#fff; cursor:pointer}
.w-tabs button:focus-visible{outline:2px solid var(--red); outline-offset:4px; border-radius:4px}
.w-bar{display:block; position:relative; height:3px; margin-bottom:.7rem; border-radius:3px; overflow:hidden; background:rgba(255,255,255,.2)}
.w-bar i{position:absolute; top:0; left:0; width:100%; height:100%; background:var(--red); transform-origin:left; transform:scaleX(0)}
.w-tabs li.done .w-bar i, .w-steps:not(.auto) li.on .w-bar i{transform:scaleX(1)}
.w-steps.auto li.on .w-bar i{animation:ocProgress 6s linear forwards}
.w-steps.paused li.on .w-bar i{animation-play-state:paused}
.w-tab-num{display:block; font-size:.7rem; font-weight:700; letter-spacing:.14em; color:rgba(255,255,255,.45); transition:color .3s}
.w-tab-name{display:block; margin-top:.15rem; font-size:.86rem; font-weight:600; line-height:1.3; color:rgba(255,255,255,.6); transition:color .3s}
.w-tabs li.on .w-tab-num{color:var(--red)}
.w-tabs li.on .w-tab-name, .w-tabs button:hover .w-tab-name{color:#fff}

/* the current step: a big number, then its name and what happens there */
.w-stage{display:grid}
.w-step{grid-area:1/1; display:flex; gap:clamp(1rem,2vw,1.8rem); align-items:flex-start; visibility:hidden}
.w-step.on{visibility:visible}
.w-big{flex:none; overflow:hidden; font-size:clamp(4rem,6.4vw,6rem); line-height:.82; font-weight:800; letter-spacing:-.06em;
       background:linear-gradient(170deg, #ffb27f 0%, #ff6a2c 45%, #f33801 100%); -webkit-background-clip:text; background-clip:text;
       -webkit-text-fill-color:transparent; filter:drop-shadow(0 6px 26px rgba(243,56,1,.35)); padding:.04em .04em .06em 0}
.w-step-body{padding-top:.2rem; min-width:0}
.w-step-head{display:flex; align-items:center; gap:.8rem; margin-bottom:.7rem}
.w-icon{flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
        background:rgba(243,56,1,.14); border:1px solid rgba(243,56,1,.45)}
.w-icon .step-icon{width:22px; height:22px; color:#ff9a66; filter:none}
.w-step h3{margin:0; font-size:clamp(1.15rem,1.6vw,1.4rem); letter-spacing:-.01em; line-height:1.2}
.w-step em{display:block; margin-top:.15rem; font-style:normal; font-size:.82rem; color:rgba(255,255,255,.6)}
.journey .w-step p{font-size:clamp(.92rem,1.1vw,1rem); line-height:1.65; max-width:none}
/* arriving step: the number rises, the text follows a moment later */
.w-step.on .w-big{animation:wRise .7s cubic-bezier(.2,.75,.2,1) both}
.w-step.on .w-step-body{animation:panelIn .6s cubic-bezier(.2,.7,.2,1) .12s both}
@keyframes wRise{from{opacity:0; transform:translateY(40%)} to{opacity:1; transform:none}}

@media(max-height:760px){
  .journey .w-intro{display:none}
  .w-big{font-size:clamp(3.4rem,5.4vw,4.6rem)}
  .w-panel{padding:1.2rem 1.5rem}
  .w-step em{display:none}
}
body.static .block.journey{justify-content:flex-end}
@media(max-width:600px){
  .w-tabs{gap:.45rem}
  .w-tab-name{font-size:.74rem}
  .w-step{flex-direction:column; gap:.4rem}
}
@media(prefers-reduced-motion:reduce){
  .w-step.on .w-big, .w-step.on .w-step-body{animation:none}
}

/* ---- stop 4: Performance as one panel: the story, and a report with the example KPIs ---- */
/* in the middle of the frame, on the side of the trailer (the cab stays clear on the left) */
.block.perf{max-width:none; align-items:flex-end; justify-content:center; padding-top:calc(var(--nav-h) + 2vh); padding-bottom:4vh;
            padding-right:clamp(1.4rem,4vw,4.5rem)}
@media(min-width:1100px){ .block.perf .pf-card{width:min(1040px, 64vw)} }
/* low screens: a tighter panel, so it stays clear of the menu */
@media(max-height:700px){
  .block.perf{padding-top:calc(var(--nav-h) + 1vh); padding-bottom:2vh}
  .perf h2{font-size:1.45rem; margin-bottom:.5rem}
  .perf .pf-text p{font-size:.84rem; line-height:1.5}
  .pf-caption{display:none !important}
  .pf-row button{padding:.55rem 1rem .5rem; row-gap:.4rem}
  .pf-desc{font-size:.8rem !important; padding-bottom:.7rem !important}
}
.pf-card{width:min(1180px, 100%); display:grid; gap:clamp(1.4rem,3vw,2.8rem); align-items:center;
         padding:clamp(1.4rem,2.4vw,2.2rem) clamp(1.4rem,3vw,2.6rem); border-radius:28px;
         background:linear-gradient(150deg, rgba(14,17,24,.76), rgba(9,11,17,.56));
         border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
         box-shadow:0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12)}
@media(min-width:1000px){ .pf-card{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} }
.perf .pf-card h2, .perf .pf-card p, .perf .pf-card .label{text-shadow:none}
.perf h2{font-size:clamp(1.7rem,2.5vw,2.25rem); margin-bottom:.8rem}
.perf .pf-text p{font-size:clamp(.92rem,1.1vw,1.02rem); line-height:1.65; max-width:none}
.perf .pf-text p.pf-note{margin-top:1rem; padding-left:1rem; border-left:2px solid var(--red); font-size:.86rem; color:rgba(255,255,255,.62)}

/* the report: a small app window with one row per KPI */
.pf-report{border-radius:20px; overflow:hidden; background:rgba(6,8,13,.55); border:1px solid rgba(255,255,255,.1)}
.pf-bar{display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.08)}
.pf-live{display:inline-flex; align-items:center; gap:.55rem; font-size:.8rem; font-weight:700; letter-spacing:.02em}
.pf-live i{width:8px; height:8px; border-radius:50%; background:#34d27b; box-shadow:0 0 0 0 rgba(52,210,123,.6); animation:pfPulse 2s infinite}
@keyframes pfPulse{70%{box-shadow:0 0 0 7px rgba(52,210,123,0)} 100%{box-shadow:0 0 0 0 rgba(52,210,123,0)}}
.pf-tag{font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.25rem .6rem; border-radius:999px;
        color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.2)}
.pf-rows{list-style:none; margin:0; padding:.3rem 0}
.pf-row + .pf-row{border-top:1px solid rgba(255,255,255,.07)}
.pf-row button{display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"name spark value" "meter meter meter";
               align-items:center; column-gap:1.1rem; row-gap:.65rem; width:100%; padding:.9rem 1.1rem .85rem; border:0; background:none;
               font:inherit; color:#fff; text-align:left; cursor:pointer; transition:background .3s}
.pf-row button:hover, .pf-row.open button{background:rgba(255,255,255,.04)}
.pf-row button:focus-visible{outline:2px solid var(--red); outline-offset:-2px}
.pf-name{grid-area:name; min-width:0}
.pf-name b{display:block; font-size:.95rem}
.pf-name em{display:block; margin-top:.1rem; font-style:normal; font-size:.78rem; color:rgba(255,255,255,.55)}
.pf-spark{grid-area:spark; width:84px; height:26px; overflow:visible}
.pf-spark path{fill:none; stroke:rgba(255,255,255,.35); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
               stroke-dasharray:120; stroke-dashoffset:120; transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1) .2s, stroke .3s}
.pf-row.open .pf-spark path{stroke:#ff9a66}
.pf-value{grid-area:value; min-width:3.6em; text-align:right; font-size:clamp(1.6rem,2.2vw,2rem); font-weight:800; letter-spacing:-.04em; line-height:1}
.pf-value .number{position:static; display:inline; width:auto; height:auto; font-size:inherit; font-weight:inherit; letter-spacing:inherit; line-height:inherit}
.pf-value i{font-style:normal; font-size:.55em; margin-left:.05em; color:rgba(255,255,255,.55); -webkit-text-fill-color:rgba(255,255,255,.55)}
.pf-row.open .pf-value .number{background:linear-gradient(170deg, #ffb27f, #f33801); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.pf-meter{grid-area:meter; position:relative; display:block; height:4px; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.1)}
.pf-meter i{position:absolute; inset:0; border-radius:4px; background:linear-gradient(90deg, rgba(243,56,1,.55), #ff6a2c);
            transform-origin:left; transform:scaleX(0); transition:transform 1.4s cubic-bezier(.3,.7,.2,1)}
/* arriving at the stop: meters fill, trend lines draw (the numbers count up in index.html) */
.perf.on .pf-meter i, body.static .perf .pf-meter i{transform:scaleX(var(--v))}
.perf.on .pf-spark path, body.static .perf .pf-spark path{stroke-dashoffset:0}
.pf-desc{display:none; margin:0 !important; padding:0 1.1rem 1rem !important; font-size:.86rem !important; line-height:1.6;
         color:rgba(255,255,255,.75) !important; max-width:none !important; background:rgba(255,255,255,.04)}
.pf-row.open .pf-desc{display:block; animation:panelIn .4s cubic-bezier(.2,.7,.2,1)}
.pf-caption{margin:0 !important; padding:.7rem 1.1rem !important; font-size:.74rem !important; color:rgba(255,255,255,.5) !important;
            border-top:1px solid rgba(255,255,255,.08); max-width:none !important}

@media(max-height:820px){
  .pf-card{padding:1.3rem 1.6rem; gap:1.6rem}
  .perf h2{font-size:1.7rem}
  .perf .pf-text p{font-size:.88rem; line-height:1.55}
  .perf .pf-text p.pf-note{display:none}
  .pf-row button{padding:.7rem 1rem .65rem; row-gap:.5rem}
}
@media(max-width:600px){
  .pf-spark{display:none}
  .pf-row button{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name value" "meter meter"}
}
body.static .block.perf{justify-content:flex-end}
@media(prefers-reduced-motion:reduce){
  .pf-meter i, .pf-spark path{transition:none}
  .pf-live i{animation:none}
}

/* ---- stop 5: Waarom Noventra: one panel, the four pillars as cards that widen in turn ---- */
.block.why{max-width:none; align-items:center; justify-content:flex-end; padding-bottom:6vh}
.wn-card{width:min(1180px, 100%); padding:clamp(1.4rem,2.4vw,2.2rem) clamp(1.4rem,2.6vw,2.4rem); border-radius:28px;
         background:linear-gradient(150deg, rgba(14,17,24,.78), rgba(9,11,17,.58));
         border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
         box-shadow:0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12)}
.why .wn-card h2, .why .wn-card p, .why .wn-card .label{text-shadow:none}
.wn-head{display:grid; gap:1rem 2.6rem; align-items:end; margin-bottom:clamp(1.2rem,2.6vh,1.8rem)}
@media(min-width:1000px){ .wn-head{grid-template-columns:auto minmax(0,1fr)} }
.why h2{margin:0; font-size:clamp(1.7rem,2.6vw,2.4rem); line-height:1.1}
.why h2 span, .why h2 em{display:block; white-space:nowrap}
.why h2 em{font-style:normal; background:linear-gradient(100deg, #ffb27f 0%, #ff6a2c 45%, #f33801 100%);
           -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.why .wn-head p{font-size:clamp(.92rem,1.1vw,1.02rem); line-height:1.65; max-width:none; color:rgba(255,255,255,.75)}

/* the pillars: the open one takes the room and tells its story, the others show their name */
.wn-pillars{list-style:none; margin:0; padding:0; display:flex; gap:.7rem; min-height:clamp(200px,26vh,240px)}
.wn-pillar{flex:1 1 0; min-width:0; transition:flex-grow .7s cubic-bezier(.3,.7,.2,1)}
.wn-pillar.open{flex-grow:2.7}
.wn-pillar button{position:relative; display:flex; flex-direction:column; gap:.8rem; width:100%; height:100%; padding:1.1rem 1.2rem 1.2rem;
                  overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035);
                  font:inherit; color:#fff; text-align:left; cursor:pointer; transition:background .5s, border-color .5s}
.wn-pillar button:hover{border-color:rgba(243,56,1,.45)}
.wn-pillar button:focus-visible{outline:2px solid var(--red); outline-offset:2px}
.wn-pillar.open button{border-color:rgba(243,56,1,.5);
                       background:radial-gradient(120% 140% at 0% 0%, rgba(243,56,1,.24), rgba(243,56,1,.05) 55%, rgba(255,255,255,.02))}
.wn-top{display:flex; align-items:center; justify-content:space-between}
.wn-icon{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
         transition:background .5s, border-color .5s}
.wn-icon .icon{width:22px; height:22px; color:#ff9a66; filter:none}
.wn-pillar.open .wn-icon{background:var(--red); border-color:var(--red)}
.wn-pillar.open .wn-icon .icon{color:#fff}
.wn-num{font-size:.72rem; font-weight:700; letter-spacing:.14em; color:rgba(255,255,255,.4)}
.wn-title b{display:block; font-size:1rem; line-height:1.25}
.wn-title em{display:block; margin-top:.2rem; font-style:normal; font-size:.8rem; line-height:1.45; color:rgba(255,255,255,.58)}
.wn-desc{display:none; font-size:.88rem; line-height:1.6; color:rgba(255,255,255,.82)}
.wn-pillar.open .wn-desc{display:block; animation:panelIn .5s cubic-bezier(.2,.7,.2,1) .25s both}
.wn-progress{position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--red); transform-origin:left; transform:scaleX(0)}
.wn-pillars.auto .wn-pillar.open .wn-progress{animation:ocProgress 7s linear forwards}
.wn-pillars.paused .wn-pillar.open .wn-progress{animation-play-state:paused}

@media(max-height:820px){
  .wn-card{padding:1.2rem 1.6rem}
  .why .wn-head p{font-size:.86rem; line-height:1.55}
  .wn-pillar button{padding:.9rem 1rem 1rem; gap:.6rem}
  .wn-title em{display:none}
  .wn-pillar.open .wn-title em{display:block}
}
@media(max-height:700px){ .why .wn-head p{display:none} }
/* narrow screens: the pillars stack, each with its full story */
@media(max-width:900px){
  .wn-pillars{flex-direction:column; min-height:0}
  .wn-desc{display:block}
  .wn-progress{display:none}
}
body.static .block.why{justify-content:flex-end}
@media(prefers-reduced-motion:reduce){
  .wn-pillar{transition:none}
  .wn-pillar.open .wn-desc{animation:none}
}

/* ---- stop 6: the closing: three steps on a line, and a person to talk to ---- */
.block.outro{justify-content:center; padding-top:calc(var(--nav-h) + 2vh); padding-bottom:5vh}
.ot-head{max-width:820px; margin:0 auto clamp(1.2rem,3vh,2rem)}
.outro h2{font-size:clamp(2rem,3.6vw,3.2rem); margin-bottom:.8rem}
/* the stop rail is on the left: keep the same room on both sides, so the panel stays centred */
@media(min-width:1100px){ .block.outro{padding-left:clamp(11rem,13vw,13.5rem); padding-right:clamp(11rem,13vw,13.5rem)} }
.outro h2{text-shadow:none; filter:drop-shadow(0 4px 22px rgba(4,6,12,.55))}
.outro h2 em{text-shadow:none; font-style:normal; background:linear-gradient(100deg, #ffb27f 0%, #ff6a2c 45%, #f33801 100%);
             -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.outro .ot-head p{margin:0 auto; font-size:clamp(.95rem,1.15vw,1.05rem); line-height:1.65; max-width:62ch}
.ot-card{width:min(1120px, 100%); margin:0 auto; display:grid; gap:clamp(1.2rem,2.6vw,2.4rem); text-align:left;
         padding:clamp(1.3rem,2.2vw,2rem) clamp(1.3rem,2.6vw,2.4rem); border-radius:28px;
         background:linear-gradient(150deg, rgba(14,17,24,.78), rgba(9,11,17,.58));
         border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
         box-shadow:0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12)}
@media(min-width:1000px){ .ot-card{grid-template-columns:minmax(0,1fr) clamp(250px,24vw,300px); align-items:center} }

/* the three steps, joined by a line that draws itself on arrival */
.ot-steps{position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem}
.ot-steps::before{content:""; position:absolute; top:17px; left:18px; right:calc(33.33% - 18px); height:2px; border-radius:2px;
                  background:linear-gradient(90deg, var(--red), #ffb27f); transform-origin:left; transform:scaleX(0);
                  transition:transform 1.4s cubic-bezier(.3,.7,.2,1) .2s}
.outro.on .ot-steps::before, body.static .ot-steps::before{transform:scaleX(1)}
.ot-steps li{position:relative; display:flex; flex-direction:column; gap:.25rem}
.ot-dot{display:grid; place-items:center; width:36px; height:36px; margin-bottom:.7rem; border-radius:50%;
        font-weight:800; font-size:.9rem; color:#fff; background:radial-gradient(circle at 34% 28%, #ff7a45, #c92c00);
        box-shadow:0 0 0 5px rgba(243,56,1,.16), 0 10px 24px -8px rgba(243,56,1,.8)}
.ot-steps b{font-size:1rem}
.ot-steps em{font-style:normal; font-size:.8rem; line-height:1.4; color:#ff9a66}
.ot-steps span:not(.ot-dot){margin-top:.25rem; font-size:.86rem; line-height:1.55; color:rgba(255,255,255,.75)}

/* the person to talk to */
.ot-contact{display:flex; flex-direction:column; gap:1rem; padding:1.3rem; border-radius:20px;
            background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1)}
.ot-person{display:flex; align-items:center; gap:.9rem}
.ot-person img{width:60px; height:60px; border-radius:50%; object-fit:cover; flex:none; border:2px solid rgba(243,56,1,.7)}
.outro .ot-person p{margin:0; font-size:.82rem; line-height:1.4; color:rgba(255,255,255,.6); text-shadow:none}
.ot-person strong{display:block; font-size:1rem; color:#fff}
.ot-lines{display:flex; flex-direction:column; gap:.45rem}
.ot-lines a{display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:#fff; text-decoration:none; overflow-wrap:anywhere}
.ot-lines a:hover{color:#ff9a66}
.ot-lines svg{width:16px; height:16px; flex:none; fill:none; stroke:#ff9a66; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ot-contact .btn-large{margin-top:.2rem; justify-content:center}
.outro .claim{margin-top:clamp(1rem,2.4vh,1.6rem)}

@media(max-height:820px){
  .outro .ot-head p{font-size:.9rem; line-height:1.55}
  .ot-steps span:not(.ot-dot){font-size:.82rem}
  .outro .claim{display:none}
}
@media(max-height:700px){ .outro .ot-head p{display:none} }
@media(max-width:700px){
  .ot-steps{grid-template-columns:1fr; gap:1.1rem; padding-left:3.2rem}
  .ot-steps::before{top:18px; bottom:18px; left:17px; right:auto; width:2px; height:auto; transform:none}
  .ot-dot{position:absolute; left:-3.2rem; top:0}
}
@media(prefers-reduced-motion:reduce){ .ot-steps::before{transition:none} }