/* Lightweight workshop gestures for the three service cards. */
.ls-site .service-card {transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.ls-site .service-card::before {content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 25% 28%,rgba(176,207,222,.11),transparent 65%);opacity:0;transition:opacity .45s ease}
.service-card-top,.service-card-content {position:relative;z-index:1}
.service-visual {position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:190px;margin:28px 0 0}
.service-visual .service-symbol {flex:0 0 auto;margin:0;font-size:clamp(120px,13vw,205px);color:rgba(201,216,222,.12);animation:service-number 8s ease-in-out infinite;animation-play-state:paused}
.service-visual .service-symbol span {font-size:9px;letter-spacing:.18em}
.ls-site .service-motion {display:block;flex:1 1 0;min-width:0;width:58%;max-width:275px;height:190px;overflow:visible;color:#b4cbd8;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.service-motion .motion-guide {opacity:.22;stroke-width:1}
.service-motion .motion-material {fill:rgba(180,203,216,.06);stroke:rgba(180,203,216,.6)}
.service-motion .motion-outline {stroke:rgba(180,203,216,.4)}
.service-motion .motion-part {animation-play-state:paused}
.service-motion .motion-seam {stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;animation:service-seam 6.4s ease-in-out infinite;animation-play-state:paused}
.service-motion .motion-needle {animation:service-needle .95s ease-in-out infinite;animation-play-state:paused}
.service-motion .motion-wrap {fill:rgba(180,203,216,.13);animation:service-wrap 6.8s ease-in-out infinite;animation-play-state:paused}
.service-motion .motion-fold {fill:rgba(180,203,216,.09);animation:service-wrap 6.8s .7s ease-in-out infinite;animation-play-state:paused}
.service-motion .motion-press {animation:service-press 6.2s ease-in-out infinite;animation-play-state:paused}
.service-motion .motion-bond {fill:rgba(180,203,216,.14);animation:service-bond 6.2s ease-in-out infinite;animation-play-state:paused}
.ls-site .service-card-content {margin-top:30px}
.service-application .service-visual {position:absolute;top:73px;right:36px;width:43%;min-height:230px;margin:0}
.service-application .service-motion {height:230px;max-width:300px}
.service-application .service-symbol {margin:0;font-size:clamp(120px,12vw,190px)}
.ls-site .service-application .service-card-content {max-width:52%;margin-top:78px}
.service-arrow {transition:transform .3s ease}
.ls-site .service-card.has-entered {animation:service-arrive .7s cubic-bezier(.2,.7,.2,1)}
.ls-site .service-card:nth-child(2).has-entered {animation-delay:.1s}
.service-card.is-in-view .service-symbol,.service-card.is-in-view .service-motion .motion-part {animation-play-state:running}
.ls-site.motion-paused .service-symbol,.ls-site.motion-paused .service-motion .motion-part {animation-play-state:paused}
@keyframes service-arrive {from{opacity:.35;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes service-number {0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes service-seam {0%,10%{stroke-dashoffset:1;opacity:.35}65%,86%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes service-needle {0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
@keyframes service-wrap {0%,12%,100%{transform:translate(-10px,-12px);opacity:.18}45%,82%{transform:translate(0,0);opacity:1}}
@keyframes service-press {0%,15%,100%{transform:translateY(-10px)}42%,68%{transform:translateY(7px)}}
@keyframes service-bond {0%,15%,100%{opacity:.3}42%,78%{opacity:1}}
@media(hover:hover) and (pointer:fine) {
  .ls-site .service-card:hover {transform:translateY(-5px);border-color:rgba(180,203,216,.4);box-shadow:0 18px 42px rgba(0,0,0,.23)}
  .ls-site .service-card:hover::before {opacity:1}
  .service-card:hover .service-arrow {transform:translate(3px,-3px)}
}
@media(max-width:1100px) {
  .service-visual {gap:8px}
  .service-visual .service-symbol {font-size:140px}
  .service-application .service-visual {width:42%;right:26px}
  .service-application .service-symbol {font-size:130px}
}
@media(max-width:820px) {
  .service-visual {flex-direction:column;align-items:flex-end;gap:0;min-height:210px}
  .ls-site .service-motion {position:absolute;left:-5px;top:20px;width:75%;height:165px}
  .service-visual .service-symbol {align-self:flex-end;font-size:120px;opacity:.7}
  .service-application .service-visual {flex-direction:row;align-items:center;min-height:210px}
  .service-application .service-motion {position:relative;inset:auto;width:62%;height:170px}
  .service-application .service-symbol {font-size:100px}
}
@media(max-width:600px) {
  .service-visual {flex-direction:row;align-items:center;min-height:155px;gap:10px;margin-top:24px}
  .ls-site .service-motion {position:relative;inset:auto;width:58%;height:155px}
  .service-visual .service-symbol {align-self:center;font-size:110px;opacity:1}
  .service-visual .service-symbol span {font-size:8px;letter-spacing:.14em;bottom:-12px;right:3px}
  .ls-site .service-card-content {margin-top:30px}
  .service-application .service-visual {position:relative;inset:auto;width:100%;min-height:155px;margin:24px 0 0}
  .service-application .service-motion {height:155px}
  .service-application .service-symbol {font-size:110px;margin:0}
  .ls-site .service-application .service-card-content {max-width:100%;margin-top:30px}
}
@media(prefers-reduced-motion:reduce) {
  .ls-site .service-card,.ls-site .service-card * {animation:none!important;transition:none!important}
}