/* Вёрстка секций SheSpace.
 *
 * Значения не выдуманы: это инлайновые стили макета, разобранные в классы.
 * Менять размеры и цвета здесь напрямую не надо — они собраны из токенов
 * (assets/css/tokens.css), и правка токена меняет всё разом, как задумано.
 *
 * Сетки сделаны на auto-fit/minmax, а не на медиазапросах: колонки
 * схлопываются сами, когда им тесно. Медиазапросы оставлены там, где меняется
 * не ширина, а поведение, — и все они стоят на 900px. Это не круглое число
 * «на глаз»: в макете ровно по нему проходит граница narrow, от которой
 * зависят шапка, порядок колонок первого экрана и плавающая кнопка.
 * Вторая граница, 380px, в макете называется tiny и меняет только пропорцию
 * фотографии на первом экране.
 */

/* --- основа ------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--surface-base);
    color: var(--text-body);
    font: var(--type-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; }

a { color: inherit; }

h1, h2, h3 { margin: 0; text-wrap: pretty; }

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--poeder); color: var(--espresso); }

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* Ссылка для тех, кто ходит с клавиатуры: уводит мимо шапки сразу к делу. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--cacao);
    color: var(--ivoor);
    font: var(--type-label);
}
.skip-link:focus { left: 0; }

/* --- типографика общего назначения -------------------------------------- */

/* Компонент Label из артефакта: три тона (taupe по умолчанию, cacao, onDark)
   и два кегля. Заголовки внутри карточек — это тоже он, а не подзаголовок. */
.label {
    margin: 0;
    font: var(--type-label);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-label);
}

.label--caption { font-size: var(--size-caption); }
.label--cacao { color: var(--cacao); }
.label--on-dark { color: var(--text-on-dark-muted); }

.lede {
    font: var(--type-body-lg);
    color: var(--espresso);
    max-width: var(--measure-text);
}

.prose { display: grid; gap: var(--space-6); max-width: var(--measure-text); }

/* Значок в кружке перед заголовком процедуры. В артефакте — IconBadge:
   круг 72px на линнене, внутри картинка 24px. У блока записи он мельче. */
.icoon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-pill);
    background: var(--linnen);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.icoon img { width: 24px; height: auto; display: block; }

.icoon--sm { width: 64px; height: 64px; }
.icoon--sm img { width: 22px; }

/* --- кнопки -------------------------------------------------------------- */

/*
 * Компонент Button из артефакта: РАЗМЕР и ВИД заданы отдельно, как в нём же.
 * Размер по умолчанию — md; --sm нужен только шапке, --lg только первому
 * экрану. Раньше это было перемешано (btn--solid сам задавал крупный отступ),
 * из-за чего одна и та же кнопка на разных экранах была разного роста.
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font: var(--type-label);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition-hover), transform var(--dur-quick) var(--ease-standard);
}

.btn:active { transform: scale(var(--press-scale)); }

.btn--sm { padding: 10px 18px; font-size: var(--size-caption); }
.btn--lg { padding: 18px 34px; }

.btn--solid {
    background: var(--action-bg);
    color: var(--action-fg);
}
.btn--solid:hover { background: var(--action-bg-hover); }
.btn--solid:active { background: var(--action-bg-press); }

.btn--quiet {
    background: transparent;
    color: var(--cacao);
    border-color: var(--action-quiet-border);
}
.btn--quiet:hover { background: var(--linnen); }

/* Подчёркнутая ссылка-кнопка: без рамки и без отступов, только линия снизу. */
.btn--text {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cacao);
    border-bottom: 1px solid var(--line-hairline);
}
.btn--text:hover { border-bottom-color: var(--cacao); }

/* На тёмной подложке: прозрачная со светлой рамкой, на наведении
   выворачивается в светлую с какао-текстом. */
.btn--on-dark {
    background: transparent;
    color: var(--text-on-dark);
    border-color: var(--line-on-dark);
}
.btn--on-dark:hover {
    background: var(--ivoor);
    color: var(--cacao);
}

/* --- шапка --------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--veil-ivory, rgba(254, 253, 249, .88));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-hairline);
}

.site-header__bar {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 12px clamp(16px, 4vw, 32px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
}

.site-header__logo { display: block; flex: 0 0 auto; }
.site-header__logo img { display: block; width: 132px; height: auto; }

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 28px);
}

.site-nav__link {
    font: var(--type-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--taupe);
    text-decoration: none;
    transition: var(--transition-hover);
}
.site-nav__link:hover { color: var(--cacao); }

.burger {
    display: none;
    width: 48px;
    height: 48px;
    place-content: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition-hover);
}
.burger:hover { background: var(--linnen); }
.burger span {
    display: block;
    width: 18px;
    height: 1.25px;
    background: var(--cacao);
    transition: var(--transition-hover), transform var(--dur-quick) var(--ease-standard);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

.site-menu {
    border-top: 1px solid var(--line-hairline);
    background: var(--ivoor);
}
.site-menu[hidden] { display: none; }

.site-menu__inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-4) clamp(16px, 4vw, 32px) var(--space-6);
    display: grid;
    gap: 2px;
}
.site-menu__inner a {
    min-height: 52px;
    display: flex;
    align-items: center;
    font: var(--type-body-lg);
    color: var(--cacao);
    text-decoration: none;
    border-bottom: 1px solid var(--line-hairline);
}
.site-menu__contact {
    font: var(--type-body-sm) !important;
    color: var(--taupe) !important;
    border-bottom: 0 !important;
    overflow-wrap: anywhere;
    padding-top: var(--space-2);
    min-height: 0 !important;
}

@media (max-width: 900px) {
    .site-nav { display: none; }
    .burger { display: grid; }
    .site-header__logo img { width: 116px; }
}

/* --- каркас секций ------------------------------------------------------- */

.section {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 32px);
    scroll-margin-top: 84px;
}

/* Секция-колонка: шапка и содержимое идут одним столбцом с общим зазором.
   В артефакте так собраны «Behandelingen», «Jouw moment» и «Afspraken». */
.section--stack { display: grid; gap: clamp(40px, 6vw, 80px); }

.section--tint, .section--dark { max-width: none; padding: 0; }
.section--tint { background: var(--surface-second); }
.section--dark { background: var(--surface-dark); color: var(--text-on-dark); }

.section--tint > .section__inner,
.section--dark > .section__inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 32px);
}

.section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

/* Компонент SectionHeader: номер и подпись по краям, под ними волосяная
   линия, ниже заголовок. Линия — отдельный элемент, а не рамка заголовка. */
.sec-head { display: grid; gap: var(--space-8); }

.sec-head__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line-hairline);
}

.sec-head__title {
    font: var(--type-h1);
    letter-spacing: var(--tracking-display);
    color: var(--text-heading);
    max-width: 20ch;
}

/* --- картинки ------------------------------------------------------------ */

.media {
    overflow: hidden;
    background: var(--linnen);
    border-radius: var(--arch);
    min-width: 0;
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--poeder { background: var(--poeder); }

/* На тёмной секции подложки не видно, зато нужна светлая рамка. */
.media--outline { background: transparent; border: 1px solid var(--line-on-dark); }

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

.hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    padding-top: clamp(32px, 7vw, 88px);
    padding-bottom: clamp(48px, 7vw, 96px);
}

.hero__text { display: grid; gap: var(--space-8); min-width: 0; }

.hero__title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: clamp(34px, 6.4vw, 80px);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--cacao);
    max-width: 18ch;
    overflow-wrap: break-word;
}

/* Уже обычного lede: в макете первый абзац держит 46ch, чтобы не спорить с
   заголовком по длине строки. */
.hero__lede {
    font: var(--type-body-lg);
    color: var(--espresso);
    max-width: 46ch;
}

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

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line-hairline);
}

.hero__media { position: relative; min-width: 0; }

.hero__photo { aspect-ratio: 4 / 5; }

/* Кольцо ЗА фотографией — та самая «боог», форма-подпись макета.
 *
 * ⚠️ Порядок слоёв задан явно. Абсолютно спозиционированный элемент рисуется
 * поверх обычного соседа, даже если стоит в разметке раньше, поэтому без этих
 * двух z-index кольцо ложилось на лицо мастера. В макете то же самое решено
 * тем, что у карточки с фотографией стоит position: relative. */
.hero__ring {
    position: absolute;
    right: -8%;
    top: -6%;
    width: 62%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-hairline);
    z-index: 0;
}

.hero__media .media {
    position: relative;
    z-index: 1;
}

/*
 * Узкий экран: фотография ВЫШЕ текста. Так в макете (heroImgOrder = 1,
 * heroTextOrder = 2) — страница на телефоне открывается кадром студии.
 * В разметке порядок остаётся логическим, ради чтения с экрана.
 */
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero__media { order: 1; }
    .hero__text { order: 2; gap: var(--space-6); }
    .hero__photo { aspect-ratio: 3 / 2; }
    .hero__ring { display: none; }
}

/* Совсем узкий: горизонтальный кадр становится слишком низким — обратно к 4/5. */
@media (max-width: 380px) {
    .hero__photo { aspect-ratio: 4 / 5; }
}

/* --- процедуры ----------------------------------------------------------- */

.treatments { display: grid; gap: clamp(40px, 6vw, 80px); }

.treatment {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

/* Brow Lift: фотография справа. В разметке она идёт первой у обеих карточек,
   чтобы правило было одно, а не два зеркальных. */
.treatment--mirrored .treatment__media { order: 2; }

.treatment__body {
    display: grid;
    gap: var(--space-6);
    justify-items: start;
    min-width: 0;
}

.treatment__title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: var(--leading-head);
    letter-spacing: var(--tracking-display);
    color: var(--cacao);
}

.treatment__body p {
    font: var(--type-body);
    color: var(--espresso);
    max-width: var(--measure-text);
}

/* Первая строка описания — какао, а не эспрессо: она работает как подзаголовок. */
.treatment__lede {
    font: var(--type-body-lg) !important;
    color: var(--cacao) !important;
    max-width: 34ch !important;
}

/* Список с длинным тире вместо маркера — компонент DashList из артефакта:
   колонка под тире ровно 24px, зазоры по --space-3. */
.points { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.points li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--space-3);
    align-items: start;
    font: var(--type-body);
    color: var(--text-body);
    max-width: var(--measure-text);
}
.points li::before { content: "—"; color: var(--taupe); font: var(--type-body); }

/* size="sm" у DashList — в секции «Prijzen» список набран мельче. */
.points--sm li { font: var(--type-body-sm); }

/* Цена и длительность стоят по базовой линии и БЕЗ разделителя сверху:
   линия здесь была моей отсебятиной, в артефакте её нет. */
.treatment__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4);
    padding-top: var(--space-2);
}
.treatment__amount {
    font: var(--type-price);
    font-variant-numeric: oldstyle-nums;
    color: var(--text-price);
}

/*
 * Панель-арка: круглый верх, прямой низ. В артефакте это ArchPanel, и таких
 * панелей на странице две — «Combinatie» и «Praktisch». На узком экране
 * отступы в макете перестают быть резиновыми и становятся фиксированными
 * (archPad), иначе верхнее поле съедает круглую часть.
 */
.combi,
.practical {
    background: var(--surface-second);
    border-radius: var(--arch-soft);
    padding: clamp(40px, 5vw, 56px) clamp(28px, 3.5vw, 48px) clamp(28px, 3.5vw, 48px);
}

@media (max-width: 900px) {
    .combi, .practical { padding: 56px 32px 36px; }
}

/* Комбинация: две фотографии в одном блоке.
 *
 * ⚠️ Собрано ровно по артефакту (блок «Combinatie» секции Behandelingen).
 * Пудровую подложку и овальные фотографии, которые тут побывали 20.09.2026,
 * я придумал сам, неверно прочитав присланные скриншоты. Не возвращать.
 */
.combi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.combi__body {
    display: grid;
    gap: var(--space-6);
    justify-items: start;
    min-width: 0;
}

.combi__title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: var(--leading-head);
    letter-spacing: var(--tracking-display);
    color: var(--cacao);
}

.combi__text { max-width: var(--measure-text); }

/* Подпись над значением, без линии: в артефакте это обычный столбик с
   минимальным зазором, а не строка с разделителем. */
.combi__price { display: grid; gap: var(--space-1); }

.combi__amount {
    font: var(--type-body-lg);
    color: var(--cacao);
}

.combi__media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    min-width: 0;
}

.combi__media .media {
    aspect-ratio: 4 / 5;
    border-radius: var(--arch);
    background: var(--poeder);
}

/* Правая фотография прижата к низу — из-за этого пара стоит уступом. */
.combi__media .media:last-child { align-self: end; }

/* --- прайс --------------------------------------------------------------- */

/*
 * Левая колонка: шапка секции и заметки. Важно, что шапка стоит ВНУТРИ
 * колонки — тогда её линия идёт только по своей половине, как в артефакте,
 * а не через всю страницу.
 */
.pricing__intro {
    display: grid;
    gap: var(--space-8);
    align-content: start;
}

/* Правая колонка: строки прайса начинаются от самого верха, вровень с шапкой. */
.pricing__list { display: grid; align-content: start; }

.pricing__list .btn {
    justify-self: start;
    margin-top: var(--space-8);
}

/* Компонент PriceRow из артефакта, значения оттуда же. */
.price-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: var(--space-8);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--line-hairline);
}

.price-row__name { font: var(--type-body); color: var(--text-body); }
.price-row__dur { font: var(--type-body-sm); color: var(--text-muted); }

.price-row__amount {
    font: var(--type-price);
    /* Старостильные цифры: в антикве они разной высоты и стоят в строке
       спокойнее, чем «плакатные». Так набрана цена и в артефакте. */
    font-variant-numeric: oldstyle-nums;
    color: var(--text-price);
    min-width: 74px;
    text-align: right;
}

/*
 * Узкий экран: название и длительность столбиком слева, цена справа.
 *
 * ⚠️ Раньше здесь `.price-row__dur` растягивался на обе колонки — и выбивал
 * цену на ТРЕТЬЮ строку, под длительность. Получалось три этажа вместо двух,
 * и цена висела сама по себе. Поэтому сетка задана именами областей: так
 * видно, что цена занимает обе строки и стоит рядом с услугой, а не под ней.
 */
@media (max-width: 560px) {
    .price-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name  price"
            "dur   price";
        gap: var(--space-1) var(--space-4);
        align-items: baseline;
    }
    .price-row__name { grid-area: name; }
    .price-row__dur { grid-area: dur; }
    .price-row__amount { grid-area: price; align-self: center; }
}

/* --- добро пожаловать ---------------------------------------------------- */

.welkom__body { display: grid; gap: var(--space-10); align-content: start; }
.welkom__cta { justify-self: start; }

/* --- твой момент --------------------------------------------------------- */

/*
 * Секция и обе карточки собраны по компонентам артефакта: NumberedCard и
 * QuoteCard, оба поверх общего Card. Значения — из них, не на глаз.
 */
.moment { display: grid; gap: clamp(32px, 5vw, 56px); }

.moment__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--gap-card);
}

/*
 * NumberedCard = Card(surface="linnen", arch, pad="lg").
 * Отсюда линнен-подложка, мягкая арка сверху и НИ рамки, ни тени: тень в
 * этой системе положена только карточкам на ivoor.
 *
 * ⚠️ Номер стоит НАД заголовком, одной колонкой, на всех ширинах.
 *
 * В макете так собран только узкий вариант, а на широком номер вынесен в
 * колонку 80px слева. На широком это и разъезжалось, и вот почему: арка
 * скруглена сверху на 140px, то есть на высоте 48px от верха край карточки
 * проходит по x≈34px. Номер в левой колонке попадал ровно в эту дугу и
 * выглядел висящим снаружи карточки.
 *
 * Геометрия дуги от ширины не зависит (140+140 меньше любой нашей колонки),
 * поэтому узкий вариант макета — `48px 32px 32px`, зазор --space-3, номер в
 * «короне» — одинаково верен и на телефоне, и на мониторе. Значения сняты с
 * самого макета, не подобраны.
 */
.numbered-card {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: 48px var(--pad-card-lg) var(--pad-card-lg);
    background: var(--surface-second);
    color: var(--text-body);
    border: 1px solid transparent;
    border-radius: var(--arch-soft);
    box-shadow: var(--shadow-none);
}

.numbered-card__num {
    font: var(--type-h2);
    font-variant-numeric: oldstyle-nums;
    color: var(--taupe);
}

.numbered-card__body { display: grid; gap: var(--space-2); }

/* Заголовок карточки — это Label с тоном cacao, а не обычный подзаголовок. */
.numbered-card__title { color: var(--cacao); }

.numbered-card__text {
    font: var(--type-body);
    color: var(--text-body);
    max-width: var(--measure-narrow);
}

/*
 * QuoteCard = Card(pad="lg") на ivoor: светлая карточка с тенью, две колонки,
 * подпись слева. Тёмного блока по центру, который тут был, в артефакте нет.
 */
.quote {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: var(--space-6);
    align-items: start;
    padding: var(--pad-card-lg);
    background: var(--surface-card);
    color: var(--text-body);
    border: 1px solid transparent;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

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

.quote__text {
    margin: 0;
    font: var(--type-h2);
    color: var(--text-heading);
}

.quote__note {
    font: var(--type-body-sm);
    color: var(--text-body);
}

/* Узкий экран: колонка под подпись цитаты съедает половину ширины. */
@media (max-width: 900px) {
    .quote {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }
}

/* --- первый раз ---------------------------------------------------------- */

.first-time {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.first-time__body {
    display: grid;
    gap: var(--space-8);
    justify-items: start;
    min-width: 0;
}

.first-time__title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: var(--leading-head);
    letter-spacing: var(--tracking-display);
    color: var(--ivoor);
    max-width: 22ch;
}

/* Первый абзац — светлый и крупный, второй приглушён и мельче. В артефакте
   это разные роли: обещание и примечание. */
.first-time__lede {
    font: var(--type-body-lg);
    color: var(--text-on-dark);
    max-width: 52ch;
}
.first-time__note {
    font: var(--type-body);
    color: var(--text-on-dark-muted);
    max-width: 52ch;
}

.first-time__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

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

.booking { display: grid; gap: clamp(32px, 5vw, 56px); }

/*
 * В макете колонки равные. У нас левая шире: там стоит настоящая форма
 * Bookly, а она заметно шире нарисованной — в половину страницы её шаги
 * не ложатся. Всё остальное в секции собрано по артефакту.
 */
.booking__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

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

/* Карточка формы — белая с мягкой тенью, без рамки: рамка и тень вместе в
   этой системе не встречаются. */
.booking__form {
    background: var(--surface-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: clamp(20px, 3vw, 32px);
    min-width: 0;
}

.booking__aside {
    display: grid;
    gap: var(--space-8);
    align-content: start;
    min-width: 0;
}

.practical {
    display: grid;
    gap: var(--space-8);
    justify-items: start;
}

.practical__lines {
    display: grid;
    gap: var(--space-4);
    width: 100%;
    min-width: 0;
    justify-items: start;
    font: var(--type-body);
    color: var(--espresso);
}
.practical__lines a {
    color: var(--cacao);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: var(--transition-hover);
}
.practical__lines a:hover { color: var(--espresso); }

.booking__note {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
}
.booking__note p {
    font: var(--type-body);
    color: var(--espresso);
    max-width: 42ch;
}

/* --- страница «Bedankt» -------------------------------------------------- */

/*
 * Страница после записи и оплаты. Собрана из того же, что и остальные секции:
 * шапка блока, список с тире и панель-арка «Studio» — человек попадает сюда
 * прямо из формы, и узнавать страницу он должен сразу.
 */
.thanks { display: grid; gap: clamp(32px, 5vw, 56px); }

.thanks__head {
    display: grid;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--line-hairline);
}

.thanks__title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: var(--leading-head);
    letter-spacing: var(--tracking-display);
    color: var(--cacao);
    max-width: 20ch;
}

.thanks__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(32px, 5vw, 56px);
    align-items: start;
}

.thanks__body {
    display: grid;
    gap: var(--space-6);
    align-content: start;
    justify-items: start;
    min-width: 0;
}

.thanks__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

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

.site-footer {
    background: var(--surface-dark);
    color: var(--text-on-dark);
    scroll-margin-top: 84px;
}

.site-footer__inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 32px) clamp(28px, 4vw, 40px);
    display: grid;
    gap: clamp(32px, 5vw, 56px);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.site-footer__brand {
    display: grid;
    gap: var(--space-6);
    justify-items: start;
    min-width: 0;
}
.site-footer__brand img { display: block; width: 180px; max-width: 100%; height: auto; }

.site-footer__tagline {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: var(--leading-head);
    color: var(--ivoor);
}

.site-footer__col {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    min-width: 0;
}
.site-footer__col--contact { gap: var(--space-5); }

.site-footer__address {
    font: var(--type-body);
    font-style: normal;
    color: var(--ivoor);
}

/*
 * Кнопки WhatsApp и Instagram. Первая заливная светлая, вторая прозрачная со
 * светлой рамкой — так в артефакте расставлены приоритеты: писать предлагают
 * в WhatsApp, инстаграм рядом как витрина. Высота 48px обеим, чтобы попадать
 * пальцем.
 */
.channel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: 10px 18px 10px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    text-decoration: none;
    transition: var(--transition-hover);
}
.channel svg { flex: 0 0 auto; }
.channel span {
    font: var(--type-label);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.channel--solid { background: var(--ivoor); color: var(--cacao); }
.channel--solid:hover { background: var(--linnen); }

.channel--outline {
    background: transparent;
    color: var(--ivoor);
    border-color: var(--line-on-dark);
}
.channel--outline:hover { background: rgba(254, 253, 249, .10); }

.site-footer__channels { display: grid; gap: var(--space-3); justify-items: start; }

.site-footer__lines {
    font: var(--type-body);
    color: var(--ivoor);
    overflow-wrap: anywhere;
}

.site-footer__links {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    font: var(--type-body);
    color: var(--ivoor);
}

.site-footer__lines a,
.site-footer__links a {
    color: var(--ivoor);
    text-decoration: none;
    border-bottom: 1px solid var(--line-on-dark);
    transition: var(--transition-hover);
}
.site-footer__lines a:hover,
.site-footer__links a:hover { border-bottom-color: var(--ivoor); }

.site-footer__legal {
    border-top: 1px solid var(--line-on-dark);
    padding-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    justify-content: space-between;
    align-items: center;
}

.site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
}

.site-footer__legal-links a,
.site-footer__legal-btn {
    font: var(--type-label);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ivoor);
    text-decoration: none;
    border: 0;
    border-bottom: 1px solid var(--line-on-dark);
    background: none;
    padding: 0;
    cursor: pointer;
    transition: var(--transition-hover);
}
.site-footer__legal-links a:hover,
.site-footer__legal-btn:hover { border-bottom-color: var(--ivoor); }

/* --- плавающая кнопка записи --------------------------------------------- */

/*
 * Только для узкого экрана: на широком кнопка и так висит в шапке.
 * Появляется, когда первый экран ушёл вверх, — до этого она соревновалась бы
 * с той же кнопкой в самом первом экране.
 *
 * Распорка нужна, чтобы полоса не накрывала собой последние строки подвала:
 * элемент position:fixed из потока выпадает, и без неё низ страницы всегда
 * остаётся недочитанным.
 */
.cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 19;
    background: rgba(254, 253, 249, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-hairline);
    padding: var(--space-3) clamp(16px, 4vw, 32px) var(--space-4);
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
}
.cta-bar[hidden] { display: none; }

.cta-bar.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.cta-bar__btn { width: 100%; min-height: 52px; }

.cta-bar__spacer { height: 0; transition: height var(--dur-base) var(--ease-standard); }
.cta-bar__spacer.is-active { height: 84px; }

/* Пока открыт баннер согласия, полосы нет: две панели друг на друге внизу
   экрана выглядят поломкой, а выбор про куки важнее кнопки. */
.cta-bar.is-muted { display: none; }

@media (prefers-reduced-motion: reduce) {
    .cta-bar, .cta-bar__spacer { transition: none; }
    html { scroll-behavior: auto; }
}

/* --- обычная страница (Privacybeleid) ------------------------------------ */

.page-body {
    max-width: var(--measure-text);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 32px);
    display: grid;
    gap: var(--space-6);
}
.page-body h1 {
    font: var(--type-h1);
    letter-spacing: var(--tracking-display);
    color: var(--text-heading);
}
.page-body h2 { font: var(--type-h2); color: var(--text-heading); padding-top: var(--space-6); }
.page-body h3 { font: var(--type-h3); color: var(--text-heading); }
.page-body p, .page-body li { font: var(--type-body); color: var(--espresso); }
.page-body ul, .page-body ol { display: grid; gap: var(--space-2); padding-left: var(--space-6); }
.page-body a { color: var(--cacao); }

.notice {
    padding: var(--space-4) var(--space-6);
    border-left: 3px solid var(--cacao);
    background: var(--linnen);
    font: var(--type-body);
}

/* --- баннер согласия ----------------------------------------------------- */

/* Снизу, не на весь экран, без затемнения: закрывать собой сайт ради вопроса
   про один пиксель — это ровно то поведение, за которое баннеры не любят. */
.consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--ivoor);
    border-top: 1px solid var(--line-strong);
    box-shadow: var(--shadow-raised);
}
.consent[hidden] { display: none; }

.consent__inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-6) clamp(20px, 5vw, 32px);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    justify-content: space-between;
}

.consent__text { max-width: 68ch; font: var(--type-body-sm); color: var(--espresso); }
.consent__title {
    font: var(--type-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--cacao);
    margin-bottom: var(--space-2);
}
.consent__text a { color: var(--cacao); }

/* Кнопки одного размера и веса: «Weigeren» не должна выглядеть как отговорка. */
.consent__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }