/* ==========================================================================
   ГЕОПИР — страница «Все услуги»
   Десктоп собран по координатам Figma (фрейм 2855:569, 1920×11003).
   Все размеры умножаются на --s, поэтому 1680 = 1920 × 0.88372.
   ========================================================================== */

:root{
  --rule:#F5BE91;      /* тонкая линия под заголовками карточек */
  --ink:#555;
  --ink-soft:#888;
}

/* Контейнер секции, от которого считаются абсолютные координаты */
.sec-svc > .container,
.sec-why2 > .container,
.sec-objs > .container,
.turnkey__stage{position:relative;height:100%}

/* --------------------------------------------------------------------------
   1. Первый экран (без плашки и промо — только заголовок, видео и бейдж)
   -------------------------------------------------------------------------- */
.svc-hero .hero__title{top:calc(285.84px * var(--s))}
.svc-hero .hero__badge{top:calc(642px * var(--s))}

/* Шапка на этой странице — сплошная #F7F7F7 без блюра (так в макете) */
.page-services .header__inner{
  background:#F7F7F7;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#F7F7F7;
}

/* --------------------------------------------------------------------------
   2. Хлебные крошки
   -------------------------------------------------------------------------- */
.crumbs{
  position:absolute;left:0;top:calc(35.37px * var(--s));
  display:flex;align-items:center;gap:calc(12px * var(--s));
  font-weight:400;font-size:calc(14px * var(--s));line-height:1.4;
}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--blue)}
.crumbs span{color:#2F3142}
.crumbs i{
  width:calc(4px * var(--s));height:calc(8px * var(--s));flex:none;
  background:var(--ink-soft);
  clip-path:polygon(0 0,100% 50%,0 100%,0 78%,55% 50%,0 22%);
}

/* --------------------------------------------------------------------------
   3. Наши услуги
   -------------------------------------------------------------------------- */
/* Запас снизу равен заезду секции «под ключ» (её margin-top:-200px):
   фото уходит под пустое поле, а не под текст направления, плюс 60px воздуха. */
.sec-svc{position:relative;z-index:1;padding-bottom:calc(260px * var(--s))}

.svc-eyebrow{position:absolute;left:calc(1px * var(--s));top:calc(194.38px * var(--s))}
.svc-h2{position:absolute;left:calc(1px * var(--s));top:calc(222.46px * var(--s));white-space:nowrap}
.svc-lead{
  position:absolute;left:calc(1px * var(--s));top:calc(298.38px * var(--s));width:calc(1177px * var(--s));
  font-weight:400;font-size:calc(20px * var(--s));line-height:1.4;color:var(--ink);
}


/* --------------------------------------------------------------------------
   4. «Под ключ» — фото на всю ширину, поверх плитки
   -------------------------------------------------------------------------- */
.sec-turnkey{
  position:relative;z-index:0;
  margin-top:calc(-200px * var(--s));height:calc(1030px * var(--s));
}
.turnkey__photo{
  position:absolute;left:0;top:0;width:100%;height:calc(865px * var(--s));object-fit:cover;
}
.turnkey__h2{
  position:absolute;left:0;top:calc(350px * var(--s));width:calc(1215px * var(--s));
  font-family:'Inter','Roboto',system-ui,sans-serif;
  font-weight:700;font-size:calc(50px * var(--s));line-height:normal;
  color:#fff;text-transform:uppercase;
}

.turnkey__tiles{
  position:absolute;left:calc(543px * var(--s));top:calc(573px * var(--s));
  display:flex;height:calc(457px * var(--s));
}
.tile{position:relative;height:100%;flex:none;overflow:hidden}
.tile--blue{width:calc(393px * var(--s));background:rgba(19,134,200,.9)}
.tile--dark{width:calc(393px * var(--s));background:rgba(0,0,0,.74)}
.tile--orange{width:calc(391px * var(--s));background:rgba(235,126,35,.88)}

.tile__arc{position:absolute;top:calc(54px * var(--s))}
.tile--blue .tile__arc,
.tile--dark .tile__arc{left:calc(37px * var(--s));width:calc(97.1px * var(--s));height:calc(125.3px * var(--s))}
.tile--orange .tile__arc{left:calc(40px * var(--s));width:calc(122.7px * var(--s));height:calc(134px * var(--s))}

.tile__ico{position:absolute}
.tile--blue .tile__ico{left:calc(89px * var(--s));top:calc(97px * var(--s));width:calc(108px * var(--s));height:calc(106.6px * var(--s))}
.tile--dark .tile__ico{left:calc(90px * var(--s));top:calc(87px * var(--s));width:calc(134px * var(--s));height:calc(107px * var(--s))}
.tile--orange .tile__ico{left:calc(123px * var(--s));top:calc(89px * var(--s));width:calc(103px * var(--s));height:calc(105.1px * var(--s))}

.tile__title{
  position:absolute;left:calc(33px * var(--s));top:calc(255.07px * var(--s));width:calc(336px * var(--s));
  font-weight:500;font-size:calc(30px * var(--s));line-height:1.2;color:#fff;
}
.tile__body{
  position:absolute;left:calc(33px * var(--s));top:calc(307.84px * var(--s));width:calc(336px * var(--s));
  font-weight:500;font-size:calc(18px * var(--s));line-height:1.2;color:#fff;
}
.tile--orange .tile__title,
.tile--orange .tile__body{left:calc(40px * var(--s))}
.tile--orange .tile__body{top:calc(343.84px * var(--s))}

/* --------------------------------------------------------------------------
   5. Преимущества работы с компанией
   -------------------------------------------------------------------------- */
.sec-why2{position:relative;height:calc(904px * var(--s))}
.sec-why2 .svc-eyebrow{top:calc(143.38px * var(--s))}
.why2__h2{position:absolute;left:calc(1px * var(--s));top:calc(171.46px * var(--s));width:calc(853px * var(--s))}
.why2__lead{top:calc(247.38px * var(--s))}

.why2-grid{position:absolute;left:calc(1px * var(--s));top:calc(440px * var(--s));width:calc(1718px * var(--s));height:calc(464px * var(--s))}
.why2{
  position:absolute;top:0;width:calc(559px * var(--s));height:calc(440px * var(--s));
  background:#fff;border-radius:calc(40px * var(--s));
  box-shadow:0 calc(7px * var(--s)) calc(24px * var(--s)) rgba(0,0,0,.09);
}
.why2-grid .why2:nth-child(1){left:0}
.why2-grid .why2:nth-child(2){left:calc(579px * var(--s))}
.why2-grid .why2:nth-child(3){left:calc(1159px * var(--s))}

.why2__circle{
  position:absolute;left:calc(57px * var(--s));top:calc(44px * var(--s));
  width:calc(104px * var(--s));height:calc(104px * var(--s));border-radius:50%;background:#F7F7F7;
}
.why2__ico{position:absolute}
.why2__ico--1{left:calc(103px * var(--s));top:calc(70px * var(--s));width:calc(114.6px * var(--s));height:calc(73.5px * var(--s))}
.why2__ico--2{left:calc(94px * var(--s));top:calc(62px * var(--s));width:calc(98.1px * var(--s));height:calc(96.5px * var(--s))}
.why2__ico--3{left:calc(103px * var(--s));top:calc(61px * var(--s));width:calc(87.1px * var(--s));height:calc(94px * var(--s))}

.why2__title{
  position:absolute;left:calc(57px * var(--s));top:calc(176.86px * var(--s));width:calc(307px * var(--s));
  font-weight:700;font-size:calc(24px * var(--s));line-height:1;color:var(--ink);text-transform:uppercase;
}
.why2__rule{
  position:absolute;display:block;left:calc(57px * var(--s));top:calc(217px * var(--s));
  width:calc(62.5px * var(--s));height:1px;background:var(--rule);
}
.why2__body{
  position:absolute;left:calc(57px * var(--s));top:calc(252.38px * var(--s));
  font-weight:400;font-size:calc(20px * var(--s));line-height:1.2;color:var(--ink-soft);
}
.why2-grid .why2:nth-child(1) .why2__body{width:calc(325px * var(--s))}
.why2-grid .why2:nth-child(2) .why2__body,
.why2-grid .why2:nth-child(3) .why2__body{width:calc(457px * var(--s))}

.why2__mark{
  position:absolute;left:calc(490px * var(--s));top:calc(416px * var(--s));
  width:calc(27px * var(--s));height:calc(48px * var(--s));background:var(--orange);
}

/* --------------------------------------------------------------------------
   6. Выполненные объекты по направлениям
   -------------------------------------------------------------------------- */
.sec-objs{position:relative;height:calc(5108px * var(--s))}
.sec-objs .svc-eyebrow{top:calc(119.38px * var(--s))}
.objs__h2{position:absolute;left:calc(1px * var(--s));top:calc(147.46px * var(--s));width:calc(980px * var(--s))}
.objs__lead{top:calc(223.38px * var(--s))}

.objg{position:absolute;left:0;width:100%}
.objg--1{top:calc(393.94px * var(--s))}
.objg--2{top:calc(1933.94px * var(--s))}
.objg--3{top:calc(3473.94px * var(--s))}
.objg__title{
  position:relative;width:calc(696px * var(--s));
  font-weight:700;font-size:calc(31px * var(--s));line-height:1;color:var(--ink);text-transform:uppercase;
}
.objg__rule{
  position:relative;display:block;margin-top:calc(14px * var(--s));
  width:calc(62.5px * var(--s));height:1px;background:var(--rule);
}
.objg__body{
  position:relative;margin-top:calc(24px * var(--s));width:calc(696px * var(--s));
  font-weight:400;font-size:calc(20px * var(--s));line-height:1.2;color:var(--ink-soft);
}
.objg--3 .objg__body{width:calc(616px * var(--s))}
.objg__body b{font-weight:700;color:#333}

.objg__grid{
  position:relative;margin-top:calc(28px * var(--s));width:100%;height:calc(1340px * var(--s));
  display:grid;
  grid-template-columns:repeat(3, calc(560px * var(--s)));
  column-gap:calc(20px * var(--s));
  grid-template-rows:calc(430px * var(--s)) calc(30px * var(--s)) calc(430px * var(--s)) calc(20px * var(--s)) calc(430px * var(--s));
}
.om{width:100%;height:100%;object-fit:cover;border-radius:calc(20px * var(--s))}
.om--1{grid-column:1;grid-row:1 / 4}
.om--2{grid-column:2 / 4;grid-row:1}
.om--3{grid-column:2;grid-row:3}
.om--4{grid-column:3;grid-row:3 / 6}
.om--5{grid-column:1 / 3;grid-row:5}

/* ==========================================================================
   7. АДАПТИВ

   Важное правило этого файла: десктопные координаты заданы селекторами вида
   `.why2-grid .why2:nth-child(n)` (специфичность 0,2,0). Как только элемент
   в адаптиве становится relative, невыключённые left/top/right начинают
   работать как смещения в потоке. Поэтому ниже сначала идёт сброс
   селекторами той же специфичности, и только потом — новая геометрия
   (тоже с префиксом секции, чтобы не проиграть сбросу).
   ========================================================================== */
@media (max-width:1659px){

  /* --- сброс десктопной абсолютной раскладки --- */
  .sec-svc .svc-eyebrow,.sec-why2 .svc-eyebrow,.sec-objs .svc-eyebrow,
  .sec-svc .svc-h2,.sec-why2 .why2__h2,.sec-objs .objs__h2,
  .sec-svc .svc-lead,.sec-why2 .why2__lead,.sec-objs .objs__lead,
  .why2-grid .why2:nth-child(n),
  .sec-why2 .why2__title,.sec-why2 .why2__rule,.sec-why2 .why2__body,
  .sec-objs .objg__title,.sec-objs .objg__rule,.sec-objs .objg__body,
  .sec-objs .objg__grid{
    position:relative;inset:auto;width:auto;height:auto;
  }
  .why2-grid .why2:nth-child(n) .why2__body{width:auto}

  /* --- первый экран: те же координаты, что у главной --- */
  .svc-hero .hero__title{top:250px;width:640px;font-size:var(--fs-h1)}
  .svc-hero .hero__badge{top:150px}

  /* --- крошки --- */
  .crumbs{position:static;margin-bottom:22px;font-size:var(--fs-cap);gap:10px}
  .crumbs i{width:4px;height:8px}

  /* --- общий поток секций --- */
  .sec-svc,.sec-why2,.sec-objs{height:auto;padding-top:var(--sect);padding-bottom:var(--sect)}
  .sec-svc{padding-top:32px}
  .sec-svc > .container,.sec-why2 > .container,
  .sec-objs > .container,.turnkey__stage{height:auto}

  .sec-svc .svc-eyebrow,.sec-why2 .svc-eyebrow,.sec-objs .svc-eyebrow{white-space:normal}
  .sec-svc .svc-h2,.sec-why2 .why2__h2,.sec-objs .objs__h2{
    margin-top:14px;font-size:var(--fs-h2);max-width:900px;white-space:normal}
  .sec-svc .svc-lead,.sec-why2 .why2__lead,.sec-objs .objs__lead{
    margin-top:16px;font-size:var(--fs-body);max-width:1000px}

  /* --- «под ключ» --- */
  .sec-turnkey{margin-top:0;height:auto;padding:0 0 var(--sect);background:transparent}
  .turnkey__photo{
    position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1920/865;
    object-fit:cover;display:block;filter:brightness(.52);
  }
  .turnkey__h2{
    position:absolute;left:0;right:0;top:auto;bottom:calc(100% + 34px);width:auto;
    font-size:var(--fs-h2);line-height:1.2;
  }
  .turnkey__tiles{
    position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;height:auto;
  }
  .tile{width:auto;height:auto;padding:26px 26px 32px}
  .tile--blue{width:auto;background:#1386C8}
  .tile--dark{width:auto;background:#232323}
  .tile--orange{width:auto;background:var(--orange)}

  .sec-turnkey .tile__arc{position:absolute;left:26px;top:26px;width:82px;height:106px;opacity:.9}
  .sec-turnkey .tile__ico{position:absolute;left:64px;top:60px;width:90px;height:90px;object-fit:contain}
  .sec-turnkey .tile__title{
    position:relative;inset:auto;width:auto;margin-top:170px;font-size:var(--fs-h3);line-height:1.2}
  .sec-turnkey .tile__body{
    position:relative;inset:auto;width:auto;margin-top:18px;font-size:var(--fs-cap)}

  /* --- преимущества --- */
  .why2-grid{
    position:static;width:auto;height:auto;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:44px;
  }
  .why2-grid .why2:nth-child(n){
    display:flex;flex-direction:column;padding:26px 26px 56px;border-radius:var(--r);
  }
  .sec-why2 .why2__circle{position:absolute;left:26px;top:26px;width:88px;height:88px}
  .sec-why2 .why2__ico{position:absolute;object-fit:contain}
  .sec-why2 .why2__ico--1{left:60px;top:44px;width:88px;height:56px}
  .sec-why2 .why2__ico--2{left:56px;top:38px;width:76px;height:75px}
  .sec-why2 .why2__ico--3{left:62px;top:38px;width:68px;height:74px}
  .sec-why2 .why2__title{margin-top:120px;font-size:var(--fs-h3);line-height:1.15}
  .sec-why2 .why2__rule{width:62.5px;height:1px;margin-top:14px;flex:none}
  .sec-why2 .why2__body{margin-top:18px;font-size:var(--fs-cap)}
  .sec-why2 .why2__mark{position:absolute;left:auto;right:26px;top:auto;bottom:0;width:22px;height:38px}

  /* --- объекты --- */
  .objg,.objg--1,.objg--2,.objg--3{position:relative;top:auto;margin-top:56px}
  .sec-objs .objg__title{font-size:var(--fs-h3);line-height:1.15}
  .sec-objs .objg__rule{width:62.5px;height:1px;margin-top:14px}
  .sec-objs .objg__body{margin-top:16px;font-size:var(--fs-cap);max-width:760px}
  .sec-objs .objg__grid{
    margin-top:26px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:auto;
    gap:var(--gap);
  }
  .om{border-radius:var(--r)}
  .om--1{grid-column:1;grid-row:1 / 3;aspect-ratio:560/890}
  .om--2{grid-column:2 / 4;grid-row:1;aspect-ratio:1140/430}
  .om--3{grid-column:2;grid-row:2;aspect-ratio:560/430}
  .om--4{grid-column:3;grid-row:2 / 4;aspect-ratio:560/880}
  .om--5{grid-column:1 / 3;grid-row:3;aspect-ratio:1140/430}
}

/* --------------------------------------------------------------------------
   1280 и уже
   -------------------------------------------------------------------------- */
@media (max-width:1279px){
  .svc-hero .hero__title{top:auto;width:auto}
  .svc-hero .hero__badge{top:120px}
  /* на внутренних нет промо-карточки и .hero-spacer, поэтому поток первого
     экрана короче абсолютного фото — задаём высоту явно */
  .svc-hero{min-height:calc(var(--hero-h) + 88px)}

  .tile{padding:22px 22px 28px}
  .sec-turnkey .tile__arc{width:70px;height:90px}
  .sec-turnkey .tile__ico{left:56px;top:52px;width:78px;height:78px}
  .sec-turnkey .tile__title{margin-top:148px}

  .why2-grid .why2:nth-child(n){padding:22px 22px 52px}
  .sec-why2 .why2__title{margin-top:112px}
}

/* --------------------------------------------------------------------------
   960 и уже
   -------------------------------------------------------------------------- */
@media (max-width:959px){
  .svc-hero{min-height:calc(var(--hero-h) + 64px)}

  .turnkey__h2{position:static;bottom:auto;margin-top:26px}
  .sec-turnkey{padding-top:0}
  .turnkey__tiles{grid-template-columns:1fr;margin-top:26px}
  .tile{padding:24px 24px 28px}
  .sec-turnkey .tile__arc{left:24px;top:24px}
  .sec-turnkey .tile__ico{left:54px;top:50px}
  .sec-turnkey .tile__title{margin-top:140px}

  .why2-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px}
  .why2-grid .why2:nth-child(3){grid-column:span 2}

  .sec-objs .objg__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .om--1{grid-column:1;grid-row:1;aspect-ratio:560/430}
  .om--2{grid-column:2;grid-row:1;aspect-ratio:560/430}
  .om--3{grid-column:1;grid-row:2;aspect-ratio:560/430}
  .om--4{grid-column:2;grid-row:2;aspect-ratio:560/430}
  .om--5{grid-column:1 / 3;grid-row:3;aspect-ratio:1140/430}
}

/* --------------------------------------------------------------------------
   568 и уже — всё в один столбец
   -------------------------------------------------------------------------- */
@media (max-width:567px){
  .sec-svc{padding-top:24px}
  .crumbs{margin-bottom:18px}

  .svc-hero{min-height:calc(var(--hero-h) + 56px)}

  .tile{padding:20px 20px 24px}
  .sec-turnkey .tile__arc{left:20px;top:20px;width:60px;height:78px}
  .sec-turnkey .tile__ico{left:44px;top:42px;width:66px;height:66px}
  .sec-turnkey .tile__title{margin-top:118px}

  .why2-grid{grid-template-columns:1fr;margin-top:26px}
  .why2-grid .why2:nth-child(3){grid-column:span 1}
  .why2-grid .why2:nth-child(n){padding:20px 20px 48px}
  .sec-why2 .why2__circle{left:20px;top:20px;width:76px;height:76px}
  .sec-why2 .why2__ico--1{left:48px;top:34px;width:76px;height:48px}
  .sec-why2 .why2__ico--2{left:44px;top:30px;width:64px;height:63px}
  .sec-why2 .why2__ico--3{left:50px;top:30px;width:58px;height:63px}
  .sec-why2 .why2__title{margin-top:100px}

  .objg{margin-top:40px}
  .sec-objs .objg__grid{grid-template-columns:1fr;margin-top:20px}
  .om--1,.om--2,.om--3,.om--4,.om--5{grid-column:1;grid-row:auto;aspect-ratio:16/10}
}

/* --------------------------------------------------------------------------
   Первый экран на внутренних страницах ниже 1280.
   На главной синий промо-блок намеренно свисает ниже фото — на внутренних
   так быть не должно: фото тянется до низа секции (top задан, bottom:0),
   поэтому контент физически не может выйти за первый экран.
   -------------------------------------------------------------------------- */
@media (max-width:1279px){
  .svc-hero{min-height:calc(var(--hero-h) + 88px)}
  .svc-hero .hero__photo{height:calc(100% - 88px);bottom:0}
  .svc-hero .hero__stage{padding-bottom:110px}
}
@media (max-width:959px){
  .svc-hero{min-height:calc(var(--hero-h) + 64px)}
  .svc-hero .hero__photo{height:calc(100% - 64px)}
  .svc-hero .hero__stage{padding-bottom:80px}
}
@media (max-width:567px){
  .svc-hero{min-height:calc(var(--hero-h) + 56px)}
  .svc-hero .hero__photo{height:calc(100% - 56px)}
  .svc-hero .hero__stage{padding-bottom:60px}
}