/* ==========================================================================
   Design tokens / UI Kit
   ========================================================================== */

:root {
    /* Typography */
    --font-heading: "Cormorant Garamond", serif;
    --font-base: "Lato", sans-serif;

    /* Motion */
    --transition: 0.25s ease;
    --transition-slow: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Radius */
    --radius-xs: 2px;
    --radius: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Layout */
    --container-max: 1768px;
    --grid-gap: 56px;
    --grid-gap-md: 40px;
    --grid-gap-sm: 32px;
    --grid-gap-xs: 24px;
    --section-space: 200px;
    --section-space-lg: 160px;
    --section-space-md: 120px;
    --section-space-sm: 80px;

    /* Type scale (desktop) */
    --fs-body: 18px;
    --lh-body: 1.6;
    --fs-h1: 144px;
    --fs-h2: 120px;
    --fs-h3: 72px;
    --fs-h4: 48px;
    --fs-h5: 32px;
    --fs-h6: 24px;
    --fs-label: 14px;
    --fs-small: 12px;

    /* Controls */
    --btn-h: 52px;
    --btn-h-sm: 48px;
    --btn-min-w: 248px;
    --btn-pad-x: 28px;
    --input-pad-y: 14px;
    --input-pad-x: 18px;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

    /* Shadows (overridden per theme) */
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.18);
    --shadow-lg: 0 26px 76px rgba(0, 0, 0, 0.28);
    --shadow-modal: 0 18px 70px rgba(0, 0, 0, 0.34);
}

/* ==========================================================================
   Theme: Dark (default brand palette)
   ========================================================================== */

body.theme-dark {
    --bg: #1D1A16;
    --bg-elevated: #241F1B;
    --bg-elevated-hover: #2A241F;
    --bg-soft: #2A231E;
    --bg-soft-hover: #302821;
    --bg-deep: #201B17;
    --bg-panel: #1F1B17;
    --bg-footer: #181612;
    --bg-overlay: rgba(29, 26, 22, 0.86);
    --bg-header-panel: rgba(29, 26, 22, 0.98);

    --text: #A89177;
    --text-strong: #EFE8DF;
    --text-inverse: #1D1A16;
    --muted: rgba(168, 145, 119, 0.72);
    --muted-strong: rgba(168, 145, 119, 0.85);

    --accent: #D4B849;
    --accent-soft: rgba(212, 184, 73, 0.12);
    --accent-ghost: rgba(212, 184, 73, 0.18);

    --border: rgba(168, 145, 119, 0.22);
    --border-strong: rgba(168, 145, 119, 0.55);
    --border-control: #A89177;

    --surface-number: rgba(168, 145, 119, 0.42);
    --surface-faq-screen: #28231E;
    --surface-faq-text: #ADACAA;
    --media-fallback: #3A2D28;

    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.16);
    --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 26px 76px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 18px 70px rgba(0, 0, 0, 0.34);

    color-scheme: dark;
}

/* ==========================================================================
   Theme: Light
   ========================================================================== */

body.theme-light {
    --bg: #EFE8DF;
    --bg-elevated: #DED4C7;
    --bg-elevated-hover: #D8CBBD;
    --bg-soft: #DED4C7;
    --bg-soft-hover: #D8CBBD;
    --bg-deep: #D4C8B8;
    --bg-panel: #EFE8DF;
    --bg-footer: #3A2D28;
    --bg-overlay: rgba(58, 45, 40, 0.72);
    --bg-header-panel: rgba(239, 232, 223, 0.98);

    --text: #3A2D28;
    --text-strong: #1D1A16;
    --text-inverse: #EFE8DF;
    --muted: rgba(58, 45, 40, 0.72);
    --muted-strong: rgba(58, 45, 40, 0.85);

    --accent: #8A2634;
    --accent-soft: rgba(138, 38, 52, 0.1);
    --accent-ghost: rgba(138, 38, 52, 0.16);

    --border: rgba(58, 45, 40, 0.18);
    --border-strong: rgba(58, 45, 40, 0.35);
    --border-control: #3A2D28;

    --surface-number: #C0B5AA;
    --surface-faq-screen: #E7DDD1;
    --surface-faq-text: #4A3B35;
    --media-fallback: #A89177;

    --shadow-sm: 0 8px 24px rgba(58, 45, 40, 0.08);
    --shadow-md: 0 18px 40px rgba(58, 45, 40, 0.12);
    --shadow-lg: 0 26px 76px rgba(58, 45, 40, 0.12);
    --shadow-modal: 0 18px 70px rgba(58, 45, 40, 0.18);

    color-scheme: light;
}

/* Backward-compatible aliases used in older markup */
:root,
body {
    --color-bg: var(--bg);
    --color-text: var(--text);
    --color-accent: var(--accent);
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-base);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition:
        background-color var(--transition),
        color var(--transition);
    overflow-x: clip;
}

body.portfolio-modal-open {
    overflow: hidden;
}

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

img,
video,
iframe {
    height: auto;
    border-radius: var(--radius);
}

ul,
ol {
    margin: 0 0 24px;
    padding-left: 20px;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

ul:where(.reset-list),
ol:where(.reset-list),
.site-header__menu,
.site-header__dropdown-list,
.site-header__mobile-menu,
.how-it-works__benefits,
.site-footer__menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0 0 20px;
}

p:last-child {
    margin-bottom: 0;
}

strong,
b {
    font-weight: 700;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition), opacity var(--transition);
}

a:hover {
    color: var(--accent);
}

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

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

:focus {
    outline: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

::selection {
    background: var(--accent);
    color: var(--bg);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 24px;
    font-family: var(--font-heading);
    font-weight: 300;
    text-transform: uppercase;
    color: var(--text);
}

h1 {
    font-size: var(--fs-h1);
    line-height: 0.68;
    margin-bottom: 64px;
}

h2 {
    font-size: var(--fs-h2);
    line-height: 0.68;
    margin-bottom: 40px;
}

h3 {
    font-size: var(--fs-h3);
    line-height: 0.85;
    margin-bottom: 32px;
}

h4 {
    font-size: var(--fs-h4);
    line-height: 0.95;
    margin-bottom: 24px;
}

h5 {
    font-size: var(--fs-h5);
    line-height: 1;
    margin-bottom: 20px;
}

h6 {
    font-size: var(--fs-h6);
    line-height: 1.05;
    margin-bottom: 16px;
}

small {
    font-size: 0.875em;
}

.text-muted {
    color: var(--muted);
}

/* Content helpers */
.prose p {
    margin: 0 0 10px;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose ul,
.prose ol {
    margin: 12px 0 0;
    padding-left: 20px;
}

.prose li + li {
    margin-top: 6px;
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose a:hover {
    opacity: 0.85;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--section-space);
    padding-left: 0;
    padding-right: 0;
}

.container.container-top {
    margin: 0 auto;
}

.section {
    width: 100%;
}

.color-block,
.card,
.panel,
.box,
.media,
figure {
    border-radius: var(--radius);
    overflow: hidden;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

input,
textarea,
select {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--input-pad-y) var(--input-pad-x);
    outline: none;
    transition:
        border-color var(--transition),
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

textarea {
    min-height: 140px;
    resize: vertical;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

/* ==========================================================================
   Buttons (UI kit)
   ========================================================================== */

.btn,
button.btn,
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: var(--btn-h);
    min-width: var(--btn-min-w);
    padding: 0 var(--btn-pad-x);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--accent);
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        opacity var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.btn:hover,
button.btn:hover,
a.btn:hover {
    background: var(--accent);
    color: var(--bg);
}

.btn:active,
button.btn:active,
a.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible,
button.btn:focus-visible,
a.btn:focus-visible {
    box-shadow: var(--focus-ring);
}

.btn--link,
button.btn--link,
a.btn--link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.2;
    position: relative;
    white-space: nowrap;
}

.btn--link::after,
button.btn--link::after,
a.btn--link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: left;
    transition: transform var(--transition), opacity var(--transition);
}

.btn--link:hover,
button.btn--link:hover,
a.btn--link:hover {
    background: transparent;
    color: var(--accent);
}

.btn--link:hover::after,
button.btn--link:hover::after,
a.btn--link:hover::after {
    transform: scaleX(0.65);
    opacity: 0.8;
}

.btn--ghost {
    border-color: var(--border-control);
    color: var(--text);
}

.btn--ghost:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.btn--control {
    min-width: 0;
    min-height: var(--btn-h-sm);
    border-color: var(--border-control);
    color: var(--border-control);
}

.btn--control:hover {
    background: var(--border-control);
    border-color: var(--border-control);
    color: var(--bg);
}

/* ==========================================================================
   Shared motion helpers
   ========================================================================== */

[data-scroll-move] {
    will-change: transform;
    transition: transform 0.12s linear;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroImageIn {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes header-logo-breathe {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

@keyframes relatedLinksUnderline {
    0% {
        transform: scaleX(1);
    }
    45% {
        transform: scaleX(0);
    }
    46% {
        transform-origin: right center;
    }
    100% {
        transform: scaleX(1);
        transform-origin: right center;
    }
}

@keyframes ourLocationFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes ourLocationTextGlow {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.88;
    }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: relative;
    z-index: 30;
    padding: 24px 0 80px;
    background: transparent;
}

.site-header .container {
    padding-left: 0;
    padding-right: 0;
}

.site-header__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
}

.site-header__brand {
    grid-column: 1 / span 2;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-width: max-content;
    color: var(--accent);
    transition: transform var(--transition), color var(--transition), opacity var(--transition);
}

.site-header__brand:hover {
    transform: translateY(-2px);
    color: var(--accent);
}

.site-header__logo {
    display: block;
    width: auto;
    max-width: 44px;
    max-height: 56px;
    flex: 0 0 auto;
    transform-origin: center;
    animation: header-logo-breathe 8s ease-in-out infinite;
}

.site-header__brand-text {
    display: flex;
    flex-direction: column;
    min-width: max-content;
}

.site-header__name {
    display: block;
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--accent);
}

.site-header__activity {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-small);
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.85;
    white-space: nowrap;
}

.site-header__spacer {
    grid-column: 3 / span 3;
    min-height: 1px;
}

.site-header__nav {
    grid-column: 6 / span 6;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
}

.site-header__menu {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    gap: 64px;
}

.site-header__menu--measure {
    position: absolute;
    left: -9999px;
    top: -9999px;
    visibility: hidden;
    pointer-events: none;
}

.site-header__menu-item {
    flex: 0 0 auto;
    transition: transform var(--transition);
}

.site-header__menu-item:hover {
    transform: translateY(-2px);
}

.site-header__menu-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    opacity: 0.82;
    transition: color var(--transition), opacity var(--transition);
}

.site-header__menu-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0.7;
    transition: transform var(--transition), opacity var(--transition);
}

.site-header__menu-link:hover {
    color: var(--accent);
    opacity: 1;
}

.site-header__menu-link:hover::after {
    transform: scaleX(1);
}

.site-header__more {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    margin-left: 16px;
    color: var(--text);
    border-radius: var(--radius-pill);
    transition: transform var(--transition), color var(--transition);
}

.site-header__more:hover {
    color: var(--accent);
    transform: translateY(-1px);
}

.site-header__more svg {
    transition: transform var(--transition);
}

.site-header__more.is-open svg {
    transform: rotate(180deg);
}

.site-header.has-overflow .site-header__more {
    display: inline-flex;
}

.site-header__dropdown,
.site-header__mobile-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-header-panel);
    box-shadow: var(--shadow-lg);
}

.site-header__dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 14px);
    min-width: 280px;
    padding: 16px 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
    pointer-events: none;
}

.site-header__dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.site-header__dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-header__dropdown-list .site-header__menu-link {
    font-size: 16px;
}

.site-header__lang {
    grid-column: 12 / span 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.site-header__lang-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0.72;
    transition: transform var(--transition), opacity var(--transition), color var(--transition);
}

.site-header__lang-link:hover,
.site-header__lang-link.is-active {
    transform: translateY(-1px);
    color: var(--accent);
    opacity: 1;
}

.site-header__lang-link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: currentColor;
}

.site-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    color: var(--text);
    background: color-mix(in srgb, var(--text) 3%, transparent);
    transition:
        transform var(--transition),
        border-color var(--transition),
        color var(--transition),
        background-color var(--transition);
}

.site-header__burger:hover {
    transform: translateY(-1px);
    color: var(--accent);
    border-color: var(--accent);
}

.site-header__burger span {
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: currentColor;
    transition: transform var(--transition), opacity var(--transition), top var(--transition);
}

.site-header__burger span:nth-child(1) { top: 15px; }
.site-header__burger span:nth-child(2) { top: 21px; }
.site-header__burger span:nth-child(3) { top: 27px; }

.site-header__burger.is-open span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}

.site-header__burger.is-open span:nth-child(2) {
    opacity: 0;
}

.site-header__burger.is-open span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}

.site-header__mobile {
    display: none;
}

.site-header__mobile-panel {
    padding: 18px 18px 20px;
    transform: translateY(10px);
    opacity: 0;
    transition: transform var(--transition), opacity var(--transition);
}

.site-header__mobile.is-open .site-header__mobile-panel {
    transform: translateY(0);
    opacity: 1;
}

.site-header__mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-header__menu-link--mobile {
    font-size: 16px;
}

.site-header__mobile-lang {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* ==========================================================================
   Hero with image
   ========================================================================== */

.hero-with-image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-with-image .container {
    margin-bottom: var(--section-space);
}

.hero-with-image__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
}

.hero-with-image__content {
    position: relative;
    z-index: 3;
    grid-column: 1 / span 4;
}

.hero-with-image__eyebrow {
    margin-bottom: 24px;
    color: var(--accent);
    font-size: var(--fs-label);
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(18px);
    animation: heroFadeUp 0.8s ease forwards;
}

.hero-with-image__title-wrap {
    position: relative;
    z-index: 4;
    display: inline-block;
    width: auto;
    max-width: 1062px;
    margin-bottom: 64px;
    padding: 28px 64px 28px 0;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--bg) 0%, transparent) 0%,
        color-mix(in srgb, var(--bg) 40%, transparent) 100%
    );
    opacity: 0;
    transform: translateY(24px);
    animation: heroFadeUp 0.9s ease 0.12s forwards;
}

.hero-with-image__title {
    margin: 0;
    max-width: calc(1062px - 64px);
}

.hero-with-image__intro {
    width: 100%;
    margin-bottom: 80px;
    color: var(--text);
    opacity: 0;
    transform: translateY(18px);
    animation: heroFadeUp 0.8s ease 0.24s forwards;
}

.hero-with-image__button {
    min-width: calc(((100vw - 11 * 56px) / 12) * 2 + 56px);
    opacity: 0;
    transform: translateY(18px);
    animation: heroFadeUp 0.8s ease 0.34s forwards;
}

.hero-with-image__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--media-fallback);
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    animation: heroImageIn 1s ease 0.22s forwards;
}

.hero-with-image__media img {
    width: 100%;
    height: auto;
    object-fit: initial;
    border-radius: var(--radius);
    opacity: 0.8;
    transition: transform 0.8s ease, opacity var(--transition);
}

.hero-with-image__media:hover img {
    opacity: 0.9;
    transform: scale(1.035);
}

.hero-with-image__media--center {
    grid-column: 5 / span 4;
    min-height: 0;
}

.hero-with-image__side {
    grid-column: 9 / span 4;
    opacity: 0;
    transform: translateY(28px);
    animation: heroFadeUp 0.9s ease 0.34s forwards;
}

.hero-with-image__media--right {
    min-height: 0;
    margin-bottom: 32px;
}

.hero-with-image__right-text {
    margin-bottom: 32px;
    color: var(--text);
}

.hero-with-image__right-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    color: var(--accent);
    font-size: 16px;
    line-height: 1.2;
    transition: color var(--transition), transform var(--transition);
}

.hero-with-image__right-link svg {
    color: currentColor;
    transition: transform var(--transition);
}

.hero-with-image__right-link:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

.hero-with-image__right-link:hover svg {
    transform: translateX(8px);
}

.hero-simple__inner {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 0.8s ease forwards;
}

/* ==========================================================================
   Services links
   ========================================================================== */

.services-links {
    width: 100%;
}

.services-links__header {
    max-width: 1160px;
    margin: 0 0 80px 304px;
}

.services-links__title {
    margin: 0 0 40px;
    color: var(--text);
}

.services-links__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}

.services-links__item {
    --reveal-y: 28px;
    --scroll-y: 0px;
    display: grid;
    grid-template-columns: 246px minmax(0, 1fr);
    min-height: 248px;
    background: var(--bg-soft);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border-radius: var(--radius);
    opacity: 0;
    transform: translate3d(0, calc(var(--reveal-y) + var(--scroll-y)), 0);
    transition:
        opacity 0.75s ease,
        transform 0.75s ease,
        box-shadow 0.35s ease,
        background-color 0.35s ease;
    will-change: transform, opacity;
}

.services-links__item.is-visible {
    opacity: 1;
    --reveal-y: 0px;
}

.services-links__item:hover {
    background: var(--bg-soft-hover);
    box-shadow: var(--shadow-md);
    color: inherit;
}

.services-links__image {
    width: 246px;
    min-width: 246px;
    height: 100%;
    overflow: hidden;
    background: var(--bg-deep);
}

.services-links__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.64;
    transition: transform 0.6s ease, opacity 0.3s ease, filter 0.3s ease;
}

.services-links__item:hover .services-links__image img {
    opacity: 0.8;
    transform: scale(1.05);
    filter: saturate(1.05) contrast(1.03);
}

.services-links__content {
    padding: 24px 56px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.35s ease;
}

.services-links__item:hover .services-links__content {
    transform: translateX(6px);
}

.services-links__item-title {
    margin: 0 0 18px;
    font-family: var(--font-base);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 500;
    color: var(--accent);
}

.services-links__item-text {
    color: var(--muted);
}

.services-links__item-text p {
    margin: 0 0 10px;
}

.services-links__item-text p:last-child {
    margin-bottom: 0;
}

.services-links__item-text ul,
.services-links__item-text ol {
    margin: 16px 0 0;
    padding-left: 20px;
}

.services-links__item-text li + li {
    margin-top: 6px;
}

.services-links__item-text a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.services-links__item-text a:hover {
    opacity: 0.85;
}

/* ==========================================================================
   How it works
   ========================================================================== */

.how-it-works {
    width: 100%;
}

.how-it-works .container {
    max-width: var(--container-max);
}

.how-it-works__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.how-it-works__intro {
    grid-column: 1 / span 8;
    margin-bottom: 80px;
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.75s ease, transform 0.75s ease;
    will-change: transform, opacity;
}

.how-it-works__intro.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.how-it-works__title {
    margin: 0 0 40px;
    color: var(--text);
}

.how-it-works__text {
    max-width: 680px;
    color: var(--muted);
}

.how-it-works__steps {
    grid-column: 1 / -1;
    margin-bottom: 120px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.how-it-works__step {
    grid-column: span 3;
    position: relative;
    min-height: 168px;
    display: flex;
    align-items: center;
    padding: 32px 32px 32px 138px;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, calc(28px + var(--scroll-y, 0px)), 0);
    transition:
        opacity 0.75s ease,
        transform 0.75s ease,
        background-color 0.35s ease,
        box-shadow 0.35s ease;
    will-change: transform, opacity;
}

.how-it-works__step.is-visible {
    opacity: 1;
    transform: translate3d(0, calc(0px + var(--scroll-y, 0px)), 0);
    transition-delay: var(--delay, 0s);
}

.how-it-works__step:hover {
    background: var(--bg-elevated-hover);
    box-shadow: var(--shadow-md);
}

.how-it-works__step-number {
    position: absolute;
    left: -45px;
    top: 47%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    font-size: 270px;
    line-height: 1;
    font-weight: 900;
    color: var(--surface-number);
}

.how-it-works__step-content {
    position: relative;
    z-index: 1;
}

.how-it-works__step-title {
    margin: 0 0 24px;
    color: var(--text-strong);
    font-family: var(--font-base);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 400;
}

.how-it-works__step-text {
    color: var(--muted);
}

.how-it-works__step-text p {
    margin: 0 0 10px;
}

.how-it-works__step-text p:last-child {
    margin-bottom: 0;
}

.how-it-works__step-text ul,
.how-it-works__step-text ol {
    margin: 12px 0 0;
    padding-left: 20px;
}

.how-it-works__step-text li + li {
    margin-top: 6px;
}

.how-it-works__step-text a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.how-it-works__footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--grid-gap);
}

.how-it-works__button {
    min-width: var(--btn-min-w);
}

.how-it-works__benefits {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-transform: uppercase;
    color: var(--text);
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.how-it-works__benefit {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.how-it-works__benefit + .how-it-works__benefit {
    margin-left: 32px;
    padding-left: 44px;
}

.how-it-works__benefit + .how-it-works__benefit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    transform: translateY(-50%);
}

/* ==========================================================================
   Portfolio block
   ========================================================================== */

.portfolio-block {
    width: 100%;
    overflow: clip;
}

.portfolio-block .container {
    overflow: visible;
}

.portfolio-block__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
    overflow: visible;
}

.portfolio-block__intro {
    grid-column: 4 / -1;
    margin-bottom: 56px;
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.portfolio-block__intro.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.portfolio-block__title {
    margin: 0 0 40px;
}

.portfolio-block__text {
    max-width: 760px;
}

.portfolio-block__text p {
    margin: 0 0 10px;
}

.portfolio-block__text p:last-child {
    margin-bottom: 0;
}

.portfolio-block__text ul,
.portfolio-block__text ol {
    margin: 16px 0 0;
    padding-left: 20px;
}

.portfolio-block__text li + li {
    margin-top: 6px;
}

.portfolio-block__text a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.portfolio-block__stage {
    grid-column: 1 / -1;
    width: 100%;
    overflow: visible;
    margin: 0 0 56px;
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.portfolio-block__stage.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.portfolio-block__track {
    display: flex;
    align-items: flex-start;
    gap: var(--grid-gap);
    width: max-content;
    overflow: visible;
    transform: translate3d(var(--track-x, 0px), 0, 0);
    transition: transform 0.85s var(--ease-out);
    will-change: transform;
}

.portfolio-block__slide-wrap {
    flex: 0 0 400px;
    width: 400px;
    overflow: visible;
}

.portfolio-block__slide-wrap.is-featured {
    flex: 0 0 552px;
    width: 552px;
}

.portfolio-block__slide {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    overflow: visible;
}

.portfolio-block__slide-wrap.is-featured .portfolio-block__slide {
    background: var(--bg-elevated);
}

.portfolio-block__slide-media {
    display: block;
    width: 400px;
    height: 400px;
    overflow: hidden;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    transform: translate3d(0, var(--scroll-y, 0px), 0);
    transition: transform 0.6s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

.portfolio-block__slide-wrap.is-featured .portfolio-block__slide-media {
    width: 552px;
    height: 400px;
    border-radius: var(--radius) var(--radius) 0 0;
}

.portfolio-block__slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.78;
    transition: transform 0.7s ease, opacity 0.35s ease, filter 0.35s ease;
}

.portfolio-block__slide:hover .portfolio-block__slide-media img {
    transform: scale(1.05);
    opacity: 0.96;
    filter: saturate(1.05) contrast(1.03);
}

.portfolio-block__slide-title {
    display: none;
    margin: 0;
    padding: 32px;
    color: var(--accent);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400;
}

.portfolio-block__slide-wrap.is-featured .portfolio-block__slide-title {
    display: block;
}

.portfolio-block__footer {
    grid-column: 4 / -1;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--grid-gap);
    margin-top: -104px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.portfolio-block__footer.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.portfolio-block__nav {
    display: flex;
    align-items: center;
    gap: var(--grid-gap);
    pointer-events: auto;
}

.portfolio-block__arrow {
    width: 96px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    background: transparent;
    color: var(--border-control);
    cursor: pointer;
    transition:
        background-color var(--transition),
        color var(--transition),
        transform var(--transition),
        opacity var(--transition);
}

.portfolio-block__arrow:hover {
    background: var(--border-control);
    color: var(--bg);
}

.portfolio-block__arrow:active {
    transform: translateY(1px);
}

.portfolio-block__arrow:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.portfolio-block__arrow svg {
    width: 22px;
    height: 5px;
    fill: currentColor;
}

.portfolio-block__button {
    min-width: var(--btn-min-w);
    margin-left: auto;
    pointer-events: auto;
}

/* Popup / lightbox */
.portfolio-block__popup,
.portfolio-block__lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.portfolio-block__lightbox {
    z-index: 1010;
}

.portfolio-block__popup.is-open,
.portfolio-block__lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.portfolio-block__popup-backdrop,
.portfolio-block__lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(6px);
}

.portfolio-block__popup-window,
.portfolio-block__lightbox-window {
    position: relative;
    z-index: 1;
    width: min(1440px, calc(100vw - 48px));
    max-height: min(88vh, 980px);
    margin: 5vh auto 0;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.98);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.portfolio-block__popup.is-open .portfolio-block__popup-window,
.portfolio-block__lightbox.is-open .portfolio-block__lightbox-window {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.portfolio-block__popup-content {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 32px;
    max-height: min(88vh, 980px);
    padding: 56px;
    overflow: auto;
}

.portfolio-block__popup-head {
    grid-column: 1 / -1;
    max-width: 760px;
    margin-bottom: 8px;
}

.portfolio-block__popup-title {
    margin: 0 0 20px;
    color: var(--accent);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 400;
}

.portfolio-block__popup-text p {
    margin: 0 0 10px;
}

.portfolio-block__popup-text p:last-child {
    margin-bottom: 0;
}

.portfolio-block__popup-text ul,
.portfolio-block__popup-text ol {
    margin: 16px 0 0;
    padding-left: 20px;
}

.portfolio-block__popup-text li + li {
    margin-top: 6px;
}

.portfolio-block__popup-gallery {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.portfolio-block__popup-thumb {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
}

.portfolio-block__popup-thumb img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.portfolio-block__popup-thumb:hover img {
    transform: scale(1.04);
    opacity: 0.95;
}

.portfolio-block__popup-close,
.portfolio-block__lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 60%, transparent);
    color: var(--border-control);
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.portfolio-block__popup-close:hover,
.portfolio-block__lightbox-close:hover {
    background: var(--border-control);
    border-color: var(--border-control);
    color: var(--bg);
    transform: rotate(90deg);
}

.portfolio-block__popup-close span,
.portfolio-block__lightbox-close span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1px;
    background: currentColor;
    transform-origin: center;
}

.portfolio-block__popup-close span:first-child,
.portfolio-block__lightbox-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.portfolio-block__popup-close span:last-child,
.portfolio-block__lightbox-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.portfolio-block__lightbox-window {
    width: min(1240px, calc(100vw - 48px));
    max-height: min(90vh, 900px);
    margin-top: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px;
}

.portfolio-block__lightbox-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(90vh - 112px);
    border-radius: 10px;
    box-shadow: var(--shadow-modal);
}

/* ==========================================================================
   Portfolio simple
   ========================================================================== */

.portfolio-simple {
    width: 100%;
    overflow: clip;
}

.portfolio-simple__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.portfolio-simple__intro {
    grid-column: 4 / -1;
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.portfolio-simple__intro.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.portfolio-simple__title {
    margin: 0 0 40px;
}

.portfolio-simple__text {
    max-width: 760px;
}

.portfolio-simple__text p {
    margin: 0 0 10px;
}

.portfolio-simple__text p:last-child {
    margin-bottom: 0;
}

.portfolio-simple__gallery-wrap {
    grid-column: 1 / -1;
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.portfolio-simple__gallery-wrap.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.portfolio-simple__gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.portfolio-simple__item {
    position: relative;
    display: block;
    min-height: 320px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--bg-elevated);
    overflow: hidden;
    cursor: pointer;
    transform: translate3d(0, var(--float-y, 0px), 0);
    transition: opacity 0.55s ease, transform 0.65s ease, filter 0.35s ease;
}

.portfolio-simple__item:nth-child(6n + 1) { grid-column: span 5; min-height: 520px; }
.portfolio-simple__item:nth-child(6n + 2) { grid-column: span 3; min-height: 300px; }
.portfolio-simple__item:nth-child(6n + 3) { grid-column: span 4; min-height: 420px; }
.portfolio-simple__item:nth-child(6n + 4) { grid-column: span 4; min-height: 360px; }
.portfolio-simple__item:nth-child(6n + 5) { grid-column: span 5; min-height: 440px; }
.portfolio-simple__item:nth-child(6n + 6) { grid-column: span 3; min-height: 320px; }

.portfolio-simple__item.is-hidden {
    display: none;
}

.portfolio-simple__item.is-revealing {
    display: block;
    opacity: 0;
    transform: translate3d(0, 36px, 0);
}

.portfolio-simple__item.is-shown {
    opacity: 1;
    transform: translate3d(0, var(--float-y, 0px), 0);
}

.portfolio-simple__image {
    position: absolute;
    inset: 0;
}

.portfolio-simple__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 48%, color-mix(in srgb, var(--bg-elevated) 38%, transparent) 100%),
        linear-gradient(0deg, var(--accent-soft), var(--accent-soft));
    opacity: 0;
    transition: opacity 0.35s ease;
}

.portfolio-simple__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.86;
    transition: transform 0.75s ease, opacity 0.35s ease, filter 0.35s ease;
}

.portfolio-simple__item:hover .portfolio-simple__image::after {
    opacity: 1;
}

.portfolio-simple__item:hover .portfolio-simple__image img {
    transform: scale(1.055);
    opacity: 1;
    filter: saturate(1.06) contrast(1.04);
}

.portfolio-simple__more {
    display: flex;
    justify-content: flex-end;
    margin-top: 56px;
}

.portfolio-simple__more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: var(--btn-min-w);
    height: 56px;
    padding: 0 28px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    background: transparent;
    color: var(--border-control);
    cursor: pointer;
    transition:
        background-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.portfolio-simple__more-button:hover {
    background: var(--border-control);
    color: var(--bg);
}

.portfolio-simple__more-button:active {
    transform: translateY(1px);
}

.portfolio-simple__more-button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.35s ease;
}

.portfolio-simple__more-button.is-open svg {
    transform: rotate(180deg);
}

/* ==========================================================================
   Text + image blocks
   ========================================================================== */

.text-img-left,
.text-img-right,
.text-img-center,
.text-simple {
    overflow: hidden;
}

.text-img-left__layout,
.text-img-right__layout,
.text-img-center__layout,
.text-simple__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
}

.text-img-left__layout,
.text-img-right__layout {
    align-items: center;
}

.text-img-center__layout,
.text-simple__layout {
    align-items: start;
}

.text-img-left__media {
    grid-column: 1 / span 5;
    max-width: 704px;
    overflow: hidden;
}

.text-img-left__content {
    grid-column: 7 / span 6;
    justify-self: end;
    max-width: 856px;
}

.text-img-right__content {
    grid-column: 1 / span 6;
    max-width: 856px;
    justify-self: start;
}

.text-img-right__media {
    grid-column: 8 / span 5;
    max-width: 704px;
    justify-self: end;
    overflow: hidden;
}

.text-img-center__title {
    max-width: 856px;
    margin: 0 0 64px 608px;
    text-align: left;
}

.text-img-center__text--left {
    grid-column: 1 / span 4;
    max-width: 552px;
}

.text-img-center__media {
    grid-column: 5 / span 5;
    max-width: 704px;
    justify-self: center;
    overflow: hidden;
}

.text-img-center__text--right {
    grid-column: 10 / span 3;
    max-width: 400px;
    justify-self: end;
    align-self: center;
}

.text-simple__title {
    margin: 0 0 64px;
}

.text-simple__text--left {
    grid-column: 1 / span 4;
    max-width: 552px;
}

.text-simple__text--right {
    grid-column: 6 / span 4;
    max-width: 552px;
}

.text-img-left__title,
.text-img-right__title {
    margin: 0 0 64px;
}

.text-img-left__text,
.text-img-center__text,
.text-simple__text {
    color: var(--text);
}

.text-img-left__text > *:first-child,
.text-img-right__text > *:first-child,
.text-img-center__text > *:first-child,
.text-simple__text > *:first-child {
    margin-top: 0;
}

.text-img-left__text > *:last-child,
.text-img-right__text > *:last-child,
.text-img-center__text > *:last-child,
.text-simple__text > *:last-child {
    margin-bottom: 0;
}

.text-img-left__text ul,
.text-img-left__text ol,
.text-img-center__text ul,
.text-img-center__text ol,
.text-simple__text ul,
.text-simple__text ol {
    padding-left: 1.2em;
}

.text-img-left__media img,
.text-img-right__media img,
.text-img-center__media img {
    width: 100%;
    height: auto;
    transform: translate3d(0, var(--scroll-y, 0px), 0);
    transition: transform 0.12s linear;
}

.text-simple__text {
    transform: translate3d(0, var(--scroll-y, 0px), 0);
    transition: transform 0.12s linear;
}

.text-img-left__media,
.text-img-left__content,
.text-img-right__media,
.text-img-right__content,
.text-img-center__title,
.text-img-center__text,
.text-img-center__media,
.text-simple__title,
.text-simple__text {
    opacity: 0;
    transform: translate3d(0, 42px, 0);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.text-img-left__media.is-visible,
.text-img-left__content.is-visible,
.text-img-right__media.is-visible,
.text-img-right__content.is-visible,
.text-img-center__title.is-visible,
.text-img-center__text.is-visible,
.text-img-center__media.is-visible,
.text-simple__title.is-visible,
.text-simple__text.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.text-simple__title.is-visible,
.text-simple__text.is-visible {
    transform: translate3d(0, var(--scroll-y, 0px), 0);
}

.text-img-left__content.is-visible,
.text-img-right__content.is-visible {
    transition-delay: 0.12s;
}

.text-img-center__media.is-visible {
    transition-delay: 0.08s;
}

.text-img-center__text--right.is-visible {
    transition-delay: 0.16s;
}

.text-simple__text--left.is-visible {
    transition-delay: 0.08s;
}

.text-simple__text--right.is-visible {
    transition-delay: 0.16s;
}

/* ==========================================================================
   Related links
   ========================================================================== */

.related-links {
    position: relative;
    overflow: hidden;
}

.related-links__head {
    max-width: 1160px;
    margin: 0 0 80px 304px;
}

.related-links__title {
    margin: 0 0 64px;
}

.related-links__subtitle {
    max-width: 552px;
}

.related-links__items {
    display: grid;
    width: 100%;
    max-width: 1464px;
    row-gap: var(--grid-gap);
}

.related-links__row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
}

.related-links__card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
}

.related-links__card--first {
    grid-column: 1 / span 4;
}

.related-links__card--second {
    grid-column: 7 / span 4;
}

.related-links__content {
    position: relative;
    z-index: 2;
    align-self: center;
}

.related-links__content--right {
    grid-column: 1 / span 2;
    text-align: right;
}

.related-links__content--left {
    grid-column: 3 / span 2;
    text-align: left;
}

.related-links__image {
    position: relative;
    display: block;
    width: 100%;
    max-width: 248px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-xs);
    isolation: isolate;
    transform: translate3d(0, var(--scroll-y, 0px), 0) scale(1);
    transition: transform 0.8s var(--ease-out), filter 0.8s var(--ease-out);
}

.related-links__card--first .related-links__image {
    grid-column: 3 / span 2;
    justify-self: end;
}

.related-links__card--second .related-links__image {
    grid-column: 1 / span 2;
    justify-self: start;
}

.related-links__image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 12%, transparent) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.related-links__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.035);
    opacity: 0.72;
    transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out), opacity 0.35s ease;
}

.related-links__image:hover {
    transform: translate3d(0, calc(var(--scroll-y, 0px) - 4px), 0) scale(1.015);
}

.related-links__image:hover::before {
    opacity: 1;
}

.related-links__image:hover img {
    transform: scale(1.095);
    filter: saturate(1.08) contrast(1.04);
    opacity: 0.98;
}

.related-links__main-link {
    position: relative;
    display: inline-block;
    color: var(--accent);
    font-size: 32px;
    line-height: 1.1;
    font-weight: 300;
    transition: color 0.35s ease, transform 0.35s var(--ease-out);
}

.related-links__main-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 0.45s var(--ease-out), opacity 0.35s ease;
}

.related-links__content--right .related-links__main-link::after {
    transform-origin: right center;
}

.related-links__main-link:hover {
    transform: translateY(-2px);
    color: var(--accent);
}

.related-links__main-link:hover::after {
    animation: relatedLinksUnderline 0.75s var(--ease-out);
}

.related-links__sub-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 24px;
    margin-top: 24px;
    white-space: nowrap;
}

.related-links__content--right .related-links__sub-links {
    justify-content: flex-end;
}

.related-links__content--left .related-links__sub-links {
    justify-content: flex-start;
}

.related-links__sub-links a {
    position: relative;
    display: inline-block;
    color: var(--accent);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 300;
    opacity: 0.85;
    transition: opacity 0.35s ease, transform 0.35s var(--ease-out);
}

.related-links__sub-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    opacity: 0.8;
    transition: transform 0.35s var(--ease-out), opacity 0.35s ease;
}

.related-links__sub-links a:hover {
    opacity: 1;
    transform: translateY(-2px);
    color: var(--accent);
}

.related-links__sub-links a:hover::after {
    transform: scaleX(0.72);
    opacity: 1;
}

.related-links__connector {
    grid-column: 5 / span 2;
    position: relative;
    height: 24px;
    align-self: center;
}

.related-links__connector::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 12px;
    right: 12px;
    height: 1px;
    background: color-mix(in srgb, var(--text) 90%, transparent);
    transform: translateY(-50%) scaleX(1);
    transform-origin: center;
    transition: transform 0.65s var(--ease-out), background-color 0.35s ease;
}

.related-links__connector::after,
.related-links__connector span::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 1px solid color-mix(in srgb, var(--text) 95%, transparent);
    border-radius: 50%;
    background: var(--bg);
    transform: translateY(-50%) scale(1);
    transition: transform 0.5s var(--ease-out), border-color 0.35s ease;
}

.related-links__connector::after {
    left: 0;
}

.related-links__connector span::after {
    right: 0;
}

.related-links__row:hover .related-links__connector::before {
    transform: translateY(-50%) scaleX(0.88);
    background: var(--accent);
}

.related-links__row:hover .related-links__connector::after,
.related-links__row:hover .related-links__connector span::after {
    transform: translateY(-50%) scale(1.22);
    border-color: var(--accent);
}

.related-links__bottom {
    width: 552px;
    margin: 128px 0 0 912px;
}

.related-links__bottom-text {
    margin: 0 0 40px;
}

.related-links__bottom-text > *:first-child {
    margin-top: 0;
}

.related-links__bottom-text > *:last-child {
    margin-bottom: 0;
}

.related-links__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 64px;
    border: 1px solid var(--accent);
    color: var(--accent);
    overflow: hidden;
    transition: color 0.4s ease, border-color 0.4s ease, transform 0.4s var(--ease-out);
}

.related-links__button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 0.45s var(--ease-out);
}

.related-links__button:hover {
    color: var(--bg);
    transform: translateY(-2px);
}

.related-links__button:hover::before {
    transform: scaleY(1);
}

.related-links__head,
.related-links__row,
.related-links__bottom {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
    transition: opacity 0.9s ease, transform 0.9s var(--ease-out);
}

.related-links__head.is-visible,
.related-links__row.is-visible,
.related-links__bottom.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.related-links__row .related-links__content {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.85s ease, transform 0.85s var(--ease-out);
}

.related-links__row .related-links__image {
    opacity: 0;
    clip-path: inset(14% 14% 14% 14%);
    transition:
        opacity 0.9s ease,
        clip-path 1.1s var(--ease-out),
        transform 0.8s var(--ease-out),
        filter 0.8s var(--ease-out);
}

.related-links__row .related-links__connector {
    opacity: 0;
    transform: scaleX(0.55);
    transform-origin: center;
    transition: opacity 0.7s ease, transform 0.9s var(--ease-out);
}

.related-links__row.is-visible .related-links__content {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.related-links__row.is-visible .related-links__image {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.related-links__row.is-visible .related-links__connector {
    opacity: 1;
    transform: scaleX(1);
}

.related-links__row.is-visible .related-links__card--first .related-links__content { transition-delay: 0.05s; }
.related-links__row.is-visible .related-links__card--first .related-links__image { transition-delay: 0.12s; }
.related-links__row.is-visible .related-links__connector { transition-delay: 0.22s; }
.related-links__row.is-visible .related-links__card--second .related-links__image { transition-delay: 0.28s; }
.related-links__row.is-visible .related-links__card--second .related-links__content { transition-delay: 0.35s; }

.related-links__row:nth-child(even) .related-links__card--first .related-links__image {
    --scroll-y: calc(var(--related-scroll-y, 0px) * -1);
}

.related-links__row:nth-child(even) .related-links__card--second .related-links__image {
    --scroll-y: var(--related-scroll-y, 0px);
}

.related-links__row:nth-child(odd) .related-links__card--first .related-links__image {
    --scroll-y: var(--related-scroll-y, 0px);
}

.related-links__row:nth-child(odd) .related-links__card--second .related-links__image {
    --scroll-y: calc(var(--related-scroll-y, 0px) * -1);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-block {
    position: relative;
    overflow: hidden;
}

.faq-block__head {
    max-width: 1008px;
    margin: 0 0 80px 456px;
}

.faq-block__title {
    margin: 0 0 64px;
}

.faq-block__subtitle {
    max-width: 1008px;
}

.faq-block__device {
    width: 100%;
    max-width: 1008px;
    margin: 0;
    border: 1px solid var(--border-control);
    background: var(--bg-elevated);
    border-radius: var(--radius);
    transform:
        translate3d(0, var(--faq-scroll-y, 0px), 0)
        rotateX(var(--faq-rotate-x, 0deg));
    transform-origin: center top;
    transition: transform 0.14s linear, box-shadow 0.6s ease;
    will-change: transform;
}

.faq-block__device-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 32px 0;
}

.faq-block__camera,
.faq-block__speaker {
    border: 1px solid var(--border-control);
    transition: border-color 0.35s ease;
}

.faq-block__camera {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.faq-block__speaker {
    width: 144px;
    height: 16px;
    border-radius: var(--radius-pill);
}

.faq-block__screen {
    margin: 0 32px 48px;
    padding: 56px;
    border: 1px solid var(--border-control);
    background: var(--surface-faq-screen);
    border-radius: var(--radius);
}

.faq-block__items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.faq-block__item {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.faq-block__question {
    position: relative;
    width: 456px;
    min-height: 48px;
    margin: 0 0 24px auto;
    padding: 12px 72px 12px 12px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    background: transparent;
    color: var(--surface-faq-text);
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.35s ease,
        color 0.35s ease,
        transform 0.35s var(--ease-out),
        background-color 0.35s ease;
}

.faq-block__question:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateX(-8px);
}

.faq-block__question span:first-child {
    display: block;
}

.faq-block__check {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 25px;
    height: 16px;
    opacity: 0;
    transform: translate3d(6px, 6px, 0) scale(0.8);
    transition: opacity 0.35s ease, transform 0.45s var(--ease-out);
}

.faq-block__check svg {
    width: 25px;
    height: 16px;
}

.faq-block__item.is-active .faq-block__question {
    border-color: var(--accent);
    color: var(--surface-faq-text);
}

.faq-block__item.is-active .faq-block__check {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.faq-block__answer-wrap {
    width: 616px;
    max-height: 0;
    margin: 0 auto 0 0;
    overflow: hidden;
    opacity: 0;
    border-radius: var(--radius);
    transform: translate3d(-24px, -8px, 0);
    transition:
        max-height 0.7s var(--ease-out),
        opacity 0.45s ease,
        margin-bottom 0.45s ease,
        transform 0.6s var(--ease-out);
}

.faq-block__answer {
    padding: 12px;
    border: 1px solid var(--accent);
    color: var(--surface-faq-text);
    line-height: 1.35;
    margin: 0 0 2px;
}

.faq-block__item.is-active .faq-block__answer-wrap {
    margin-bottom: 24px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.faq-block__button {
    width: 100%;
    margin-top: 56px;
    padding: 0 12px;
}

.faq-block__head,
.faq-block__device {
    opacity: 0;
    transform: translate3d(0, 56px, 0);
    transition: opacity 0.9s ease, transform 0.95s var(--ease-out);
}

.faq-block__head.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.faq-block__device.is-visible {
    opacity: 1;
    transform:
        translate3d(0, var(--faq-scroll-y, 0px), 0)
        rotateX(var(--faq-rotate-x, 0deg));
}

.faq-block__device-top,
.faq-block__screen {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.75s ease, transform 0.85s var(--ease-out);
}

.faq-block__device.is-visible .faq-block__device-top,
.faq-block__device.is-visible .faq-block__screen {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.faq-block__device.is-visible .faq-block__device-top { transition-delay: 0.12s; }
.faq-block__device.is-visible .faq-block__screen { transition-delay: 0.24s; }

.faq-block__item {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.55s ease, transform 0.65s var(--ease-out);
}

.faq-block__device.is-visible .faq-block__item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.faq-block__device.is-visible .faq-block__item:nth-child(1) { transition-delay: 0.32s; }
.faq-block__device.is-visible .faq-block__item:nth-child(2) { transition-delay: 0.38s; }
.faq-block__device.is-visible .faq-block__item:nth-child(3) { transition-delay: 0.44s; }
.faq-block__device.is-visible .faq-block__item:nth-child(4) { transition-delay: 0.5s; }
.faq-block__device.is-visible .faq-block__item:nth-child(5) { transition-delay: 0.56s; }
.faq-block__device.is-visible .faq-block__item:nth-child(6) { transition-delay: 0.62s; }
.faq-block__device.is-visible .faq-block__item:nth-child(7) { transition-delay: 0.68s; }
.faq-block__device.is-visible .faq-block__item:nth-child(8) { transition-delay: 0.74s; }

.faq-block__device:hover {
    box-shadow: var(--shadow-lg);
}

.faq-block__device:hover .faq-block__camera,
.faq-block__device:hover .faq-block__speaker {
    border-color: var(--accent);
}

/* ==========================================================================
   Our location
   ========================================================================== */

.our-location {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.our-location__head {
    max-width: 1160px;
    margin: 0 0 80px;
}

.our-location__title {
    margin: 0 0 64px;
}

.our-location__subtitle {
    max-width: 860px;
}

.our-location__layout {
    display: grid;
    grid-template-columns: minmax(0, 1008px) minmax(0, 208px) minmax(0, 448px);
    align-items: center;
}

.our-location__map {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1008px;
    height: 618px;
    overflow: hidden;
    text-decoration: none;
    background: var(--bg-deep);
    isolation: isolate;
    transform: translate3d(0, var(--our-location-shift, 0px), 0) scale(1);
    transition: transform 0.9s var(--ease-out), box-shadow 0.6s ease;
}

.our-location__map::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg) 8%, transparent) 0%,
        color-mix(in srgb, var(--bg) 28%, transparent) 100%
    );
    opacity: 0.95;
    pointer-events: none;
}

.our-location__map::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 46%, var(--accent-soft), transparent 34%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.12) 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.our-location__map-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.our-location__map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    transition: transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
}

.our-location__map:hover {
    transform: translate3d(0, calc(var(--our-location-shift, 0px) - 5px), 0) scale(1.01);
    box-shadow: var(--shadow-lg);
    color: inherit;
}

.our-location__map:hover::after {
    opacity: 1;
}

.our-location__map:hover .our-location__map-img {
    transform: scale(1.085);
    filter: saturate(1.05) contrast(1.04);
}

.our-location__map-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
}

.our-location__place {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    color: var(--text);
    text-align: center;
    padding-left: 22%;
}

.our-location__logo {
    width: auto;
    max-width: 92px;
    height: 48px;
    object-fit: contain;
    flex: 0 0 auto;
}

.our-location__place-info,
.our-location__place-city,
.our-location__place-address {
    color: var(--accent);
    line-height: 1.2;
}

.our-location__place-city,
.our-location__place-address {
    font-size: 18px;
    font-weight: 400;
    white-space: nowrap;
}

.our-location__content {
    grid-column: 3;
    align-self: center;
    max-width: 448px;
    transform: translate3d(0, var(--our-location-content-shift, 0px), 0);
    transition: transform 0.9s var(--ease-out);
}

.our-location__company {
    margin: 0 0 24px;
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 80px;
    line-height: 0.95;
    font-weight: 400;
    text-transform: uppercase;
}

.our-location__activity {
    margin: 0 0 40px;
    color: var(--text);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 500;
}

.our-location__text {
    max-width: 384px;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 300;
}

.our-location__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 40px;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--accent);
    transition: transform 0.35s var(--ease-out), opacity 0.35s ease;
}

.our-location__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 0.45s var(--ease-out);
}

.our-location__link:hover {
    transform: translateY(-2px);
    color: var(--accent);
}

.our-location__link:hover::after {
    transform: scaleX(0.78);
}

.our-location__head,
.our-location__map,
.our-location__content {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
    transition: opacity 0.95s ease, transform 0.95s var(--ease-out);
}

.our-location__head.is-visible,
.our-location__map.is-visible,
.our-location__content.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.our-location__head.is-visible { transition-delay: 0.05s; }
.our-location__map.is-visible { transition-delay: 0.14s; }
.our-location__content.is-visible { transition-delay: 0.24s; }

.our-location.is-active .our-location__place {
    animation: ourLocationFloat 5.2s ease-in-out infinite;
}

.our-location.is-active .our-location__company {
    animation: ourLocationTextGlow 6s ease-in-out infinite;
}

/* ==========================================================================
   Footer
   Always dark brand surface for contrast / brand consistency
   ========================================================================== */

.site-footer {
    --footer-text: #A89177;
    --footer-accent: #D4B849;
    --footer-muted: rgba(168, 145, 119, 0.72);
    --footer-line: rgba(168, 145, 119, 0.55);

    background: var(--bg-footer);
    color: var(--footer-text);
    padding: 82px 0 70px;
}

body.theme-light .site-footer {
    --footer-text: #DED4C7;
    --footer-accent: #EFE8DF;
    --footer-muted: rgba(239, 232, 223, 0.72);
    --footer-line: rgba(239, 232, 223, 0.28);
}

.site-footer .container {
    margin-bottom: 0;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 80px;
    align-items: start;
}

.site-footer__left {
    min-width: 0;
}

.site-footer__brand {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    width: fit-content;
    color: var(--footer-text);
}

.site-footer__logo {
    width: 112px;
    height: 112px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 0;
}

.site-footer__brand-text {
    padding-top: 18px;
}

.site-footer__company {
    margin: 0 0 14px;
    color: var(--footer-accent);
    font-family: var(--font-heading);
    font-size: 54px;
    line-height: 0.9;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.site-footer__activity {
    color: var(--footer-muted);
    font-size: 19px;
    line-height: 1.35;
    font-weight: 300;
}

.site-footer__contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 20px 34px;
    margin-top: 56px;
}

.site-footer__contact {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    color: var(--footer-text);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 300;
    transition: color var(--transition);
}

.site-footer__contact:hover {
    color: var(--footer-accent);
}

.site-footer__contact-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: currentColor;
}

.site-footer__contact-icon svg {
    width: 24px;
    height: 24px;
}

.site-footer__contact-text {
    white-space: nowrap;
}

.site-footer__contact--text .site-footer__contact-text {
    white-space: normal;
}

.site-footer__line {
    width: 100%;
    height: 1px;
    margin-top: 42px;
    background: var(--footer-line);
}

.site-footer__copy {
    margin-top: 12px;
    color: var(--footer-muted);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 300;
}

.site-footer__nav {
    padding-top: 118px;
}

.site-footer__menu {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    column-gap: 42px;
    row-gap: 28px;
    justify-content: start;
    align-content: start;
}

.site-footer__menu-link {
    color: var(--footer-text);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 300;
    white-space: nowrap;
    transition: color var(--transition);
}

.site-footer__menu-link:hover {
    color: var(--footer-accent);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1770px) {
    .container {
        width: 96%;
    }
}

@media (max-width: 1768px) {
    .related-links__bottom {
        width: 100%;
        max-width: 552px;
        margin: 98px 0 0;
    }
}

@media (max-width: 1599px) {
    .related-links__items {
        max-width: 100%;
    }

    .related-links__row,
    .related-links__card {
        column-gap: 40px;
    }

    .faq-block__head {
        margin-left: 25vw;
    }

    .our-location__layout {
        grid-template-columns: minmax(0, 1fr) 120px minmax(0, 420px);
    }

    .our-location__map {
        max-width: none;
        height: 540px;
    }

    .our-location__content {
        max-width: 420px;
    }
}

@media (max-width: 1500px) {
    .site-header__grid {
        column-gap: 40px;
    }

    .site-header__menu {
        gap: 48px;
    }

    .services-links__header {
        max-width: 100%;
        margin: 0 0 40px;
    }

    .services-links__content {
        padding: 12px 24px 20px;
    }
}

@media (max-width: 1400px) {
    body {
        --fs-body: 17px;
        --fs-h1: 112px;
        --fs-h2: 92px;
        --fs-h3: 58px;
        --fs-h4: 40px;
        --fs-h5: 28px;
        --fs-h6: 22px;
        --section-space: 160px;
        --grid-gap: 40px;
    }

    .container {
        margin-bottom: var(--section-space);
    }

    .hero-with-image__media--center {
        min-height: 560px;
    }

    .hero-with-image__media--right {
        min-height: 460px;
    }

    .how-it-works__step {
        min-height: 160px;
        padding-left: 112px;
    }

    .how-it-works__step-number {
        font-size: 200px;
    }

    .how-it-works__step-title {
        font-size: 24px;
    }

    .portfolio-block__intro,
    .portfolio-block__footer,
    .portfolio-simple__intro {
        grid-column: 2 / -1;
    }

    .portfolio-block__slide-wrap {
        flex-basis: 360px;
        width: 360px;
    }

    .portfolio-block__slide-media {
        width: 360px;
        height: 360px;
    }

    .portfolio-block__slide-wrap.is-featured {
        flex-basis: 500px;
        width: 500px;
    }

    .portfolio-block__slide-wrap.is-featured .portfolio-block__slide-media {
        width: 500px;
        height: 360px;
    }

    .portfolio-block__footer {
        margin-top: -96px;
    }

    .portfolio-block__popup-content {
        grid-template-columns: minmax(0, 1fr);
        padding: 44px;
    }

    .portfolio-block__popup-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-simple__gallery {
        gap: 32px;
    }

    .site-footer {
        padding: 72px 0 60px;
    }

    .site-footer__grid {
        gap: 56px;
    }

    .site-footer__company {
        font-size: 46px;
    }

    .site-footer__activity {
        font-size: 17px;
    }

    .site-footer__nav {
        padding-top: 106px;
    }

    .site-footer__menu {
        column-gap: 32px;
        row-gap: 22px;
    }
}

@media (max-width: 1320px) {
    .site-header__grid {
        column-gap: 28px;
    }

    .site-header__menu {
        gap: 34px;
    }

    .site-header__brand {
        gap: 14px;
    }

    .site-header__name {
        font-size: 22px;
        letter-spacing: 0.06em;
    }

    .site-header__activity {
        font-size: 11px;
    }

    .site-header__menu-link {
        font-size: 16px;
    }
}

@media (max-width: 1200px) {
    .services-links__header {
        margin-bottom: 36px;
    }

    .services-links__grid {
        grid-template-columns: 1fr;
    }

    .services-links__item {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .services-links__image {
        width: 100%;
        min-width: 0;
        aspect-ratio: 246 / 180;
    }

    .services-links__content {
        padding: 22px 20px 24px;
    }

    .services-links__item-title {
        font-size: 22px;
    }

    .how-it-works__layout,
    .how-it-works__steps {
        gap: 32px;
    }

    .how-it-works__intro {
        grid-column: 1 / -1;
    }

    .how-it-works__step {
        grid-column: span 6;
        padding-left: 116px;
    }

    .how-it-works__step-number {
        font-size: 180px;
    }
}

@media (max-width: 1199px) {
    .site-header__grid {
        column-gap: 18px;
    }

    .site-header__brand {
        grid-column: 1 / span 3;
    }

    .site-header__spacer {
        grid-column: 4 / span 1;
    }

    .site-header__nav {
        grid-column: 5 / span 7;
    }

    .site-header__menu {
        gap: 26px;
    }

    .site-header__name {
        font-size: 20px;
    }

    .text-img-left__layout,
    .text-img-right__layout,
    .text-img-center__layout,
    .text-simple__layout {
        column-gap: 32px;
    }

    .text-img-left__title,
    .text-img-right__title,
    .text-img-center__title,
    .text-simple__title {
        margin-bottom: 40px;
    }

    .text-img-center__title {
        margin-left: 0;
    }

    .related-links__head,
    .faq-block__head {
        max-width: none;
        margin-left: 0;
        margin-bottom: 64px;
    }

    .related-links__title,
    .faq-block__title,
    .our-location__title {
        margin-bottom: 40px;
    }

    .related-links__row,
    .related-links__card {
        column-gap: 32px;
    }

    .related-links__main-link {
        font-size: 28px;
    }

    .related-links__sub-links a {
        font-size: 18px;
    }

    .faq-block__device {
        max-width: none;
    }

    .our-location__head {
        margin-bottom: 64px;
    }

    .our-location__layout {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .our-location__map,
    .our-location__content {
        grid-column: 1;
    }

    .our-location__content {
        max-width: 100%;
        transform: none;
    }

    .our-location__text {
        max-width: 560px;
    }
}

@media (max-width: 992px) {
    body {
        --fs-body: 16px;
        --fs-h1: 76px;
        --fs-h2: 64px;
        --fs-h3: 42px;
        --fs-h4: 32px;
        --fs-h5: 24px;
        --fs-h6: 20px;
        --section-space: 120px;
        --grid-gap: 32px;
    }

    .container {
        margin-bottom: var(--section-space);
        padding-left: 24px;
        padding-right: 24px;
    }

    h1 {
        margin-bottom: 40px;
    }

    h2 {
        margin-bottom: 32px;
    }

    h3 {
        margin-bottom: 24px;
    }

    .hero-with-image .container {
        margin-bottom: var(--section-space);
    }

    .hero-with-image__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 40px;
    }

    .hero-with-image__content,
    .hero-with-image__media--center,
    .hero-with-image__side {
        grid-column: auto;
    }

    .hero-with-image__content {
        grid-column: 1 / -1;
    }

    .hero-with-image__title-wrap {
        width: auto;
        max-width: 100%;
        margin-bottom: 40px;
        padding: 24px 32px 24px 0;
    }

    .hero-with-image__title {
        max-width: calc(100vw - 32px);
    }

    .hero-with-image__intro {
        max-width: 560px;
        margin-bottom: 40px;
    }

    .hero-with-image__button {
        min-width: 240px;
    }

    .hero-with-image__media--center,
    .hero-with-image__media--right {
        min-height: 0;
    }

    .portfolio-block__intro,
    .portfolio-block__footer,
    .portfolio-simple__intro {
        grid-column: 1 / -1;
    }

    .portfolio-block__track {
        gap: 32px;
    }

    .portfolio-block__slide-wrap {
        flex-basis: 320px;
        width: 320px;
    }

    .portfolio-block__slide-media {
        width: 320px;
        height: 320px;
    }

    .portfolio-block__slide-wrap.is-featured {
        flex-basis: 420px;
        width: 420px;
    }

    .portfolio-block__slide-wrap.is-featured .portfolio-block__slide-media {
        width: 420px;
        height: 320px;
    }

    .portfolio-block__slide-title {
        padding: 26px;
        font-size: 22px;
    }

    .portfolio-block__footer {
        margin-top: 0;
    }

    .portfolio-block__nav {
        gap: 24px;
    }

    .portfolio-block__popup-gallery {
        grid-template-columns: 1fr;
    }

    .portfolio-simple__item,
    .portfolio-simple__item:nth-child(n) {
        grid-column: span 6;
        min-height: 360px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .site-footer__nav {
        padding-top: 0;
    }

    .site-footer__menu {
        grid-template-columns: repeat(2, minmax(0, max-content));
        column-gap: 28px;
        row-gap: 18px;
    }

    .site-footer__contacts {
        margin-top: 36px;
        gap: 16px 24px;
    }
}

@media (max-width: 991px) {
    .site-header {
        padding: 20px 0 56px;
    }

    .site-header .container {
        padding-left: 0;
        padding-right: 0;
    }

    .site-header__grid {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 18px;
        column-gap: 16px;
    }

    .site-header__brand {
        grid-column: 1 / 2;
        max-width: none;
        min-width: 0;
    }

    .site-header__brand-text,
    .site-header__name,
    .site-header__activity {
        min-width: 0;
        max-width: none;
    }

    .site-header__spacer,
    .site-header__nav,
    .site-header__lang {
        display: none;
    }

    .site-header__burger {
        display: inline-flex;
        grid-column: 2 / 3;
        justify-self: end;
        position: relative;
    }

    .site-header__mobile {
        display: block;
        margin-top: 18px;
    }

    .site-header__mobile[hidden] {
        display: none;
    }

    .text-img-left__layout,
    .text-img-right__layout,
    .text-img-center__layout,
    .text-simple__layout {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .text-img-left__media,
    .text-img-left__content,
    .text-img-right__content,
    .text-img-right__media,
    .text-img-center__text--left,
    .text-img-center__media,
    .text-img-center__text--right,
    .text-simple__text--left,
    .text-simple__text--right {
        grid-column: 1;
        max-width: none;
        justify-self: stretch;
        align-self: start;
    }

    .text-img-left__content,
    .text-img-right__content,
    .text-img-center__text--left {
        order: 1;
    }

    .text-img-left__media,
    .text-img-right__media,
    .text-img-center__media {
        order: 2;
    }

    .text-img-center__text--right {
        order: 3;
    }

    .related-links__head {
        margin-bottom: 56px;
    }

    .related-links__items {
        max-width: none;
        row-gap: 56px;
    }

    .related-links__row {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    .related-links__card,
    .related-links__card--first,
    .related-links__card--second {
        grid-column: 1;
        width: 100%;
    }

    .related-links__card {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    .related-links__card--first .related-links__image,
    .related-links__card--second .related-links__image,
    .related-links__content--right,
    .related-links__content--left {
        grid-column: 1;
        text-align: left;
    }

    .related-links__image {
        max-width: none;
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .related-links__card--first .related-links__image,
    .related-links__card--second .related-links__image {
        justify-self: stretch;
        order: 1;
    }

    .related-links__content {
        order: 2;
    }

    .related-links__sub-links,
    .related-links__content--right .related-links__sub-links,
    .related-links__content--left .related-links__sub-links {
        justify-content: flex-start;
        flex-wrap: wrap;
        white-space: normal;
    }

    .related-links__connector {
        display: none;
    }

    .related-links__bottom {
        width: auto;
        margin-top: 72px;
    }

    .faq-block__screen {
        margin: 0 24px 36px;
        padding: 36px;
    }

    .faq-block__question,
    .faq-block__answer-wrap {
        width: 100%;
        margin-left: 0;
    }

    .faq-block__question:hover {
        transform: none;
    }

    .our-location__map {
        height: 440px;
    }

    .our-location__place {
        gap: 16px;
        padding-left: 26%;
    }

    .our-location__company {
        font-size: clamp(38px, 8vw, 58px);
    }

    .our-location__activity {
        font-size: 20px;
        margin-bottom: 28px;
    }

    .our-location__text,
    .our-location__link {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .how-it-works__intro {
        margin-bottom: 56px;
    }

    .how-it-works__steps {
        margin-bottom: 80px;
    }

    .how-it-works__step {
        grid-column: 1 / -1;
        min-height: 0;
        padding: 26px 20px 26px 88px;
    }

    .how-it-works__step-number {
        left: -8px;
        font-size: 140px;
    }

    .how-it-works__step-title {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .how-it-works__footer {
        gap: 24px;
    }

    .how-it-works__benefits,
    .how-it-works__benefit {
        white-space: normal;
    }

    .how-it-works__benefits {
        width: 100%;
    }

    html,
    body {
        overflow-x: hidden;
    }

    .portfolio-block,
    .portfolio-simple {
        overflow: hidden;
    }

    .portfolio-block__stage {
        margin: 0;
    }

    .portfolio-block__intro {
        margin-bottom: 36px;
    }

    .portfolio-block__track {
        gap: 20px;
    }

    .portfolio-block__slide-wrap,
    .portfolio-block__slide-wrap.is-featured {
        flex-basis: 78vw;
        width: 78vw;
    }

    .portfolio-block__slide-media,
    .portfolio-block__slide-wrap.is-featured .portfolio-block__slide-media {
        width: 78vw;
        height: 78vw;
        max-height: 400px;
    }

    .portfolio-block__slide-title {
        padding: 22px;
        font-size: 20px;
    }

    .portfolio-block__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        margin-top: 0;
    }

    .portfolio-block__nav {
        justify-content: flex-start;
    }

    .portfolio-block__button {
        width: 100%;
        min-width: 0;
    }

    .portfolio-block__popup-window,
    .portfolio-block__lightbox-window {
        width: calc(100vw - 24px);
        margin-top: 12px;
    }

    .portfolio-block__popup-content {
        padding: 20px;
    }

    .portfolio-block__popup-thumb img {
        height: 180px;
    }

    .portfolio-block__lightbox-window {
        padding: 20px;
    }

    .portfolio-block__lightbox-image {
        max-height: calc(90vh - 40px);
    }

    .portfolio-simple__gallery {
        gap: 20px;
    }

    .portfolio-simple__item,
    .portfolio-simple__item:nth-child(n) {
        grid-column: 1 / -1;
        min-height: 78vw;
    }

    .portfolio-simple__more {
        justify-content: stretch;
        margin-top: 32px;
    }

    .portfolio-simple__more-button {
        width: 100%;
    }
}

@media (max-width: 576px) {
    body {
        --fs-body: 15px;
        --lh-body: 1.55;
        --fs-h1: 48px;
        --fs-h2: 40px;
        --fs-h3: 30px;
        --fs-h4: 24px;
        --fs-h5: 20px;
        --fs-h6: 18px;
        --section-space: 80px;
        --btn-min-w: 0;
    }

    .container {
        margin-bottom: var(--section-space);
        padding-left: 16px;
        padding-right: 16px;
    }

    h1 {
        line-height: 0.9;
        margin-bottom: 28px;
    }

    h2 {
        line-height: 0.92;
        margin-bottom: 24px;
    }

    h3 {
        margin-bottom: 20px;
    }

    p {
        margin-bottom: 16px;
    }

    .btn,
    button.btn,
    a.btn {
        min-height: 48px;
        min-width: auto;
        padding: 0 22px;
        font-size: 14px;
    }

    .btn--link,
    button.btn--link,
    a.btn--link {
        font-size: 15px;
    }

    .site-header {
        padding: 16px 0 40px;
    }

    .site-header__grid {
        row-gap: 14px;
        column-gap: 10px;
    }

    .site-header__brand {
        gap: 10px;
    }

    .site-header__logo {
        max-width: 54px;
        max-height: 48px;
    }

    .site-header__name {
        font-size: 17px;
        letter-spacing: 0.04em;
    }

    .site-header__activity {
        font-size: 10px;
        letter-spacing: 0.04em;
    }

    .site-header__menu-link,
    .site-header__menu-link--mobile {
        font-size: 15px;
    }

    .site-header__lang-link {
        font-size: 13px;
    }

    .site-header__burger {
        width: 40px;
        height: 40px;
    }

    .site-header__burger span:nth-child(1) { top: 13px; }
    .site-header__burger span:nth-child(2) { top: 19px; }
    .site-header__burger span:nth-child(3) { top: 25px; }

    .site-header__burger.is-open span:nth-child(1),
    .site-header__burger.is-open span:nth-child(3) {
        top: 19px;
    }

    .hero-with-image .container {
        margin-bottom: var(--section-space);
    }

    .hero-with-image__grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .hero-with-image__eyebrow {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .hero-with-image__title-wrap {
        max-width: 100%;
        margin-bottom: 28px;
        padding: 20px 20px 20px 0;
    }

    .hero-with-image__title {
        max-width: calc(100vw - 20px);
    }

    .hero-with-image__intro {
        margin-bottom: 32px;
    }

    .hero-with-image__button {
        width: 100%;
        min-width: 0;
    }

    .hero-with-image__media--center,
    .hero-with-image__media--right {
        width: 100%;
    }

    .hero-with-image__right-text {
        margin-bottom: 24px;
    }

    .services-links__header {
        margin-bottom: 28px;
    }

    .services-links__title {
        margin-bottom: 24px;
    }

    .services-links__item-title {
        font-size: 20px;
    }

    .services-links__content {
        padding: 20px 18px 22px;
    }

    .services-links__item-text ul,
    .services-links__item-text ol {
        padding-left: 18px;
    }

    .how-it-works__title {
        margin-bottom: 24px;
    }

    .how-it-works__step {
        padding: 22px 16px 22px 76px;
    }

    .how-it-works__step-number {
        font-size: 112px;
        left: -6px;
    }

    .how-it-works__step-title {
        font-size: 20px;
    }

    .how-it-works__benefits {
        font-size: 14px;
    }

    .how-it-works__benefit + .how-it-works__benefit {
        margin-left: 20px;
        padding-left: 30px;
    }

    .how-it-works__benefit + .how-it-works__benefit::before {
        width: 10px;
        height: 10px;
    }

    .how-it-works__button {
        width: 100%;
        min-width: 0;
    }

    .portfolio-block__title {
        margin-bottom: 24px;
    }

    .portfolio-block__slide-wrap,
    .portfolio-block__slide-wrap.is-featured {
        flex-basis: 84vw;
        width: 84vw;
    }

    .portfolio-block__slide-media,
    .portfolio-block__slide-wrap.is-featured .portfolio-block__slide-media {
        width: 84vw;
        height: 84vw;
    }

    .portfolio-block__arrow {
        width: 84px;
    }

    .portfolio-block__popup-title {
        font-size: 20px;
    }

    .text-img-left__title,
    .text-img-right__title,
    .text-img-center__title,
    .text-simple__title {
        margin-bottom: 28px;
    }

    .text-img-left__layout,
    .text-img-right__layout,
    .text-img-center__layout,
    .text-simple__layout {
        row-gap: 32px;
    }

    .related-links__title,
    .faq-block__title,
    .our-location__title {
        margin-bottom: 28px;
    }

    .related-links__head,
    .faq-block__head,
    .our-location__head {
        margin-bottom: 40px;
    }

    .related-links__items {
        row-gap: 48px;
    }

    .related-links__row {
        row-gap: 24px;
    }

    .related-links__main-link {
        font-size: 26px;
    }

    .related-links__sub-links {
        gap: 12px 20px;
        margin-top: 20px;
    }

    .related-links__sub-links a {
        font-size: 17px;
    }

    .related-links__button {
        margin-top: 40px;
    }

    .faq-block__device-top {
        gap: 16px;
        padding: 24px 0;
    }

    .faq-block__camera {
        width: 14px;
        height: 14px;
    }

    .faq-block__speaker {
        width: 112px;
        height: 14px;
    }

    .faq-block__screen {
        margin: 0 16px 24px;
        padding: 24px 16px;
    }

    .faq-block__question {
        padding-right: 52px;
    }

    .faq-block__button {
        margin-top: 40px;
    }

    .our-location__map {
        height: 320px;
    }

    .our-location__place {
        flex-direction: column;
        gap: 10px;
        padding-left: 0;
    }

    .our-location__place-info {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .our-location__place-city,
    .our-location__place-address {
        white-space: normal;
    }

    .our-location__company {
        font-size: 48px;
        margin-bottom: 18px;
    }

    .our-location__activity {
        font-size: 18px;
    }

    .our-location__logo {
        max-width: 78px;
        height: 24px;
    }

    .our-location__place-city {
        font-size: 16px;
    }

    .our-location__place-address {
        font-size: 14px;
    }

    .our-location__text {
        max-width: 100%;
    }

    .our-location__link {
        margin-top: 28px;
    }

    .site-footer {
        padding: 48px 0 34px;
    }

    .site-footer__brand {
        gap: 18px;
        width: 100%;
    }

    .site-footer__logo {
        width: 78px;
        height: 78px;
    }

    .site-footer__brand-text {
        padding-top: 8px;
    }

    .site-footer__company {
        font-size: 34px;
        margin-bottom: 8px;
    }

    .site-footer__activity {
        font-size: 15px;
    }

    .site-footer__contacts {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    .site-footer__contact {
        font-size: 16px;
    }

    .site-footer__line {
        margin-top: 28px;
    }

    .site-footer__menu {
        grid-template-columns: 1fr;
        row-gap: 14px;
    }

    .site-footer__menu-link {
        font-size: 16px;
    }
}

@media (max-width: 390px) {
    .site-header__logo {
        max-width: 46px;
        max-height: 42px;
    }

    .site-header__name {
        font-size: 15px;
        letter-spacing: 0.03em;
    }

    .site-header__activity {
        font-size: 9px;
    }

    .site-header__burger {
        width: 38px;
        height: 38px;
    }
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }

    .portfolio-block,
    .portfolio-simple {
        overflow: hidden;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-scroll-move],
    [data-scroll-float],
    .hero-with-image__eyebrow,
    .hero-with-image__title-wrap,
    .hero-with-image__intro,
    .hero-with-image__button,
    .hero-with-image__media,
    .hero-with-image__side,
    .services-links__item,
    .how-it-works__intro,
    .how-it-works__step,
    .portfolio-block__intro,
    .portfolio-block__stage,
    .portfolio-block__footer,
    .portfolio-block__slide-media,
    .portfolio-simple__intro,
    .portfolio-simple__gallery-wrap,
    .portfolio-simple__item,
    .text-img-left__media,
    .text-img-left__content,
    .text-img-right__media,
    .text-img-right__content,
    .text-img-center__title,
    .text-img-center__text,
    .text-img-center__media,
    .text-simple__title,
    .text-simple__text,
    .related-links__head,
    .related-links__row,
    .related-links__bottom,
    .related-links__content,
    .related-links__image,
    .related-links__connector,
    .faq-block__head,
    .faq-block__device,
    .faq-block__device-top,
    .faq-block__screen,
    .faq-block__item,
    .faq-block__question,
    .faq-block__answer-wrap,
    .faq-block__check,
    .our-location__head,
    .our-location__map,
    .our-location__content,
    .our-location__place {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .faq-block__answer-wrap {
        max-height: none;
    }
}



/* ==========================================================================
   Menu page — matches site UI kit
   ========================================================================== */

.menu-page {
    width: 100%;
    overflow: hidden;
}

.menu-page__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap, 56px);
}

.menu-page__intro {
    grid-column: 4 / -1;
    max-width: 860px;
    margin-bottom: 8px;
}

.menu-page__title {
    margin: 0 0 40px;
}

.menu-page__subtitle {
    max-width: 680px;
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
}



/* Grid */
 
.menu-page__empty {
    grid-column: 1 / -1;
    margin: 24px 0 0;
}

.menu-page__empty.is-hidden,
.menu-page__empty--dynamic.is-hidden {
    display: none;
}

/* Card */

.menu-card {
    --reveal-y: 28px;
    position: relative;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 220px;
    background: var(--bg-soft, var(--bg-elevated, #2a231e));
    border-radius: var(--radius, 4px);
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, var(--reveal-y), 0);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        max-height 0.45s ease;
    will-change: transform, opacity;
}

.menu-card.is-visible {
    opacity: 1;
    --reveal-y: 0px;
    transition-delay: var(--delay, 0s);
}

.menu-card.is-featured {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.menu-card.is-filtered-out {
    opacity: 0 !important;
    transform: translate3d(0, 16px, 0) scale(0.98);
    pointer-events: none;
    max-height: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

.menu-card:hover {
    background: var(--bg-soft-hover, var(--bg-elevated-hover, #302821));
    box-shadow: var(--shadow-md, 0 18px 40px rgba(0, 0, 0, 0.18));
}

.menu-card__trigger {
    display: contents;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.menu-card__media {
    position: relative;
    width: 220px;
    min-width: 220px;
    min-height: 220px;
    overflow: hidden;
    background: var(--bg-deep, #201b17);
}

.menu-card__media img,
.menu-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
}

.menu-card__media img {
    opacity: 0.72;
    transition:
        transform 0.7s ease,
        opacity 0.35s ease,
        filter 0.35s ease;
}

.menu-card:hover .menu-card__media img {
    opacity: 0.92;
    transform: scale(1.05);
    filter: saturate(1.05) contrast(1.03);
}

.menu-card__placeholder {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 12%, transparent),
            transparent 55%),
        var(--bg-deep, #201b17);
}

.menu-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 28px 32px;
    transition: transform 0.35s ease;
}

.menu-card:hover .menu-card__body {
    transform: translateX(4px);
}

.menu-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.menu-card__title {
    margin: 0;
    font-family: var(--font-base, "Lato", sans-serif);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    text-transform: none;
    color: var(--accent);
}

.menu-card__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    white-space: nowrap;
}

.menu-card__price-value {
    color: var(--text-strong, var(--text));
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
}

.menu-card__unit {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.menu-card__short {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.45;
}

.menu-card__tags,
.menu-card__panel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-card__tags li,
.menu-card__panel-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border, rgba(168, 145, 119, 0.22));
    border-radius: var(--radius-pill, 999px);
    color: var(--muted-strong, var(--muted));
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

 
/* Reveal helper */

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.menu-page__intro[data-reveal].is-visible {
    transition-delay: 0.05s;
}

.menu-filters[data-reveal].is-visible {
    transition-delay: 0.12s;
}

/* Responsive */

@media (max-width: 1400px) {
    .menu-page__intro {
        grid-column: 2 / -1;
    }
}

@media (max-width: 1200px) {
    .menu-page__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .menu-page__intro {
        grid-column: 1 / -1;
    }

    .menu-page__title {
        margin-bottom: 28px;
    }

    .menu-card {
        grid-template-columns: 180px minmax(0, 1fr);
        min-height: 180px;
    }

    .menu-card__media,
    .menu-card__media img,
    .menu-card__placeholder {
        width: 180px;
        min-width: 180px;
        min-height: 180px;
    }

    .menu-card__body {
        padding: 22px 20px;
    }

    .menu-card__title {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    

    .menu-card,
    .menu-card.is-open {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .menu-card__media,
    .menu-card__media img,
    .menu-card__placeholder {
        width: 100%;
        min-width: 0;
        min-height: 220px;
        aspect-ratio: 16 / 11;
    }

    .menu-card__body {
        padding: 20px 18px 22px;
    }

    .menu-card:hover .menu-card__body {
        transform: none;
    }

    .menu-card__top {
        flex-direction: column;
        gap: 10px;
    }

    .menu-card__price {
        align-items: flex-start;
    }

    .menu-card__panel-inner {
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-card,
    .menu-card__media img,
    .menu-card__body,
    .menu-card__panel-inner,
    .menu-filters__btn,
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


.menu-card.is-hidden,
.menu-empty.is-hidden {
    display: none !important;
}

 

.menu-filters__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.menu-filters__label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.75;
}

.menu-filters__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.menu-filters__btn {
    cursor: pointer;
}

.menu-filters__btn.is-active {
    font-weight: 700;
}

.menu-card.is-hidden {
    display: none !important;
}

.menu-page__empty.is-hidden,
.menu-page__empty[hidden] {
    display: none !important;
}

/* ==========================================================================
   MENU BLOCK — FULL REPLACEMENT
   Replace the old "Menu Block (content block — preview picker)" section
   and the old "Menu block — collapsed categories" section with this file.
   ========================================================================== */

.menu-block {
    width: 100%;
    overflow: visible;
}

.menu-block .container,
.menu-block__layout {
    overflow: visible;
}

.menu-block__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--grid-gap);
    align-items: start;
}

/* Intro */
.menu-block__intro {
    max-width: 1160px;
    margin: 0 0 80px;
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: opacity 0.8s ease, transform 0.8s var(--ease-out);
    will-change: opacity, transform;
}

.menu-block__intro.is-visible {
    opacity: 1;
    transform: none;
}

.menu-block__title {
    margin: 0 0 40px;
    color: var(--text);
    opacity: 1 !important;
    transform: none !important;
}

.menu-block__subtitle {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 300;
    opacity: 1 !important;
    transform: none !important;
}

/* Preview outer layer: grid placement and reveal only */
.menu-block__preview {
    grid-column: 1 / span 4;
    align-self: stretch;
    width: 100%;
    max-width: 552px;
    min-width: 0;
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: opacity 0.8s ease, transform 0.8s var(--ease-out);
    will-change: opacity, transform;
}

.menu-block__preview.is-visible {
    opacity: 1;
    transform: none;
}

/* Sticky is isolated from reveal and JS parallax */
.menu-block__preview-sticky {
    position: sticky;
    top: var(--menu-sticky-offset, 24px);
    z-index: 4;
    width: 100%;
}

.menu-block__card {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-soft);
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.menu-block__card:hover {
    background: var(--bg-soft-hover);
    box-shadow: var(--shadow-md);
}

.menu-block__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.02;
    overflow: hidden;
    background: var(--bg-deep);
}

.menu-block__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    opacity: 0.78;
    transition: opacity 0.45s ease, transform 0.7s var(--ease-out), filter 0.45s ease;
}

.menu-block__media img.is-fading {
    opacity: 0;
    transform: scale(1.04);
}

.menu-block__card:hover .menu-block__media img:not(.is-fading) {
    opacity: 0.96;
    transform: scale(1.04);
    filter: saturate(1.05) contrast(1.03);
}

.menu-block__media-placeholder {
    width: 100%;
    height: 100%;
    min-height: 280px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
        var(--bg-deep);
}

.menu-block__media img[hidden],
.menu-block__media-placeholder[hidden],
.menu-block__card-ingredients[hidden],
.menu-block__card-short[hidden] {
    display: none !important;
}

.menu-block__card-body {
    padding: 28px 32px 32px;
    transition: opacity 0.28s ease, transform 0.35s ease;
}

.menu-block__card.is-switching .menu-block__card-body {
    opacity: 0;
    transform: translateY(8px);
}

.menu-block__card-title {
    margin: 0 0 12px;
    color: var(--accent);
    font-family: var(--font-base);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    text-transform: none;
}

.menu-block__card-ingredients {
    margin: 0 0 16px;
    color: var(--muted-strong);
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.menu-block__card-short {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
}

/* Picker */
.menu-block__picker {
    grid-column: 6 / -1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
    padding-top: 4px;
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition: opacity 0.85s ease, transform 0.85s var(--ease-out);
    will-change: opacity, transform;
}

.menu-block__picker.is-visible {
    opacity: 1;
    transform: none;
    transition-delay: 0.1s;
}

.menu-block__category {
    position: relative;
    min-width: 0;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.55s ease, transform 0.65s var(--ease-out);
}

.menu-block__picker.is-visible .menu-block__category {
    opacity: 1;
    transform: none;
}

.menu-block__picker.is-visible .menu-block__category:nth-child(1) { transition-delay: 0.16s; }
.menu-block__picker.is-visible .menu-block__category:nth-child(2) { transition-delay: 0.24s; }
.menu-block__picker.is-visible .menu-block__category:nth-child(3) { transition-delay: 0.32s; }
.menu-block__picker.is-visible .menu-block__category:nth-child(4) { transition-delay: 0.40s; }
.menu-block__picker.is-visible .menu-block__category:nth-child(5) { transition-delay: 0.48s; }
.menu-block__picker.is-visible .menu-block__category:nth-child(n + 6) { transition-delay: 0.54s; }

.menu-block__category-label {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
}

.menu-block__buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    width: 100%;
    min-width: 0;
}

.menu-block__btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: var(--btn-h-sm);
    padding: 12px 18px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition:
        opacity 0.32s ease,
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.menu-block__btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.menu-block__btn.is-active {
    background: color-mix(in srgb, var(--text) 78%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--text) 78%, var(--bg-elevated));
    color: var(--bg);
    box-shadow: var(--shadow-sm);
}

body.theme-dark .menu-block__btn.is-active {
    background: #C4A574;
    border-color: #C4A574;
    color: #1A1510;
}

body.theme-light .menu-block__btn.is-active {
    background: color-mix(in srgb, var(--text) 88%, #fff);
    border-color: color-mix(in srgb, var(--text) 88%, #fff);
    color: var(--bg);
}

.menu-block__btn.is-active:hover {
    color: inherit;
    transform: none;
}

.menu-block__btn:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Extra category positions */
.menu-block__btn--extra[hidden] {
    display: none !important;
}

.menu-block__btn--extra.is-revealing {
    display: inline-flex;
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
}

.menu-block__btn--extra.is-revealing.is-shown {
    opacity: 1;
    transform: none;
}

.menu-block__btn--extra.is-hiding {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(0.985);
    pointer-events: none;
}

.menu-block__category-footer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 20px;
}

.menu-block__category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 180px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    transition:
        color var(--transition),
        border-color var(--transition),
        background-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.menu-block__category-toggle:hover,
.menu-block__category.is-expanded .menu-block__category-toggle {
    border-color: var(--accent);
    color: var(--accent);
}

.menu-block__category-toggle:hover {
    transform: translateY(-1px);
}

.menu-block__category-toggle:active {
    transform: none;
}

.menu-block__category-toggle:focus-visible {
    box-shadow: var(--focus-ring);
}

.menu-block__category-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: 11px;
    line-height: 1;
    opacity: 0.72;
    transition: opacity var(--transition), transform var(--transition);
}

.menu-block__category.is-expanded .menu-block__category-toggle-count {
    opacity: 0;
    transform: scale(0.75);
}

.menu-block__category-toggle-icon {
    display: block;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    margin-top: -5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: margin var(--transition), transform 0.4s var(--ease-out);
}

.menu-block__category.is-expanded .menu-block__category-toggle-icon {
    margin-top: 5px;
    transform: rotate(225deg);
}

/* Footer */
.menu-block__footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px var(--grid-gap);
    max-width: 1100px;
    margin-top: 64px;
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.75s ease, transform 0.75s var(--ease-out);
}

.menu-block__footer.is-visible {
    opacity: 1;
    transform: none;
    transition-delay: 0.18s;
}

.menu-block__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--btn-min-w);
    min-height: var(--btn-h);
    padding: 0 var(--btn-pad-x);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--accent);
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.menu-block__cta:hover {
    background: var(--accent);
    color: var(--bg);
}

.menu-block__cta:active {
    transform: translateY(1px);
}

.menu-block__cta--static {
    cursor: default;
}

.menu-block__note {
    max-width: 420px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
}

/* Prevent generic reveal rules from hiding nested content */
.menu-block [data-reveal],
.menu-block [data-reveal-item],
.menu-block [data-reveal].is-visible,
.menu-block [data-reveal-item].is-visible {
    opacity: inherit;
    transform: none;
}

@media (max-width: 1400px) {
    .menu-block__preview {
        grid-column: 1 / span 5;
        max-width: none;
    }

    .menu-block__picker {
        grid-column: 6 / -1;
    }

    .menu-block__card-title {
        font-size: 22px;
    }
}

@media (max-width: 1199px) {
    .menu-block__intro {
        margin-bottom: 56px;
    }

    .menu-block__preview {
        grid-column: 1 / span 5;
    }

    .menu-block__picker {
        grid-column: 6 / -1;
        gap: 32px;
    }

    .menu-block__buttons {
        gap: 12px 14px;
    }

    .menu-block__footer {
        margin-top: 48px;
    }
}

@media (max-width: 992px) {
    .menu-block__intro {
        margin-bottom: 40px;
    }

    .menu-block__title {
        margin-bottom: 28px;
    }

    .menu-block__preview,
    .menu-block__picker {
        grid-column: 1 / -1;
    }

    .menu-block__preview {
        align-self: start;
        max-width: 480px;
    }

    .menu-block__preview-sticky {
        position: relative;
        top: auto;
        z-index: auto;
    }

    .menu-block__picker {
        gap: 28px;
        padding-top: 0;
    }

    .menu-block__footer {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 40px;
    }

    .menu-block__cta {
        width: fit-content;
    }

    .menu-block__note {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .menu-block__card-body {
        padding: 22px 20px 24px;
    }

    .menu-block__card-title {
        font-size: 20px;
    }

    .menu-block__card-short {
        font-size: 15px;
    }

    .menu-block__buttons {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .menu-block__btn {
        min-height: 48px;
        font-size: 14px;
    }

    .menu-block__category-footer {
        margin-top: 16px;
    }

    .menu-block__category-toggle {
        width: 100%;
        min-width: 0;
        min-height: 48px;
    }
}

@media (max-width: 576px) {
    .menu-block__intro {
        margin-bottom: 32px;
    }

    .menu-block__preview {
        max-width: none;
    }

    .menu-block__media {
        aspect-ratio: 4 / 3;
    }

    .menu-block__card-body {
        padding: 18px 16px 20px;
    }

    .menu-block__category-label {
        margin-bottom: 14px;
        font-size: 15px;
    }

    .menu-block__category-toggle {
        padding: 0 14px;
        font-size: 13px;
    }

    .menu-block__footer {
        margin-top: 32px;
    }

    .menu-block__cta {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-block__intro,
    .menu-block__preview,
    .menu-block__picker,
    .menu-block__category,
    .menu-block__footer,
    .menu-block__media img,
    .menu-block__card-body,
    .menu-block__btn,
    .menu-block__category-toggle,
    .menu-block__category-toggle-count,
    .menu-block__category-toggle-icon {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* Footer */
.menu-block__footer {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px var(--grid-gap);
    margin-top: 64px;
    max-width: 1100px;
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 0.75s ease,
        transform 0.75s var(--ease-out);
}

.menu-block__footer.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.18s;
}

.menu-block__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-h);
    min-width: var(--btn-min-w);
    padding: 0 var(--btn-pad-x);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--accent);
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.menu-block__cta:hover {
    background: var(--accent);
    color: var(--bg);
}

.menu-block__cta:active {
    transform: translateY(1px);
}

.menu-block__cta--static {
    cursor: default;
}

.menu-block__note {
    margin: 0;
    max-width: 420px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
}

/* Reveal targets — menu block only */
.menu-block__intro,
.menu-block__preview,
.menu-block__picker,
.menu-block__footer {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition:
        opacity 0.8s ease,
        transform 0.8s var(--ease-out);
    will-change: transform, opacity;
}

.menu-block__intro.is-visible,
.menu-block__preview.is-visible,
.menu-block__picker.is-visible,
.menu-block__footer.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* preview: parallax after reveal */
.menu-block__preview {
    --reveal-y: 32px;
    --scroll-y: 0px;
    transform: translate3d(0, calc(var(--reveal-y) + var(--scroll-y)), 0);
}

.menu-block__preview.is-visible {
    --reveal-y: 0px;
    transform: translate3d(0, calc(var(--reveal-y) + var(--scroll-y)), 0);
}

.menu-block__picker.is-visible {
    transition-delay: 0.1s;
}

.menu-block__footer.is-visible {
    transition-delay: 0.18s;
}

/* categories stagger */
.menu-block__category {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 0.55s ease,
        transform 0.65s var(--ease-out);
}

.menu-block__picker.is-visible .menu-block__category {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.menu-block__picker.is-visible .menu-block__category:nth-child(1) { transition-delay: 0.16s; }
.menu-block__picker.is-visible .menu-block__category:nth-child(2) { transition-delay: 0.24s; }
.menu-block__picker.is-visible .menu-block__category:nth-child(3) { transition-delay: 0.32s; }
.menu-block__picker.is-visible .menu-block__category:nth-child(4) { transition-delay: 0.4s; }
.menu-block__picker.is-visible .menu-block__category:nth-child(5) { transition-delay: 0.48s; }

/* title/subtitle always inherit visibility from intro */
.menu-block__title,
.menu-block__subtitle {
    opacity: 1 !important;
    transform: none !important;
}

/* safety: no nested data-reveal opacity traps inside menu-block */
.menu-block [data-reveal],
.menu-block [data-reveal-item] {
    opacity: inherit;
    transform: none;
}

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

/* ---------- Responsive ---------- */

@media (max-width: 1400px) {
    .menu-block__preview {
        grid-column: 1 / span 5;
        max-width: none;
    }

    .menu-block__picker {
        grid-column: 6 / -1;
    }

    .menu-block__card-title {
        font-size: 22px;
    }
}

@media (max-width: 1199px) {
    .menu-block__intro {
        margin-bottom: 56px;
    }

    .menu-block__preview {
        grid-column: 1 / span 5;
    }

    .menu-block__picker {
        grid-column: 6 / -1;
        gap: 32px;
    }

    .menu-block__buttons {
        gap: 12px 14px;
    }

    .menu-block__footer {
        margin-top: 48px;
    }
}

@media (max-width: 992px) {
    .menu-block__intro {
        margin-bottom: 40px;
    }

    .menu-block__title {
        margin-bottom: 28px;
    }

    .menu-block__preview,
    .menu-block__picker {
        grid-column: 1 / -1;
    }

    .menu-block__preview {
        max-width: 480px;
    }

    .menu-block__picker {
        gap: 28px;
        padding-top: 0;
    }

    .menu-block__footer {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 40px;
    }

    .menu-block__cta {
        width: fit-content;
        min-width: var(--btn-min-w);
    }

    .menu-block__note {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .menu-block__card-body {
        padding: 22px 20px 24px;
    }

    .menu-block__card-title {
        font-size: 20px;
    }

    .menu-block__card-short {
        font-size: 15px;
    }

    .menu-block__buttons {
        grid-template-columns: 1fr;
    }

    .menu-block__btn {
        min-height: 48px;
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .menu-block__intro {
        margin-bottom: 32px;
    }

    .menu-block__preview {
        max-width: none;
    }

    .menu-block__media {
        aspect-ratio: 4 / 3;
    }

    .menu-block__card-body {
        padding: 18px 16px 20px;
    }

    .menu-block__category-label {
        margin-bottom: 14px;
        font-size: 15px;
    }

    .menu-block__footer {
        margin-top: 32px;
    }

    .menu-block__cta {
        width: 100%;
        min-width: 0;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .menu-block__intro,
    .menu-block__preview,
    .menu-block__picker,
    .menu-block__category,
    .menu-block__footer,
    .menu-block__media img,
    .menu-block__card-body,
    .menu-block__btn {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Menu filters
   One-line collapsed state with expandable content
   ========================================================================== */

.menu-filters {
    --filter-control-height: 44px;
    --filter-row-gap: 10px;
    --filter-column-gap: 12px;

    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    margin: 8px 0 32px;
}

/* Group */

.menu-filters__group {
    width: 100%;
    min-width: 0;
}

.menu-filters__label {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/*
 * The filters and toggle form one row.
 * The toggle always remains visible on the right.
 */

.menu-filters__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

/* Filter list */

.menu-filters__list {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: var(--filter-row-gap) var(--filter-column-gap);
    width: 100%;
    min-width: 0;
    max-height: var(--filter-control-height);
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    transition:
        max-height 0.55s var(--ease-out),
        opacity var(--transition);
}

/*
 * Soft masking prevents the last clipped filter from looking broken.
 * It is removed in the expanded state.
 */

.menu-filters__group.has-overflow:not(.is-expanded)
.menu-filters__list {
    -webkit-mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(100% - 34px),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(100% - 34px),
        transparent 100%
    );
}

.menu-filters__group.is-expanded .menu-filters__list {
    flex-wrap: wrap;
    max-height: var(--filters-open-height, 500px);
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Filter button */

.menu-filters__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    min-height: var(--filter-control-height);
    padding: 0 18px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        opacity var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.menu-filters__btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.menu-filters__btn:active {
    transform: translateY(0);
}

.menu-filters__btn.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.menu-filters__btn.is-active:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg);
    transform: none;
}

.menu-filters__btn:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Expand/collapse control */

.menu-filters__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 148px;
    min-height: var(--filter-control-height);
    padding: 0 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.menu-filters__toggle[hidden] {
    display: none;
}

.menu-filters__toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.menu-filters__toggle:active {
    transform: translateY(0);
}

.menu-filters__toggle:focus-visible {
    box-shadow: var(--focus-ring);
}

.menu-filters__toggle-icon {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    margin-top: -5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.4s var(--ease-out);
}

.menu-filters__group.is-expanded .menu-filters__toggle-icon {
    margin-top: 5px;
    transform: rotate(225deg);
}

/* Subtle expansion accent */

.menu-filters__group.is-expanded .menu-filters__toggle {
    border-color: var(--accent);
    color: var(--accent);
}

/* Theme adjustments */

body.theme-dark .menu-filters__toggle {
    background: var(--bg);
}

body.theme-light .menu-filters__toggle {
    background: var(--bg);
}

/* Responsive */

@media (max-width: 992px) {
    .menu-filters {
        gap: 24px;
        margin-bottom: 28px;
    }

    .menu-filters__row {
        gap: 12px;
    }

    .menu-filters__toggle {
        min-width: 132px;
        padding: 0 14px;
    }
}

@media (max-width: 768px) {
    .menu-filters {
        --filter-control-height: 42px;
        --filter-column-gap: 10px;
    }

    .menu-filters__label {
        margin-bottom: 10px;
        font-size: 13px;
    }

    .menu-filters__btn {
        padding: 0 14px;
        font-size: 12px;
    }

    .menu-filters__toggle {
        min-width: 44px;
        width: 44px;
        padding: 0;
    }

    .menu-filters__toggle-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .menu-filters__toggle-icon {
        margin-right: 0;
    }
}

@media (max-width: 576px) {
    .menu-filters {
        --filter-control-height: 40px;

        gap: 22px;
        margin: 4px 0 24px;
    }

    .menu-filters__row {
        gap: 8px;
    }

    .menu-filters__btn {
        padding: 0 12px;
        font-size: 11px;
        letter-spacing: 0.03em;
    }

    .menu-filters__toggle {
        width: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .menu-filters__toggle-icon {
        width: 10px;
        height: 10px;
        flex-basis: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-filters__list,
    .menu-filters__btn,
    .menu-filters__toggle,
    .menu-filters__toggle-icon {
        transition: none;
    }
}
/* ==========================================================================
   Menu page categories
   ========================================================================== */

.menu-page__grid {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 128px;
    width: 100%;
    min-width: 0;
}

/* Category */

.menu-page__category {
    display: block;
    width: 100%;
    min-width: 0;
}

.menu-page__category[hidden],
.menu-page__category.is-hidden {
    display: none !important;
}

/* Category heading */

.menu-page__category-head {
    width: 100%;
    max-width: 1160px;
    margin: 0 0 64px 304px;
}

.menu-page__category-title {
    margin: 0;
    color: var(--text);
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: 0.68;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Cards inside category */

.menu-page__category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    width: 100%;
    min-width: 0;
}

/*
 * Когда карточка раскрыта, она остаётся в своей колонке.
 * Если раскрытая панель должна занимать обе колонки,
 * замените grid-column на 1 / -1.
 */

.menu-page__category-grid .menu-card {
    min-width: 0;
}

/* Empty state */

.menu-page__empty {
    grid-column: 1 / -1;
    width: 100%;
    margin: 24px 0 0;
    color: var(--muted);
}

.menu-page__empty.is-hidden,
.menu-page__empty[hidden] {
    display: none !important;
}

/* Reveal category heading */

.menu-page__category-head[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition:
        opacity 0.8s ease,
        transform 0.85s var(--ease-out);
    will-change: opacity, transform;
}

.menu-page__category-head[data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Category divider */

.menu-page__category.has-visible-previous {
    position: relative;
    padding-top: 128px;
}

.menu-page__category.has-visible-previous::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--border);
}

@media (max-width: 1400px) {
    .menu-page__category.has-visible-previous {
        padding-top: 104px;
    }
}

@media (max-width: 992px) {
    .menu-page__category.has-visible-previous {
        padding-top: 80px;
    }
}

@media (max-width: 576px) {
    .menu-page__category.has-visible-previous {
        padding-top: 64px;
    }
}

/* Theme polish */

body.theme-dark .menu-page__category + .menu-page__category::before {
    background: rgba(168, 145, 119, 0.18);
}

body.theme-light .menu-page__category + .menu-page__category::before {
    background: rgba(58, 45, 40, 0.16);
}

/* Responsive */

@media (max-width: 1500px) {
    .menu-page__category-head {
        max-width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 1400px) {
    .menu-page__grid {
        gap: 104px;
    }

    .menu-page__category + .menu-page__category {
        padding-top: 104px;
    }

    .menu-page__category-head {
        margin-bottom: 56px;
    }
}

@media (max-width: 1200px) {
    .menu-page__category-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 992px) {
    .menu-page__grid {
        gap: 80px;
    }

    .menu-page__category + .menu-page__category {
        padding-top: 80px;
    }

    .menu-page__category-head {
        margin-bottom: 40px;
    }

    .menu-page__category-title {
        font-size: var(--fs-h2);
        line-height: 0.78;
    }
}

@media (max-width: 576px) {
    .menu-page__grid {
        gap: 64px;
    }

    .menu-page__category + .menu-page__category {
        padding-top: 64px;
    }

    .menu-page__category-head {
        margin-bottom: 28px;
    }

    .menu-page__category-title {
        font-size: 40px;
        line-height: 0.92;
    }

    .menu-page__category-grid {
        gap: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-page__category-head[data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* ==========================================================================
   Menu card
   ========================================================================== */

.menu-card {
    --reveal-y: 28px;

    position: relative;
    display: block;
    min-width: 0;
    min-height: 220px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-soft);
    opacity: 0;
    transform: translate3d(0, var(--reveal-y), 0);
    transition:
        opacity 0.7s ease,
        transform 0.7s var(--ease-out),
        background-color 0.35s ease,
        box-shadow 0.35s ease;
    transition-delay: var(--delay, 0s);
    will-change: opacity, transform;
}

.menu-card.is-visible {
    --reveal-y: 0px;
    opacity: 1;
}

.menu-card.is-featured {
    box-shadow: inset 0 0 0 1px
        color-mix(in srgb, var(--accent) 35%, transparent);
}

.menu-card.is-hidden,
.menu-card[hidden] {
    display: none !important;
}

.menu-card:hover {
    background: var(--bg-soft-hover);
    box-shadow: var(--shadow-md);
}

/* Вся карточка является кнопкой */

.menu-card__trigger {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    width: 100%;
    min-height: 220px;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.menu-card__trigger:focus-visible {
    box-shadow: inset var(--focus-ring);
}

/* Изображение */

.menu-card__media {
    position: relative;
    display: block;
    width: 220px;
    min-width: 220px;
    height: 100%;
    min-height: 220px;
    overflow: hidden;
    background: var(--bg-deep);
}

.menu-card__media img,
.menu-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    border-radius: 0;
    object-fit: cover;
}

.menu-card__media img {
    opacity: 0.72;
    transition:
        opacity 0.4s ease,
        transform 0.75s var(--ease-out),
        filter 0.4s ease;
}

.menu-card__placeholder {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--accent) 12%, transparent),
            transparent 55%
        ),
        var(--bg-deep);
}

.menu-card:hover .menu-card__media img {
    opacity: 0.96;
    transform: scale(1.055);
    filter: saturate(1.05) contrast(1.03);
}

/* Значок открытия поверх изображения */

.menu-card__open-icon {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(239, 232, 223, 0.45);
    border-radius: 50%;
    background: rgba(29, 26, 22, 0.46);
    color: #EFE8DF;
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.9);
    transition:
        opacity var(--transition),
        transform var(--transition),
        background-color var(--transition),
        border-color var(--transition);
}

.menu-card__open-icon span {
    position: absolute;
    width: 14px;
    height: 1px;
    background: currentColor;
}

.menu-card__open-icon span:last-child {
    transform: rotate(90deg);
}

.menu-card:hover .menu-card__open-icon,
.menu-card__trigger:focus-visible .menu-card__open-icon {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.menu-card__open-icon:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

/* Текст карточки */

.menu-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-width: 0;
    padding: 28px 32px;
    transition: transform 0.35s var(--ease-out);
}

.menu-card:hover .menu-card__body {
    transform: translateX(4px);
}

.menu-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.menu-card__title {
    min-width: 0;
    margin: 0;
    color: var(--accent);
    font-family: var(--font-base);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    text-transform: none;
}

.menu-card__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    white-space: nowrap;
}

.menu-card__price-value {
    color: var(--text-strong);
    font-size: 20px;
    line-height: 1.1;
    font-weight: 500;
}

.menu-card__unit {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.menu-card__short {
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.45;
}

.menu-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.menu-card__tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--muted-strong);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* ==========================================================================
   Menu product modal
   ========================================================================== */

body.menu-modal-open {
    overflow: hidden;
}

/* Modal root */

.menu-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.menu-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Backdrop */

.menu-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: var(--bg-overlay);
    cursor: default;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* Window */

.menu-modal__window {
    position: relative;
    z-index: 1;
    width: min(1240px, 100%);
    max-height: calc(100vh - 64px);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.975);
    transition:
        opacity 0.42s ease,
        transform 0.48s var(--ease-out);
}

.menu-modal.is-open .menu-modal__window {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Scrollable content */

.menu-modal__inner {
    max-height: calc(100vh - 64px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.menu-modal__inner::-webkit-scrollbar {
    width: 8px;
}

.menu-modal__inner::-webkit-scrollbar-track {
    background: transparent;
}

.menu-modal__inner::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    background-clip: padding-box;
}

/* Product layout */

.menu-modal__product {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
    min-height: 620px;
}

/* Image */

.menu-modal__media {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    background: var(--bg-deep);
}

.menu-modal__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(0, 0, 0, 0.2) 100%
        ),
        linear-gradient(
            0deg,
            var(--accent-soft),
            var(--accent-soft)
        );
    pointer-events: none;
}

.menu-modal__image,
.menu-modal__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 620px;
    border-radius: 0;
    object-fit: cover;
}

.menu-modal__image {
    animation: menuModalImageIn 0.75s var(--ease-out) both;
}

.menu-modal__placeholder {
    background:
        radial-gradient(
            circle at 50% 40%,
            var(--accent-soft),
            transparent 38%
        ),
        var(--bg-deep);
}

/* Content */

.menu-modal__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 72px 64px 64px;
}

.menu-modal__sections {
    margin-bottom: 22px;
    color: var(--accent);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.menu-modal__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 32px;
}

.menu-modal__title {
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-family: var(--font-heading);
    font-size: clamp(52px, 4.1vw, 80px);
    line-height: 0.9;
    font-weight: 300;
    text-transform: uppercase;
}

.menu-modal__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    white-space: nowrap;
}

.menu-modal__price-value {
    color: var(--accent);
    font-size: 28px;
    line-height: 1;
    font-weight: 500;
}

.menu-modal__unit {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.menu-modal__short {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
    color: var(--muted-strong);
    font-size: 20px;
    line-height: 1.5;
    font-weight: 300;
}

.menu-modal__description {
    color: var(--text);
    font-size: 17px;
    line-height: 1.65;
}

.menu-modal__description > *:first-child {
    margin-top: 0;
}

.menu-modal__description > *:last-child {
    margin-bottom: 0;
}

.menu-modal__description ul,
.menu-modal__description ol {
    margin: 18px 0 0;
    padding-left: 1.2em;
}

.menu-modal__ingredients {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.menu-modal__ingredients-title {
    margin-bottom: 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-modal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.menu-modal__tag {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--muted-strong);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Close button */

.menu-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
    color: var(--text);
    cursor: pointer;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.menu-modal__close span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 1px;
    background: currentColor;
    transform-origin: center;
}

.menu-modal__close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu-modal__close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-modal__close:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg);
    transform: rotate(90deg);
}

.menu-modal__close:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Modal entrance */

.menu-modal__content > * {
    animation: menuModalContentIn 0.65s var(--ease-out) both;
}

.menu-modal__content > *:nth-child(1) {
    animation-delay: 0.08s;
}

.menu-modal__content > *:nth-child(2) {
    animation-delay: 0.13s;
}

.menu-modal__content > *:nth-child(3) {
    animation-delay: 0.18s;
}

.menu-modal__content > *:nth-child(4) {
    animation-delay: 0.23s;
}

.menu-modal__content > *:nth-child(5) {
    animation-delay: 0.28s;
}

@keyframes menuModalContentIn {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes menuModalImageIn {
    from {
        opacity: 0;
        transform: scale(1.04);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive modal */

@media (max-width: 1199px) {
    .menu-modal__product {
        grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
        min-height: 560px;
    }

    .menu-modal__media,
    .menu-modal__image,
    .menu-modal__placeholder {
        min-height: 560px;
    }

    .menu-modal__content {
        padding: 64px 44px 48px;
    }

    .menu-modal__heading {
        flex-direction: column;
        gap: 22px;
    }

    .menu-modal__price {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .menu-modal {
        align-items: flex-start;
        padding: 12px;
    }

    .menu-modal__window {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: var(--radius-md);
    }

    .menu-modal__inner {
        max-height: calc(100dvh - 24px);
    }

    .menu-modal__product {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .menu-modal__media {
        min-height: 0;
        aspect-ratio: 16 / 11;
    }

    .menu-modal__image,
    .menu-modal__placeholder {
        min-height: 0;
        height: 100%;
    }

    .menu-modal__content {
        justify-content: flex-start;
        padding: 36px 24px 40px;
    }

    .menu-modal__title {
        font-size: clamp(42px, 11vw, 64px);
    }

    .menu-modal__short {
        margin-bottom: 24px;
        padding-bottom: 24px;
        font-size: 18px;
    }

    .menu-modal__close {
        position: fixed;
        top: 26px;
        right: 26px;
        width: 44px;
        height: 44px;
        border-color: rgba(239, 232, 223, 0.5);
        background: rgba(29, 26, 22, 0.62);
        color: #EFE8DF;
    }
}

@media (max-width: 576px) {
    .menu-card__trigger {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .menu-card__media,
    .menu-card__media img,
    .menu-card__placeholder {
        width: 100%;
        min-width: 0;
        min-height: 220px;
        aspect-ratio: 16 / 11;
    }

    .menu-card__body {
        padding: 20px 18px 22px;
    }

    .menu-card:hover .menu-card__body {
        transform: none;
    }

    .menu-card__top {
        flex-direction: column;
        gap: 12px;
    }

    .menu-card__price {
        align-items: flex-start;
    }

    .menu-card__open-icon {
        opacity: 1;
        transform: none;
    }

    .menu-modal {
        padding: 8px;
    }

    .menu-modal__window,
    .menu-modal__inner {
        max-height: calc(100dvh - 16px);
    }

    .menu-modal__content {
        padding: 30px 18px 32px;
    }

    .menu-modal__heading {
        margin-bottom: 24px;
    }

    .menu-modal__title {
        font-size: 40px;
        line-height: 0.95;
    }

    .menu-modal__price-value {
        font-size: 24px;
    }

    .menu-modal__description {
        font-size: 15px;
        line-height: 1.6;
    }

    .menu-modal__ingredients {
        margin-top: 28px;
        padding-top: 24px;
    }

    .menu-modal__close {
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-modal,
    .menu-modal__window,
    .menu-modal__image,
    .menu-modal__content > *,
    .menu-card,
    .menu-card__media img,
    .menu-card__body,
    .menu-card__open-icon {
        animation: none !important;
        transition: none !important;
    }
}
/* ==========================================================================
   Menu block — collapsed categories
   ========================================================================== */

.menu-block__category {
    position: relative;
    min-width: 0;
}

.menu-block__buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    width: 100%;
    min-width: 0;
}

/* Скрытые позиции */

.menu-block__btn--extra[hidden] {
    display: none !important;
}

/*
 * Начальное состояние при раскрытии.
 * Класс is-revealing добавляется JavaScript.
 */

.menu-block__btn--extra.is-revealing {
    display: inline-flex;
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
    transition:
        opacity 0.32s ease,
        transform 0.42s var(--ease-out),
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

/* Показанная дополнительная позиция */

.menu-block__btn--extra.is-revealing.is-shown {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Состояние закрытия */

.menu-block__btn--extra.is-hiding {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(0.985);
    pointer-events: none;
}

/* Нижняя строка категории */

.menu-block__category-footer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 20px;
}

/* Кнопка раскрытия */

.menu-block__category-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 44px;
    min-width: 180px;
    padding: 0 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    transition:
        color var(--transition),
        border-color var(--transition),
        background-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.menu-block__category-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.menu-block__category-toggle:active {
    transform: translateY(0);
}

.menu-block__category-toggle:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Количество скрытых блюд */

.menu-block__category-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: 11px;
    line-height: 1;
    opacity: 0.72;
    transition:
        opacity var(--transition),
        transform var(--transition);
}

.menu-block__category.is-expanded
.menu-block__category-toggle-count {
    opacity: 0;
    transform: scale(0.75);
}

/* Стрелка */

.menu-block__category-toggle-icon {
    display: block;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    margin-top: -5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition:
        margin var(--transition),
        transform 0.4s var(--ease-out);
}

.menu-block__category.is-expanded
.menu-block__category-toggle {
    border-color: var(--accent);
    color: var(--accent);
}

.menu-block__category.is-expanded
.menu-block__category-toggle-icon {
    margin-top: 5px;
    transform: rotate(225deg);
}

/* Светлая тема */

body.theme-light .menu-block__category-toggle {
    border-color: var(--border-strong);
    color: var(--text);
}

body.theme-light .menu-block__category-toggle:hover,
body.theme-light .menu-block__category.is-expanded
.menu-block__category-toggle {
    border-color: var(--accent);
    color: var(--accent);
}

/* Responsive */

@media (max-width: 1199px) {
    .menu-block__buttons {
        gap: 12px 14px;
    }
}

@media (max-width: 768px) {
    .menu-block__buttons {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .menu-block__category-footer {
        margin-top: 16px;
    }

    .menu-block__category-toggle {
        width: 100%;
        min-width: 0;
        min-height: 48px;
    }
}

@media (max-width: 576px) {
    .menu-block__category-toggle {
        padding: 0 14px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-block__btn--extra,
    .menu-block__category-toggle,
    .menu-block__category-toggle-count,
    .menu-block__category-toggle-icon {
        transition: none !important;
    }
}