/* Shared interface: Kasper is the reference for every page. */
:root{--ui-enter:300ms;--ui-exit:180ms;--ui-control:200ms;--ui-green:#446b47;--ui-hover:#85b989;--ui-field-height:62px;--ui-field-radius:10px;--ui-field-gap:8px;--ui-tap:520ms;--ui-radius:40px;--ui-error:#ffb5ae;--ui-header-height:96px}
html.shared-ui{scroll-padding-top:calc(var(--ui-header-height) + 24px);overflow-x:clip;overscroll-behavior-x:none}
.shared-ui body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
.shared-ui .site-header-bar{position:sticky;top:0;z-index:100;background:var(--bg);display:flow-root}
.shared-ui .site-header-bar .site-header{height:auto!important;min-height:96px!important;padding-block:8px!important;align-items:center!important;flex-wrap:nowrap}
.shared-ui .site-header .logo{width:76px!important;flex:none}
.shared-ui .site-header :is(.nav,.navigation){padding-top:0}
.shared-ui :is(.nav,.navigation)>:is(a,button){text-decoration:none;border-bottom:0;transition:color var(--ui-control) ease-out}
.shared-ui :is(.nav,.navigation)>:is(a,button)::after{display:none}
.shared-ui :is(.nav,.navigation)>:is(a,button):is(:active,:focus-visible){color:var(--ui-hover)}
.shared-ui :is(.mobile-contacts,.mobile-menu-contacts){display:none}
.shared-ui .button{border-radius:var(--ui-radius)!important;font-family:var(--font);font-weight:700;line-height:1.15;transition:background-color var(--ui-control) ease-out,color var(--ui-control) ease-out,border-color var(--ui-control) ease-out}
.shared-ui .cta-motion::before{transition:opacity var(--ui-control) ease-out}
.shared-ui .cta-arrow{display:block;flex:none;width:16px;height:14px;transition:transform var(--ui-control) ease-out}
.shared-ui .cta-motion:focus-visible .cta-arrow{transform:rotate(-45deg)}
.shared-ui .cta-motion.ui-tap:not(:disabled){animation:ui-tap var(--ui-tap) ease-out!important}
.shared-ui .cta-motion.ui-tap::before{opacity:1}
.shared-ui .cta-motion.ui-tap .cta-label{background:var(--cta-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.shared-ui .cta-motion.ui-tap .cta-arrow{transform:rotate(-45deg)!important}
.shared-ui .cta-motion.ui-tap .cta-arrow path{stroke:var(--arrow-gradient,currentColor)}
.shared-ui :is(.dialog-close,.device-spec-close,.video-pause,.video-sound,.video-fullscreen,.icon-button){min-width:44px;min-height:44px;transition:transform 240ms ease-out,color 240ms ease-out,background-color 240ms ease-out}
.shared-ui :is(.dialog-close,.device-spec-close,.video-pause,.video-sound,.video-fullscreen,.icon-button).ui-tap{transform:scale(.94);color:var(--ui-hover);background-color:#446b472e}
@keyframes ui-tap{0%,100%{filter:brightness(1)}45%{filter:brightness(1.2)}}
.shared-ui dialog.ui-popup[open]{animation:ui-popup-in var(--ui-enter) cubic-bezier(.16,1,.3,1) both!important}
.shared-ui dialog.ui-popup[open]::backdrop{background:#000c;animation:ui-fade-in var(--ui-enter) ease-out both!important}
.shared-ui dialog.ui-popup.ui-closing[open]{animation:ui-popup-out var(--ui-exit) ease-in both!important;pointer-events:none}
.shared-ui dialog.ui-popup.ui-closing[open]::backdrop{animation:ui-fade-out var(--ui-exit) ease-in both!important}
@keyframes ui-popup-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ui-popup-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes ui-fade-in{from{opacity:0}to{opacity:1}}@keyframes ui-fade-out{from{opacity:1}to{opacity:0}}
.shared-ui .ui-field{display:grid!important;gap:var(--ui-field-gap)!important;min-width:0;align-content:start}
.shared-ui .ui-field>.ui-field-label{display:block!important;position:absolute!important;translate:none!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;clip-path:inset(50%)!important;overflow:hidden!important;white-space:nowrap!important;border:0!important}
.shared-ui .ui-field>.input-shell{position:relative;display:flex;align-items:center;width:100%;height:var(--ui-field-height)!important;min-height:0;padding:0 12px!important;border:1px dashed var(--line)!important;border-radius:var(--ui-field-radius)!important;background:transparent;font-size:16px}
.shared-ui .ui-field>.input-shell>.sparse-block-border{display:none}
.shared-ui .ui-field>.input-shell>input{display:block;box-sizing:border-box;width:100%;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--text);font:700 16px/1.5 var(--font);outline:none!important;box-shadow:none!important}
.shared-ui .ui-field input::placeholder{color:var(--text);opacity:1}
.shared-ui .ui-field>.input-shell:has([aria-invalid=true]){border-color:var(--ui-error)!important}
.shared-ui .ui-field>.input-shell:focus-within{border-color:var(--ui-green)!important;outline:none;box-shadow:none}
.shared-ui :is(.field-error,.jobs-error){font-size:16px;line-height:1.5;color:var(--ui-error)}
.shared-ui :is(.consent,.consent-row,.jobs-consent){display:grid!important;grid-template-columns:20px minmax(0,1fr);gap:12px!important;align-items:start;font-size:16px!important;line-height:24px!important}
.shared-ui :is(.consent,.consent-row,.jobs-consent) input{display:block;width:20px;height:20px;margin:2px 0 0!important;accent-color:var(--ui-green)}
.shared-ui :is(.contact-form,.jobs-form){gap:24px}
.shared-ui :is(.contact-form,.jobs-form)>.button{width:min(580px,100%)!important;height:auto!important;min-height:60px!important;padding:16px 24px!important;font-size:16px!important;gap:32px!important;white-space:normal!important;margin-top:8px!important;justify-content:center!important}
.shared-ui .jobs-upload{border-radius:var(--ui-field-radius);border-color:var(--line)}
.shared-ui .jobs-upload:focus-within{border-color:var(--ui-green)}
.shared-ui .jobs-file-button{border-radius:var(--ui-radius)}
@media(hover:hover){.shared-ui :is(.nav,.navigation)>:is(a,button):hover{color:var(--ui-hover)}.shared-ui .cta-motion:not(:disabled):hover .cta-arrow{transform:rotate(-45deg)}.shared-ui .jobs-file-button:hover{background:#446b472e}}
@media(min-width:1800px){.shared-ui .site-header-bar .site-header{min-height:calc(96 * var(--u))!important}.shared-ui .site-header .logo{width:calc(96 * var(--u))!important}}
@media(max-width:767px){
:root{--ui-field-height:48px;--ui-header-height:72px}
.shared-ui .site-header-bar .site-header{height:72px!important;min-height:72px!important;padding-block:4px!important}
.shared-ui .site-header .logo{width:56px!important;order:0!important;margin:0 auto 0 0!important;z-index:1002;position:relative}
.shared-ui .site-header .menu-toggle{display:flex!important;align-items:center;justify-content:center;position:relative!important;inset:auto!important;order:1!important;width:44px!important;height:44px!important;min-height:44px!important;padding:6px!important;border:0!important;background:transparent!important;color:var(--ui-hover);z-index:1002;transform:none!important}
.shared-ui .site-header .menu-toggle svg{width:28px!important;height:28px!important;transform:rotate(0deg)!important;transition:transform var(--ui-exit) ease-in!important}
.shared-ui .site-header .menu-toggle[aria-expanded=true] svg{transform:rotate(90deg)!important;transition:transform var(--ui-enter) cubic-bezier(.22,1,.36,1)!important}
.shared-ui .menu-stroke{transform-box:view-box;transition:transform var(--ui-enter) ease-out,opacity var(--ui-exit) ease-out!important}
.shared-ui .menu-stroke:first-child{transform-origin:12px 6px}.shared-ui .menu-stroke:last-child{transform-origin:12px 18px}
.shared-ui .menu-toggle[aria-expanded=true] .menu-stroke:first-child{transform:translateY(6px) rotate(45deg)}
.shared-ui .menu-toggle[aria-expanded=true] .menu-stroke:nth-child(2){opacity:0;transform:scaleX(.25)}
.shared-ui .menu-toggle[aria-expanded=true] .menu-stroke:last-child{transform:translateY(-6px) rotate(-45deg)}
.shared-ui .site-header-bar .site-header>:is(.nav,.navigation){position:fixed!important;inset:0!important;display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;height:100dvh!important;max-height:none!important;margin:0!important;padding:calc(var(--ui-header-height) + 24px) 24px calc(32px + env(safe-area-inset-bottom))!important;gap:12px;background:var(--bg);overflow:auto;overscroll-behavior:contain;z-index:1001!important;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity var(--ui-exit) ease-in,transform var(--ui-exit) ease-in,visibility 0s var(--ui-exit)!important}
.shared-ui .site-header-bar .site-header>:is(.nav,.navigation).is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition:opacity var(--ui-enter) ease-out,transform var(--ui-enter) ease-out,visibility 0s!important}
.shared-ui .site-header :is(.nav,.navigation)>:is(a,button){display:flex;align-items:center;width:100%;min-height:48px;padding:8px 0!important;font-size:24px!important;line-height:1.4;white-space:normal;opacity:0;transform:translateY(12px);transition:opacity var(--ui-exit),transform var(--ui-exit),color var(--ui-control)!important}
.shared-ui .site-header :is(.nav,.navigation).is-open>:is(a,button){opacity:1;transform:none;transition:opacity 240ms ease-out calc(var(--ui-item,0)*35ms),transform 240ms ease-out calc(var(--ui-item,0)*35ms),color var(--ui-control)!important}
.shared-ui .site-header :is(.nav,.navigation)>.desktop-menu-contact{display:none!important}
.shared-ui .site-header :is(.mobile-contacts,.mobile-menu-contacts){display:flex!important;flex-direction:column;align-items:flex-start;gap:8px;margin-top:auto;padding-top:32px;flex:none}
.shared-ui :is(.mobile-contacts,.mobile-menu-contacts)>a{display:flex;align-items:center;min-height:44px;max-width:100%;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.shared-ui .site-header .socials{display:flex;gap:16px;margin-top:8px}
.shared-ui :is(.devices,.sveta-cards,.mobile-slides,#steps,.mobile-rail){scroll-snap-type:none!important;overscroll-behavior-x:contain;touch-action:pan-x pan-y!important}
.shared-ui :is(.device-card,.sveta-card,.mobile-slide,.step-card){scroll-snap-align:none!important;scroll-snap-stop:normal!important}
.shared-ui .button{min-height:52px!important}
.shared-ui :is(.contact-form,.jobs-form)>.button{min-height:52px!important;width:100%!important;padding:12px 16px!important;gap:16px!important}
}
@media(prefers-reduced-motion:reduce){.shared-ui *, .shared-ui *::before,.shared-ui *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Shared test-drive format, based on the homepage dialog. */
.shared-ui #test-drive-dialog{box-sizing:border-box;width:min(960px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:48px;border:2px dashed var(--green);border-radius:20px;background:var(--bg);color:var(--text);overflow:auto;line-height:1.5}
.shared-ui #test-drive-dialog .test-drive-content{padding:0;min-height:0;position:relative}
.shared-ui #test-drive-dialog .test-drive-content>.sparse-block-border{display:none}
.shared-ui #test-drive-dialog :is(.dialog-close,.test-drive-close){position:static;display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0 0 0 auto;padding:0;border:0;border-radius:50%;background:transparent;color:#85ad87;font-size:36px;line-height:1;text-decoration:none}
.shared-ui #test-drive-dialog .test-drive-heading{padding:0;margin:0;text-align:left}
.shared-ui #test-drive-dialog h2{font-size:clamp(28px,3vw,48px);line-height:1.05;font-weight:800;letter-spacing:0;margin:0 0 20px;color:var(--text);text-align:left}
.shared-ui #test-drive-dialog h2 span{color:#85ad87}
.shared-ui #test-drive-dialog :is(.test-drive-heading p, :scope>p){margin:0 0 24px;font-size:var(--body);line-height:1.5;color:var(--text);text-align:left}
.shared-ui #test-drive-dialog .contact-form{display:grid;gap:24px;margin-top:24px}
.shared-ui #test-drive-dialog .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(hover:hover){.shared-ui #test-drive-dialog :is(.dialog-close,.test-drive-close):hover{background:#446b4733}}
@media(max-width:767px){.shared-ui #test-drive-dialog{padding:20px;max-height:calc(100dvh - 24px)}.shared-ui #test-drive-dialog .fields{grid-template-columns:minmax(0,1fr);gap:16px}.shared-ui #test-drive-dialog :is(.dialog-close,.test-drive-close){margin-bottom:8px}}

/* mobile tap animation restore 20260916 */
@media(max-width:767px){
  .shared-ui :is(a,button,input,label,textarea,select,[role=button],.sveta-card,.job-toggle,.jobs-file-button,.menu-toggle,.dialog-close,.device-spec-close){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .shared-ui .menu-toggle.ui-tap svg{transform:rotate(90deg) scale(.94)!important}
  .shared-ui .menu-toggle.ui-tap .menu-stroke{stroke:var(--ui-hover)}
  .shared-ui :is(.job-toggle,.jobs-file-button,[data-detail]).ui-tap{filter:brightness(1.18)}
  .shared-ui .job-toggle.ui-tap .job-toggle-icon{color:var(--ui-hover);stroke:var(--ui-hover)}
  .shared-ui .jobs-file-button.ui-tap{border-color:var(--ui-hover);color:var(--ui-hover);background:#446b472e}
  .shared-ui :is(.dialog-close,.device-spec-close,.video-pause,.video-sound,.video-fullscreen,.icon-button,[data-detail]).ui-tap{transform:scale(.94);color:var(--ui-hover);background-color:#446b472e}
}

/* mobile active fallback 20260916 */
@media(max-width:767px){
  .shared-ui :is(a,button,input,label,textarea,select,[role=button],.sveta-card,.job-toggle,.jobs-file-button,.menu-toggle,.dialog-close,.device-spec-close){user-select:none}
  .shared-ui :is(a,button,input,label,textarea,select,[role=button],.sveta-card,.job-toggle,.jobs-file-button,.menu-toggle,.dialog-close,.device-spec-close):focus:not(:focus-visible){outline:none!important}
  .shared-ui .cta-motion:not(:disabled):is(:active,.ui-tap){background:var(--green);border-color:transparent;color:var(--text)}
  .shared-ui .cta-motion:not(:disabled):is(:active,.ui-tap)::before{opacity:1}
  .shared-ui .cta-motion:not(:disabled):is(:active,.ui-tap) .cta-label{background:var(--cta-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
  .shared-ui .cta-motion:not(:disabled):is(:active,.ui-tap) .cta-arrow{transform:rotate(-45deg)!important}
  .shared-ui .menu-toggle:active svg{transform:rotate(90deg) scale(.94)!important}
  .shared-ui .menu-toggle:active .menu-stroke{stroke:var(--ui-hover)}
  .shared-ui .job-toggle:active .job-toggle-icon{color:var(--ui-hover);stroke:var(--ui-hover);transform:scale(.92)}
  .shared-ui .job-toggle[aria-expanded=false]:active .job-toggle-icon{transform:rotate(45deg) scale(.92)}
}
