/* Four original Figma scenes; glass is a cached image layer, not a live backdrop. */
.solution-stage {position:relative;height:100%;overflow:hidden}
.solutions.is-pinned {height:420svh;min-height:0;overflow:visible}
.solutions.is-pinned .solution-stage {position:sticky;top:0;height:100svh}
.solution-scenes,.solution-scene {position:absolute;inset:0;overflow:hidden}
.solution-scene {opacity:0;transform:translateZ(0);will-change:opacity}
.solution-scene:first-child {opacity:1}
.solution-scene::after {content:"";position:absolute;inset:0;background:#000;opacity:var(--scene-shade,0)}
.scene-logistics {--scene-shade:.2}
.scene-inspection,.scene-complex {--scene-shade:.1}
.scene-complex .solutions-background {transform:none}
.solution-card-frame {isolation:isolate;--card-enter:1}
.solution-card-frame>.card-outline {pointer-events:none;opacity:var(--card-enter);transition:opacity 650ms ease}
.solution-card-frame .solution-card {background:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;opacity:var(--card-enter);translate:0 calc(16px * (1 - var(--card-enter)));transition:opacity 760ms cubic-bezier(.22,1,.36,1),translate 760ms cubic-bezier(.22,1,.36,1)}
.solution-glass {position:absolute;left:calc(11 * var(--u));top:calc(11 * var(--v));width:calc(390 * var(--u));height:calc(480 * var(--v));border-radius:calc(6 * var(--u));overflow:hidden;z-index:-1;opacity:var(--card-enter);transition:opacity 760ms ease;transform:translateZ(0);pointer-events:none}
.solution-glass::after {content:"";position:absolute;inset:0;background:#ffffff66}
.solution-glass-images {position:absolute;inset:-35px;filter:blur(22px);transform:translateZ(0)}
.solution-glass-scene {position:absolute;left:calc(35px - var(--glass-x));top:calc(35px - var(--glass-y));width:var(--scene-width);height:var(--scene-height);overflow:hidden;opacity:0}
.solution-glass-scene:first-child {opacity:1}
.solution-glass-scene img {width:100%;height:100%;object-fit:cover}
.solution-glass-scene.scene-complex img {transform:none}
.solution-glass-scene::after {content:"";position:absolute;inset:0;background:#000;opacity:var(--scene-shade,0)}
.solution-accordion {height:calc(426 * var(--v));display:flex;flex-direction:column}
.solution-item {min-height:0;flex:0 0 calc(52 * var(--v));overflow:hidden;transition:flex-basis 760ms cubic-bezier(.22,1,.36,1);border-top:1px solid #00000010}
.solution-item:first-child {border-top:0}
.solution-item.is-active {flex-basis:calc(270 * var(--v));flex-shrink:1}
.solution-item h2 {margin:0;font-size:inherit;font-weight:500}
.solution-toggle {display:block;width:100%;height:calc(52 * var(--v));padding:0 calc(24 * var(--u));text-align:left;font:inherit;font-size:calc(20 * var(--u));line-height:1.2;color:#111;background:none;border:0;cursor:pointer;transition:height 760ms cubic-bezier(.22,1,.36,1),font-size 760ms cubic-bezier(.22,1,.36,1),background 180ms}
.solution-toggle:hover {background:#ffffff20}
.solution-toggle:focus-visible {outline:2px solid var(--green);outline-offset:-3px}
.solution-item.is-active .solution-toggle {height:calc(90 * var(--v));font-size:calc(32 * var(--u))}
.solution-item.is-active #solution-inspection {font-size:calc(26 * var(--u))}
.solution-body {opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity 280ms ease,transform 500ms ease,visibility 760ms}
.solution-item.is-active .solution-body {opacity:1;visibility:visible;transform:none;transition:opacity 600ms ease 110ms,transform 680ms cubic-bezier(.22,1,.36,1) 90ms,visibility 0s}
.solution-body-inner {padding:0 calc(24 * var(--u)) calc(20 * var(--v))}
.solution-body h3 {margin:0 0 calc(8 * var(--v));font-size:calc(20 * var(--u));line-height:1.2;font-weight:500}
.solution-body p {margin:0;font-size:calc(16 * var(--u));line-height:1.5;font-weight:400}
@media(max-width:1023px){
 .solution-card-frame {max-width:calc(100% - 36px)}
 .solution-card-frame .solution-card {width:calc(100% - 16px)}
 .solution-card-frame {height:418px}
 .solution-card-frame .solution-card {height:402px}
 .solution-glass {left:8px;top:8px;width:calc(100% - 16px);height:402px;border-radius:5px}
 .solution-glass-scene img {object-position:59% center}
 .solution-accordion {height:358px}
 .solution-item {flex-basis:42px}
 .solution-item.is-active {flex-basis:232px}
 .solution-toggle {height:42px;padding:0 18px;font-size:16px}
 .solution-item.is-active .solution-toggle {height:62px;font-size:24px}
 .solution-item.is-active #solution-inspection {font-size:19px}
 .solution-body-inner {padding:0 18px 14px}
 .solution-body h3 {font-size:15px;margin-bottom:5px}
 .solution-body p {font-size:13px;line-height:1.4}
}
@media(max-width:1023px) and (max-height:540px){.solution-card-frame {transform:scale(.78);transform-origin:bottom left;bottom:14px}}
@media(prefers-reduced-motion:reduce){.solution-card-frame *{transition:none!important}.solution-card-frame .solution-card {translate:none}}

/* Keep the cached glass registered to the scene while the whole card enters sideways. */
.solution-card-frame {translate:calc(-64px * (1 - var(--card-enter))) 0;opacity:var(--card-enter);transition:translate 950ms cubic-bezier(.22,.7,.22,1),opacity 850ms ease}
.solution-card-frame .solution-card {translate:none;opacity:1}
.solution-card-frame .solution-glass,.solution-card-frame>.card-outline {opacity:1}
.solution-glass-images {translate:calc(64px * (1 - var(--card-enter))) 0;transition:translate 950ms cubic-bezier(.22,.7,.22,1)}
@media(prefers-reduced-motion:reduce){.solution-card-frame,.solution-glass-images {translate:none;transition:none}}

/* Compact scene navigation shares the accordion's scroll destination and state. */
.solution-progress {display:none}
@media(min-width:1024px){
 .solution-progress {position:absolute;z-index:8;right:clamp(22px,3vw,64px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;padding:12px 5px;border-radius:24px;background:#04242435;backdrop-filter:blur(14px)}
 .solution-progress button {display:grid;place-items:center;width:30px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:height 300ms ease}
 .solution-progress button span {display:block;width:3px;height:8px;border-radius:4px;background:#ffffff80;transition:height 300ms ease,background 200ms ease}
 .solution-progress button[aria-current] {height:42px}
 .solution-progress button[aria-current] span {height:28px;background:#fff}
 .solution-progress button:hover span {background:#fff}
 .solution-progress button:focus-visible {outline:1px solid #fff;outline-offset:0;border-radius:8px}
}
@media(prefers-reduced-motion:reduce){.solution-progress button,.solution-progress button span {transition:none}}

/* v45: give every full paragraph enough room without an inner scroll on desktop. */
@media(min-width:1024px){
 .solution-item{flex-basis:calc(44 * var(--v))}
 .solution-item.is-active{flex-basis:calc(294 * var(--v))}
 .solution-toggle{height:calc(44 * var(--v))}
 .solution-item.is-active .solution-toggle{height:calc(70 * var(--v))}
 .solution-body{overflow:hidden}
 .solution-body-inner{padding-bottom:calc(10 * var(--v))}
 .solution-body p,.solution-body strong{font-weight:400;line-height:1.42}
}