@charset "UTF-8";
/* ==========================================================================
   ГЕОПИР — «Технологии» (technologies.html) и страница технологии
   (technology.html). Как и предыдущие шаблоны, опирается на about.css
   (.ab-sec, .ab-head, .ab-rule, .ab-hero, .ab-rail) и на objects.css
   (.ob-card, .ob-tag) для блоков «Примеры объектов».
   Десктоп 1920/1680 — calc(Npx * var(--s)); ниже 1660 — токены.
   ========================================================================== */

.page-techs,
.page-tech{
  --sec-pad:calc(120px * var(--s));
  --card-r:calc(20px * var(--s));
  --card-sh:0 4px 24px rgba(0,0,0,.07);
}

/* длинные термины не должны выходить за колонку */
.tc-item__t,.tc-area__t,.tc-adv__t,.tc-step__t,.tc-ml__list b,
.page-techs .sec-h2,.page-tech .sec-h2{hyphens:auto;overflow-wrap:break-word}

/* метка направления: усиление оснований / инженерная защита */
.tc-kind{
  display:inline-flex;align-items:center;
  padding:calc(7px * var(--s)) calc(16px * var(--s));
  border-radius:calc(8px * var(--s));
  font-size:calc(15px * var(--s));line-height:1.3;white-space:nowrap;
}
.tc-kind--base{background:#EAF4FA;color:var(--blue-dark)}
.tc-kind--prot{background:#FDF0E4;color:var(--orange)}

/* --------------------------------------------------------------------------
   1. Вводная информация
   -------------------------------------------------------------------------- */
.tc-intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);
  gap:calc(70px * var(--s));margin-top:calc(48px * var(--s));align-items:start;
}
.tc-intro__text p{font-size:calc(20px * var(--s));line-height:1.6}
.tc-intro__text p + p{margin-top:calc(18px * var(--s))}
.tc-facts{
  padding:calc(36px * var(--s)) calc(36px * var(--s)) calc(38px * var(--s));
  background:#F3F6F8;border-radius:var(--card-r);
}
.tc-facts div{
  display:flex;justify-content:space-between;gap:calc(20px * var(--s));
  padding:calc(16px * var(--s)) 0;border-bottom:1px solid #DFE6EA;
  font-size:calc(18px * var(--s));line-height:1.4;
}
.tc-facts div:last-child{border-bottom:0;padding-bottom:0}
.tc-facts div:first-child{padding-top:0}
.tc-facts b{font-weight:600;color:#2F3142;text-align:right;white-space:nowrap}

/* --------------------------------------------------------------------------
   2. Перечень технологий
   -------------------------------------------------------------------------- */
.tc-list{display:grid;gap:calc(28px * var(--s));margin-top:calc(48px * var(--s))}
.tc-item{
  display:grid;grid-template-columns:calc(560px * var(--s)) 1fr;
  gap:calc(48px * var(--s));align-items:center;
  padding:calc(32px * var(--s));
  background:#fff;border-radius:var(--card-r);box-shadow:var(--card-sh);
  transition:box-shadow .18s ease;
}
.tc-item:hover{box-shadow:var(--shadow-lg)}
/* чётные строки — фото справа, чтобы список не был монотонным */
.tc-item:nth-child(even) .tc-item__media{order:2}
.tc-item__media{position:relative;border-radius:calc(14px * var(--s));overflow:hidden}
.tc-item__media img{width:100%;height:calc(340px * var(--s));object-fit:cover;display:block}
.tc-item__n{
  position:absolute;left:calc(20px * var(--s));top:calc(20px * var(--s));
  display:flex;align-items:center;justify-content:center;
  width:calc(56px * var(--s));height:calc(56px * var(--s));border-radius:50%;
  background:#fff;font-weight:900;font-size:calc(22px * var(--s));color:var(--blue);
}
.tc-item__t{margin-top:calc(18px * var(--s));font-weight:600;font-size:calc(32px * var(--s));line-height:1.25;color:#2F3142}
.tc-item__body .ab-rule{margin:calc(18px * var(--s)) 0}
.tc-item__d{font-size:calc(20px * var(--s));line-height:1.6}
.tc-item__areas{display:flex;flex-wrap:wrap;gap:calc(8px * var(--s));margin-top:calc(22px * var(--s))}
/* области применения — нейтральные плашки, чтобы не путались
   с цветной меткой направления над заголовком */
.tc-item__areas .tc-kind{background:var(--grey);color:var(--ink)}
.tc-item__more{
  display:inline-flex;align-items:center;gap:calc(10px * var(--s));
  /* 2px запаса справа: дробная ширина текста округляется вниз у
     контентного бокса и вверх у содержимого — стрелка подрезалась */
  margin-top:calc(26px * var(--s));padding-right:calc(3px * var(--s));
  font-weight:600;font-size:calc(19px * var(--s));color:var(--blue);
  text-decoration:underline;text-underline-position:from-font;
}
.tc-item__more::after{
  content:"";flex:none;width:calc(9px * var(--s));height:calc(9px * var(--s));
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s ease;
}
.tc-item__more:hover::after{transform:rotate(-45deg) translate(2px,2px)}

/* --------------------------------------------------------------------------
   3. Области применения
   -------------------------------------------------------------------------- */
.tc-areas{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(32px * var(--s));margin-top:calc(48px * var(--s))}
.tc-area{
  padding:calc(34px * var(--s)) calc(32px * var(--s)) calc(36px * var(--s));
  background:#fff;border:1px solid var(--line);border-radius:var(--card-r);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.tc-area:hover{border-color:transparent;box-shadow:var(--card-sh)}
.tc-area__ico{width:calc(52px * var(--s));height:calc(52px * var(--s));object-fit:contain}
.tc-area__t{margin-top:calc(20px * var(--s));font-weight:600;font-size:calc(22px * var(--s));line-height:1.3;color:#2F3142}
.tc-area .ab-rule{margin:calc(14px * var(--s)) 0}
.tc-area__d{font-size:calc(18px * var(--s));line-height:1.55}

/* --------------------------------------------------------------------------
   4. Страница технологии: описание
   -------------------------------------------------------------------------- */
.tc-desc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,720px);
  gap:calc(70px * var(--s));margin-top:calc(48px * var(--s));align-items:start;
}
.tc-desc__text p{font-size:calc(20px * var(--s));line-height:1.6}
.tc-desc__text p + p{margin-top:calc(18px * var(--s))}
.tc-desc__photo{width:100%;height:calc(430px * var(--s));object-fit:cover;border-radius:var(--card-r)}

/* назначение: два списка рядом */
.tc-purpose{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(32px * var(--s));margin-top:calc(48px * var(--s))}
.tc-purpose__box{
  padding:calc(36px * var(--s)) calc(34px * var(--s)) calc(38px * var(--s));
  border-radius:var(--card-r);
}
.tc-purpose__box--base{background:var(--warm)}
.tc-purpose__box--prot{background:#F3F6F8}
.tc-purpose__t{font-weight:600;font-size:calc(24px * var(--s));line-height:1.3;color:#2F3142}
.tc-purpose__box .ab-rule{margin:calc(16px * var(--s)) 0 calc(20px * var(--s))}
.tc-purpose__box li{position:relative;padding-left:calc(30px * var(--s));font-size:calc(19px * var(--s));line-height:1.55}
.tc-purpose__box li + li{margin-top:calc(12px * var(--s))}
.tc-purpose__box li::before{
  content:"";position:absolute;left:0;top:calc(8px * var(--s));
  width:calc(16px * var(--s));height:calc(10px * var(--s));
  border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(-45deg);
}

/* --------------------------------------------------------------------------
   5. Преимущества
   -------------------------------------------------------------------------- */
.tc-adv{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(32px * var(--s));margin-top:calc(48px * var(--s))}
.tc-adv__item{
  display:flex;flex-direction:column;
  padding:calc(34px * var(--s)) calc(30px * var(--s)) calc(36px * var(--s));
  background:#fff;border-radius:var(--card-r);box-shadow:var(--card-sh);
}
.tc-adv__n{
  display:flex;align-items:baseline;gap:calc(4px * var(--s));
  font-weight:900;font-size:calc(50px * var(--s));line-height:1;color:var(--blue);
}
.tc-adv__n i{font-style:normal;font-size:calc(24px * var(--s));color:var(--orange)}
.tc-adv__t{margin-top:calc(16px * var(--s));font-weight:600;font-size:calc(21px * var(--s));line-height:1.3;color:#2F3142}
.tc-adv__item .ab-rule{margin:calc(14px * var(--s)) 0}
.tc-adv__d{font-size:calc(17px * var(--s));line-height:1.55;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   6. Технологический процесс
   -------------------------------------------------------------------------- */
.tc-proc{margin-top:calc(48px * var(--s));display:grid;gap:calc(20px * var(--s))}
.tc-step{
  position:relative;display:grid;
  grid-template-columns:calc(110px * var(--s)) 1fr calc(300px * var(--s));
  gap:calc(36px * var(--s));align-items:center;
  padding:calc(30px * var(--s)) calc(34px * var(--s));
  background:#fff;border-radius:var(--card-r);box-shadow:var(--card-sh);
}
.tc-step__n{
  display:flex;align-items:center;justify-content:center;
  width:calc(72px * var(--s));height:calc(72px * var(--s));border-radius:50%;
  background:var(--blue);color:#fff;font-weight:900;font-size:calc(26px * var(--s));
}
.tc-step__t{font-weight:600;font-size:calc(24px * var(--s));line-height:1.3;color:#2F3142}
.tc-step__d{margin-top:calc(10px * var(--s));font-size:calc(18px * var(--s));line-height:1.55}
.tc-step__meta{
  justify-self:end;text-align:right;
  font-size:calc(17px * var(--s));line-height:1.45;color:var(--ink-2);
}
.tc-step__meta b{display:block;font-weight:600;font-size:calc(19px * var(--s));color:#2F3142}

/* --------------------------------------------------------------------------
   7. Материалы и оборудование
   -------------------------------------------------------------------------- */
.tc-ml{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(32px * var(--s));margin-top:calc(48px * var(--s))}
.tc-ml__box{
  padding:calc(36px * var(--s)) calc(34px * var(--s)) calc(38px * var(--s));
  background:#fff;border:1px solid var(--line);border-radius:var(--card-r);
}
.tc-ml__t{font-weight:600;font-size:calc(24px * var(--s));line-height:1.3;color:#2F3142}
.tc-ml__box .ab-rule{margin:calc(16px * var(--s)) 0 calc(6px * var(--s))}
.tc-ml__list div{
  display:grid;grid-template-columns:calc(280px * var(--s)) 1fr;gap:calc(20px * var(--s));
  padding:calc(14px * var(--s)) 0;border-bottom:1px solid var(--line);
  font-size:calc(18px * var(--s));line-height:1.5;
}
.tc-ml__list div:last-child{border-bottom:0}
.tc-ml__list b{font-weight:600;color:#2F3142}
.tc-ml__list span{color:var(--ink)}

/* --------------------------------------------------------------------------
   8. Требования и ограничения
   -------------------------------------------------------------------------- */
.tc-lim{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(32px * var(--s));margin-top:calc(48px * var(--s));align-items:start}
.tc-lim__table{background:#fff;border-radius:var(--card-r);box-shadow:var(--card-sh);overflow:hidden}
.tc-lim__table div{
  display:grid;grid-template-columns:1fr calc(310px * var(--s));gap:calc(20px * var(--s));
  padding:calc(18px * var(--s)) calc(30px * var(--s));
  border-top:1px solid var(--line);
  font-size:calc(18px * var(--s));line-height:1.45;
}
.tc-lim__table div:first-child{border-top:0}
.tc-lim__table dt{color:var(--ink-2)}
.tc-lim__table dd{margin:0;font-weight:600;color:#2F3142;text-align:right}
.tc-note{
  padding:calc(30px * var(--s)) calc(32px * var(--s));
  border-left:calc(4px * var(--s)) solid var(--orange);
  background:var(--warm);border-radius:0 var(--card-r) var(--card-r) 0;
}
.tc-note b{display:block;font-weight:600;font-size:calc(20px * var(--s));color:#2F3142;margin-bottom:calc(12px * var(--s))}
.tc-note li{position:relative;padding-left:calc(22px * var(--s));font-size:calc(18px * var(--s));line-height:1.6}
.tc-note li + li{margin-top:calc(10px * var(--s))}
.tc-note li::before{
  content:"";position:absolute;left:0;top:calc(11px * var(--s));
  width:calc(6px * var(--s));height:calc(6px * var(--s));border-radius:50%;background:var(--orange);
}

/* --------------------------------------------------------------------------
   9. Связанные услуги
   -------------------------------------------------------------------------- */
.tc-serv{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(32px * var(--s));margin-top:calc(48px * var(--s))}
.tc-serv__item{
  display:flex;flex-direction:column;
  padding:calc(34px * var(--s)) calc(32px * var(--s)) calc(36px * var(--s));
  background:#fff;border:1px solid var(--line);border-radius:var(--card-r);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.tc-serv__item:hover{border-color:transparent;box-shadow:var(--card-sh)}
.tc-serv__ico{width:calc(52px * var(--s));height:calc(52px * var(--s));object-fit:contain}
.tc-serv__t{margin-top:calc(18px * var(--s));font-weight:600;font-size:calc(22px * var(--s));line-height:1.3;color:#2F3142}
.tc-serv__item .ab-rule{margin:calc(14px * var(--s)) 0}
.tc-serv__d{font-size:calc(18px * var(--s));line-height:1.55;flex:1 1 auto}
.tc-serv__more{
  margin-top:calc(20px * var(--s));font-weight:600;font-size:calc(17px * var(--s));
  color:var(--blue);text-decoration:underline;text-underline-position:from-font;
}

/* --------------------------------------------------------------------------
   10. Примеры объектов — карточки те же, что на «Объектах»
   -------------------------------------------------------------------------- */
.tc-objs{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(32px * var(--s));margin-top:calc(48px * var(--s))}

.page-techs .sec-form,
.page-tech .sec-form{padding-top:var(--sec-pad);scroll-margin-top:calc(96px * var(--s))}


/* ==========================================================================
   АДАПТИВ. Полосы: 1659 / 1279 / 959 / 567.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1280–1659
   -------------------------------------------------------------------------- */
@media (max-width:1659px){

  .page-techs,.page-tech{--sec-pad:var(--sect);--card-r:var(--r)}
  .tc-kind{padding:6px 12px;font-size:13px;border-radius:8px}

  .tc-intro{grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:40px;margin-top:36px}
  .tc-intro__text p{font-size:var(--fs-body)}
  .tc-intro__text p + p{margin-top:14px}
  .tc-facts{padding:26px 24px 28px}
  .tc-facts div{padding:12px 0;font-size:var(--fs-cap)}

  .tc-list{gap:var(--gap);margin-top:36px}
  .tc-item{grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:32px;padding:24px}
  .tc-item__media{border-radius:12px}
  .tc-item__media img{height:260px}
  .tc-item__n{width:46px;height:46px;left:14px;top:14px;font-size:18px}
  .tc-item__t{margin-top:12px;font-size:var(--fs-h2)}
  .tc-item__body .ab-rule{margin:14px 0}
  .tc-item__d{font-size:var(--fs-cap)}
  .tc-item__areas{gap:6px;margin-top:16px}
  .tc-item__more{margin-top:20px;font-size:var(--fs-cap);gap:8px}

  .tc-areas{gap:var(--gap);margin-top:36px}
  .tc-area{padding:26px 24px 28px}
  .tc-area__ico{width:44px;height:44px}
  .tc-area__t{margin-top:16px;font-size:var(--fs-h3)}
  .tc-area .ab-rule{margin:12px 0}
  .tc-area__d{font-size:var(--fs-cap)}

  .tc-desc{grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:40px;margin-top:36px}
  .tc-desc__text p{font-size:var(--fs-body)}
  .tc-desc__text p + p{margin-top:14px}
  .tc-desc__photo{height:auto;aspect-ratio:16/10}

  .tc-purpose{gap:var(--gap);margin-top:36px}
  .tc-purpose__box{padding:26px 24px 28px}
  .tc-purpose__t{font-size:var(--fs-h3)}
  .tc-purpose__box .ab-rule{margin:12px 0 16px}
  .tc-purpose__box li{padding-left:26px;font-size:var(--fs-cap)}
  .tc-purpose__box li + li{margin-top:10px}
  .tc-purpose__box li::before{top:5px;width:14px;height:9px}

  .tc-adv{gap:var(--gap);margin-top:36px}
  .tc-adv__item{padding:26px 22px 28px}
  .tc-adv__n{font-size:var(--fs-num)}
  .tc-adv__n i{font-size:18px}
  .tc-adv__t{margin-top:12px;font-size:var(--fs-body)}
  .tc-adv__item .ab-rule{margin:12px 0}
  .tc-adv__d{font-size:var(--fs-cap)}

  .tc-proc{gap:14px;margin-top:36px}
  .tc-step{grid-template-columns:80px 1fr 230px;gap:24px;padding:22px 24px}
  .tc-step__n{width:56px;height:56px;font-size:20px}
  .tc-step__t{font-size:var(--fs-h3)}
  .tc-step__d{margin-top:8px;font-size:var(--fs-cap)}
  .tc-step__meta{font-size:13px}
  .tc-step__meta b{font-size:var(--fs-cap)}

  .tc-ml{gap:var(--gap);margin-top:36px}
  .tc-ml__box{padding:26px 24px 28px}
  .tc-ml__t{font-size:var(--fs-h3)}
  .tc-ml__box .ab-rule{margin:12px 0 4px}
  .tc-ml__list div{grid-template-columns:190px 1fr;gap:14px;padding:11px 0;font-size:var(--fs-cap)}

  .tc-lim{gap:var(--gap);margin-top:36px}
  .tc-lim__table div{grid-template-columns:1fr 210px;gap:14px;padding:14px 22px;font-size:var(--fs-cap)}
  .tc-note{padding:22px 24px;border-left-width:4px}
  .tc-note b{font-size:var(--fs-body);margin-bottom:10px}
  .tc-note li{padding-left:18px;font-size:var(--fs-cap)}
  .tc-note li::before{top:8px;width:5px;height:5px}

  .tc-serv{gap:var(--gap);margin-top:36px}
  .tc-serv__item{padding:26px 24px 28px}
  .tc-serv__ico{width:44px;height:44px}
  .tc-serv__t{margin-top:16px;font-size:var(--fs-h3)}
  .tc-serv__item .ab-rule{margin:12px 0}
  .tc-serv__d{font-size:var(--fs-cap)}
  .tc-serv__more{margin-top:16px;font-size:var(--fs-cap)}

  .tc-objs{gap:var(--gap);margin-top:36px}
}

/* --------------------------------------------------------------------------
   960–1279
   -------------------------------------------------------------------------- */
@media (max-width:1279px){

  .ab-sec{scroll-margin-top:96px}
  .page-techs .sec-form,.page-tech .sec-form{scroll-margin-top:96px}

  .tc-intro{grid-template-columns:1fr;gap:28px}
  .tc-areas{grid-template-columns:repeat(3,1fr)}
  .tc-desc{grid-template-columns:1fr;gap:28px}
  .tc-adv{grid-template-columns:repeat(2,1fr)}
  .tc-serv{grid-template-columns:repeat(3,1fr)}
  .tc-objs{grid-template-columns:repeat(3,1fr)}

  /* в шаге исчезает третья колонка — метаданные уходят под текст */
  .tc-step{grid-template-columns:80px 1fr}
  .tc-step__meta{grid-column:2;justify-self:start;text-align:left;margin-top:10px}

  .tc-lim{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   568–959
   -------------------------------------------------------------------------- */
@media (max-width:959px){

  .ab-sec{scroll-margin-top:72px}
  .page-techs .sec-form,.page-tech .sec-form{scroll-margin-top:72px}

  .tc-list{margin-top:26px}
  /* фото над текстом: две колонки в 560px уже нечитаемы */
  .tc-item{grid-template-columns:1fr;gap:20px;padding:18px}
  .tc-item:nth-child(even) .tc-item__media{order:0}
  .tc-item__media img{height:220px}

  .tc-areas{grid-template-columns:repeat(2,1fr);margin-top:26px}
  .tc-purpose{grid-template-columns:1fr;margin-top:26px}
  .tc-adv{margin-top:26px}
  .tc-ml{grid-template-columns:1fr;margin-top:26px}
  .tc-ml__list div{grid-template-columns:1fr;gap:2px}
  .tc-serv{grid-template-columns:1fr;margin-top:26px}
  .tc-objs{grid-template-columns:1fr;margin-top:26px}

  .tc-proc{margin-top:26px}
  .tc-step{grid-template-columns:56px 1fr;gap:18px;padding:18px 20px;align-items:start}
  .tc-step__n{width:44px;height:44px;font-size:17px}
  .tc-lim__table div{grid-template-columns:1fr;gap:4px;padding:14px 18px}
  .tc-lim__table dd{text-align:left}
}

/* --------------------------------------------------------------------------
   320–567
   -------------------------------------------------------------------------- */
@media (max-width:567px){

  .tc-areas{grid-template-columns:1fr}
  .tc-adv{grid-template-columns:1fr}
  .tc-facts{padding:18px 18px 20px}
  .tc-facts div{flex-direction:column;gap:2px;align-items:flex-start}
  .tc-facts b{text-align:left}
  .tc-item{padding:14px}
  .tc-item__media img{height:190px}
  .tc-purpose__box{padding:20px 18px 22px}
  .tc-ml__box{padding:20px 18px 22px}
  .tc-note{padding:18px 18px 18px 16px}
  .tc-step{grid-template-columns:1fr;gap:12px}
  .tc-step__meta{grid-column:1}
}