/* Service pages use document flow, independent of the former Tilda artboards. */
.vd-service { background: #050505; color: #fff; font: 400 16px/1.55 Onest, Arial, sans-serif; }
.vd-service :is(h1,h2,h3,p,ul,blockquote) { margin: 0; }
.vd-service :is(h1,h2,h3) { text-wrap: balance; }
.vd-service h2 { font: 400 clamp(36px,4.2vw,64px)/1.08 AkzidenzGrotesk,Arial,sans-serif; text-transform: uppercase; max-width: 900px; }
.vd-service h3 { font-size: 22px; line-height: 1.3; font-weight: 500; }
.vd-service p { color: #b5b5b5; }
#allrecords.vd-service a { color: inherit; text-decoration: none; }
.service-container { width: min(100% - 48px,1392px); margin-inline: auto; }
.service-section-heading { margin-bottom: 28px; }
.service-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#allrecords.vd-service :is(.service-button,.vd-res__more,.vd-ak__knopka) { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; min-height: 48px; border: 1px solid transparent; border-radius: 8px; background: #E21717; color: #fff; font: 500 15px/1.4 Onest,Arial,sans-serif; text-align: center; cursor: pointer; box-shadow: none; }
#allrecords.vd-service .service-button--outline { background: transparent; border-color: #666; }
#allrecords.vd-service :is(.service-button,.vd-res__more,.vd-ak__knopka):hover { background: #B31212; }
#allrecords.vd-service .service-button--outline:hover { background: #ffffff12; border-color: #fff; }
#allrecords.vd-service .service-link { font-size: 15px; text-decoration: underline; text-decoration-color: #777; text-underline-offset: 5px; }
.service-cookie { position: fixed; right: 24px; bottom: 24px; z-index: 30; max-width: 340px; border: 1px solid #303030; border-radius: 12px; padding: 16px; background: #1b1b1b; }
.service-cookie[hidden] { display: none; }
.service-cookie__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
.service-cookie p { font-size: 12px; }
#allrecords .service-cookie a { text-decoration: underline; }
.service-cookie button { flex: none; min-height: 44px; padding: 8px 16px; border: 1px solid #666; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
/* Первый экран и блок работ повторяют оригинал vdrive74.ru один в один.
   У оригинала макет нарисован на холсте 1200 (телефон — 320) и растянут
   на ширину окна, поэтому все размеры ниже — в единицах холста: --su = 1px
   холста. От 1200 это ширина окна / 1200 (та же --vd-u, что у шапки);
   960–1199 — тот же холст 1200, ужатый под окно; уже 960 — холст телефона
   320 (/640 от 640 px), как у оригинала. Числа сняты с живого оригинала
   25.09.2026 (координаты Tilda `data-field-*`).
   Отступ от оригинала по слову владельца 29.09: связка «заголовок —
   подзаголовок — кнопки» стоит по центру экрана, а не прижата к низу,
   подзаголовок крупнее, заголовок на широком чуть меньше (72 вместо 80).
   На широком кнопки — внизу вровень с низом плашки марок, как на главной;
   заголовок с подзаголовком — по центру свободного места над ними. */
.vd-service { --su: var(--vd-u, 1px); }
@media (min-width: 960px) and (max-width: 1199px) { .vd-service { --su: calc(var(--vd-u, 1px) * .8); } }
.service-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; background: #000; }
/* Фото под 70 % и чёрная вуаль поверх: у оригинала ровные 40 %, у нас слева
   гуще — под текстом, чтобы подзаголовок читался на любом фото. */
.service-hero { overflow: hidden; }
.service-hero__image { position: absolute; z-index: -2; top: 0; left: 0; width: 100%; height: calc(100% * var(--hero-k, 1)); object-fit: cover; object-position: center; opacity: .7; }
.service-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #000b 0%, #0007 55%, #0004 100%); }
.service-price-value { white-space: nowrap; }
.service-hero__content { padding: calc(110 * var(--su)) calc(15 * var(--su)) 0; }
.vd-public-content .service-hero h1 { max-width: calc(290 * var(--su)); font: 700 calc(40 * var(--su))/1 AkzidenzGrotesk, Arial, sans-serif; letter-spacing: calc(-1.5 * var(--su)); text-wrap: wrap; }
.vd-service .service-hero__description { max-width: calc(300 * var(--su)); margin-top: calc(16 * var(--su)); color: #ffffffeb; font: 500 max(15px, calc(14 * var(--su)))/1.4 Onest, Arial, sans-serif; letter-spacing: calc(-.4 * var(--su)); }
.service-hero__row { display: grid; grid-template-columns: calc(188 * var(--su)) 1fr; align-items: center; gap: calc(12 * var(--su)) calc(10 * var(--su)); margin-top: calc(29 * var(--su)); }
.service-hero__row .service-actions { display: contents; }
.service-hero__row .service-hero__check { grid-row: 2; grid-column: 1 / -1; }
#allrecords.vd-service .service-hero .service-button { min-height: 0; height: calc(45 * var(--su)); padding: 0 calc(12 * var(--su)); border-radius: calc(6 * var(--su)); font: 500 max(11px, calc(11 * var(--su)))/1.1 Onest, Arial, sans-serif; }
#allrecords.vd-service .service-hero .service-button:not(.service-button--outline) { box-shadow: 0 calc(10 * var(--su)) calc(50 * var(--su)) 0 #e2171780; }
#allrecords.vd-service .service-hero .service-button--outline { border: 1px solid #505050; border-radius: calc(6 * var(--su)); text-decoration: none; }
.vd-service .service-hero__price { margin: 0; color: #fff; font: 500 max(11px, calc(11 * var(--su)))/calc(14 * var(--su)) Onest, Arial, sans-serif; }
.vd-service .service-hero__price .service-price-value { display: block; }
#allrecords .service-brands { display: flex; align-items: center; gap: calc(15 * var(--su)); min-height: calc(94 * var(--su)); margin: calc(33 * var(--su)) calc(15 * var(--su)) calc(40 * var(--su)); padding: 0 calc(20 * var(--su)); border: 1px solid #5050504d; border-radius: calc(10 * var(--su)); background: #0000004d; backdrop-filter: blur(10px); list-style: none; }
.service-brands::before { content: 'VAG Group'; margin-right: auto; font: 400 calc(18 * var(--su))/1 AkzidenzGrotesk, Arial, sans-serif; letter-spacing: calc(-.4 * var(--su)); text-transform: uppercase; }
.service-brands li { display: flex; align-items: center; }
.service-brands img { width: calc(20 * var(--su)); height: calc(20 * var(--su)); object-fit: contain; }
.service-brands li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 960px) {
  .service-hero { min-height: max(100svh, calc(550 * var(--su))); }
  .service-hero__content { flex: 1; display: flex; flex-direction: column; padding: calc(120 * var(--su)) 0 calc(40 * var(--su)) calc(300 * var(--su)); }
  .vd-public-content .service-hero__content h1 { margin-top: auto; }
  /* Строки заголовка ровняются по длине — чтобы «VAG» не висел один на второй. */
  .vd-public-content .service-hero h1 { max-width: calc(832 * var(--su)); font-size: calc(72 * var(--su)); letter-spacing: calc(-2.6 * var(--su)); text-wrap: balance; }
  .vd-service .service-hero__description { max-width: calc(600 * var(--su)); margin-top: calc(26 * var(--su)); font-size: calc(22 * var(--su)); line-height: 1.4; letter-spacing: 0; margin-bottom: calc(30 * var(--su)); }
  .service-hero__row { display: flex; gap: calc(10 * var(--su)); margin-top: auto; }
  .service-hero__row .service-actions { display: flex; gap: calc(10 * var(--su)); }
  #allrecords.vd-service .service-hero .service-button { height: calc(60 * var(--su)); min-width: calc(170 * var(--su)); padding: 0 calc(20 * var(--su)); border-radius: calc(10 * var(--su)); font-size: max(12px, calc(12 * var(--su))); }
  #allrecords.vd-service .service-hero .service-hero__check { min-width: calc(230 * var(--su)); }
  .vd-service .service-hero__price { max-width: calc(110 * var(--su)); font-size: max(12px, calc(12 * var(--su))); line-height: calc(16 * var(--su)); }
  /* Плашка марок: 200×329 холста, рамка #505050 под 30 %, прижата к низу. */
  #allrecords .service-brands { background: none; min-height: 0; position: absolute; left: calc(20 * var(--su)); bottom: calc(40 * var(--su)); flex-direction: column; align-items: stretch; gap: calc(29 * var(--su)); width: calc(200 * var(--su)); height: calc(329 * var(--su)); margin: 0; padding: calc(30 * var(--su)) calc(20 * var(--su)) 0 calc(26 * var(--su)); border-radius: calc(10 * var(--su)); }
  .service-brands::before { margin: 0 0 calc(3 * var(--su)) calc(4 * var(--su)); font-size: calc(24 * var(--su)); line-height: calc(24 * var(--su)); letter-spacing: 0; }
  .service-brands li { gap: calc(18 * var(--su)); height: calc(19 * var(--su)); font: 500 max(11px, calc(12 * var(--su)))/calc(19 * var(--su)) Onest, Arial, sans-serif; }
  .service-brands img { width: calc(26 * var(--su)); }
  .service-brands li:nth-child(4) img { height: calc(16 * var(--su)); }
  .service-brands li:nth-child(5) img { height: calc(25 * var(--su)); }
  .service-brands li span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
.service-card-group { display: contents; }
/* Блок работ: заголовок, ряд ярлыков 224×60, карточки 275×310 по четыре
   во всю ширину холста (поля 20) — числа оригинала. */
.service-works { padding: calc(60 * var(--su)) calc(15 * var(--su)) calc(48 * var(--su)); scroll-margin-top: 24px; }
.vd-service .service-works h2 { max-width: calc(210 * var(--su)); font: 400 calc(40 * var(--su))/calc(36 * var(--su)) AkzidenzGrotesk, Arial, sans-serif; letter-spacing: calc(-1.5 * var(--su)); text-wrap: wrap; }
.service-works .service-section-heading { margin: 0; }
.service-works__bar { margin-top: calc(40 * var(--su)); }
/* Ссылка на прайс: на телефоне строкой под вкладками, на широком — справа в их ряду. */
/* Кнопка — обводка сайта (как «Проверить наличие деталей»), стрелка как у «Записаться»,
   высота и скругление — как у вкладок рядом. */
#allrecords.vd-service .service-works__prices { display: flex; gap: 14px; width: 100%; min-height: max(48px, calc(45 * var(--su))); border-radius: calc(6 * var(--su)); font-size: max(11px, calc(11 * var(--su))); }
.service-works__prices img { flex: none; width: 14px; height: 12px; }
.service-tabs + .service-works__prices { margin-top: calc(12 * var(--su)); }
.service-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--su)); }
.service-tab { height: calc(45 * var(--su)); padding: 0 calc(10 * var(--su)); border: 1px solid #505050; border-radius: calc(6 * var(--su)); background: transparent; color: #fff; font: 500 max(11px, calc(11 * var(--su)))/1.1 Onest, Arial, sans-serif; cursor: pointer; transition: border-color .15s, background-color .15s; }
.service-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
.service-tab:hover { border-color: #fff; }
.service-tab[aria-selected="true"] { border-color: #E21717; background: #E21717; }
.service-tab:focus-visible, .service-work__toggle:focus-visible, .service-work__book:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.service-catalog { display: grid; grid-template-columns: minmax(0,1fr); gap: calc(20 * var(--su)); margin-top: calc(40 * var(--su)); }
.service-card-group[hidden], .service-work[hidden] { display: none; }
.service-work { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: calc(310 * var(--su)); border: 1px solid #505050; border-radius: calc(10 * var(--su)); background: #000; overflow: hidden; }
.service-work__media { margin: calc(6 * var(--su)) calc(6 * var(--su)) 0; aspect-ratio: 263 / 140; border-radius: calc(5 * var(--su)); background: #202020; overflow: hidden; }
.service-work__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.vd-service .service-work h3 { margin: calc(29 * var(--su)) calc(24 * var(--su)) calc(12 * var(--su)) calc(29 * var(--su)); font: 400 calc(26 * var(--su))/calc(26 * var(--su)) AkzidenzGrotesk, Arial, sans-serif; letter-spacing: 0; text-transform: uppercase; text-wrap: wrap; }
.vd-service .service-work__price { margin: 0 calc(24 * var(--su)) calc(20 * var(--su)) calc(29 * var(--su)); color: #fff; font: 500 max(13px, calc(15 * var(--su)))/1.2 Onest, Arial, sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.service-work__actions { display: grid; grid-template-columns: calc(123 * var(--su)) 1fr; height: calc(60 * var(--su)); margin-top: auto; border-top: 1px solid #505050; }
.service-work__actions > * { display: flex; align-items: center; height: 100%; padding: 0 calc(30 * var(--su)); border: 0; background: transparent; color: #fff; font: 500 max(12px, calc(12 * var(--su)))/1 Onest, Arial, sans-serif; letter-spacing: calc(-.5 * var(--su)); text-align: left; cursor: pointer; transition: background-color .15s; }
.service-work__actions > :hover { background: #303030; }
#allrecords.vd-service .service-work__book { justify-content: space-between; border-left: 1px solid #505050; }
/* Работа без описания — без «Подробнее»: «Записаться» занимает строку целиком. */
#allrecords.vd-service .service-work__book:only-child { grid-column: 1 / -1; border-left: 0; }
.service-work__book img { flex: none; width: calc(14 * var(--su)); height: calc(12 * var(--su)); }
/* «Подробнее» — описание поверх фото и заголовка, нижняя строка на месте:
   ряд карточек не прыгает. */
.service-work__more { position: absolute; inset: 0 0 calc(60 * var(--su)); padding: calc(24 * var(--su)) calc(30 * var(--su)); background: #000; overflow: auto; }
/* Переход из прайса по #work-<id>: браузер ставит описание к верху окна — под шапку. */
.service-work__more { scroll-margin-top: 140px; }
.service-work__more[hidden] { display: none; }
.vd-service .service-work__more p { color: #ddd; font-size: max(13px, calc(13 * var(--su))); line-height: 1.45; }
.vd-service .service-work__more p + p { margin-top: calc(10 * var(--su)); }
.vd-service .service-work__more .service-work__summary { color: #fff; font-weight: 500; }
#allrecords.vd-service .service-work__more a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 600px) and (max-width: 959px) {
  .service-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 960px) {
  .service-works { padding: calc(123 * var(--su)) calc(20 * var(--su)) calc(72 * var(--su)); }
  .service-works .service-section-heading { margin-left: calc(234 * var(--su)); }
  .vd-service .service-works h2 { max-width: calc(675 * var(--su)); font-size: calc(60 * var(--su)); line-height: calc(54 * var(--su)); letter-spacing: calc(-2.5 * var(--su)); }
  /* Ссылка на прайс — на строке заголовка блока, справа, где пусто. Пять вкладок занимают
     всю ширину, и в ряду с ними ссылка уходила отдельной строкой и висела одна
     (замечание владельца 05.10.2026). Высота кнопки 60, строка заголовка 54 — центры совпадают. */
  .service-works { position: relative; }
  .service-works__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: calc(42 * var(--su)); }
  .service-tabs + .service-works__prices { margin-top: 0; }
  #allrecords.vd-service .service-works__prices { position: absolute; top: calc(120 * var(--su)); right: calc(20 * var(--su)); width: auto; height: calc(60 * var(--su)); padding: 0 calc(30 * var(--su)); border-radius: calc(10 * var(--su)); font-size: max(12px, calc(12 * var(--su))); }
  .service-tabs { display: flex; gap: calc(10 * var(--su)); }
  .service-tab { flex: 0 0 calc(224 * var(--su)); height: calc(60 * var(--su)); border-radius: calc(10 * var(--su)); font-size: max(12px, calc(12 * var(--su))); }
  .service-catalog { grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: calc(66 * var(--su)); }
  /* Без правого отступа: у оригинала «Визуальная и механическая» доходит
     почти до края карточки, с отступом она ломается на третью строку. */
  .vd-service .service-work h3 { margin-right: 0; margin-bottom: calc(3 * var(--su)); font-size: calc(24 * var(--su)); line-height: calc(24 * var(--su)); }
  .vd-service .service-work__price { margin-top: calc(9 * var(--su)); }
}
.service-catalog__more { display: block; margin: 32px auto 0; min-height: 48px; padding: 12px 28px; border: 1px solid #666; border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: 16px; cursor: pointer; }
.service-catalog__more[hidden] { display: none; }
@media (max-width: 600px) {
  .service-container { width: calc(100% - 32px); }
  .vd-service h3 { font-size: 20px; }
  .service-cookie { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .service-cookie__inner { align-items: flex-start; gap: 12px; }
}
/* Нижние блоки страниц услуг — блоки главной (shared-blocks.css, подключается после этого файла,
   обёртка .vd-home в service_base.html). Здесь только отличия оригинала страниц услуг;
   селекторы сильнее правил главной, чтобы порядок файлов им не мешал. */
/* Страницы услуг: тот же блок у оригинала (rec1249556276) — с четвёртой карточкой
   «Сертификат соответствия» под второй. Холст выше: 760 / 760 / 930 / 1312. Третья карточка
   у услуг — «Запчасти, проверенные в работе», у неё свои ширины заголовка. */
.vd-home .home-benefits--usluga { height: calc(760 * var(--vd-u)); }
.home-benefits--usluga .home-benefit:nth-of-type(3) h3 { width: calc(208 * var(--vd-u)); }
.home-benefits--usluga .home-benefit:nth-of-type(4) { left: calc(610 * var(--vd-u)); top: calc(446 * var(--vd-u)); }
.home-benefits--usluga .home-benefit:nth-of-type(4) h3 { width: calc(137 * var(--vd-u)); }
.vd-home .home-benefits--usluga .home-benefit:nth-of-type(4) p { width: calc(167 * var(--vd-u)); }
@media (max-width: 1199px) {
  .home-benefits--usluga .home-benefit:nth-of-type(3) h3 { width: calc(127 * var(--vd-u)); }
  .home-benefits--usluga .home-benefit:nth-of-type(4) { left: calc(476 * var(--vd-u)); }
  .home-benefits--usluga .home-benefit:nth-of-type(4) h3 { width: calc(152 * var(--vd-u)); }
}
@media (max-width: 959px) {
  .vd-home .home-benefits--usluga { height: calc(930 * var(--vd-u)); }
  .home-benefits--usluga .home-benefit:nth-of-type(4) { left: calc(156 * var(--vd-u)); top: calc(616 * var(--vd-u)); }
}
@media (max-width: 639px) {
  .vd-home .home-benefits--usluga { height: calc(1312 * var(--vd-u)); }
  .home-benefits--usluga .home-benefit:nth-of-type(3) h3 { width: calc(224 * var(--vd-u)); }
  .home-benefits--usluga .home-benefit:nth-of-type(4) { left: calc(15 * var(--vd-u)); top: calc(1012 * var(--vd-u)); }
  .home-benefits--usluga .home-benefit:nth-of-type(4) h3 { width: calc(160 * var(--vd-u)); }
  .vd-home .home-benefits--usluga .home-benefit:nth-of-type(4) p { width: calc(165 * var(--vd-u)); }
}
/* Страницы услуг: голова ленты у оригинала (rec1249556281) — заголовок на 435 холста 1200,
   ниже 1200 — у левого края, как на главной; холст 320 выше — 172. Лента та же, что на главной. */
.vd-home .home-results-head.home-results-head--usluga h2 { left: calc(435 * var(--vd-u)); top: calc(150 * var(--vd-u)); width: calc(249 * var(--vd-u)); }
@media (max-width: 1199px) { .vd-home .home-results-head.home-results-head--usluga h2 { left: calc(20 * var(--vd-u)); } }
@media (max-width: 959px) { .vd-home .home-results-head.home-results-head--usluga h2 { width: calc(214 * var(--vd-u)); } }
@media (max-width: 639px) {
  .home-results-head.home-results-head--usluga { height: calc(172 * var(--vd-u)); }
  .vd-home .home-results-head.home-results-head--usluga h2 { left: calc(15 * var(--vd-u)); top: calc(60 * var(--vd-u)); width: calc(184 * var(--vd-u)); }
}