/* FOTOLAD — все стили. Значения только через var(--...) из tokens.css (скилл design-tokens). */
/* Структура: base → по секциям в порядке сборки → media-запросы по скиллу responsive. */

/* === База === */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-background);
  color: var(--color-textPrimary);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  font-weight: var(--weight-sansRegular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg { display: block; max-width: 100%; }

img { height: auto; }

/* Явный display у элемента перебивает браузерное правило для [hidden],
   и скрытый блок остаётся на виду. Правило ниже закрывает это раз и навсегда. */
[hidden] { display: none !important; }

/* Фон не прокручивается, пока открыт просмотр фото */
body.is-viewer-open { overflow: hidden; }

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* Заголовки — editorial serif по токенам */
h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-serifRegular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}

/* Видимый фокус для доступности с клавиатуры */
:focus-visible {
  outline: var(--layout-sectionRulePx) solid var(--color-accentCoral);
  outline-offset: var(--space-1);
}

/* Контентная колонка: 1504px по токену + боковые поля 88px */
.container {
  width: 100%;
  max-width: calc(var(--layout-contentMaxWidthPx) + var(--layout-pageGutterPx) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-pageGutterPx);
}

/* Секция-«кадр»: общий вертикальный ритм и система координат для левой шкалы */
.section {
  position: relative;
  padding-block: var(--space-28);
  scroll-margin-top: var(--space-8);
}

/* Скрыто визуально, доступно скринридеру */
.visually-hidden {
  position: absolute;
  width: var(--layout-sectionRulePx);
  height: var(--layout-sectionRulePx);
  padding: var(--space-0);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* === Общее: вертикальная фирменная шкала (S*-01 VerticalBrandRail*) === */
.vertical-brand-rail {
  position: absolute;
  left: var(--space-6);
  top: var(--space-16);
  bottom: var(--space-16);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: var(--layout-verticalRailWidthPx);
  color: var(--color-accentCoral);
  font-size: var(--size-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.vertical-brand-rail__label,
.vertical-brand-rail__brand {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.vertical-brand-rail__arrow {
  flex: none;
  width: var(--space-3);
  color: inherit;
}

.vertical-brand-rail__line {
  flex: 1;
  width: var(--layout-sectionRulePx);
  min-height: var(--space-10);
  background: currentColor;
}

/* === Шапка (S1-02 Header) === */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: var(--space-6);
}

/* S1-03 HeaderLogo */
.header-logo {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.header-logo__text {
  font-family: var(--font-serif);
  font-size: var(--size-logo);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-display);
}

.header-logo__mark {
  width: var(--space-5);
  height: var(--space-5);
  background: var(--color-accentCoral);
}

/* S1-04 HeaderNav */
.header-nav__list {
  display: flex;
  align-items: center;
  gap: calc(var(--space-16) + var(--space-2));
}

.header-nav__link {
  font-size: var(--size-nav);
  line-height: var(--lh-label);
  white-space: nowrap;
}

.header-nav__link:hover { color: var(--color-accentCoral); }

/* S1-05 HeaderOrderButton */
.header-order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: var(--space-16);
  padding-inline: var(--space-10);
  border-radius: var(--radius-button);
  background: var(--color-accentCoral);
  color: var(--color-textOnAccent);
  font-size: var(--size-body);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
  white-space: nowrap;
}

.header-order-button:hover { background: var(--color-accentCoralDark); }

/* S1-06 HeaderDivider */
.header-divider {
  height: var(--layout-sectionRulePx);
  background: var(--color-divider);
}

/* Бургер — только мобильная ширина */
.header-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  width: var(--space-12);
  height: var(--space-12);
  padding: var(--space-3);
  border-radius: var(--radius-button);
}

.header-burger__line {
  height: var(--layout-sectionRulePx);
  background: var(--color-textPrimary);
}

/* === Секция 1: Hero === */
.hero-section {
  padding-top: var(--space-6);
  padding-bottom: var(--space-10);
}

.hero-body {
  display: grid;
  grid-template-columns: minmax(0, 620fr) minmax(0, 786fr);
  column-gap: var(--space-20);
  padding-left: var(--space-4);
}

/* S1-07 HeroCopyBlock — тянется на высоту визуальной колонки, свободное место
   распределяется между заголовком, описанием и блоком действий (как в референсе). */
.hero-copy-block {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-16);
}

/* S1-08 HeroTitle */
.hero-title {
  font-size: var(--size-displayLg);
  line-height: var(--lh-display);
}

/* Строки заголовка не разрываются внутри фразы: разбивка на строки задана разметкой */
.hero-title__line {
  display: block;
  white-space: nowrap;
}

/* S1-09 HeroDescription */
.hero-description {
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: var(--size-bodyLarge);
  line-height: var(--lh-body);
}

.hero-description__line { display: block; }

/* S1-10 HeroActions */
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-10);
}

/* S1-11 HeroPrimaryButton */
.hero-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-button);
  background: var(--color-accentCoral);
  color: var(--color-textOnAccent);
  font-size: var(--size-bodyLarge);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
  white-space: nowrap;
}

.hero-primary-button:hover { background: var(--color-accentCoralDark); }

/* S1-12 HeroExamplesLink */
.hero-examples-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-accent);
  font-size: var(--size-body);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
}

.hero-examples-link__arrow {
  width: var(--space-6);
  color: var(--color-textPrimary);
}

.hero-examples-link:hover { color: var(--color-accentCoral); }
.hero-examples-link:hover .hero-examples-link__arrow { color: var(--color-accentCoral); }

/* S1-13 HeroEstimateNote */
.hero-estimate-note {
  margin-top: var(--space-3);
  font-size: var(--size-metadata);
  line-height: var(--lh-body);
}

/* S1-14 HeroVisualBlock */
.hero-visual-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* S1-15 HeroExifMeta */
.hero-exif-meta {
  color: var(--color-textMuted);
  font-size: var(--size-bodySmall);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-metadata);
  text-align: right;
}

/* S1-16 BeforeAfterSlider — положение шва хранится в --split (управляет js/main.js) */
.before-after-slider {
  --split: 49%;
  position: relative;
  aspect-ratio: 784 / 562;
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-photo);
  touch-action: pan-y;
  user-select: none;
}

/* Обрезка только фото и шва: ручка остаётся видимой целиком и в 0%, и в 100% */
.before-after-slider__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.before-after-slider.is-dragging { cursor: ew-resize; }

.before-after-slider__pane {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.before-after-slider__pane--before {
  left: 0;
  width: var(--split);
}

.before-after-slider__pane--after {
  right: 0;
  width: calc(100% - var(--split));
}

/* Вертикальный якорь 63% — уровень ручки, впечатанной в исходные фото:
   при таком object-position она остаётся ровно под DOM-ручкой на любом положении шва. */
.before-after-slider__pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 63%;
}

.before-after-slider__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: var(--layout-sectionRulePx);
  background: var(--color-surface);
  transform: translateX(-50%);
}

/* S1-17 BeforeAfterHandle — по вертикали совпадает с ручкой, впечатанной в фото */
.before-after-handle {
  position: absolute;
  top: 63%;
  /* Центр ручки не подходит к краю ближе своего радиуса: в 0% и 100% она
     остаётся целиком видимой и не выходит за карточку (иначе — скролл вбок). */
  left: clamp(var(--space-6), var(--split), calc(100% - var(--space-6)));
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-avatar);
  background: var(--color-surface);
  color: var(--color-accentCoral);
  box-shadow: var(--shadow-card);
  cursor: ew-resize;
}

.before-after-handle svg { width: var(--space-6); }

/* S1-22 BenefitsStrip */
.benefits-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-12);
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
}

/* S1-23 / S1-25 / S1-27 Benefit* */
.benefit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}

.benefit + .benefit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--layout-sectionRulePx);
  height: var(--space-16);
  background: var(--color-divider);
}

/* S1-24 / S1-26 / S1-28 Benefit*Icon */
.benefit__icon {
  flex: none;
  width: var(--space-10);
  height: var(--space-10);
  color: var(--color-accentCoral);
}

.benefit__value {
  display: block;
  font-size: var(--size-statValue);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
  white-space: nowrap;
}

.benefit__caption {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-body);
  line-height: var(--lh-label);
}

/* === Секция 2: Услуги === */
.vertical-brand-rail__square {
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  background: currentColor;
}

.vertical-brand-rail__line--short { flex: none; height: var(--space-10); }

/* S2-02 ServicesHeader */
.services-header { padding-left: var(--space-5); }

/* S2-03 ServicesTitle */
.services-title {
  font-size: var(--size-displayMd);
  line-height: var(--lh-heading);
}

.services-title__line { display: block; }

/* Первая строка заголовка + EXIF-метка в один ряд */
.services-title__row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* S2-04 ServicesMeta — общий стиль EXIF-меток секций */
.services-meta {
  color: var(--color-textMuted);
  font-family: var(--font-sans);
  font-weight: var(--weight-sansRegular);
  font-size: var(--size-bodySmall);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-metadata);
  white-space: nowrap;
}

/* S2-05 ServicesDivider */
.services-divider {
  height: var(--layout-sectionRulePx);
  background: var(--color-divider);
}

/* S2-06 ServicesGrid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--layout-cardGapPx);
  row-gap: var(--space-5);
  /* 36px по референсу: делитель → верх карточек */
  margin-top: calc(var(--space-8) + var(--space-1));
  padding-left: var(--space-5);
}

/* S2-07…S2-12 ServiceCard* */
.service-card {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* Пара фото «до/после»: половины встык, пропорция 471:217 из референса */
.service-card__photos {
  position: relative;
  display: flex;
  aspect-ratio: 471 / 217;
  border-radius: var(--radius-card) var(--radius-card) var(--space-0) var(--space-0);
  overflow: hidden;
}

.service-card__photos img {
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.service-card__body {
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.service-card__title {
  font-family: var(--font-sans);
  font-size: var(--size-cardHeading);
  font-weight: var(--weight-sansSemibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-body);
}

.service-card__subtitle {
  margin-top: var(--space-2);
  color: var(--color-textSecondary);
  font-size: var(--size-bodySmall);
  line-height: var(--lh-label);
}

.service-card__price {
  margin-top: var(--space-4);
  color: var(--color-accentCoral);
  font-size: var(--size-body);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
}

/* S2-13 PopularBadgeServices — нависает над верхним краем карточки */
.popular-badge-services {
  position: absolute;
  top: calc(var(--space-6) * -1);
  left: var(--space-0);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: calc(var(--space-6) + var(--space-1));
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accentCoral);
  color: var(--color-textOnAccent);
  font-size: var(--size-label);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
}

/* S2-14 ServicePlayButton — точно поверх кнопки, впечатанной в фото «после»;
   по умолчанию декоративная (TODO CLAUDE.md), поэтому span + aria-hidden */
.service-play-button {
  position: absolute;
  right: var(--space-4);
  top: 56%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-avatar);
  background: var(--color-accentCoral);
  color: var(--color-textOnAccent);
}

.service-play-button svg { width: var(--space-4); margin-left: var(--space-1); }

.service-card:hover .service-play-button { background: var(--color-accentCoralDark); }

/* === Секция 3: Примеры === */
/* Точка в начале шкалы (вариант секции «Примеры») */
.vertical-brand-rail__dot {
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-avatar);
  background: var(--color-accentCoral);
}

/* Шкала этой секции: тёмная подпись, коралловая только точка */
.vertical-brand-rail-portfolio {
  color: var(--color-textPrimary);
  justify-content: flex-start;
}

/* S3-02 PortfolioHeader: заголовок + EXIF-метка в одну строку по базовой линии */
.portfolio-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
  padding-left: var(--space-5);
}

/* S3-03 PortfolioTitle */
.portfolio-title {
  font-size: var(--size-displayMd);
  line-height: var(--lh-heading);
}

/* S3-04 PortfolioTitleUnderline — коралловый маркерный росчерк под словом «работ» */
.portfolio-title__accent { position: relative; display: inline-block; }

.portfolio-title-underline {
  position: absolute;
  left: var(--space-0);
  bottom: calc(var(--space-3) * -1);
  width: 100%;
  color: var(--color-accentCoral);
}

/* S3-06 FilterTabs — пункты через точку-разделитель */
.filter-tabs {
  display: flex;
  align-items: center;
  margin-top: var(--space-5);
  padding-left: var(--space-5);
}

.filter-tabs li { display: flex; align-items: center; }

/* Декоративная точка между пунктами */
.filter-tabs li + li::before {
  content: "·";
  margin-inline: var(--space-8);
  color: var(--color-textSecondary);
}

.filter-tab {
  /* 12px сверху/снизу дают зону нажатия ≥44px при кегле 19px */
  padding: var(--space-3) var(--space-0);
  font-size: var(--size-nav);
  line-height: var(--lh-label);
}

.filter-tab:hover { color: var(--color-accentCoral); }

/* S3-07 FilterTabActive */
.filter-tab-active { color: var(--color-accentCoral); }

/* S3-08 PortfolioGallery — асимметричная журнальная сетка на flex-переносах.
   Доли ширин карточек — из референса (718/748 в первом ряду, 453/506/478 во втором). */
.portfolio-gallery {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--layout-columnGapPx);
  row-gap: var(--space-6);
  margin-top: var(--space-8);
  padding-left: var(--space-5);
}

.portfolio-card-portrait { width: calc((100% - var(--layout-columnGapPx)) * 718 / 1466); }
.portfolio-card-marketplace { width: calc((100% - var(--layout-columnGapPx)) * 748 / 1466); }
.portfolio-card-restoration { width: calc((100% - var(--layout-columnGapPx) * 2) * 453 / 1437); }
.portfolio-card-interior { width: calc((100% - var(--layout-columnGapPx) * 2) * 506 / 1437); }
.portfolio-card-food { width: calc((100% - var(--layout-columnGapPx) * 2) * 478 / 1437); }

.portfolio-card[hidden] { display: none; }

/* Пара «до/после»: половины встык, пропорции — сумма натуральных размеров пары */
.portfolio-card__pair {
  display: flex;
  border-radius: var(--radius-photo);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.portfolio-card__pair img {
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.portfolio-card-portrait .portfolio-card__pair { aspect-ratio: 712 / 308; }
.portfolio-card-marketplace .portfolio-card__pair { aspect-ratio: 742 / 308; }
.portfolio-card-restoration .portfolio-card__pair { aspect-ratio: 447 / 255; }
.portfolio-card-interior .portfolio-card__pair { aspect-ratio: 500 / 255; }
.portfolio-card-food .portfolio-card__pair { aspect-ratio: 472 / 255; }

.portfolio-card__caption {
  margin-top: var(--space-3);
  font-size: var(--size-body);
  line-height: var(--lh-label);
}

/* === Секция 4: Процесс === */
/* Вертикальная линия во всю высоту секции на границе левого поля (как в референсе) */
.process-section::before {
  content: "";
  position: absolute;
  left: var(--space-20);
  top: var(--space-0);
  bottom: var(--space-0);
  width: var(--layout-sectionRulePx);
  background: var(--color-divider);
}

/* Шкала секции: только тёмная подпись у верхнего края */
.vertical-brand-rail-process { color: var(--color-textPrimary); }

/* S4-02 ProcessHeader */
.process-header { padding-left: var(--space-10); }

/* S4-03 ProcessTitle */
.process-title {
  font-size: var(--size-displayMd);
  line-height: var(--lh-heading);
}

/* S4-04 ProcessMeta — ниже заголовка, слева */
.process-header .process-meta {
  display: block;
  margin-top: var(--space-5);
}

/* S4-05 ProcessFlow */
.process-flow {
  display: grid;
  grid-template-columns: minmax(0, 462fr) minmax(0, 428fr) minmax(0, 428fr);
  column-gap: var(--space-16);
  align-items: start;
  /* 24px даёт зазор «метка → номера» по краске ровно как в референсе (45px) */
  margin-top: var(--space-6);
  padding-left: var(--space-10);
}

/* S4-06 / S4-09 / S4-12 StepCard* */
.step-card { position: relative; }

.step-card__number {
  display: block;
  color: var(--color-accentCoral);
  font-family: var(--font-serif);
  font-size: var(--size-displayXl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* S4-08 / S4-11 ProcessArrow* — в зазоре между шагами, на уровне середины номера */
.process-arrow {
  position: absolute;
  right: var(--space-0);
  top: var(--space-12);
  width: var(--space-28);
  color: var(--color-textPrimary);
}

.step-card__title {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--size-cardHeading);
  font-weight: var(--weight-sansSemibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-body);
}

/* S4-07 ProcessUploadDropzone — белая карточка с пунктирной зоной внутри */
.process-upload-dropzone {
  position: relative;
  margin-top: var(--space-4);
  aspect-ratio: 460 / 305;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.process-upload-dropzone__inner {
  position: absolute;
  inset: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: var(--border-dropzone);
  border-radius: var(--radius-input);
  text-align: center;
  padding: var(--space-4);
}

.process-upload-dropzone__icon {
  width: var(--space-10);
  margin-bottom: var(--space-3);
  color: var(--color-textPrimary);
}

.process-upload-dropzone__main {
  font-size: var(--size-bodyLarge);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
}

.process-upload-dropzone__hint {
  color: var(--color-textMuted);
  font-size: var(--size-body);
  line-height: var(--lh-label);
}

.process-upload-dropzone__formats {
  margin-top: var(--space-4);
  color: var(--color-textMuted);
  font-size: var(--size-label);
  line-height: var(--lh-label);
}

/* S4-10 ProcessTaskField — белая карточка с примером комментария */
.process-task-field {
  margin-top: var(--space-4);
  aspect-ratio: 426 / 302;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

.process-task-field__label {
  color: var(--color-textMuted);
  font-size: var(--size-label);
  line-height: var(--lh-label);
}

.process-task-field__value {
  margin-top: var(--space-3);
  font-size: var(--size-bodyLarge);
  line-height: var(--lh-label);
}

/* Статичная «каретка» набора текста */
.process-task-field__caret {
  display: inline-block;
  width: var(--space-1);
  height: var(--space-6);
  margin-left: var(--space-2);
  vertical-align: text-bottom;
  background: var(--color-accentCoral);
}

/* S4-13 ProcessResultPreview — фото со впечатанной плашкой «ПОСЛЕ» */
.process-result-preview {
  margin-top: var(--space-4);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.process-result-preview img { width: 100%; }

/* S4-14 ProcessDownloadButton — декоративная кнопка демо-превью */
.process-download-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  height: var(--space-16);
  padding-inline: var(--space-8);
  border-radius: var(--radius-button);
  background: var(--color-accentCoral);
  color: var(--color-textOnAccent);
  font-size: var(--size-bodyLarge);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
}

.process-download-button svg { width: var(--space-5); }

/* S4-16 RevisionGuaranteeBanner */
.revision-guarantee-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-3);
  margin-left: var(--space-10);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* S4-17 RevisionGuaranteeIcon */
.revision-guarantee-icon {
  flex: none;
  width: var(--space-10);
  color: var(--color-accentCoral);
}

.revision-guarantee-banner__text {
  font-size: var(--size-cardHeading);
  line-height: var(--lh-label);
}

/* === Секция 5: Тарифы === */
/* Шкала секции: только тёмная подпись у верхнего края (как в «Процессе») */
.vertical-brand-rail-pricing { color: var(--color-textPrimary); }

/* S5-02 PricingHeader */
.pricing-header {
  position: relative;
  padding-left: var(--space-16);
}

/* S5-03 PricingTitle */
.pricing-title {
  font-size: var(--size-displayMd);
  line-height: var(--lh-heading);
}

/* S5-04 PricingTitleUnderline — росчерк под словом «Прозрачные» (в референсе ~60% слова) */
.pricing-title__accent { position: relative; display: inline-block; }

.pricing-title-underline {
  position: absolute;
  left: var(--space-0);
  bottom: calc(var(--space-2) * -1);
  width: 60%;
  color: var(--color-accentCoral);
}

/* S5-05 PricingMeta — по референсу висит правее заголовка, на ~400px от правого края */
.pricing-header .pricing-meta {
  position: absolute;
  top: var(--space-10);
  right: calc(var(--space-28) * 3 + var(--space-16));
}

/* S5-06 PricingGrid — доли ширин карточек из референса (437/467/429) */
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 437fr) minmax(0, 467fr) minmax(0, 429fr);
  column-gap: var(--layout-columnGapPx);
  align-items: stretch;
  margin-top: var(--space-12);
  padding-inline: var(--space-12);
}

/* S5-07 / S5-10 / S5-14 PricingCard* */
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-10);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* S5-10 PricingCardPopular — коралловая рамка по токену */
.pricing-card-popular { border: var(--border-accent); }

/* S5-11 PopularBadgePricing — наполовину над верхней кромкой, справа */
.popular-badge-pricing {
  position: absolute;
  top: calc(var(--space-5) * -1);
  /* В референсе правый край бейджа совпадает с правым краем карточки */
  right: var(--space-0);
  display: inline-flex;
  align-items: center;
  height: var(--space-10);
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-accentCoral);
  color: var(--color-textOnAccent);
  font-size: var(--size-body);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
}

.pricing-card__name {
  font-family: var(--font-sans);
  font-size: var(--size-cardHeading);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-body);
}

.pricing-card__price {
  margin-top: var(--space-4);
  /* Общая высота строки цены во всех карточках — ряды под ценой остаются выровнены */
  min-height: calc(var(--size-displayMd) * var(--lh-heading));
  font-family: var(--font-serif);
  font-size: var(--size-displayMd);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}

.pricing-card__price-small { font-size: var(--size-sectionHeading); }

/* Длинная цена «от 19 900 ₽/мес» не помещается в 72px из-за ширины Playfair —
   у бизнес-карточки кегль на ступень ниже, ряд выровнен через min-height выше */
.pricing-card-business .pricing-card__price { font-size: var(--size-sectionHeading); }
.pricing-card-business .pricing-card__price-small { font-size: var(--size-cardHeading); }

.pricing-card__note {
  margin-top: var(--space-4);
  font-size: var(--size-body);
  line-height: var(--lh-label);
}

/* S5-08 / S5-12 / S5-15 PricingChecklist* */
.pricing-checklist {
  display: grid;
  row-gap: var(--space-5);
  /* нижний отступ отделяет список от кнопки, прижатой к низу карточки */
  margin-block: var(--space-8) var(--space-10);
}

.pricing-checklist__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--size-body);
  line-height: var(--lh-label);
}

/* Чек-иконка списка — по спеке components.checkIcon (контурная, штрих 1px) */
.pricing-checklist__icon {
  flex: none;
  width: var(--space-8);
  color: var(--color-accentCoral);
}

/* S5-09 / S5-13 / S5-16 PricingButton* — прижаты к низу карточек */
.pricing-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding-block: var(--space-6);
  border-radius: var(--radius-button);
  font-size: var(--size-body);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
}

.pricing-button-single,
.pricing-button-business {
  border: var(--border-accent);
  background: var(--color-surface);
  color: var(--color-accentCoral);
}

.pricing-button-single:hover,
.pricing-button-business:hover { background: var(--color-accentCoralSoft); }

.pricing-button-popular {
  background: var(--color-accentCoral);
  color: var(--color-textOnAccent);
}

.pricing-button-popular:hover { background: var(--color-accentCoralDark); }

/* Чек-лист заканчивается выше кнопки минимум на отступ */
/* S5-17 UrgentProcessingNote — под сеткой, за линией-делителем */
.urgent-processing-note {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  padding-left: var(--space-16);
  border-top: var(--border-hairline);
}

/* S5-18 UrgentProcessingIcon */
.urgent-processing-icon {
  flex: none;
  width: var(--space-10);
  color: var(--color-accentCoral);
}

.urgent-processing-note__text {
  font-size: var(--size-cardHeading);
  line-height: var(--lh-label);
}

/* === Секция 6: Заказ + футер === */
/* Вертикальная линия по левому краю контента — идёт через секцию и футер */
.order-section::before,
.footer::before {
  content: "";
  position: absolute;
  left: var(--layout-pageGutterPx);
  top: var(--space-0);
  bottom: var(--space-0);
  width: var(--layout-sectionRulePx);
  background: var(--color-divider);
}

.order-section { position: relative; }
.footer { position: relative; }

/* Шкала секции: тёмная подпись у верхнего края */
.vertical-brand-rail-order { color: var(--color-textPrimary); }

/* S6-02 OrderHeader */
.order-header {
  position: relative;
  padding-left: var(--space-22);
}

/* S6-03 OrderTitle */
.order-title {
  font-size: var(--size-displayMd);
  line-height: var(--lh-heading);
}

.order-title__line { display: block; }

/* S6-04 OrderTitleUnderline — росчерк под словом «лучшим» */
.order-title__accent { position: relative; display: inline-block; }

.order-title-underline {
  position: absolute;
  left: var(--space-0);
  bottom: calc(var(--space-2) * -1);
  width: 100%;
  color: var(--color-accentCoral);
}

/* S6-05 OrderMeta — правее заголовка, на уровне второй строки */
.order-header .order-meta {
  position: absolute;
  top: calc(var(--space-24) + var(--space-2));
  right: calc(var(--space-28) * 4);
}

/* S6-06 OrderContentGrid: форма слева, доверие справа (748:450 из референса) */
.order-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 748fr) minmax(0, 450fr);
  column-gap: var(--space-20);
  align-items: start;
  margin-top: var(--space-8);
  padding-left: var(--space-22);
  padding-right: calc(var(--space-28) + var(--space-6));
}

/* S6-07 OrderForm — белая карточка */
.order-form {
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* S6-08 OrderUploadDropzone — реальный выбор файла, отправки на сервер нет */
.order-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  min-height: calc(var(--space-28) + var(--space-16));
  border: var(--border-dropzone);
  border-radius: var(--radius-input);
  text-align: center;
  cursor: pointer;
}

.order-upload-dropzone:hover { background: var(--color-surfaceWarm); }

/* Сводка приложенных фото: свёрнутая строка со счётчиком, по клику — список файлов.
   Стоит над дропзоной, потому что иначе не видно, приложилось ли фото. */
.order-photos {
  margin-bottom: var(--space-4);
  border: var(--border-card);
  border-radius: var(--radius-input);
  background: var(--color-surfaceWarm);
  overflow: hidden;
}

.order-photos__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--size-bodySmall);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
  text-align: left;
}

.order-photos__summary:hover { background: var(--color-surface); }

.order-photos__icon {
  flex: none;
  width: var(--space-5);
  color: var(--color-accentCoral);
}

.order-photos__count { flex: 1; }

.order-photos__chevron {
  flex: none;
  width: var(--space-3);
  color: var(--color-textMuted);
}

/* Раскрытое состояние: галочку разворачиваем вверх */
.order-photos__summary[aria-expanded="true"] .order-photos__chevron { transform: scaleY(-1); }

.order-photos__list {
  padding: var(--space-0) var(--space-4) var(--space-3);
  display: grid;
  row-gap: var(--space-2);
}

/* Предупреждение о превышении лимита: видно и без раскрытия списка */
.order-photos__note {
  padding: var(--space-0) var(--space-4) var(--space-3);
  color: var(--color-accentCoral);
  font-size: var(--size-label);
  line-height: var(--lh-label);
}

.order-photos__item {
  border-radius: var(--radius-button);
  background: var(--color-surface);
  overflow: hidden;
  font-size: var(--size-label);
  line-height: var(--lh-label);
}

.order-photos__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

/* Имя и размер — кнопка: по клику раскрывается предпросмотр снимка */
.order-photos__open {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: var(--space-0);
  text-align: left;
  font: inherit;
}

.order-photos__open:hover .order-photos__name { color: var(--color-accentCoral); }

.order-photos__chevron--item {
  flex: none;
  display: flex;
  width: var(--space-3);
  color: var(--color-textMuted);
}

.order-photos__open[aria-expanded="true"] .order-photos__chevron--item { transform: scaleY(-1); }

/* Длинное имя обрезаем многоточием, иначе плашка распирает форму */
.order-photos__name {
  flex: 1;
  min-width: var(--space-0);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.order-photos__size {
  flex: none;
  color: var(--color-textMuted);
}

.order-photos__remove {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-button);
  color: var(--color-textMuted);
}

.order-photos__remove svg { width: var(--space-3); }

.order-photos__remove:hover { color: var(--color-accentCoral); }

/* Сам input скрыт, поэтому фокус показываем на видимой карточке-лейбле */
.order-upload-dropzone:focus-within {
  outline: var(--layout-sectionRulePx) solid var(--color-accentCoral);
  outline-offset: var(--space-1);
}

.order-upload-dropzone__icon {
  width: var(--space-8);
  margin-bottom: var(--space-2);
  color: var(--color-textPrimary);
}

.order-upload-dropzone__main {
  font-size: var(--size-body);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
}

.order-upload-dropzone__hint {
  color: var(--color-textMuted);
  font-size: var(--size-bodySmall);
  line-height: var(--lh-label);
}

.order-upload-dropzone__formats {
  margin-top: var(--space-2);
  color: var(--color-textMuted);
  font-size: var(--size-metadata);
  line-height: var(--lh-label);
}

/* Ряд «услуга + контакт» */
.order-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
  margin-top: var(--space-6);
}

/* S6-09/S6-10/S6-11 — поля формы */
.form-field { position: relative; }

.form-field__label {
  position: absolute;
  top: var(--space-2);
  left: var(--space-4);
  color: var(--color-textMuted);
  font-size: var(--size-metadata);
  line-height: var(--lh-label);
  pointer-events: none;
}

.form-field__control {
  width: 100%;
  padding: var(--space-6) var(--space-4) var(--space-2);
  border: var(--border-card);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  font-size: var(--size-bodySmall);
  line-height: var(--lh-label);
  appearance: none;
}

.contact-field .form-field__control { padding-block: var(--space-4); }

.form-field__control::placeholder { color: var(--color-textMuted); }

.form-field__control:focus-visible {
  outline: var(--layout-sectionRulePx) solid var(--color-accentCoral);
  outline-offset: var(--space-0);
}

/* Стрелка селекта */
.service-select::after {
  content: "";
  position: absolute;
  right: var(--space-4);
  top: 50%;
  width: var(--space-2);
  height: var(--space-2);
  border-right: var(--border-hairline);
  border-bottom: var(--border-hairline);
  border-color: var(--color-textSecondary);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.comment-field { margin-top: var(--space-6); }

.comment-field .form-field__control { resize: vertical; min-height: var(--space-24); }

/* Ошибка: коралловая рамка по токену + подсказка */
.form-field.is-invalid .form-field__control { border: var(--border-accent); }

.form-field__error {
  margin-top: var(--space-1);
  color: var(--color-accentCoralDark);
  font-size: var(--size-metadata);
  line-height: var(--lh-label);
}

/* S6-12 OrderSubmitButton */
.order-submit-button {
  display: block;
  width: 100%;
  margin-top: var(--space-6);
  padding-block: var(--space-4);
  border-radius: var(--radius-button);
  background: var(--color-accentCoral);
  color: var(--color-textOnAccent);
  font-size: var(--size-body);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
}

.order-submit-button:hover { background: var(--color-accentCoralDark); }

/* S6-13 OrderEstimateNote */
.order-estimate-note {
  margin-top: var(--space-4);
  color: var(--color-textSecondary);
  font-size: var(--size-label);
  line-height: var(--lh-label);
  text-align: center;
}

.order-form__success,
.order-form__failure {
  margin-top: var(--space-6);
  font-size: var(--size-cardHeading);
  font-weight: var(--weight-sansMedium);
  line-height: var(--lh-label);
  text-align: center;
}

/* Отказ подсвечиваем кораллом — тем же токеном, что и ошибки полей */
.order-form__failure { color: var(--color-accentCoral); }

.order-submit-button:disabled { background: var(--color-accentCoralDark); }

/* S6-14 SocialProofBlock */
.social-proof-block {
  display: grid;
  row-gap: var(--space-6);
}

/* S6-15 ProcessedPhotosStat */
.processed-photos-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.processed-photos-stat__value {
  font-family: var(--font-serif);
  font-size: var(--size-displayMd);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}

.processed-photos-stat__caption {
  font-size: var(--size-body);
  line-height: var(--lh-label);
}

/* S6-16 / S6-19 ReviewCard* */
.review-card {
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.review-card__avatar {
  flex: none;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-avatar);
  object-fit: cover;
}

.review-card__name {
  font-family: var(--font-sans);
  font-size: var(--size-bodyLarge);
  font-weight: var(--weight-sansSemibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-body);
}

/* S6-17 / S6-20 ReviewRating* — пять коралловых звёзд */
.review-card__rating {
  display: inline-flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--color-accentCoral);
}

.review-card__rating svg { width: var(--space-4); fill: currentColor; }

.review-card__text {
  margin-top: var(--space-4);
  font-size: var(--size-body);
  line-height: var(--lh-body);
}

/* S6-22 Footer */
.footer__inner {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding-top: var(--space-8);
  border-top: var(--border-hairline);
}

/* S6-23 FooterLogo — квадрат перед текстом */
.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-left: var(--space-12);
}

.footer-logo__mark {
  width: var(--space-6);
  height: var(--space-6);
  background: var(--color-accentCoral);
}

.footer-logo__text {
  font-family: var(--font-serif);
  font-size: var(--size-cardHeading);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-label);
}

/* S6-24 FooterNav — пункты через точки, по центру */
.footer-nav { margin-inline: auto; }

.footer-nav__list {
  display: flex;
  align-items: center;
}

.footer-nav__list li { display: flex; align-items: center; }

.footer-nav__list li + li::before {
  content: "·";
  margin-inline: var(--space-6);
  color: var(--color-textSecondary);
}

.footer-nav__link {
  font-size: var(--size-bodySmall);
  line-height: var(--lh-label);
  white-space: nowrap;
}

.footer-nav__link:hover,
.footer-contacts__link:hover { color: var(--color-accentCoral); }

/* S6-25 FooterContacts */
.footer-contacts {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.footer-contacts__link {
  font-size: var(--size-bodySmall);
  line-height: var(--lh-label);
  white-space: nowrap;
}

/* S6-26 FooterSocialLinks — круглые контурные иконки */
.footer-social-links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-social-links__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border: var(--border-hairline);
  border-radius: var(--radius-avatar);
  color: var(--color-textPrimary);
}

.footer-social-links__item svg { width: var(--space-5); }

.footer-social-links__item:hover {
  border-color: var(--color-accentCoral);
  color: var(--color-accentCoral);
}

/* S6-27 FooterCopyright */
.footer-copyright {
  padding-block: var(--space-6) var(--space-8);
  color: var(--color-textSecondary);
  font-size: var(--size-label);
  line-height: var(--lh-label);
  text-align: center;
}

/* === Адаптив (скилл responsive): 1024 / 768 / 390 === */
/* Промежуточный шаг: макет референса рассчитан на полную колонку 1504px.
   Ниже неё «Только лучше.» в Playfair 96px уже не помещается в текстовую колонку. */
@media (max-width: 1679px) {
  .hero-title { font-size: var(--size-displayMd); }
}

@media (max-width: 1024px) {
  .container { padding-inline: var(--space-12); }
  .section { padding-block: var(--space-20); }

  /* Шкала уезжает ближе к краю, чтобы не наезжать на контент */
  .vertical-brand-rail { left: var(--space-2); }

  /* Процесс: шаги в столбец, стрелки и левая линия скрыты (скилл responsive) */
  .process-section::before { display: none; }
  .process-flow { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-10); padding-left: var(--space-0); }
  .process-arrow { display: none; }
  .process-header { padding-left: var(--space-0); }
  .revision-guarantee-banner { margin-left: var(--space-0); }

  /* Тарифы: 3 → 1 колонка, «популярный» первым (скилл responsive) */
  .pricing-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); padding-inline: var(--space-0); }
  .pricing-card-popular { order: -1; }
  .pricing-header { padding-left: var(--space-0); }
  .pricing-header .pricing-meta { position: static; display: block; margin-top: var(--space-3); }
  .urgent-processing-note { padding-left: var(--space-0); }

  /* Заказ: форма и отзывы в стек, левая линия убирается */
  .order-section::before,
  .footer::before { display: none; }

  .order-header { padding-left: var(--space-0); }
  .order-header .order-meta { position: static; display: block; margin-top: var(--space-3); }

  .order-content-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-10);
    padding-inline: var(--space-0);
  }

  /* Футер: логотип, меню, контакты в столбец по центру */
  .footer__inner {
    flex-direction: column;
    gap: var(--space-6);
    text-align: center;
  }

  .footer-logo { padding-left: var(--space-0); }
  .footer-nav { margin-inline: var(--space-0); }
  .footer-nav__list { flex-wrap: wrap; justify-content: center; }

  /* Поля «Услуга» и «Телефон или Telegram» в узкой колонке не помещаются рядом */
  .order-form__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .order-title { font-size: var(--size-sectionHeading); }

  /* Строки заголовка текут как один абзац: иначе тире с первой строки
     остаётся на отдельной строке в узкой колонке */
  .order-title__line { display: inline; }

  /* Меню и CTA вместе в строку уже не помещаются: CTA убираем,
     его роль берёт кнопка в Hero и пункт «Контакты» */
  .header-order-button { display: none; }
  .header-nav__list { gap: var(--space-12); }

  /* Hero: текст и фото в стек, фото сразу после заголовка.
     display:contents поднимает элементы копи-блока в сетку, чтобы вставить фото между
     заголовком и описанием; вертикальные отступы задают сами элементы (row-gap: 0). */
  .hero-body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-0);
    padding-left: 0;
  }

  .hero-copy-block { display: contents; }
  .hero-title { order: 1; font-size: var(--size-displayMd); }
  .hero-visual-block { order: 2; margin-top: var(--space-10); }
  .hero-description { order: 3; }
  .hero-actions { order: 4; }
  .hero-estimate-note { order: 5; }
  .hero-exif-meta { text-align: left; }

  /* Услуги: 3 → 2 колонки, декоративный сдвиг убираем */
  .services-header,
  .services-grid { padding-left: var(--space-0); }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-10); }
}

@media (max-width: 768px) {
  .container { padding-inline: var(--space-6); }
  .section { padding-block: var(--space-16); }

  /* Шапка: меню сворачивается в бургер с выпадающим списком */
  .header__inner { position: relative; gap: var(--space-4); }
  .header-burger { display: flex; }
  .header-order-button { display: none; }

  .header-nav {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 2;
    display: none;
    max-width: 100%;
    padding: var(--space-2);
    border: var(--border-card);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
  }

  .header-nav.is-open { display: block; }

  .header-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-0);
  }

  .header-nav__link {
    display: flex;
    align-items: center;
    min-height: var(--space-12);
    padding-inline: var(--space-4);
    border-radius: var(--radius-button);
  }

  .header-nav__link:hover { background: var(--color-surfaceWarm); }

  /* Декоративные шкала и EXIF на мобильных не показываются */
  .vertical-brand-rail,
  .hero-exif-meta { display: none; }

  .hero-actions { gap: var(--space-6); }
  /* В узкой колонке длинные строки заголовка должны переноситься */
  .hero-title__line { white-space: normal; }
  /* Тач-зона короткого фильтра «Все» — не меньше 44px по ширине */
  .filter-tab { min-width: var(--space-12); }

  /* Полоса выгод — в столбец */
  .benefits-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-inline: 0;
  }

  .benefit { justify-content: flex-start; }
  .benefit + .benefit::before { display: none; }

  /* Услуги: одна колонка; EXIF-метка уходит под заголовок целиком,
     иначе при переносе она вклинивается между строками h2 */
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .services-title { display: flex; flex-direction: column; font-size: var(--size-sectionHeading); }
  .services-title__row { display: contents; }
  .services-title .services-meta { order: 1; margin-top: var(--space-3); }

  /* Примеры: заголовок с меткой в столбец, фильтры — горизонтальный скролл, галерея в одну колонку */
  .portfolio-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .portfolio-title { font-size: var(--size-sectionHeading); }

  .filter-tabs {
    overflow-x: auto;
    white-space: nowrap;
    /* небольшой нижний зазор, чтобы полоса прокрутки не липла к тексту */
    padding-bottom: var(--space-2);
  }

  .filter-tabs li + li::before { margin-inline: var(--space-5); }

  .portfolio-gallery > .portfolio-card { width: 100%; }

  /* Процесс на мобильном: номер и тексты компактнее */
  .process-title { font-size: var(--size-sectionHeading); }
  .step-card__number { font-size: var(--size-displayMd); }
  .revision-guarantee-banner { flex-direction: column; gap: var(--space-4); text-align: center; }

  /* Тарифы на мобильном */
  .pricing-title { font-size: var(--size-sectionHeading); }
  .pricing-card__price { font-size: var(--size-sectionHeading); }
  .pricing-card__price-small { font-size: var(--size-cardHeading); }
  .urgent-processing-note__text { font-size: var(--size-body); }
}

@media (max-width: 390px) {
  .container { padding-inline: var(--space-5); }
  .hero-title { font-size: var(--size-sectionHeading); }
  .hero-primary-button { width: 100%; }
  .header-logo__text { font-size: var(--size-cardHeading); }
}

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

/* === Просмотр приложенного фото === */
.photo-viewer {
  position: fixed;
  inset: var(--space-0);
  z-index: 10;
  display: grid;
  place-items: center;
  padding: var(--space-16) var(--space-8);
  background: var(--color-overlayDark);
}

/* Сетка вместо flex: строка со снимком ужимается (minmax(0,1fr)), строка
   с подписью держит свою высоту — иначе высокий снимок выдавливал подпись за экран. */
.photo-viewer__figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: var(--space-4);
  max-width: 100%;
  max-height: 100%;
  min-height: var(--space-0);
}

.photo-viewer__image {
  max-width: 100%;
  max-height: 100%;
  min-height: var(--space-0);
  object-fit: contain;
  border-radius: var(--radius-photo);
  background: var(--color-surface);
}

.photo-viewer__caption {
  flex: none;
  color: var(--color-textOnAccent);
  font-size: var(--size-bodySmall);
  line-height: var(--lh-label);
  text-align: center;
}

.photo-viewer__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-avatar);
  background: var(--color-surface);
  color: var(--color-textPrimary);
}

.photo-viewer__close svg { width: var(--space-5); }

.photo-viewer__close:hover { color: var(--color-accentCoral); }

/* Телефон: полей меньше, снимок занимает почти весь экран */
@media (max-width: 768px) {
  .photo-viewer { padding: var(--space-16) var(--space-4) var(--space-8); }
  .photo-viewer__close { top: var(--space-4); right: var(--space-4); }
  .photo-viewer__caption { font-size: var(--size-label); }
}