/* Общие разделы главной и страницы «Услуги»: «Мы выполним», «А также», «Алгоритм работы»,
   а также карусель (js/carousel.js), которой пользуются «Алгоритм работы» и «Нам разрешили похвастаться».
   Разметка разделов одинаковая на index.html и service.html — править в обоих местах.

   «Мы выполним» и «А также» — художественная раскладка Zero Block Tilda: у каждого элемента свои
   координаты на каждой из 5 ширин. Координаты получены скриптом _work/zero_css.ps1 из оригинала. */

/* ---------- Раздел по сетке Zero Block ---------- */
/* Сетка шириной 1200 | 960 | 640 | 480 | 320 по центру окна, элементы внутри — абсолютно */
.zb { overflow: hidden; }
.zb__grid { position: relative; width: 1200px; margin: 0 auto; }
.zb__grid > :not(.zb__item),
.zb__item > * { position: absolute; margin: 0; }
@media (max-width: 1199px) { .zb__grid { width: 960px; } }
@media (max-width: 959px)  { .zb__grid { width: 640px; } }
@media (max-width: 639px)  { .zb__grid { width: 480px; } }
@media (max-width: 479px)  { .zb__grid { width: 320px; } }

/* Заголовок раздела: справа, у правой линии фона */
.zb-title {
  color: #454545;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.55;
  text-align: right;
}

/* ---------- Линии фона по сетке Zero Block (главная и «Услуги») ---------- */
/* На экранах уже 960px линии страницы (.page::before в site.css) стоят не по центру, а как в Tilda:
   на 11 | 12 | 11px от левого края сетки 640 | 480 | 320. По ним выровнены элементы разделов и слайды «Алгоритма». */
@media (max-width: 959px) {
  .page--home, .page--service { --line-x: calc(50% - 320px + 11px); }
  .page--home::before, .page--service::before { left: var(--line-x); transform: none; }
}
@media (max-width: 639px) { .page--home, .page--service { --line-x: calc(50% - 240px + 12px); } }
@media (max-width: 479px) { .page--home, .page--service { --line-x: calc(50% - 160px + 11px); } }

/* Слово с дефисом не переносить */
.nowrap { white-space: nowrap; }

/* Перенос внутри слова, только на экранах до 640px («Разра-ботку», «Кастоми-зацию») */
.br-narrow { display: none; }
@media (max-width: 639px) { .br-narrow { display: inline; } }

/* ---------- «Мы выполним» ---------- */
.works .zb__grid { height: 800px; }
@media (max-width: 1199px) { .works .zb__grid { height: 950px; } }
@media (max-width: 959px)  { .works .zb__grid { height: 1250px; } }
@media (max-width: 479px)  { .works .zb__grid { height: 1190px; } }

.works__word { color: #d8cec2; font-weight: 700; opacity: .61; }   /* крупное слово-фон */
.works__name { color: var(--accent); font-weight: 700; }
.works__text { color: #070707; font-weight: 300; }
.works__line { background: var(--accent); opacity: .44; }           /* тонкая вертикальная линия */
.works__bar  { background: var(--accent); border-radius: 4px; }     /* короткая толстая черта */
.works__title { text-align: right; top: 70px; left: 731px; width: 390px; font-size: 30px; line-height: 1.55; }
.works__item--1 .works__word { text-align: right; top: 200px; left: 127px; width: 270px; font-size: 42px; line-height: 1.55; }
.works__item--1 .works__name { text-align: right; top: 275px; left: 127px; width: 270px; font-size: 18px; line-height: 1.35; }
.works__item--1 .works__text { text-align: right; top: 335px; left: 127px; width: 270px; font-size: 14px; line-height: 1.55; }
.works__item--1 .works__line { top: 207px; left: 427px; width: 1px; height: 190px; }
.works__item--1 .works__bar { top: 274px; left: 426px; width: 3px; height: 56px; }
.works__item--2 .works__word { text-align: right; top: 316px; left: 484px; width: 260px; font-size: 42px; line-height: 1.55; }
.works__item--2 .works__name { text-align: right; top: 391px; left: 484px; width: 260px; font-size: 18px; line-height: 1.35; }
.works__item--2 .works__text { text-align: right; top: 451px; left: 484px; width: 260px; font-size: 14px; line-height: 1.55; }
.works__item--2 .works__line { top: 323px; left: 773px; width: 1px; height: 190px; }
.works__item--2 .works__bar { top: 390px; left: 772px; width: 3px; height: 56px; }
.works__item--3 .works__word { text-align: right; top: 200px; left: 819px; width: 270px; font-size: 42px; line-height: 1.55; }
.works__item--3 .works__name { text-align: right; top: 285px; left: 819px; width: 270px; font-size: 18px; line-height: 1.55; }
.works__item--3 .works__text { text-align: right; top: 335px; left: 819px; width: 270px; font-size: 14px; line-height: 1.55; }
.works__item--3 .works__line { top: 207px; left: 1119px; width: 1px; height: 190px; }
.works__item--3 .works__bar { top: 274px; left: 1118px; width: 3px; height: 56px; }
.works__item--4 .works__word { text-align: right; top: 544px; left: 127px; width: 270px; font-size: 42px; line-height: 1.55; }
.works__item--4 .works__name { text-align: right; top: 629px; left: 127px; width: 270px; font-size: 18px; line-height: 1.55; }
.works__item--4 .works__text { text-align: right; top: 669px; left: 127px; width: 270px; font-size: 14px; line-height: 1.55; }
.works__item--4 .works__line { top: 551px; left: 427px; width: 1px; height: 190px; }
.works__item--4 .works__bar { top: 618px; left: 426px; width: 3px; height: 56px; }
.works__item--5 .works__word { text-align: right; top: 544px; left: 724px; width: 365px; font-size: 42px; line-height: 1.55; }
.works__item--5 .works__name { text-align: right; top: 629px; left: 819px; width: 270px; font-size: 18px; line-height: 1.55; }
.works__item--5 .works__text { text-align: right; top: 679px; left: 819px; width: 270px; font-size: 14px; line-height: 1.55; }
.works__item--5 .works__line { top: 551px; left: 1119px; width: 1px; height: 190px; }
.works__item--5 .works__bar { top: 618px; left: 1118px; width: 3px; height: 56px; }
@media (max-width: 1199px) {
  .works__title { top: 50px; left: 558px; }
  .works__item--1 .works__word { top: 188px; left: 24px; }
  .works__item--1 .works__name { top: 255px; left: 24px; }
  .works__item--1 .works__text { top: 315px; left: 24px; }
  .works__item--1 .works__line { top: 187px; left: 324px; }
  .works__item--1 .works__bar { top: 254px; left: 323px; }
  .works__item--2 .works__word { top: 408px; left: 345px; }
  .works__item--2 .works__name { top: 475px; left: 347px; }
  .works__item--2 .works__text { top: 535px; left: 347px; }
  .works__item--2 .works__line { top: 407px; left: 636px; }
  .works__item--2 .works__bar { top: 474px; left: 635px; }
  .works__item--3 .works__word { top: 202px; left: 649px; }
  .works__item--3 .works__name { top: 268px; left: 649px; }
  .works__item--3 .works__text { top: 318px; left: 649px; }
  .works__item--3 .works__line { top: 190px; left: 949px; }
  .works__item--3 .works__bar { top: 257px; left: 948px; }
  .works__item--4 .works__word { top: 632px; left: 33px; }
  .works__item--4 .works__name { top: 698px; left: 36px; }
  .works__item--4 .works__text { top: 739px; left: 36px; }
  .works__item--4 .works__line { top: 621px; left: 324px; }
  .works__item--4 .works__bar { top: 688px; left: 323px; }
  .works__item--5 .works__word { top: 637px; left: 555px; }
  .works__item--5 .works__name { top: 703px; left: 649px; }
  .works__item--5 .works__text { top: 753px; left: 649px; }
  .works__item--5 .works__line { top: 625px; left: 949px; }
  .works__item--5 .works__bar { top: 692px; left: 948px; }
}
@media (max-width: 959px) {
  .works__title { top: 60px; left: 237px; }
  .works__item--1 .works__word { top: 258px; left: 12px; text-align: left; }
  .works__item--1 .works__name { top: 265px; left: 323px; }
  .works__item--1 .works__text { top: 325px; left: 323px; }
  .works__item--1 .works__line { top: 197px; left: 624px; }
  .works__item--1 .works__bar { top: 264px; left: 623px; }
  .works__item--2 .works__word { top: 420px; left: 363px; }
  .works__item--2 .works__name { top: 425px; left: 41px; text-align: left; }
  .works__item--2 .works__text { top: 485px; left: 41px; text-align: left; }
  .works__item--2 .works__line { top: 357px; left: 10px; }
  .works__item--2 .works__bar { top: 424px; left: 9px; }
  .works__item--3 .works__word { top: 630px; left: 8px; text-align: left; }
  .works__item--3 .works__name { top: 638px; left: 324px; }
  .works__item--3 .works__text { top: 688px; left: 324px; }
  .works__item--3 .works__line { top: 560px; left: 624px; }
  .works__item--3 .works__bar { top: 627px; left: 623px; }
  .works__item--4 .works__word { top: 792px; left: 353px; }
  .works__item--4 .works__name { top: 798px; left: 42px; text-align: left; }
  .works__item--4 .works__text { top: 839px; left: 42px; text-align: left; }
  .works__item--4 .works__line { top: 731px; left: 10px; }
  .works__item--4 .works__bar { top: 798px; left: 9px; }
  .works__item--5 .works__word { top: 1000px; left: 8px; text-align: left; }
  .works__item--5 .works__name { top: 1009px; left: 324px; }
  .works__item--5 .works__text { top: 1059px; left: 324px; }
  .works__item--5 .works__line { top: 931px; left: 624px; }
  .works__item--5 .works__bar { top: 998px; left: 623px; }
}
@media (max-width: 639px) {
  .works__title { top: 50px; left: 79px; }
  .works__item--1 .works__word { top: 248px; }
  .works__item--1 .works__name { top: 255px; left: 168px; }
  .works__item--1 .works__text { top: 315px; left: 208px; width: 230px; }
  .works__item--1 .works__line { top: 187px; left: 469px; }
  .works__item--1 .works__bar { top: 254px; left: 468px; }
  .works__item--2 .works__word { top: 450px; left: 208px; }
  .works__item--2 .works__name { top: 474px; left: 45px; }
  .works__item--2 .works__text { top: 534px; left: 45px; }
  .works__item--2 .works__line { top: 407px; left: 11px; }
  .works__item--2 .works__bar { top: 474px; left: 10px; }
  .works__item--3 .works__word { top: 616px; left: 11px; }
  .works__item--3 .works__name { top: 648px; left: 169px; }
  .works__item--3 .works__text { top: 698px; left: 169px; }
  .works__item--3 .works__line { top: 570px; left: 469px; }
  .works__item--3 .works__bar { top: 637px; left: 468px; }
  .works__item--4 .works__word { top: 820px; left: 250px; width: 220px; line-height: 1; opacity: .6; }
  .works__item--4 .works__name { top: 868px; left: 44px; }
  .works__item--4 .works__text { top: 909px; left: 44px; }
  .works__item--4 .works__line { top: 801px; left: 11px; }
  .works__item--4 .works__bar { top: 868px; left: 10px; }
  .works__item--5 .works__word { top: 1019px; left: 11px; line-height: 1; opacity: .6; }
  .works__item--5 .works__name { top: 1029px; left: 169px; }
  .works__item--5 .works__text { top: 1079px; left: 169px; }
  .works__item--5 .works__line { top: 951px; left: 469px; }
  .works__item--5 .works__bar { top: 1018px; left: 468px; }
}
@media (max-width: 479px) {
  .works__title { top: 80px; left: 11px; width: 300px; }
  .works__item--1 .works__word { top: 257px; left: 10px; width: 140px; font-size: 28px; }
  .works__item--1 .works__name { top: 267px; left: 158px; width: 140px; font-size: 16px; }
  .works__item--1 .works__text { left: 57px; width: 240px; }
  .works__item--1 .works__line { left: 309px; }
  .works__item--1 .works__bar { left: 308px; }
  .works__item--2 .works__word { top: 405px; left: 169px; width: 140px; font-size: 28px; }
  .works__item--2 .works__name { top: 415px; left: 25px; width: 210px; font-size: 16px; }
  .works__item--2 .works__text { top: 465px; left: 25px; }
  .works__item--2 .works__line { top: 340px; left: 10px; }
  .works__item--2 .works__bar { top: 407px; left: 9px; }
  .works__item--3 .works__word { top: 568px; left: 9px; width: 140px; font-size: 28px; }
  .works__item--3 .works__name { top: 580px; left: 98px; width: 200px; font-size: 16px; }
  .works__item--3 .works__text { top: 610px; left: 48px; width: 250px; }
  .works__item--3 .works__line { top: 508px; left: 309px; }
  .works__item--3 .works__bar { top: 575px; left: 308px; }
  .works__item--4 .works__word { top: 726px; left: 191px; width: 120px; font-size: 28px; }
  .works__item--4 .works__name { top: 744px; left: 24px; width: 160px; font-size: 16px; }
  .works__item--4 .works__text { top: 775px; left: 24px; width: 220px; }
  .works__item--4 .works__line { top: 665px; left: 10px; }
  .works__item--4 .works__bar { top: 732px; left: 9px; }
  .works__item--5 .works__word { top: 890px; left: 10px; width: 155px; font-size: 28px; }
  .works__item--5 .works__name { top: 925px; left: 127px; width: 170px; font-size: 16px; }
  .works__item--5 .works__text { top: 955px; left: 117px; width: 180px; }
  .works__item--5 .works__line { top: 847px; left: 309px; }
  .works__item--5 .works__bar { top: 914px; left: 308px; }
}

/* ---------- «А также» ---------- */
/* Белый фон с линиями колонок поверх */
.also { background: #fff url(../images/common/bg-lines.svg) center -413px / 1040px auto repeat-y; }
.also .zb__grid { height: 520px; }
@media (max-width: 1199px) {
  .also { background-size: 940px auto; }
  .also .zb__grid { height: 700px; }
}
@media (max-width: 959px) {
  .also { background-image: none; }
  .also .zb__grid { height: 850px; }
}

.also__word { color: #d8cec2; font-weight: 700; opacity: .61; }
.also__name { color: #7e72a7; font-weight: 700; }
.also__line { background: #dfd6cc; opacity: .44; }
.also__bar  { background: var(--beige); border-radius: 4px; }
.also__title { text-align: right; top: 60px; left: 729px; width: 390px; font-size: 30px; line-height: 1.55; }
.also__item--a .also__word { text-align: right; top: 166px; left: 127px; width: 270px; font-size: 30px; line-height: 1.55; }
.also__item--a .also__name { text-align: right; top: 245px; left: 127px; width: 270px; font-size: 18px; line-height: 1.35; }
.also__item--a .also__line { top: 87px; left: 427px; width: 1px; height: 367px; }
.also__item--a .also__bar { top: 239px; left: 426px; width: 3px; height: 66px; }
.also__item--b .also__word { text-align: right; top: 166px; left: 473px; width: 270px; font-size: 30px; line-height: 1.55; }
.also__item--b .also__name { text-align: right; top: 245px; left: 473px; width: 270px; font-size: 18px; line-height: 1.35; }
.also__item--b .also__line { top: 87px; left: 773px; width: 1px; height: 367px; }
.also__item--b .also__bar { top: 239px; left: 772px; width: 3px; height: 66px; }
.also__item--c .also__word { text-align: right; top: 166px; left: 819px; width: 270px; font-size: 30px; line-height: 1.55; }
.also__item--c .also__name { text-align: right; top: 245px; left: 819px; width: 270px; font-size: 18px; line-height: 1.35; }
.also__item--c .also__line { top: 87px; left: 1119px; width: 1px; height: 367px; }
.also__item--c .also__bar { top: 239px; left: 1118px; width: 3px; height: 66px; }
@media (max-width: 1199px) {
  .also__title { top: 70px; left: 559px; }
  .also__item--a .also__word { left: 24px; }
  .also__item--a .also__name { left: 24px; }
  .also__item--a .also__line { left: 324px; }
  .also__item--a .also__bar { left: 323px; }
  .also__item--b .also__word { top: 425px; left: 333px; }
  .also__item--b .also__name { top: 504px; left: 333px; }
  .also__item--b .also__line { top: 346px; left: 636px; }
  .also__item--b .also__bar { top: 498px; left: 635px; }
  .also__item--c .also__word { left: 649px; }
  .also__item--c .also__name { left: 649px; }
  .also__item--c .also__line { left: 949px; }
  .also__item--c .also__bar { left: 948px; }
}
@media (max-width: 959px) {
  .also__title { left: 234px; }
  .also__item--a .also__word { top: 215px; left: 323px; }
  .also__item--a .also__name { top: 294px; left: 323px; }
  .also__item--a .also__line { top: 136px; left: 622px; }
  .also__item--a .also__bar { top: 288px; left: 621px; }
  .also__item--b .also__word { top: 380px; left: 46px; text-align: left; }
  .also__item--b .also__name { top: 459px; left: 46px; text-align: left; }
  .also__item--b .also__line { top: 301px; left: 11px; }
  .also__item--b .also__bar { top: 453px; left: 10px; }
  .also__item--c .also__word { top: 566px; left: 324px; }
  .also__item--c .also__name { top: 645px; left: 324px; }
  .also__item--c .also__line { top: 487px; left: 622px; }
  .also__item--c .also__bar { top: 639px; left: 621px; }
}
@media (max-width: 639px) {
  .also__title { left: 81px; }
  .also__item--a .also__word { top: 168px; left: 167px; }
  .also__item--a .also__name { top: 247px; left: 167px; }
  .also__item--a .also__line { top: 87px; left: 469px; }
  .also__item--a .also__bar { top: 239px; left: 468px; }
  .also__item--b .also__word { top: 363px; left: 44px; }
  .also__item--b .also__name { top: 442px; left: 44px; }
  .also__item--b .also__line { top: 284px; }
  .also__item--b .also__bar { top: 436px; }
  .also__item--c .also__word { top: 555px; left: 167px; }
  .also__item--c .also__name { top: 634px; left: 167px; }
  .also__item--c .also__line { top: 476px; left: 469px; }
  .also__item--c .also__bar { top: 628px; left: 468px; }
}
@media (max-width: 479px) {
  .also__title { top: 80px; left: -81px; }
  .also__item--a .also__word { top: 200px; left: 21px; font-size: 28px; }
  .also__item--a .also__name { top: 258px; left: 25px; font-size: 16px; }
  .also__item--a .also__line { left: 309px; }
  .also__item--a .also__bar { left: 308px; }
  .also__item--b .also__word { top: 377px; left: 25px; font-size: 28px; }
  .also__item--b .also__name { top: 432px; left: 25px; font-size: 16px; }
  .also__item--b .also__line { top: 271px; left: 10px; }
  .also__item--b .also__bar { top: 423px; left: 9px; }
  .also__item--c .also__word { top: 570px; left: 26px; font-size: 28px; }
  .also__item--c .also__name { top: 625px; left: 26px; font-size: 16px; }
  .also__item--c .also__line { top: 451px; left: 309px; }
  .also__item--c .also__bar { top: 603px; left: 308px; }
}

/* ---------- «Алгоритм работы» ---------- */
/* От 980px — три колонки по линиям фона, уже 980px — карусель из тех же колонок.
   Текст колонки прижат вправо, точки стоят на правой линии колонки:
   --pad — отступ текста от линии, --dx — сдвиг точек от линии внутрь, --dot-top — точка у пункта списка. */
.algo { overflow: hidden; }
.algo__head { width: 1040px; height: 275px; margin: 0 auto; padding-top: 110px; }
.algo__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 1040px;
  min-height: 815px;    /* высота раздела 1090px */
  margin: 0 auto;
}
.algo__body {
  --pad: 30px; --dx: 0px; --dot-top: 6px;
  position: relative;
  z-index: 0;
  height: 100%;
  padding-right: var(--pad);
  text-align: right;
}
/* Градиент колонки */
.algo__body::before {
  content: '';
  position: absolute;
  top: -321px; left: 3px; right: 0;
  height: 1283px;
  z-index: -1;
  background: url(../images/common/algo-gradient.svg) center / cover no-repeat;   /* как в Tilda: с обрезкой краёв */
  pointer-events: none;
}
.algo__name { color: #000; font-size: 18px; font-weight: 600; line-height: 1.35; }
.algo__num { display: none; }   /* номер этапа — только в карусели */
.algo__result { margin-top: 82px; color: #434343; font-size: 16px; font-weight: 300; line-height: 1.55; }
.algo__result b { display: block; margin-top: 1px; color: var(--accent); font-size: 18px; font-weight: 700; }
.algo__arrow {
  position: relative;
  height: 55px;
  margin-top: 49px;
  background: url(../images/common/algo-arrow.svg) right center / 290px auto no-repeat;
}
.algo__arrow::after,
.algo__steps li::after {
  content: '';
  position: absolute;
  background: center / contain no-repeat;
}
.algo__arrow::after {
  top: 50%; right: calc(var(--dx) - var(--pad) - 15px);
  width: 30px; height: 30px;
  margin-top: -15px;
  background-image: url(../images/common/dot-purple.svg);
}
.algo__steps { margin: 48px 0 0; padding: 0; list-style: none; }
.algo__steps li {
  position: relative;
  max-width: var(--w, 270px);   /* ширина пункта как в оригинале — от неё зависят переносы */
  margin: 0 0 36px auto;
  color: #434343;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.35;
}
.algo__steps li::after {
  top: var(--dot-top); right: calc(var(--dx) - var(--pad) - 9px);
  width: 18px; height: 18px;
  background-image: url(../images/common/dot-blue.svg);
}

@media (max-width: 1199px) {
  .algo__head, .algo__track { width: 939px; }
  .algo__body { --dx: -2px; }
  .algo__body::before { left: 2px; }   /* как в Tilda: от линии колонки +2px до следующей линии */
  .algo__name { font-size: 16px; }
  .algo__result { margin-top: 84px; font-size: 14px; }
  .algo__result b { margin-top: 4px; font-size: 16px; }
  .algo__arrow { height: 42px; margin-top: 57px; background-size: 220px auto; }
  .algo__steps { margin-top: 56px; }
  /* Шаг пунктов как в Tilda: на 960px пункты стоят на тех же местах, что на 1200px, шаг неровный и задан в разметке (--step) */
  .algo__steps li { min-height: var(--step, 0px); margin-bottom: 0; font-size: 14px; }
  .algo .nowrap { white-space: normal; }   /* в оригинале здесь перенос по дефису */
}

/* Карусель: заголовок над ней, в слайде — одна колонка */
@media (max-width: 979px) {
  .algo__head { height: 170px; padding-top: 107px; }
  .algo__track { display: block; width: auto; min-height: 0; }
  .algo__stage { min-height: 500px; }
  .algo__body { --pad: 33px; --dx: 2px; width: 313px; margin-left: calc(50% - 470px); padding-top: 35px; }
  .algo__body::before { top: 0; bottom: 0; height: auto; left: -5px; right: auto; width: 310px; }
  .algo__num { display: inline; }
  .algo__name { white-space: nowrap; }
  .algo__result { margin-top: 44px; }
  .algo__arrow { margin-top: 37px; }
  .algo__steps { margin-top: 36px; }
  .algo__steps li { max-width: 270px; min-height: 0; margin-bottom: 26px; }
}
/* 960–979px: у слайдов в Tilda свой фон и только крайние линии — средние линии фона страницы закрываем */
@media (min-width: 960px) and (max-width: 979px) {
  .algo { position: relative; background: var(--bg); }
  .algo::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: calc(50% - 480px + 12px);
    z-index: 1;
    width: 937px;
    border-left: 1px solid rgba(178, 157, 134, .2);
    border-right: 1px solid rgba(178, 157, 134, .2);
    pointer-events: none;
  }
}
@media (max-width: 959px) {
  .algo__head { width: var(--card-w); margin-left: var(--line-x, auto); }
  .algo__stage { min-height: 600px; }
  .algo__body { --pad: 34.5px; --dx: 2.5px; --dot-top: 0px; width: var(--card-w); margin: 0 auto 0 var(--line-x, auto); }
  .algo__body::before { left: 0; right: 0; width: auto; }
  .algo__result { margin-top: 34px; }
  .algo__arrow { margin-top: 27px; }
  .algo__steps { margin-top: 40px; }
  .algo__steps li { max-width: 320px; margin-bottom: 21px; }
}
@media (max-width: 639px) {
  .algo__body { --pad: 28.5px; --dx: -2.5px; padding-top: 45px; }
  .algo__result { margin-top: 44px; }
  .algo__arrow { margin-top: 37px; }
  .algo__steps { margin-top: 46px; }
}
@media (max-width: 479px) {
  .algo__body { --pad: 31px; --dx: 0px; padding-top: 25px; }
  .algo__steps { margin-top: 47px; }
  .algo__steps li { max-width: 260px; }
}

/* ---------- Карусель (js/carousel.js) ---------- */
/* Скрипт добавляет класс .is-on, когда ширина окна не больше data-carousel-max.
   Без скрипта слайды просто идут друг под другом. */
.carousel { position: relative; }
.carousel.is-on .carousel__viewport { overflow: hidden; touch-action: pan-y; }
.carousel.is-on .carousel__track { display: flex; }
.carousel.is-on .carousel__track > * { flex: 0 0 100%; min-width: 0; }
.carousel__arrow {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 30px; height: 30px;
  margin-top: -15px;
  padding: 0;
  border: 1px solid var(--beige);
  border-radius: 50%;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.3 13'%3E%3Cpolyline fill='none' stroke='%23b29d86' points='.5,.5 6.5,6.5 .5,12.5'/%3E%3C/svg%3E") 55% 50% / 7px auto no-repeat;
  cursor: pointer;
}
.carousel.is-on .carousel__arrow { display: block; }
.carousel__arrow--prev { left: 20px; transform: scaleX(-1); }
.carousel__arrow--next { right: 20px; }
@media (max-width: 640px) {
  .carousel__arrow { width: 24px; height: 24px; margin-top: -12px; background-size: 6px auto; }
  .carousel__arrow--prev { left: 5px; }
  .carousel__arrow--next { right: 5px; }
}

/* ---------- Страница «Услуги» ---------- */
/* Отступ под шапку (в Tilda — пустой Zero Block); на узких экранах шапка перекрывает начало раздела, как в оригинале */
.page--service { padding-top: 110px; }
@media (max-width: 1199px) { .page--service { padding-top: 90px; } }
@media (max-width: 959px)  { .page--service { padding-top: 50px; } }