/* =========================================================
   SL OPTICS V102 — HOW WE WORK
   full width -> split left -> six cards right
========================================================= */
.slo-main-serv,.slo-main-serv *{box-sizing:border-box}
.slo-main-serv{
  --ms-ink:#FFD700;
  --ms-orange:#FFD700;
  --ms-white:#fff;
  --ms-pad:45px; /* V102: desktop внешние отступы ровно 45px */
  --ms-gap:20px;
  position:relative;
  z-index:12;
  width:100%;
  height:700vh;
  min-height:700vh;
  background:#010101;
  color:#fff;
  isolation:isolate;
}
.slo-main-serv__pin{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:#010101;
}

/* Full-width visual. JS narrows this to the left half during phase 1. */
.slo-main-serv__bg{
  position:absolute;
  inset:0 auto 0 0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  clip-path:inset(var(--ms-pad) var(--ms-pad) var(--ms-pad) var(--ms-pad) round 5px);
  filter:none;
  will-change:width,clip-path;
}

/* Title is independent from copy/CTA, so nothing can overlap. */
.slo-main-serv__tit{
  position:absolute;
  z-index:3;
  top:calc(var(--ms-pad) + 30px);
  left:calc(var(--ms-pad) + 28px);
  width:calc(50% - var(--ms-pad)*2 - 28px);
  pointer-events:none;
}
.slo-main-serv__tit h2{
  max-width:780px;
  margin:0!important;
  color:#fff!important;
  font:400 clamp(58px,6.45vw,112px)/.86 "PPNeueMachina",Arial,sans-serif!important;
  letter-spacing:-.065em!important;
  text-transform:uppercase;
}

.slo-main-serv__bottom{
  position:absolute;
  z-index:3;
  left:calc(var(--ms-pad) + 28px);
  bottom:calc(var(--ms-pad) + 28px);
  width:min(620px,calc(50% - var(--ms-pad)*2 - 28px));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
.slo-main-serv__txt{
  position:static!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  color:rgba(255,255,255,.92)!important;
  font:400 clamp(17px,1.38vw,24px)/1.18 "PPNeueMachina",Arial,sans-serif!important;
  letter-spacing:-.035em!important;
  pointer-events:none;
}

/* Exact hero CTA geometry + exact hero arrow asset through .slo7-cta__arrow. */
.slo-main-serv__cta.slo7-cta{
  margin-top:0!important;
  width:402px!important;
  max-width:100%;
  height:50px!important;
  grid-template-columns:minmax(0,348px) 50px!important;
  gap:4px!important;
  flex:none;
}

/* Cards are outside viewport until the full-width -> half-width split starts. */
.slo-main-serv__list{
  position:absolute;
  z-index:4;
  top:0;
  right:var(--ms-pad);
  width:calc(50% - var(--ms-pad) - var(--ms-gap)*.5);
  display:flex;
  flex-direction:column;
  gap:var(--ms-gap);
  padding-bottom:0;
  opacity:0;
  transform:translate3d(0,100vh,0);
  will-change:transform,opacity;
}
.slo-service-card-m{
  position:relative;
  flex:0 0 calc(100vh - var(--ms-pad)*2);
  flex-basis:calc(100svh - var(--ms-pad)*2);
  height:calc(100vh - var(--ms-pad)*2);
  height:calc(100svh - var(--ms-pad)*2);
  min-height:calc(100vh - var(--ms-pad)*2);
  min-height:calc(100svh - var(--ms-pad)*2);
  display:flex;
  flex-direction:column;
  background:#fff;
  color:#111;
  border:1px solid rgba(255,215,0,.28);
  border-radius:5px;
  overflow:hidden;
  box-shadow:0 12px 38px rgba(0,0,0,.24);
}
.slo-service-card-m__head{display:flex;justify-content:space-between;gap:28px;padding:30px}
.slo-service-card-m__head h3{
  max-width:85%;
  margin:0!important;
  color:#111!important;
  font:400 clamp(32px,2.8vw,48px)/1 "PPNeueMachina",Arial,sans-serif!important;
  letter-spacing:-.045em!important;
}
.slo-service-card-m__head span{padding-top:5px;color:var(--ms-orange);font:500 14px/1 "VelaSans",Arial,sans-serif}
.slo-service-card-m__divider{width:100%;height:1px;border-top:1px solid rgba(0,0,0,.14)}
.slo-service-card-m__content{width:72%;padding:30px 30px 54px}
.slo-service-card-m__content p{margin:0!important;color:rgba(0,0,0,.62)!important;font:400 clamp(16px,1.28vw,20px)/1.3 "VelaSans",Arial,sans-serif!important;letter-spacing:-.012em!important}
.slo-service-card-m__footer{margin-top:auto;min-height:220px;padding:30px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}

/* Cards use the same two-part orange button and same arrow as the main hero. */
.slo-service-card-m__cta.slo7-cta{
  margin-top:0!important;
  width:258px!important;
  max-width:52%;
  height:46px!important;
  grid-template-columns:minmax(0,208px) 46px!important;
  gap:4px!important;
  flex:none;
}
.slo-service-card-m__cta.slo7-cta>span>i{font-size:12px!important}
.slo-service-card-m__cta.slo7-cta .slo7-cta__arrow{width:22px!important;height:22px!important}
.slo-service-card-m__img{position:relative;width:40%;height:190px;flex:none;overflow:hidden;border-radius:5px;background:#fff}
.slo-service-card-m__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.slo-service-card-m.is-active{border-color:rgba(255,215,0,.35)}

@media(max-width:1199px) and (min-width:1024px){
  .slo-main-serv{--ms-pad:35px;--ms-gap:16px}
  .slo-main-serv__tit{top:calc(var(--ms-pad) + 22px);left:calc(var(--ms-pad) + 22px);width:calc(50% - var(--ms-pad)*2 - 22px)}
  .slo-main-serv__tit h2{font-size:clamp(52px,6.1vw,80px)!important}
  .slo-main-serv__bottom{left:calc(var(--ms-pad) + 22px);bottom:calc(var(--ms-pad) + 22px);width:calc(50% - var(--ms-pad)*2 - 22px)}
  .slo-main-serv__txt{font-size:18px!important}
  .slo-main-serv__cta.slo7-cta{width:360px!important;grid-template-columns:minmax(0,306px) 50px!important}
  .slo-service-card-m__head,.slo-service-card-m__content,.slo-service-card-m__footer{padding-left:22px;padding-right:22px}
  .slo-service-card-m__head h3{font-size:34px!important}
  .slo-service-card-m__content{width:82%}
  .slo-service-card-m__img{width:40%;height:165px}
  .slo-service-card-m__cta.slo7-cta{width:228px!important;max-width:54%;grid-template-columns:minmax(0,178px) 46px!important}
}

@media(max-width:1023px){
  .slo-main-serv{--ms-pad:20px;--ms-gap:14px;height:auto!important;min-height:0!important;padding:var(--ms-pad);background:#010101;color:#fff}
  .slo-main-serv__pin{position:relative;top:auto;height:auto;overflow:visible;background:#010101}
  .slo-main-serv__bg{position:relative;inset:auto;width:100%!important;height:auto;aspect-ratio:1.12;clip-path:none!important;border-radius:5px;filter:none;will-change:auto}
  .slo-main-serv__tit{top:22px;left:20px;right:20px;width:auto}
  .slo-main-serv__tit h2{font-size:clamp(48px,11.5vw,76px)!important}
  .slo-main-serv__bottom{position:absolute;left:20px;right:20px;bottom:22px;width:auto;gap:14px}
  .slo-main-serv__txt{color:#fff!important;font-size:20px!important;max-width:520px}
  .slo-main-serv__cta.slo7-cta{width:min(100%,360px)!important;grid-template-columns:minmax(0,1fr) 50px!important}
  .slo-main-serv__list{position:relative;top:auto;right:auto;width:100%;gap:var(--ms-gap);padding:0;margin-top:var(--ms-gap);opacity:1!important;transform:none!important;will-change:auto}
  .slo-service-card-m{flex:auto;height:auto;min-height:520px}
  .slo-service-card-m__head{padding:20px}
  .slo-service-card-m__head h3{font-size:clamp(28px,7vw,40px)!important}
  .slo-service-card-m__content{width:100%;padding:20px 20px 40px}
  .slo-service-card-m__footer{min-height:170px;padding:20px}
  .slo-service-card-m__img{width:42%;height:140px}
  .slo-service-card-m__cta.slo7-cta{width:230px!important;max-width:54%;grid-template-columns:minmax(0,180px) 46px!important}
}

@media(max-width:600px){
  .slo-main-serv__bg{aspect-ratio:.9}
  .slo-main-serv__tit h2{font-size:clamp(42px,12.5vw,62px)!important}
  .slo-main-serv__bottom{bottom:18px}
  .slo-main-serv__txt{font-size:17px!important}
  .slo-service-card-m{min-height:470px}
  .slo-service-card-m__footer{align-items:flex-end;gap:12px}
  .slo-service-card-m__img{width:42%;height:118px}
  .slo-service-card-m__cta.slo7-cta{width:190px!important;max-width:55%;grid-template-columns:minmax(0,140px) 46px!important}
}

@media(prefers-reduced-motion:reduce){
  .slo-main-serv__list,.slo-main-serv__bg{will-change:auto}
}


/* V102 — user's animated WEBP icons, no tile/background */
.slo-main-serv__txt br{display:block}
.slo-service-card-m__img--icon{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
  padding:0!important;
}
.slo-service-card-m__animated-icon{
  display:block!important;
  width:min(180px,100%)!important;
  height:min(180px,100%)!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:right bottom!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
}
@media(max-width:1199px){
  .slo-service-card-m__animated-icon{width:min(160px,100%)!important;height:min(160px,100%)!important}
}
@media(max-width:600px){
  .slo-service-card-m__animated-icon{width:min(128px,100%)!important;height:min(128px,100%)!important}
}


/* =========================================================
   V109 — MOBILE "ПЕРЕЙТИ В КАТАЛОГ" CTA
   Give the label real width instead of clipping it next to the icon.
========================================================= */
@media(max-width:600px){
  .slo-service-card-m__footer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 108px!important;
    gap:12px!important;
    align-items:end!important;
  }
  .slo-service-card-m__cta.slo7-cta{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr) 46px!important;
    gap:4px!important;
  }
  .slo-service-card-m__cta.slo7-cta>span{
    min-width:0!important;
    padding:0 10px!important;
  }
  .slo-service-card-m__cta.slo7-cta>span>i{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    white-space:nowrap!important;
    text-align:center!important;
    font-size:12px!important;
  }
  .slo-service-card-m__img{
    width:108px!important;
    max-width:108px!important;
    height:118px!important;
    justify-self:end!important;
  }
}
@media(max-width:390px){
  .slo-service-card-m__footer{grid-template-columns:minmax(0,1fr) 92px!important;gap:10px!important}
  .slo-service-card-m__img{width:92px!important;max-width:92px!important;height:108px!important}
  .slo-service-card-m__cta.slo7-cta>span{padding:0 6px!important}
  .slo-service-card-m__cta.slo7-cta>span>i{font-size:11px!important}
}


/* OIL66 1.0.4.2 — white six-step cards */
.slo-main-serv .slo-service-card-m{
  background:#fff!important;
  color:#111!important;
  border-color:rgba(255,215,0,.28)!important;
  box-shadow:0 12px 38px rgba(0,0,0,.18)!important;
}
.slo-main-serv .slo-service-card-m__head h3{
  color:#111!important;
}
.slo-main-serv .slo-service-card-m__head span{
  color:#FFD700!important;
}
.slo-main-serv .slo-service-card-m__divider{
  border-top-color:rgba(0,0,0,.14)!important;
}
.slo-main-serv .slo-service-card-m__content p{
  color:rgba(0,0,0,.64)!important;
}
.slo-main-serv .slo-service-card-m__img,
.slo-main-serv .slo-service-card-m__img--icon{
  background:#fff!important;
}
.slo-main-serv .slo-service-card-m.is-active{
  border-color:#FFD700!important;
}