/* ==========================================================================
   Добро Детейлинг
   Единственный файл стилей. Ноль зависимостей, ноль внешних запросов.

   Блоки TOKENS и BASE скопированы дословно из дизайн-системы
   design/layout/_ds/dobro-detailing-design-system-3c24effd-.../tokens/*.css
   Изменён только @font-face: путь ведёт на локальный woff2 вместо ttf.
   Правки в токенах делаются в дизайн-системе, а не здесь.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS / fonts
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Golos Text";
  src:url("../fonts/GolosText-Variable.woff2") format("woff2-variations"),
      url("../fonts/GolosText-Variable.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

/* --------------------------------------------------------------------------
   TOKENS / colors
   -------------------------------------------------------------------------- */
:root{
--accent:#FF3334;
--accent-fg:#000000;
--accent-hover:#E63A3B;
--accent-active:#DE2E2F;
--dark-panel:#1C1C1C;
--dark-panel-fg:#FFFFFF;
--dark-panel-fg-muted:#A5A8A4;
--dark-panel-border:#3A3A3A;
--bg:#101112;
--surface:#1F2122;
--surface-sunk:#26282A;
--fg:#FFFFFF;
--fg-muted:#A5A8A4;
--border:#2E3031;
--border-control:#707476;
--border-strong:#FFFFFF;
--focus:#FF3334;
--success:#5FBF85;
--danger:#FF9A93;
--color-page-bg:var(--bg);
--color-card-bg:var(--surface);
--color-card-border:var(--border);
--color-text:var(--fg);
--color-text-muted:var(--fg-muted);
--color-link:var(--fg);
--color-link-hover:var(--fg-muted);
--color-button-primary-bg:var(--accent);
--color-button-primary-fg:var(--accent-fg);
--color-header-bg:var(--bg);
--color-header-fg:var(--fg);
}

/* --------------------------------------------------------------------------
   TOKENS / typography
   -------------------------------------------------------------------------- */
:root{
--font-sans:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-weight-regular:400;
--font-weight-medium:500;
--font-weight-semibold:600;
--font-weight-bold:700;
--text-h1-size:clamp(32px,5vw,56px);--text-h1-lh:1.06;--text-h1-weight:600;--text-h1-tracking:-0.02em;
--text-h2-size:clamp(26px,3.2vw,38px);--text-h2-lh:1.12;--text-h2-weight:600;--text-h2-tracking:-0.01em;
--text-h3-size:22px;--text-h3-lh:1.25;--text-h3-weight:600;--text-h3-tracking:0;
--text-lead-size:18px;--text-lead-lh:1.5;--text-lead-weight:400;
--text-body-size:16px;--text-body-lh:1.6;--text-body-weight:400;
--text-small-size:14px;--text-small-lh:1.5;--text-small-weight:400;
--text-overline-size:12px;--text-overline-lh:1.4;--text-overline-weight:500;--text-overline-tracking:0.14em;
--text-accent-min-size:24px;
--text-accent-min-size-bold:18px;
--numeric-tabular:tabular-nums;
}

/* --------------------------------------------------------------------------
   TOKENS / spacing
   -------------------------------------------------------------------------- */
:root{
--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:40px;
--space-8:48px;
--space-9:56px;
--space-10:72px;
--space-11:96px;
--section-gap-sm:56px;
--section-gap-md:72px;
--section-gap-lg:96px;
--container-max:1200px;
--measure-max:720px;
--gutter:20px;
--bp-mobile:390px;
--bp-tablet:768px;
--bp-desktop:1440px;
--control-height:44px;
--control-height-lg:52px;
--control-padding-x:20px;
--card-padding:24px;
--stripe-width:9px;
--stripe-h-side-left:16px;
--stripe-h-center:30px;
--stripe-h-side-right:22px;
--stripe-gap:6px;
}
@media (min-width:768px){:root{--gutter:32px;--card-padding:28px}}
@media (min-width:1440px){:root{--gutter:48px}}

/* --------------------------------------------------------------------------
   TOKENS / shape
   -------------------------------------------------------------------------- */
:root{
--radius-surface:0;
--radius-control:2px;
--radius-max:2px;
--border-width:1px;
--border-width-strong:2px;
--shadow-none:none;
--focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--focus);
}

/* --------------------------------------------------------------------------
   TOKENS / motion
   -------------------------------------------------------------------------- */
:root{
--duration-fast:160ms;
--duration-base:180ms;
--duration-slow:200ms;
--ease-out:cubic-bezier(0,0,0.2,1);
--transition-control:background-color var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){:root{--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms}}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-size:var(--text-body-size);line-height:var(--text-body-lh);font-weight:var(--text-body-weight);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
a{color:var(--color-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--duration-base) var(--ease-out)}
a:hover{color:var(--color-link-hover)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-control)}
img,video{max-width:100%;display:block}
.ds-h1{font-size:var(--text-h1-size);line-height:var(--text-h1-lh);font-weight:var(--text-h1-weight);letter-spacing:var(--text-h1-tracking);margin:0;text-wrap:balance}
.ds-h2{font-size:var(--text-h2-size);line-height:var(--text-h2-lh);font-weight:var(--text-h2-weight);letter-spacing:var(--text-h2-tracking);margin:0;text-wrap:balance}
.ds-h3{font-size:var(--text-h3-size);line-height:var(--text-h3-lh);font-weight:var(--text-h3-weight);margin:0}
.ds-lead{font-size:var(--text-lead-size);line-height:var(--text-lead-lh);font-weight:var(--text-lead-weight);margin:0;text-wrap:pretty}
.ds-body{font-size:var(--text-body-size);line-height:var(--text-body-lh);font-weight:var(--text-body-weight);margin:0;text-wrap:pretty}
.ds-small{font-size:var(--text-small-size);line-height:var(--text-small-lh);font-weight:var(--text-small-weight);margin:0}
.ds-overline{font-size:var(--text-overline-size);line-height:var(--text-overline-lh);font-weight:var(--text-overline-weight);letter-spacing:var(--text-overline-tracking);text-transform:uppercase;margin:0}
.ds-muted{color:var(--fg-muted)}
.ds-tabular{font-variant-numeric:tabular-nums}
.ds-container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.ds-measure{max-width:var(--measure-max)}

/* ==========================================================================
   САЙТ
   ========================================================================== */

/* Ширина контейнера. Токен дизайн-системы даёт жёсткие 1200px, и на мониторах
   шире 1440 поля растут вместе с окном, а контент остаётся зажат в середине.
   Формула: до 1440 контейнер равен 1200, дальше растёт вместе с окном, удерживая
   боковое поле ровно на 120px, и упирается в 1560.
   Единица vw не используется: она считает полосу прокрутки, а весь первый экран
   построен на процентах от ширины содержимого.
   Значение обязано быть одним и тем же у секций, шапки, подвала и первого экрана,
   иначе вертикаль левого края разъедется. */
:root{--container-max:min(max(1200px, 100% - 240px), 1560px)}

/* hidden обязан перебивать display у flex- и grid-контейнеров:
   на нём держится скрытие пустых значений из панели управления */
[hidden]{display:none !important}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{flex:none;display:block}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Плавный переход по якорям выключается вместе со всей анимацией */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* --------------------------------------------------------------------------
   Компонент Button
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-size:16px;font-weight:500;line-height:1;
  height:48px;min-height:44px;padding:0 20px;
  border:1px solid transparent;border-radius:var(--radius-control);
  cursor:pointer;text-decoration:none;white-space:nowrap;user-select:none;
  box-shadow:none;transition:var(--transition-control);
  -webkit-tap-highlight-color:transparent;
}
.btn--lg{height:52px;padding:0 28px}
.btn--sm{height:44px;padding:0 20px}
.btn--full{width:100%}
.btn--primary,a.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn--secondary,a.btn--secondary{background:transparent;border-color:var(--fg);color:var(--fg)}
.btn__label{white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover,a.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-fg)}
  .btn--secondary:hover,a.btn--secondary:hover{background:rgba(255,255,255,0.10);border-color:var(--fg);color:var(--fg)}
}
.btn--primary:active,a.btn--primary:active{background:var(--accent-active);border-color:var(--accent-active);color:var(--accent-fg)}
.btn--secondary:active,a.btn--secondary:active{background:rgba(255,255,255,0.18);color:var(--fg)}
/* .btn выставляет box-shadow:none, а базовое правило :focus-visible имеет ту же
   специфичность и стоит выше по файлу. Без этой строки кольцо на кнопках не рисуется. */
.btn:focus-visible,.chip:focus-visible,.video-frame__play:focus-visible,
.site-header__burger:focus-visible,.service__toggle:focus-visible{box-shadow:var(--focus-ring)}

/* --------------------------------------------------------------------------
   Компонент MessengerChip
   -------------------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 14px;
  border:1px solid var(--border-control);border-radius:var(--radius-control);
  background:transparent;color:var(--fg);
  font-family:var(--font-sans);font-size:15px;font-weight:500;line-height:1;
  text-decoration:none;white-space:nowrap;transition:var(--transition-control);
}
@media (hover:hover) and (pointer:fine){
  .chip:hover{border-color:var(--fg);background:rgba(255,255,255,0.10);color:var(--fg)}
}
.chip:active{border-color:var(--fg);background:rgba(255,255,255,0.18);color:var(--fg)}
.chip__glyph{width:18px;height:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* --------------------------------------------------------------------------
   Компонент Stripes: маркер списка из трёх полос
   -------------------------------------------------------------------------- */
.stripe-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.stripe-list li{display:flex;align-items:flex-start;gap:12px}
.stripe-list__bullet{
  display:inline-flex;align-items:center;gap:2px;flex:none;height:calc(1em * 1.6);
}
.stripe-list__bullet i{display:block;width:3px;background:var(--accent);flex:none}
.stripe-list__bullet i:nth-child(1){height:6px}
.stripe-list__bullet i:nth-child(2){height:11px}
.stripe-list__bullet i:nth-child(3){height:8px}
.stripe-list__text{font-size:16px;line-height:1.6}

/* --------------------------------------------------------------------------
   Компонент Header
   -------------------------------------------------------------------------- */
.site-header{
  background:var(--bg);color:var(--fg);border-bottom:1px solid var(--border);
  z-index:20;
}
/* Шапка на всю ширину окна. Левый отступ повторяет формулу --hero-text-left:
   логотип и меню стоят на сетке контента (168px на 1440, 1600 и 1800), а телефон
   и кнопка «Записаться» прижаты к правому краю окна с отступом --gutter (48/32/20),
   вровень с фотографией первого экрана, которая с 19.09.2026 идёт до края. */
.site-header__bar{
  padding:0 var(--gutter) 0 calc(50% - min(var(--container-max) / 2, 50%) + var(--gutter));
  height:64px;display:flex;align-items:center;gap:32px;
}
/* Вертикальные отступы дают ссылке 43px (23px знака + 2x10px), как у ссылок меню:
   цель касания от 24px. Размер самого знака не меняется, высота шапки тоже. */
.site-header__logo{display:flex;flex:none;padding:10px 0}
.site-header__logo img{height:23px;width:auto}
.site-nav{display:flex;gap:24px;margin-left:8px}
.site-nav a,.site-header__phone{
  color:var(--fg);text-decoration:none;font-size:15px;font-weight:500;line-height:1;
  padding:14px 0;transition:var(--transition-control);
}
@media (hover:hover) and (pointer:fine){
  .site-nav a:hover,.site-header__phone:hover{color:var(--fg-muted)}
}
.site-header__actions{margin-left:auto;display:flex;align-items:center;gap:16px}
.site-header__phone{
  display:inline-flex;align-items:center;gap:8px;font-size:16px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.site-header__burger{
  width:44px;height:44px;display:none;align-items:center;justify-content:center;
  background:transparent;color:var(--fg);border:0;cursor:pointer;
  border-radius:var(--radius-control);
}
.site-nav--mobile{
  display:none;border-top:1px solid var(--border);
  padding:8px var(--gutter) 20px;
}
.site-nav--mobile a{font-size:18px;padding:14px 0;border-bottom:1px solid var(--border);display:block}
.site-nav--mobile .site-header__phone{font-size:18px;padding:16px 0 8px;display:inline-flex}

/* --------------------------------------------------------------------------
   Компонент Footer
   -------------------------------------------------------------------------- */
.site-footer{background:var(--bg);color:var(--fg);border-top:1px solid var(--border)}
.site-footer__inner{max-width:var(--container-max);margin:0 auto;padding:56px var(--gutter) 24px}
.site-footer__cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px}
.site-footer__brand{display:grid;gap:20px;align-content:start}
.site-footer__brand img{height:26px;width:auto;justify-self:start}
.site-footer__overline{color:var(--fg-muted);margin-bottom:12px}
.site-footer__row{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.6}
.site-footer__row + .site-footer__row{margin-top:12px}
.site-footer__row .icon{margin-top:3px;color:var(--fg-muted)}
.site-footer__row a{color:inherit}
.site-footer__phone{color:inherit;text-decoration:none;font-variant-numeric:tabular-nums;font-weight:500}
.site-footer__hours{display:grid;grid-template-columns:auto 1fr;gap:0 16px;font-variant-numeric:tabular-nums}
.site-footer__hours span:first-child{color:var(--fg-muted);white-space:nowrap}
.site-footer__hours span:last-child{white-space:nowrap}
.site-footer__legal{
  margin-top:48px;padding-top:20px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;line-height:1.5;color:var(--fg-muted);
}
.site-footer__legal a{color:inherit}

/* --------------------------------------------------------------------------
   Компонент StickyBar (только мобильная)
   -------------------------------------------------------------------------- */
.sticky-bar > .btn{min-width:0;padding-left:12px;padding-right:12px}
.sticky-bar{
  display:none;position:sticky;bottom:0;left:0;right:0;z-index:30;
  background:var(--bg);border-top:1px solid var(--border);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));
  grid-template-columns:1fr 1fr;gap:12px;
}

/* --------------------------------------------------------------------------
   Секции: общий каркас
   -------------------------------------------------------------------------- */
.section__head{display:grid;gap:16px;max-width:var(--measure-max)}
.section__body{display:grid;gap:20px;max-width:640px}
.section__actions{display:flex}
.section__actions--pad{padding-top:8px}

/* --------------------------------------------------------------------------
   1. Первый экран
   -------------------------------------------------------------------------- */
.hero{
  --hero-pad:var(--gutter);
  --hero-container:var(--container-max);
  --hero-text-left:calc(50% - min(var(--hero-container) / 2, 50%) + var(--hero-pad));
  --hero-text-width:440px;
  --hero-text-right:calc(var(--hero-text-left) + var(--hero-text-width));
  --hero-media-left:calc(var(--hero-text-right) - 128px);
  /* Фотография идёт до правого края окна (правка заказчика от 19.09.2026: раньше
     справа оставалась пустая чёрная полоса 168px, симметричная левому отступу
     текста). Левый край фото и градиента по-прежнему 480 на 1440, 1600 и 1800,
     текстовая колонка не двигается: 168…608. Симметрии слева-справа больше нет,
     это намеренно. */
  --hero-media-right:0px;
  position:relative;height:576px;overflow:hidden;
}
.hero__media{position:absolute;top:0;right:var(--hero-media-right);bottom:0;left:var(--hero-media-left)}
/* Кроп: на 1440 бокс 960x576, кадр масштабируется по высоте до 1024px, при правой
   привязке от крыла машины до правого края остаётся 55px, бампер целиком в кадре,
   слева срезается 64px под сплошной частью градиента. На 1600 и шире бокс шире
   кадра по высоте, cover масштабирует по ширине и ровно подрезает верх и низ.
   Любой сдвиг влево уводит левую фару под градиент, поэтому right center. */
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:right center}
/* Накладка лежит ровно на боксе фотографии: левый и правый края общие.
   Градиент задан в пикселях от левого края и гаснет на 320px, поэтому
   контрольные цифры (сплошной чёрный до 160px от края) не зависят от ширины. */
.hero__scrim{
  position:absolute;top:0;bottom:0;left:var(--hero-media-left);right:var(--hero-media-right);
  background:linear-gradient(90deg, var(--bg) 0, var(--bg) 160px, rgba(16,17,18,0.5) 224px, rgba(16,17,18,0.18) 272px, rgba(16,17,18,0) 320px);
  pointer-events:none;
}
.hero__inner{
  position:relative;z-index:1;max-width:var(--hero-container);margin:0 auto;
  padding:48px var(--hero-pad) 72px;height:576px;display:grid;align-content:center;
}
.hero__text{display:grid;gap:24px;max-width:var(--hero-text-width)}
.hero__cta{display:flex;padding-top:8px}
.hero__facts{
  display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;
  font-size:16px;line-height:1.6;color:var(--fg-muted);font-variant-numeric:tabular-nums;
}
.hero__facts--mobile{display:none}

/* --------------------------------------------------------------------------
   2. Услуги
   -------------------------------------------------------------------------- */
.s-services > .ds-container{display:grid;gap:40px}
/* Полные описания услуг читаются в двух колонках; ниже 900px остаётся аккордеон. */
.services__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.service{
  display:flex;flex-direction:column;gap:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-surface);
  padding:var(--card-padding);color:var(--fg);height:100%;
}
.service__title{margin:0;font-size:var(--text-h3-size);line-height:var(--text-h3-lh);font-weight:var(--text-h3-weight);text-wrap:balance}
.service__desc{margin:0;font-size:16px;line-height:1.6;color:var(--fg-muted);text-wrap:pretty;white-space:pre-line}
.s-services .section__head .ds-lead{white-space:pre-line}

/* --------------------------------------------------------------------------
   3. Почему нет цен
   -------------------------------------------------------------------------- */
.s-prices{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.s-prices > .ds-container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}

/* --------------------------------------------------------------------------
   4. Команда
   -------------------------------------------------------------------------- */
.s-team > .ds-container{display:grid;gap:40px}
.team__head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.team__head-body{display:grid;gap:16px;max-width:640px}
/* Карточки мастеров сохраняют ширину портрета и стоят по центру секции. */
.team__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:720px;margin-inline:auto}
.team__cards.team__cards--single{grid-template-columns:minmax(0,1fr);width:min(100%,352px);max-width:352px}
.master-card{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-surface);
  color:var(--fg);overflow:hidden;
}
.master-card__photo{aspect-ratio:4 / 5;background:var(--surface-sunk);border-bottom:1px solid var(--border);position:relative}
.master-card__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.master-card__body{padding:16px 20px 20px;display:grid;gap:4px}
.master-card__name{margin:0;font-size:22px;line-height:1.25;font-weight:600}
.master-card__role{font-size:16px;line-height:1.6;color:var(--fg-muted)}
.team__quote{margin:0;display:grid;gap:12px;max-width:720px;padding-top:16px}
.team__quote blockquote{margin:0;font-size:22px;line-height:1.25;font-weight:600;text-wrap:pretty}
.team__quote figcaption{font-size:16px;line-height:1.6;color:var(--fg-muted)}

/* Один мастер: портрет и рассказ занимают общую композицию по высоте. */
@media (min-width:900px){
  .s-team > .ds-container{
    max-width:1200px;grid-template-columns:352px minmax(0,1fr);
    grid-template-rows:auto 1fr;grid-template-areas:"portrait story" "portrait quote";
    gap:32px clamp(32px,4vw,64px);align-items:start;
  }
  .team__head{grid-area:story;grid-template-columns:minmax(0,1fr);gap:24px;max-width:640px}
  .team__cards.team__cards--single{grid-area:portrait;margin-inline:0}
  .team__quote{grid-area:quote;max-width:640px;padding-top:24px;border-top:1px solid var(--border)}
}


/* --------------------------------------------------------------------------
   5. Как мы работаем
   -------------------------------------------------------------------------- */
.process__inner{
  border-top:1px solid var(--border);padding-top:48px;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start;
}
.process__text{display:grid;gap:24px;max-width:640px}
.process__points{padding-top:8px}

/* --------------------------------------------------------------------------
   6. Как это выглядит вживую
   -------------------------------------------------------------------------- */
.s-video > .ds-container{display:grid;gap:40px}
.video__row{display:grid;grid-template-columns:repeat(3,minmax(0,320px));gap:16px}
/* От 1441px плитка растёт до 464px. Это нативная ширина исходных роликов,
   выше неё не поднимаем: апскейла не будет. До 1440 включительно 320px, как в макете. */
@media (min-width:1441px){.video__row{grid-template-columns:repeat(3,minmax(0,464px))}}
.video-frame{margin:0;display:grid;gap:8px}
.video-frame__box{
  position:relative;aspect-ratio:9 / 16;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-surface);overflow:hidden;
}
.video-frame__box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--surface)}
.video-frame__poster{position:absolute;inset:0}
.video-frame__poster img{width:100%;height:100%;object-fit:cover}
.video-frame__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--accent-fg);border:0;border-radius:var(--radius-control);
  cursor:pointer;padding:0;transition:var(--transition-control);
}
@media (hover:hover) and (pointer:fine){
  .video-frame__play:hover{background:var(--accent-hover)}
}
.video-frame__play .icon{margin-left:2px}
.video-frame figcaption{font-size:14px;line-height:1.5;color:var(--fg-muted)}

/* --------------------------------------------------------------------------
   7. Работы
   -------------------------------------------------------------------------- */
.s-works > .ds-container{display:grid;gap:40px}
.works__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px}
.work{margin:0;display:grid;gap:8px;min-width:0}
.work__media{
  position:relative;aspect-ratio:4 / 3;background:var(--surface-sunk);
  border:1px solid var(--border);overflow:hidden;
}
.work__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Подпись переносится на вторую строку вместо обрезки многоточием.
   min-height резервирует две строки (14px * 1.5 * 2), поэтому перенос
   в одной плитке не сдвигает соседние: ряд стоит ровно. */
.work__caption{font-size:14px;line-height:1.5;min-height:42px}

/* --------------------------------------------------------------------------
   8. Как проходит запись
   -------------------------------------------------------------------------- */
.s-steps > .ds-container{display:grid;gap:40px}
.steps__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.steps__item{border-top:1px solid var(--border-strong);padding-top:16px;display:grid;gap:12px;align-content:start}
.steps__num{
  font-size:var(--text-h2-size);line-height:var(--text-h2-lh);font-weight:600;
  letter-spacing:var(--text-h2-tracking);font-variant-numeric:tabular-nums;
}
.steps__text{font-size:16px;line-height:1.6;text-wrap:pretty}
.steps__note{font-size:18px;line-height:1.5;color:var(--fg-muted);max-width:640px}

/* --------------------------------------------------------------------------
   9. Отзывы
   -------------------------------------------------------------------------- */
.s-reviews{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.s-reviews > .ds-container{display:grid;gap:40px}
.reviews__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}
.reviews__head-text{display:grid;gap:16px}
.reviews__score{display:flex;gap:24px;align-items:baseline;font-variant-numeric:tabular-nums}
.reviews__score-value{font-size:64px;line-height:1;font-weight:600;letter-spacing:-0.02em}
.reviews__score-meta{display:grid;gap:2px;font-size:18px;line-height:1.5}
.reviews__head-action{display:flex;justify-content:flex-end;padding-bottom:8px}
.reviews__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* Дорожка под карточку должна тянуться на всю оставшуюся высоту ряда.
   С align-content:start дорожка сжималась по содержимому, и height:100%
   у .review-card считался от высоты контента, а не от высоты обёртки:
   обёртки стояли ровно, а рамки карточек расходились на 26px. */
.review{display:grid;grid-template-rows:auto 1fr;gap:12px;min-width:0}
.review__topic{
  font-size:13px;line-height:1.4;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--fg-muted);
}
.review-card{
  display:flex;flex-direction:column;gap:16px;min-width:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-surface);
  padding:var(--card-padding);color:var(--fg);height:100%;
}
/* max-width включается только на широком контейнере: при 1440 колонка отзыва
   уже 640px, и правило ни на что не влияет. */
.review-card blockquote{margin:0;font-size:16px;line-height:1.6;text-wrap:pretty;flex:1;min-width:0;max-width:640px}
.review-card footer{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--border);font-size:14px;line-height:1.5;
}
.review-card__who{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;min-width:0}
.review-card__name{font-weight:500;white-space:nowrap}
.review-card__date{color:var(--fg-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.review-card__source{
  display:inline-flex;align-items:center;gap:6px;color:var(--fg-muted);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap;
}

/* --------------------------------------------------------------------------
   10. Контакты
   -------------------------------------------------------------------------- */
.s-contacts > .ds-container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.contacts__col{display:grid;gap:24px}
.contacts__lines{display:grid;gap:8px;font-size:16px;line-height:1.6}
.contacts__lines p{margin:0}
.contacts__phone{
  font-size:var(--text-h2-size);line-height:var(--text-h2-lh);font-weight:600;
  letter-spacing:var(--text-h2-tracking);font-variant-numeric:tabular-nums;
  color:var(--fg);text-decoration:none;justify-self:start;
}
/* Карта вставляется скриптом, когда блок контактов подходит к области видимости
   (IntersectionObserver с запасом в пол-экрана). До этого код виджета лежит
   в <template data-cms-embed-key="contacts.map">: содержимое template инертно
   по спецификации HTML, iframe внутри него не делает запросов. До вставки
   контейнер это пустая утопленная плоскость на токенах сайта, пропорции держит
   он же, iframe растягивается на него абсолютом. Подпись про cookie Яндекса стоит
   под контейнером, а не внутри: внутри её закрыла бы карта. */
.contacts__map-col{display:grid;gap:12px;align-content:start}
.contacts__map{
  position:relative;aspect-ratio:4 / 3;background:var(--surface-sunk);
  border:1px solid var(--border);overflow:hidden;
}
.contacts__map-hint{margin:0;font-size:14px;line-height:1.5;color:var(--fg-muted)}
/* !important перебивает inline width/height/style из кода вставки Яндекса
   (там width="560" height="400" style="position:relative"), иначе пропорции
   контейнера не сработают */
.contacts__map iframe{
  position:absolute !important;inset:0;width:100% !important;height:100% !important;
  border:0;display:block;background:var(--surface-sunk);
}
/* Замок для тач-экранов: пока он стоит, палец по карте прокручивает страницу,
   а не двигает карту. Снимается нажатием, возвращается при прокрутке страницы.
   На мыши замка нет: класс ставит JS только при (pointer: coarse). */
.map-lock{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding:16px;margin:0;border:0;background:transparent;cursor:pointer;
  font-family:var(--font-sans);font-size:14px;font-weight:500;line-height:1;color:var(--fg);
  -webkit-tap-highlight-color:transparent;
}
.map-lock span{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  background:var(--bg);border:1px solid var(--border-control);border-radius:var(--radius-control);
}
.map-lock:focus-visible{box-shadow:none}
.map-lock:focus-visible span{box-shadow:var(--focus-ring)}
.contacts__map.is-locked iframe{pointer-events:none}
.contacts__map:not(.is-locked) .map-lock{display:none}

/* --------------------------------------------------------------------------
   11. Форма заявки
   -------------------------------------------------------------------------- */
.s-form > .ds-container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.form-panel{background:var(--surface);border:1px solid var(--border);padding:var(--card-padding)}
/* Форма перестаёт расти вместе с колонкой: на 1800 поле ввода было 768px.
   Порог 1441px, а не любой ширины: на 1440 панель равна 616px, это значение
   макета (сетка 5fr/7fr), и трогать его нельзя. Позиция панели не меняется,
   свободное место остаётся справа. */
@media (min-width:1441px){.form-panel{max-width:600px}}
.lead-form{display:grid;gap:20px}
.lead-form__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:grid;gap:6px}
.field__label{font-size:14px;line-height:1.5;font-weight:500;color:var(--fg)}
.field__req{color:var(--fg-muted)}
.field input,.field textarea,.field select{
  width:100%;padding:0 14px;margin:0;
  font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--fg);
  background:var(--surface);border:1px solid var(--border-control);
  border-radius:var(--radius-control);outline:none;transition:var(--transition-control);
  appearance:none;
}
.field input,.field select{height:48px}
.field textarea{padding:12px 14px;resize:vertical;min-height:96px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--fg)}
.field--tabular input{font-variant-numeric:tabular-nums}
.field__msg{font-size:14px;line-height:1.5;color:var(--danger)}
.field [aria-invalid="true"]{border-color:var(--danger)}
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A5A8A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:44px;
}
.consent{display:grid;gap:6px}
/* На широком контейнере подпись согласия умещается в одну строку и высота
   цели касания падает до 21px. Минимум 24px держим независимо от переносов. */
.consent__label{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;cursor:pointer;min-height:24px}
.consent__label input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--fg)}
.lead-form__submit{display:grid;gap:12px;padding-top:4px}
.lead-form__note{font-size:14px;line-height:1.5;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.form-status{margin:0;font-size:18px;line-height:1.5;font-variant-numeric:tabular-nums}
.form-status a{color:inherit}
/* Номер телефона в сообщениях формы не рвётся по дефису: тот же приём, что у номера
   в шапке (.site-header__phone, white-space:nowrap). В сообщении об успехе номер стоит
   в своём span с ключом form.success_phone, в сообщении об ошибке внутри ссылки tel.
   Неразрывные пробелы и дефисы в тексте не используем: глиф U+2011 в Golos Text
   не проверен, вместо номера можно получить квадраты. */
.form-status a,.form-status__phone{white-space:nowrap}
.honeypot{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   Служебные страницы
   -------------------------------------------------------------------------- */
.legal-page > .ds-container{display:grid;gap:24px;max-width:var(--measure-max)}
/* Юридический текст: политика и согласие. Пункты «1.1.» набраны обычными абзацами,
   номер внутри текста, иначе браузер добавит свою нумерацию поверх авторской.
   h2 идёт с классом ds-h3: токен даёт фиксированные 22px, переопределение не нужно.
   Строка «Редакция от» и тело документа лежат в грид-контейнере с gap 24px;
   тело получает ещё 16px сверху, чтобы служебная строка читалась при заголовке,
   а не при тексте. */
.legal-doc__rev{margin:0;font-size:14px;line-height:1.5;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.legal-doc{margin-top:16px;font-size:16px;line-height:1.6;color:var(--fg)}
.legal-doc h2{margin:40px 0 16px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc p{margin:0 0 16px;text-wrap:pretty}
.legal-doc ul{margin:0 0 16px;padding-left:24px}
.legal-doc li{margin:0 0 8px}
.legal-doc li:last-child{margin-bottom:0}
.legal-doc > :last-child{margin-bottom:0}
/* Ссылки в тексте: подчёркивание и цвет как у остальных ссылок сайта, кольцо фокуса
   от глобального :focus-visible. Адреса длинные, на 390 им разрешён перенос внутри слова. */
.legal-doc a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-doc a:hover{color:var(--fg-muted)}

/* ==========================================================================
   ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ. Десктоп 96px, мобильная 56px, как в макете.
   ========================================================================== */
.s-services{padding:56px 0}
.s-prices{padding:56px 0}
.s-team{padding:56px 0}
.s-process{padding:0 0 56px}
.s-video{padding:0 0 56px}
.s-works{padding:0 0 56px}
.s-steps{padding:0 0 56px}
.s-reviews{padding:56px 0}
.s-contacts{padding:56px 0}
.s-form{padding:0 0 56px}
.legal-page{padding:56px 0}

@media (min-width:900px){
  .s-services{padding:0 0 96px}
  .s-prices{padding:96px 0}
  .s-team{padding:96px 0}
  .s-process{padding:0 0 96px}
  .s-video{padding:0 0 96px}
  .s-works{padding:0 0 96px}
  .s-steps{padding:0 0 96px}
  .s-reviews{padding:96px 0}
  .s-contacts{padding:96px 0}
  .s-form{padding:0 0 96px}
  .legal-page{padding:96px 0}
}

/* ==========================================================================
   ДЕСКТОП: шапка липкая, StickyBar скрыт
   ========================================================================== */
@media (min-width:900px){
  html{scroll-padding-top:64px}
  .site-header{position:sticky;top:0}
}

/* ==========================================================================
   ПЛАНШЕТ И МОБИЛЬНАЯ: до 899px схема артборда 390
   ========================================================================== */
@media (max-width:899px){
  .ds-h2{line-height:1.18}

  /* шапка */
  .site-nav{display:none}
  .site-header__bar .site-header__phone,
  .site-header__bar .btn{display:none}
  .site-header__burger{display:flex}
  .site-nav--mobile[data-open="true"]{display:grid;gap:0}
  .sticky-bar{display:grid}

  /* 1. Первый экран */
  .hero{height:auto;overflow:visible;display:grid;padding:0 0 56px;gap:28px}
  .hero__media{position:static}
  .hero__media img{width:100%;height:auto;aspect-ratio:16 / 9;border-bottom:1px solid var(--border)}
  .hero__scrim{display:none}
  .hero__inner{position:static;height:auto;max-width:none;padding:0 var(--gutter);display:block}
  .hero__text{max-width:none;gap:20px}
  .hero__cta{padding-top:0}
  .hero__cta .btn{width:100%}
  .hero__facts{display:none}
  .hero__facts--mobile{display:grid;gap:2px;font-size:14px;line-height:1.5}

  /* 2. Услуги: аккордеон */
  .s-services > .ds-container{gap:24px}
  .section__head{gap:12px}
  .services__grid{
    display:block;grid-template-columns:none;gap:0;
    background:var(--surface);border:1px solid var(--border);
  }
  .service{
    display:block;grid-column:auto;background:transparent;border:0;
    border-top:1px solid var(--border);padding:0;height:auto;
  }
  .services__grid .service:first-child{border-top:0}
  .service__title{font-size:18px;line-height:1.3}
  .service__toggle{
    width:100%;min-height:44px;margin:0;padding:16px 20px;border:0;background:transparent;
    color:inherit;font:inherit;text-align:left;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    border-radius:var(--radius-control);
  }
  .service__chevron{
    display:flex;flex:none;transform:rotate(90deg);
    transition:transform var(--duration-base) var(--ease-out);
  }
  .service__toggle[aria-expanded="true"] .service__chevron{transform:rotate(-90deg)}
  .service__body{padding:0 20px 20px}
  .service__desc{font-size:16px}

  /* Мера строки: до 75 символов при одноколоночной раскладке */
  .s-prices .section__body,.team__head-body,.process__text,.steps__note,
  .service__desc,.review-card blockquote,.contacts__lines,.steps__text,
  .team__quote blockquote,.section__head .ds-lead,
  .hero__text .ds-lead{max-width:600px}
  /* адрес длинный и набран мелким кеглем, ему нужна мера уже */
  .site-footer__row,.contacts__address{max-width:560px}

  /* 3. Почему нет цен */
  .s-prices > .ds-container{display:grid;grid-template-columns:none;gap:20px}
  .s-prices .section__body{gap:20px;max-width:600px}
  .s-prices .ds-lead{font-size:16px;line-height:1.6}
  .s-prices .btn{width:100%}

  /* 4. Команда */
  .s-team > .ds-container{gap:24px}
  .team__head{grid-template-columns:none;gap:16px}
  .team__head-body{gap:16px;max-width:600px}
  .team__head .ds-lead{font-size:16px;line-height:1.6}
  .team__cards{grid-template-columns:none;gap:16px;max-width:none}
  .team__quote{padding-top:8px}

  /* 5. Как мы работаем */
  .process__inner{grid-template-columns:none;gap:20px;padding-top:32px}
  .process__text{gap:20px;max-width:600px}
  .process__points{padding-top:4px}
  .stripe-list{gap:16px}

  /* 6. Ролики: горизонтальная лента */
  .s-video > .ds-container{gap:24px;padding-inline:0}
  .s-video .section__head{padding-inline:var(--gutter)}
  .video__row{
    display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;
    padding-inline:var(--gutter);scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gutter);scrollbar-width:none;
  }
  .video__row::-webkit-scrollbar{display:none}
  .video__row > *{flex:none;width:318px;scroll-snap-align:start}

  /* 7. Работы */
  .s-works > .ds-container{gap:24px}
  .works__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .work__media{aspect-ratio:1 / 1}

  /* 8. Как проходит запись */
  .s-steps > .ds-container{gap:24px}
  .steps__list{display:block;grid-template-columns:none;gap:0}
  .steps__item{
    display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;
    padding:16px 0;border-top:1px solid var(--border);align-items:start;
  }
  .steps__num{font-size:22px;line-height:1.25;letter-spacing:0}
  .steps__text{padding-top:2px}
  .steps__note{font-size:16px;line-height:1.6;text-wrap:pretty}

  /* 9. Отзывы */
  .s-reviews > .ds-container{gap:24px}
  .reviews__head{grid-template-columns:none;gap:24px;align-items:start}
  .reviews__head-text{gap:24px}
  .reviews__score{gap:20px}
  .reviews__score-value{font-size:48px}
  .reviews__score-meta{font-size:16px}
  .reviews__head-action{justify-content:stretch;padding-bottom:0;order:3}
  .reviews__head-action .btn{width:100%}
  .reviews__grid{grid-template-columns:none;gap:20px}
  .review{gap:8px}

  /* 10. Контакты */
  .s-contacts > .ds-container{grid-template-columns:none;gap:20px}
  .contacts__col{gap:20px}
  .contacts__address{font-size:14px;line-height:1.5}
  /* квадрат на всю ширину, но не выше 60% экрана: карта не должна съедать страницу */
  .contacts__map{aspect-ratio:1 / 1;max-height:60vh}
  .contacts__col .btn{width:100%}

  /* 11. Форма */
  .s-form > .ds-container{grid-template-columns:none;gap:24px}
  .lead-form__pair{grid-template-columns:none;gap:20px}

  /* Подвал */
  .site-footer__inner{padding:40px var(--gutter) 24px}
  .site-footer__cols{grid-template-columns:1fr;gap:32px}
  .site-footer__legal{margin-top:32px}
}

/* Планшетная полка: схема мобильная, но сетки не растягиваются в одну колонку */
@media (min-width:600px) and (max-width:899px){
  .team__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .works__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reviews__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lead-form__pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .hero__cta .btn,.s-prices .btn,.contacts__col .btn,.reviews__head-action .btn{width:auto}
  .reviews__head-action{justify-content:flex-start}
}

/* Между 900 и 1199 пять колонок шагов не помещаются */
@media (min-width:900px) and (max-width:1199px){
  .steps__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Между 900 и 1099 шапка целиком не помещается: логотип, шесть пунктов меню,
   телефон и кнопка дают около 1050px. Убираем телефон и поджимаем промежутки. */
@media (min-width:900px) and (max-width:1099px){
  .site-header__bar{gap:20px}
  .site-nav{gap:16px;margin-left:0}
  .site-header__bar .site-header__phone{display:none}
}

/* Кнопки дизайн-системы не переносят подпись. Самая длинная, «Смотреть фото и видео
   на Яндексе», требует 349px и на 320 разрывает страницу. Ниже 600px разрешаем перенос:
   пока текст в одну строку, геометрия кнопки не меняется. */
@media (max-width:599px){
  .btn{white-space:normal;height:auto;min-height:48px;padding-top:10px;padding-bottom:10px;text-align:center}
  .btn--lg{height:auto;min-height:52px}
  .btn--sm{height:auto;min-height:44px}
  .btn__label{white-space:normal}
}

/* Цель касания не меньше 24px. Ссылки набраны мелким кеглем и по строке дают 17-21px.
   Вертикальный внутренний отступ поднимает область попадания, не сдвигая вёрстку:
   у строчных ссылок он не меняет высоту строки, у ссылок подвала добавляет 4px к ряду. */
.review-card__source{padding-block:2px}
.site-footer__legal a{padding-block:2px}
.consent__label a{padding-block:4px}