/* Generated by .github/scripts/build-front-page-css.mjs. Do not edit directly. */

/* Source: wp-content/themes/nnnails-julia/assets/css/fonts.css */
/* Self-hosted fonts: Prata (display) + Manrope (body). No CDN.

   font-display: fallback оставляет лишь короткий блокирующий период, после
   которого текст становится видим системным шрифтом. Два действительно
   критичных начертания запрашиваются заранее — см. nnnails_preload_fonts()
   в functions.php; остальные не конкурируют с LCP-фотографией. */

/* Manrope — вариативный шрифт: один файл на набор символов покрывает все
   начертания 400–700. Раньше у каждого начертания был свой @font-face с
   копией того же файла под другим именем, и браузер качал его четыре раза. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url('../fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url('../fonts/prata-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url('../fonts/prata-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url('../fonts/prata-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Royalty Free (script) — brand wordmark only */
@font-face {
  font-family: 'Royalty Free';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url('../fonts/royalty-free-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source: wp-content/themes/nnnails-julia/assets/css/tokens.css */
/* ============================================================
   nnnails_julia — Design tokens (single source of truth)
   Naming mirrors WordPress theme.json presets so the port is
   mechanical: every --wp--preset--* below maps 1:1 to a preset,
   WordPress auto-generates identical custom properties.
   Layers:
     1. --wp--preset--*  : raw presets (colors, fonts, sizes, spacing)
     2. semantic aliases : role names referencing presets only
     3. component tokens : reference semantic aliases only
   ============================================================ */

:root {
  /* ---------- 1a. Color presets (palette from brandbook + sampled page) ---------- */
  --wp--preset--color--shell:        #FBF7F6; /* page background */
  --wp--preset--color--surface:      #F8F1F0; /* light bands (trust, works) */
  --wp--preset--color--surface-alt:  #F2E5E3; /* deeper rose bands (services, quality) */
  --wp--preset--color--pearl:        #EDE2DF; /* брендбук: жемчужный */
  --wp--preset--color--rose-mist:    #EBBAC0; /* брендбук: розовая дымка */
  --wp--preset--color--rose:         #D78E99; /* button gradient light stop */
  --wp--preset--color--rose-bloom:   #BE3142; /* primary accent, outlines */
  --wp--preset--color--rose-deep:    #AA4050; /* button gradient deep stop */
  --wp--preset--color--rose-icon:    #DA969F; /* pictogram rose */
  --wp--preset--color--lacquer:      #212023; /* брендбук: глянцевый чёрный (dark card) */
  --wp--preset--color--ink:          #1C1B1E; /* headings */
  --wp--preset--color--text:         #464545; /* body text */
  --wp--preset--color--text-soft:    #706A6B; /* captions, notes; 4.75:1 на surface */
  --wp--preset--color--silver:       #C4C4C4; /* брендбук: серебро */
  --wp--preset--color--leaf:         #69795B; /* брендбук: листовой зелёный */
  --wp--preset--color--line:         #E9D6D6; /* hairlines, separators */
  --wp--preset--color--on-dark:      #F5ECE9; /* light text on lacquer */
  --wp--preset--color--on-dark-soft: #DAAAAB; /* muted rose text on lacquer */

  /* ---------- 1b. Font family presets ---------- */
  --wp--preset--font-family--display: 'Prata', 'Times New Roman', serif;
  --wp--preset--font-family--body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --wp--preset--font-family--script:  'Royalty Free', 'Segoe Script', cursive;

  /* ---------- 1c. Font size presets (fluid, step >= 1.25) ---------- */
  --wp--preset--font-size--xs:    0.8125rem;                          /* 13px  notes */
  --wp--preset--font-size--s:     clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);  /* 14-15 kicker/small */
  --wp--preset--font-size--m:     clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);      /* 16-17 body */
  --wp--preset--font-size--l:     clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);    /* 19-22 lead */
  --wp--preset--font-size--xl:    clamp(1.4375rem, 1.3rem + 0.8vw, 1.75rem);     /* 23-28 h3 */
  --wp--preset--font-size--xxl:   clamp(2rem, 1.55rem + 2.2vw, 3.125rem);        /* 32-50 h2 */
  --wp--preset--font-size--giant: clamp(2.625rem, 1.7rem + 4.6vw, 4.75rem);      /* 42-76 hero h1 */

  /* ---------- 1d. Spacing presets (WP-style 10..90 scale) ---------- */
  --wp--preset--spacing--10: 0.25rem;
  --wp--preset--spacing--20: 0.5rem;
  --wp--preset--spacing--30: 0.75rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.5rem;
  --wp--preset--spacing--80: clamp(3.5rem, 2.5rem + 4vw, 6rem);   /* section padding */
  --wp--preset--spacing--90: clamp(5rem, 3.5rem + 6vw, 8.5rem);   /* hero / dark band air */

  /* ---------- 2. Semantic aliases (reference presets only) ---------- */
  --color-bg:            var(--wp--preset--color--shell);
  --color-surface:       var(--wp--preset--color--surface);
  --color-surface-alt:   var(--wp--preset--color--surface-alt);
  --color-heading:       var(--wp--preset--color--ink);
  --color-text:          var(--wp--preset--color--text);
  --color-text-soft:     var(--wp--preset--color--text-soft);
  --color-primary:       var(--wp--preset--color--rose-bloom);
  --color-primary-deep:  var(--wp--preset--color--rose-deep);
  --color-primary-soft:  var(--wp--preset--color--rose);
  --color-accent-icon:   var(--wp--preset--color--rose-icon);
  --color-mist:          var(--wp--preset--color--rose-mist);
  --color-pearl:         var(--wp--preset--color--pearl);
  --color-dark:          var(--wp--preset--color--lacquer);
  --color-on-dark:       var(--wp--preset--color--on-dark);
  --color-on-dark-soft:  var(--wp--preset--color--on-dark-soft);
  --color-line:          var(--wp--preset--color--line);
  /* Поверхность карточек на светлых полосах: тёплый почти белый. */
  --color-card:          color-mix(in srgb, #fff 72%, var(--wp--preset--color--shell));
  --color-silver:        var(--wp--preset--color--silver);
  --color-focus:         var(--wp--preset--color--rose-bloom);

  --font-display:        var(--wp--preset--font-family--display);
  --font-body:           var(--wp--preset--font-family--body);
  --font-script:         var(--wp--preset--font-family--script);

  /* ---------- Text weights (semantic; never hard-code numbers) ---------- */
  --text-weight-body:     500;   /* running paragraphs — the site baseline */
  --text-weight-emphasis: 600;   /* labels, list items, buttons, kickers */
  --text-weight-strong:   700;   /* strongest accent, footer column titles */

  /* Lead paragraph: one step above body, same weight. Size carries the role,
     not weight — bolding it makes it compete with the heading. */
  --lead-size:    clamp(1.25rem, 1.15rem + 0.45vw, 1.4375rem);  /* 20-23 */
  --lead-weight:  var(--text-weight-body);
  --lead-leading: 1.5;

  --space-2xs: var(--wp--preset--spacing--10);
  --space-xs:  var(--wp--preset--spacing--20);
  --space-s:   var(--wp--preset--spacing--30);
  --space-m:   var(--wp--preset--spacing--40);
  --space-l:   var(--wp--preset--spacing--50);
  --space-xl:  var(--wp--preset--spacing--60);
  --space-2xl: var(--wp--preset--spacing--70);
  --space-section: var(--wp--preset--spacing--80);
  --space-band:    var(--wp--preset--spacing--90);

  /* ---------- 3. Component tokens (reference semantic aliases only) ---------- */

  /* Layout (пропорции от макета 1920: контент ~1720px, поля ~110px) */
  --container-max: 107.5rem;            /* 1720px */
  --container-pad: clamp(1.25rem, 5.7vw, 6.875rem);  /* ~110px на 1920 */

  /* Section proportions (приблизительно, от десктопа 1920x1080) */
  /* hero + header ~1140px при 1080. Потолок 75vw страхует от вьюпорта, который
     сильно выше своей ширины: в режиме «версия для ПК» телефон отдаёт ширину
     ~980px и сжимает страницу, из-за чего высота в CSS-пикселях вырастает до
     ~1700px, и 105svh раздували герой почти на две высоты экрана. На обычных
     экранах потолок не достаётся: он вступает в силу только когда высота
     превышает ширину примерно в 1.4 раза. */
  /* Потолок 72rem (1152px): на мониторах 1440 и выше герой рос до 1512px, а
     контент в нём фиксированной ширины — выходила пустая простыня. На 1080
     потолок не достаётся (там 105svh = 1134px). */
  --hero-min-h: max(38rem, min(105svh, 75vw, 72rem));
  /* Секция «Обо мне» — портрет в карточке слева, весь текст справа. Высоту
     секции задаёт карточка: пропорция 5:6. */
  --quality-card-w: clamp(15rem, 31vw, 35rem);            /* до 560px */
  --quality-card-ratio: 5 / 6;
  --quality-card-radius: var(--radius-card);
  /* Мера строки в колонке текста: ~70 знаков. */
  --quality-measure: 38rem;
  /* Пункты — заголовок и подпись, между пунктами волоски. */
  --quality-item-gap: clamp(1.125rem, 2vw, 1.625rem);
  --quality-item-title-gap: var(--space-2xs);          /* заголовок пункта → подпись */
  --quality-item-title-gap-mobile: var(--space-s);     /* на телефоне строки теснее, нужен зазор больше */
  --quality-title-size-mobile: clamp(2.125rem, 9.4vw, 2.375rem);  /* «Меня зовут Юлия» на телефоне: 34–38px, всегда в одну строку */
  /* Заголовки вкладок на телефоне мельче «Меня зовут Юлия»: это подзаголовки
     внутри секции, а не её имя. На 37px длинная строка разворачивалась в
     четыре строки, и высота карточки при переключении гуляла на 107px. */
  --quality-panel-title-size-mobile: clamp(1.5rem, 6.6vw, 1.75rem);
  /* Под заголовок вкладки всегда отведены две строки: иначе однословный
     заголовок поднимал бы текст, а длинный опускал. */
  --quality-panel-title-lines: 2;
  /* Волосок на розовом фоне: чистый --color-line даёт 1.25:1 и пропадает. */
  --quality-row-border: color-mix(in srgb, var(--color-primary-soft) 55%, var(--color-line));
  /* «Обо мне» с рейлом: портрет, вертикальный рейл меток, панель. */
  --quality-rail-w: clamp(8.5rem, 11vw, 11rem);
  --quality-rail-gap: var(--space-2xl);
  --quality-rail-step: var(--space-xl);                 /* между метками */
  --quality-rail-pad: var(--space-l);                   /* волосок → текст метки */
  /* Рейл по высоте равен блоку текста рядом, а не карточке: так метки и
     заголовок читаются одной группой. */
  --quality-text-measure: 32rem;                        /* ~60 знаков при 17px */
  --quality-rail-line-w: 3px;
  --quality-tab-shift: 0.375rem;                        /* выбранная метка отходит от волоска */
  /* Текст секции — роли сайта, своей шкалы у неё нет: заголовок панели = h2
     секций (xxl), абзац = основной текст (m), метки рейла = надзаголовок
     (kicker). */
  --quality-panel-zoom: 0.985;
  /* Шёлк в правом нижнем углу секции. */
  /* Вся секция — одна светлая карточка: портрет вплотную к её левому краю,
     дальше рейл и текст. Шёлк — фон карточки в правом нижнем углу. */
  --quality-card-bg: var(--color-card);
  --quality-card-pad: var(--space-2xl);
  --quality-card-pad-mobile: var(--space-l);
  --quality-silk: url('../img/silk-corner.webp');
  --quality-silk-size: min(40%, 32rem) auto;
  /* Портрет в карточке уже и ниже прежнего (4:5 вместо 5:6): высоту
     карточки задаёт он, и под текстом не остаётся пустой полосы. */
  --quality-rail-photo-w: clamp(15rem, 27vw, 30rem);
  --quality-rail-photo-ratio: 4 / 5;
  --quality-silk-size-tablet: 44% auto;
  --quality-silk-size-mobile: 72% auto;
  --quality-photo-ratio-tablet: 4 / 3;
  --quality-photo-ratio-mobile: 4 / 3;

  /* Radii */
  --radius-pill: 999px;
  --radius-card: 1.75rem;
  --radius-photo: 0.375rem;

  /* Shadows */
  --shadow-btn: 0 10px 24px -10px color-mix(in srgb, var(--color-primary-deep) 55%, transparent);
  --shadow-card: 0 30px 60px -30px color-mix(in srgb, var(--color-dark) 35%, transparent);

  /* Z-index scale */
  --z-header: 50;
  --z-skip: 100;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;

  /* Buttons
     Ровная заливка вместо градиента и спокойный радиус вместо таблетки —
     тот же язык, что у формы записи и страницы /my-booking/. Размер задают
     токены, поэтому вариант .btn--sm переопределяет их, а не правила. */
  --btn-font: var(--font-body);
  --btn-size: var(--wp--preset--font-size--m);
  --btn-weight: var(--text-weight-emphasis);
  --btn-radius: 0.625rem;
  --btn-min-h: 3rem;
  --btn-pad-y: 0.85em;
  --btn-pad-x: 1.6em;
  --btn-primary-fill: var(--color-primary);
  --btn-primary-fill-hover: color-mix(in srgb, var(--color-primary) 88%, #000);
  --btn-primary-ink: #FFFFFF;
  --btn-primary-shadow: none;
  /* Контур видно и без наведения: чистый --color-line на светлом фоне давал
     около 1.2:1 и почти пропадал. Наведение по-прежнему доводит до
     --color-primary. */
  --btn-outline-border: color-mix(in srgb, var(--color-primary) 45%, var(--color-primary-soft));
  --btn-outline-border-hover: var(--color-primary);
  --btn-outline-ink: var(--color-heading);
  --btn-outline-fill: color-mix(in srgb, var(--wp--preset--color--shell) 55%, transparent);
  --btn-outline-fill-hover: color-mix(in srgb, var(--color-mist) 38%, var(--wp--preset--color--shell));   /* заливка контурных кнопок и стрелок слайдера при наведении */

  /* Kicker (uppercase label with sparkle) */
  --kicker-font: var(--font-body);
  --kicker-size: var(--wp--preset--font-size--s);
  --kicker-weight: var(--text-weight-emphasis);
  --kicker-tracking: 0.28em;
  --kicker-ink: var(--color-heading);
  --kicker-star: var(--color-primary);
  --kicker-gap: var(--space-s);

  /* Headings */
  --heading-font: var(--font-display);
  --heading-weight: 400;                 /* Prata has a single weight */
  --heading-ink: var(--color-heading);
  --heading-tracking: 0.01em;
  --heading-leading: 1.12;
  --display-tracking: 0.04em;            /* hero wordmark */

  /* Royalty Free is compact enough to reach 150px without widening the wordmark. */
  --hero-title-font: var(--font-script);
  --hero-title-weight: 400;
  --hero-title-size: clamp(5rem, 3.25rem + 7.5vw, 9.375rem);  /* 80-150 */
  --hero-title-leading: 1.1;
  --hero-title-tracking: 0.01em;
  --hero-heart-size: 0.46em;

  /* Ornament divider (line ✦ line) */
  --divider-line: var(--color-line);
  --divider-star: var(--color-primary);
  --divider-width: 17.5rem;

  /* Icon badge (soft circle with pictogram) */
  --icon-badge-size: 4.5rem;
  --icon-badge-bg: color-mix(in srgb, var(--color-mist) 55%, var(--wp--preset--color--shell));
  --icon-badge-ink: var(--color-primary);
  --icon-badge-icon: 2rem;

  /* Trust strip — типографическая полоса из трёх фактов, без иконок */
  --trust-number-font: var(--font-display);
  /* Три ступени: рейтинг > опыт > фраза. */
  --trust-rating-size: var(--wp--preset--font-size--giant);        /* 42–76 */
  --trust-statement-size: var(--wp--preset--font-size--l);         /* 19–22 */
  /* Факты в первом экране — подпись к нему, а не второй заголовок: мельче
     лида по весу, крупнее кнопок по размеру. */
  --trust-number-size: clamp(2rem, 1.6rem + 0.9vw, 2.625rem);      /* 32–42, рейтинг и опыт одного размера */
  --trust-number-size-mobile: 2.25rem;                             /* 36: на телефоне факты делят ширину кнопок */
  --trust-pair-gap: clamp(2rem, 3.5vw, 3rem);                      /* рейтинг ↔ опыт */
  --trust-accent: var(--color-primary);        /* сплошной фирменный красный */

  /* Services — одна карточка на две услуги, фото фоном половин */
  --services-card-radius: var(--radius-card);   /* карточка — общий радиус карточек */
  --services-card-min-h: clamp(22rem, 30vw, 30rem);
  --services-card-min-h-stacked: clamp(20rem, 100vw, 26rem);
  --services-card-pad: clamp(1.5rem, 0.75rem + 2.2vw, 2.75rem);
  --services-gap: var(--space-l);              /* промежуток между карточками */
  --services-gap-stacked: var(--space-m);      /* телефон: карточки друг под другом */
  --service-photo-pos: center;
  --service-photo-pos-stacked: 42% top;        /* телефон: ногти вправо и вверх */
  --service-photo-h-stacked: 118%;             /* телефон: кадр выше карточки, поднят вверх */
  /* Затемнение из левого нижнего угла под текстом — из акцента сайта (цвет
     звёздочки-sparkle), углублённого лаком: винно-розовое, в тон линии между
     половинами. Плотное у угла, сходит на нет к середине. */
  --service-shade-ink: color-mix(in srgb, var(--kicker-star) 40%, var(--color-dark));
  /* Много ступеней с плавным спадом — без видимой границы затемнения. */
  --service-shade: radial-gradient(
    150% 125% at 0% 100%,
    color-mix(in srgb, var(--service-shade-ink) 78%, transparent) 0%,
    color-mix(in srgb, var(--service-shade-ink) 68%, transparent) 16%,
    color-mix(in srgb, var(--service-shade-ink) 52%, transparent) 32%,
    color-mix(in srgb, var(--service-shade-ink) 32%, transparent) 48%,
    color-mix(in srgb, var(--service-shade-ink) 14%, transparent) 64%,
    color-mix(in srgb, var(--service-shade-ink) 4%, transparent) 80%,
    transparent 100%
  );
  --service-shade-stacked: linear-gradient(
    0deg,
    color-mix(in srgb, var(--service-shade-ink) 80%, transparent) 0%,
    color-mix(in srgb, var(--service-shade-ink) 66%, transparent) 22%,
    color-mix(in srgb, var(--service-shade-ink) 42%, transparent) 44%,
    color-mix(in srgb, var(--service-shade-ink) 16%, transparent) 66%,
    color-mix(in srgb, var(--service-shade-ink) 4%, transparent) 84%,
    transparent 100%
  );
  --service-ink: var(--color-on-dark);
  --service-ink-soft: color-mix(in srgb, var(--color-on-dark) 88%, transparent);
  --service-content-w: 27rem;
  /* Наведение мышью: пластина приподнимается, слегка наклоняется за
     курсором и кадр под стеклом идёт с параллаксом. Текст неподвижен. */
  --service-tilt: 5deg;                        /* наклон за курсором */
  --service-photo-shift: 7px;                  /* параллакс кадра */
  /* Запас кадра по краям, а не приближение на наведении: масштаб одинаковый
     в покое и под курсором, поэтому зума не видно. Без запаса на сдвиге
     из-под кадра показалась бы подложка карточки. Нужный минимум —
     1 + 2 × сдвиг / высота карточки, то есть около 1,03. */
  --service-photo-slack: 1.035;
  --service-perspective: 1600px;               /* общая точка схода у сетки */
  /* Край карточки. Кадр натянут на неё, как ткань на картон: у кромки он не
     обрывается, а заворачивается за неё.

     Светлой линии по кромке здесь нет и не должно быть. Она тут была —
     кольцом с маской поверх кадра — и как её ни утоньшай, читалась обводкой,
     а не загибом: любая линия постоянной яркости выглядит нарисованной.
     Загиб отдаёт только градиент, у которого нет собственной толщины, —
     см. --service-bevel ниже.

     Замер света по серединам сторон референса (пик грани против яркости
     кадра под ней), на нём построены значения в --service-bevel:

       верх  243 над 224  → +19
       низ   162 над  82  → +80, пик в 7px ВНУТРИ от кромки
       лево  —            → 0
       право —            → 0

     То есть ярче всего светится низ, а не верх: нижняя грань ловит
     отражённый свет от светлой страницы. Сверху грань слабее, а бока в
     середине не светятся вовсе — туда свет падает вскользь. */
  /* Свет и тень ПО КРАЯМ — внутренними тенями с нулевым разбросом (spread).
     Это ключ ко всему: у внутренней тени без разброса внешняя граница лежит
     ровно на кромке карточки и повторяет её скругление, а размывается она
     только внутрь. Поэтому у кромки граница чёткая, а вся растушёвка уходит
     в кадр — ровно так, как в референсе.

     Раньше тут стояли отрицательные разбросы (-20px и больше). Отрицательный
     разброс стягивает тень от кромки внутрь, и вместо подсветки края
     получалось мутное пятно, висящее где-то в середине. Отсюда и бралась
     «серая подсветка снизу».

     Лестница затемнения снизу — три тени одного направления с растущим
     смещением и падающей плотностью (30/52/108px). Одна тень даёт ступеньку,
     три разных масштаба складываются в плавную кривую без единой границы.

     Порядок в списке = порядок рисования: первая сверху. Поэтому тёплая
     кромка стоит первой и читается поверх затемнения. */
  --service-bounce-ink: #FFC3BB;
  --service-bevel:
    /* отражённый свет по нижней кромке: тёплый, прижат к самому краю */
    inset 0 -9px 10px 0 color-mix(in srgb, var(--service-bounce-ink) 34%, transparent),
    /* верхняя кромка ловит свет сверху */
    inset 0 7px 8px 0 color-mix(in srgb, #FFFFFF 15%, transparent),
    /* справа поверхность уходит от света */
    inset -26px 0 30px 0 color-mix(in srgb, var(--color-dark) 8%, transparent),
    /* лестница затемнения снизу */
    inset 0 -30px 34px 0 color-mix(in srgb, var(--color-dark) 15%, transparent),
    inset 0 -52px 44px 0 color-mix(in srgb, var(--color-dark) 12%, transparent),
    inset 0 -108px 56px 0 color-mix(in srgb, var(--color-dark) 9%, transparent);
  /* Тень снаружи: волосок по контуру, контактная под кромкой, средняя и
     глубокая мягкая. Без неё пластина лежит на фоне, а не над ним. */
  /* Волосок по контуру. Один и тот же в покое и под курсором: когда в покое
     он был тёплым и втрое плотнее, карточка в покое выглядела обведённой, а
     при наведении обводка пропадала. */
  --service-hairline: 0 0 0 1px color-mix(in srgb, var(--color-dark) 10%, transparent);
  --service-shadow:
    var(--service-hairline),
    0 2px 1px color-mix(in srgb, var(--color-dark) 6%, transparent),
    0 4px 2px color-mix(in srgb, var(--color-dark) 7%, transparent),
    0 8px 4px color-mix(in srgb, var(--color-dark) 7%, transparent),
    0 16px 8px color-mix(in srgb, var(--color-dark) 7%, transparent),
    0 32px 16px color-mix(in srgb, var(--color-dark) 7%, transparent);
  /* Под курсором пластина не поднимается, только поворачивается — лестница
     целиком уезжает в сторону, противоположную наклону. */
  --service-shadow-hover:
    var(--service-hairline),
    calc(var(--px, 0) * -1px) calc(var(--py, 0) * -1px + 2px) 1px color-mix(in srgb, var(--color-dark) 6%, transparent),
    calc(var(--px, 0) * -2px) calc(var(--py, 0) * -1px + 4px) 2px color-mix(in srgb, var(--color-dark) 7%, transparent),
    calc(var(--px, 0) * -4px) calc(var(--py, 0) * -3px + 8px) 4px color-mix(in srgb, var(--color-dark) 7%, transparent),
    calc(var(--px, 0) * -8px) calc(var(--py, 0) * -6px + 16px) 8px color-mix(in srgb, var(--color-dark) 7%, transparent),
    calc(var(--px, 0) * -16px) calc(var(--py, 0) * -12px + 32px) 16px color-mix(in srgb, var(--color-dark) 7%, transparent);
  --service-text-measure: 32ch;                /* абзац уже заголовка: правее ногти */
  --service-title-size: var(--wp--preset--font-size--xl);

  /* Sliders (работы, отзывы): общий набор управления */
  --slider-arrow: 3rem;
  /* Стрелки и точки должны читаться на светлом фоне без наведения:
     контур — как у outline-кнопок, неактивная точка — мягкая роза. */
  --slider-arrow-border: var(--btn-outline-border);
  --slider-dot: color-mix(in srgb, var(--color-primary-soft) 60%, var(--color-line));
  --slider-dot-active: var(--color-primary);
  --works-gap: clamp(0.75rem, 1.6vw, 1.5rem);
  --works-ratio: 4 / 5;
  --works-veil: color-mix(in srgb, var(--color-mist) 30%, transparent);   /* дымка над кадром при наведении */
  --works-zoom-size: 3.25rem;
  --works-zoom-size-touch: 2.25rem;

  /* Reviews — колонки без карточек */
  /* Разделитель колонок — едва заметный: сплошной розовый спорил с текстом. */
  --review-divider: color-mix(in srgb, var(--color-line) 70%, transparent);
  --review-quote-font: var(--font-body);
  --review-mark-font: var(--font-display);
  --review-quote-size: var(--wp--preset--font-size--m);
  --review-lines: 6;
  --reviews-peony-w: clamp(14rem, 24vw, 28rem);
  --reviews-peony-opacity: 0.75;
  --reviews-peony-offset: 22%;
  --review-mark: var(--color-primary-soft);
  --review-name-font: var(--font-display);

  /* Lightbox gallery */
  --lightbox-bg: color-mix(in srgb, var(--color-dark) 92%, transparent);
  --lightbox-ink: var(--color-on-dark);
  --lightbox-control: 3rem;

  /* Dark CTA card */
  --cta-card-bg: var(--color-dark);
  --cta-card-radius: var(--radius-card);
  --cta-card-ink: var(--color-on-dark);
  --cta-card-soft: var(--color-on-dark-soft);

  /* Текстовые страницы: политика, оферта, инструкции.
     Общий контейнер сайта — 1720px, для прозы это слишком широко:
     строка в 200 знаков нечитаема. Здесь своя мера строки. */
  --content-measure: 46rem;                                  /* ~736px, около 70 знаков */
  --content-size: var(--wp--preset--font-size--m);
  --content-leading: 1.75;
  --content-heading-size: var(--wp--preset--font-size--xl);
  --content-subheading-size: var(--wp--preset--font-size--l);
  --content-marker: var(--color-primary);

  /* Header */
  --header-h: 4.5rem;
  --header-bg-scrolled: color-mix(in srgb, var(--wp--preset--color--shell) 92%, transparent);
  --nav-link-ink: var(--color-heading);
  --nav-link-size: var(--wp--preset--font-size--s);
}

/* Source: wp-content/themes/nnnails-julia/assets/css/base.css */
/* ============================================================
   base.css — reset, typography, layout primitives, shared UI
   Everything references tokens.css. No raw values except 0/1/100%.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Document ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--wp--preset--font-size--m);
  font-weight: var(--text-weight-body);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  color: var(--heading-ink);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
}

a { color: inherit; }

::selection {
  background: var(--color-mist);
  color: var(--color-heading);
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  z-index: var(--z-skip);
  top: var(--space-s);
  left: var(--space-s);
  padding: var(--space-s) var(--space-l);
  background: var(--color-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--space-2xs);
}

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

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--space-section); }

/* ---------- Kicker: ✦ LABEL ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--kicker-gap);
  font-family: var(--kicker-font);
  font-size: var(--kicker-size);
  font-weight: var(--kicker-weight);
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  color: var(--kicker-ink);
}
.kicker .icon { color: var(--kicker-star); }

/* ---------- Section head: kicker + h2 + ornament ---------- */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-l);
  margin-bottom: var(--space-2xl);
}
/* balance, а не pretty: заголовок секции — одна-две строки, и делить их надо
   поровну, а не спасать последнее слово. */
.section-head h2 {
  font-size: var(--wp--preset--font-size--xxl);
  text-wrap: balance;
}
.section-head--left { align-items: flex-start; text-align: left; }

/* ---------- Ornament divider: ───── ✦ ───── ---------- */
.ornament {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  width: min(var(--divider-width), 100%);
  color: var(--divider-star);
}
.ornament::before, .ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--divider-line);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  min-height: var(--btn-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--btn-font);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  border-radius: var(--btn-radius);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

/* Компактный вариант — шапка и меню, где кнопка соседствует с пунктами
   навигации. Высоту держим на 44px: это нижняя граница пальца. */
.btn--sm {
  --btn-size: var(--wp--preset--font-size--s);
  --btn-min-h: 2.75rem;
  --btn-pad-y: 0.6em;
  --btn-pad-x: 1.25em;
}

/* Filled — на наведении заливка уходит глубже, без тени и без движения */
.btn-primary {
  background: var(--btn-primary-fill);
  color: var(--btn-primary-ink);
  box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
  background: var(--btn-primary-fill-hover);
  color: var(--btn-primary-ink);
}

/* Outline — на наведении темнеет только граница */
.btn-outline {
  border: 1px solid var(--btn-outline-border);
  color: var(--btn-outline-ink);
  background: var(--btn-outline-fill);
}
.btn-outline:hover,
.btn-outline:focus-visible,
.btn-outline:active {
  border-color: var(--btn-outline-border-hover);
  background: var(--btn-outline-fill-hover);   /* белая заливка → розоватая */
}

/* ---------- Text link with arrow ---------- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  font-weight: var(--btn-weight);
  text-decoration: none;
}
.text-link .icon { transition: transform var(--dur-fast) var(--ease-out); }
.text-link:hover .icon { transform: translateX(4px); }

/* ---------- Touch feedback ----------
   Браузер подсвечивает нажатие своим синим прямоугольником: он не из палитры
   и на фотографиях работ читается как ошибка вёрстки. Убираем — но не молча:
   на телефоне нет наведения, и если снять подсветку и ничего не дать взамен,
   интерфейс начинает казаться неотзывчивым. Поэтому ниже у каждого нажимаемого
   элемента появляется собственное состояние :active.
   :focus-visible при этом не трогаем — это обводка для клавиатуры, а не для
   пальца, и убирать её значило бы сломать доступность. */
a,
button,
summary,
label,
input,
select,
textarea,
[role='button'] {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Icons ---------- */
.icon { flex-shrink: 0; }

/* ---------- Icon badge (soft circle) ---------- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-badge-size);
  height: var(--icon-badge-size);
  border-radius: var(--radius-pill);
  background: var(--icon-badge-bg);
  color: var(--icon-badge-ink);
}

/* ---------- Reveal on scroll ----------
   Появление — украшение, оно не должно задерживать чтение. Поэтому быстро и
   тихо: блок проявляется за 0.4 с без сдвига (выплывание снизу читалось
   чужим для сайта), линии орнамента расходятся от звезды, фото коротко
   оседает — то же, что у первого экрана, только короче. Класс is-visible
   ставит main.js, как только блок заходит на экран. */
.reveal {
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; }

.section-head.reveal > .ornament::before,
.section-head.reveal > .ornament::after {
  scale: 0 1;
  transition: scale 500ms var(--ease-out) 100ms;
}
.section-head.reveal > .ornament::before { transform-origin: right center; }
.section-head.reveal > .ornament::after  { transform-origin: left center; }
.section-head.reveal.is-visible > .ornament::before,
.section-head.reveal.is-visible > .ornament::after { scale: 1 1; }

/* Фото оседает отдельным свойством scale — transform занят наведением,
   поэтому у фото переходы перечислены полностью. */
.quality__figure.reveal .quality__photo,
.flex-intro__photo.reveal img {
  scale: 1.03;
  transition: scale 600ms var(--ease-out);
}
.services__card.reveal .service__photo {
  scale: 1.03;
  transition: transform var(--dur-slow) var(--ease-out),
              scale 600ms var(--ease-out);
}
.works__slider.reveal .works__photo {
  scale: 1.03;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              scale 600ms var(--ease-out);
}
.reveal.is-visible :is(.quality__photo, .service__photo, .works__photo),
.flex-intro__photo.reveal.is-visible img { scale: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .section-head.reveal > .ornament::before,
  .section-head.reveal > .ornament::after,
  .reveal :is(.quality__photo, .service__photo, .works__photo),
  .flex-intro__photo.reveal img { scale: 1; }
}

/* Source: wp-content/themes/nnnails-julia/assets/css/sections.css */
/* ============================================================
   sections.css — per-section styles only.
   All values reference tokens (tokens.css) or base primitives.
   ============================================================ */

/* ---------- pattern: header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.site-header.is-scrolled {
  background: var(--header-bg-scrolled);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--color-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  min-height: var(--header-h);
}
/* Wordmark in the script face. Tracking stays near zero to preserve joins. */
.site-header__logo {
  font-family: var(--font-script);
  font-size: var(--wp--preset--font-size--xl);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--color-heading);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav { margin-inline: auto; }
.site-nav__list {
  display: flex;
  gap: clamp(var(--space-l), 3vw, var(--space-xl));
}
.site-nav__list a {
  font-size: var(--nav-link-size);
  font-weight: var(--kicker-weight);
  color: var(--nav-link-ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__list a:hover,
.site-nav__list a:active { color: var(--color-primary); }
/* Горизонтальное меню: под пунктом из центра вырастает тонкая розовая черта.
   В выпадающем меню телефона пункты крупные, черта там не нужна. */
@media (min-width: 64.0625rem) {
  .site-nav__list a {
    position: relative;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .site-nav__list a::after {
    content: '';
    position: absolute;
    inset: auto 0 -0.375rem;
    height: 1px;
    background: var(--color-primary-soft);
    transform: scaleX(0);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .site-nav__list a:hover::after,
  .site-nav__list a:focus-visible::after { transform: scaleX(1); }
}
@media (min-width: 64.0625rem) and (prefers-reduced-motion: reduce) {
  .site-nav__list a::after { transition: none; }
}
/* Вертикальный паддинг задаёт .btn--sm; здесь остался только отступ,
   специфичный для шапки. */

/* Mobile nav */
.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  align-items: center;
  justify-content: center;
}
/* Отклик на палец вместо снятой системной подсветки. */
.nav-toggle:active {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 1.375rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-heading);
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ''; position: absolute; }
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

/* Mobile CTA row inside the menu: hidden on desktop */
.site-nav__cta { display: none; }

@media (max-width: 64rem) {
  .site-nav { margin-inline: auto 0; }
  .nav-toggle { display: inline-flex; position: relative; z-index: calc(var(--z-header) + 1); }

  /* Light top-sheet: full width, not full height, quiet and airy */
  .site-nav__list {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: var(--z-header);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    margin: 0;
    padding: var(--space-xs) 0 0;
    background: var(--wp--preset--color--shell);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    /* Одна длительность в обе стороны: раньше закрытие шло вдвое быстрее
       открытия и читалось как рывок. */
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
  }
  .site-nav__list.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }
  .site-nav__list li { width: 100%; }
  .site-nav__list > li {
    border-bottom: 1px solid var(--color-line);
  }
  .site-nav__list a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--wp--preset--font-size--m);
    font-weight: var(--heading-weight);
    letter-spacing: 0;
    color: var(--color-heading);
    padding: var(--space-s) var(--space-m);
    white-space: normal;
  }
  .site-nav__list a:hover,
  .site-nav__list a:active { color: var(--color-primary); }

  /* Links breathe in one after another. Обратно ссылки не гасим: они держат
     свой вид, пока уезжает сама шторка, и сбрасываются уже за кадром —
     иначе две затухающие прозрачности накладываются и закрытие «схлопывается». */
  .site-nav__list li {
    opacity: 0;
    translate: 0 0.5rem;
    transition: opacity 0s linear var(--dur-base), translate 0s linear var(--dur-base);
  }
  .site-nav__list.is-open li {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
  }
  .site-nav__list.is-open li:nth-child(1) { transition-delay: 40ms; }
  .site-nav__list.is-open li:nth-child(2) { transition-delay: 80ms; }
  .site-nav__list.is-open li:nth-child(3) { transition-delay: 120ms; }
  .site-nav__list.is-open li:nth-child(4) { transition-delay: 160ms; }
  .site-nav__list.is-open li:nth-child(5) { transition-delay: 200ms; }
  .site-nav__list.is-open li:nth-child(6) { transition-delay: 240ms; }

  /* Booking entry reads as a plain menu row, like every other item. */
  .site-nav__cta { display: block; }

  .site-header__cta { display: none; }
  body.nav-open { overflow: hidden; }

  /* Solid header + soft scrim under the sheet while the menu is open.
     Затемнение существует всегда и живёт прозрачностью: раньше оно
     появлялось и исчезало вместе с классом, то есть мгновенно. */
  body.nav-open .site-header { background: var(--wp--preset--color--shell); }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) - 1);
    background: color-mix(in srgb, var(--color-dark) 32%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
  }
  body.nav-open::before {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease-out);
  }

  @media (prefers-reduced-motion: reduce) {
    .site-nav__list li { opacity: 1; translate: 0 0; transition: none; }
  }
}

/* ---------- pattern: hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 20%, color-mix(in srgb, var(--color-mist) 55%, transparent) 0%, transparent 60%),
    linear-gradient(115deg,
      var(--color-pearl) 0%,
      color-mix(in srgb, var(--color-pearl) 55%, var(--wp--preset--color--shell)) 45%,
      var(--color-mist) 100%);
}
.hero__photo {
  position: absolute;
  inset: 0 0 0 auto;
  height: 100%;
  width: min(52vw, 58rem);
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-min-h);
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl);
}
.hero__content {
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Rhythm is set per element below, on an 8px grid. */
  gap: 0;
}
.hero__title {
  display: flex;
  align-items: flex-start;
  gap: 0.12em;
  margin: 0;
  /* Цвет прописан явно: вордмарк перестал быть заголовком (H1 теперь у лида),
     а раньше он брал этот цвет из общего правила для h1-h3. */
  color: var(--heading-ink);
  font-family: var(--hero-title-font);
  font-size: var(--hero-title-size);
  font-weight: var(--hero-title-weight);
  letter-spacing: var(--hero-title-tracking);
  line-height: var(--hero-title-leading);
  text-wrap: balance;
}
/* Script faces sit high in the box; keep the wordmark intact on one line. */
.hero__title-text {
  display: block;
  white-space: nowrap;
}
.hero__heart {
  display: block;
  flex: 0 0 auto;
  width: var(--hero-heart-size);
  height: var(--hero-heart-size);
  margin-top: 0.16em;
  background-color: currentColor;
  color: var(--color-primary);
  -webkit-mask: url('../img/hero-heart-traced.svg') center / contain no-repeat;
  mask: url('../img/hero-heart-traced.svg') center / contain no-repeat;
  transform: perspective(7em) rotateX(14deg) rotateY(-18deg) rotateZ(-8deg);
  transform-box: fill-box;
  transform-origin: center;
}
.hero__kicker {
  margin: var(--space-xs) 0 0;          /* 8 */
  font-family: var(--kicker-font);
  font-size: var(--wp--preset--font-size--s);
  font-weight: var(--kicker-weight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.hero .ornament {
  width: min(20rem, 100%);
  align-self: stretch;
  margin-top: var(--space-m);            /* 16 */
}
/* Reads as a paragraph, not a second headline: one step down the scale,
   regular weight, body ink, no tracking. Measure kept inside 45-75ch. */
.hero__lead {
  margin: var(--space-m) 0 0;            /* 16 */
  max-width: 46ch;
  /* Гарнитура прописана явно: лид стал H1 и иначе подхватил бы серифный
     --heading-font из общего правила для h1-h3. Роль лида не изменилась —
     это по-прежнему абзац по виду, заголовок только по разметке. */
  font-family: var(--font-body);
  font-size: var(--lead-size);
  font-weight: var(--lead-weight);
  line-height: var(--lead-leading);
  color: var(--color-text);
  letter-spacing: 0;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-top: var(--space-l);            /* 24 — largest gap, right before the CTA */
}

/* ---------- Hero entrance ----------
   Один авторский момент: вордмарк «Nail Mood» проявляется слева направо,
   как надпись от руки, и в конце ставится сердечко. Остальное поднимается
   следом по порядку чтения, всё укладывается примерно в 1,1 с.

   Только CSS: анимация не ждёт отложенных скриптов и не зависит от них.
   Только transform / opacity / clip-path — раскладка не двигается, CLS 0.
   Отдельные свойства translate и scale не спорят с transform, который уже
   висит на сердечке (наклон) и на фактах (ховер).

   Фото — LCP-элемент страницы, поэтому прозрачность у него не трогаем:
   элемент с opacity 0 браузер не засчитывает как отрисованный, и LCP
   сдвинулся бы на длину анимации. Фото видно с первого кадра и лишь
   «оседает» из лёгкого приближения. */
@media (prefers-reduced-motion: no-preference) {
  .hero__photo {
    animation: hero-settle 1400ms var(--ease-out) both;
  }
  /* Запас по краям клипа: у рукописного шрифта росчерки вылезают за
     строку, без запаса их срезало бы и в конце анимации. */
  .hero__title-text {
    animation: hero-write 900ms var(--ease-out) 80ms both;
  }
  .hero__heart {
    animation: hero-heart 520ms var(--ease-out) 760ms both;
  }
  .hero__kicker,
  .hero__lead,
  .hero__actions,
  .hero__content > .trust {
    animation: hero-rise 600ms var(--ease-out) both;
  }
  .hero__kicker               { animation-delay: 300ms; }
  .hero__lead                 { animation-delay: 420ms; }
  .hero__actions              { animation-delay: 500ms; }
  .hero__content > .trust     { animation-delay: 580ms; }
  /* Линии орнамента расходятся от звёздочки в стороны — продолжение
     «письма», а не очередное появление снизу. */
  .hero .ornament::before,
  .hero .ornament::after {
    animation: hero-line 700ms var(--ease-out) 360ms both;
  }
  .hero .ornament::before { transform-origin: right center; }
  .hero .ornament::after  { transform-origin: left center; }
}

/* Меньше движения: без сдвигов и масштаба, текст просто быстро
   проявляется, фото и вордмарк — сразу на месте. */
@media (prefers-reduced-motion: reduce) {
  .hero__kicker,
  .hero__lead,
  .hero__actions,
  .hero__content > .trust {
    animation: hero-fade 240ms linear both;
  }
}

@keyframes hero-settle {
  from { scale: 1.04; }
}
@keyframes hero-write {
  from { clip-path: inset(-0.3em 100% -0.4em -0.3em); }
  to   { clip-path: inset(-0.3em -0.3em -0.4em -0.3em); }
}
@keyframes hero-heart {
  from { opacity: 0; scale: 0.4; }
}
@keyframes hero-rise {
  from { opacity: 0; translate: 0 0.75rem; }
}
@keyframes hero-line {
  from { scale: 0 1; }
}
@keyframes hero-fade {
  from { opacity: 0; }
}

@media (max-width: 48rem) {
  .hero {
    display: flex;
    flex-direction: column;
    /* Royalty Free is 3.6em wide for “Nail Mood”; 20vw keeps it on one line. */
    --hero-title-size: clamp(4rem, 20vw, 7rem);
    /* The lead remains paragraph-sized and visually secondary to the wordmark. */
    --lead-size: 1.125rem;
  }
  /* Фото — первый блок под шапкой; кадр смещён на ногти (они лежат в средней
     трети портретного снимка), нижний край растворяется в фоне секции. */
  .hero__photo {
    position: static;
    order: -1;
    width: 100%;
    height: min(90vw, 26rem);
    margin-top: var(--header-h);
    object-position: center 45%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  }
  /* Снизу тот же шаг, что от кнопок до цифр (--space-xl): факты стоят
     посередине между кнопками и краем первого экрана. */
  .hero__inner {
    min-height: 0;
    padding-block: var(--space-m) var(--space-xl);
  }
  /* Обе кнопки одной ширины: одна колонка на всю ширину контента. */
  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-s);
    align-self: stretch;
    width: 100%;
  }
  .hero__actions .btn { width: 100%; }
}

/* ---------- pattern: trust ----------
   Два факта в первом экране, под кнопками:

     5.0          6 лет
     РЕЙТИНГ VK   ОПЫТ РАБОТЫ

   Оба по одной верхней линии, числа одного размера, подписи в одну строку.
   Числа — сплошным фирменным красным (--trust-accent). Факт — ссылка:
   рейтинг ведёт к отзывам, опыт — к «Обо мне». На ПК при наведении число
   приподнимается, под подписью прорисовывается красный волосок. */
/* Отступ от кнопок крупнее шагов внутри группы: факты читаются отдельной
   строкой-подтверждением, но остаются в той же колонке и той же группе. */
.hero__content > .trust { margin-top: var(--space-2xl); }
.trust__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  column-gap: var(--trust-pair-gap);
  row-gap: var(--space-l);
}
.trust__item { min-width: 0; }
.trust__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  color: inherit;
  text-decoration: none;
}
.trust__link:focus-visible {
  outline-offset: 0.375rem;
  border-radius: var(--space-2xs);
}
.trust__value {
  display: flex;
  transition: transform var(--dur-base) var(--ease-out);
  align-items: baseline;
  gap: 0.2em;
  margin: 0;
  font-family: var(--trust-number-font);
  font-weight: var(--heading-weight);
  line-height: 1;
  color: var(--trust-accent);
}
.trust__number { font-size: var(--trust-number-size); }
.trust__unit {
  font-size: calc(var(--trust-number-size) * 0.5);
  text-transform: lowercase;
}
.trust__label {
  position: relative;
  padding-bottom: 0.35em;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--text-weight-emphasis);
  /* Разрядка как у меток рейла «Обо мне»: прописные читаются, но буквы не
     рассыпаются. */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  transition: color var(--dur-base) var(--ease-out);
}
.trust__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--trust-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .trust__link:hover .trust__value { transform: translateY(-0.125rem); }
  .trust__link:hover .trust__label { color: var(--heading-ink); }
  .trust__link:hover .trust__label::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .trust__value,
  .trust__label::after { transition: none; }
  .trust__link:hover .trust__value { transform: none; }
}
/* Телефон: кнопки во всю ширину, факты делят её поровну — каждый по центру
   своей половины, числа крупнее. */
@media (max-width: 48rem) {
  .hero__content > .trust {
    align-self: stretch;
    margin-top: var(--space-xl);
  }
  .trust__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-s);
  }
  .trust__link { align-items: center; }
  .trust__number { font-size: var(--trust-number-size-mobile); }
  .trust__unit { font-size: calc(var(--trust-number-size-mobile) * 0.5); }
}

/* ---------- pattern: services ----------
   Две отдельные карточки через промежуток. Фото — фон всей карточки, ногти
   на кадре справа. Текст белый, в левом нижнем углу, под ним небольшое тёплое
   затемнение из того же угла; остальной кадр не тронут. Вся карточка —
   невидимая ссылка.

   Слои снизу вверх: кадр → затемнение под текстом → текст → ссылка.

   Карточка стоит ровно, весь объём ей даёт свет по краям — так он устроен и
   в референсе. Ни одной линии по периметру: свет и тень набраны внутренними
   тенями с нулевым разбросом, у них внешняя граница лежит ровно на кромке и
   повторяет скругление, а растушёвка уходит внутрь. Снизу тёплый отражённый
   свет, справа и снизу поверхность уходит в тень без внутренней границы.
   Снаружи — стопка теней. Состав подробно описан у --service-bevel в
   tokens.css.

   Под курсором карточка слегка поворачивается вслед за ним (--px/--py из
   main.js), тень уезжает в противоположную сторону, кадр под стеклом идёт с
   параллаксом. С места карточка не сходит, текст не двигается и кадр не
   приближается: всё это раздражает сильнее, чем помогает.

   Наклонять карточку ради видимой толщины бесполезно: ширина торца равна
   толщина × sin(угла), и на спокойных двух-трёх градусах от любой толщины
   остаётся пиксель. Раскладывать слои по Z (preserve-3d) тоже нельзя: это
   требует, чтобы на элементе не было обрезки, а кадру обрезка нужна — иначе
   он вылезет за скругление. При конфликте браузер сплющивает сцену и порядок
   слоёв становится непредсказуем: так в Firefox пропадал текст второй
   карточки. */
.services { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-alt) 100%); }
/* Строки общие для обеих карточек (subgrid): воздух с фото, заголовок,
   описание. Заголовки и описания начинаются на одной высоте при любой длине
   текста. Промежуток только между колонками — row-gap разорвал бы строки
   внутри карточки. */
.services__card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto auto;
  column-gap: var(--services-gap);
  min-height: var(--services-card-min-h);
  /* Перспектива у сетки, а не у карточки: обе карточки разворачиваются к
     общей точке схода. */
  perspective: var(--service-perspective);
}
.service {
  position: relative;
  display: grid;
  /* Разворот в покое. Знак задаётся ниже для каждой карточки: левая уходит
     вглубь левым краем, правая правым. */
  grid-row: span 3;
  grid-template-rows: subgrid;
  padding: var(--services-card-pad);
  border-radius: var(--services-card-radius);
  /* Подложка под фото светлая, в тон секции: тёмная проступала бы на дробных
     пикселях по краю кадра и читалась как чёрная рамка. */
  background: var(--color-mist);
  box-shadow: var(--service-shadow);
  color: var(--service-ink);
}
/* Слой кадра: он же его и обрезает по скруглению.

   Обрезка нужна именно кадру: он масштабируется при наведении и без неё
   вылезет за скругление. */
.service__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
/* Фото — горизонтальный кадр 3:2, ногти в правой части, левый нижний угол
   спокойный: текст и затемнение ложатся на него без сдвигов и отражений. */
.service__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--service-photo-pos);
  /* Слой постоянный, а не только на время наведения: иначе браузер
     перерисовывает белый текст поверх в момент наведения, и он дёргается. */
  will-change: transform;
}
.service__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Радиус обязателен: без него у затемнения остаются прямые углы, и в
     скруглениях карточки оно обрывается. */
  border-radius: inherit;
  /* Затемнение под текстом: без него белые буквы теряются на светлых местах
     кадра. Свет и тень по кромкам — не градиентом, а внутренними тенями:
     см. --service-bevel. */
  background: var(--service-shade);
  box-shadow: var(--service-bevel);
  pointer-events: none;
}
.service__content {
  position: relative;   /* над кадром и стеклом */
  z-index: 2;
  grid-row: 2 / span 2;
  display: grid;
  grid-template-rows: subgrid;
  justify-items: start;
  /* Не дальше середины карточки: правее на кадре ногти. */
  max-width: min(var(--service-content-w), 58%);
}
.service__title {
  margin: 0 0 var(--space-xs);
  font-size: var(--service-title-size);
  color: var(--service-ink);
  text-wrap: balance;
}
.service__text {
  max-width: var(--service-text-measure);
  margin: 0;
  color: var(--service-ink-soft);
  text-wrap: pretty;
}
/* Невидимая ссылка поверх всей карточки. */
.service__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
/* Кольцо фокуса — внутри карточки, раз кликабельна вся карточка. */
.service__link:focus-visible { outline: none; }
.service:has(.service__link:focus-visible) {
  outline: 2px solid var(--service-ink);
  outline-offset: -6px;
}
/* Наклон включается только под мышью: на телефоне курсора нет, а при
   «уменьшить движение» карточка остаётся ровной. */
@media (hover: hover) and (pointer: fine) {
  .service {
    will-change: transform;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
  }
  /* Пластина только поворачивается вслед за курсором — с места не сходит:
     подпрыгивающая под мышью карточка раздражает сильнее, чем помогает. */
  .service:hover {
    transform: rotateY(calc(var(--px, 0) * var(--service-tilt)))
               rotateX(calc(var(--py, 0) * var(--service-tilt) * -1));
    box-shadow: var(--service-shadow-hover);
  }
  /* Кадр идёт за наклоном с отставанием: границы карточки при этом остаются
     на месте, и разный ход кадра и неподвижной рамки читается как глубина
     под стеклом. Масштаб одинаковый в покое и под курсором — это запас под
     сдвиг, а не приближение (см. --service-photo-slack). */
  .service__photo {
    transform: scale(var(--service-photo-slack));
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .service:hover .service__photo {
    transform: translate3d(calc(var(--px, 0) * var(--service-photo-shift) * -1), calc(var(--py, 0) * var(--service-photo-shift) * -1), 0) scale(var(--service-photo-slack));
  }
}
@media (prefers-reduced-motion: reduce) {
  .service,
  .service__photo { transition: none; }
  .service:hover,
  .service:hover .service__photo { transform: none; }
}
/* Планшет и телефон: текст занимает почти всю ширину карточки, поэтому
   затемнение идёт снизу по всей ширине, а не только из угла. */
@media (max-width: 64rem) {
  .service__veil { background: var(--service-shade-stacked); }
  .service__content { max-width: none; }
}
/* Телефон: карточки друг под другом, у каждой свои строки. */
@media (max-width: 48rem) {
  .services__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--services-gap-stacked);
    min-height: 0;
  }
  .service {
    grid-row: auto;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: var(--services-card-min-h-stacked);
  }
  /* Карточка почти квадратная, а кадр горизонтальный: фото выше карточки
     и поднято вверх, так ногти уходят в правый верхний угол, а левый нижний
     остаётся под текст. */
  .service__photo {
    inset: auto 0 0;
    height: var(--service-photo-h-stacked);
    object-position: var(--service-photo-pos-stacked);
  }
  .service__content {
    grid-row: 2;
    grid-template-rows: auto auto;
    max-width: none;
  }
}

/* ---------- component: slider controls (работы, отзывы) ----------
   Прокрутку ведёт браузер (scroll-snap), стрелки и точки — main.js. */
.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-l);
  margin-top: var(--space-xl);
}
.slider-controls[hidden] { display: none; }
.slider-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--slider-arrow);
  height: var(--slider-arrow);
  border-radius: var(--radius-pill);
  border: 1px solid var(--slider-arrow-border);
  background: color-mix(in srgb, var(--wp--preset--color--shell) 60%, transparent);
  color: var(--color-heading);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
/* Наведение: круг наливается розовой дымкой, рамка и стрелка темнеют. */
@media (hover: hover) {
  .slider-arrow:hover {
    border-color: var(--color-primary);
    background: var(--btn-outline-fill-hover);
    color: var(--color-primary-deep);
  }
}
.slider-arrow:active { background: var(--color-surface); }
.slider-arrow:disabled { opacity: 0.35; pointer-events: none; }
.slider-arrow--prev .icon { transform: rotate(180deg); }
/* Индикатор — одна тонкая полоса, по ней едет отрезок длиной в видимую
   долю ленты (--share) в своём положении (--pos); обе переменные ставит
   main.js при прокрутке. Сколько бы ни было работ, полоса одна. Кнопка выше
   линии, чтобы по ней было легко попасть. */
.slider-dots {
  position: relative;
  flex: 1 1 auto;
  max-width: 12rem;
  height: 1.75rem;
  cursor: pointer;
}
.slider-dots::before {
  content: '';
  position: absolute;
  inset: calc(50% - 1px) 0;
  border-radius: var(--radius-pill);
  background: var(--slider-dot);
}
.slider-progress__bar {
  position: absolute;
  top: calc(50% - 1.5px);
  left: 0;
  width: calc(var(--share, 1) * 100%);
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--slider-dot-active);
  transform: translateX(calc((1 / var(--share, 1) - 1) * var(--pos, 0) * 100%));
}

/* Листание стрелкой или полосой: новые кадры коротко оседают, как фото
   первого экрана; текст нового отзыва проявляется. Класс is-arriving
   ставит main.js (markArriving) только на кадры, которые приехали. */
.works__slide.is-arriving .works__photo {
  animation: slide-settle 600ms var(--ease-out);
}
.review.is-arriving > .review__figure {
  animation: slide-fade 400ms var(--ease-out);
}
@keyframes slide-settle {
  from { scale: 1.03; }
}
@keyframes slide-fade {
  from { opacity: 0.4; }
}

@media (max-width: 48rem) {
  .slider-controls { gap: var(--space-m); }
}

/* ---------- pattern: works ----------
   Ровно три кадра на десктопе, два и край третьего на планшете, один с краем
   следующего на телефоне. На планшете и телефоне трек уходит вправо до края окна (--bleed): поле
   справа становится краем следующего кадра. Ширина слайда считается от
   контентной ширины: процент во flex-basis берётся от содержимого трека, а
   его правый паддинг равен тому же --bleed. */
.works {
  container-type: inline-size;
  --bleed: calc((100cqw - min(100cqw, var(--container-max))) / 2 + var(--container-pad));
  overflow-x: clip;
  background: var(--color-surface);
}
/* Селектор из двух классов: базовое `ul[class] { padding: 0 }` сильнее
   одного класса и съело бы правый паддинг. */
.works .works__track {
  display: flex;
  gap: var(--works-gap);
  margin-inline-end: calc(-1 * var(--bleed));
  padding-inline-end: var(--bleed);
  /* Запас по вертикали — чтобы кольцо фокуса у кадра не срезалось. */
  padding-block: 0.375rem;
  margin-block: -0.375rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.works__track::-webkit-scrollbar { display: none; }
.works__track:focus-visible { outline-offset: -2px; }
.works__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.works__slide {
  flex: 0 0 calc((100% - 2 * var(--works-gap)) / 3);
  scroll-snap-align: start;
}
/* clip-path, а не только overflow: приближенный кадр уходит в свой слой, и
   скругление без него на мгновение пропадает. */
.works__open {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--works-ratio);
  overflow: hidden;
  clip-path: inset(0 round var(--radius-photo));
  border-radius: var(--radius-photo);
  background: var(--color-pearl);
  cursor: zoom-in;
}
/* Наведение: поверх кадра проступает розовая дымка, в центре — кружок с
   лупой: кадр откроется крупно. */
.works__open::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--works-veil);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.works__zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--works-zoom-size);
  height: var(--works-zoom-size);
  margin: calc(var(--works-zoom-size) / -2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--wp--preset--color--shell) 88%, transparent);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--color-dark) 45%, transparent);
  color: var(--color-primary-deep);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.works__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
/* Класс ставит main.js только кадру, который ещё грузится: без JS фото
   видно сразу. Под ним — жемчужный фон .works__open. */
.works__photo.is-pending { opacity: 0; }
/* Только настоящий курсор: на телефоне касание «залипает» в :hover, и лупа
   с дымкой висели бы на кадре под пальцем. */
@media (hover: hover) and (pointer: fine) {
  .works__open:hover .works__photo { transform: scale(1.03); }
  .works__open:hover::before,
  .works__open:focus-visible::before { opacity: 1; }
  .works__open:hover .works__zoom,
  .works__open:focus-visible .works__zoom {
    opacity: 1;
    transform: scale(1);
  }
}
/* Телефон и планшет (сенсор или узкий экран): слайдер на странице пальцем
   не листается. Касание кадра только открывает его на весь экран — там уже
   листают свайпом. На странице листают стрелки и точки. Раньше свайп,
   начатый на фото, то листал трек, то открывал кадр, и слайдер дёргался.
   Маленькая лупа в углу видна всегда: наведения нет, подсказка нужна сразу.
   Нажатие не сжимает кадр, а даёт короткую дымку — масштаб под пальцем
   тоже давал дёрганье. */
@media (hover: none), (pointer: coarse), (max-width: 48rem) {
  .works .works__open:active .works__photo { transform: none; }  /* сильнее общего :active ниже */
  .works__open:active::before {
    opacity: 1;
    transition-duration: var(--dur-fast);
  }
  .works .works__track {
    overflow-x: hidden;
    touch-action: pan-y;
  }
  .works__zoom {
    top: auto;
    left: auto;
    right: var(--space-s);
    bottom: var(--space-s);
    width: var(--works-zoom-size-touch);
    height: var(--works-zoom-size-touch);
    margin: 0;
    opacity: 1;
    transform: none;
  }
  .works__zoom .icon {
    width: 1rem;
    height: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .works__photo,
  .works__zoom { transition: none; }
}
.works__open:active .works__photo {
  transform: scale(0.985);
  transition-duration: var(--dur-fast);
}
.works__more {
  text-align: center;
  margin-top: var(--space-xl);
}

/* На десктопе ровно три кадра без края четвёртого: трек не уходит за
   контейнер. Край следующего кадра — только на планшете и телефоне. */
@media (min-width: 64.0625rem) {
  .works .works__track {
    margin-inline-end: 0;
    padding-inline-end: 0;
  }
}
@media (max-width: 64rem) {
  .works__slide { flex-basis: calc((100% - var(--works-gap)) / 2); }
}
@media (max-width: 48rem) {
  .works__slide { flex-basis: 86%; }
}

/* ---------- pattern: reviews ----------
   Колонки без рамок, между ними волоски во всю высоту ряда (flex тянет
   колонки по самой высокой). Текст обрезан по --review-lines, подпись автора
   идёт сразу под текстом. Самый левый волосок
   срезан clip-path на 1px, чтобы разделители были только между колонками. */
/* Пион — тот же декор, что раньше стоял справа в услугах: прижат к правому
   краю секции и растворяется влево. Контент лежит над ним. На телефоне пион
   скрыт — колонке и так тесно. */
.reviews {
  position: relative;
  overflow-x: clip;
  background: var(--color-bg);
}
.reviews__peony {
  position: absolute;
  top: 50%;
  right: 0;
  height: 100%;
  width: var(--reviews-peony-w);
  object-fit: contain;
  object-position: right center;
  /* Частично за правым краем: к тексту отзывов подходят только крайние
     лепестки. */
  transform: translate(var(--reviews-peony-offset), -50%);
  opacity: var(--reviews-peony-opacity);
  pointer-events: none;
  /* Растворяется влево и к верху и низу: у снимка свой светлый фон, и без
     этого видны края прямоугольника. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 8%, #000 30%, #000 70%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 8%, #000 30%, #000 70%, transparent 92%);
  mask-composite: intersect;
}
.reviews > .container {
  position: relative;
  z-index: 1;
}
@media (max-width: 48rem) {
  .reviews__peony { display: none; }
}
.reviews__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  clip-path: inset(0 0 0 1px);
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline-offset: -3px; }
.review {
  position: relative;
  flex: 0 0 calc(100% / 3);
  scroll-snap-align: start;
  display: flex;
  padding: var(--space-2xs) var(--space-l);
}
/* Разделитель короче колонки и растворяется к концам. */
.review::before {
  content: '';
  position: absolute;
  inset-block: 12%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--review-divider) 25%, var(--review-divider) 75%, transparent);
}
.review__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0;
}
.review__mark {
  display: block;
  height: 1.75rem;
  margin-bottom: var(--space-xs);
  font-family: var(--review-mark-font);
  font-size: 3rem;
  line-height: 0.95;
  color: var(--review-mark);
}
.review__quote { margin: 0; }
.review__quote p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--review-lines);
  line-clamp: var(--review-lines);
  overflow: hidden;
  font-family: var(--review-quote-font);
  font-size: var(--review-quote-size);
  line-height: 1.6;
  color: var(--color-heading);
  text-wrap: pretty;
}
.review.is-expanded .review__quote p {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
}
/* Подчёркивание — две линии фоном: бледная всегда, насыщенная прорастает
   по ней слева направо при наведении. */
.review__more {
  min-height: 2.75rem;
  margin-top: var(--space-2xs);
  font-size: var(--wp--preset--font-size--s);
  font-weight: var(--text-weight-emphasis);
  color: var(--color-primary-deep);
  text-decoration: none;
  background:
    linear-gradient(currentColor, currentColor) no-repeat left calc(50% + 0.85em) / 0% 1px,
    linear-gradient(color-mix(in srgb, var(--color-primary) 40%, transparent), color-mix(in srgb, var(--color-primary) 40%, transparent)) no-repeat left calc(50% + 0.85em) / 100% 1px;
  transition: background-size var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .review__more:hover {
    background-size: 100% 1px, 100% 1px;
  }
}
.review__more:focus-visible { background-size: 100% 1px, 100% 1px; }
.review__more[hidden] { display: none; }
/* Подпись автора идёт сразу за текстом отзыва: у короткого отзыва она не
   уезжает вниз колонки. */
.review__footer {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
.review__avatar {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}
.review__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary-soft) 28%, var(--color-surface));
  color: var(--color-primary-deep);
  font-family: var(--review-name-font);
  font-size: var(--wp--preset--font-size--l);
}
.review__author {
  display: grid;
  gap: 0;
}
.review__name {
  font-family: var(--review-name-font);
  font-style: normal;
  font-size: var(--wp--preset--font-size--l);
  line-height: 1.2;
  color: var(--color-heading);
}
.review__service {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--text-weight-emphasis);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

@media (max-width: 64rem) {
  .review { flex-basis: 50%; }
}
/* Телефон: ровно один отзыв на экран, без края следующего — листают
   стрелки, точки или свайп. */
@media (max-width: 48rem) {
  .review {
    flex-basis: 100%;
    padding-inline: var(--space-2xs);
  }
  /* Отзыв на экране один — разделителям нечего разделять. */
  .review::before { display: none; }
  /* Высоту дорожки задаёт самый длинный отзыв. Короткий иначе прижимался к
     верху, и под ним оставалась пустая треть экрана — центрируем содержимое
     колонки по вертикали, тогда все отзывы стоят одинаково. */
  .review__figure { justify-content: center; }
}

/* ---------- pattern: quality («Обо мне») ----------
   Две колонки, портрет слева, весь текст справа:

     ┌──────────┐   ✦ ОБО МНЕ
     │          │   Меня зовут Юлия
     │ портрет  │   абзац о мастере
     │          │   ─────────────────────────────
     │          │   Проверенные материалы
     └──────────┘   подпись пункта
                    ─────────────────────────────
                    Маникюр, который подходит именно вам

   Пункты — заголовок и подпись, без номеров; между пунктами тонкие
   горизонтальные волоски. Шапка выровнена по левому краю колонки, поэтому
   орнамента-разделителя под ней нет. */
.quality { background: var(--color-surface); }
/* Ширину карточки задаёт токен, текст забирает остаток строки. */
.quality__grid {
  /* Своя система слоёв: без неё мазок с z-index -1 провалился бы под фон
     секции и пропал. */
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--quality-card-w) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 3vw, 3.5rem);
}

/* --- карточка с портретом --- */
.quality__figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: var(--quality-card-ratio);
  border-radius: var(--quality-card-radius);
  /* Заливка светлее фона секции у верхнего края и уходит в жемчужный к низу:
     ровный тон за вырезанной фигурой выглядел бы наклейкой. */
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--color-mist) 38%, var(--wp--preset--color--shell)) 0%,
    color-mix(in srgb, var(--color-pearl) 55%, var(--wp--preset--color--shell)) 100%
  );
  box-shadow: var(--shadow-card);
}
/* Снимок заполняет карточку целиком. Кадрируется по центру сверху: у портрета
   в запасе низ, а голова должна остаться в кадре при любой пропорции. */
.quality__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* --- текстовая колонка --- */
/* Шёлк уходит вправо за заголовок; clip не даёт ему вылезти за колонку и
   родить горизонтальную прокрутку, но, в отличие от hidden, не превращает
   колонку в контейнер прокрутки. */
.quality__content { overflow-x: clip; }
/* Шапка внутри колонки стоит плотнее, чем над секцией во всю ширину: там она
   отбивает целую полосу, здесь — свой же абзац. */
.quality .section-head {
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}
/* Абзац о мастере — рядовой текст страницы; своя здесь только мера строки. */
.quality__lead {
  max-width: var(--quality-measure);
  margin: 0;
  text-wrap: pretty;
}

/* --- пункты: заголовок + подпись, волоски между ними --- */
.quality__list { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.quality__item {
  padding-block: var(--quality-item-gap);
  border-top: 1px solid var(--quality-row-border);
}
.quality__item:last-child { border-bottom: 1px solid var(--quality-row-border); }
.quality__item-body {
  display: grid;
  gap: var(--quality-item-title-gap);
}
/* Заголовок пункта — та же роль, что h3 в услугах: серифом и по шкале
   заголовков. */
.quality__item-title {
  font-family: var(--heading-font);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--heading-weight);
  line-height: 1.25;
  color: var(--heading-ink);
  text-wrap: balance;
}
.quality__item-text {
  max-width: var(--quality-measure);
  color: var(--color-text-soft);
  text-wrap: pretty;
}

/* --- раскладка с рейлом («Обо мне» вкладками) ---

     ┌──────────┐ │ ОБО МНЕ
     │          │ │               Меня зовут
     │ портрет  │ │ МАТЕРИАЛЫ     Юлия
     │          │ │ ПОДХОД        абзац о мастере
     │          │ │ КОМФОРТ
     └──────────┘                                           ~шёлк~

   Рейл — волосок с метками, у выбранной красный отрезок. Панели лежат в одной
   ячейке, высоту держит самая длинная, поэтому при переключении ничего не
   прыгает. Вся секция — светлая карточка: портрет стоит вплотную к её левому
   краю, поэтому скруглены у него только левые углы (их даёт карточка).
   Шёлк — фон карточки в правом нижнем углу. */

.quality__grid--rail {
  grid-template-columns: var(--quality-rail-photo-w) var(--quality-rail-w) minmax(0, 1fr);
  gap: var(--quality-rail-gap);
  overflow: hidden;
  padding-right: var(--quality-card-pad);
  border-radius: var(--quality-card-radius);
  background:
    var(--quality-silk) right bottom / var(--quality-silk-size) no-repeat,
    var(--quality-card-bg);
  box-shadow: var(--shadow-card);
}
/* Портрет — часть карточки: своей тени и скругления у него нет, углы режет
   карточка. */
.quality__grid--rail .quality__figure {
  align-self: stretch;
  aspect-ratio: var(--quality-rail-photo-ratio);
  border-radius: 0;
  box-shadow: none;
}
/* До инициализации рейла нет — колонка текста занимает его место. */
.quality__body:not(.is-ready) .quality__rail { display: none; }
.quality__body:not(.is-ready) .quality__panels { grid-column: 2 / -1; }

.quality__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--quality-rail-step);
  align-self: center;
  padding-block: var(--space-xl);
  border-left: 1px solid var(--quality-row-border);
}
.quality__tab {
  position: relative;
  padding: var(--space-2xs) 0 var(--space-2xs) var(--quality-rail-pad);
  border: 0;
  background: none;
  font-family: var(--kicker-font);
  font-size: var(--kicker-size);
  font-weight: var(--kicker-weight);
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-text-soft);
  cursor: pointer;
  transition:
    color var(--dur-slow) var(--ease-out),
    text-indent var(--dur-slow) var(--ease-out);
}
/* Выбранная метка — акцентом: красная, жирнее и чуть отходит от волоска.
   Отступ даёт text-indent, а не сдвиг всей кнопки: иначе вместе с текстом
   уехал бы и её отрезок на волоске. */
.quality__tab.is-active {
  color: var(--color-primary);
  font-weight: var(--text-weight-strong);
  text-indent: var(--quality-tab-shift);
}
@media (hover: hover) {
  .quality__tab:not(.is-active):hover { color: var(--heading-ink); }
}
.quality__tab:focus-visible { outline-offset: 2px; }

/* Красный отрезок — у каждой метки свой, на волоске рейла. У выбранной он
   заполняется сверху вниз, у прежней гаснет быстрее, чем растёт новый, —
   между метками ничего не летает. */
.quality__tab::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: var(--quality-rail-line-w);
  background: var(--color-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.quality__tab.is-active::before {
  transform: scaleY(1);
  transition-duration: var(--dur-slow);
}

/* --- панели --- */
.quality__panels {
  display: grid;
  gap: var(--space-2xl);
  /* Рейл и текст — одна группа по центру карточки. Высоту ячейки держит
     самая длинная вкладка, текст в ней от верхнего края, поэтому при смене
     вкладки заголовок стоит на месте. */
  align-self: center;
  align-content: start;
  padding-block: var(--quality-card-pad);
}
.quality__panel {
  display: grid;
  align-content: start;
  max-width: 42rem;
}
.quality__body.is-ready .quality__panels { gap: 0; align-items: start; }
.quality__body.is-ready .quality__panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: scale(var(--quality-panel-zoom));
  transform-origin: left center;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-base);
}
.quality__body.is-ready .quality__panel.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease-out) 90ms,
    transform var(--dur-slow) var(--ease-out) 90ms,
    visibility 0s;
}

/* С GSAP переходы ведёт main.js: CSS только решает, какая панель видна.
   Уходящая панель остаётся видимой (is-leaving), пока доигрывает выход. */
.quality__body.is-gsap .quality__panel,
.quality__body.is-gsap .quality__panel.is-active {
  opacity: 1;
  transform: none;
  transition: none;
}
.quality__body.is-gsap .quality__panel.is-leaving { visibility: visible; }
.quality__title {
  margin: 0 0 var(--space-l);
  font-family: var(--heading-font);
  font-size: var(--wp--preset--font-size--xxl);
  font-weight: var(--heading-weight);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  color: var(--heading-ink);
  text-wrap: balance;
}
.quality__text {
  max-width: var(--quality-text-measure);
  margin: 0;
  font-size: var(--wp--preset--font-size--m);
  font-weight: var(--text-weight-body);
  color: var(--color-text-soft);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .quality__tab::before,
  .quality__body.is-ready .quality__panel { transition: opacity var(--dur-base) var(--ease-out); }
  .quality__body.is-ready .quality__panel { transform: none; }
}

/* Кружок под пиктограммой остался в теме ради карточек мастера; секция
   «Обо мне» его больше не использует. */
.icon-badge--s {
  --icon-badge-size: 3rem;
  border: 1px solid color-mix(in srgb, var(--color-accent-icon) 45%, transparent);
  background: color-mix(in srgb, var(--wp--preset--color--shell) 70%, transparent);
}

/* Ниже 62rem карточке и колонке текста вдвоём не хватает ширины. Дальше
   один столбец, портрет сверху. */
@media (max-width: 62rem) {
  .quality__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .quality__figure {
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
  }
}
/* Одна колонка: портрет, под ним рейл строкой меток (волосок снизу, красный
   отрезок ездит по горизонтали), дальше панель. */
@media (max-width: 62rem) {
  .quality__grid--rail {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
    /* Снизу запас под шёлк, чтобы он лёг под текстом. */
    padding: 0 0 calc(var(--quality-card-pad-mobile) + 18vw);
    background-size: var(--quality-silk-size-tablet), auto;
  }
  /* Портрет во всю ширину карточки, сверху; скругление дают её верхние углы. */
  .quality__grid--rail .quality__figure {
    max-width: none;
    margin: 0;
    aspect-ratio: var(--quality-photo-ratio-tablet);
  }
  /* Сверху отступ от табов: заголовок не должен прилипать к их волоскам. */
  .quality__grid--rail > .quality__panels { padding: var(--space-m) var(--quality-card-pad-mobile) 0; }
  .quality__body:not(.is-ready) .quality__panels { grid-column: auto; }
  .quality__rail {
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
    align-self: stretch;
    margin: 0 var(--quality-card-pad-mobile);
    padding-block: 0;
    border-left: 0;
    border-bottom: 1px solid var(--quality-row-border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  /* В строку на 360px влезают четыре метки только без сдвига и без
     утолщения выбранной: цвет и отрезок и так её выделяют. */
  .quality__tab.is-active { text-indent: 0; font-weight: var(--kicker-weight); }
  .quality__tab {
    padding: 0 0 var(--space-s);
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  /* Отрезок ложится на нижний волосок и заполняется слева направо. */
  .quality__tab::before {
    top: auto;
    right: 0;
    bottom: -1px;
    left: 0;
    width: auto;
    height: var(--quality-rail-line-w);
    transform: scaleX(0);
    transform-origin: left;
  }
  .quality__tab.is-active::before { transform: scaleX(1); }
  .quality__panel { max-width: none; }
  /* В одну колонку высоту карточки держит только открытая вкладка: остальные
     лежат поверх неё и места не занимают. Иначе короткий раздел стоял бы над
     пустотой под самую длинную вкладку. Смену высоты плавно ведёт main.js. */
  .quality__body.is-ready .quality__panels { position: relative; }
  .quality__body.is-ready .quality__panel:not(.is-active) {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }
}

/* Телефон: между заголовком пункта и подписью зазор больше — в узкой
   колонке заголовок иначе прилипает к тексту. Отступы от линий не меняются.
   Размер заголовка тот же, что на ПК (xl, 23px) — как у заголовков услуг. */
@media (max-width: 48rem) {
  .quality__item-body { gap: var(--quality-item-title-gap-mobile); }
  /* «Меня зовут Юлия» — заголовок внутри колонки, на телефоне ему не хватало
     веса рядом с крупным портретом. */
  .quality .section-head h2,
  .quality__panel--intro .quality__title { font-size: var(--quality-title-size-mobile); }
  /* Заголовок вкладки — подзаголовок, не имя секции: мельче и всегда ростом
     в две строки, короткий он или длинный. Так текст под ним начинается на
     одной высоте, и короткое слово не висит в одиночестве посреди кегля,
     рассчитанного на длинную строку. */
  .quality__panel:not(.quality__panel--intro) .quality__title {
    font-size: var(--quality-panel-title-size-mobile);
    min-height: calc(var(--quality-panel-title-lines) * var(--heading-leading) * 1em);
  }
  .quality__grid--rail .quality__figure { aspect-ratio: var(--quality-photo-ratio-mobile); }
  /* Четыре метки строкой в карточке не помещаются уже на 375px. На телефоне
     они встают сеткой 2×2: видны все, у каждой зона нажатия 44px, у каждой
     свой волосок, отрезок заполняется у выбранной. */
  .quality__rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs) var(--space-l);
    border-bottom: 0;
    overflow: visible;
  }
  .quality__tab {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0;
    border-bottom: 1px solid var(--quality-row-border);
    letter-spacing: 0.08em;
  }
  .quality__grid--rail {
    /* Запас под шёлк меньше его высоты: верхний левый край отреза прозрачный
       и может заходить под последние строки. */
    padding-bottom: calc(var(--quality-card-pad-mobile) + 20vw);
    background-size: var(--quality-silk-size-mobile), auto;
  }
}

/* ---------- pattern: cta ---------- */
.cta { background: var(--color-bg); }
.cta__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  background: var(--cta-card-bg);
  border-radius: var(--cta-card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.cta__content {
  padding: clamp(var(--space-xl), 5vw, var(--space-band)) clamp(var(--space-l), 4vw, var(--space-band));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
}
.cta__kicker { color: var(--cta-card-soft); }
.cta__kicker .icon { color: var(--cta-card-soft); }
.cta__title {
  color: var(--cta-card-ink);
  font-size: var(--wp--preset--font-size--xxl);
  max-width: 15ch;
}
.cta__tagline { color: var(--cta-card-soft); }
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xl);
  margin-top: var(--space-xs);
}
.cta__link { color: var(--cta-card-ink); }
.cta__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

@media (max-width: 48rem) {
  .cta__card { grid-template-columns: 1fr; }
  .cta__photo {
    order: -1;
    max-height: 15rem;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  }
}

/* ---------- component: lightbox gallery ---------- */
.lightbox {
  border: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  overscroll-behavior: contain;
  overflow: hidden;
  background: transparent;
}
.lightbox::backdrop { background: var(--lightbox-bg); }
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overscroll-behavior: contain;
}
/* Кадры лежат в одном треке и сдвигаются целиком: соседний снимок уже
   отрисован рядом, поэтому при перелистывании ничего не подменяется и
   не мигает. Горизонталь ведём сами, вертикаль оставляем браузеру. */
.lightbox__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;
}
.lightbox__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform var(--dur-base) var(--ease-out);
}
.lightbox__track.is-dragging { transition: none; }
.lightbox__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Сбоку — место под стрелки, снизу — под счётчик. Остальное отдано снимку. */
  padding: var(--space-l) calc(var(--lightbox-control) + 2 * var(--space-l)) var(--space-2xl);
}
/* Снимок занимает весь слайд и вписывается в него целиком: раньше он
   ограничивался 60rem и 84vh и на десктопе открывался почти того же размера,
   что превью в сетке. Скругления и тени нет — у вписанного кадра они легли
   бы на пустые поля, а не на край фотографии. */
.lightbox__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lightbox-control);
  height: var(--lightbox-control);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--wp--preset--color--shell) 14%, transparent);
  color: var(--lightbox-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.lightbox__btn:hover { background: color-mix(in srgb, var(--wp--preset--color--shell) 30%, transparent); }
.lightbox__btn[disabled] { opacity: 0.3; pointer-events: none; }
.lightbox__close { top: var(--space-l); right: var(--space-l); }
.lightbox__prev { left: var(--space-l); }
.lightbox__prev .icon { transform: rotate(180deg); }
.lightbox__next { right: var(--space-l); }
.lightbox__count {
  position: absolute;
  bottom: var(--space-l);
  left: 50%;
  translate: -50% 0;
  color: var(--lightbox-ink);
  font-size: var(--wp--preset--font-size--s);
  letter-spacing: 0.1em;
}

@media (max-width: 48rem) {
  .lightbox__slide { padding: calc(var(--lightbox-control) + var(--space-l)) var(--space-xs) var(--space-2xl); }
  .lightbox__prev,
  .lightbox__next { display: none; }
}

/* ---------- pattern: footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-section) var(--space-xl);
}
.site-footer__inner { position: relative; }
.site-footer__main {
  display: grid;
  grid-template-columns: minmax(16rem, 1.3fr) repeat(3, minmax(11rem, 1fr));
  gap: clamp(var(--space-xl), 4vw, var(--space-band));
}
.site-footer__logo {
  display: inline-block;
  font-family: var(--font-script);
  font-size: clamp(2rem, 1.7rem + 1.4vw, 2.75rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--color-heading);
  text-decoration: none;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}
.site-footer__ornament { width: min(14rem, 100%); }
.site-footer__lead {
  color: var(--color-heading);
  font-size: var(--wp--preset--font-size--m);
  font-weight: var(--text-weight-emphasis);
  line-height: 1.35;
}
.site-footer__tagline {
  color: var(--color-text-soft);
  font-size: var(--wp--preset--font-size--s);
}
.site-footer__column { min-width: 0; }
.site-footer__title {
  margin: 0 0 var(--space-l);
  font-family: var(--font-body);
  font-size: var(--wp--preset--font-size--s);
  font-weight: var(--text-weight-strong);
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-primary);
}
.site-footer__contacts,
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__contacts li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-s);
}
.site-footer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-mist) 34%, var(--color-bg));
  color: var(--color-primary);
}
.site-footer__contacts strong,
.site-footer__contacts a,
.site-footer__hours strong {
  display: block;
  color: var(--color-heading);
  font-weight: var(--text-weight-emphasis);
  line-height: 1.45;
}
/* Ссылки подвала: при наведении розовеют, и под ними проявляется тонкое
   подчёркивание. */
.site-footer__contacts a,
.site-footer__links a,
.site-footer__developer {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: transparent;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-base) var(--ease-out);
}
.site-footer__contacts a:hover,
.site-footer__links a:hover,
.site-footer__developer:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary-soft);
}
.site-footer__contacts small,
.site-footer__hours small {
  display: block;
  margin-top: var(--space-2xs);
  color: var(--color-text-soft);
  font-size: var(--wp--preset--font-size--s);
  line-height: 1.45;
}
.site-footer__links { gap: var(--space-m); }
.site-footer__links a {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-s);
  color: var(--color-text);
  line-height: 1.45;
}
.site-footer__links--services .icon {
  margin-top: 0.28em;
  color: var(--color-primary);
}
.site-footer__hours { margin-top: var(--space-2xl); }
.site-footer__hours p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--space-s);
  margin: 0;
}
.site-footer__hours .icon {
  grid-row: span 2;
  margin-top: 0.2em;
  color: var(--color-primary);
}
.site-footer__legal {
  display: grid;
  grid-template-columns: 1fr minmax(16rem, 1.45fr) 1fr;
  gap: var(--space-xl);
  align-items: start;
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}
.site-footer__copy,
.site-footer__legal-text,
.site-footer__developer {
  margin: 0;
  color: var(--color-text-soft);
  font-size: var(--wp--preset--font-size--s);
  line-height: 1.6;
}
.site-footer__developer {
  justify-self: end;
  color: var(--color-heading);
  font-weight: var(--text-weight-emphasis);
}

@media (max-width: 64rem) {
  .site-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__legal { grid-template-columns: 1fr 1fr; }
  .site-footer__developer { justify-self: start; }
}

@media (max-width: 48rem) {
  .site-footer { padding-block: var(--space-2xl) var(--space-xl); }
  .site-footer__main,
  .site-footer__legal { grid-template-columns: 1fr; }
  .site-footer__column { padding-top: var(--space-xl); border-top: 1px solid var(--color-line); }
  .site-footer__hours { margin-top: var(--space-xl); }
}

/* ---------- Текстовые страницы (page.php): политика, оферта, инструкции ---------- */

/* Анимаций появления здесь нет намеренно: класс `reveal` с этих шаблонов снят.
   У него `opacity: 0`, а видимым его делает JS через IntersectionObserver —
   если наблюдатель не сработал, текст остаётся невидимым насовсем. На странице,
   которая по закону обязана читаться, это риск без всякой выгоды. */

/* Шапка `position: fixed` высотой --header-h, поэтому её высоту надо добавить
   к верхнему отступу: одного --space-section (56px на узком экране против 72px
   шапки) не хватало, и верхушка заголовка уходила под шапку. */
.content-page {
  padding-block: calc(var(--header-h) + var(--space-section)) var(--space-section);
}

/* Своя шкала вместо общего xxl: «конфиденциальности» — 18 знаков в одном слове,
   при 33px оно не влезало в строку 326px и обрезалось за краем экрана. Перенос
   и мягкая расстановка дефисов — страховка на случай слова ещё длиннее.
   На широких экранах потолок тот же, 50px, десктоп не изменился. */
.content-page .section-head h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.125rem);
  overflow-wrap: break-word;
  hyphens: auto;
}

.content-page__body {
  max-width: var(--content-measure);
  font-size: var(--content-size);
  line-height: var(--content-leading);
}

/* Ритм: базовый интервал между блоками, у заголовков — свой, чтобы они
   отделяли разделы, а не висели равномерно посреди текста. */
.content-page__body > * + * { margin-top: var(--space-m); }
.content-page__body > :first-child { margin-top: 0; }

.content-page__body h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-s);
  font-size: var(--content-heading-size);
}

.content-page__body h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
  font-size: var(--content-subheading-size);
}

.content-page__body ul,
.content-page__body ol { padding-inline-start: var(--space-l); }
.content-page__body li + li { margin-top: var(--space-2xs); }
.content-page__body li::marker { color: var(--content-marker); }

.content-page__body strong { font-weight: var(--text-weight-emphasis); }

/* Только ссылки в прозе. Кнопки исключены намеренно: правило весит (0,1,1),
   а `.btn-primary` — (0,1,0), поэтому без `:not(.btn)` оно перекрашивало текст
   кнопки в розовый поверх розовой заливки, и надпись пропадала. Появлялась она
   только на наведении, где `.btn-primary:hover` весит (0,2,0) и выигрывает.
   Подчёркивание кнопкам это правило навязывало по той же причине. */
.content-page__body a:not(.btn) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.content-page__body a:not(.btn):hover { text-decoration-thickness: 2px; }

/* Страница ошибки: та же оправа, что у текстовых страниц, но по центру.
   Текста здесь три строки, и мера в 46rem, выставленная по левому краю,
   висела бы в пустоте. */
.content-page--error .content-page__body {
  margin-inline: auto;
  text-align: center;
}

.content-page--error .content-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-m);
  margin-top: var(--space-xl);
}

@media (max-width: 48rem) {
  /* Обе кнопки одной ширины, как в герое. */
  .content-page--error .content-page__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-s);
  }
  .content-page--error .content-page__actions .btn { width: 100%; }
}

/* Source: wp-content/themes/nnnails-julia/assets/css/theme.css */
/*
 * WordPress-only integration styles.
 * Source design CSS files remain unchanged.
 */

.cta > .container {
	max-width: var(--container-max);
}

.cta__booking-form {
	display: block;
	margin-top: var(--space-xl);
	width: 100%;
}

@media (max-width: 48rem) {
	.cta > .container {
		max-width: var(--container-max);
	}
}

/* ---------- Форма записи: радиусы, цвета и тень из дизайн-системы темы ----------
   CSS плагина собирается в бандл после этого файла и сам не правится,
   поэтому селектор усилен (html .sv-appointments) — иначе плагин перебил бы
   значения ниже. Роли радиусов переназначаем
   здесь: сама форма — карточка (--radius-card, как «Обо мне» и CTA), плитки
   дней и слотов, поля, кнопки и плашки внутри — управляющие элементы
   (--btn-radius, как у кнопок сайта). --sv-radius-xs (8px) остаётся у
   кнопки, вложенной в поле: вложенный радиус меньше внешнего. */
html .sv-appointments {
  --sv-radius-lg: var(--radius-card);
  --sv-radius-md: var(--btn-radius);
  --sv-radius-sm: var(--btn-radius);
  /* Цвета и тень — те же роли, что у остальных секций: карточка тёплая, а
     не холодно-белая; акцент — фирменный красный, как у кнопок сайта;
     волоски — --color-line; тень — как у карточек «Обо мне» и CTA.
     Меняются только значения переменных, разметка и логика формы — нет. */
  --sv-color-shell: var(--wp--preset--color--shell);
  --sv-color-surface: var(--wp--preset--color--surface);
  --sv-color-panel: var(--color-card);
  --sv-color-panel-soft: var(--wp--preset--color--shell);
  --sv-color-canvas: var(--wp--preset--color--surface);
  --sv-color-rose-mist: var(--color-mist);
  --sv-color-rose-bloom: var(--color-primary);
  --sv-color-rose-deep: var(--color-primary-deep);
  --sv-color-lacquer: var(--wp--preset--color--lacquer);
  --sv-color-ink: var(--color-heading);
  --sv-color-muted: var(--color-text-soft);
  --sv-color-line: var(--color-line);
  --sv-color-disabled: color-mix(in srgb, var(--color-pearl) 70%, var(--color-card));
  --sv-btn-bg: var(--btn-primary-fill);
  --sv-btn-bg-hover: var(--btn-primary-fill-hover);
  --sv-shadow: var(--shadow-card);
}
@media (max-width: 760px) {
  html .sv-appointments { border-radius: var(--radius-card); }
}

/* Source: wp-content/plugins/sv-appointments/assets/css/frontend.css */
.sv-appointments {
	--sv-color-shell: oklch(98% 0 0);
	--sv-color-surface: oklch(96% 0 0);
	--sv-color-panel: oklch(100% 0 0);
	--sv-color-panel-soft: oklch(98% 0 0);
	--sv-color-rose-mist: oklch(89% 0.055 350);
	--sv-color-rose-bloom: oklch(73% 0.145 354);
	--sv-color-rose-deep: oklch(61% 0.165 354);
	--sv-color-lacquer: oklch(18% 0.014 345);
	--sv-color-ink: oklch(24% 0.012 340);
	--sv-color-muted: oklch(55% 0.018 340);
	--sv-color-soft: oklch(68% 0.014 340);
	--sv-color-silver: oklch(76% 0.016 255);
	--sv-color-line: oklch(88% 0 0);
	--sv-color-line-strong: oklch(78% 0.05 350);
	--sv-color-disabled: oklch(92% 0 0);
	--sv-color-danger: oklch(58% 0.19 25);
	--sv-color-success: oklch(56% 0.13 155);
	--sv-space-1: 4px;
	--sv-space-2: 8px;
	--sv-space-3: 12px;
	--sv-space-4: 16px;
	--sv-space-5: 20px;
	--sv-space-6: 24px;
	--sv-space-7: 32px;
	--sv-space-8: 40px;
	--sv-radius-xs: 8px;
	--sv-radius-sm: 8px;
	--sv-radius-md: 10px;
	--sv-radius-lg: 22px;
	--sv-control-height: 44px;
	--sv-service-height: 84px;
	--sv-work-height: 558px;
	--sv-text-caption: 0.8125rem;
	--sv-text-small: 0.875rem;
	--sv-text-body: 0.9375rem;
	--sv-text-ui: 1rem;
	--sv-text-title: 1.5rem;
	--sv-rose-btn-soft: #d78e99;
	--sv-rose-btn-deep: #aa4050;
	/* Кнопки: та же плоская фирменная роза, что на странице /my-booking/. */
	--sv-btn-bg: #be3142;
	--sv-btn-bg-hover: #a52638;
	/* Подложка экрана успеха. Ровно между белыми карточками (#fff) и фоном
	   страницы (--wp--preset--color--shell, #fbf7f6): тёплая, а не серая,
	   и отделяет карточки, не превращаясь в отдельную розовую полосу. */
	--sv-color-canvas: #f8f1f0;
	--sv-weight-regular: 400;
	--sv-weight-medium: 500;
	--sv-weight-semibold: 600;
	--sv-weight-title: 650;
	--sv-shadow: 0 28px 90px oklch(42% 0.045 350 / 0.12);
	background: var(--sv-color-panel);
	border: 0;
	border-radius: var(--sv-radius-lg);
	box-shadow: var(--sv-shadow);
	color: var(--sv-color-ink);
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	margin: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.sv-appointments *,
.sv-appointments *::before,
.sv-appointments *::after {
	box-sizing: border-box;
}

.sv-appointments button,
.sv-appointments input,
.sv-appointments textarea {
	font: inherit;
}

.sv-appointments button {
	-webkit-tap-highlight-color: transparent;
}

.sv-appointments [hidden] {
	display: none !important;
}

.sv-appointments__shell,
.sv-appointments__success {
	margin: 0 auto;
	position: relative;
	/* Запас под липкую шапку темы при доводке скролла после отправки. */
	scroll-margin-top: 5rem;
}

.sv-appointments__shell {
	max-width: 1700px;
	padding: 0;
}

/* Подложку экрана успеха не ограничиваем: она должна доходить до краёв
   виджета, иначе по бокам остаются белые поля. Ширину держат карточки. */
.sv-appointments__success {
	max-width: none;
}

.sv-appointments__top {
	align-items: center;
	border-bottom: 1px solid var(--sv-color-line);
	display: flex;
	gap: var(--sv-space-5);
	justify-content: space-between;
	min-height: 72px;
	padding: 0 var(--sv-space-7);
}

.sv-appointments__brand {
	align-items: center;
	display: flex;
	gap: var(--sv-space-5);
	min-width: 0;
}

.sv-appointments__brand strong {
	color: var(--sv-color-lacquer);
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 21px;
	font-weight: var(--sv-weight-regular);
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
}

.sv-appointments__brand > span {
	background: var(--sv-color-line-strong);
	display: block;
	height: 28px;
	width: 1px;
}

.sv-appointments__brand small,
.sv-appointments__secure {
	color: var(--sv-color-muted);
	font-size: var(--sv-text-body);
	font-weight: var(--sv-weight-regular);
	line-height: 1.2;
}

.sv-appointments__secure {
	align-items: center;
	background: color-mix(in srgb, var(--sv-color-panel) 78%, transparent);
	border: 1px solid var(--sv-color-line);
	border-radius: var(--sv-radius-sm);
	display: inline-flex;
	gap: var(--sv-space-2);
	min-height: 40px;
	padding: 0 var(--sv-space-4);
	white-space: nowrap;
}

.sv-appointments__secure span {
	color: var(--sv-color-rose-deep);
	font-weight: var(--sv-weight-semibold);
}

.sv-appointments__status,
.sv-appointments__message {
	border-radius: var(--sv-radius-sm);
	font-size: 14px;
	margin: var(--sv-space-4) var(--sv-space-7) 0;
	padding: var(--sv-space-3) var(--sv-space-4);
}

.sv-appointments__status--warning {
	background: oklch(94% 0.045 82);
	border: 1px solid oklch(83% 0.08 82);
	color: oklch(40% 0.08 75);
}

.sv-appointments__message--error {
	background: color-mix(in srgb, var(--sv-color-danger) 10%, var(--sv-color-panel));
	border: 1px solid color-mix(in srgb, var(--sv-color-danger) 42%, var(--sv-color-line));
	color: var(--sv-color-danger);
}

.sv-appointments__message--success {
	background: color-mix(in srgb, var(--sv-color-success) 10%, var(--sv-color-panel));
	border: 1px solid color-mix(in srgb, var(--sv-color-success) 38%, var(--sv-color-line));
	color: var(--sv-color-success);
}

.sv-appointments__steps {
	align-items: stretch;
	display: flex;
	gap: var(--sv-space-2);
	padding: var(--sv-space-7) var(--sv-space-7) var(--sv-space-6);
}

.sv-appointments__step {
	align-items: center;
	background: var(--sv-color-panel);
	border: 1px solid color-mix(in srgb, var(--sv-color-line) 85%, transparent);
	border-radius: var(--sv-radius-md);
	color: var(--sv-color-muted);
	cursor: pointer;
	display: flex;
	flex: 1 1 0;
	gap: var(--sv-space-3);
	justify-content: flex-start;
	min-height: 64px;
	min-width: 0;
	padding: var(--sv-space-3) var(--sv-space-5);
	position: relative;
	text-align: left;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.sv-appointments__step:hover {
	border-color: color-mix(in srgb, var(--sv-color-rose-bloom) 30%, var(--sv-color-line));
}

.sv-appointments__step:disabled {
	cursor: default;
	opacity: 1;
}

.sv-appointments__step:disabled:hover {
	border-color: color-mix(in srgb, var(--sv-color-line) 85%, transparent);
}

.sv-appointments__step-arrow {
	align-items: center;
	align-self: center;
	color: var(--sv-color-soft);
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	padding: 0 var(--sv-space-1);
}

.sv-appointments__step-ico {
	align-items: center;
	background: color-mix(in srgb, var(--sv-color-rose-mist) 45%, var(--sv-color-panel));
	border-radius: 999px;
	color: var(--sv-color-rose-deep);
	display: inline-flex;
	flex: 0 0 38px;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.sv-appointments__step-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.sv-appointments__step-text strong {
	color: var(--sv-color-lacquer);
	font-size: var(--sv-text-body);
	font-weight: var(--sv-weight-semibold);
	line-height: 1.15;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sv-appointments__step-text strong b {
	font-weight: var(--sv-weight-semibold);
	margin-right: 2px;
}

.sv-appointments__step-text small {
	color: var(--sv-color-muted);
	font-size: var(--sv-text-caption);
	font-weight: var(--sv-weight-regular);
	line-height: 1.15;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sv-appointments__step.is-active {
	background: color-mix(in srgb, var(--sv-color-rose-mist) 16%, var(--sv-color-panel));
	border-color: color-mix(in srgb, var(--sv-color-rose-bloom) 55%, var(--sv-color-line));
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--sv-color-rose-bloom) 30%, transparent);
}

.sv-appointments__step.is-active .sv-appointments__step-ico {
	background: var(--sv-color-rose-bloom);
	color: var(--sv-color-panel);
}

.sv-appointments__step.is-complete .sv-appointments__step-ico {
	background: color-mix(in srgb, var(--sv-color-rose-bloom) 80%, var(--sv-color-panel));
	color: var(--sv-color-panel);
}

.sv-appointments__work {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
	min-height: var(--sv-work-height);
}

.sv-appointments[data-current-step="1"] .sv-appointments__work {
	grid-template-columns: 1fr;
}

.sv-appointments[data-current-step="1"] .sv-appointments__summary {
	display: none;
}

.sv-appointments__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: var(--sv-work-height);
	padding: var(--sv-space-7) var(--sv-space-7) var(--sv-space-6);
}

/* Высоту рабочей зоны держит инлайновый min-height, который JS
   замеряет по самому высокому шагу (услуги) — шаги не прыгают. */
.sv-appointments__screen {
	display: none;
}

.sv-appointments__screen.is-active {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.sv-appointments__screen-head {
	margin: 0 0 var(--sv-space-6);
}

.sv-appointments__screen-head--row {
	align-items: flex-start;
	display: flex;
	gap: var(--sv-space-5);
	justify-content: space-between;
}

.sv-appointments__head-link {
	align-items: center;
	color: var(--sv-color-muted);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--sv-text-small);
	gap: var(--sv-space-2);
	margin-top: var(--sv-space-2);
	text-decoration: none;
	white-space: nowrap;
}

.sv-appointments__head-link u {
	color: var(--sv-color-rose-deep);
	text-decoration-color: color-mix(in srgb, var(--sv-color-rose-deep) 40%, transparent);
	text-underline-offset: 3px;
}

.sv-appointments__head-link:hover u {
	text-decoration-color: var(--sv-color-rose-deep);
}

.sv-appointments__head-link svg {
	color: var(--sv-color-rose-deep);
}

.sv-appointments__head-link-ico {
	align-items: center;
	color: var(--sv-color-rose-deep);
	display: inline-flex;
}

.sv-appointments__screen-head h2 {
	color: var(--sv-color-lacquer);
	font-family: "Prata", Georgia, "Times New Roman", serif;
	font-size: var(--sv-text-title);
	font-weight: var(--sv-weight-regular);
	letter-spacing: 0;
	line-height: 1.08;
	margin: 0;
}

.sv-appointments__screen-head p {
	color: var(--sv-color-muted);
	font-size: var(--sv-text-body);
	line-height: 1.45;
	margin: var(--sv-space-1) 0 0;
}

.sv-appointments__services {
	display: grid;
	gap: var(--sv-space-4) var(--sv-space-6);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sv-appointments__services-help {
	margin: 0.65rem 0 0;
	color: var(--sv-muted);
	font-size: 0.82rem;
	line-height: 1.45;
}

.sv-appointments__service {
	align-items: center;
	background: color-mix(in srgb, var(--sv-color-panel) 90%, var(--sv-color-surface));
	border: 1px solid color-mix(in srgb, var(--sv-color-line) 78%, transparent);
	border-radius: var(--sv-radius-md);
	color: var(--sv-color-ink);
	cursor: pointer;
	display: grid;
	gap: var(--sv-space-4);
	grid-template-columns: 44px minmax(0, 1fr) auto 28px;
	min-height: var(--sv-service-height);
	padding: var(--sv-space-4) var(--sv-space-6);
	text-align: left;
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
	width: 100%;
}

.sv-appointments__service-ico {
	align-items: center;
	background: color-mix(in srgb, var(--sv-color-rose-mist) 38%, var(--sv-color-panel));
	border-radius: 999px;
	color: var(--sv-color-rose-deep);
	display: inline-flex;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.sv-appointments__service:hover {
	background: var(--sv-color-panel);
	border-color: color-mix(in srgb, var(--sv-color-rose-bloom) 32%, var(--sv-color-line));
	box-shadow: 0 8px 24px oklch(55% 0.05 350 / 0.08);
}

.sv-appointments__service.is-selected {
	background: color-mix(in srgb, var(--sv-color-rose-mist) 22%, var(--sv-color-panel));
	border-color: var(--sv-color-rose-bloom);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sv-color-rose-bloom) 36%, transparent);
}

.sv-appointments__service-text {
	display: grid;
	gap: var(--sv-space-1);
	min-width: 0;
}

.sv-appointments__service strong {
	color: var(--sv-color-lacquer);
	font-size: var(--sv-text-ui);
	font-weight: var(--sv-weight-medium);
	line-height: 1.2;
	/* break-word, а не anywhere: anywhere учитывается при расчёте минимальной
	   ширины, и браузер рвёт слово даже когда есть куда перенести по пробелу —
	   «Наращивани‑е 1–4 длина». Теперь перенос только между словами. */
	overflow-wrap: break-word;
}

.sv-appointments__service small {
	color: var(--sv-color-muted);
	font-size: var(--sv-text-small);
	font-weight: var(--sv-weight-regular);
	line-height: 1.15;
}

.sv-appointments__service em {
	color: var(--sv-color-lacquer);
	font-size: var(--sv-text-ui);
	font-style: normal;
	font-weight: var(--sv-weight-medium);
	white-space: nowrap;
}

.sv-appointments__service-check {
	align-items: center;
	background: var(--sv-color-panel);
	border: 1px solid color-mix(in srgb, var(--sv-color-soft) 70%, var(--sv-color-line));
	border-radius: 999px;
	color: transparent;
	display: inline-flex;
	font-size: var(--sv-text-small);
	font-weight: var(--sv-weight-semibold);
	height: 28px;
	justify-content: center;
	width: 28px;
}

.sv-appointments__service.is-selected .sv-appointments__service-check {
	background: var(--sv-color-rose-bloom);
	border-color: var(--sv-color-rose-bloom);
	color: var(--sv-color-panel);
}

.sv-appointments__calendar {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.sv-appointments__calendar-nav {
	align-items: center;
	display: grid;
	gap: var(--sv-space-4);
	grid-template-columns: 44px 1fr 44px;
	margin: 0 0 var(--sv-space-5);
}

.sv-appointments__month {
	color: var(--sv-color-lacquer);
	font-family: "Prata", Georgia, "Times New Roman", serif;
	font-size: 1.25rem;
	font-weight: var(--sv-weight-regular);
	text-align: center;
	text-transform: capitalize;
}

.sv-appointments__round-button {
	align-items: center;
	background: var(--sv-color-panel);
	border: 1px solid color-mix(in srgb, var(--sv-color-line) 85%, transparent);
	border-radius: 999px;
	color: var(--sv-color-lacquer);
	cursor: pointer;
	display: flex;
	font-size: 26px;
	height: 44px;
	justify-content: center;
	line-height: 1;
	transition: background 180ms ease, border-color 180ms ease;
	width: 44px;
}

.sv-appointments__round-button:hover {
	background: color-mix(in srgb, var(--sv-color-rose-mist) 18%, var(--sv-color-panel));
	border-color: color-mix(in srgb, var(--sv-color-rose-bloom) 30%, var(--sv-color-line));
}

.sv-appointments__weekdays,
.sv-appointments__calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.sv-appointments__weekdays {
	gap: var(--sv-space-3);
	margin-bottom: var(--sv-space-3);
}

.sv-appointments__weekday {
	color: var(--sv-color-muted);
	font-size: var(--sv-text-small);
	font-weight: var(--sv-weight-medium);
	text-align: center;
}

.sv-appointments__calendar-grid {
	gap: var(--sv-space-3);
}

.sv-appointments__day {
	align-items: center;
	background: color-mix(in srgb, var(--sv-color-panel) 90%, var(--sv-color-surface));
	border: 1px solid var(--sv-color-rose-mist);
	border-radius: var(--sv-radius-md);
	color: var(--sv-color-lacquer);
	cursor: pointer;
	display: flex;
	font-size: var(--sv-text-ui);
	font-weight: var(--sv-weight-regular);
	justify-content: center;
	min-height: 48px;
	width: 100%;
}

.sv-appointments__day:hover:not(:disabled) {
	background: var(--sv-color-panel);
	border-color: var(--sv-color-rose-bloom);
	color: var(--sv-color-lacquer);
}

.sv-appointments__day.is-selected {
	background: var(--sv-color-rose-bloom);
	border-color: var(--sv-color-rose-bloom);
	color: var(--sv-color-panel);
}

.sv-appointments__day.is-disabled,
.sv-appointments__day:disabled {
	background: var(--sv-color-disabled);
	border-color: transparent;
	color: var(--sv-color-soft);
	cursor: not-allowed;
	text-decoration: none;
}

.sv-appointments__day--blank {
	background: transparent;
	border-color: transparent;
	pointer-events: none;
}

.sv-appointments__slots {
	flex: 1;
}

.sv-appointments__slot-list {
	display: grid;
	gap: var(--sv-space-4) var(--sv-space-5);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sv-appointments__slot {
	align-items: center;
	background: color-mix(in srgb, var(--sv-color-panel) 90%, var(--sv-color-surface));
	border: 1px solid var(--sv-color-rose-mist);
	border-radius: var(--sv-radius-md);
	color: var(--sv-color-lacquer);
	cursor: pointer;
	display: grid;
	min-height: 56px;
	padding: 0 var(--sv-space-3);
	text-align: center;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.sv-appointments__slot:hover {
	background: var(--sv-color-panel);
	border-color: var(--sv-color-rose-bloom);
	transform: translateY(-1px);
}

.sv-appointments__slot.is-selected {
	background: var(--sv-color-rose-bloom);
	border-color: var(--sv-color-rose-bloom);
	color: var(--sv-color-panel);
}

.sv-appointments__slot span {
	font-size: var(--sv-text-ui);
	font-weight: var(--sv-weight-medium);
	line-height: 1;
}

.sv-appointments__slot small {
	display: none;
}

.sv-appointments__placeholder {
	align-items: center;
	background: color-mix(in srgb, var(--sv-color-rose-mist) 10%, var(--sv-color-panel));
	border: 1px dashed var(--sv-color-line-strong);
	border-radius: var(--sv-radius-md);
	color: var(--sv-color-muted);
	display: flex;
	font-size: var(--sv-text-body);
	justify-content: center;
	margin: 0;
	min-height: 180px;
	padding: var(--sv-space-6);
	text-align: center;
}

.sv-appointments__mobile-time {
	display: none;
}

.sv-appointments__legend {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-5);
	margin-top: auto;
	padding-top: var(--sv-space-5);
}

.sv-appointments__legend span {
	align-items: center;
	color: var(--sv-color-muted);
	display: inline-flex;
	font-size: var(--sv-text-small);
	font-weight: var(--sv-weight-regular);
	gap: var(--sv-space-2);
}

.sv-appointments__legend i {
	background: var(--sv-color-panel);
	border: 1px solid var(--sv-color-rose-mist);
	border-radius: 8px;
	display: inline-block;
	height: 24px;
	width: 24px;
}

.sv-appointments__legend i.is-disabled {
	background: var(--sv-color-disabled);
	border-color: transparent;
}

.sv-appointments__legend i.is-selected {
	background: var(--sv-color-rose-bloom);
	border-color: var(--sv-color-rose-bloom);
}

.sv-appointments__summary {
	border-left: 1px solid var(--sv-color-line);
	min-width: 0;
	padding: var(--sv-space-6) var(--sv-space-7);
}

.sv-appointments__summary h3 {
	color: var(--sv-color-lacquer);
	font-family: "Prata", Georgia, "Times New Roman", serif;
	font-size: var(--sv-text-title);
	font-weight: var(--sv-weight-regular);
	line-height: 1.15;
	margin: 0 0 var(--sv-space-5);
}

.sv-appointments__summary-row {
	align-items: center;
	border-bottom: 1px solid var(--sv-color-line);
	display: grid;
	gap: var(--sv-space-4);
	grid-template-columns: 34px minmax(100px, 0.7fr) minmax(0, 1fr);
	min-height: 54px;
}

.sv-appointments__summary-ico {
	align-items: center;
	background: color-mix(in srgb, var(--sv-color-rose-mist) 38%, var(--sv-color-panel));
	border-radius: 999px;
	color: var(--sv-color-rose-deep);
	display: inline-flex;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.sv-appointments__summary-row small {
	color: var(--sv-color-muted);
	font-size: var(--sv-text-body);
	font-weight: var(--sv-weight-regular);
}

.sv-appointments__summary-row strong {
	color: var(--sv-color-lacquer);
	font-size: var(--sv-text-body);
	font-weight: var(--sv-weight-medium);
	text-align: right;
}

.sv-appointments__summary-row [data-summary-price-row] {
	color: var(--sv-color-rose-deep);
}

.sv-appointments__summary-note {
	color: var(--sv-color-muted);
	font-size: var(--sv-text-body);
	line-height: 1.45;
	margin: var(--sv-space-5) 0 0;
}

.sv-appointments__form {
	display: grid;
	gap: var(--sv-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 980px;
}

.sv-appointments__field {
	display: grid;
	gap: var(--sv-space-2);
}

.sv-appointments__field--textarea,
.sv-appointments__field--social,
.sv-appointments__social,
.sv-appointments__consent,
.sv-appointments__message {
	grid-column: 1 / -1;
}

.sv-appointments__social {
	border: 0;
	margin: 0;
	padding: 0;
}

.sv-appointments__social legend {
	color: var(--sv-color-muted);
	font-size: var(--sv-text-small);
	font-weight: var(--sv-weight-medium);
	padding: 0;
}

.sv-appointments__social p {
	color: var(--sv-color-soft);
	font-size: 13px;
	margin: var(--sv-space-1) 0 var(--sv-space-3);
}

.sv-appointments__social-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-3);
}

.sv-appointments__social-options label {
	cursor: pointer;
	position: relative;
}

.sv-appointments__social-options input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sv-appointments__social-options span {
	align-items: center;
	background: var(--sv-color-panel);
	border: 1px solid var(--sv-color-line);
	border-radius: 999px;
	color: var(--sv-color-muted);
	display: inline-flex;
	font-size: 14px;
	font-weight: var(--sv-weight-medium);
	min-height: 40px;
	padding: 0 var(--sv-space-5);
}

.sv-appointments__social-options input:checked + span {
	background: color-mix(in srgb, var(--sv-color-rose-bloom) 12%, var(--sv-color-panel));
	border-color: var(--sv-color-rose-bloom);
	color: var(--sv-color-lacquer);
}

.sv-appointments__social-options input:focus-visible + span {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-color-rose-bloom) 22%, transparent);
}

.sv-appointments__field span {
	color: var(--sv-color-muted);
	font-size: var(--sv-text-small);
	font-weight: var(--sv-weight-medium);
}

.sv-appointments__field input,
.sv-appointments__field textarea {
	background: var(--sv-color-panel);
	border: 1px solid var(--sv-color-line);
	border-radius: var(--sv-radius-md);
	color: var(--sv-color-lacquer);
	min-height: 48px;
	padding: 0 var(--sv-space-4);
	transition: border-color 180ms ease, box-shadow 180ms ease;
	width: 100%;
}

.sv-appointments__field textarea {
	min-height: 92px;
	padding-bottom: var(--sv-space-3);
	padding-top: var(--sv-space-3);
	resize: vertical;
}

.sv-appointments__field input::placeholder,
.sv-appointments__field textarea::placeholder {
	color: var(--sv-color-soft);
}

.sv-appointments__field input:focus,
.sv-appointments__field textarea:focus,
.sv-appointments__service:focus-visible,
.sv-appointments__slot:focus-visible,
.sv-appointments__day:focus-visible,
.sv-appointments__step:focus-visible,
.sv-appointments__submit:focus-visible,
.sv-appointments__back:focus-visible,
.sv-appointments__round-button:focus-visible {
	border-color: var(--sv-color-rose-bloom);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-color-rose-bloom) 22%, transparent);
	outline: none;
}

.sv-appointments__consent {
	align-items: flex-start;
	color: var(--sv-color-muted);
	display: flex;
	font-size: 13px;
	gap: var(--sv-space-3);
	line-height: 1.45;
}

.sv-appointments__consent input {
	accent-color: var(--sv-color-rose-bloom);
	flex: 0 0 18px;
	height: 18px;
	margin-top: 1px;
	width: 18px;
}

.sv-appointments__actionbar {
	align-items: center;
	border-top: 1px solid var(--sv-color-line);
	display: grid;
	gap: var(--sv-space-5);
	grid-template-columns: minmax(0, 1fr) auto;
	min-height: 78px;
	padding: var(--sv-space-4) var(--sv-space-7);
}

.sv-appointments__action-summary {
	align-items: center;
	color: var(--sv-color-lacquer);
	display: flex;
	font-size: var(--sv-text-body);
	font-weight: var(--sv-weight-medium);
	gap: var(--sv-space-3);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sv-appointments__action-note {
	align-items: center;
	color: var(--sv-color-muted);
	display: inline-flex;
	font-weight: var(--sv-weight-regular);
	gap: var(--sv-space-3);
}

/* На первом шаге слева — заметка о времени, дальше — итог выбора */
.sv-appointments[data-current-step="1"] .sv-appointments__action-picked {
	display: none;
}

.sv-appointments:not([data-current-step="1"]) .sv-appointments__action-note {
	display: none;
}

.sv-appointments__action-icon {
	align-items: center;
	color: var(--sv-color-muted);
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
}

.sv-appointments__action-summary [data-action-summary] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sv-appointments__actions {
	display: flex;
	gap: var(--sv-space-4);
	justify-content: flex-end;
}

/* Кнопки повторяют страницу /my-booking/: спокойный радиус вместо таблетки,
   ровная заливка вместо градиента и подпись на ступень мельче основного
   текста. Прежний вариант был визуально тяжелее всего, что рядом. */
.sv-appointments__submit,
.sv-appointments__back {
	align-items: center;
	border-radius: var(--sv-radius-md);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--sv-text-small);
	font-weight: var(--sv-weight-semibold);
	gap: var(--sv-space-3);
	justify-content: center;
	min-height: 48px;
	min-width: 180px;
	padding: 0 var(--sv-space-6);
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.sv-appointments__submit {
	background: var(--sv-btn-bg);
	border: 0;
	color: #ffffff;
}

.sv-appointments__submit:hover {
	background: var(--sv-btn-bg-hover);
	color: #ffffff;
}

.sv-appointments__submit-arrow {
	flex: 0 0 auto;
}

.sv-appointments__submit:disabled {
	cursor: wait;
	opacity: 0.7;
	transform: none;
}

.sv-appointments__back {
	background: var(--sv-color-panel);
	border: 1px solid var(--sv-color-line);
	color: var(--sv-color-lacquer);
}

.sv-appointments__back:hover {
	border-color: var(--sv-btn-bg);
}

/* Подложка на тон темнее панели: белые карточки на белом фоне не читались
   как карточки, рамки приходилось делать тяжелее, чем хотелось. */
.sv-appointments__success {
	background: var(--sv-color-canvas);
	min-height: 520px;
	padding: var(--sv-space-8) var(--sv-space-7);
	text-align: center;
}

.sv-appointments__success-mark {
	align-items: center;
	background: linear-gradient(135deg, var(--sv-rose-btn-soft), var(--sv-rose-btn-deep));
	border-radius: 999px;
	box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--sv-rose-btn-deep) 60%, transparent);
	color: #fbf7f6;
	display: flex;
	font-size: 32px;
	font-weight: 700;
	height: 76px;
	justify-content: center;
	margin: 0 auto var(--sv-space-5);
	width: 76px;
}

.sv-appointments__success h2 {
	color: var(--sv-color-lacquer);
	font-family: "Prata", Georgia, "Times New Roman", serif;
	font-size: 1.75rem;
	font-weight: var(--sv-weight-regular);
	margin: 0 0 var(--sv-space-3);
}

.sv-appointments__success > p {
	color: var(--sv-color-muted);
	font-size: 16px;
	line-height: 1.55;
	margin: 0 auto var(--sv-space-6);
	max-width: 52ch;
}

.sv-appointments__success-card {
	background: var(--sv-color-panel);
	border: 0;
	border-radius: var(--sv-radius-md);
	margin: 0 auto var(--sv-space-4);
	max-width: 640px;
	padding: var(--sv-space-5);
	text-align: left;
}

.sv-appointments__success-card > strong {
	color: var(--sv-color-lacquer);
	display: block;
	font-size: var(--sv-text-ui);
	font-weight: var(--sv-weight-semibold);
	margin-bottom: var(--sv-space-4);
}

.sv-appointments__success-facts {
	display: grid;
	gap: var(--sv-space-4);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sv-appointments__fact-label {
	align-items: center;
	color: var(--sv-color-muted);
	display: flex;
	font-size: var(--sv-text-caption);
	gap: var(--sv-space-2);
	margin-bottom: var(--sv-space-1);
}

.sv-appointments__fact-label i {
	align-items: center;
	color: var(--sv-color-rose-bloom);
	display: flex;
	flex: none;
}

.sv-appointments__fact b {
	color: var(--sv-color-lacquer);
	display: block;
	font-size: var(--sv-text-small);
	font-weight: var(--sv-weight-semibold);
}

.sv-appointments__manage {
	background: var(--sv-color-panel);
	border: 0;
	border-radius: var(--sv-radius-md);
	margin: 0 auto var(--sv-space-5);
	max-width: 640px;
	padding: var(--sv-space-5);
	text-align: left;
}

.sv-appointments__manage > strong {
	color: var(--sv-color-lacquer);
	display: block;
	font-size: var(--sv-text-ui);
	font-weight: var(--sv-weight-semibold);
	margin-bottom: var(--sv-space-1);
}

.sv-appointments__manage > p {
	color: var(--sv-color-muted);
	font-size: var(--sv-text-small);
	line-height: 1.5;
	margin: 0 0 var(--sv-space-4);
}

/* Поле со ссылкой: кнопка-иконка лежит внутри рамки, поэтому рамку держит
   обёртка, а у самого input её нет. */
.sv-appointments__manage-field {
	align-items: center;
	background: var(--sv-color-panel-soft);
	border: 1px solid var(--sv-color-line);
	border-radius: var(--sv-radius-sm);
	display: flex;
	gap: var(--sv-space-2);
	padding-right: var(--sv-space-2);
}

.sv-appointments__manage-field input {
	background: none;
	border: 0;
	color: var(--sv-color-ink);
	flex: 1;
	font-size: var(--sv-text-small);
	min-height: var(--sv-control-height);
	min-width: 0;
	outline: none;
	padding: 0 var(--sv-space-4);
	text-overflow: ellipsis;
}

.sv-appointments__manage-field button {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--sv-radius-xs);
	color: var(--sv-color-muted);
	cursor: pointer;
	display: flex;
	flex: none;
	height: 36px;
	justify-content: center;
	padding: 0;
	width: 36px;
}

.sv-appointments__manage-field button:hover {
	background: var(--sv-color-surface);
	color: var(--sv-color-lacquer);
}

.sv-appointments__manage-actions {
	align-items: center;
	display: grid;
	gap: var(--sv-space-3);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin-top: var(--sv-space-4);
}

.sv-appointments__manage-actions .sv-appointments__submit {
	min-height: var(--sv-control-height);
	width: 100%;
}

/* Второе действие — текстовая кнопка, а не вторая заливка: две одинаковые
   кнопки рядом спорят за главное действие. */
.sv-appointments__linkbtn {
	background: none;
	border: 0;
	color: var(--sv-btn-bg);
	cursor: pointer;
	font-size: var(--sv-text-small);
	font-weight: var(--sv-weight-semibold);
	min-height: var(--sv-control-height);
	padding: 0 var(--sv-space-2);
}

.sv-appointments__linkbtn:hover {
	text-decoration: underline;
}

.sv-appointments__success-home {
	align-items: center;
	color: var(--sv-btn-bg);
	display: inline-flex;
	font-size: var(--sv-text-small);
	font-weight: var(--sv-weight-semibold);
	justify-content: center;
	min-height: var(--sv-control-height);
	text-decoration: none;
}

.sv-appointments__success-home:hover {
	text-decoration: underline;
}

.sv-appointments__honeypot {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

@media (max-width: 1100px) {
	.sv-appointments {
		--sv-work-height: auto;
	}

	.sv-appointments__top,
	.sv-appointments__steps,
	.sv-appointments__main,
	.sv-appointments__summary,
	.sv-appointments__actionbar {
		padding-left: var(--sv-space-5);
		padding-right: var(--sv-space-5);
	}

	.sv-appointments__steps {
		gap: var(--sv-space-2);
		overflow-x: auto;
	}

	.sv-appointments__step {
		flex: 0 0 auto;
		min-width: 170px;
	}

	.sv-appointments__work,
	.sv-appointments[data-current-step="1"] .sv-appointments__work {
		grid-template-columns: 1fr;
	}

	.sv-appointments__summary {
		border-left: 0;
		border-top: 1px solid var(--sv-color-line);
	}
}

@media (max-width: 900px) {
	.sv-appointments__services {
		grid-template-columns: 1fr;
	}

	/* Компактный индикатор шагов: иконки-кружки без подписей и стрелок,
	   равномерно на всю ширину — ничего не обрезается и не скроллится. */
	.sv-appointments__steps {
		gap: var(--sv-space-1);
		overflow-x: visible;
	}

	.sv-appointments__step {
		background: transparent;
		border-color: transparent;
		box-shadow: none;
		flex: 1 1 0;
		justify-content: center;
		min-height: 44px;
		min-width: 0;
		padding: var(--sv-space-2) 0;
	}

	.sv-appointments__step:hover {
		background: transparent;
		border-color: transparent;
	}

	.sv-appointments__step.is-active {
		background: transparent;
		box-shadow: none;
	}

	.sv-appointments__step-text,
	.sv-appointments__step-arrow {
		display: none;
	}

	.sv-appointments__step-ico {
		flex: 0 0 36px;
		height: 36px;
		width: 36px;
	}
}

@media (max-width: 760px) {
	.sv-appointments {
		border-radius: var(--sv-radius-md);
	}

	.sv-appointments__top {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--sv-space-3);
		padding-bottom: var(--sv-space-4);
		padding-top: var(--sv-space-4);
	}

	.sv-appointments__secure {
		white-space: normal;
	}

	.sv-appointments__steps {
		padding-bottom: var(--sv-space-4);
		padding-top: var(--sv-space-4);
	}

	.sv-appointments__step {
		min-width: 0;
	}

	.sv-appointments__step-text small {
		display: none;
	}

	.sv-appointments__screen-head--row {
		flex-direction: column;
		gap: var(--sv-space-3);
	}

	.sv-appointments__head-link {
		margin-top: 0;
		white-space: normal;
	}

	.sv-appointments__service {
		grid-template-columns: 38px minmax(0, 1fr) auto 26px;
		min-height: 72px;
		padding-left: var(--sv-space-4);
		padding-right: var(--sv-space-4);
	}

	.sv-appointments__service-ico {
		height: 38px;
		width: 38px;
	}

	.sv-appointments__services,
	.sv-appointments__slot-list,
	.sv-appointments__form,
	.sv-appointments__success-facts {
		grid-template-columns: 1fr;
	}

	.sv-appointments__service {
		min-height: 68px;
		padding-left: var(--sv-space-4);
		padding-right: var(--sv-space-4);
	}

	.sv-appointments__calendar-grid,
	.sv-appointments__weekdays {
		gap: var(--sv-space-2);
	}

	.sv-appointments__day {
		font-size: 14px;
		min-height: 38px;
	}

	.sv-appointments__calendar,
	.sv-appointments__slots,
	.sv-appointments__screen-head {
		scroll-margin-top: var(--sv-space-4);
	}

	.sv-appointments__mobile-time {
		border-top: 1px solid var(--sv-color-line);
		display: block;
		margin-top: var(--sv-space-6);
		padding-top: var(--sv-space-5);
	}

	.sv-appointments__mobile-time-head h3 {
		color: var(--sv-color-lacquer);
		font-family: "Prata", Georgia, "Times New Roman", serif;
		font-size: 1.25rem;
		font-weight: var(--sv-weight-regular);
		margin: 0 0 var(--sv-space-2);
	}

	.sv-appointments__mobile-time-head p {
		color: var(--sv-color-muted);
		font-size: var(--sv-text-body);
		margin: 0 0 var(--sv-space-4);
	}

	.sv-appointments__mobile-time .sv-appointments__placeholder {
		min-height: 96px;
		padding: var(--sv-space-4);
	}

	.sv-appointments__mobile-time .sv-appointments__slot-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sv-appointments__summary-row {
		column-gap: var(--sv-space-3);
		grid-template-columns: 34px 1fr;
		min-height: 0;
		padding: var(--sv-space-3) 0;
		row-gap: 2px;
	}

	.sv-appointments__summary-row strong {
		grid-column: 2;
		text-align: left;
	}

	.sv-appointments__actionbar,
	.sv-appointments__actions,
	.sv-appointments__manage-actions {
		grid-template-columns: 1fr;
	}

	.sv-appointments__actionbar {
		display: grid;
	}

	.sv-appointments__actions {
		display: grid;
	}

	.sv-appointments__manage,
	.sv-appointments__success-card {
		padding: var(--sv-space-4);
	}

	.sv-appointments__submit,
	.sv-appointments__back {
		min-width: 0;
		width: 100%;
	}
}