/* Shared service-page layout: overview snake + scope lens (EN + RTL) */
.service-page .impl-overview{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,1.15fr);
  gap:40px 64px;
  align-items:center;
}
.service-page .impl-overview-head{
  max-width:520px;
  margin:0;
}
.service-page .impl-overview-head h2{
  font-size:32px;
  margin:0 0 16px;
  font-weight:600;
  letter-spacing:-.02em;
}
.service-page .impl-overview-head p{
  font-size:16px;
  line-height:1.75;
  color:var(--muted);
  margin:0 0 16px;
}
.service-page .impl-overview-head p:last-child{margin-bottom:0}

.service-page .impl-snake.about-snake{
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:18px 22px;
  align-items:stretch;
  min-height:320px;
  margin:0;
  width:100%;
  max-width:560px;
  justify-self:end;
}
.rtl.service-page .impl-overview{
  align-items:start;
}
.rtl.service-page .impl-snake.about-snake{
  direction:ltr;
  grid-template-columns:minmax(0,1fr) 140px;
  justify-self:end;
  margin-top:-18px;
}
.rtl.service-page .impl-snake .about-snake-rail{order:2}
.rtl.service-page .impl-snake .about-snake-steps{order:1;align-items:center}
.rtl.service-page .impl-snake .about-snake-svg{
  transform:scaleX(-1);
  transform-origin:center;
}
.rtl.service-page .impl-snake .about-snake-step{
  text-align:right;
  padding:4px 0;
}
.service-page .impl-snake .about-snake-rail{
  position:relative;
  min-height:300px;
  height:auto;
  width:100%;
}
.service-page .impl-snake .about-snake-svg{
  width:100%;
  height:100%;
  min-height:300px;
  display:block;
  overflow:visible;
}
.service-page .impl-snake .about-snake-steps{
  display:grid;
  grid-template-columns:none;
  grid-template-rows:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:8px;
  min-width:0;
}
.service-page .impl-snake .about-snake-step{
  padding:4px 0;
  text-align:left;
}
.service-page .impl-snake .about-snake-step h3{
  font-size:18px;
  margin:0 0 6px;
  font-weight:600;
  letter-spacing:-.01em;
}
.service-page .impl-snake .about-snake-step p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}
.service-page .impl-snake .about-snake-num{
  margin-bottom:4px;
  font-size:14px;
}
.service-page .impl-snake .about-snake-path{stroke-width:10}
.service-page .impl-snake .about-snake-ring{stroke-width:10}

@media(max-width:1100px){
  .service-page .impl-overview{
    grid-template-columns:minmax(0,1fr) minmax(280px,1fr);
    gap:32px 40px;
  }
  .service-page .impl-snake.about-snake{
    grid-template-columns:112px minmax(0,1fr);
    min-height:280px;
    max-width:none;
  }
  .rtl.service-page .impl-snake.about-snake{
    grid-template-columns:minmax(0,1fr) 112px;
  }
  .service-page .impl-snake .about-snake-rail,
  .service-page .impl-snake .about-snake-svg{min-height:260px}
}
@media(max-width:900px){
  .service-page .impl-overview{
    grid-template-columns:1fr;
    gap:36px;
  }
  .service-page .impl-overview-head{max-width:none}
  .service-page .impl-snake.about-snake{
    grid-template-columns:1fr;
    min-height:0;
    max-width:520px;
    justify-self:start;
  }
  .rtl.service-page .impl-snake.about-snake{
    grid-template-columns:1fr;
    justify-self:end;
  }
  /* Phone/tablet: keep step copy, hide snake graphic */
  .service-page .impl-snake .about-snake-rail{
    display:none;
  }
}
@media(max-width:560px){
  .service-page .impl-snake.about-snake{
    grid-template-columns:1fr;
    min-height:0;
    max-width:none;
  }
  .rtl.service-page .impl-snake.about-snake{
    grid-template-columns:1fr;
  }
  .service-page .impl-snake .about-snake-step h3{font-size:16px}
}

.impl-lens{
  display:grid;
  grid-template-columns:minmax(200px,.85fr) minmax(0,1.35fr);
  gap:24px;
  align-items:stretch;
}
.impl-lens-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.impl-lens-btn{
  appearance:none;
  border:1px solid #e2e2e2;
  background:#f5f5f5;
  border-radius:16px;
  padding:18px 20px;
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:var(--brand-dark-gray);
  box-shadow:none;
  transition:border-color .2s ease,background .2s ease;
}
.rtl .impl-lens-btn{text-align:right}
.impl-lens-btn:hover{background:#f0f0f0}
.impl-lens-btn.is-active{
  border-color:#005534;
  background:#fff;
}
.impl-lens-btn:focus-visible{
  outline:2px solid var(--brand-green);
  outline-offset:3px;
}
.impl-lens-btn span{
  display:block;
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--brand-green);
  margin-bottom:4px;
}
.impl-lens-btn strong{
  display:block;
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--brand-dark-gray);
}
.impl-lens-stage{
  position:relative;
  border-radius:24px;
  border:1px solid rgba(0,154,93,.24);
  background:
    radial-gradient(ellipse 58% 85% at 79% 48%, rgba(0,154,93,.28), transparent 72%),
    linear-gradient(135deg, #07110d 0%, #043024 55%, var(--brand-dark-green) 100%);
  color:#fff;
  padding:28px 32px;
  box-shadow:0 18px 42px rgba(0,40,24,.1);
  overflow:hidden;
  min-height:180px;
  display:grid;
  align-items:center;
}
.impl-lens-panel{
  grid-area:1 / 1;
  padding:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:0;
  transition:opacity .7s ease, visibility 0s linear .7s;
}
.impl-lens-panel.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:1;
  transition:opacity .7s ease, visibility 0s;
  transition-delay:.05s;
}
.impl-lens-panel[hidden]{
  display:block !important;
}
.impl-lens-panel h3{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.02em;
  color:#fff;
}
.impl-lens-panel p{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.78);
  max-width:52ch;
}
@media(prefers-reduced-motion:reduce){
  .impl-lens-panel,
  .impl-lens-panel.is-active{
    transition:none;
    transition-delay:0s;
  }
}
@media(max-width:900px){
  .impl-lens{grid-template-columns:1fr}
  .impl-lens-list{flex-direction:row;flex-wrap:wrap}
  .impl-lens-btn{flex:1 1 160px}
  .impl-lens-stage{padding:22px 18px;border-radius:20px;min-height:132px}
  .impl-lens-panel h3{font-size:20px}
}
@media(max-width:560px){
  .impl-lens-btn{flex:1 1 100%}
  .impl-lens-btn strong{font-size:16px}
}