/* Start:/local/templates/nosorog/services.css?179010820328586*/

.sec--dirs {
  --sd: min(var(--s), calc(100dvh / 940));
  display: flex;
  min-height: calc(100dvh - var(--chrome-h));
  padding-block: calc(20 * var(--sd)) calc(30 * var(--sd));
}

.sec--dirs > .wrap {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}

.dirs__head {
  flex: 0 0 auto;
  display: flex;
  align-items: start;
  gap: calc(40 * var(--s));
}

.dirs__head .sec__lead {
  margin-left: auto;
  max-width: calc(470 * var(--s));
  padding-top: calc(4 * var(--s));
  text-align: right;
}

.dirs__grid {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: calc(18 * var(--sd));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: calc(12 * var(--sd));
}

/* Раньше между карточками стояли три плитки с иллюстрациями. Без них
   пять карточек делят все двенадцать колонок: флагман держит два ряда
   слева, «Вода» и «Сервис» — правую колонку, нижний ряд разрезан
   пополам. Пустых клеток не остаётся. */
.card--heat   { grid-area: 1 / 1 / span 2 / span 7; }
.card--water  { grid-area: 1 / 8 / span 1 / span 5; }
.card--serv   { grid-area: 2 / 8 / span 1 / span 5; }
.card--drain  { grid-area: 3 / 1 / span 1 / span 6; }
.card--build  { grid-area: 3 / 7 / span 1 / span 6; }

.card--heat,
.card--serv,
.card--build { --face: #eef1f6; }

.card--water .card__front,
.card--drain .card__front {
  --line-a: rgba(150, 188, 255, .33);
  --line-b: rgba(255, 255, 255, .2);
}

.card--water,
.card--drain {
  --face: var(--blue-dark);
  --face-ink: var(--white);
  --face-muted: rgba(255, 255, 255, .93);
  --face-accent: var(--white);
}

.card {
  position: relative;
  perspective: calc(2200 * var(--sd));
  cursor: pointer;
}

.card__flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-dur) var(--soft);
  will-change: transform;
}

.card.is-open .card__flip { transform: rotateY(180deg); }

/* Ховер и фокус переворачивают плитку только там, где указатель
   действительно есть. На тач-экране :hover залипает на плитке после
   тапа: класс is-open уже снят, а плитка всё ещё повёрнута, и вернуть
   её удавалось только тапом по соседней — тогда ховер уходил туда. */
@media (hover: hover) {
  .card:hover .card__flip,
  .card:focus-within .card__flip { transform: rotateY(180deg); }
}

.card:focus-within { z-index: 2; }
.card__cta:focus-visible { outline: 2px solid var(--white); outline-offset: calc(3 * var(--s)); }

.card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  --pad: calc(21 * var(--sd));
  --padx: calc(22 * var(--sd));
  padding: var(--pad) var(--padx);
  border-radius: var(--r);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

.card__front {
  --line-a: rgba(42, 102, 221, .21);
  --line-b: rgba(255, 255, 255, .5);
  justify-content: flex-end;
  background: var(--face, var(--band));
  color: var(--face-ink, var(--ink));
}

.card__back {
  transform: rotateY(180deg);
  background: var(--blue-dark);
  color: var(--white);
}

.card__title {
  margin: 0;
  font-size: calc(24 * var(--sd));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.card__line {
  margin: calc(9 * var(--sd)) 0 0;
  font-size: calc(14 * var(--sd));
  line-height: 1.45;
  color: var(--face-muted, var(--muted));
}

.card__art {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--padx)) calc(16 * var(--sd));
  pointer-events: none;
}

.card__flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: calc(8 * var(--sd));
  stroke-linecap: round;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.4s var(--soft);
}

.card__flow path { vector-effect: non-scaling-stroke; }

.js .reveal:not(.is-in) .card__flow {
  clip-path: inset(0 100% 0 0);
  transition: none;
}

.card__flow:nth-child(1) { stroke: var(--line-b); transition-delay: .2s; }
.card__flow:nth-child(2) { stroke: var(--line-a); transition-delay: .5s; }
.card__flow:nth-child(3) { stroke: var(--line-b); transition-delay: .8s; }

.card--heat .card__title { font-size: calc(31 * var(--sd)); }
.card--heat .card__line { font-size: calc(15.5 * var(--sd)); }
.card--heat .card__from { font-size: calc(26 * var(--sd)); }

.card__from {
  margin-top: calc(14 * var(--sd));
  font-size: calc(20 * var(--sd));
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--face-accent, var(--blue-dark));
}

.price {
  margin: calc(9 * var(--sd)) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(9 * var(--sd)) calc(16 * var(--sd));
}

.price li {
  min-width: 0;
  padding-top: calc(7 * var(--sd));
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.price li span {
  display: block;
  font-size: calc(11.5 * var(--sd));
  line-height: 1.25;
  color: rgba(255, 255, 255, .74);
}

.price li em {
  display: block;
  margin-top: calc(3 * var(--sd));
  font-style: normal;
  font-size: calc(17 * var(--sd));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.card--heat .price { gap: calc(22 * var(--sd)) calc(18 * var(--sd)); }
.card--heat .price li { padding-top: calc(10 * var(--sd)); }
.card--heat .price li span { font-size: calc(13.5 * var(--sd)); }
.card--heat .price li em { font-size: calc(24 * var(--sd)); }

.card__cta {
  margin-top: auto;
  padding-top: calc(9 * var(--sd));
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--sd));
  border: 0;
  background: none;
  color: var(--white);
  font-family: inherit;
  font-size: calc(12.5 * var(--sd));
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.card--heat .card__cta { font-size: calc(15 * var(--sd)); }

.card__cta::after {
  content: "";
  flex: 0 0 auto;
  width: calc(24 * var(--sd));
  height: calc(24 * var(--sd));
  border-radius: 50%;
  background: var(--white) var(--arrow-glyph) center / calc(13 * var(--sd)) no-repeat;
  transition: transform .5s var(--soft);
}

.card--heat .card__cta::after { width: calc(30 * var(--sd)); height: calc(30 * var(--sd)); background-size: calc(15 * var(--sd)); }

.card__cta:hover::after { transform: translateX(3px); }

:root {
  --soft: cubic-bezier(.36, .04, .16, 1);
  --flip-dur: 1.15s;

  --arrow-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a66dd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E");
}

@media (hover: hover) {
  .card__cta { pointer-events: none; }
}

/* нижний отступ вдвое больше верхнего: он и есть весь воздух между
   схемой работы и формой заявки — у .sec--brief своего сверху нет */
.sec--flow { padding-block: calc(92 * var(--s)) calc(192 * var(--s)); }

.flow__head {
  display: grid;
  grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
  align-items: start;
  gap: calc(46 * var(--s));
}

.flow__head .sec__lead {
  max-width: none;
  margin-left: auto;
  padding-top: calc(4 * var(--s));
  text-align: right;
}

.flowline {
  margin-top: calc(44 * var(--s));
  display: flex;
  align-items: stretch;
  height: calc(430 * var(--s));
}

.step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 1.15s var(--soft);
}

/* Нахлёст обязан быть не меньше двух радиусов. При 38px и радиусе 26
   на нижней кромке оставалась непокрытая полоска в 2*26-38=14px:
   предыдущая панель дотягивалась только до right-26, следующая
   начиналась с left+26, и между ними просвечивал фон страницы. Тот же
   зазор был и сверху. 54 закрывает его с запасом. */
.step + .step { margin-left: calc(-54 * var(--s)); }

.step--1 { z-index: 5; --panel: #0b2559; }
.step--2 { z-index: 4; --panel: #12377f; }
.step--3 { z-index: 3; --panel: #1849a8; }
.step--4 { z-index: 2; --panel: #2054c4; }
.step--5 { z-index: 1; --panel: #2a5fd4; }

.step {
  --on: #fff;
  --off: rgba(255, 255, 255, .9);
  --hair: rgba(255, 255, 255, .38);
}

.step + .step .step__pick { padding-left: calc(86 * var(--s)); }

.step__pick {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: calc(32 * var(--s));
  border: 0;
  border-radius: var(--r);
  background: var(--panel);
  color: var(--on);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.step__art {
  position: absolute;
  top: calc(26 * var(--s));
  right: calc(26 * var(--s));
  width: calc(150 * var(--s));
  height: calc(150 * var(--s));
  color: var(--hair);
  opacity: 0;
  transform: scale(.92);
  transition: opacity .8s ease, transform 1.2s var(--soft);
  pointer-events: none;
}

.step__art svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.step__art svg > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.15s var(--soft);
}

.step__art svg > *:nth-child(2) { transition-delay: .10s; }
.step__art svg > *:nth-child(3) { transition-delay: .20s; }
.step__art svg > *:nth-child(4) { transition-delay: .30s; }
.step__art svg > *:nth-child(5) { transition-delay: .40s; }
.step__art svg > *:nth-child(6) { transition-delay: .50s; }

.step:hover .step__art,
.step:has(.step__pick:focus-visible) .step__art,
.step.is-open .step__art {
  opacity: 1;
  transform: none;
  transition-delay: .1s;
}

.step:hover .step__art svg > *,
.step:has(.step__pick:focus-visible) .step__art svg > *,
.step.is-open .step__art svg > * { stroke-dashoffset: 0; }

.step__num {
  font-size: calc(64 * var(--s));
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  opacity: .9;
}

.step__more {
  position: relative;
  margin-top: auto;
  display: block;
  width: calc(322 * var(--s));
  opacity: 0;
  transform: translateY(calc(14 * var(--s)));
  transition: opacity .75s ease, transform 1.05s var(--soft);
}

.step__more::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-20 * var(--s));
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .5);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.15s var(--soft);
}

.step:hover .step__more::before,
.step:has(.step__pick:focus-visible) .step__more::before,
.step.is-open .step__more::before { transform: none; transition-delay: .28s; }

.step__text {
  display: block;
  padding-bottom: calc(18 * var(--s));
  font-size: calc(14.5 * var(--s));
  line-height: 1.56;
  font-weight: 400;
  color: var(--off);
}

.step__name {
  font-size: calc(21 * var(--s));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* Раскрывает ховер и фокус только с клавиатуры. С :focus-within панель
   залипала раскрытой после клика мышью: кнопка оставалась в фокусе,
   пока не нажмёшь где-нибудь ещё. */
.step:hover,
.step:has(.step__pick:focus-visible),
.step.is-open { flex-grow: 2.4; }

.step:hover .step__more,
.step:has(.step__pick:focus-visible) .step__more,
.step.is-open .step__more {
  opacity: 1;
  transform: none;
  transition-delay: .2s;
}

.step.is-open { z-index: 6; }

.step:has(.step__pick:focus-visible) { z-index: 6; }
.step__pick:focus-visible { outline: 3px solid var(--white); outline-offset: calc(-5 * var(--s)); }

.sec--brief { padding-block: 0 calc(112 * var(--s)); }

.brief {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: calc(52 * var(--s));
  padding: calc(56 * var(--s));
  border-radius: calc(38 * var(--s));
  background: var(--surface);
}

.brief__copy { align-self: start; }

.brief__title {
  margin: 0;
  font-size: calc(44 * var(--s));
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.035em;
}

.drop { margin-top: calc(2 * var(--s)); }

.drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.drop__zone {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--s));
  padding: calc(20 * var(--s)) calc(22 * var(--s));
  border: 1px dashed rgba(16, 20, 28, .22);
  border-radius: calc(16 * var(--s));
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.drop__zone:hover,
.drop__input:focus-visible + .drop__zone,
.drop.is-over .drop__zone {
  border-color: var(--blue);
  background: var(--white);
}

.drop__icon {
  width: calc(24 * var(--s));
  height: calc(24 * var(--s));
  flex-shrink: 0;
  color: var(--blue);
}

.drop__text {
  display: grid;
  gap: calc(3 * var(--s));
  font-size: calc(12.5 * var(--s));
  line-height: 1.45;
  color: var(--muted);
}

.drop__text b {
  font-size: calc(14.5 * var(--s));
  font-weight: 700;
  color: var(--ink);
}

.drop__list {
  margin: calc(10 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(6 * var(--s));
}

.drop__list li {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--s));
  padding: calc(10 * var(--s)) calc(12 * var(--s)) calc(10 * var(--s)) calc(16 * var(--s));
  border-radius: calc(12 * var(--s));
  background: var(--white);
  font-size: calc(13.5 * var(--s));
}

.drop__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.drop__size { color: var(--muted); white-space: nowrap; }

.drop__drop {
  width: calc(26 * var(--s));
  height: calc(26 * var(--s));
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.drop__drop svg { width: calc(13 * var(--s)); height: calc(13 * var(--s)); }
.drop__drop:hover { background: #f0d9d5; color: #a8321f; }

.drop__error {
  margin: calc(8 * var(--s)) 0 0;
  font-size: calc(12.5 * var(--s));
  font-weight: 600;
  color: #a8321f;
}

.brief__form.is-sent .lead__row,
.brief__form.is-sent > .field,
.brief__form.is-sent .drop,
.brief__form.is-sent .lead__foot { display: none; }

.brief__form.is-sent .lead__status {
  font-size: calc(19 * var(--s));
  line-height: 1.5;
  color: var(--ink);
}

body.is-modal { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: calc(24 * var(--s));
}

.modal[hidden] { display: none; }

.modal__veil {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 30, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s ease;
}

.modal__box {
  position: relative;
  width: min(calc(620 * var(--s)), 100%);
  max-height: calc(100dvh - calc(48 * var(--s)));
  overflow-y: auto;
  padding: calc(42 * var(--s));
  border-radius: calc(34 * var(--s));
  background: var(--surface);
  opacity: 0;
  transform: translateY(calc(14 * var(--s))) scale(.985);
  transition: opacity .34s ease, transform .44s var(--ease);
}

.modal.is-on .modal__veil { opacity: 1; }
.modal.is-on .modal__box { opacity: 1; transform: none; }

.modal__x {
  position: absolute;
  top: calc(20 * var(--s));
  right: calc(20 * var(--s));
  width: calc(38 * var(--s));
  height: calc(38 * var(--s));
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  color: var(--muted);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.modal__x svg { width: calc(17 * var(--s)); height: calc(17 * var(--s)); }
.modal__x:hover { background: var(--white); color: var(--ink); }

.modal__title {
  margin: calc(10 * var(--s)) 0 0;
  padding-right: calc(40 * var(--s));
  font-size: calc(32 * var(--s));
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.035em;
}

.modal__lead {
  margin: calc(12 * var(--s)) 0 calc(24 * var(--s));
  font-size: calc(14.5 * var(--s));
  line-height: 1.58;
  color: var(--muted);
}

@media (max-width: 1200px) {
  .sec--dirs {
    --sd: 1px;
    display: block;
    min-height: 0;
    padding-block: 26px clamp(46px, 8.5vw, 84px);
  }

  .sec--flow { padding-block: clamp(46px, 8.5vw, 84px) clamp(92px, 17vw, 168px); }
  .sec--brief { padding-bottom: clamp(52px, 9vw, 96px); }

  .dirs__head,
  .flow__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }

  .dirs__head .sec__title { font-size: clamp(27px, 6.2vw, 44px); }

  .dirs__head .sec__lead,
  .flow__head .sec__lead { max-width: none; margin-left: 0; text-align: left; font-size: clamp(15px, 3.9vw, 17px); }

  .dirs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 336px;
    gap: 14px;
    margin-top: 30px;
  }

  .card--heat, .card--serv, .card--build { grid-area: auto / auto / auto / span 2; }
  .card--water, .card--drain { grid-area: auto / auto / auto / span 1; }
  .card__face { padding: clamp(20px, 5vw, 30px); }
  .card__title, .card--heat .card__title { font-size: clamp(22px, 5.4vw, 28px); }
  .card__line, .card--heat .card__line { font-size: clamp(14.5px, 3.7vw, 16px); }
  .card__from, .card--heat .card__from { font-size: clamp(19px, 4.8vw, 23px); margin-top: 14px; }
  .price, .card--heat .price { gap: 14px 18px; }
  .price li, .card--heat .price li { padding-top: 10px; }
  .price li span, .card--heat .price li span { font-size: clamp(13px, 3.4vw, 14px); }
  .price li em, .card--heat .price li em { font-size: clamp(18px, 4.6vw, 21px); }
  .card__cta, .card--heat .card__cta { font-size: 15px; }
  .card__cta::after, .card--heat .card__cta::after { width: 30px; height: 30px; background-size: 15px; }

  .card__face { --pad: clamp(20px, 5vw, 30px); --padx: clamp(20px, 5vw, 30px); }
  .card__art { margin-bottom: 18px; }

  /* водяной знак плитки котельной требует места, которого в узкой
     раскладке нет. Волосяная линия .step__more::before заменена на
     border-top у самого текста: он лежит внутри схлопываемой строки,
     поэтому в свёрнутом виде обрезается вместе с ней. */
  .step__more::before,
  .card--heat .card__front::after,
  .card--heat .card__back::after { display: none; }

  /* Пять панелей в ряд — десктопная композиция. Здесь тот же самый
     механизм разворачивается вертикально: шапка со ступенью и
     названием всегда видна, по нажатию панель мягко раскрывается,
     рисуется иконка и проявляется текст. Реагируем и на .is-open
     (тап), и на :hover/фокус с клавиатуры — на ноутбуке в этой полосе
     мышь и клавиатура работают ровно как на широком экране. */
  .flowline {
    display: grid;
    gap: 10px;
    height: auto;
    margin-top: 30px;
  }

  .step {
    flex: none;
    margin-left: 0;
    transition: none;
  }

  .step + .step { margin-left: 0; }

  .step:hover,
  .step:has(.step__pick:focus-visible),
  .step.is-open { flex-grow: 0; }

  /* В столбце ни ховер, ни фокус не должны открывать панель.
     Ховер на ноутбуке раскрывал бы её под курсором, а на тач-экране
     он залипает после тапа. Фокус же остаётся на кнопке сразу после
     нажатия, из-за чего повторный тап не мог закрыть панель обратно.
     Клавиатуре это ничего не стоит: Enter и Space шлют click, то есть
     идут той же дорогой, что и палец. Открывает только .is-open. */
  .step:hover .step__more,
  .step:has(.step__pick:focus-visible) .step__more { grid-template-rows: 0fr; opacity: 0; }

  .step:hover .step__art,
  .step:has(.step__pick:focus-visible) .step__art { opacity: 0; transform: scale(.92); }

  .step:hover .step__art svg > *,
  .step:has(.step__pick:focus-visible) .step__art svg > * { stroke-dashoffset: 1; }

  /* шапка ступени: номер, название и указатель в одну строку */
  .step__pick {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(12px, 3.6vw, 18px);
    row-gap: 0;
    padding: clamp(15px, 4vw, 20px) clamp(16px, 4.4vw, 24px);
    min-height: 60px;
    height: auto;
  }

  /* десктоп сдвигает панели друг под друга и компенсирует шов
     отступом слева — в столбце шва нет */
  .step + .step .step__pick { padding-left: clamp(16px, 4.4vw, 24px); }

  .step__num {
    grid-area: 1 / 1;
    align-self: center;
    font-size: clamp(26px, 7vw, 34px);
    opacity: .75;
  }

  .step__name {
    grid-area: 1 / 2;
    font-size: clamp(16.5px, 4.3vw, 19px);
  }

  /* указатель, что панель раскрывается: без него свёрнутая ступень
     ничем не показывает, что на неё можно нажать */
  .step__pick::after {
    grid-area: 1 / 3;
    content: "";
    width: 10px;
    height: 10px;
    margin-right: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .7;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .6s var(--soft), opacity .3s ease;
  }

  .step.is-open .step__pick::after {
    opacity: 1;
    transform: rotate(225deg) translate(-2px, -2px);
  }

  /* Раскрытие высоты через grid-template-rows 0fr → 1fr: единственный
     способ анимировать высоту неизвестного контента без max-height,
     который либо обрезает длинный текст, либо тормозит на коротком. */
  .step__more {
    grid-area: 2 / 1 / 3 / 4;
    display: grid;
    grid-template-rows: 0fr;
    width: auto;
    margin-top: 0;
    opacity: 0;
    transform: none;
    transition: grid-template-rows 1.05s var(--soft), opacity .45s ease;
  }

  .step.is-open .step__more {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
    transition-delay: 0s, .1s;
  }

  /* min-height: 0 обнуляет только content-box — padding, border и
     margin продолжали бы держать строку раскрытой на 92px. Поэтому
     на самом тексте отбивок нет вовсе: и волосяная линия сверху, и
     подвал под иконку живут в псевдоэлементах, а те лежат внутри
     content-box и обрезаются вместе с ним. */
  .step__text {
    min-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(14px, 3.7vw, 15.5px);
  }

  .step__text::before {
    content: "";
    display: block;
    height: clamp(12px, 3.4vw, 16px);
    margin-bottom: clamp(12px, 3.4vw, 15px);
    border-bottom: 1px solid rgba(255, 255, 255, .45);
  }

  /* подвал, в котором сидит нарисованная иконка */
  .step__text::after {
    content: "";
    display: block;
    height: clamp(58px, 16vw, 78px);
  }

  /* иконка возвращается: садится в нижний правый угол раскрытой
     панели, в подвал, который текст оставил ей отступом снизу.
     В свёрнутом виде панель ниже иконки, а у .step__pick стоит
     overflow: hidden — поэтому её просто не видно. */
  .step__art {
    display: block;
    top: auto;
    bottom: clamp(14px, 4vw, 20px);
    right: clamp(16px, 4.4vw, 24px);
    width: clamp(52px, 14vw, 68px);
    height: clamp(52px, 14vw, 68px);
  }

  /* на меньшем размере штрих в 2.6 единицы viewBox выглядит нитью */
  .step__art svg { stroke-width: 3.6; }
  .step__art { color: rgba(255, 255, 255, .52); }

  .step.is-open .step__art { opacity: 1; transform: none; }
  .step.is-open .step__art svg > * { stroke-dashoffset: 0; }

  .brief {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding: clamp(24px, 5.6vw, 48px);
    border-radius: clamp(22px, 5vw, 34px);
  }

  .brief__title { font-size: clamp(28px, 7vw, 42px); }
  .brief__title br { display: none; }

  .modal__box { padding: clamp(24px, 5.6vw, 40px); border-radius: clamp(22px, 5vw, 30px); }
  .modal__title { font-size: clamp(23px, 5.8vw, 30px); }
}

@media (max-width: 700px) {
  .dirs__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 320px; }
  .card--heat, .card--serv, .card--build,
  .card--water, .card--drain { grid-area: auto / auto / auto / span 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card__flip,
  .card__flow,
  .step,
  .step__more,
  .step__art,
  .step__art svg > *,
  .modal__veil,
  .modal__box,
  .card__cta::after { transition: none; }

  .step__more::before { transition: none; transform: none; }
  .step__art svg > * { stroke-dashoffset: 0; }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .dirs__head,
  .flow__head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  /* шесть колонок повторяют десктопный рисунок в половину ширины */
  .dirs__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 264px; }
  .card--heat  { grid-area: 1 / 1 / span 2 / span 3; }
  .card--water { grid-area: 1 / 4 / span 1 / span 3; }
  .card--serv  { grid-area: 2 / 4 / span 1 / span 3; }
  .card--drain { grid-area: 3 / 1 / span 1 / span 3; }
  .card--build { grid-area: 3 / 4 / span 1 / span 3; }

  .brief { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
}

@media (max-width: 900px) {
  .card__cta, .card--heat .card__cta { min-height: 44px; }
  /* шапка ступени задаёт себе 60px в блоке схемы работы — здесь
     дублировать 44px нельзя, правило перебивало бы её по порядку */
}

@media (max-width: 900px) {
  .price li,
  .card--heat .price li { min-width: 0; }

  .price li span,
  .card--heat .price li span { overflow-wrap: anywhere; }

  /* «от 1 600 ₽/точка» — самая длинная строка в списке, и с запретом
     переноса она не влезала в свою колонку на 320px и на планшете.
     Верхняя граница подобрана по ней: цифра остаётся крупной, но
     нигде не обрезается. */
  .price li em,
  .card--heat .price li em { white-space: nowrap; font-size: clamp(14px, 4.2vw, 17.5px); }
}

/* Одну колонку я вводил, когда плитки на планшете были узкими. После
   перекладки бенто самая тесная из них всё равно шире 350px, и две
   колонки туда влезают везде — а в одну тот же список вдвое длиннее и
   не помещается на обороте. */

/* End */
/* /local/templates/nosorog/services.css?179010820328586 */