@font-face {
  font-family: 'Cormorant'; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/cormorant-regular.woff2") format('woff2');
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800;
  font-display: swap; src: url("/fonts/manrope-variable.woff2") format('woff2');
}
/* Общая основа по ref/vectorstyle-reference-style.png. Решения: docs/design-system.md. */
:root {
  --ink: #354543;
  --muted: #637370;
  --paper: #ffffff;
  --surface: #f3f8f6;
  --surface-mint: #e8f2ef;
  --line: #dce7e3;
  --accent: #007f80;
  --accent-hover: #006567;
  --focus: #946226;
  --font-body: 'Manrope', Arial, sans-serif;
  --font-heading: 'Cormorant', Georgia, serif;
  --text-small: .8125rem;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --container: 1264px;
  --radius: .25rem;
  --radius-button: 999px;
  --section-space: clamp(3rem, 6vw, 5rem);
  /* Движение (D10): резкий старт, мягкая остановка. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; color: var(--ink); background: var(--paper); font: var(--text-body)/1.65 var(--font-body); overflow-wrap: anywhere; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); text-underline-offset: .25em; text-decoration-thickness: 1px; transition: color .15s ease, border-color .15s ease; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
/* Телефон, WhatsApp и почта — цветом окружающего текста, подчёркивание при наведении. */
.contact-link { color: inherit; text-decoration: none; }
.contact-link:hover { color: var(--accent-hover); text-decoration: underline; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
[hidden] { display: none !important; }
.container { width: min(var(--container), calc(100% - 4rem)); margin-inline: auto; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 5.2vw, 4.75rem); line-height: calc(1em + .15rem); margin: .35em 0 .5em; }
h2 { font-size: clamp(2.25rem, 3.9vw, 3.5rem); margin: 0 0 var(--space-3); }
h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-2); }
address { font-style: normal; }
.eyebrow { color: var(--muted); font-size: .6875rem; font-weight: 400; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase; margin-bottom: var(--space-2); }
.lead { font-size: var(--text-lead); max-width: 42rem; line-height: 1.7; }
.muted { color: var(--muted); font-size: var(--text-small); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: .75rem; left: 1rem; transform: translateY(-200%); background: white; padding: .75rem 1rem; z-index: 10; }
.skip-link:focus { transform: translateY(0); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 44px; padding: .65rem 1.35rem; border: 1px solid var(--accent); border-radius: var(--radius-button); background: var(--accent); color: white; font-size: var(--text-small); line-height: 1.5; text-decoration: none; cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .16s var(--ease-out); }
.button:active:not(:disabled) { transform: scale(.97); }
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: white; text-decoration: none; }
.button-outline { background: transparent; color: var(--accent); }
.button-outline:hover { background: var(--surface-mint); color: var(--accent-hover); }
.button-large { min-height: 50px; padding: .75rem 1.5rem; font-size: 1rem; }
.button:disabled { cursor: not-allowed; opacity: .6; }
.header-meta-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); padding-block: .7rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }
.header-meta-inner .header-phone { color: var(--ink); font-size: .9375rem; }
.header-meta-inner > span:nth-child(2) { text-align: center; }
.header-meta-inner > span:last-child { text-align: right; }
.header-main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 98px; padding-block: var(--space-3) var(--space-2); }
.brand { display: inline-block; flex-shrink: 0; width: 240px; max-width: 100%; }
.brand img { width: 100%; }
/* Меню — отдельная группа (D06d), прижата вправо к кнопке «Связаться»; свободное место — между логотипом и меню. */
.main-nav { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 1.375rem; margin-left: 1.25rem; }
.main-nav > a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: .875rem; text-decoration: none; white-space: nowrap; }
.main-nav > a:not(.button):hover { color: var(--accent); text-decoration: underline; }
.header-contact { gap: 1.125rem; margin-left: .5rem; white-space: nowrap; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 44px; padding: .5rem .75rem; background: white; border: 1px solid var(--line); border-radius: var(--radius-button); color: var(--ink); font-size: var(--text-small); cursor: pointer; transition: background-color .15s ease; }
.menu-toggle:hover { background: var(--surface); }
.menu-toggle-icon { display: grid; gap: 5px; width: 17px; }
.menu-toggle-icon span { height: 1px; background: currentColor; transition: transform .2s var(--ease-out); }
.menu-toggle[aria-expanded='true'] .menu-toggle-icon span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle-icon span:last-child { transform: translateY(-3px) rotate(-45deg); }
.site-header { background: var(--paper); }
/* Главная, верхняя часть (D02). */
.arrow { display: inline-flex; flex: none; line-height: 1; transition: transform .2s var(--ease-out); }
/* Стрелка сдвигается при наведении одинаково везде: кнопки, ссылки, карточки. Только мышь:
   на сенсорных экранах hover «залипает» после тапа. При уменьшенном движении не сдвигается. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover .arrow, .arrow-link:hover .arrow, .home-directions-help:hover .arrow,
  .promo-card:hover .arrow, .equipment-card:hover .arrow, .specialist-card-linked:hover .arrow,
  .article-card:hover .arrow { transform: translateX(4px); }
  /* Фото карточек-ссылок услуг, статей и акций слегка увеличивается при наведении (D11);
     портреты специалистов — нет. Обрезает обёртка *-card-media. */
  .service-card-image, .article-card-image, .promo-card-image { transition: transform .9s cubic-bezier(.33, 1, .68, 1); }
  .service-card:has(a):hover .service-card-image, .article-card:hover .article-card-image,
  .promo-card:hover .promo-card-image { transform: scale(1.03); }
}
.arrow svg { display: block; width: 24px; height: 14px; }
.arrow-link { display: inline-flex; align-items: center; gap: .625rem; min-height: 44px; text-decoration: none; }
.arrow-link:hover { text-decoration: underline; }
.home-hero { background: var(--surface) url("/images/silk.svg") center / cover no-repeat; }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 404px); gap: var(--space-5); align-items: start; padding-block: var(--space-4) var(--space-2); }
.home-hero-text { padding-top: 2.5rem; }
/* H1 плотнее: две строки заголовка читаются одной фразой (D06d). */
.home-hero h1 { margin: var(--space-4) 0 var(--space-3); }
.home-hero .lead { max-width: 25rem; color: var(--muted); font-size: 1.25rem; line-height: 1.6; }
.home-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-5); }
.home-hero-actions .button { min-width: min(356px, 100%); min-height: 58px; }
/* Ссылка — по ширине и отступам кнопки над ней: текст и стрелка на одних вертикалях
   (отступ + 1px рамки кнопки). */
.home-hero-actions .arrow-link { justify-content: space-between; gap: 1.5rem; min-width: min(356px, 100%); padding-inline: calc(1.5rem + 1px); }
.home-portrait { margin: 0; }
.home-portrait-frame { background: var(--paper); padding: 1rem 1.375rem; }
.home-portrait-frame img { width: 100%; aspect-ratio: 460 / 640; object-fit: cover; }
.home-portrait figcaption { position: relative; padding: var(--space-2) 1.375rem 0 1.375rem; color: var(--muted); font-size: var(--text-small); }
.home-portrait-name { display: flex; align-items: center; gap: 1rem; color: var(--ink); font: 1.625rem/1.3 var(--font-heading); }
.home-portrait-name::before { content: ''; width: 2.5rem; height: 1px; background: #c9b38a; }
.home-advantages ul { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 1.25rem 0; list-style: none; }
.home-advantages li { display: flex; align-items: center; gap: 1.25rem; padding-inline: var(--space-3); color: var(--muted); font-size: 1.0625rem; line-height: 1.4; }
.home-advantages li:first-child { padding-left: 0; }
.home-advantages li + li { border-left: 1px solid var(--line); }
.home-advantages img { box-sizing: content-box; flex-shrink: 0; width: 30px; height: 30px; padding: 13px; border-radius: 50%; background: #f8f3ea; }
.home-section { padding-block: var(--section-space); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.section-head h2 { margin-bottom: 0; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
.service-card { position: relative; }
.service-card-media { display: block; overflow: hidden; }
.service-card-image { width: 100%; aspect-ratio: 298 / 211; object-fit: cover; }
/* Названия без переносов по слогам: длинное слово целиком уходит на следующую строку (D06, D07). */
.service-card-body { padding-top: var(--space-2); }
.service-card h3 { margin: 0; font-size: clamp(1.5rem, 1.9vw, 1.75rem); line-height: 1.15; overflow-wrap: normal; }
.service-card h3 a { color: var(--ink); text-decoration: none; }
.service-card h3 a::after { content: ''; position: absolute; inset: 0; }
.service-card p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.45; }
@media (min-width: 768px) { .service-card p { margin-top: 6px; } }
.service-card:hover h3 a { color: var(--accent); }
.service-card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 5px; }
.service-card h3 a:focus-visible { outline: none; }
.home-philosophy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-5); padding-block: var(--space-4) var(--section-space); }
.home-philosophy-text { width: auto; margin: 0 0 0 max(2rem, calc((100vw - var(--container)) / 2)); max-width: 34rem; }
.home-philosophy h2 { font-size: clamp(2rem, 3vw, 2.75rem); margin-block: var(--space-3); }
.home-philosophy p:not(.eyebrow) { color: var(--muted); font-size: var(--text-lead); line-height: 1.75; }
.home-philosophy .button { margin-top: var(--space-4); }
.home-philosophy-image { width: 100%; height: 100%; max-height: 520px; aspect-ratio: 686 / 518; object-fit: cover; }
.home-directions, .consultation-band { background: var(--surface) url("/images/silk.svg") center / cover no-repeat; }
.home-directions { padding-block: var(--space-4) var(--section-space); }
.home-directions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
.home-directions-group h3 { font-size: clamp(1.75rem, 2.4vw, 2.125rem); margin-bottom: var(--space-1); }
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: center; gap: .875rem; min-height: 49px; font-size: 1.0625rem; line-height: 1.4; }
.check-list li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; background: url("/images/icons/check.svg") center / contain no-repeat; }
.check-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.check-list a:hover { color: var(--accent); text-decoration: underline; }
.home-directions-group + .home-directions-group { grid-column: 2; grid-row: 1; }
.home-directions-help { grid-column: 2; grid-row: 1; align-self: end; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem var(--space-3); max-width: 526px; margin-top: var(--space-4); padding: 1.5rem 1.75rem; background: var(--paper); color: var(--accent); text-decoration: none; }
.home-directions-help-title { grid-column: 1 / -1; color: var(--ink); font: clamp(1.5rem, 2vw, 1.75rem)/1.2 var(--font-heading); }
.home-directions-help-link { display: flex; justify-content: space-between; gap: var(--space-3); grid-column: 1 / -1; }
.home-directions-help-link span { font-size: 1.375rem; line-height: 1; }
.home-directions-help:hover { color: var(--accent-hover); }
.home-promos { background: var(--surface); padding-block: var(--space-4) var(--section-space); margin-top: var(--space-4); }
.home-promos .section-head { margin-bottom: var(--space-1); }
.home-promos .section-head + .promo-grid { margin-top: var(--space-3); }
/* Акции: карточки одной ширины и одного вида (D06, D07). Фото сверху на всю ширину карточки,
   высота 230 px: фото процедур заполняют окно, вырезанные аппараты (imageKind: 'object')
   вписаны целиком на мятной подложке. Строки карточек ряда общие (subgrid): фото, подпись
   и название, выгода, текст, ссылка начинаются на одной высоте. Выгода («45 000 ₽», «−20%»)
   одного размера, старая цена в той же строке. */
.promo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.promo-card { position: relative; display: grid; grid-row: span 5; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; gap: 0 var(--space-2); padding: 0 0 1.25rem; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.promo-card > :not(.promo-card-media) { margin-inline: 1.375rem; }
.promo-card .eyebrow { margin-bottom: .5rem; }
.promo-card h3 { margin: 0; font-size: clamp(1.75rem, 2.3vw, 2.125rem); }
.promo-card-head { grid-column: 1; grid-row: 2; }
.promo-card-media { grid-column: 1; grid-row: 1; align-self: start; display: grid; place-items: center; overflow: hidden; margin: 0 0 1.25rem; background: var(--surface); }
.promo-card-image { display: block; width: 100%; height: 230px; object-fit: cover; }
.promo-card-image-object { object-fit: contain; mix-blend-mode: multiply; }
.promo-card-offer { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .875rem; margin: .75rem 0 0; }
.promo-card-price { color: var(--accent); font: clamp(1.625rem, 2vw, 1.875rem)/1.15 var(--font-heading); }
.promo-card s { color: var(--muted); font-size: .9375rem; }
.promo-card-text { grid-column: 1; grid-row: 4; margin: var(--space-2) 0 var(--space-3); color: var(--muted); font-size: 1rem; line-height: 1.55; }
.promo-card-term { display: block; color: var(--ink); font-size: .875rem; }
.promo-card-term:not(:first-child) { margin-top: .5rem; }
.promo-card-link { grid-column: 1; grid-row: 5; align-self: end; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: .9375rem; text-decoration: none; }
.promo-card-link span[aria-hidden] { font-size: 1.375rem; line-height: 1; }
.promo-card-link::after { content: ''; position: absolute; inset: 0; }
.promo-card:has(.promo-card-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 5px; }
.promo-card-link:focus-visible { outline: none; }
@media (min-width: 768px) and (max-width: 1023px) {
  /* Три акции в ряд не помещаются: карточки сетки в колонку, фото слева. */
  .promo-grid { grid-template-columns: minmax(0, 1fr); }
  .promo-grid .promo-card { grid-row: auto; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; padding: 0; }
  .promo-grid .promo-card > :not(.promo-card-media) { grid-column: 2; margin-inline: 1.5rem; }
  /* Высоту карточки задаёт текст (не меньше 230 px): вертикальное фото не вытягивает её. */
  .promo-grid .promo-card-media { position: relative; grid-column: 1; grid-row: 1 / -1; align-self: stretch; min-height: 230px; margin: 0; }
  .promo-grid .promo-card-image { position: absolute; inset: 0; height: 100%; }
  .promo-grid .promo-card-head { grid-row: 1; padding-top: 1.25rem; }
  .promo-grid .promo-card-offer { grid-row: 2; }
  .promo-grid .promo-card-text { grid-row: 3; }
  .promo-grid .promo-card-link { grid-row: 4; padding-bottom: 1rem; }
}
/* Блок записи (Consultation): текст и телефон слева, форма записи на белой карточке
   справа. Последним блоком страницы — без шёлка: подвал начинается шёлковым блоком. */
.consultation-band { padding-block: clamp(2.5rem, 5vw, 4rem); margin-top: var(--space-4); }
main > .consultation-band:last-child { background: var(--paper); border-top: 1px solid var(--line); }
.consultation-band-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); align-items: start; }
.consultation-band h2 { max-width: 12em; margin-bottom: var(--space-3); }
.consultation-band-text > p:not(.eyebrow, .consultation-band-phone, .consultation-band-hours) { color: var(--muted); font-size: var(--text-lead); line-height: 1.6; max-width: 30rem; }
.consultation-band-phone { font: clamp(1.75rem, 2.6vw, 2.125rem)/1.3 var(--font-heading); margin: var(--space-4) 0 .25rem; }
.consultation-band-hours { color: var(--muted); margin: 0; }
.consultation-band-form { padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--radius); background: var(--paper); box-shadow: 0 12px 40px rgb(32 38 38 / .08); }
main > .consultation-band:last-child .consultation-band-form { background: var(--surface); box-shadow: none; }
.consultation-band-form .booking-success h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); margin-bottom: var(--space-2); }
/* D03b: оборудование, специалисты, статьи */
.home-equipment { padding-block: 4rem var(--space-5); }
.home-equipment > .section-head { margin-bottom: 2.5rem; }
.home-equipment-featured { display: grid; grid-template-columns: minmax(0, 49%) minmax(0, 1fr); align-items: center; gap: 4.5rem; }
/* Выделенный аппарат — на ровной подложке, как карточки оборудования (D06). */
.home-equipment-featured-media { display: flex; align-items: center; justify-content: center; min-height: 422px; padding: var(--space-4); background: var(--surface); }
.home-equipment-featured-media img { width: auto; max-height: 358px; object-fit: contain; mix-blend-mode: multiply; }
.home-equipment-featured-text { max-width: 36rem; padding-right: max(2rem, calc((100vw - var(--container)) / 2)); box-sizing: content-box; }
.home-equipment-featured-text h3 { margin: var(--space-3) 0; font-size: clamp(2.5rem, 3.9vw, 3.5rem); line-height: 1.05; }
.home-equipment-featured-text p:not(.eyebrow) { color: var(--muted); font-size: var(--text-lead); line-height: 1.75; }
.home-equipment-featured-text .button { min-width: min(306px, 100%); margin-top: var(--space-5); }
.equipment-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin-top: 4.75rem; }
.equipment-card { position: relative; }
/* Единая ровная мятная подложка; белый фон PNG исходника сливается с ней (multiply). */
/* Одно правило для всех изображений карточки (D09): без полей, заполнение окна. */
.equipment-card-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 233 / 202; background: var(--surface); }
.equipment-card-image { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: multiply; }
.equipment-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); padding-top: var(--space-2); }
.equipment-card h3 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.1vw, 1.875rem); }
.equipment-card h3 a { color: var(--ink); text-decoration: none; }
.equipment-card h3 a::after { content: ''; position: absolute; inset: 0; }
.equipment-card p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.65; }
.equipment-card-arrow { align-self: center; margin-bottom: .5rem; color: var(--accent); font-size: 1.375rem; line-height: 1; }
.specialist-card-linked:hover h3 a, .equipment-card:hover h3 a { color: var(--accent); }
.equipment-card:has(a:focus-visible), .specialist-card:has(a:focus-visible), .article-card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 5px; }
.equipment-card h3 a:focus-visible, .specialist-card h3 a:focus-visible, .article-card-link:focus-visible { outline: none; }
.home-specialists { padding-bottom: var(--space-5); }
/* Вводный абзац команды ~60 символов. */
.home-specialists-intro { max-width: 36rem; margin-bottom: var(--space-4); color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
.specialist-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4) 1.125rem; }
.specialist-card { position: relative; }
.specialist-card h3 { margin: 0; font-size: clamp(1.375rem, 1.9vw, 1.625rem); line-height: 1.05; }
.specialist-card h3 span { display: block; }
.specialist-card h3 a { color: var(--ink); text-decoration: none; }
.specialist-card h3 a::after { content: ''; position: absolute; inset: 0; }
.specialist-card p { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.specialist-card-image { width: 100%; aspect-ratio: 2 / 3; margin-bottom: var(--space-2); object-fit: cover; border-radius: var(--radius); }
.specialist-card p { margin-top: .875rem; }
/* Больше шести карточек — четыре колонки: ряды без «хвоста» из двух карточек. */
@media (min-width: 768px) {
  .specialist-grid:has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .specialist-grid:has(> :nth-child(7)) .specialist-card-image { aspect-ratio: 3 / 4; object-position: center 25%; }
}
.specialist-card-arrow { color: var(--accent); font-size: 1.375rem; line-height: 1; }
.home-articles { padding-top: var(--space-4); }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
/* Строки карточек одного ряда общие (subgrid): короткий заголовок не поднимает анонс и ссылку. */
.article-card { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.article-card-media { display: block; overflow: hidden; border-radius: var(--radius); }
.article-card-image { width: 100%; aspect-ratio: 405 / 215; object-fit: cover; }
.article-card h3 { margin: 1.25rem 0 var(--space-3); font-size: clamp(1.5rem, 2.1vw, 1.875rem); line-height: 1.12; }
.article-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }
.article-card-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: var(--space-5); font-size: 1rem; text-decoration: none; }
.article-card-link::after { content: ''; position: absolute; inset: 0; }
.article-card-link span[aria-hidden] { font-size: 1.375rem; line-height: 1; }
.article-card h3 { transition: color .15s ease; }
.article-card:hover h3 { color: var(--accent); }
/* Уменьшенное движение: без сдвигов и масштаба, смена цвета остаётся. */
@media (prefers-reduced-motion: reduce) {
  .menu-toggle-icon span { transition: none; }
  .button { transition-property: color, background-color, border-color; }
  .button:active:not(:disabled) { transform: none; }
}
@media (max-width: 1279px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .equipment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-equipment-featured { gap: var(--space-5); }
  .specialist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
}
@media (max-width: 1023px) {
  .home-advantages ul { grid-template-columns: 1fr; gap: var(--space-2); }
  .home-advantages li { padding-inline: 0; }
  .home-advantages li + li { border-left: 0; }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consultation-band-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .consultation-band-phone { margin-top: var(--space-3); }
}
@media (max-width: 767px) {
  .home-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); }
  .home-hero-text { padding-top: 0; }
  .home-hero h1 { margin-top: var(--space-2); }
  .home-hero-actions { margin-top: var(--space-4); }
  .home-hero-actions .button, .home-hero-actions .arrow-link { min-width: 0; width: 100%; }
  /* Портрет компактнее, подпись рядом с ним. */
  .home-portrait { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: end; gap: var(--space-2); }
  .home-portrait-frame { padding: .5rem; }
  .home-portrait figcaption { padding: 0 0 .25rem; font-size: .875rem; line-height: 1.45; }
  .home-portrait-name { flex-direction: column; align-items: flex-start; gap: .75rem; margin-bottom: .375rem; font-size: 1.625rem; line-height: 1.15; }
  .section-head { flex-wrap: wrap; align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .service-grid { gap: var(--space-3) var(--space-2); }
  .service-card h3 { font-size: 1.25rem; }
  .home-philosophy { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .home-philosophy-text { margin-inline: auto; width: calc(100% - 2rem); }
  .home-directions-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .consultation-band-form { margin-inline: -1rem; border-radius: 0; }
  .home-directions-group + .home-directions-group { grid-column: auto; grid-row: auto; margin-top: var(--space-2); }
  .home-directions-help { grid-column: auto; grid-row: auto; max-width: none; padding: 1.25rem; }
  .check-list li { min-height: 44px; font-size: 1rem; }
  .promo-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .promo-grid .promo-card { grid-row: auto; grid-template-rows: none; }
  .promo-grid .promo-card > :not(.promo-card-media) { margin-inline: 1rem; }
  /* Без описания (Morpheus 8) — тот же отступ до разделителя, что после описания. */
  .promo-grid .promo-card-offer:not(:has(+ .promo-card-text)) { margin-bottom: var(--space-3); }
  .home-equipment > .section-head { margin-bottom: var(--space-3); }
  .home-equipment-featured { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .home-equipment-featured-media { min-height: 0; }
  .home-equipment-featured-text { max-width: none; width: calc(100% - 2rem); margin-inline: auto; padding-right: 0; box-sizing: border-box; }
  .home-equipment-featured-text h3 { margin-block: var(--space-2); }
  .home-equipment-featured-text .button { width: 100%; margin-top: var(--space-3); }
  .equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-2); margin-top: var(--space-5); }
  .equipment-card h3 { font-size: 1.375rem; }
  .equipment-card p { font-size: .875rem; }
  .specialist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-2); }
  .home-specialists-intro { font-size: 1rem; }
  .home-articles { padding-top: var(--space-4); }
  .article-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .article-card-link { margin-top: var(--space-2); }
}

.footer-contact-band { background: var(--surface) url("/images/silk.svg") center / cover no-repeat; padding-block: clamp(2.5rem, 5vw, 4rem); }
.footer-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: var(--space-5); }
.footer-place-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-3); }
.footer-phone { font: clamp(1.75rem, 3.4vw, 2.5rem)/1.3 var(--font-heading); margin-block: var(--space-3) .75rem; }
.footer-contact-line { color: var(--muted); font-size: var(--text-lead); margin-bottom: .5rem; }
/* Мессенджеры иконками (Messengers): круглые кнопки 44 px, знак цветом текста. */
.messengers { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.messenger-link { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; transition: color .2s ease, border-color .2s ease; }
.messenger-link:hover { color: var(--accent-hover); border-color: currentColor; }
.messenger-link svg { display: block; }
/* Подсказка с названием мессенджера: над иконкой при наведении и фокусе с клавиатуры. */
.messenger-link { position: relative; }
.messenger-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 2; padding: .25rem .625rem; color: #fff; background: var(--ink); border-radius: 6px; font: 600 .75rem/1.4 var(--font-body); letter-spacing: .02em; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.messenger-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.messenger-link:hover .messenger-tooltip, .messenger-link:focus-visible .messenger-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .messenger-tooltip { transition: none; } }
.footer-contact-messengers { margin-top: var(--space-3); }
.footer-messengers { margin-top: var(--space-3); }
.footer-address { font: clamp(1.375rem, 2vw, 1.625rem)/1.3 var(--font-heading); margin-bottom: var(--space-3); }
.footer-address span { display: block; color: var(--muted); font: var(--text-lead)/1.65 var(--font-body); }
.footer-hours { font-size: var(--text-lead); margin-bottom: var(--space-3); }
/* Схема проезда (ContactMap) и ссылки маршрута (RouteLinks): подвал и /kontakty. */
.contact-map { margin: 0; }
.contact-map-frame { position: relative; }
.contact-map-frame .contact-map-live { position: absolute; inset: 0; visibility: hidden; opacity: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: opacity .3s ease; }
.is-live .contact-map-live { visibility: visible; opacity: 1; }
.contact-map-live .maplibregl-canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .contact-map-live { transition: none; } }
.contact-map-image { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #edf2f0; }
.contact-map-credit { position: absolute; right: .5rem; bottom: .5rem; left: .5rem; z-index: 3; color: var(--muted); font-size: .75rem; line-height: 1.4; pointer-events: none; }
.contact-map-credit summary { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; color: var(--ink); background: rgb(255 255 255 / .92); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); list-style: none; cursor: pointer; pointer-events: auto; }
.contact-map-credit summary::-webkit-details-marker { display: none; }
.contact-map-credit summary:focus-visible { outline-offset: 2px; }
.contact-map-credit[open] summary { box-shadow: none; }
.contact-map-credit p { position: absolute; right: 0; bottom: 0; width: max-content; max-width: 100%; box-sizing: border-box; min-height: 28px; margin: 0; padding: .3rem 2.25rem .3rem .75rem; background: white; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); pointer-events: auto; }
.contact-map-credit a { color: inherit; }
.route-links { margin-bottom: var(--space-4); }
.route-links .eyebrow { margin-bottom: 0; }
.route-links ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: 0; padding: 0; list-style: none; }
.contact-page-map { margin-top: var(--space-5); }
.contact-page-map .route-links { margin: var(--space-3) 0 0; }
@media (max-width: 1023px) {
  .footer-contact-grid { grid-template-columns: minmax(0, 1fr); }
}
.footer-grid { display: grid; grid-template-columns: .85fr 1.15fr 1fr; gap: var(--space-5); padding-block: 2.5rem; }
.brand-caption { color: var(--muted); font-size: var(--text-small); margin-top: var(--space-2); }
.footer-nav-row { display: flex; flex-wrap: wrap; }
.footer-nav a + a::before { content: '·' / ''; display: inline-block; padding-inline: .3rem; color: var(--muted); }
/* В три колонки строки навигации подвала не помещаются и переносятся с «·» в начале:
   логотип — отдельной строкой, навигация и услуги — двумя колонками под ним. */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
.footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.footer-grid nav a { font-size: .875rem; color: var(--muted); text-decoration: none; padding-block: .25rem; }
.footer-grid nav a:hover { color: var(--accent); text-decoration: underline; }
.footer-bottom .footer-legal { align-items: flex-end; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--line); padding-block: var(--space-3); font-size: var(--text-small); color: var(--muted); }
.footer-bottom p { margin-bottom: .5rem; }
.footer-disclaimer { max-width: 44rem; }
.footer-bottom .footer-legal a { color: var(--muted); text-decoration: none; }
.footer-bottom .footer-legal a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 1279px) {
  .header-main { flex-wrap: wrap; gap: var(--space-2); min-height: 80px; }
  .main-nav { flex-basis: 100%; flex-grow: 0; margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; justify-items: stretch; gap: .25rem var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-2); }
  .main-nav > a:not(.button) { white-space: normal; font-size: .9375rem; padding-inline: .5rem; }
  .header-contact { justify-self: start; min-width: 0; margin: .5rem 0 0; grid-column: 1 / -1; }
}
/* Мобильное меню появляется коротко, закрывается мгновенно (hidden). Только открытое
   кнопкой меню: начальная отрисовка страницы не анимируется. */
@media (max-width: 1279px) and (prefers-reduced-motion: no-preference) {
  .menu-toggle[aria-expanded='true'] + .main-nav { transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
  @starting-style {
    .menu-toggle[aria-expanded='true'] + .main-nav { opacity: 0; transform: translateY(-4px); }
  }
}
@media (max-width: 767px) {
  .container { width: calc(100% - 2rem); }
  .header-meta-inner { display: flex; flex-wrap: wrap; gap: .25rem var(--space-2); }
  .header-meta-inner > span:first-child { flex-basis: 100%; }
  .header-meta-inner > span:last-child { margin-left: auto; }
  .header-main { padding-block: var(--space-2); }
  .brand { width: 174px; }
  .footer-contact-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .footer-contact-grid { gap: var(--space-4); }
  .footer-place-details { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .footer-grid { gap: var(--space-4); padding-block: var(--space-4); }
  .footer-bottom .footer-legal { align-items: flex-start; }
  .footer-grid nav a, .footer-bottom .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-bottom { flex-direction: column; gap: .5rem; }
}
@media (max-width: 359px) {
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .equipment-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Страница услуги (D04): ServiceLayout.astro. */
.breadcrumbs { padding-top: var(--space-3); color: var(--muted); font-size: var(--text-small); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0 .5rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: '/'; margin-right: .5rem; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.service-hero { background: var(--surface) url("/images/silk.svg") center / cover no-repeat; }
.service-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: var(--space-5); align-items: center; padding-block: var(--space-3) var(--space-6); }
.service-hero-grid-text { grid-template-columns: minmax(0, 1fr); }
.service-hero h1 { margin: var(--space-3) 0; }
.service-hero .lead { max-width: 30rem; color: var(--muted); font-size: 1.25rem; line-height: 1.6; }
.service-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); }
.service-hero-actions .button { min-width: min(280px, 100%); min-height: 58px; }
.service-hero-media { background: var(--paper); padding: 1rem; }
.service-hero-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.service-facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 0; padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.service-facts dl > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-inline: var(--space-3); }
.service-facts dl > div:first-child { padding-left: 0; }
.service-facts dl > div + div { border-left: 1px solid var(--line); }
.service-facts dt { color: var(--muted); font-size: .9375rem; line-height: 1.4; }
.service-facts dd { margin: 0 0 .25rem; font: clamp(1.75rem, 2.6vw, 2.25rem)/1.2 var(--font-heading); }
.section-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: 0; padding: var(--space-1) 0; border-bottom: 1px solid var(--line); list-style: none; }
.section-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: .9375rem; text-decoration: none; }
.section-nav a:hover { color: var(--accent); text-decoration: underline; }
.service-section { padding-block: var(--section-space); }
.service-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-5) var(--space-6); }
.service-highlights { margin-top: var(--space-4); }
.service-about-blocks { display: grid; gap: var(--space-5); padding-top: var(--space-4); }
.service-text-block h3 { padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.service-text-block p { color: var(--muted); font-size: var(--text-lead); line-height: 1.75; }
.service-text-block .check-list li { align-items: flex-start; min-height: 0; padding-block: .5rem; }
.service-text-block .check-list li::before { margin-top: .125em; }
@media (min-width: 1024px) { .service-about > div:first-child { position: sticky; top: var(--space-4); align-self: start; } }
/* Частые вопросы: сетка «Описания», вопросы раскрываются (details), плюс превращается в крестик. */
.service-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-4) var(--space-6); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 44px; padding-block: 1.25rem; font: clamp(1.375rem, 1.8vw, 1.625rem)/1.25 var(--font-heading); list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; transition: color .15s ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; flex: none; width: 1rem; height: 1rem; color: var(--accent); background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; }
.faq-item summary:hover { color: var(--accent); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { max-width: 40rem; margin: -.25rem 0 0; padding-bottom: 1.5rem; color: var(--muted); font-size: var(--text-lead); line-height: 1.75; }
/* Ответ раскрывается по высоте с проявлением; без interpolate-size (Safari, Firefox) — только
   проявление, без ::details-content — сразу. Закрытие короче открытия. */
@media (prefers-reduced-motion: no-preference) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item summary::after { transition: transform .25s var(--ease-out); }
  .faq-item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .2s var(--ease-out), opacity .2s var(--ease-out), content-visibility .2s allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; opacity: 1; transition-duration: .3s; }
}
.service-course { display: grid; grid-template-columns: minmax(0, 49%) minmax(0, 1fr); align-items: center; gap: 4.5rem; padding-bottom: var(--section-space); }
.service-course-media { display: flex; justify-content: center; align-items: center; min-height: 460px; padding: var(--space-4); background: var(--surface) url("/images/silk.svg") center / cover no-repeat; }
.service-course-media img { width: min(400px, 100%); mix-blend-mode: multiply; }
.service-highlights li { min-height: 0; padding-block: .625rem; }
.service-course-text { max-width: 36rem; padding-right: max(2rem, calc((100vw - var(--container)) / 2)); box-sizing: content-box; }
.service-course-text:only-child { grid-column: 1 / -1; margin-left: max(2rem, calc((100vw - var(--container)) / 2)); }
.service-course-text p:not(.eyebrow) { color: var(--muted); font-size: var(--text-lead); line-height: 1.75; }
.service-course-text .service-course-equipment { display: flex; align-items: baseline; gap: 1rem; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-small); letter-spacing: .13em; text-transform: uppercase; }
.service-course-equipment span { color: var(--ink); font: 1.75rem/1.2 var(--font-heading); letter-spacing: 0; text-transform: none; }
.service-course-text .button { min-width: min(250px, 100%); margin-top: var(--space-3); }
.service-prices { padding-block: var(--section-space); background: var(--surface); }
.service-prices-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-top: var(--space-4); }
.service-prices-grid-single { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.price-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); background: var(--paper); }
.price-table th, .price-table td { padding: 1.125rem 1.5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; font-weight: 400; }
.price-table-group th { padding-top: 1.75rem; padding-bottom: .5rem; color: var(--muted); font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; }
.price-table th[scope='row'] { font-size: 1.0625rem; }
.price-table th[scope='row'] span { display: block; color: var(--muted); font-size: .875rem; }
.price-table td { text-align: right; white-space: nowrap; }
.price-table strong, .service-offer-price strong { color: var(--accent); font: 1.75rem/1.2 var(--font-heading); }
.price-table s, .service-offer-price s { display: block; color: var(--muted); font-size: .875rem; }
.service-offer { padding: var(--space-4); background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.service-offer h3 { margin-bottom: var(--space-2); }
.service-offer-price { display: flex; align-items: baseline; gap: var(--space-3); }
.service-offer-price strong { font-size: 2.25rem; }
.service-offer .muted { margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line); }
.service-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.service-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.service-section .section-head + .article-grid, .service-section .section-head + .service-grid { margin-top: var(--space-4); }
@media (max-width: 1279px) {
  .service-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--space-4); }
  .service-about { gap: var(--space-4); }
  .service-course { gap: var(--space-5); }
}
@media (max-width: 1023px) {
  .service-hero-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-5); }
  .service-hero-media { max-width: 600px; }
  .service-facts dl { grid-template-columns: 1fr 1fr; gap: var(--space-3) 0; }
  .service-facts dl > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .service-about, .service-prices-grid, .service-faq { grid-template-columns: minmax(0, 1fr); }
  .service-faq { gap: 0; }
  .service-about-blocks { padding-top: 0; }
  .service-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .service-hero-grid { padding-block: var(--space-2) var(--space-4); }
  .service-hero h1 { margin-block: var(--space-2); }
  .service-hero .lead { font-size: var(--text-lead); }
  .service-hero-actions { margin-top: var(--space-4); }
  .service-hero-actions .button { width: 100%; }
  .service-hero-media { padding: .75rem; }
  .service-facts dl { padding-block: var(--space-3); }
  .service-facts dl > div { padding-inline: var(--space-2) 0; }
  .section-nav ul { gap: 0 var(--space-3); }
  .service-text-block p, .service-course-text p:not(.eyebrow) { font-size: var(--text-body); }
  .service-course { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .service-course-media { min-height: 0; padding: var(--space-4) var(--space-2); }
  .service-course-media img { width: min(260px, 100%); }
  .service-course-text, .service-course-text:only-child { max-width: none; width: calc(100% - 2rem); margin-inline: auto; padding-right: 0; box-sizing: border-box; }
  .service-course-text .button { width: 100%; }
  .price-table th, .price-table td { padding: .875rem 1rem; }
  .price-table th[scope='row'] { font-size: 1rem; }
  .price-table strong { font-size: 1.5rem; }
  .service-offer { padding: var(--space-3); }
  .service-gallery { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}
/* P01: каталог услуг и страницы категорий (CatalogLayout). Первый экран — как у услуги, без фото. */
.catalog-hero-text { padding-top: var(--space-3); }
.catalog-hero h1 { max-width: 15em; }
.catalog-hero .lead { max-width: 46rem; }
.catalog-nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0 0 var(--space-6); list-style: none; }
.catalog-nav a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-height: 64px; height: 100%; padding: 1.125rem var(--space-3); color: var(--ink); background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-top: 3px solid transparent; text-decoration: none; }
.catalog-nav a:hover { color: var(--accent); border-color: var(--accent); }
.catalog-nav a[aria-current='page'] { background: var(--paper); border-top-color: var(--accent); }
.catalog-nav-count { flex-shrink: 0; color: var(--muted); font-size: var(--text-small); white-space: nowrap; }
.catalog-section { padding-block: var(--section-space); }
.catalog-section + .catalog-section { padding-top: 0; }
@media (max-width: 1023px) {
  .catalog-nav ul { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); margin-top: var(--space-4); padding-bottom: var(--space-5); }
  .catalog-nav a { min-height: 56px; padding: .875rem var(--space-2); }
}
@media (max-width: 767px) {
  .catalog-hero-text { padding-top: var(--space-2); }
  .catalog-nav ul { margin-top: var(--space-3); padding-bottom: var(--space-4); }
}
/* P07: оборудование — каталог /oborudovanie (первый экран каталога без навигации,
   карточки EquipmentCard wide со списком процедур) и шаблон аппарата (EquipmentLayout). */
.catalog-hero-plain .catalog-hero-text { padding-bottom: var(--space-6); }
.equipment-hero-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: var(--space-3); background: var(--paper); }
.equipment-hero-media img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* Модель и производитель под названием аппарата. */
.service-hero h1:has(+ .equipment-model) { margin-bottom: var(--space-1); }
.equipment-model { margin: 0 0 var(--space-3); color: var(--muted); }
.equipment-about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); align-items: start; }
.equipment-about-text p:not(.eyebrow) { color: var(--muted); font-size: var(--text-lead); line-height: 1.75; }
.equipment-about h3 { margin-top: var(--space-4); }
.equipment-grid-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); margin-top: 0; }
.equipment-grid-related { margin-top: 0; }
.equipment-card-wide .equipment-card-media { aspect-ratio: 4 / 3; }
.equipment-card-wide h3 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.equipment-card-list { grid-column: 1 / -1; margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.equipment-card-list li { padding-block: .5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; line-height: 1.5; }
@media (max-width: 1023px) {
  .equipment-grid-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
  .equipment-about { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .equipment-about h3 { margin-top: 0; }
  .equipment-hero-media { max-width: 600px; }
}
@media (max-width: 767px) {
  .equipment-about-text p:not(.eyebrow) { font-size: var(--text-body); }
  .catalog-hero-plain .catalog-hero-text { padding-bottom: var(--space-4); }
  .equipment-grid-catalog { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .equipment-hero-media { padding: var(--space-2); }
  .equipment-card-wide h3 { font-size: 1.75rem; }
}
/* P09: специалисты — список /specialisty (крупные карточки SpecialistCard wide)
   и профиль (SpecialistLayout): портрет в белой рамке, как на главной. */
.specialist-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.specialist-hero-grid-text { grid-template-columns: minmax(0, 1fr); }
.specialist-hero-media { background: var(--paper); padding: 1rem; }
.specialist-hero-media img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.specialist-info-nav ul { margin: var(--space-4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.specialist-info-nav li { border-bottom: 1px solid var(--line); }
.specialist-info-nav a { display: flex; align-items: center; min-height: 48px; color: var(--ink); font: 1.375rem/1.2 var(--font-heading); text-decoration: none; }
.specialist-info-nav a:hover { color: var(--accent); }
.service-text-block { scroll-margin-top: var(--space-3); }
.specialist-list-block { margin-top: var(--space-3); }
.specialist-list-block h4 { margin: 0 0 .5rem; color: var(--muted); font: 600 .6875rem/1.5 var(--font-body); letter-spacing: .13em; text-transform: uppercase; }
.specialist-list { margin: 0; padding: 0; list-style: none; }
.specialist-list li { padding: .625rem 0 .625rem 1.5rem; border-bottom: 1px solid var(--line); position: relative; font-size: 1.0625rem; line-height: 1.55; }
.specialist-list li::before { content: ''; position: absolute; left: 0; top: 22px; width: 12px; height: 1px; background: var(--accent); }
.specialist-grid-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
.specialist-card-wide { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); }
.specialist-card-wide .specialist-card-image, .specialist-card-wide h3, .specialist-card-wide p { grid-column: 1 / -1; }
.specialist-card-wide h3 { grid-column: 1; font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.specialist-card-wide .specialist-card-arrow { grid-column: 2; grid-row: 2; align-self: center; }
.specialist-card-wide p { font-size: .9375rem; }
.specialist-card-wide .specialist-card-image { aspect-ratio: 3 / 4; object-position: center 25%; }
/* Остальные специалисты профиля: на широком экране колонок столько, сколько карточек (до 6; больше — 4). */
@media (min-width: 1280px) { .specialist-grid-related, .specialist-grid-related:has(> :nth-child(7)) { grid-template-columns: repeat(var(--specialist-columns, 6), minmax(0, 1fr)); } }
@media (max-width: 1279px) {
  .specialist-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .specialist-hero-grid-text { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .specialist-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .specialist-hero-media { max-width: 440px; }
  .specialist-grid-catalog, .specialist-grid-catalog:has(> :nth-child(7)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
}
@media (max-width: 767px) {
  .specialist-hero-media { padding: .75rem; }
  .specialist-list li { font-size: 1rem; }
  .specialist-grid-catalog { gap: var(--space-4) var(--space-2); }
  .specialist-card-wide h3 { font-size: 1.5rem; }
}
/* P12: текстовый шаблон (TextLayout) — статьи, позже О клинике, Контакты, Цены,
   правовые страницы. Первый экран списка; колонка 46rem, оглавление слева
   (строки как у навигации профиля специалиста). Список /news — сетка ArticleCard. */
.text-hero h1 { max-width: 22em; }
.text-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46rem); gap: var(--space-4) var(--space-6); align-items: start; padding-block: var(--section-space); }
.text-page-single { grid-template-columns: minmax(0, 46rem); }
.text-toc ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.text-toc li { border-bottom: 1px solid var(--line); }
.text-toc a { display: flex; align-items: center; min-height: 48px; padding-block: .5rem; color: var(--ink); font: 1.375rem/1.2 var(--font-heading); text-decoration: none; }
.text-toc a:hover { color: var(--accent); }
@media (min-width: 1024px) {
  .text-page:not(.text-page-single) { grid-template-rows: auto 1fr; }
  .text-page:not(.text-page-single) > .text-toc { grid-column: 1; grid-row: 1; }
  .text-page:not(.text-page-single) > .text-content { grid-column: 2; grid-row: 1 / span 2; }
  .text-page > .text-aside { grid-column: 1; grid-row: 2; position: sticky; top: var(--space-4); margin-top: var(--space-4); }
  .text-page > .text-aside:nth-child(2) { grid-row: 1 / span 2; margin-top: 0; }
}
.text-related { display: grid; gap: var(--space-3); max-width: 298px; }
.text-related .eyebrow { margin: 0; font-family: var(--font-body); }
.text-figure { margin: 0 0 var(--space-4); }
.text-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.text-content > p, .text-section > p { font-size: var(--text-lead); line-height: 1.75; }
.text-section { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); scroll-margin-top: var(--space-3); }
.text-section h2 { font-size: clamp(1.875rem, 2.6vw, 2.5rem); }
.text-content .text-note { margin-block: var(--space-3); padding: var(--space-3); background: var(--surface); border-left: 3px solid var(--accent); font: 1.5rem/1.35 var(--font-heading); }
.text-subtitle { margin: var(--space-4) 0 var(--space-1); font-size: clamp(1.5rem, 2vw, 1.75rem); }
.text-list-block { margin-block: var(--space-2) var(--space-3); }
.text-list-block h3 { margin: 0 0 .5rem; color: var(--muted); font: 600 .6875rem/1.5 var(--font-body); letter-spacing: .13em; text-transform: uppercase; }
.text-list { margin: 0; padding: 0; list-style: none; }
.text-list li { position: relative; padding: .625rem 0 .625rem 1.5rem; border-bottom: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.55; }
.text-list li::before { content: ''; position: absolute; left: 0; top: 22px; width: 12px; height: 1px; background: var(--accent); }
/* P15: таблица текстового шаблона — линии как у таблицы цен услуги, заголовки
   столбцов подписью, заголовки строк шрифтом заголовков. Ширина — по колонке текста;
   на узких экранах ячейки переносятся (с дефисом), горизонтальной прокрутки нет. */
.text-table { width: 100%; margin-block: var(--space-3); border-collapse: collapse; border-top: 1px solid var(--line); hyphens: auto; }
.text-table th, .text-table td { padding: .875rem 1.5rem .875rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; font-weight: 400; }
.text-table th:last-child, .text-table td:last-child { padding-right: 0; }
.text-table thead th { padding-block: .75rem; color: var(--muted); font: 600 .6875rem/1.5 var(--font-body); letter-spacing: .13em; text-transform: uppercase; }
.text-table tbody th { width: 34%; font: 1.375rem/1.25 var(--font-heading); }
.text-table td { font-size: 1.0625rem; line-height: 1.55; }
/* P17: изображения в тексте (сканы лицензии) — 2 колонки, подпись под рамкой;
   ссылки боковой колонки — строки между линиями, как оглавление; контакты — строки
   «подпись / значение» с линиями, как таблица текста, значение шрифтом заголовков. */
.text-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.text-figures figure { margin: 0; }
.text-figures a { display: block; padding: var(--space-1); border: 1px solid var(--line); background: var(--surface); }
.text-figures a:hover { border-color: var(--accent); }
.text-figures img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 10; object-fit: contain; }
.text-figures figcaption { margin-top: .75rem; color: var(--muted); font-size: var(--text-small); }
.text-links ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.text-links li { border-bottom: 1px solid var(--line); }
.text-links .arrow-link { justify-content: space-between; width: 100%; min-height: 48px; }
.contact-details { margin: 0; border-top: 1px solid var(--line); }
.contact-details div { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding-block: 1.125rem; border-bottom: 1px solid var(--line); }
.contact-details dt { color: var(--muted); font: 600 .6875rem/1.5 var(--font-body); letter-spacing: .13em; text-transform: uppercase; }
.contact-details dd { margin: 0; font: clamp(1.375rem, 2vw, 1.625rem)/1.3 var(--font-heading); overflow-wrap: anywhere; }
.contact-details .contact-details-messengers { align-items: center; }
.article-grid-catalog { gap: var(--space-6) var(--space-3); }
/* P18: страница цен — таблица цен услуги (PriceTable) в колонке текста: без фона
   и боковых отступов, по краю текста, цены мельче, чем в услуге (позиций сотни).
   Длинное оглавление (больше 8 разделов) — строки плотнее, шрифтом текста;
   до 1024 px — в две колонки, чтобы не отодвигать цены на несколько экранов. */
.price-page-note { color: var(--muted); }
.price-section .price-table { margin-block: var(--space-2) 0; background: none; }
.price-section .price-table th, .price-section .price-table td { padding: .75rem 0; }
.price-section .price-table td { padding-left: var(--space-3); }
.price-section .price-table strong { font-size: 1.375rem; }
.price-section-links { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem var(--space-3); }
.text-toc-long a { min-height: 44px; padding-block: .375rem; font: 1rem/1.35 var(--font-body); }
@media (max-width: 1023px) {
  .text-page { grid-template-columns: minmax(0, 1fr); }
  .text-page > * { max-width: 46rem; }
}
@media (max-width: 767px) {
  .text-content > p, .text-section > p { font-size: var(--text-body); }
  .text-section { margin-top: var(--space-4); padding-top: var(--space-3); }
  .text-toc a { font-size: 1.25rem; }
  .text-content .text-note { padding: var(--space-2); font-size: 1.3125rem; }
  .text-list li { font-size: 1rem; }
  .text-figures { gap: var(--space-2); }
  .contact-details div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .text-table th, .text-table td { padding-right: 1rem; }
  .text-table tbody th { width: 40%; font-size: 1.1875rem; }
  .text-table td { font-size: 1rem; }
  .article-grid-catalog { gap: var(--space-5); }
  .price-section .price-table strong { font-size: 1.25rem; }
  .price-section .price-table td { padding-left: var(--space-2); }
  .price-section .price-table th, .price-section .price-table td { padding-block: .625rem; }
}
@media (max-width: 1023px) {
  .text-toc-long ul { column-count: 2; column-gap: var(--space-3); }
  .text-toc-long li { break-inside: avoid; }
  .text-toc-long a { font-size: .9375rem; }
}
/* Онлайн-запись (BookingDialog): модальное окно на нативном <dialog>. */
html:has(.booking-dialog[open]) { overflow: hidden; }
.booking-dialog { width: min(720px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 24px 64px rgb(32 38 38 / .22); overscroll-behavior: contain; }
.booking-dialog::backdrop { background: rgb(32 38 38 / .55); }
.booking-dialog-inner { position: relative; padding: clamp(1.5rem, 4vw, 2.75rem); }
.booking-dialog h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); margin-bottom: var(--space-2); padding-right: 2.5rem; }
.booking-dialog .eyebrow { margin-bottom: var(--space-1); }
.booking-intro { color: var(--muted); max-width: 34rem; margin-bottom: var(--space-4); }
.booking-close { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.booking-close:hover { background: var(--surface-mint); color: var(--accent); }
.booking-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem var(--space-3); }
.booking-field { display: grid; gap: .375rem; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.booking-field-wide { grid-column: 1 / -1; }
.booking-field > label, .booking-field legend { color: var(--muted); font-size: var(--text-small); line-height: 1.4; }
.booking-field legend { padding: 0; margin-bottom: .375rem; }
.booking-required { color: var(--accent); }
.booking-field input:not([type="radio"], [type="checkbox"]), .booking-field select, .booking-field textarea { width: 100%; min-height: 48px; padding: .625rem .875rem; border: 1px solid #b9c9c4; border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 1rem; line-height: 1.4; }
.booking-field textarea { min-height: 96px; resize: vertical; }
.booking-field input:hover, .booking-field select:hover, .booking-field textarea:hover { border-color: var(--muted); }
.booking-field input:focus-visible, .booking-field select:focus-visible, .booking-field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.booking-field [aria-invalid="true"] { border-color: #b3261e; }
.booking-error { margin: 0; color: #b3261e; font-size: var(--text-small); line-height: 1.4; }
.booking-choice { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.booking-choice legend { width: 100%; }
.booking-choice label, .booking-consent label { display: flex; align-items: flex-start; gap: .625rem; min-height: 32px; cursor: pointer; }
.booking-choice label { align-items: center; }
.booking-choice input, .booking-consent input { flex-shrink: 0; width: 20px; height: 20px; margin: .125rem 0 0; accent-color: var(--accent); }
.booking-choice input { margin: 0; }
.booking-consent label { color: var(--ink); font-size: .875rem; line-height: 1.5; }
.booking-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.booking-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-1); }
.booking-actions .button { min-width: min(250px, 100%); justify-content: center; }
.booking-phone-note { margin: 0; color: var(--muted); font-size: .875rem; }
.booking-phone { color: var(--ink); white-space: nowrap; }
.booking-status { margin: 0; padding: .875rem 1rem; border-left: 3px solid #b3261e; background: #fbefee; font-size: .9375rem; }
.booking-success { outline: none; }
.booking-success p:not(.eyebrow) { max-width: 34rem; }
.booking-success p:not(.eyebrow):not(.booking-phone-note) { font-size: var(--text-lead); }
.booking-success .booking-phone-note { margin-bottom: var(--space-4); }
@media (max-width: 767px) {
  .booking-dialog { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  .booking-form { grid-template-columns: minmax(0, 1fr); }
  .booking-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .booking-dialog[open] { animation: booking-in .22s var(--ease-out); }
  .booking-dialog[open]::backdrop { animation: booking-fade .22s var(--ease-out); }
}
@keyframes booking-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes booking-fade { from { opacity: 0; } }
.contact-page-booking { margin: var(--space-5) 0 0; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--radius); background: var(--surface); }
.contact-page-booking:has(> [hidden]) { display: none; }
.contact-page-booking h2 { margin-bottom: var(--space-2); }

/* Первый экран (D10; на всех шаблонах — D11): текст проявляется один раз при загрузке,
   по очереди через 60 мс. Фото первого экрана и хлебные крошки не анимируются —
   фото крупнейший элемент экрана (LCP). */
@media (prefers-reduced-motion: no-preference) {
  :is(.home-hero-text, .service-hero-text, .catalog-hero-text) > * { animation: hero-in .4s var(--ease-out) both; }
  :is(.home-hero-text, .service-hero-text, .catalog-hero-text) > :nth-child(2) { animation-delay: 60ms; }
  :is(.home-hero-text, .service-hero-text, .catalog-hero-text) > :nth-child(3) { animation-delay: 120ms; }
  :is(.home-hero-text, .service-hero-text, .catalog-hero-text) > :nth-child(4) { animation-delay: 180ms; }
}
@keyframes hero-in { from { opacity: 0; transform: translateY(8px); } }

/* Появление блоков при прокрутке (D10, D11): блоки с data-reveal. Скрывает только
   скрипт Reveal в конце страницы — без JavaScript и при уменьшенном движении всё
   видно сразу. Каждый блок один раз; вошедшие в экран вместе — с шагом 60 мс,
   крупные — 100 мс (--reveal-delay). */
.reveal [data-reveal] { opacity: 0; transform: translateY(16px); }
.reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease-out) var(--reveal-delay, 0ms), transform .6s var(--ease-out) var(--reveal-delay, 0ms);
}
/* Крупные блоки с фото (data-reveal="large"): медленнее и мягче — с резкой кривой
   фото «вспыхивает»; подъём и шаг между карточками больше. */
.reveal [data-reveal='large'] { transform: translateY(24px); }
.reveal [data-reveal='large'].is-revealed {
  transform: none;
  transition: opacity .9s cubic-bezier(.33, 1, .68, 1) var(--reveal-delay, 0ms), transform 1.1s cubic-bezier(.33, 1, .68, 1) var(--reveal-delay, 0ms);
}
@media print { .reveal [data-reveal] { opacity: 1; transform: none; } }

/* Уведомление о cookie (CookieNotice): панель в левом нижнем углу, на телефоне —
   во всю ширину внизу. Страницу не блокирует. */
.cookie-notice { position: fixed; z-index: 40; right: 1rem; bottom: 1rem; left: 1rem; display: flex; align-items: flex-end; gap: var(--space-3); max-width: 44rem; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 12px 40px rgb(32 38 38 / .16); }
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; font-size: var(--text-small); line-height: 1.55; }
.cookie-notice .button { flex: none; justify-content: center; }
@media (max-width: 767px) {
  .cookie-notice { right: 0; bottom: 0; left: 0; flex-direction: column; align-items: stretch; max-height: 60dvh; overflow-y: auto; padding: var(--space-3) 16px calc(var(--space-3) + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 0; }
  .cookie-notice p { font-size: .75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .cookie-notice:not([hidden]) { animation: cookie-in .3s var(--ease-out); }
}
@keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } }
@media print { .cookie-notice { display: none !important; } }