/* One continuous product journey. The readable document is the default. */
.opero-site .oj-journey{--oj-header-height:81px;--oj-ink:#203437;--oj-muted:#5d6e70;--oj-blue:#26708d;--oj-progress:0;--oj-glow-x:70%;position:relative;isolation:isolate;background:#f5f6f2;color:var(--oj-ink)}
html:has(.oj-journey){scroll-behavior:auto}
.opero-site .oj-viewport{position:relative;isolation:isolate;overflow:clip;min-height:700px}
.opero-site .oj-atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(125deg,#fafbf8 5%,#f4f7f4 55%,#e9f2f2)}
.opero-site .oj-grid{position:absolute;inset:0;opacity:.38;background-image:linear-gradient(#698e8f13 1px,transparent 1px),linear-gradient(90deg,#698e8f13 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at 75% 50%,#000,transparent 72%);transform:perspective(1200px) rotateY(calc(var(--oj-progress)*-9deg)) translateX(calc(var(--oj-progress)*-60px))}
.opero-site .oj-halo{position:absolute;border-radius:50%;filter:blur(25px);transform:translate3d(calc(var(--oj-progress)*-80px),calc(var(--oj-progress)*40px),0)}
.opero-site .oj-halo-one{width:680px;height:680px;left:var(--oj-glow-x);top:18%;margin-left:-340px;background:radial-gradient(circle,#c3e3e66b,transparent 68%)}
.opero-site .oj-halo-two{width:650px;height:650px;left:45%;top:-330px;background:radial-gradient(circle,#ecdfb44a,transparent 65%)}
.opero-site .oj-orbit{position:absolute;width:800px;height:800px;right:-100px;top:50%;border:1px solid #53898613;border-radius:50%;transform:translateY(-48%) rotate(calc(var(--oj-progress)*70deg)) scale(calc(1 - var(--oj-progress)*.12))}
.opero-site .oj-orbit:before{content:"";position:absolute;inset:65px;border:1px solid #53898612;border-radius:50%}
.opero-site .oj-orbit:after{content:"";position:absolute;width:7px;height:7px;top:150px;left:80px;border-radius:50%;background:#8eb5b4}
.opero-site .oj-wordmark{position:absolute;right:2%;bottom:-65px;font-size:280px;font-weight:750;line-height:1;letter-spacing:-.07em;color:#47888905;user-select:none}
.opero-site .oj-topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:22px;max-width:1320px;margin:auto;padding:20px 36px;border-bottom:1px solid #22494a12;min-height:79px}
.opero-site .oj-tour-label{display:flex;align-items:center;gap:8px;color:#516864;font-size:12px;white-space:nowrap;letter-spacing:.025em}
.opero-site .oj-live-dot{width:6px;height:6px;border-radius:50%;background:#2c7b75;box-shadow:0 0 0 4px #2c7b750c}
.opero-site .oj-chapters{display:flex;gap:7px;align-items:center}
.opero-site .oj-chapters a{display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;border:1px solid transparent;border-radius:7px;font-size:12px;font-weight:550;color:#647675;transition:background .16s,color .16s,border-color .16s}
.opero-site .oj-chapters a>span{font-size:10px;font-variant-numeric:tabular-nums;color:#94a29b}
.opero-site .oj-chapters a:hover{color:#1e515f;background:#ffffff70}
.opero-site .oj-chapters a[aria-current="step"]{color:#1e5265;background:#ffffffd9;border-color:#44798120;box-shadow:0 2px 5px #1b515807}
.opero-site .oj-motion{border:0;padding:9px 0;background:none;color:#657775;font-size:11px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.opero-site .oj-motion[hidden]{display:none}
.opero-site .oj-scenes{position:relative}
.opero-site .oj-scene{display:grid;grid-template-columns:minmax(0,.87fr) minmax(0,1.2fr);align-items:center;gap:40px;max-width:1280px;margin:0 auto;min-height:650px;padding:70px 40px;scroll-margin-top:calc(var(--oj-header-height) + 15px)}
.opero-site .oj-scene+.oj-scene{border-top:1px solid #376e701c}
.opero-site .oj-copy{position:relative;z-index:2;min-width:0}
.opero-site .oj-eyebrow{margin:0 0 24px;font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.14em;color:#43817f}
.opero-site .oj-copy h1,.opero-site .oj-copy h2{margin:0;font-size:clamp(36px,4.15vw,58px);font-weight:650;line-height:1.05;letter-spacing:-.055em;text-wrap:balance}
.opero-site .oj-copy h1{font-size:clamp(48px,5.45vw,76px);letter-spacing:-.06em}
.opero-site .oj-copy h1 em,.opero-site .oj-copy h2 em{font-style:normal;color:var(--oj-blue)}
.opero-site .oj-description{font-size:16px;line-height:1.75;color:var(--oj-muted);margin:24px 0 0;max-width:390px;text-wrap:pretty}
.opero-site .oj-takeaway{display:flex;align-items:flex-start;gap:10px;margin:25px 0 0;padding-top:22px;border-top:1px solid #46757425;max-width:360px;font-size:12px;color:#456562;line-height:1.6}
.opero-site .oj-takeaway>span{font-size:19px;line-height:1.1;color:#7b9a83}
.opero-site .oj-scroll-cue{display:inline-flex;align-items:center;gap:13px;margin-top:29px;min-height:46px;font-size:13px;font-weight:600;color:#284e53}
.opero-site .oj-scroll-cue>span{display:grid;place-items:center;border:1px solid #719d9b55;width:42px;height:42px;border-radius:50%;font-size:22px;font-weight:400;transition:background .2s}
.opero-site .oj-scroll-cue:hover>span{background:#d9e9e5}
.opero-site .oj-caption{font-size:10px;color:#7b8a85;line-height:1.5;margin:16px 0 0}
.opero-site .oj-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;margin-top:29px;border-radius:9px;background:#286c85;color:#fff;font-size:14px;font-weight:650;min-height:48px;padding:13px 20px;box-shadow:0 8px 20px #286c851a}
.opero-site .oj-cta span{font-size:20px;font-weight:400}
.opero-site .oj-cta:hover{background:#215c72}
.opero-site .oj-figure{min-width:0;position:relative;perspective:1300px;transform-style:preserve-3d;transform:rotateY(var(--oj-turn,0deg));transform-origin:50% 50%;filter:brightness(var(--oj-light,1))}
.opero-site .oj-bottom{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:1280px;margin:auto;padding:17px 40px 24px;border-top:1px solid #22494a10;min-height:64px}
.opero-site .oj-source{font-size:10px;color:#607c79;line-height:1.5;margin:0;letter-spacing:.005em}
.opero-site .oj-source span{color:#869791}
.opero-site .oj-progress-label{display:none;align-items:center;gap:17px;font-size:10px;color:#6b7f79;font-variant-numeric:tabular-nums}
.opero-site .oj-progress-label>[data-oj-current]{min-width:64px;text-align:right}
.opero-site .oj-progress-track{width:115px;height:2px;background:#467e741e;overflow:hidden}
.opero-site .oj-progress-track i{display:block;height:100%;width:100%;background:#43877e;transform:scaleX(0);transform-origin:left}
.opero-site .oj-stop{position:absolute;left:0;top:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:var(--oj-header-height);visibility:hidden}
/* The scroll engine enables the camera only when all six scenes are ready. */
.opero-site .oj-journey.oj-enhanced:not(.oj-reduced){height:650svh;min-height:3600px}
.opero-site .oj-enhanced:not(.oj-reduced) .oj-viewport{position:sticky;top:var(--oj-header-height);height:calc(100svh - var(--oj-header-height));min-height:570px;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.opero-site .oj-enhanced:not(.oj-reduced) .oj-topbar,.opero-site .oj-enhanced:not(.oj-reduced) .oj-bottom{width:100%}
.opero-site .oj-enhanced:not(.oj-reduced) .oj-scenes{min-height:0}
.opero-site .oj-enhanced:not(.oj-reduced) .oj-scene{position:absolute;inset:0;width:100%;height:100%;min-height:0;border:0;padding-top:24px;padding-bottom:24px;opacity:var(--oj-opacity,0);transform:translate3d(0,var(--oj-y,0px),0) scale(var(--oj-scale,1));visibility:hidden;pointer-events:none;will-change:transform,opacity}
.opero-site .oj-enhanced:not(.oj-reduced) .oj-scene.is-visible{visibility:visible}
.opero-site .oj-enhanced:not(.oj-reduced) .oj-scene.is-active{pointer-events:auto}
.opero-site .oj-enhanced:not(.oj-reduced) .oj-progress-label{display:flex}
.opero-site .oj-reduced .oj-viewport{min-height:0}
.opero-site .oj-reduced .oj-figure,.opero-site .oj-reduced .oj-atmosphere *{transform:none!important;filter:none}
.opero-site .oj-reduced [data-oj-depth]{transform:none!important}
.opero-site .oj-reduced .oj-scroll-cue{display:none}
@media(min-width:1500px){.opero-site .oj-enhanced:not(.oj-reduced) .oj-scene{gap:70px}.opero-site .oj-copy h2{font-size:61px}}
@media(max-width:1100px){
 .opero-site .oj-topbar{padding:16px 25px;gap:15px;min-height:69px}.opero-site .oj-tour-label{display:none}
 .opero-site .oj-scene{padding-left:28px;padding-right:28px;gap:24px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 .opero-site .oj-copy h1{font-size:58px}.opero-site .oj-copy h2{font-size:44px}.opero-site .oj-description{font-size:15px;line-height:1.7}
 .opero-site .oj-bottom{padding:15px 28px 20px}.opero-site .oj-source span{display:none}
}
@media(max-width:780px){
 .opero-site .oj-journey{--oj-header-height:75px}
 .opero-site .oj-topbar{min-height:62px;padding:8px 18px;justify-content:center;border-bottom:1px solid #22494a0c}
 .opero-site .oj-chapters{width:100%;justify-content:space-between;gap:2px}.opero-site .oj-chapters a{padding:8px 9px;font-size:12px;gap:5px}.opero-site .oj-chapters a>span{display:none}
 .opero-site .oj-motion{position:absolute;top:auto;right:20px;bottom:calc(-100svh + var(--oj-header-height) + 95px);z-index:8;font-size:9px}
 .opero-site .oj-reduced .oj-motion{position:static;flex:none}.opero-site .oj-reduced .oj-topbar{flex-wrap:wrap}.opero-site .oj-reduced .oj-chapters{width:100%}
 .opero-site .oj-scene{grid-template-columns:1fr;gap:10px;min-height:0;padding:55px 22px 45px;max-width:610px}
 .opero-site .oj-copy h1{font-size:48px;line-height:1.04}.opero-site .oj-copy h2{font-size:36px;line-height:1.08}.opero-site .oj-eyebrow{margin-bottom:15px;font-size:9px;letter-spacing:.11em}
 .opero-site .oj-description{font-size:14px;line-height:1.6;max-width:480px;margin-top:16px}.opero-site .oj-copy h1 br,.opero-site .oj-copy h2 br{display:none}
 .opero-site .oj-copy h1 em,.opero-site .oj-copy h2 em{display:block}
 .opero-site .oj-takeaway{display:none}.opero-site .oj-scroll-cue{margin-top:16px;font-size:12px;min-height:32px;gap:9px}.opero-site .oj-scroll-cue>span{width:30px;height:30px;font-size:18px}
 .opero-site .oj-caption{display:none}.opero-site .oj-cta{margin-top:18px;min-height:43px;font-size:13px;padding:10px 17px}
 .opero-site .oj-bottom{min-height:54px;padding:12px 20px 22px;gap:10px}.opero-site .oj-source{font-size:8px}.opero-site .oj-progress-label{gap:8px;font-size:8px}.opero-site .oj-progress-label>[data-oj-current]{display:none}.opero-site .oj-progress-track{width:40px}
 .opero-site .oj-wordmark{font-size:180px;right:-20px;bottom:-35px}.opero-site .oj-orbit{width:550px;height:550px;right:-200px;top:70%}.opero-site .oj-halo-one{width:480px;height:480px;left:60%;top:40%;margin-left:-240px}
 .opero-site .oj-enhanced:not(.oj-reduced){height:630svh;min-height:0}
 .opero-site .oj-enhanced:not(.oj-reduced) .oj-viewport{min-height:630px}
 .opero-site .oj-enhanced:not(.oj-reduced) .oj-scene{display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:18px 22px 12px;gap:14px}
 .opero-site .oj-enhanced:not(.oj-reduced) .oj-figure{width:100%;max-width:510px;margin:0 auto}
}
@media(max-width:390px){
 .opero-site .oj-copy h1{font-size:43px}.opero-site .oj-copy h2{font-size:33px}.opero-site .oj-description{font-size:13px}.opero-site .oj-enhanced:not(.oj-reduced) .oj-scene{padding-left:18px;padding-right:18px;gap:8px}.opero-site .oj-topbar{padding:8px 11px}.opero-site .oj-chapters a{font-size:11px;padding:8px}.opero-site .oj-motion{right:17px}
}
@media(max-height:720px) and (min-width:781px){
 .opero-site .oj-topbar{min-height:56px;padding-top:8px;padding-bottom:8px}.opero-site .oj-enhanced:not(.oj-reduced) .oj-viewport{min-height:480px}.opero-site .oj-bottom{min-height:45px;padding-top:9px;padding-bottom:12px}.opero-site .oj-copy h1{font-size:56px}.opero-site .oj-copy h2{font-size:42px}.opero-site .oj-eyebrow{margin-bottom:14px}.opero-site .oj-description{margin-top:15px;font-size:14px}.opero-site .oj-takeaway{margin-top:15px;padding-top:14px}
}
@media(prefers-reduced-motion:reduce){
 html:has(.oj-journey){scroll-behavior:auto}.opero-site .oj-journey *{transition:none!important}
}
@media print{
 .opero-site .oj-journey.oj-enhanced{height:auto!important;min-height:0!important}.opero-site .oj-journey .oj-viewport{position:relative!important;height:auto!important;display:block!important}.opero-site .oj-journey .oj-scene{position:relative!important;visibility:visible!important;opacity:1!important;transform:none!important;min-height:0!important;padding:30px!important;break-inside:avoid}.opero-site .oj-topbar,.opero-site .oj-bottom,.opero-site .oj-atmosphere{display:none!important}
}
/* A small approach keeps the product in a shared space while the text rests. */
.opero-site .oj-enhanced .oj-figure{transform:rotateY(var(--oj-turn,0deg)) translate3d(calc(var(--oj-phase,0)*-10px),calc(var(--oj-phase,0)*-5px),calc(var(--oj-phase,0)*24px))}
@media(max-width:780px) and (max-height:760px){
 .opero-site .oj-enhanced:not(.oj-reduced) .oj-viewport{min-height:0}
 .opero-site .oj-enhanced:not(.oj-reduced) .oj-scene{gap:5px;padding-top:12px;padding-bottom:14px;justify-content:center}
 .opero-site .oj-topbar{min-height:52px;padding-top:4px;padding-bottom:4px}
 .opero-site .oj-copy h1{font-size:37px}.opero-site .oj-copy h2{font-size:29px}.opero-site .oj-eyebrow{margin-bottom:9px;font-size:8px}
 .opero-site .oj-description{font-size:12px;line-height:1.5;margin-top:10px}.opero-site .oj-scroll-cue{margin-top:9px;font-size:11px}.opero-site .oj-scroll-cue>span{width:26px;height:26px}
 .opero-site .oj-cta{margin-top:11px;min-height:37px;padding:8px 14px;font-size:12px}
 .opero-site .oj-bottom{padding-top:8px;padding-bottom:16px;min-height:45px}.opero-site .oj-motion{bottom:calc(-100svh + var(--oj-header-height) + 79px);font-size:8px;padding:5px 0}
}
/* Text never crossfades on top of other text when the visitor stops scrolling. */
.opero-site .oj-enhanced:not(.oj-reduced) .oj-scene{opacity:1}
.opero-site .oj-enhanced .oj-scene:not(.is-active) .oj-copy{visibility:hidden}
.opero-site .oj-enhanced .oj-figure{opacity:var(--oj-opacity,1)}
@media(max-width:780px){.opero-site .oj-source span{display:block}}
/* Reserve the visible height of the compact illustrations, not their drawing area. */
@media(max-width:780px) and (max-height:760px){
 .opero-site .oj-enhanced .oj-figure{height:250px;flex:0 0 250px}
 .opero-site .oj-enhanced .oj-scene-insieme .oj-figure{height:218px;flex-basis:218px}
}
