/* Adams Detailing — раскладка лендинга.
   Сетка: одна колонка секций на тёмной базе, секции-паузы в теме cream.
   Воздух между секциями — space-7 (120px), внутри — space-6 / space-5. */

*,*::before,*::after{box-sizing:border-box}

/* Перебивает display:flex на .l-menu и .l-form__ok — иначе hidden не работает */
[hidden]{display:none !important}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 16px/26px var(--font-sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%}

/* Картинки обёрнуты в <picture>, чтобы отдавать WebP с запасным JPEG.
   display:contents убирает саму обёртку из раскладки — иначе правила вида
   `.ds-svc__photo img{height:100%}` считали бы высоту от <picture>, а не
   от рамки, и кадрирование object-fit поехало бы. */
picture{display:contents}

a{color:inherit}

h1,h2,h3,h4,p,figure,blockquote,dl,dt,dd{margin:0}

::selection{background:var(--bronze);color:var(--on-bronze)}

.l-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:14px 24px;border-radius:var(--radius-pill);
  background:var(--bronze);color:var(--on-bronze);
  font:600 14px/20px var(--font-sans);text-decoration:none;
}
.l-skip:focus{left:16px;top:16px}
.l-skip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Единое кольцо фокуса для ссылок, у которых нет своего класса-компонента.
   Без него эти элементы показывали бы системное кольцо браузера: в Chrome оно
   видно, а в Safari на тёмном фоне почти сливается. */
.ds-nav__logo:focus-visible,
.l-menu__item:focus-visible,
.l-menu__foot a:focus-visible,
.l-footer__links a:focus-visible,
.l-footer__addr:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:var(--radius-sm);
}

/* ---------- Оболочка и сетка ---------- */

.l-wrap{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  /* 16px на телефоне → 40px на десктопе, без ступенек */
  padding-inline:clamp(16px, 3vw, 40px);
}

.l-section{
  background:var(--ground);
  color:var(--ink);
  /* Воздух между секциями: 64px на телефоне → 120px (space-7) на десктопе */
  padding-block:clamp(64px, 8.4vw, 120px);
}

.l-section--flush{padding-block:0}

/* Шапка секции: eyebrow с номером, заголовок, вводка */
.l-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(24px, 3.4vw, 40px);
  margin-bottom:clamp(32px, 4.6vw, 64px);
}
.l-head__main{max-width:56ch;min-width:0}
.l-head__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(32px, 4.8vw, 64px);
  line-height:1.02;
  letter-spacing:-.015em;
  margin-top:var(--space-3);
  text-wrap:balance;
  overflow-wrap:break-word;
}
.l-head__lead{
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.5;
  color:var(--muted);
  max-width:52ch;
  margin-top:var(--space-4);
}

.l-note{
  font:500 13px/20px var(--font-sans);
  color:var(--muted);
  max-width:60ch;
}

/* ---------- Навигация ---------- */

.l-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  display:flex;
  justify-content:center;
  padding:16px var(--space-3);
  padding-top:calc(16px + env(safe-area-inset-top, 0px));
  pointer-events:none;
  transition:transform .4s ease-out;
}
/* Капсула непрозрачная и на узком экране перекрывала бы текст — убираем её при
   прокрутке вниз и возвращаем, как только пользователь пошёл вверх */
.l-nav[data-hidden="true"]{transform:translateY(-150%)}
/* Капсула уехала вверх, но Shift+Tab может вернуть фокус внутрь неё —
   возвращаем её на место, иначе фокус оказался бы за краем экрана */
.l-nav[data-hidden="true"]:focus-within{transform:none}
.l-nav .ds-nav{pointer-events:auto;max-width:100%}

/* Кнопка звонка в шапке — мельче обычной .ds-round (56px), под высоту бургера */
.l-nav__call{width:48px;height:48px}

/* Порог тот же, что у .ds-nav__item в components.css: пункты ушли — появился бургер */
.l-nav__burger{display:none}
@media (max-width: 640px){
  .l-nav__burger{display:grid;width:48px;height:48px}
}

/* Меню на весь экран (мобильное) */
.l-menu{
  position:fixed;
  inset:0;
  z-index:70;
  background:var(--ground);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--space-2);
  padding:var(--space-6) var(--space-5);
  padding-top:calc(var(--space-6) + env(safe-area-inset-top, 0px));
}
.l-menu__item{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(32px, 11vw, 48px);
  line-height:1.15;
  letter-spacing:-.015em;
  text-decoration:none;
  color:var(--ink);
  padding-block:var(--space-2);
}
.l-menu__close{position:absolute;top:calc(16px + env(safe-area-inset-top, 0px));right:16px}
.l-menu__foot{
  margin-top:var(--space-6);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  font:500 14px/22px var(--font-sans);
  color:var(--muted);
}
.l-menu__foot a{color:var(--accent);text-decoration:none}

/* Плавающая круглая кнопка записи */
.l-ring{
  position:fixed;
  right:0;
  bottom:0;
  z-index:55;
  padding:24px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  transition:opacity .5s ease-out, transform .5s ease-out, visibility .5s;
}
/* Прячем над первым экраном и над самой формой: там кнопка записи уже есть.
   visibility обязателен: без неё прозрачная кнопка остаётся в обходе по Tab,
   и человек с клавиатурой попадает на ссылку, которой не видит. */
.l-ring[data-tucked="true"]{
  opacity:0;
  transform:scale(.8);
  pointer-events:none;
  visibility:hidden;
}
@media (max-width: 900px){
  .l-ring{padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
}

/* ---------- Первый экран ---------- */

.l-hero{
  padding-top:calc(clamp(96px, 11vw, 140px) + env(safe-area-inset-top, 0px));
  padding-bottom:clamp(64px, 8.4vw, 120px);
}
.l-hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.18fr) minmax(0, .82fr);
  gap:clamp(32px, 4.6vw, 64px);
  align-items:center;
}
.l-hero__grid > *{min-width:0}
.l-hero__title{
  font-family:var(--font-display);
  font-weight:500;
  /* Кегль упирается в самое длинное неразрывное слово — «DETAILING» (ширина 6.52
     от кегля). До 1040px заголовок занимает всю ширину: на 390px выходит ровно 48px,
     как просит дизайн-система. Двухколоночный режим разбирается ниже. */
  font-size:clamp(40px, 12.3vw, 104px);
  line-height:.96;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin-top:var(--space-4);
  text-wrap:balance;
  overflow-wrap:break-word;
}
.l-hero__lead{
  font-size:clamp(16px, 1.7vw, 20px);
  line-height:1.5;
  color:var(--muted);
  max-width:46ch;
  margin-top:clamp(24px, 3vw, 40px);
}
.l-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:clamp(32px, 4.6vw, 64px);
}

/* Строка фактов под первым экраном */
.l-facts{
  display:grid;
  /* 3 → 2 → 1, без отдельного медиазапроса */
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap:clamp(20px, 2.4vw, 24px);
  margin-top:clamp(48px, 8.4vw, 120px);
  padding-top:clamp(24px, 3vw, 40px);
  border-top:1px solid var(--hairline);
}
.l-fact__value{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(26px, 3.1vw, 40px);
  line-height:1.05;
  letter-spacing:-.015em;
  color:var(--ink);
  overflow-wrap:break-word;
}
.l-fact__label{
  font:500 13px/20px var(--font-sans);
  color:var(--muted);
  margin-top:var(--space-2);
  max-width:28ch;
}

/* Композиция первого экрана: бронзовый диск, кольца навигации, плашка логотипа */
.l-emblem{
  position:relative;
  aspect-ratio:1;
  width:100%;
  max-width:520px;
  margin-inline:auto;
  display:grid;
  place-items:center;
}
.l-emblem__art{position:absolute;inset:0;width:100%;height:100%}
.l-emblem__plate{
  position:relative;
  width:62%;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--cream);
  border:1px solid var(--hairline);
}
.l-emblem__plate img{display:block;width:100%;height:auto}

/* ---------- Услуги ---------- */

/* Раскладку рядов и ритм блоков даёт сама дизайн-система:
   .ds-section, .ds-row, .ds-stack в components.css */

/* Вводка под центральным заголовком блока услуг */
.l-showcase__lead{
  max-width:62ch;
  margin:0 auto;
  margin-top:calc(clamp(32px, 4.6vw, 64px) * -0.5);
  text-align:center;
  font-size:clamp(16px, 1.7vw, 19px);
  line-height:1.55;
  color:var(--muted);
}

/* Три блока услуг — отдельные секции, чтобы светлая полоса «Антихрома» шла
   во всю ширину. Отступы соседних секций складываются, поэтому берём половину:
   между блоками остаётся заданные системой space-7 (120px). */
.l-svc-block{padding-block:clamp(32px, 4.2vw, 60px)}

/* Инверсия: светлый фон секции, тёмная карточка.
   Переопределяем только токены «листа» — компоненты системы не трогаем. */
.l-invert-card{
  --paper: #1b1a18;
  --paper-ink: #ece4d6;
  --paper-muted: #a39c91;
  --paper-accent: #bf9f80;
  --paper-line: rgba(236, 228, 214, 0.16);
}

/* ---------- Прайс по элементам ---------- */

.l-price__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  margin-top:var(--space-5);
}

/* ---------- Работы ---------- */

.l-works{
  display:flex;
  gap:var(--space-4);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:var(--space-3);
  scrollbar-width:none;
}
.l-works::-webkit-scrollbar{display:none}
.l-works:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-lg)}
/* Ширина карточки считается от ширины дорожки, чтобы в неё помещалось ровное
   число карточек. Тогда максимум прокрутки кратен шагу и последний клик
   доезжает до конца целой карточкой, а не огрызком. */
.l-work{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  min-width:0;
}
.l-work__art{
  aspect-ratio:4 / 3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--graphite);
  border:1px solid var(--hairline);
}
.l-work__art svg,
.l-work__art img{display:block;width:100%;height:100%;object-fit:cover}
.l-work__title{
  font:500 20px/26px var(--font-display);
  color:var(--ink);
}
.l-work__meta{
  font:500 13px/20px var(--font-sans);
  color:var(--muted);
  margin-top:var(--space-1);
}
/* 1 карточка на телефоне → 2 на планшете → 3 на десктопе */
@media (min-width: 680px){
  .l-work{flex-basis:calc((100% - var(--space-4)) / 2)}
}
@media (min-width: 1040px){
  .l-work{flex-basis:calc((100% - 2 * var(--space-4)) / 3)}
}

.l-works__nav{display:flex;gap:var(--space-2)}

/* ---------- Отзывы ---------- */

/* Карусель отзывов — та же механика, что у «Из бокса»: ширина карточки считается
   от дорожки, поэтому прокрутка всегда доезжает ровно до края карточки. */
.l-quotes{
  display:flex;
  gap:var(--space-4);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:var(--space-3);
  scrollbar-width:none;
}
.l-quotes::-webkit-scrollbar{display:none}
.l-quotes:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-lg)}

.l-quote{
  flex:0 0 100%;
  scroll-snap-align:start;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:clamp(24px, 3.4vw, 40px);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.l-quote__text{
  font:400 17px/28px var(--font-sans);
  color:var(--ink);
  flex:1;
}
.l-quote__who{
  font:600 14px/20px var(--font-sans);
  color:var(--ink);
  padding-top:var(--space-4);
  border-top:1px solid var(--hairline);
}
.l-quote__who small{
  display:block;
  font:500 13px/20px var(--font-sans);
  color:var(--muted);
  margin-top:var(--space-1);
}

/* 1 отзыв на телефоне → 2 на планшете → 3 на десктопе */
@media (min-width: 680px){
  .l-quote{flex-basis:calc((100% - var(--space-4)) / 2)}
}
@media (min-width: 1040px){
  .l-quote{flex-basis:calc((100% - 2 * var(--space-4)) / 3)}
}

/* Реальный рейтинг с Яндекс Карт */
.l-rating{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-3);
  margin-top:var(--space-4);
}
.l-rating__score{
  font:500 clamp(32px, 3.4vw, 44px)/1 var(--font-display);
  letter-spacing:-.02em;
  color:var(--ink);
}
.l-rating__stars{
  font-size:18px;
  line-height:1;
  color:var(--accent);
  letter-spacing:.1em;
}
.l-rating__meta{
  font:500 13px/20px var(--font-sans);
  color:var(--muted);
}

/* Ссылка на источник под каруселью */
.l-quotes__source{margin-top:var(--space-5)}
.l-quotes__link{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font:600 14px/20px var(--font-sans);
  letter-spacing:.04em;
  color:var(--accent);
  text-decoration:none;
  transition:color .4s ease-out;
}
.l-quotes__link-text{
  text-decoration:underline;
  text-decoration-color:var(--hairline-strong);
  text-underline-offset:5px;
  text-decoration-thickness:1px;
}
.l-quotes__link:hover{color:var(--ink)}
.l-quotes__link:hover .l-quotes__link-text{text-decoration-color:currentColor}
.l-quotes__link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-sm)}
.l-quotes__link-arrow{font-size:16px;line-height:1}

/* ---------- Запись ---------- */

/* Десктоп: заголовок и контакты слева, форма справа через всю высоту */
.l-book{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas:
    "head form"
    "contacts form";
  grid-template-rows:auto 1fr;
  gap:clamp(32px, 4.6vw, 64px);
  align-items:start;
}
.l-book__head{grid-area:head}
.l-contacts{grid-area:contacts}
.l-book .l-form{grid-area:form}

.l-contacts{display:grid;gap:clamp(24px, 3vw, 40px)}
.l-contact__label{
  font:600 12px/16px var(--font-sans);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.l-contact__value{
  font:500 20px/28px var(--font-display);
  color:var(--ink);
  margin-top:var(--space-2);
  text-decoration:none;
  display:inline-block;
}
.l-contact__value small{
  display:block;
  font:400 14px/22px var(--font-sans);
  color:var(--muted);
  margin-top:var(--space-1);
}
a.l-contact__value{transition:color .4s ease-out}
a.l-contact__value:hover{color:var(--accent)}
a.l-contact__value:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-sm)}

/* Адрес ведёт на карту — подчёркиванием показываем, что это ссылка наружу.
   Подчёркивается именно текст адреса, а не вся ссылка: text-decoration
   наследуется вниз, и подпись под адресом снять его у себя не может. */
.l-contact__value--link{text-decoration:none}
.l-contact__text{
  text-decoration:underline;
  text-decoration-color:var(--hairline-strong);
  text-underline-offset:6px;
  text-decoration-thickness:1px;
}
.l-contact__value--link:hover .l-contact__text{text-decoration-color:var(--accent)}
.l-contact__value--link small{color:var(--accent)}

/* Мессенджеры: та же пилюля из системы, но кружок с иконкой слева,
   а не стрелка справа — логотип сервиса важнее указателя направления. */
.l-messengers{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-top:var(--space-3);
}
.l-messenger{
  padding:0 28px 0 8px;
  text-decoration:none;
}
.l-messenger__icon{
  width:40px;
  height:40px;
  border-radius:var(--radius-round);
  display:grid;
  place-items:center;
  flex:none;
  background:var(--ink);
  color:var(--ground);
  transition:transform .5s ease-out;
}
.l-messenger:hover .l-messenger__icon{transform:scale(1.08)}

@media (max-width: 420px){
  .l-messenger{flex:1 1 100%;justify-content:flex-start}
}

.l-form{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:clamp(20px, 3.4vw, 40px);
  display:grid;
  gap:var(--space-4);
}
.l-form__row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap:var(--space-4);
}
.l-field{display:grid;gap:var(--space-2);min-width:0}
.l-field label{
  font:600 12px/16px var(--font-sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.l-field input,
.l-field select,
.l-field textarea{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-sm);
  color:var(--ink);
  font:400 16px/24px var(--font-sans);
  padding:14px 16px;
  transition:border-color .4s ease-out;
}
.l-field textarea{resize:vertical;min-height:96px}
.l-field input::placeholder,
.l-field textarea::placeholder{color:var(--muted)}
.l-field input:focus,
.l-field select:focus,
.l-field textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent);
}
.l-form__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
}
.l-form__note{font:500 13px/20px var(--font-sans);color:var(--muted);max-width:34ch}
.l-form__ok,
.l-form__fail{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4);
  border-radius:var(--radius-sm);
  font:500 15px/24px var(--font-sans);
}
.l-form__ok{border:1px solid var(--signal);color:var(--signal)}
/* Ошибку показываем акцентом, а не красным: красного в палитре нет,
   и паниковать человеку незачем — рядом сразу телефон. */
.l-form__fail{border:1px solid var(--accent);color:var(--accent)}
.l-form__ok svg,
.l-form__fail svg{flex:none}

/* Живая область для скринридера. Она всегда в разметке и всегда пустая —
   только так объявление срабатывает: role="status" внутри hidden-элемента
   браузер в дерево доступности не кладёт, и сообщение проходит мимо. */
.l-form__live{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Поле с незаполненным обязательным значением */
.l-field input[aria-invalid="true"],
.l-field textarea[aria-invalid="true"]{border-color:var(--accent)}

/* Поле-ловушка для спам-ботов: человек его не видит и не сфокусирует */
.l-field--trap{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Кнопка на время отправки */
.ds-btn[disabled]{opacity:.6;cursor:default}
.ds-btn[disabled]:hover .ds-btn__dot{transform:none}

/* ---------- Подвал ---------- */

.l-footer{
  background:var(--graphite);
  color:var(--ink);
  padding-block:var(--space-6);
}
.l-footer__grid{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-5);
}
.l-footer__mark{
  font-family:var(--font-display);
  font-weight:500;
  font-size:24px;
  line-height:1.1;
  letter-spacing:-.015em;
}
.l-footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  font:500 14px/22px var(--font-sans);
}
.l-footer__links a{color:var(--muted);text-decoration:none;transition:color .4s ease-out}
.l-footer__links a:hover{color:var(--ink)}
.l-footer__fine{
  margin-top:var(--space-5);
  padding-top:var(--space-4);
  border-top:1px solid var(--hairline);
  font:500 13px/20px var(--font-sans);
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--space-3);
}
.l-footer__addr{color:inherit;text-decoration:none;transition:color .4s ease-out}
.l-footer__addr:hover{color:var(--ink)}

/* ---------- Адаптив ---------- */

/* Размеры и отступы тянутся через clamp, сетки перестраиваются через auto-fit —
   медиазапросы остаются только там, где нужно сменить саму композицию. */

/* С 1040px первый экран делится на две колонки — заголовку достаётся вдвое меньше
   места, поэтому здесь своя шкала, иначе «DETAILING» вылезет за колонку */
@media (min-width: 1041px){
  .l-hero__title{font-size:clamp(76px, 7.4vw, 96px)}
}

/* Планшет и ниже: двухколоночные композиции разворачиваются в одну колонку */
@media (max-width: 1040px){
  .l-hero__grid{grid-template-columns:1fr}
  .l-emblem{max-width:360px;margin-inline:0}
  /* На узком экране колонок нет, и порядок другой: сначала форма —
     человек пришёл записаться, а не изучать реквизиты. Потом мессенджеры
     как быстрая альтернатива, и только затем телефон с адресом. */
  .l-book{
    display:flex;
    flex-direction:column;
    grid-template-areas:none;
    /* align-items:start из десктопной сетки здесь сжимает форму по содержимому —
       возвращаем растягивание, чтобы она была вровень с кнопками мессенджеров */
    align-items:stretch;
  }
  .l-book__head{order:1}
  .l-book .l-form{order:2}
  .l-contacts{order:3}

  .l-contact--messengers{order:1}
  .l-contact--phone{order:2}
  .l-contact--address{order:3}
}

/* Телефон: кнопки первого экрана во всю ширину, заголовок секции не жмётся к кнопке */
@media (max-width: 640px){
  .l-hero__actions .ds-btn{flex:1 1 100%;justify-content:space-between}
  .l-head{align-items:flex-start}
  .l-price__foot{flex-direction:column;align-items:flex-start}
  .l-price__foot .ds-btn{width:100%;justify-content:space-between}
  .l-form__foot{flex-direction:column;align-items:stretch}
  .l-form__foot .ds-btn{justify-content:space-between}
  .l-footer__fine{flex-direction:column;gap:var(--space-2)}
}