/* ===== Страница «Услуги» ZaxJet — scoped styles =====
   Всё под .svc, токены сайта (main.css :root). 1rem = 10px.
   Загружается ТОЛЬКО на этой странице (link внутри блока 13_services.tpl). */

.svc { --svc-dark:var(--black,#101012); --svc-accent:var(--blue,#4074D4);
       --svc-ink:var(--text-color,#212529); --svc-muted:#6b6f76;
       --svc-line:#e6e7e9; --svc-hero-overlap:8rem; color:var(--svc-ink); }
.svc section { position:relative; }
.svc img { max-width:100%; }
.svc ._light { color:#fff; }

/* строгие прямоугольные кнопки как в исходнике, но на токенах сайта */
.svc .btn { padding:1.5rem 3.4rem; font-size:1.6rem; font-weight:600; border:.1rem solid transparent; }
.svc .btn._primary { background:var(--svc-dark); color:#fff; }
.svc .btn._primary:hover { background:#000; }
.svc .btn._light { background:#fff; color:var(--svc-dark); }
.svc .btn._light:hover { background:#e9e9ec; }

/* ---------- HERO ---------- */
.svc-hero { background:var(--svc-dark); color:#fff; }
.svc-hero__inner { padding-top:7rem; }
.svc-hero__title { font-size:clamp(3rem,4.6vw,5.6rem); font-weight:700; line-height:1.12; margin:0; max-width:96rem; color:#fff; }
.svc-hero__sub { font-size:clamp(1.6rem,1.7vw,2.1rem); color:rgba(255,255,255,.78); margin:2.4rem 0 0; max-width:78rem; line-height:1.5; }
/* картинка «вылезает» за пределы тёмного hero в следующую секцию (как в оригинале) */
.svc-hero__media { padding:4.4rem 0 0; position:relative; z-index:1; margin-bottom:calc(-1 * var(--svc-hero-overlap)); }
.svc-hero__media img { width:100%; height:auto; }

/* ---------- Общий заголовок секции ---------- */
.svc-section { background:#fff; }
.svc-section._pad { padding:7rem 0; }
/* компенсируем нахлёст hero-картинки увеличенным верхним padding у след. секции */
.svc-hero + .svc-section._pad { padding-top: calc(7rem + var(--svc-hero-overlap)); }
.svc-title { font-size:clamp(2.6rem,4vw,4.6rem); font-weight:800; line-height:1.05; margin:0 0 3rem; }
.svc-lead { max-width:92rem; display:flex; flex-direction:column; gap:1.8rem; font-size:1.7rem; line-height:1.62; color:#26261f; }
.svc-lead p { margin:0; }

/* ---------- Карточки услуг ---------- */
.svc-cards { background:#fff; padding-bottom:1rem; }
.svc-cards__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.2rem; }
.svc-card { position:relative; overflow:hidden; min-height:46rem; display:flex; flex-direction:column;
            justify-content:space-between; padding:3rem; }
.svc-card__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.svc-card:hover .svc-card__bg { transform:scale(1.07); }
.svc-card__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,16,18,.5),rgba(16,16,18,.86)); pointer-events:none; }
.svc-card__head { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:1.4rem; }
.svc-card__title { color:#fff; font-size:2.3rem; font-weight:700; margin:0; line-height:1.2; }
.svc-card__arrow { flex:none; margin-top:.4rem; }
.svc-card__text { position:relative; color:rgba(255,255,255,.92); font-size:1.5rem; line-height:1.5; margin:0; }

/* ---------- Полоса-CTA ---------- */
.svc-band { background:#fff; }
.svc-band__row { display:flex; align-items:center; justify-content:space-between; gap:2.4rem; flex-wrap:wrap; padding:5.6rem 0 0; }
.svc-band__title { font-size:clamp(2.6rem,3.4vw,4.2rem); font-weight:800; margin:0; }
.svc-band__line { height:.1rem; background:var(--svc-line); margin:4rem 0 0; }

/* ---------- «Мы» + фотосетка ---------- */
.svc-about { background:#fff; }
.svc-about__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(34rem,1fr)); gap:4.8rem; align-items:start; padding:4rem 0 7rem; }
.svc-about__text { font-size:1.6rem; line-height:1.65; color:#26261f; text-align:justify; display:flex; flex-direction:column; gap:1.6rem; }
.svc-about__text p { margin:0; }
.svc-about__text ul { margin:0; padding-left:2.2rem; display:flex; flex-direction:column; gap:.6rem; list-style:disc; }
.svc-about__photos { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.svc-about__photos a { display:block; line-height:0; overflow:hidden; cursor:pointer; background:#eee; }
.svc-about__photos img { width:100%; aspect-ratio:400/264; object-fit:cover; background:#eee; transition:transform .5s ease; }
.svc-about__photos a:hover img { transform:scale(1.06); }

/* ---------- Видео ---------- */
.svc-video { background:#fff; padding:5rem 0 0; }
.svc-video__title { text-align:center; font-size:clamp(2.4rem,3.1vw,4rem); font-weight:800; margin:0 0 2.8rem; line-height:1.1; }
.svc-video video { width:100%; max-height:74vh; background:#000; display:block; }

/* ---------- Таймлайн «Как работаем» ---------- */
.svc-steps { background:#fff; }
.svc-steps__inner { max-width:104rem; margin:0 auto; padding:5rem 0 7rem; }
.svc-steps__title { text-align:center; font-size:clamp(2.6rem,4vw,4.6rem); font-weight:800; margin:0 0 5rem; line-height:1.05; }
.svc-steps__mob { display:none; }
.svc-step { display:grid; grid-template-columns:minmax(0,1fr) 5.6rem minmax(0,1fr); align-items:stretch; min-height:11.8rem; }
.svc-step__side { display:flex; align-items:center; font-weight:700; font-size:1.7rem; line-height:1.4; }
.svc-step__side._l { justify-content:flex-end; text-align:right; padding-right:3rem; }
.svc-step__side._r { justify-content:flex-start; text-align:left; padding-left:3rem; }
.svc-step__axis { position:relative; display:flex; justify-content:center; }
.svc-step__axis::before { content:""; width:.2rem; height:100%; background:var(--svc-dark); }
.svc-step__num { position:absolute; top:50%; transform:translateY(-50%); width:4.6rem; height:4.6rem; border-radius:50%;
                 background:var(--svc-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.8rem; }
.svc-step:first-child .svc-step__axis::before { background:linear-gradient(to bottom,transparent 0,transparent 50%,var(--svc-dark) 50%); }
.svc-step:last-child .svc-step__axis::before { background:linear-gradient(to bottom,var(--svc-dark) 0,var(--svc-dark) 50%,transparent 50%); }
/* мобильный вертикальный вид таймлайна */
.svc-stepm { position:relative; display:grid; grid-template-columns:4.6rem 1fr; gap:1.8rem; align-items:start; min-height:8.4rem; }
.svc-stepm::before { content:""; position:absolute; left:2.2rem; top:0; bottom:0; width:.2rem; background:var(--svc-dark); }
.svc-stepm__num { position:relative; z-index:1; width:4.6rem; height:4.6rem; border-radius:50%; background:var(--svc-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.8rem; }
.svc-stepm__text { font-weight:700; font-size:1.6rem; line-height:1.45; padding:.6rem 0 2.6rem; }
.svc-stepm:first-child::before { top:2.3rem; }
.svc-stepm:last-child::before { bottom:calc(100% - 2.3rem); }

/* ---------- Телефон-CTA ---------- */
.svc-phone { background:#fff; text-align:center; padding:1.6rem 0 .8rem; }
.svc-phone__ico { width:5.6rem; height:5.6rem; margin:0 auto 1.6rem; display:block; }
.svc-phone__num { font-size:clamp(2.4rem,2.8vw,3.6rem); font-weight:800; color:var(--svc-dark); display:inline-block; margin:0 0 1rem; }
.svc-phone__num:hover { color:var(--svc-accent); }
.svc-phone__note { font-size:1.6rem; color:var(--svc-muted); margin:0 0 2.2rem; }
.svc-cta-center { background:#fff; text-align:center; padding:3.6rem 0 2rem; }

/* ---------- Технологии ---------- */
.svc-tech { background:#fff; }
.svc-tech__inner { max-width:104rem; margin:0 auto; padding:5.6rem 0 2.4rem; }
.svc-tech__title { text-align:center; font-size:clamp(2.6rem,4vw,4.6rem); font-weight:800; margin:0 0 4.4rem; line-height:1.02; }
.svc-tech__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:4rem 4.8rem; align-items:start; }
.svc-tech__item { display:grid; grid-template-columns:5.4rem 1fr; gap:2.2rem; align-items:start; }
.svc-tech__num { width:4.6rem; height:4.6rem; border-radius:50%; background:var(--svc-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.8rem; flex:none; }
.svc-tech__name { font-size:2.3rem; font-weight:700; margin:0 0 .9rem; line-height:1.2; }
.svc-tech__desc { font-size:1.6rem; line-height:1.6; color:#3a3a34; margin:0; }

/* ---------- Карусель «Мы производим» ---------- */
.svc-gallery { background:#fff; padding:6.4rem 0 8rem; }
.svc-gallery__title { font-size:clamp(2.6rem,4vw,4.6rem); font-weight:800; margin:0 0 3.6rem; line-height:1.02; }
.svc-gallery__viewport { position:relative; }
.svc-gallery__frame { position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:#ececec; }
.svc-gallery__track { display:flex; height:100%; transition:transform .45s ease; }
.svc-gallery__slide { flex:0 0 100%; width:100%; height:100%; }
.svc-gallery__slide img { width:100%; height:100%; object-fit:cover; display:block; }
.svc-gallery__nav { position:absolute; top:50%; transform:translateY(-50%); width:5.4rem; height:5.4rem; border-radius:50%;
                    border:none; background:rgba(255,255,255,.86); cursor:pointer; display:flex; align-items:center; justify-content:center;
                    box-shadow:0 .2rem 1.2rem rgba(0,0,0,.18); transition:background .2s; }
.svc-gallery__nav:hover { background:#fff; }
.svc-gallery__nav._prev { left:1.8rem; }
.svc-gallery__nav._next { right:1.8rem; }
.svc-gallery__bullets { display:flex; justify-content:center; gap:1rem; margin-top:2.4rem; }
.svc-gallery__bullet { width:1rem; height:1rem; border-radius:.6rem; border:none; padding:0; cursor:pointer; background:#c9c9c4; transition:all .3s ease; }
.svc-gallery__bullet._active { width:3rem; background:var(--svc-dark); }

/* ---------- Контакты + форма ---------- */
.svc-contacts { background:var(--svc-dark); color:#fff; }
.svc-contacts__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(32rem,1fr)); gap:4.8rem; align-items:center; padding:7rem 0; }
.svc-contacts__title { font-size:clamp(2.6rem,3.2vw,4.2rem); font-weight:700; line-height:1.22; margin:0 0 3rem; color:#fff; }
.svc-contacts__phone { display:inline-block; font-size:clamp(2.1rem,2.4vw,2.8rem); font-weight:600; color:#fff; }
.svc-contacts__phone:hover { color:var(--svc-accent); }
.svc-contacts__email { display:inline-block; margin-top:1.4rem; font-size:1.7rem; color:rgba(255,255,255,.82); }
.svc-contacts__email:hover { color:var(--svc-accent); }
.svc-contacts__socials { margin-top:2.6rem; }
.svc-contacts__tg { display:inline-flex; line-height:0; }
.svc-contacts__tg img { width:4.8rem; height:4.8rem; }
.svc-contacts__legal { margin-top:3.2rem; font-size:1.3rem; line-height:1.7; color:rgba(255,255,255,.6); }

.svc-formcard { background:#fff; color:var(--svc-ink); padding:3.8rem; }
.svc-formcard__title { font-size:2.6rem; font-weight:700; margin:0 0 2.2rem; }
.svc-form { display:flex; flex-direction:column; gap:1.4rem; }
.svc-form__input { border:.1rem solid #d8d8d4; padding:1.5rem 1.6rem; font-size:1.6rem; font-family:inherit; color:var(--svc-ink); outline:none; width:100%; }
.svc-form__input:focus { border-color:var(--svc-dark); }
.svc-form__check { display:flex; align-items:flex-start; gap:.9rem; font-size:1.3rem; color:var(--svc-muted); line-height:1.4; cursor:pointer; }
.svc-form__check input { margin-top:.2rem; }
.svc-form__error { color:#CC2626; font-size:1.3rem; }
.svc-form__submit { background:var(--svc-accent); color:#fff; border:none; padding:1.6rem; font-size:1.6rem; font-weight:600; cursor:pointer; font-family:inherit; margin-top:.4rem; transition:background .2s; }
.svc-form__submit:hover { background:#2f5cb0; }
.svc-form__success { padding:2rem 0; font-size:1.7rem; font-weight:600; color:#1f8a5b; line-height:1.5; }

/* ---------- Карта ---------- */
.svc-map { background:var(--svc-dark); }
.svc-map iframe { width:100%; height:42rem; border:0; display:block; }

/* ---------- Адаптив ---------- */
@media (max-width:980px){
  .svc-cards__grid { grid-template-columns:repeat(2,1fr); }
  .svc-steps__desk { display:none; }
  .svc-steps__mob { display:block; }
}
@media (max-width:700px){
  .svc-cards__grid { grid-template-columns:1fr; }
  .svc-about__photos { grid-template-columns:repeat(3,1fr); }
  .svc-band__row { padding-top:4rem; }
  .svc-tech__grid { grid-template-columns:1fr; }
  .svc { --svc-hero-overlap:4rem; }
}