/* Motion enhancement: content stays visible when scripts are unavailable. */
html { scroll-padding-top:110px; }
#before-overlay { width:100%!important; clip-path:inset(0 50% 0 0); }
#before-img { width:100%!important; height:100%; object-fit:cover; }
#before-after-container { touch-action:pan-y; }
#before-after-container:focus-within { outline:3px solid #ff6d00; outline-offset:5px; }
a:focus-visible,button:focus-visible,[role=button]:focus-visible { outline:3px solid #00b359!important; outline-offset:5px; }
.motion-progress { position:fixed; inset:0 0 auto; height:3px; z-index:100; background:#00e676; transform-origin:left; transform:scaleX(0); pointer-events:none; }
.motion-word { display:inline-block; }
.motion-line { display:inline-block; overflow:clip; vertical-align:bottom; padding-bottom:.12em; margin-bottom:-.12em; }
.motion-stage { overflow:hidden; }
.motion-stage img { transition:none!important; }
.motion-step { transition:box-shadow .3s,border-color .3s!important; }
.motion-step.is-current { border-color:#00b359; box-shadow:0 0 0 1px #00b359; }
#main-header nav a[aria-current] { color:#00e676; }
#main-header a,#contact button { transition:background-color .25s,color .25s; }
#before-after-slider { touch-action:pan-y; }
@media(max-width:767px) {
 section .text-xs { font-size:13px; }
 section .text-sm { font-size:16px; }
 #main-header { backdrop-filter:none; background:#0b191ef5; }
 #hero [data-gen-prompt] { min-height:420px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto!important; }
 *,*::before,*::after { animation:none!important; transition:none!important; }
}
/* One large process step per scroll scene. Base grid remains the no-JS fallback. */
#how-it-works.process-cinema { padding-block:24px; min-height:calc(100vh - 85px); }
.process-cinema > div > div:first-child { margin-bottom:24px; max-width:none; }
.process-cinema h2 { font-size:clamp(32px,3.4vw,52px); }
.process-cinema .grid { display:grid; grid-template-columns:1fr; position:relative; }
.process-cinema .motion-step { grid-area:1/1; display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:center; padding:32px; min-height:370px; height:52vh; max-height:600px; transition:none!important; }
.process-cinema .motion-step > div:last-child { height:100%; min-height:0; }
.process-cinema .motion-step h3 { font-size:clamp(26px,2.7vw,42px); }
.process-cinema .motion-step p { font-size:18px; line-height:1.6; }
.process-cinema .motion-step img { transition:none!important; }
@media(max-width:1023px) {
 #app-tabs .application-inline-panel { min-height:0; padding:18px; margin:0 0 18px; border-radius:16px; gap:0; }
 .application-inline-panel #app-desc { font-size:16px; }
 .application-inline-panel #app-title { font-size:22px; }
 .application-inline-panel > div:first-child { height:260px; }
 .app-tab-btn[aria-expanded=true] > i { transform:rotate(90deg); }
}
.application-before { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.application-compare-labels { position:absolute; inset:12px 12px auto; display:flex; justify-content:space-between; z-index:3; pointer-events:none; }
.application-compare-labels span { background:#0b191ee6; padding:6px 12px; border-radius:20px; color:white; font-size:13px; }
.application-compare-divider { position:absolute; top:0; bottom:0; width:2px; background:white; z-index:3; pointer-events:none; }
.application-compare-controls { display:grid; gap:8px; font-size:14px; margin:-8px 0 20px; color:#bcd3cf; }
.application-compare-controls input { width:100%; accent-color:#ff6d00; min-height:32px; }
.application-compare-controls input:focus-visible { outline:2px solid #00e676; outline-offset:4px; }
.application-before[hidden],.application-compare-labels[hidden],.application-compare-divider[hidden],.application-compare-controls[hidden] { display:none!important; }
.has-comparison #app-main-img { transform:none!important; clip-path:none!important; opacity:1!important; }
.has-comparison > div:not(.application-compare-labels):not(.application-compare-divider) { display:none; }
/* Supplied real process photos. Keep the complete accessory lineup visible. */
#how-it-works .process-equipment { object-position:50% 55%; }
#how-it-works .process-operation { object-position:48% 50%; }
#how-it-works .process-accessories { object-fit:contain; object-position:center; padding:16px; transform:none!important; background:#edf2f4; }

/* Narrative scenes also work in tablet and shorter desktop windows. */
@media(min-width:768px) {
 .process-cinema .motion-step { min-height:280px; height:51vh; gap:24px; padding:24px; }
 .process-cinema .motion-step p { font-size:16px; line-height:1.45; }
}

/* Mobile process: a single stacked card, driven by the same reversible timeline. */
@media(max-width:767px) {
 #how-it-works.process-cinema { padding-block:16px; min-height:0; }
 .process-cinema > div { padding-inline:20px; }
 .process-cinema > div > div:first-child { margin-bottom:16px; }
 .process-cinema h2 { font-size:clamp(26px,6.7vw,36px); line-height:1.08; }
 .process-cinema .motion-step { grid-template-columns:1fr; grid-template-rows:auto minmax(140px,1fr); gap:14px; padding:18px; height:auto; min-height:430px; max-height:none; align-items:stretch; }
 .process-cinema .motion-step > div:first-child > div:first-child { margin-bottom:10px; }
 .process-cinema .motion-step h3 { font-size:24px; margin-bottom:8px; }
 .process-cinema .motion-step p { font-size:16px; line-height:1.45; margin-bottom:0; }
 .process-cinema .motion-step > div:last-child { height:clamp(140px,23svh,210px); }
}

/* Isolated differential sequence; no changes to neighboring sections. */
#differentials .differentials-sequence { display:grid; grid-template-columns:1fr; gap:0; }
#differentials .differentials-sequence > div { grid-area:1/1; padding:40px; min-height:360px; transition:none; }
#differentials .differentials-sequence > div::before { content:attr(data-step); float:right; color:#53717a; font:600 16px monospace; letter-spacing:.1em; }
#differentials .differentials-sequence h3 { font-size:clamp(28px,3.5vw,46px); max-width:850px; }
#differentials .differentials-sequence p { font-size:20px; line-height:1.6; max-width:800px; }
@media(max-width:767px) {
 #differentials .differentials-sequence > div { padding:24px; min-height:380px; }
 #differentials .differentials-sequence h3 { font-size:28px; }
 #differentials .differentials-sequence p { font-size:17px; line-height:1.5; }
}

#differentials .differentials-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:40px 0 64px; }
#differentials .differentials-overview > div { min-width:0; }
@media(max-width:1023px) { #differentials .differentials-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) { #differentials .differentials-overview { grid-template-columns:1fr; gap:18px; } }

#hero [data-gen-prompt] { position:relative; isolation:isolate; }
#hero-scroll-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
#hero [data-gen-prompt] > div { position:relative; z-index:1; pointer-events:none; }

@media(max-width:1023px) {
 #sector-accordion .sector-inline-panel { margin:16px 0 28px; }
 #sector-accordion .sector-inline-panel > div { height:320px; transform:none!important; opacity:1!important; clip-path:none!important; }
 #sector-accordion .sector-inline-panel #sector-caption { font-size:20px; line-height:1.3; }
 #sector-accordion .sector-inline-panel > div > div:last-child { left:20px; right:20px; bottom:20px; }
}

.sector-mobile-media { display:none; }
@media(max-width:1023px) {
 #sectors .sector-desktop-panel { display:none; }
 #sectors .sector-mobile-media { display:block; margin-top:18px; border-radius:18px; overflow:hidden; }
 #sectors .sector-mobile-media img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
 #sectors .sector-item > p { display:block!important; }
 #sectors .sector-item { margin-bottom:28px; }
}

@media(min-width:1024px) {
 #sectors.sectors-pinned { padding-block:20px; min-height:calc(100vh - 85px); }
 #sectors.sectors-pinned h2 { font-size:clamp(28px,3.2vw,46px); line-height:1.05; margin-bottom:18px; }
 #sectors.sectors-pinned .sector-item { padding-bottom:8px; margin-top:8px; }
 #sectors.sectors-pinned .sector-item h4 { font-size:clamp(17px,1.4vw,22px); }
 #sectors.sectors-pinned .sector-item p { font-size:15px; line-height:1.4; }
 #sectors.sectors-pinned .sector-desktop-panel > div { height:calc(100vh - 145px); max-height:650px; transform:none!important; }
}