/* Оформление сайта. Один файл на все страницы, пишется вручную. */

@font-face{font-family:'Onest';src:url('/assets/fonts/Onest-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Onest';src:url('/assets/fonts/Onest-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Onest';src:url('/assets/fonts/Onest-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Onest';src:url('/assets/fonts/Onest-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --red:#c72228;
  --red-dark:#a81b21;
  --ink:#000000;
  --ink-60:rgba(0,0,0,.62);
  --ink-muted:rgba(0,0,0,.56);   /* приглушённый текст: контраст 4,8 на кремовом, норма 4,5 */
  --line:rgba(0,0,0,.10);
  --cream:#fefcfa;
  --white:#ffffff;
  --head-h:96px;
  --r-card:14px;   /* карточки, фотографии, блоки с цифрами */
  --r-ui:10px;     /* кнопки, поля, метки */
}

.ip *,.ip *::before,.ip *::after{box-sizing:border-box}
.ip{
  font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.ip :where(img){max-width:100%;height:auto;display:block}  /* height:auto обязателен, иначе картинка сжимается по ширине */
.ip{overflow-wrap:break-word}  /* длинный адрес в тексте переносится, а не вылезает за край */
.ip :where(a){color:inherit}  /* нулевая важность: правила ниже задают цвет ссылок */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.ip-wrap{max-width:1248px;margin:0 auto;padding:0 24px}
.ip-section{padding:88px 0}
.ip-section--tight{padding:64px 0}
.ip-section--cream{background:var(--cream)}
.ip-section--white{background:var(--white)}
.ip-section[id]{scroll-margin-top:var(--head-h)}

.ip-eyebrow{
  font-size:16px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--red);margin:0 0 16px;
}
.ip-h2{
  font-size:clamp(26px,2.7vw,36px);line-height:1.23;font-weight:700;
  text-transform:uppercase;margin:0 0 18px;letter-spacing:normal;
}
.ip-lead{font-size:20px;font-weight:300;line-height:1.55;color:var(--ink);margin:0;max-width:820px}
.ip-head{margin-bottom:48px}

/* Кнопки */
.ip-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:inherit;font-size:16px;font-weight:600;letter-spacing:normal;text-transform:uppercase;
  line-height:1.4;padding:19px 46px;border-radius:var(--r-ui);border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;transition:background .18s,color .18s,border-color .18s;
}
.ip-btn--primary{background:var(--red);color:var(--white);border-color:var(--red)}
.ip-btn--primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.ip-btn--ghost{background:transparent;color:var(--ink);border-color:rgba(0,0,0,.25)}
.ip-btn--ghost:hover{border-color:var(--ink)}
.ip-btn[disabled]{opacity:.6;cursor:default}

/* Ссылки внутри текста и «страница в работе» */
.ip-link{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(199,34,40,.35)}
.ip-link:hover{border-bottom-color:var(--red)}
.ip-soon{color:var(--ink-muted);cursor:default}

/* Шапка */
.ip-header{
  position:sticky;top:0;z-index:50;background:var(--cream);
  border-bottom:1px solid var(--line);
}
.ip-header__in{display:flex;align-items:center;gap:28px;height:var(--head-h)}
.ip-logo{display:flex;align-items:center;flex:0 0 auto}
.ip-logo img{height:82px;width:auto}
.ip-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.ip-nav__item{position:relative}
.ip-nav__link{
  font-size:16px;font-weight:500;letter-spacing:normal;
  text-decoration:none;color:var(--ink);padding:10px 0;display:inline-block;
}
.ip-nav__link:hover{color:var(--red)}
.ip-nav__sub{
  position:absolute;top:100%;left:-18px;min-width:330px;background:var(--white);
  border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.09);
  padding:18px;display:none;border-radius:var(--r-card);
}
.ip-nav__item:hover .ip-nav__sub,.ip-nav__item:focus-within .ip-nav__sub{display:block}
.ip-nav__group+.ip-nav__group{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ip-nav__grouptitle{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 8px}
.ip-nav__sub a,.ip-nav__sub span{display:block;font-size:15px;padding:6px 0;text-decoration:none;line-height:1.35}
.ip-nav__sub a:hover{color:var(--red)}
.ip-header__actions{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.ip-header__actions .ip-btn{font-size:14px;padding:14px 26px}
.ip-icon{
  width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--white);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
}
.ip-icon:hover{background:var(--red)}
.ip-icon svg{width:17px;height:17px;fill:currentColor}
.ip-burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:10px}
.ip-burger span{display:block;height:2px;background:var(--ink);margin:5px 0;transition:.2s}

/* Первый экран */
.ip-hero{position:relative;background:var(--cream);overflow:hidden;min-height:86vh;display:flex;align-items:center}
.ip-hero > .ip-wrap{width:100%}
.ip-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center right}
/* заливка только под текстом, правее картинка видна целиком */
/* На прежнем сайте фотография шла без осветления. Оставляю лёгкую заливку
   слева под текстом: по замерам хватает 35%, чтобы чёрный текст читался
   даже на тёмных местах снимка. Дальше фотография идёт в полную силу. */
/* Заливка держится до 59% ширины — там, замеренно, кончаются буквы H1.
   Раньше она спадала раньше текста, и в нижней части первого экрана контраст
   падал до 2,0 при норме 4,5. Слева плотность не меняли, справа уводим в ноль. */
.ip-hero__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(254,252,250,.46) 0%,rgba(254,252,250,.44) 59%,rgba(254,252,250,.08) 72%,rgba(254,252,250,0) 100%)}
.ip-hero__in{position:relative;padding:96px 0 100px;max-width:760px}
.ip-hero__over{font-size:16px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--red);margin:0 0 18px}
.ip-hero h1{font-size:clamp(32px,3.9vw,52px);line-height:1.23;font-weight:700;margin:0 0 24px;letter-spacing:1px}
.ip-hero__text{font-size:22px;font-weight:300;line-height:1.55;color:var(--ink);margin:0 0 36px;max-width:680px}
.ip-hero__btns{display:flex;flex-wrap:wrap;gap:14px}
/* Колонка текста не должна заходить правее 59% ширины экрана — там кончается
   заливка. На ноутбуках и планшетах 760px оказывались шире этой отметки,
   и нижние строки уходили на неосветлённую часть снимка. */
@media (min-width:761px){
  .ip-hero__in{max-width:min(760px, 59vw - 24px, 9vw + 600px)}
}

/* Бегущая строка */
.ip-ticker{background:var(--ink);color:var(--white);overflow:hidden;padding:19px 0}
.ip-ticker__row{display:flex;align-items:center;white-space:nowrap;animation:ip-ticker 38s linear infinite;width:max-content}
.ip-ticker span{font-size:20px;font-weight:300;line-height:1.55;letter-spacing:normal;text-transform:uppercase}
/* пара «надпись + точка»: у точки одинаковый отступ слева и справа,
   поэтому она стоит ровно между соседними надписями */
.ip-ticker__pair{display:inline-flex;align-items:center}
.ip-ticker__dot{margin:0 20px;color:rgba(255,255,255,.55);font-size:18px}
@keyframes ip-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ip-ticker__row{animation:none}}

/* Карточки услуг */
.ip-grid{display:grid;gap:26px}
.ip-grid--3{grid-template-columns:repeat(3,1fr)}
.ip-grid--4{grid-template-columns:repeat(4,1fr)}
.ip-card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;height:100%;border-radius:var(--r-card);overflow:hidden}
.ip-card__img{aspect-ratio:4/3;overflow:hidden;background:#eee}
.ip-card__img img{width:100%;height:100%;object-fit:cover}
.ip-card__body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.ip-card__num{font-size:14px;font-weight:600;color:var(--red);letter-spacing:normal}
.ip-card h3{font-size:22px;font-weight:600;margin:0;text-transform:uppercase;line-height:1.35}
.ip-card p{margin:0;font-size:18px;font-weight:300;line-height:1.55;color:var(--ink)}
.ip-card__links{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:6px}
.ip-card__links a,.ip-card__links span{font-size:18px;font-weight:500;text-decoration:none}
.ip-card__links a{color:var(--red)}
.ip-card__links a:hover{text-decoration:underline}

/* География */
.ip-geo{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
.ip-geo__cell{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);display:flex;flex-direction:column;text-decoration:none;overflow:hidden;transition:border-color .2s}
a.ip-geo__cell:hover{border-color:var(--red)}
.ip-geo__img{aspect-ratio:3/2;overflow:hidden;background:#eee}
.ip-geo__img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ip-geo__text{padding:24px;display:flex;flex-direction:column;gap:8px}
a.ip-geo__cell:hover .ip-geo__img img{transform:scale(1.04)}
.ip-geo__cell h3{margin:0;font-size:20px;font-weight:700;text-transform:uppercase;line-height:1.35}
.ip-geo__cell p{margin:0;font-size:16px;font-weight:300;line-height:1.55;color:var(--ink)}
a.ip-geo__cell:hover h3{color:var(--red)}

/* Список «когда нужна помощь» */
.ip-two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
/* выделенное начало пункта («Получаем документы.») — жирным: у текста вокруг
   вес 300, и без явного значения браузер делал его лишь чуть темнее */
.ip strong{font-weight:700}
.ip-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ip-list li{position:relative;padding-left:30px;font-size:18px;font-weight:300;line-height:1.55}
.ip-list li::before{content:'';position:absolute;left:0;top:10px;width:14px;height:2px;background:var(--red)}
.ip-after{margin:26px 0 24px;color:var(--ink-60)}

/* Этапы */
.ip-steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.ip-step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px}
.ip-step__num{font-size:14px;font-weight:600;color:var(--red);letter-spacing:normal;margin-bottom:10px}
.ip-step p{margin:0;font-size:18px;font-weight:300;line-height:1.55}

/* Кейсы */
.ip-case{background:var(--white);border:1px solid var(--line);text-decoration:none;display:flex;flex-direction:column;height:100%;transition:border-color .18s;border-radius:var(--r-card);overflow:hidden}
.ip-case:hover{border-color:rgba(0,0,0,.28)}
.ip-case__img{aspect-ratio:4/3;overflow:hidden;background:#f0eeec}
.ip-case__img img{width:100%;height:100%;object-fit:cover}
.ip-case__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.ip-case__route{font-size:14px;font-weight:600;letter-spacing:normal;color:var(--red);text-transform:uppercase}
.ip-case h3{margin:0;font-size:22px;font-weight:600;line-height:1.35}
.ip-case__meta{font-size:18px;font-weight:500;color:var(--red)}
.ip-case p{margin:0;font-size:18px;font-weight:300;line-height:1.55;color:var(--ink)}
.ip-case__more{margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;letter-spacing:normal;text-transform:uppercase;color:var(--ink)}

/* Вопросы и ответы */
/* Вопросы — карточками, как остальные блоки: острых углов на сайте нет */
.ip-faq{display:flex;flex-direction:column;gap:14px}
.ip-faq__item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:0 24px}
.ip-section--white .ip-faq__item{background:var(--cream)}
.ip-faq__q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;
  font-size:22px;font-weight:600;line-height:1.35;padding:24px 48px 24px 0;position:relative;color:var(--ink);
}
.ip-faq__q::after{content:'';position:absolute;right:4px;top:50%;width:14px;height:2px;background:var(--ink);transition:transform .2s}
.ip-faq__q::before{content:'';position:absolute;right:4px;top:50%;width:14px;height:2px;background:var(--ink);transform:rotate(90deg);transition:transform .2s,opacity .2s}
.ip-faq__item[data-open='1'] .ip-faq__q::before{opacity:0;transform:rotate(0)}
.ip-faq__a{padding:0 0 24px;max-width:840px;color:var(--ink);font-weight:300;font-size:18px;line-height:1.55}
.ip-faq__a p{margin:0 0 12px}
.ip-faq__links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}

/* Форма заявки */
.ip-leadform{scroll-margin-top:var(--head-h);background:var(--ink);color:var(--white);padding:88px 0;position:relative;overflow:hidden}
/* Фон формы — та же фотография, что стояла здесь на прежнем сайте.
   Мелкие детали снимка — краны, контейнеры, линии сетки — спорили с текстом
   и рамками полей. Размываем сильнее: картинка остаётся узнаваемой, но
   перестаёт мешать читать. Затемнение и рамки полей подняты вместе с ней. */
.ip-leadform__bg{
  position:absolute;inset:-4%;background-size:cover;background-position:center;
  filter:blur(7px);transform:scale(1.05);
}
.ip-leadform__bg--zayavka{background-image:url('/assets/img/bg/zayavka-1000.webp')}
/* под откликом на вакансию на прежнем сайте стояла другая фотография — рабочий стол */
.ip-leadform__bg--rezyume{background-image:url('/assets/img/bg/rezyume-1000.webp')}
.ip-leadform__bg--rezyume::after{background:rgba(0,0,0,.7)}
.ip-leadform__bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.66)}
.ip-leadform > .ip-wrap{position:relative;z-index:1}
.ip-leadform .ip-field input,.ip-leadform .ip-field textarea{background:rgba(0,0,0,.42);border-color:rgba(255,255,255,.55)}
.ip-leadform .ip-field input::placeholder,.ip-leadform .ip-field textarea::placeholder{color:rgba(255,255,255,.7)}
.ip-leadform .ip-field label{color:rgba(255,255,255,.95)}
.ip-leadform .ip-file__btn{background:rgba(0,0,0,.42);border-color:rgba(255,255,255,.6)}
.ip-leadform .ip-lead-text{color:rgba(255,255,255,.86)}
.ip-leadform .ip-h2{color:var(--white);font-size:clamp(28px,3.1vw,42px);text-transform:none;letter-spacing:normal}
.ip-leadform .ip-lead-text{font-size:20px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.78);margin:0 0 36px;max-width:760px}
.ip-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ip-field{display:flex;flex-direction:column;gap:7px}
.ip-field--full{grid-column:1/-1}
.ip-field label{font-size:14px;font-weight:500;color:rgba(255,255,255,.72)}
.ip-field small{font-size:13px;color:rgba(255,255,255,.45)}
.ip-field input[type=text],.ip-field input[type=tel],.ip-field input[type=email],.ip-field textarea{
  font:inherit;font-size:16px;color:var(--white);background:transparent;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-ui);padding:15px 16px;width:100%;
}
.ip-field textarea{min-height:120px;resize:vertical}
.ip-field input:focus,.ip-field textarea:focus{outline:none;border-color:var(--red)}
.ip-field input::placeholder,.ip-field textarea::placeholder{color:rgba(255,255,255,.35)}
.ip-file{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ip-file__btn{
  display:inline-flex;align-items:center;gap:8px;border:1px dashed rgba(255,255,255,.35);
  padding:13px 18px;border-radius:var(--r-ui);cursor:pointer;font-size:15px;
}
.ip-file__btn:hover{border-color:var(--red)}
.ip-file input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ip-file__name{font-size:14px;color:rgba(255,255,255,.6)}
.ip-consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.62)}
.ip-consent input{margin-top:3px;accent-color:var(--red);width:17px;height:17px;flex:0 0 auto}
.ip-consent a{color:rgba(255,255,255,.85)}
.ip-form__foot{grid-column:1/-1;display:flex;flex-direction:column;gap:16px}
/* Сообщение формы: отправлено или ошибка. Свой класс — раньше он совпадал с
   карточками списков, и светло-зелёный текст выходил на белой подложке. */
.ip-formnote{margin:0;padding:16px 20px;border-radius:var(--r-ui);font-size:16px;line-height:1.5;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:var(--white)}
.ip-formnote--bad{border-color:#ff8c8c;color:#ffd6d6}
.ip-formnote--good{border-color:#8fe0a0;font-size:18px}

/* Подвал */
.ip-footer{background:var(--cream);border-top:1px solid var(--line);padding:64px 0 32px;font-size:16px;font-weight:300}
.ip-footer__top{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:40px}
.ip-footer__top--3{grid-template-columns:1.1fr 1fr 1fr}
/* названия колонок подвала — не заголовки страницы, поэтому обычный текст */
.ip-footer__title{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 16px;font-weight:600}
.ip-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ip-footer a{text-decoration:none}
.ip-footer a:hover{color:var(--red)}
.ip-footer__contacts p{margin:0 0 9px;color:var(--ink-60)}
.ip-footer__phone{font-size:22px;font-weight:700;text-decoration:none;display:inline-block;margin-bottom:8px}
.ip-footer__bottom{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--ink);font-size:14px;font-weight:500;
}

/* Уведомление о файлах cookie */
.ip-cookie{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:60;max-width:560px;margin-left:auto;
  background:var(--white);border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.14);
  padding:20px 22px;border-radius:var(--r-card);display:flex;gap:18px;align-items:center;font-size:14px;color:var(--ink-60);
}
.ip-cookie p{margin:0;font-size:15px;font-weight:500;line-height:1.55;color:var(--ink)}
.ip-cookie .ip-btn{padding:12px 24px;flex:0 0 auto}

@media (max-width:1100px){
  .ip-grid--3{grid-template-columns:repeat(2,1fr)}
  .ip-grid--vacancies{grid-template-columns:repeat(3,1fr)}
  .ip-grid--4{grid-template-columns:repeat(2,1fr)}
  .ip-geo{grid-template-columns:repeat(2,1fr)}
  .ip-steps{grid-template-columns:repeat(2,1fr)}
  .ip-footer__top{grid-template-columns:1fr 1fr}
  /* на ноутбуке и планшете меню остаётся, только компактнее */
  .ip-header__in{gap:18px}
  .ip-nav{gap:18px}
  .ip-nav__link{font-size:15px}
  .ip-header__actions .ip-icon{display:none}
  .ip-header__actions .ip-btn{padding:12px 18px}
  .ip-hero__btns .ip-btn{padding:16px 28px}
}
/* нечётная последняя карточка в сетке из двух колонок — по центру ряда */
@media (max-width:1100px) and (min-width:761px){
  .ip-grid--3:not(.ip-grid--vacancies) > :last-child:nth-child(odd),
  .ip-grid--4 > :last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc((100% - 26px) / 2)}
}
@media (max-width:940px){
  .ip-nav{display:none}
  .ip-burger{display:block;margin-left:auto}
  .ip-header--open .ip-nav{
    display:flex;position:absolute;top:var(--head-h);left:0;right:0;background:var(--white);
    flex-direction:column;align-items:flex-start;gap:0;padding:16px 24px 26px;
    border-bottom:1px solid var(--line);max-height:calc(100vh - var(--head-h));overflow:auto;
  }
  .ip-header--open .ip-nav__item{width:100%;border-bottom:1px solid var(--line)}
  .ip-header--open .ip-nav__link{padding:14px 0;width:100%}
  .ip-header--open .ip-nav__sub{position:static;display:block;border:0;box-shadow:none;padding:0 0 14px;min-width:0}
}
@media (max-width:760px){
  .ip{font-size:16px}
  .ip-section{padding:56px 0}
  .ip-wrap{padding:0 18px}
  .ip-case-hero__route{font-size:18px}
  .ip-hero__in{padding:56px 0 60px}
  /* на телефоне текст идёт во всю ширину: по замерам такая заливка держит контраст 5,0 при норме 4,5 */
  .ip-hero__bg::after{background:linear-gradient(180deg,rgba(254,252,250,.7) 0%,rgba(254,252,250,.58) 55%,rgba(254,252,250,.42) 100%)}
  .ip-hero{min-height:auto}
  .ip-grid--3,.ip-grid--4,.ip-geo,.ip-steps,.ip-two,.ip-form,.ip-footer__top{grid-template-columns:1fr}
  .ip-two{gap:32px}
  .ip-hero__btns .ip-btn{width:100%}
  .ip-leadform{padding:56px 0}
  /* на телефоне уведомление компактнее: раньше оно закрывало почти треть экрана */
  .ip-cookie{flex-direction:column;align-items:flex-start;left:10px;right:10px;bottom:10px;padding:14px 16px;gap:10px}
  .ip-cookie p{font-size:14px;line-height:1.45}
  .ip-cookie .ip-btn{padding:10px 22px}
  .ip-header__actions .ip-btn{display:none}
}

/* Страница кейса */
/* Отступ несёт только разделитель: раньше он стоял на каждом вложенном
   элементе, и длинное название страницы вылезало за край на узком экране. */
.ip-crumbs{font-size:14px;color:var(--ink-muted);padding:22px 0 0;overflow-wrap:anywhere}
.ip-crumbs a{text-decoration:none}
.ip-crumbs a:hover{color:var(--red)}
.ip-crumbs__sep{margin:0 8px}
.ip-case-hero{padding:40px 0 56px;background:var(--cream)}
/* «ТЕЛЕКОММУНИКАЦИОННОГО» на телефоне шире экрана, поэтому разрешаем перенос
   длинных слов по слогам — иначе заголовок обрезается по правому краю. */
/* Заголовки переносятся целыми словами. Перенос по слогам разрешён только
   на узком телефоне и только словам от 14 букв — «телекоммуникационного»,
   «самостоятельность», — которые иначе не помещаются в строку. */
.ip :where(h1,h2,h3,h4){overflow-wrap:break-word}
.ip-case-hero h1,.ip-article-hero h1,.ip-service-hero h1{overflow-wrap:break-word}
@media (max-width:420px){
  .ip :where(h1,h2,h3,h4),.ip-note__title,.ip-related__title{
    hyphens:auto;hyphenate-limit-chars:14 6 6;
    -webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6;
  }
}
.ip-case-hero h1{font-size:clamp(26px,3.1vw,42px);line-height:1.23;font-weight:700;margin:0 0 20px;letter-spacing:normal}
/* маршрут набран без пробела перед стрелкой, поэтому переносим его флексом,
   иначе на узком экране «→ЕКАТЕРИНБУРГ» вылезает за край и появляется прокрутка вбок */
.ip-case-hero .ip-lead{margin:0 0 22px;max-width:760px}
.ip-case-hero__route{display:flex;flex-wrap:wrap;align-items:baseline;font-size:22px;font-weight:600;line-height:1.35;margin:0 0 28px}
.ip-case-hero__route span{display:inline-flex;align-items:baseline}
.ip-case-hero__route em{font-style:normal;color:var(--red);margin:0 6px}
.ip-facts{display:flex;flex-wrap:wrap;gap:14px}
.ip-fact{background:var(--white);border:1px solid var(--line);padding:18px 22px;min-width:200px;border-radius:var(--r-card)}
.ip-fact__value{font-size:24px;font-weight:700;color:var(--red);line-height:1.2}
.ip-fact__name{font-size:14px;color:var(--ink-muted);text-transform:lowercase;margin-top:4px}
.ip-photos{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:12px}
/* снимки разной формы: равняем по высоте, ширину каждый держит свою — обрезки нет */
.ip-photos img{height:290px;width:auto;max-width:100%;border:1px solid var(--line);border-radius:var(--r-card)}
/* один снимок: ограничиваем и по ширине, и по высоте — вертикальный кадр
   иначе занимает почти весь экран */
.ip-photos--one img{height:auto;width:auto;max-width:min(760px,100%);max-height:620px}
/* фото на карьере: четыре в ряд, кадр 3:2 — как было на прежнем сайте */
.ip-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ip-gallery img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);border-radius:var(--r-card)}
@media (max-width:1100px){ .ip-gallery{grid-template-columns:repeat(2,1fr)} }
.ip-prose h2{font-size:24px;font-weight:700;text-transform:uppercase;color:var(--red);margin:36px 0 16px;letter-spacing:normal}
.ip-prose h2:first-child{margin-top:0}
.ip-prose p{margin:0 0 14px;font-size:18px;font-weight:300;line-height:1.55;max-width:820px}
.ip iframe{border-radius:var(--r-card)}
@media (max-width:760px){
  .ip-fact{min-width:0;flex:1 1 100%}
}

/* Карьера и вакансии */
/* подзаголовок внутри блока, того же размера, что заголовки карточек */
.ip-h3{margin:0 0 14px;font-size:19px;font-weight:700;line-height:1.24;text-transform:uppercase}
.ip-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ip-tag{border:1px solid var(--line);background:var(--white);padding:9px 16px;border-radius:var(--r-ui);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.ip-vacancy{background:var(--white);border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:10px;text-decoration:none;height:100%;transition:border-color .18s;border-radius:var(--r-card)}
.ip-vacancy:hover{border-color:rgba(0,0,0,.28)}
.ip-vacancy__img{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-ui);margin-bottom:6px;background:#eee}
.ip-vacancy__img img{width:100%;height:100%;object-fit:cover;display:block}
.ip-vacancy h3{margin:0;font-size:20px;font-weight:700;line-height:1.25}
.ip-vacancy__salary{font-size:19px;font-weight:700;color:var(--red)}
.ip-vacancy__terms{font-size:15px;color:var(--ink-muted)}
.ip-vacancy__more{margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.ip-offer{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 26px}
.ip-offer__num{font-size:13px;font-weight:600;color:var(--red);letter-spacing:.1em;margin-bottom:8px}
.ip-offer h3{margin:0 0 12px;font-size:19px;font-weight:700;text-transform:uppercase;line-height:1.22}
.ip-offer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ip-offer li{font-size:16px;color:var(--ink-60);padding-left:18px;position:relative}
.ip-offer li::before{content:'—';position:absolute;left:0;color:var(--red)}

/* Блок «Наши партнёры»: логотипы в ряд. Логотипы у брендов разной формы —
   и широкие, и почти квадратные, поэтому каждый вписывается в одинаковую
   ячейку целиком, без обрезки, и выравнивается по центру. */
.ip-partners{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.ip-partner{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  min-height:140px;display:flex;align-items:center;justify-content:center;padding:18px 20px;
}
.ip-partner img{max-width:100%;max-height:92px;width:auto;height:auto;object-fit:contain}

@media (max-width:1000px){ .ip-partners{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){
  .ip-partners{grid-template-columns:repeat(2,1fr);gap:12px}
  .ip-partners > :last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc((100% - 12px) / 2)}
  .ip-partner{min-height:108px;padding:14px}
  .ip-partner img{max-height:66px}
}

/* ---- Страницы услуг и статей ---------------------------------------- */

/* Колонка для чтения. Ширину ограничивают сами блоки, а не обёртка:
   так текст начинается там же, где заголовок первого экрана, и левый край
   страницы остаётся единым сверху донизу. */
.ip-wrap--text .ip-faq{max-width:900px}
.ip-wrap--text .ip-head{max-width:900px}

.ip-article-hero,.ip-service-hero{padding:40px 0 56px;background:var(--cream)}
/* заголовок, вводка и обложка статьи начинаются там же, где текст ниже */
.ip-article-hero h1,.ip-article-hero .ip-lead,.ip-article-hero .ip-actual{max-width:900px}
.ip-article-hero h1,.ip-service-hero h1{
  font-size:clamp(28px,3.1vw,42px);line-height:1.23;font-weight:700;
  margin:0 0 20px;letter-spacing:normal;
}
.ip-article-hero .ip-lead,.ip-service-hero .ip-lead{margin:0 0 14px}
/* ряд кнопок везде одинаковый: тот же зазор, что на главной и в статьях */
.ip-service-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 0}
.ip-service-hero__hint{margin:12px 0 0;font-size:16px;font-weight:300;color:var(--ink-60)}
/* Поверх фотографии серый текст местами терял контраст: на «Мультимодальных
   перевозках» над красной фурой замер дал 3,6 при норме 4,5. С 80% чёрного — 4,9. */
.ip-service-hero--img .ip-service-hero__hint{color:rgba(0,0,0,.8)}

/* Содержание статьи */
.ip-toc{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px 28px;margin:0 0 44px;max-width:640px;
}
.ip-toc__title{
  margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--red);
}
.ip-toc ol{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px}
.ip-toc li{font-size:17px;font-weight:400}
.ip-toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.18)}
.ip-toc a:hover{color:var(--red);border-color:var(--red)}

/* Текст статьи и услуги */
.ip-prose h3{font-size:20px;font-weight:700;margin:28px 0 12px;line-height:1.28}
.ip-prose h2[id],.ip-prose h3[id]{scroll-margin-top:calc(var(--head-h) + 16px)}
.ip-prose ul,.ip-prose ol{margin:0 0 18px;padding-left:22px;max-width:820px}
.ip-prose li{font-size:18px;font-weight:300;line-height:1.55;margin-bottom:8px}
.ip-prose ul{list-style:none;padding-left:20px}
.ip-prose ul li{position:relative;padding-left:18px}
.ip-prose ul li::before{content:'—';position:absolute;left:0;color:var(--red)}
.ip-prose a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(199,34,40,.35)}
.ip-prose a:hover{border-color:var(--red)}
.ip-prose--after-faq{margin-top:48px}

/* Пример записи условия в договоре */
.ip-example{
  border-left:3px solid var(--red);background:var(--cream);
  padding:18px 22px;margin:0 0 18px;border-radius:var(--r-ui);
}
.ip-example__caption{margin:0 0 6px!important;font-size:16px;color:var(--ink-60)}
.ip-example__line{margin:0!important;font-weight:600!important;font-size:18px!important}

/* Таблица условий. На узком экране прокручивается внутри себя,
   чтобы не растягивать страницу и не появлялась прокрутка вбок. */
/* Таблица шире колонки с текстом, поэтому ей разрешено занять всю ширину
   страницы: на компьютере шесть столбцов помещаются целиком, без прокрутки. */
.ip-tablewrap{
  overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:var(--r-card);
  width:min(1200px,calc(100vw - 48px));
}
.ip-table{border-collapse:collapse;width:100%;min-width:720px;font-size:16px}
/* подсказка нужна только там, где таблица действительно не помещается */
.ip-tablehint{display:none}
@media (max-width:820px){
  .ip-tablehint{display:block;margin:0 0 8px;font-size:14px;color:var(--ink-muted)}
}
.ip-table th,.ip-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.ip-table td:nth-child(5){min-width:260px}
.ip-table thead th{
  font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink-60);background:var(--cream);white-space:nowrap;
}
/* На компьютере длинные заголовки столбцов переносятся на вторую строку.
   В одну строку «Основную перевозку оплачивает» растягивала таблицу Инкотермс
   шире страницы, и последний столбец обрезался. На телефоне таблица и так
   листается вбок, там заголовки остаются в одну строку. */
@media (min-width:821px){
  .ip-table thead th{white-space:normal}
}
/* На планшетах и узких ноутбуках поля и разрядка поменьше: таблица Инкотермс
   из шести столбцов иначе на 25–100 px шире своего блока, а подсказки про
   прокрутку на этой ширине нет. Так она помещается уже с 821 px, с запасом 40 px. */
@media (min-width:821px) and (max-width:1100px){
  .ip-table th,.ip-table td{padding:12px 10px}
  .ip-table thead th{letter-spacing:.5px}
  .ip-table td:nth-child(5){min-width:200px}
}
.ip-table tbody th{font-weight:700;width:1%;white-space:nowrap}
/* в обычных таблицах первый столбец бывает длинным — пусть переносится */
.ip-table--plain{min-width:520px}
.ip-table--plain tbody th{width:auto;white-space:normal;font-weight:600}
.ip-table tbody th a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(199,34,40,.35)}
.ip-table tbody tr:last-child th,.ip-table tbody tr:last-child td{border-bottom:0}
.ip-table td{font-weight:300}

.ip-article-cta{display:flex;flex-wrap:wrap;gap:14px;margin:40px 0 0}

/* ---- Посадочная страница с содержанием ------------------------------ */

/* Первый экран с фотографией: снимок размыт, поверх светлая заливка —
   иначе чёрный заголовок на пёстрой картинке не читается. */
.ip-service-hero--img{position:relative;overflow:hidden}
.ip-service-hero__bg{
  position:absolute;inset:-2%;background-size:cover;background-position:center;
  filter:blur(2px);transform:scale(1.03);
}
/* Буквы на обеих страницах кончаются на 59% ширины — замерил по самому тексту,
   а не по рамке блока. Поэтому заливку держим только до этой отметки, а дальше
   уводим в ноль: правая половина снимка видна как есть. Худшая точка контраста
   в текстовой зоне 5,6 при норме 4,5. */
.ip-service-hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(254,252,250,.62) 0%,rgba(254,252,250,.54) 59%,rgba(254,252,250,.1) 72%,rgba(254,252,250,0) 100%);
}
.ip-service-hero--img > .ip-wrap{position:relative;z-index:1;padding-top:16px;padding-bottom:16px}
.ip-service-hero--img .ip-lead{max-width:760px}
/* Заливка держится до 59% ширины экрана, дальше снимок виден как есть.
   Значит и строки не должны заходить правее: ширину колонки считаем от левого
   края текста до этой отметки. На узких экранах ограничение снимается —
   там заливка идёт сверху вниз и закрывает строку целиком. */
@media (min-width:761px){
  .ip-service-hero--img h1,
  .ip-service-hero--img .ip-lead,
  .ip-service-hero--img .ip-eyebrow,
  .ip-service-hero--img .ip-service-hero__hint{max-width:min(59vw - 24px, 9vw + 600px)}
}

/* Карточки «что берём на себя» */
.ip-task{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 28px;display:flex;flex-direction:column;gap:12px;
}
.ip-task__num{font-size:14px;font-weight:700;letter-spacing:1.5px;color:var(--red)}
.ip-task h3{margin:0;font-size:19px;font-weight:700;line-height:1.26;text-transform:uppercase}
.ip-section__note{margin:26px 0 0;font-size:17px;font-weight:300;max-width:820px}
.ip-section__note a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(199,34,40,.35)}

/* Короткие пункты без нумерации: «когда нужна услуга» */
.ip-points{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.ip-point{
  margin:0;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 24px 20px 46px;position:relative;font-size:18px;font-weight:300;line-height:1.45;
}
.ip-point::before{
  content:'';position:absolute;left:24px;top:29px;width:10px;height:10px;
  border-radius:50%;background:var(--red);
}

/* Виды транспорта: фотография с подписью. Своё имя — .ip-photos занят
   галереей кейсов, и общая сетка растягивала там снимки */
.ip-photocards{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
.ip-photo{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.ip-photo img{display:block;width:100%;height:190px;object-fit:cover}
.ip-photo figcaption{
  padding:16px 20px;font-size:17px;font-weight:700;line-height:1.3;text-transform:uppercase;
}
.ip-photo figcaption h3{margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit}

/* Текстовый блок с фотографией сбоку */
.ip-textimg{display:grid;gap:36px;grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:start}
.ip-textimg .ip-prose{max-width:none}
.ip-textimg__img img{width:100%;border-radius:var(--r-card)}

/* Когда стоит передать: заголовок предложения и пояснение */
.ip-reasons{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
.ip-reasons > .ip-reason:last-child:nth-child(odd){grid-column:1/-1}
.ip-reason{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 26px}
.ip-reason h3{margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.3}
.ip-reason p{margin:0;font-size:17px;font-weight:300;color:var(--ink-60)}
/* группа со списком внутри карточки: «Что входит в поиск и проверку» */
.ip-reason h3 + .ip-list{margin-top:14px}
.ip-list--compact{gap:10px}
.ip-list--compact li{font-size:17px;color:var(--ink-60)}
/* вводный абзац страницы без своего заголовка */
.ip-prose--intro p{font-size:19px;line-height:1.6;margin:0}

/* Этапы поставки. Своё имя, чтобы не пересекаться с блоком этапов на главной */
.ip-stages{display:grid;grid-template-columns:1fr;gap:36px}
.ip-stages--img{grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:center}
.ip-stages__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.ip-stages__list li{display:flex;gap:18px;align-items:flex-start;font-size:18px;font-weight:300;line-height:1.5}
.ip-stages__num{
  flex:0 0 40px;height:40px;border-radius:50%;background:var(--red);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;
}
.ip-stages__img img{width:100%;border-radius:var(--r-card)}

/* Широкая таблица сравнения — во всю колонку страницы */
.ip-tablewrap--wide{width:auto;margin-left:0;transform:none}

/* Связанные услуги простыми ссылками */
.ip-links{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;font-size:18px}
.ip-links a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(199,34,40,.35)}
.ip-links a:hover{border-color:var(--red)}

@media (max-width:1000px){
  .ip-reasons{grid-template-columns:1fr}
  .ip-stages--img{grid-template-columns:1fr}
  .ip-textimg{grid-template-columns:1fr}
  .ip-photocards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .ip-points{grid-template-columns:1fr}
  .ip-photocards{grid-template-columns:1fr}
  .ip-photo img{height:200px}
}
@media (max-width:760px){
  /* на телефоне текст идёт во всю ширину, поэтому заливка плотнее,
     но и её ослабил до предела: контраст 6,0 при норме 4,5 */
  .ip-service-hero--img .ip-service-hero__bg::after{
    background:linear-gradient(180deg,rgba(254,252,250,.68) 0%,rgba(254,252,250,.62) 60%,rgba(254,252,250,.5) 100%);
  }
  .ip-service-hero__actions .ip-btn{width:100%;justify-content:center}
}
.ip-article-links{display:flex;flex-wrap:wrap;gap:8px 26px;margin:22px 0 0;font-size:17px}
.ip-article-links a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(199,34,40,.35)}
.ip-article-links a:hover{border-color:var(--red)}
.ip-article-cover{width:100%;max-width:900px;border-radius:var(--r-card);margin:32px 0 0}
/* дата, на которую проверены нормативные сведения в статье */
.ip-actual{margin:18px 0 0;font-size:15px;color:var(--ink-muted)}

/* Страница без текста: показываем перечень разделов из плана, чтобы было
   видно, чем её наполнять. В поиск такая страница не отдаётся. */
.ip-draft{border:1px dashed var(--line);border-radius:var(--r-card);padding:28px 30px;max-width:820px}
.ip-draft__title{margin:0 0 14px!important;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink-muted)}
.ip-draft p{margin:0 0 12px;font-size:18px;font-weight:300}
.ip-draft ul{margin:0;padding-left:20px;list-style:none}
.ip-draft li{position:relative;padding-left:18px;font-size:18px;font-weight:300;margin-bottom:8px;color:var(--ink-60)}
.ip-draft li::before{content:'—';position:absolute;left:0;color:var(--red)}

/* Карточки списков: услуги, поставки, статьи */
.ip-note{
  display:flex;flex-direction:column;gap:12px;background:var(--white);font-size:15px;margin:0;
  border:1px solid var(--line);border-radius:var(--r-card);padding:28px;
  text-decoration:none;transition:border-color .2s,transform .2s;
}
a.ip-note:hover{border-color:var(--red);transform:translateY(-2px)}
.ip-note__title{margin:0;font-size:19px;font-weight:700;line-height:1.24;text-transform:uppercase;overflow-wrap:break-word}
.ip-note p{margin:0;font-size:16px;font-weight:300;color:var(--ink-60);flex:1 1 auto}
.ip-note__more{font-size:14px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--red)}
.ip-note--soon{background:var(--cream)}
/* карточка статьи с обложкой: картинка во всю ширину карточки, сверху */
.ip-note--cover{padding:0;overflow:hidden}
.ip-note--cover .ip-note__title,.ip-note--cover p,.ip-note--cover .ip-note__more{padding:0 28px}
.ip-note--cover .ip-note__title{padding-top:24px}
.ip-note--cover .ip-note__more{padding-bottom:28px}
.ip-note__img{display:block;aspect-ratio:16/9;overflow:hidden;background:#eee}
.ip-note__img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
a.ip-note--cover:hover .ip-note__img img{transform:scale(1.04)}
.ip-note--soon .ip-note__title{color:var(--ink-muted)}
.ip-section--white .ip-note{background:var(--cream)}

/* Связанные услуги */
.ip-related{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.ip-related__item{
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px;text-decoration:none;transition:border-color .2s,transform .2s;min-height:130px;
}
.ip-related__item:hover{border-color:var(--red);transform:translateY(-2px)}
.ip-related__title{font-size:18px;font-weight:700;line-height:1.26;overflow-wrap:break-word}
.ip-related__item--soon{border-style:dashed;background:transparent}
.ip-related__item--soon .ip-related__title{color:var(--ink-muted)}
.ip-related__more{font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--red)}

.ip-head--left{margin-bottom:28px}

@media (max-width:1000px){
  .ip-related{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .ip-article-hero,.ip-service-hero{padding:28px 0 40px}
  .ip-toc{padding:20px;margin-bottom:32px}
  .ip-related{grid-template-columns:1fr}
  .ip-article-cta .ip-btn{width:100%;justify-content:center}
}

/* На узком экране снимки во всю ширину: ряд из разновысоких картинок там не нужен.
   Правило стоит в конце файла — иначе его перебьёт основное правило галереи. */
@media (max-width:760px){
  .ip-photos img{height:auto;width:100%}
}

/* На телефоне логотип во всю ширину не влезал вместе со значками и бургером:
   кнопка меню уезжала за край экрана и меню было не открыть. */
@media (max-width:760px){
  .ip-header__in{gap:14px}
  .ip-logo img{height:32px}
}
@media (max-width:360px){
  .ip-header__actions .ip-icon{display:none}
}