/* ===== Service pages: topics / cities / tasks (under FAQ) ===== */
.svc-tags{position:relative;z-index:2;--sl:rgba(227,229,229,.16);--sg:#858E8E;--si:#E3E5E5;--sb:#000AFF;padding:0 40px 170px;margin-top:-70px;background:#000;color:var(--si);font-family:"Neue Machina","Helvetica Neue",Arial,sans-serif}
.svc-tags *{box-sizing:border-box}
.svc-tags .common__title{margin-bottom:70px}
.svc-tags .common__title h2{margin:0}
.svc-tags__rows{border-top:1px solid var(--sl)}
.svc-tags__row{display:grid;grid-template-columns:minmax(220px,3fr) 9fr;gap:24px 48px;align-items:start;padding:38px 0;border-bottom:1px solid var(--sl)}
.svc-tags__label{margin:0;padding:6px 0 0;font-size:18px;line-height:1.2;font-weight:800;color:var(--sg);text-transform:none;letter-spacing:0}
.svc-tags__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.svc-tags__list li{display:inline-flex;align-items:center;min-height:42px;padding:10px 20px;border:1px solid rgba(227,229,229,.32);border-radius:99px;font-size:15px;line-height:1.15;font-weight:500;color:var(--si);transition:border-color .3s,color .3s,background .3s}
@media (hover:hover){.svc-tags__list li:hover{border-color:var(--sb);background:var(--sb);color:#fff}}
@media (max-width:1279px){.svc-tags__row{grid-template-columns:minmax(200px,4fr) 8fr;gap:20px 36px}}
@media (max-width:1023px){
  .svc-tags{padding:0 24px 120px;margin-top:-40px}
  .svc-tags .common__title{margin-bottom:44px}
  .svc-tags .common__title h2{font-size:12vw;line-height:.87;letter-spacing:-1px}
  .svc-tags__row{grid-template-columns:1fr;gap:18px;padding:28px 0}
  .svc-tags__label{padding-top:0;font-size:17px}
  .svc-tags__list{gap:8px}
  .svc-tags__list li{min-height:34px;padding:7px 13px;font-size:13px;font-weight:500}
  .svc-tags__row{padding:24px 0}
}
@media (max-width:760px){.svc-tags{padding:0 20px 100px}}

/* spacing before Напрямки increased (29.10): gap after FAQ 110->180 desktop, 50->90 mobile */
.svc-tags{margin-top:0}
@media (max-width:1023px){.svc-tags{margin-top:0}}

/* mobile (29.10): every group shows 2 rows of tags, the rest scrolls sideways (width set by the inline script in service-tags.php) */
@media (max-width:760px){
  .svc-tags__scroll{overflow-x:auto;overflow-y:hidden;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .svc-tags__scroll::-webkit-scrollbar{display:none}
  .svc-tags__list li{white-space:nowrap}
}

/* reveal on scroll (31.10): classes are added by the inline script in service-tags.php; only opacity/translate, so the mobile 2-row width calculation is not affected */
.svc-tags.st-anim .svc-tags__label{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.svc-tags.st-anim .svc-tags__list li{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),border-color .3s,color .3s,background .3s;transition-delay:calc(.15s + var(--i,0) * .035s)}
.svc-tags.st-anim .svc-tags__row.is-in .svc-tags__label,.svc-tags.st-anim .svc-tags__row.is-in li{opacity:1;transform:none}
.svc-tags.st-anim .svc-tags__row.st-done li{transition-delay:0s}