:root {
    --cream: #f7f1e6;
    --cream-dark: #ece1cd;
    --chocolate: #4a2c1d;
    --chocolate-soft: #6b4127;
    --accent: #a9642f;
    --choc-bg: #79290e;
    --choc-bg-deep: #5c1f0a;
    --on-choc: #f7ead9;
    --on-choc-soft: #e4b79a;

    --font-display: 'Amatic SC', -apple-system, sans-serif;
    --font-body: 'Cabin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 200ms;
    --dur-base: 400ms;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--chocolate);
    overflow-x: hidden;
}

section[id],
footer[id] {
    scroll-margin-top: 72px;
}

a {
    cursor: pointer;
}

/* ---------- Icons ---------- */

.icon {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.15em;
}

/* ---------- Header ---------- */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    padding: var(--space-2) var(--space-3);
    transition: background-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
    background: rgba(247, 241, 230, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(74, 44, 29, 0.08);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--chocolate);
}

.site-header__logo-mark {
    height: 1.1em;
    width: auto;
    margin: 0 0.02em;
    transform: translateY(0.05em);
    transition: filter var(--dur-base) var(--ease-out);
}

/* ---------- Burger button ---------- */

.burger {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    z-index: 31;
}

.burger__line {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--chocolate);
    border-radius: 1px;
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.burger[aria-expanded="true"] .burger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__line:nth-child(2) {
    opacity: 0;
}

.burger[aria-expanded="true"] .burger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Mobile menu ---------- */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: var(--choc-bg-deep);
    color: var(--on-choc);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* flex-start, а не center: при justify-content:center браузер центрирует
       группу (список + кнопка + телефон) относительно всей высоты экрана, и
       если группа выше доступного места (7 пунктов меню на невысоких
       телефонах — 667-780px), верхняя часть "перетекает" выше видимой
       области и становится недоступна прокруткой вверх (scrollTop не может
       уйти в минус) — именно из-за этого пункты меню оказывались вплотную
       к лого. flex-start + padding-top ниже — гарантированный, предсказуемый
       отступ под шапкой на любой высоте экрана. */
    justify-content: flex-start;
    gap: var(--space-4);
    padding: 120px var(--space-3) var(--space-3);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}

/* На невысоких экранах (многие Android, iPhone SE) 7 пунктов меню даже с
   отступом выше всё ещё впритык — дополнительно сжимаем шрифт и зазоры,
   не трогая обычные (более высокие) экраны. */
@media (max-height: 700px) {
    .mobile-menu {
        padding-top: 96px;
        gap: var(--space-3);
    }
    .mobile-menu__list {
        gap: var(--space-1);
    }
    .mobile-menu__link {
        font-size: 1.85rem;
    }
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.mobile-menu__link {
    color: var(--on-choc);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    padding: var(--space-1) var(--space-2);
    transition: color var(--dur-fast) var(--ease-out);
}

.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
    color: var(--accent);
}

.mobile-menu__phone {
    color: var(--on-choc-soft);
    text-decoration: none;
    font-size: 1.1rem;
    padding: var(--space-2);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

body.menu-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu {
        transition: opacity var(--dur-fast) linear, visibility 0s linear;
    }
}

.site-header__logo-accent {
    color: var(--accent);
}

/* Шапка прозрачна, пока не проскроллили (.is-scrolled) — при открытом
   бургер-меню тёмный лого/крестик сливались бы с тёмным фоном оверлея,
   поэтому на время открытого меню перекрашиваем их в светлый. */
body.nav-open .site-header__logo {
    color: var(--on-choc);
}

body.nav-open .burger__line {
    background: var(--on-choc);
}

/* logo.png — сплошной тёмно-коричневый силуэт на прозрачном фоне, поэтому
   его можно перекрасить в белый чистым CSS-фильтром, без второй картинки. */
body.nav-open .site-header__logo-mark {
    filter: brightness(0) invert(1);
}

/* Шапка (z-index 30) всегда поверх бургер-меню (z-index 25) — если меню
   открыли уже после скролла, кремовый фон .is-scrolled просвечивает
   светлой полосой поверх тёмного оверлея. Пока меню открыто, фон шапки
   принудительно убираем — независимо от прокрутки. */
body.nav-open .site-header.is-scrolled {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.mobile-menu__cta {
    appearance: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent);
    color: var(--on-choc);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    padding: 0 var(--space-4);
    min-height: 52px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.mobile-menu__cta:hover,
.mobile-menu__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.mobile-menu__cta .icon {
    width: 1.15em;
    height: 1.15em;
}

/* ---------- Floating call button ---------- */

.call-fab {
    position: fixed;
    right: var(--space-3);
    bottom: var(--space-3);
    z-index: 29;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--on-choc);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0 var(--space-3);
    min-height: 48px;
    border-radius: 999px;
    opacity: 0.88;
    box-shadow: 0 8px 20px rgba(74, 44, 29, 0.28);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.call-fab:hover,
.call-fab:focus-visible {
    opacity: 1;
    box-shadow: 0 10px 24px rgba(74, 44, 29, 0.36);
}

.call-fab .icon {
    width: 1.2em;
    height: 1.2em;
}

.call-fab.is-hidden,
body.menu-open .call-fab {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
    pointer-events: none;
}

@media (max-width: 479.98px) {
    .call-fab__text {
        display: none;
    }
    .call-fab {
        width: 48px;
        padding: 0;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .call-fab {
        transition: opacity var(--dur-fast) linear;
    }
}

/* ---------- Hero ---------- */

.intro {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 108px var(--space-3) var(--space-5);
    min-height: 44vh;
}

.intro__inner {
    max-width: 640px;
}

.intro__title {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 9vw, 4.75rem);
    line-height: 1.05;
    margin: 0 0 var(--space-2);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.intro__subtitle {
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--chocolate-soft);
    margin: 0 0 var(--space-3);
}

.intro__scroll-hint {
    font-size: 0.9rem;
    color: var(--accent);
    animation: bob 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .flavors__photo img {
        transition: none;
    }
    .dip-picker {
        transition: opacity var(--dur-fast) linear;
    }
}

/* ---------- Dip-in-chocolate popover (окно выбора шоколада) ---------- */

.dip-picker {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 5;
    background: var(--cream);
    border-radius: 16px;
    padding: var(--space-2) var(--space-3) var(--space-3);
    box-shadow: 0 16px 32px rgba(74, 44, 29, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}

.dip-picker.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.dip-picker__title {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--chocolate-soft);
    text-align: center;
    white-space: nowrap;
}

.dip-picker__options {
    display: flex;
    gap: var(--space-2);
}

.dip-picker__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.dip-picker__swatch {
    appearance: none;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(74, 44, 29, 0.12);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.dip-picker__swatch:hover,
.dip-picker__swatch:focus-visible {
    transform: scale(1.12);
    box-shadow: inset 0 0 0 2px rgba(74, 44, 29, 0.12), 0 0 0 3px var(--accent);
}

.dip-picker__swatch--white {
    background: #f7ead9;
    border: 1px solid rgba(74, 44, 29, 0.15);
}

.dip-picker__swatch--milk {
    background: #8a5a34;
}

.dip-picker__swatch--dark {
    background: #3d2210;
}

.dip-picker__option span {
    font-size: 0.72rem;
    color: var(--chocolate-soft);
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ---------- Scroll-scrub animation ---------- */

.eskimo-scroll {
    position: relative;
    /* dvh, не vh — на мобильных vh считается по максимальной высоте экрана
       (без адресной строки), а window.innerHeight в JS меняется вместе с её
       появлением/скрытием. Из-за рассинхрона расчёт кадра «плыл» у конца
       ролика. dvh отслеживает реальный видимый вьюпорт так же, как innerHeight.
       600dvh — контейнер под скраб кадров (реальная дистанция прокрутки тут
       на 100dvh меньше — высота вьюпорта вычитается в scroll-scrub.js), +
       17dvh сверху — запас под шторку .steps: на последнем кадре шоколадная
       лужа занимает нижние ~20% кадра, ровно на эту высоту .steps и наезжает
       снизу, закрывая только лужу (мороженое над ней остаётся видно), не
       доезжая до верха экрана. Высоту секции JS читает динамически через
       getBoundingClientRect, вручную синхронизировать нужно только 19dvh
       (см. margin-top у .steps и revealBuffer в scroll-scrub.js). Только
       для мобильного видео (квадратные кадры milk/) — у него в кадре видна
       лужа, которую нужно закрыть. Десктопное видео (milk_wide/, кадры
       16:9) устроено иначе — там макание уходит за нижний край кадра и
       лужи не видно вообще, поэтому шторка не нужна: см. override высоты
       без запаса в @media (min-width: 1024px) ниже. */
    /* 430dvh (не 600dvh) — на мобильном короче дистанция скраба, чтобы
       окунание мороженого в шоколад ощущалось быстрее при том же плавном
       сглаживании в scroll-scrub.js. Десктоп переопределяет на 600dvh ниже. */
    height: calc(430dvh + 19dvh);
    background: var(--cream);
}

.eskimo-scroll__sticky {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.eskimo-scroll__canvas {
    /* Мобильные кадры (milk/) квадратные — всегда заполняет высоту вьюпорта
       целиком (без зазоров сверху/снизу — именно там раньше был разрыв перед
       тёмным блоком). На узких/портретных экранах это шире вьюпорта — лишнее
       по бокам обрезается overflow:hidden на .eskimo-scroll__sticky, а по
       бокам у сюжета достаточно запаса. На десктопе (min-width: 1024px)
       используются широкоформатные кадры (milk_wide/, 16:9) — см. override
       ниже в @media. */
    width: 100dvh;
    height: 100dvh;
    display: block;
}

.eskimo-loader {
    position: absolute;
    left: 50%;
    bottom: var(--space-3);
    transform: translateX(-50%);
    width: min(240px, 60vw);
    height: 3px;
    background: rgba(74, 44, 29, 0.15);
    border-radius: 2px;
    overflow: hidden;
    transition: opacity var(--dur-base) var(--ease-out);
}

.eskimo-loader.is-done {
    opacity: 0;
    pointer-events: none;
}

.eskimo-loader__bar {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 150ms linear;
}

/* ---------- Scroll-reveal ---------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(42px) scale(0.97);
    transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        transition: none;
        transform: none;
    }
    .intro__scroll-hint {
        animation: none;
    }
}

/* ---------- Steps (сразу после анимации — фон = цвет шоколада из финального кадра,
   для бесшовного перехода) ---------- */

.steps {
    background: var(--choc-bg);
    color: var(--on-choc);
    padding: var(--space-5) var(--space-3) var(--space-7);
    margin-top: -19dvh;
    position: relative;
    z-index: 1;
}

.steps__inner {
    max-width: 720px;
    margin: 0 auto;
}

.steps__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 var(--space-6);
}

.steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.steps__item {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

.steps__num {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(247, 234, 217, 0.12);
    border: 1px solid rgba(247, 234, 217, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.steps__item:hover .steps__num {
    background: rgba(247, 234, 217, 0.22);
    transform: scale(1.08);
}

.steps__item h3 {
    margin: 4px 0 6px;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.steps__icon {
    width: 1.2em;
    height: 1.2em;
    color: var(--on-choc-soft);
    flex: none;
}

.steps__item p {
    margin: 0;
    color: var(--on-choc-soft);
    line-height: 1.5;
}

/* ---------- Stand photo ---------- */

.stand {
    background: var(--cream);
    padding: var(--space-6) var(--space-3);
    text-align: center;
}

.stand__inner {
    max-width: 420px;
    margin: 0 auto;
}

.stand__img {
    width: 100%;
    max-width: 340px;
    height: auto;
}

.stand__caption {
    margin: var(--space-3) 0 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--chocolate-soft);
}

.stand__cta {
    appearance: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-4);
    background: var(--accent);
    color: var(--on-choc);
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0 var(--space-4);
    min-height: 56px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(74, 44, 29, 0.2);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.stand__cta:hover,
.stand__cta:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(74, 44, 29, 0.28);
}

.stand__cta .icon {
    width: 1.2em;
    height: 1.2em;
}

/* ---------- About ---------- */

.about {
    background: var(--cream);
    padding: var(--space-7) var(--space-3);
}

.about__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.about__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 var(--space-6);
}

/* 3 карточки (не 4, как раньше) — ровно 3 в ряд на десктопе, без auto-fit:
   с нечётным числом карточек auto-fit на средних ширинах давал бы 2 в ряд
   и одну "сиротой" слева на третьей строке. Ниже 768px — просто в столбец. */
.about__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

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

/* Карточка теперь всегда с фото и видимым фоном (не только на hover, как
   раньше) — на тач-устройствах hover не срабатывает вообще, и карточки
   выглядели просто "голым" текстом на фоне секции. */
.about__card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: var(--cream-dark);
    box-shadow: 0 10px 24px rgba(74, 44, 29, 0.08);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.about__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(74, 44, 29, 0.16);
}

.about__card-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.about__card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ease-out);
}

.about__card:hover .about__card-media img {
    transform: scale(1.06);
}

.about__card-body {
    padding: var(--space-3);
}

/* Все 3 заголовка теперь короткие и однострочные — прежний min-height-хак
   под перенос строки больше не нужен. */
.about__card h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

.about__icon {
    width: 1.3em;
    height: 1.3em;
    flex: none;
}

.about__card p {
    margin: 0;
    color: var(--chocolate-soft);
    line-height: 1.55;
}

/* ---------- Flavors ---------- */

.flavors {
    background: var(--cream-dark);
    padding: var(--space-7) var(--space-3);
    text-align: center;
}

/* 1080px хватало на 5 карточек в ряд, но не на все 7 (7×170px + 6 зазоров
   по 24px = 1334px) — на широких экранах ряд рвался на 2 строки, хотя место
   было. 1400px — впритык с запасом под все 7. */
.flavors__inner {
    max-width: 1400px;
    margin: 0 auto;
}

.flavors__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 700;
    margin: 0 0 var(--space-1);
}

.flavors__subtitle {
    color: var(--chocolate-soft);
    margin: 0 0 var(--space-6);
}

/* Flex, а не Grid: при переносе строк justify-content применяется к каждой
   строке независимо, поэтому неполный последний ряд (например, 2 карточки
   из 7) оказывается по центру, а не прижат к левому краю, как было бы в
   CSS Grid с auto-fit. */
.flavors__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--space-3);
    row-gap: var(--space-4);
    text-align: center;
}

/* Flex-контейнер по умолчанию растягивает элементы одной строки по высоте
   (align-items: stretch) — этим и пользуемся: .flavors__cell в одной строке
   получают одинаковую высоту без JS-измерений, а margin-top: auto на обёртке
   кнопки (см. ниже) прижимает её к нижнему краю — так кнопки у карточек с разной
   длиной названия оказываются на одном уровне. flex: 0 0 170px — жёстко
   фиксированная ширина (не растягивается и не сжимается), иначе карточки
   в неполном последнем ряду расползлись бы шире остальных. */
.flavors__cell {
    display: flex;
    flex-direction: column;
    flex: 0 0 170px;
    gap: var(--space-2);
}

/* Обёртка вокруг кнопки нужна для позиционирования .dip-picker (position:
   absolute отсчитывается от неё, а не от всей карточки) и чтобы margin-top:
   auto по-прежнему прижимал кнопку к нижнему краю растянутой ячейки. */
.flavors__dip-wrap {
    position: relative;
    margin-top: auto;
    text-align: center;
}

.flavors__dip-btn {
    appearance: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--on-choc);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(74, 44, 29, 0.25);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.flavors__dip-btn:hover,
.flavors__dip-btn:focus-visible {
    background: var(--chocolate);
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(74, 44, 29, 0.32);
}

.flavors__dip-btn .icon {
    width: 1.7em;
    height: 1.7em;
}

/* Карточка без рамки/подложки — просто фото эскимо на палочке (палочка уже
   нарисована на фото) и название под ним на фоне секции. Крутится и уезжает
   при окунании только фото (--dip-y/--dip-rot на .flavors__photo img, см.
   scroll-scrub.js) — название неподвижно и не меняется. */
.flavors__card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flavors__photo {
    width: 100%;
    max-width: 108px;
    margin: 0 0 var(--space-2);
}

/* Фото «шариков» — надкушенное эскимо, само по себе шире/приземистее
   (пропорции ширина:высота ~0.39-0.42), чем прямые «палочки» у остальных
   вкусов (~0.29) — при одинаковом max-width оно получалось заметно короче
   и мельче остальных в ряду. Раздвигаем именно этой карточке ширину, чтобы
   высота фото совпадала с соседями (см. .flavors__card h3 — там их имена
   и так уже разной длины, лишняя ширина фото на сетку не влияет). */
.flavors__card--balls .flavors__photo {
    max-width: 148px;
}

/* Клип-зона под анимацию окунания: фото на 1100ms уезжает вниз за счёт
   translateY(var(--dip-y)) и прячется здесь. Буфер по краям — под hover
   (фото на hover чуть увеличивается и приподнимается, без буфера её край
   обрезался бы этой же клип-зоной). */
.flavors__dip-zone {
    overflow: hidden;
    margin: -14px;
    padding: 14px;
}

.flavors__photo img {
    display: block;
    width: 100%;
    height: auto;
    transform: translateY(var(--dip-y, 0px)) rotate(var(--dip-rot, 0deg));
    transition: transform 1100ms var(--ease-out);
}

.flavors__photo img:hover {
    transform: translateY(calc(-6px + var(--dip-y, 0px))) rotate(var(--dip-rot, 0deg)) scale(1.05);
}

.flavors__card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--chocolate);
}

/* На мобильном — та же карточка, просто по 2 в ряд вместо auto-fit, так
   фото не растягивается в широкую плашку. */
@media (max-width: 767.98px) {
    .flavors__grid {
        column-gap: var(--space-2);
        row-gap: var(--space-3);
    }
    .flavors__cell {
        flex-basis: 130px;
    }
    .flavors__photo {
        max-width: 84px;
    }
    .flavors__card--balls .flavors__photo {
        max-width: 115px;
    }
    .flavors__card h3 {
        font-size: 1.3rem;
    }
    .flavors__dip-btn {
        font-size: 0.8rem;
        padding: 8px 16px;
    }
}

/* ---------- Partners ---------- */

.partners {
    background: var(--cream);
    padding: var(--space-6) var(--space-3);
    text-align: center;
}

.partners__inner {
    max-width: 960px;
    margin: 0 auto;
}

.partners__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 700;
    margin: 0 0 var(--space-1);
}

.partners__subtitle {
    color: var(--chocolate-soft);
    margin: 0 0 var(--space-5);
}

/* "Облако" из названий вразнобой: строго Cabin (--font-body), а не декоративный
   Amatic SC — на мелких кеглях рукописный шрифт плохо читает названия брендов.
   Разброс размеров/начертаний задаётся модификаторами --xl/--lg/--md/--sm,
   порядок в разметке специально перемешан (не по убыванию величины), чтобы
   крупные и мелкие имена соседствовали, а не группировались по размеру. */
.partners__cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
}

.partners__item {
    font-family: var(--font-body);
    color: var(--chocolate);
    white-space: nowrap;
    line-height: 1.15;
}

.partners__item--xl {
    font-size: clamp(2.1rem, 4.8vw, 3rem);
    font-weight: 700;
}

.partners__item--lg {
    font-size: clamp(1.65rem, 3.6vw, 2.2rem);
    font-weight: 700;
}

.partners__item--md {
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
    font-weight: 600;
    color: var(--chocolate-soft);
}

.partners__item--sm {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--chocolate-soft);
}

/* Не название компании, а закрывающая ремарка — курсив и обычная (не жирная)
   насыщенность отличают её от реальных брендов в облаке, white-space не
   зажат в nowrap, чтобы на мобильном при необходимости перенеслась. */
.partners__item--more {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    font-weight: 500;
    font-style: italic;
    color: var(--chocolate-soft);
    white-space: normal;
}

@media (max-width: 767.98px) {
    .partners__cloud {
        column-gap: var(--space-3);
    }
}

/* ---------- Gallery (photos) ---------- */

.gallery {
    background: var(--cream);
    padding: var(--space-7) var(--space-3);
}

.gallery__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.gallery__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 var(--space-1);
}

.gallery__subtitle {
    color: var(--chocolate-soft);
    text-align: center;
    margin: 0 0 var(--space-6);
}

/* "Паровозик" — карточки вперемешку по формату и качеству, сетка это только
   подчёркивала. Центральный слайд крупный и чёткий, соседи по бокам меньше
   и полупрозрачные, дальше — ещё меньше и почти невидимы (задаётся в JS
   через --n = расстояние слайда от текущего, знаковое). Позиционирование —
   все слайды наложены друг на друга (position:absolute, left:50%), сдвиг и
   масштаб каждого — через transform, который JS пересчитывает при смене
   индекса. */
.gallery__carousel {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.gallery__viewport {
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}

.gallery__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery__slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: 58%;
    height: 100%;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--cream-dark);
    box-shadow: 0 16px 32px rgba(74, 44, 29, 0.2);
    cursor: pointer;
    transition: transform 500ms var(--ease-out), opacity 500ms var(--ease-out);
}

.gallery__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

/* Тонкая полоса под каруселью — сколько осталось до автоперелистывания. JS
   снимает и вешает анимацию заново при каждой смене слайда (вручную или по
   таймеру), поэтому она всегда стартует с нуля, а не продолжает предыдущий
   цикл. */
.gallery__progress-track {
    max-width: 240px;
    height: 3px;
    margin: var(--space-3) auto 0;
    border-radius: 999px;
    background: var(--cream-dark);
    overflow: hidden;
}

.gallery__progress {
    height: 100%;
    width: 0%;
    background: var(--accent);
}

@keyframes gallery-progress {
    from { width: 0%; }
    to { width: 100%; }
}

.gallery__arrow {
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    border-radius: 50%;
    background: rgba(247, 241, 230, 0.9);
    color: var(--chocolate);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(74, 44, 29, 0.25);
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.gallery__arrow:hover,
.gallery__arrow:focus-visible {
    background: var(--cream);
    transform: translateY(-50%) scale(1.08);
}

.gallery__arrow--prev {
    left: 0;
}

.gallery__arrow--next {
    right: 0;
}

.gallery__arrow--next .icon {
    transform: rotate(180deg);
}

.gallery__counter {
    text-align: center;
    margin-top: var(--space-1);
    color: var(--chocolate-soft);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* На мобильном коверфлоу почти без боковых полей (стрелки почти впритык к
   краю, слегка наезжая на фото) — иначе на узком экране это же соотношение
   отступ/картинка съедало половину ширины впустую. Слайд шире (86%), формат
   ближе к квадрату (4/3 вместо 2/1 у десктопа) — фото и по ширине, и по
   высоте ощутимо крупнее. Шаг/масштаб/прозрачность соседей десктопа не
   трогаем — на мобильном для них отдельные, более сжатые константы в JS. */
@media (max-width: 767.98px) {
    .gallery__carousel {
        padding: 0 22px;
    }
    .gallery__viewport {
        aspect-ratio: 4 / 3;
    }
    .gallery__slide {
        width: 86%;
    }
    .gallery__arrow {
        width: 34px;
        height: 34px;
        font-size: 1.05rem;
    }
}

/* ---------- Reviews ---------- */

.reviews {
    background: var(--cream);
    padding: var(--space-7) var(--space-3);
}

.reviews__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.reviews__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 var(--space-6);
}

/* Карусель отзывов: обычный горизонтальный scroll-snap, а не JS-коверфлоу
   как у галереи — у отзывов разная длина текста и высота карточки, а
   scroll-snap с нативным свайпом отрабатывает это без общей фиксированной
   высоты вьюпорта, которая нужна была бы для абсолютного позиционирования. */
.reviews__carousel {
    position: relative;
    padding: 0 var(--space-6);
}

.reviews__track {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-1) 0 var(--space-3);
    scrollbar-width: none;
}

.reviews__track::-webkit-scrollbar {
    display: none;
}

/* Фикс. ширина, не vw — vw считается от всей ширины экрана и не "знает"
   про боковые паддинги карусели (--space-6/40px под стрелки) и секции;
   на мобильном 78vw выходило шире, чем реально видимая (обрезанная overflow
   у .reviews__track) область — карточка была шире вьюпорта трека, и её
   правый край с последними словами текста обрезался прокруткой. Ниже, в
   мобильной медиа-выборке, ширина задаётся в % от контейнера (трека) —
   такая привязка паддинги уже учитывает сама по себе. */
.reviews__card {
    flex: 0 0 320px;
    scroll-snap-align: start;
    margin: 0;
    padding: var(--space-3);
    background: var(--cream-dark);
    border-radius: 16px;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.reviews__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(74, 44, 29, 0.08);
}

.reviews__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-choc);
    margin: 0 0 var(--space-2);
}

.reviews__avatar .icon {
    width: 1.3em;
    height: 1.3em;
}

.reviews__card p {
    margin: 0 0 12px;
    line-height: 1.55;
    color: var(--chocolate);
}

.reviews__card cite {
    font-style: normal;
    font-size: 0.9rem;
    color: var(--chocolate-soft);
}

.reviews__arrow {
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    border-radius: 50%;
    background: rgba(236, 225, 205, 0.9);
    color: var(--chocolate);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(74, 44, 29, 0.18);
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.reviews__arrow:hover,
.reviews__arrow:focus-visible {
    background: var(--cream-dark);
    transform: translateY(-50%) scale(1.08);
}

/* На старте/конце списка листать дальше некуда — гасим стрелку вместо того,
   чтобы прятать (JS переключает disabled по scrollLeft, см. scroll-scrub.js). */
.reviews__arrow:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.reviews__arrow--prev {
    left: 0;
}

.reviews__arrow--next {
    right: 0;
}

.reviews__arrow--next .icon {
    transform: rotate(180deg);
}

@media (max-width: 767.98px) {
    .reviews__carousel {
        padding: 0 40px;
    }
    /* % от трека (не от vw) — гарантированно умещается в его видимую
       область вместе с "хвостиком" следующей карточки, на любой ширине. */
    .reviews__card {
        flex-basis: 84%;
    }
    .reviews__arrow {
        width: 34px;
        height: 34px;
        font-size: 1.05rem;
    }
}

/* ---------- Events (мероприятия) ---------- */

.events {
    background: var(--cream);
    padding: var(--space-7) var(--space-3);
}

.events__inner {
    max-width: 620px;
    margin: 0 auto;
    background: var(--choc-bg);
    color: var(--on-choc);
    border-radius: 24px;
    padding: var(--space-5) var(--space-3);
    text-align: center;
    box-shadow: 0 20px 40px rgba(74, 44, 29, 0.15);
}

.events__title {
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-choc-soft);
}

.events__lead {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 var(--space-3);
}

.events__text {
    color: var(--on-choc-soft);
    line-height: 1.55;
    margin: 0 0 var(--space-4);
}

.events__cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.events__cta {
    appearance: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    background: var(--accent);
    color: var(--on-choc);
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.events__cta:hover,
.events__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(74, 44, 29, 0.25);
}

/* ---------- Locations / map ---------- */

.locations {
    background: var(--cream);
    padding: var(--space-7) var(--space-3);
    text-align: center;
}

.locations__inner {
    max-width: 720px;
    margin: 0 auto;
}

.locations__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 700;
    margin: 0 0 var(--space-1);
}

.locations__subtitle {
    color: var(--chocolate-soft);
    margin: 0 0 var(--space-4);
}

.locations__map {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(74, 44, 29, 0.12);
    margin: 0 0 var(--space-4);
}

.locations__map iframe,
.locations__map #locations-map {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

/* Раньше 15 адресов лежали отдельными карточками в grid — на пестрящем
   наборе строк разной длины это читалось "простынёй" из мелких плашек.
   Вместо этого — одна общая панель с компактным списком в 2 колонки:
   меньше визуального шума, адреса проще сканировать глазами. */
.locations__panel {
    background: var(--cream-dark);
    border-radius: 20px;
    padding: var(--space-4) var(--space-5);
    text-align: left;
}

.locations__list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--space-5);
}

.locations__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(74, 44, 29, 0.1);
    break-inside: avoid;
}

.locations__list li:last-child {
    border-bottom: none;
}

.locations__pin {
    flex: none;
    width: 1em;
    height: 1em;
    margin-top: 3px;
    color: var(--accent);
}

.locations__text {
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--chocolate-soft);
}

.locations__metro {
    font-weight: 600;
    color: var(--accent);
    margin-right: 4px;
}

.locations__address {
    color: var(--chocolate);
}

.locations__note {
    font-style: italic;
    color: var(--chocolate-soft);
}

@media (max-width: 767.98px) {
    .locations__panel {
        padding: var(--space-3);
    }
    .locations__list {
        columns: 1;
    }
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--choc-bg-deep);
    color: var(--on-choc);
    padding: var(--space-7) var(--space-3) var(--space-5);
    text-align: center;
}

.site-footer__inner {
    max-width: 520px;
    margin: 0 auto;
}

.site-footer__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.75rem);
    margin: 0 0 12px;
    font-weight: 700;
}

.site-footer__text {
    color: var(--on-choc-soft);
    margin: 0 0 var(--space-4);
}

.site-footer__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0 0 var(--space-5);
}

.site-footer__contacts a {
    color: var(--on-choc);
    text-decoration: none;
    font-size: 1.05rem;
    padding: var(--space-1);
    display: inline-block;
    min-height: 44px;
    line-height: 28px;
    transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__contacts a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.site-footer__social {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
}

.site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-choc);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
    background: var(--on-choc);
    color: var(--choc-bg-deep);
    transform: translateY(-3px);
}

.site-footer__social-link .icon {
    width: 22px;
    height: 22px;
}

.site-footer__copy {
    margin: 0;
    font-size: 0.85rem;
    color: var(--on-choc-soft);
    opacity: 0.7;
}

/* ---------- Modal (job application / privacy stub) ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    background: rgba(74, 44, 29, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}

.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease-out);
}

.modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--cream);
    color: var(--chocolate);
    border-radius: 20px;
    padding: var(--space-5) var(--space-4) var(--space-4);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
    transform: translateY(16px) scale(0.98);
    transition: transform var(--dur-base) var(--ease-out);
}

.modal-overlay.is-open .modal {
    transform: none;
}

.modal__close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    appearance: none;
    border: none;
    background: var(--cream-dark);
    color: var(--chocolate);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modal__close .icon {
    width: 1.1em;
    height: 1.1em;
}

.modal__title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--space-2);
}

.modal__text {
    margin: 0 0 var(--space-3);
    color: var(--chocolate-soft);
    line-height: 1.5;
}

.modal__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--chocolate-soft);
}

.modal__field input {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--chocolate);
    background: #fff;
    border: 1px solid var(--cream-dark);
    border-radius: 10px;
    padding: 0 var(--space-2);
    min-height: 48px;
}

.modal__field input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Honeypot anti-spam field (home/views.py:feedback_submit) — off-screen but
   still present in the DOM so simple bots that auto-fill every input still
   fill it in; real visitors never see or reach it (aria-hidden + tabindex -1
   keep it out of the tab order and off screen-reader radar too). */
.modal__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.modal__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--chocolate-soft);
    line-height: 1.4;
    cursor: pointer;
}

.modal__checkbox input {
    margin-top: 3px;
}

.modal__link {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.modal__submit {
    appearance: none;
    border: none;
    margin-top: var(--space-1);
    background: var(--accent);
    color: var(--on-choc);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    min-height: 52px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.modal__submit:hover,
.modal__submit:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(74, 44, 29, 0.25);
}

.modal__success {
    text-align: center;
    padding: var(--space-3) 0;
}

.modal__success svg {
    width: 48px;
    height: 48px;
    color: var(--accent);
    margin: 0 0 var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal {
        transition: opacity var(--dur-fast) linear, visibility 0s linear;
    }
}

/* ---------- Breakpoints ---------- */

@media (min-width: 768px) {
    .intro {
        min-height: 52vh;
    }
}

@media (min-width: 1024px) {
    .steps__inner {
        max-width: 820px;
    }
    .steps__item h3 {
        font-size: 1.25rem;
    }
    .stand__inner {
        max-width: 560px;
    }
    .stand__img {
        max-width: 520px;
    }

    /* Десктопное видео макания (milk_wide/, 16:9) не имеет в кадре лужи —
       макание уходит за нижний край кадра, брызги и подъём обратно тоже там
       же. Поэтому: без запаса на шторку у .eskimo-scroll и без наезда
       у .steps — сразу обычный поток. Выбор набора кадров — в scroll-scrub.js
       (тот же брейкпоинт 1024px). */
    .eskimo-scroll {
        height: 600dvh;
    }
    .steps {
        margin-top: 0;
        position: static;
        z-index: auto;
    }
    .eskimo-scroll__canvas {
        width: max(100vw, 100dvh * 16 / 9);
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 1440px) {
    .about__inner,
    .reviews__inner {
        max-width: 1200px;
    }
}