/* ==========================================================================
   PRO-Chef — template_styles.css
   Global styles: design tokens, reset, grid, typography, base UI components.
   Source: Figma design system (see "Design system.md"). Methodology: BEM.

   Contents
   1.  Fonts
   2.  Tokens: colors
   3.  Tokens: typography
   4.  Tokens: margin / padding / radius
   5.  Tokens: layout (breakpoints, container, grid)
   6.  Reset & base
   7.  Layout: .container, .grid
   8.  Typography classes (names match Figma text styles)
   9.  Component: .button
   10. Component: .icon-button
   11. Component: .special-button
   12. Component: .link
   13. Page sections: .section-heading, .section-panel, .marker
   14. Components: action-card, slider, segmented, accordion, review-card, input, checkbox, popup
   15. Header / Footer
   16. Main page sections: hero, projects, price, stage, cases, estimate, partners, team, statistics, reviews, warranty, emergency, reconstruction, faq, documents, cta

   Breakpoints (from Figma layouts):
   Desktop XL >= 1281px    — 12 col, gutter 20px, fixed container 1180px
   Desktop M  1024–1280px  — 12 col, gutter 20px, fluid, margin 40px
   Tablet     767–1023px   — 8 col,  gutter 20px, fluid, margin 40px
   Mobile     <= 766px     — 4 col,  gutter 16px, fluid, margin 20px
   ========================================================================== */


/* 1. Fonts
   Manrope — accent headings (Display, Heading, Title).
   Roboto  — body text, buttons, labels, captions.
   -------------------------------------------------------------------------- */
/* Self-hosted Manrope and Roboto (cyrillic + latin). Variable files, font-display: swap. */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 700 800;
    font-display: swap;
    src: url("fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 700 800;
    font-display: swap;
    src: url("fonts/xn7gYHE41ni1AdIRggexSg.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
    /* 2. Colors — Figma "Base Colors"
       ---------------------------------------------------------------------- */

    /* Dark */
    --color-dark-black: #101313;
    --color-dark-graphite: #232626;
    --color-dark-gray: #595959;
    --color-dark-pebble: #767676;
    --color-dark-neutral: #b6b6b6;
    --color-dark-neutral-40: rgba(182, 182, 182, 0.4);
    --color-dark-primary: #2f4346;      /* "Dark/Primary" — headings and text in page sections */

    /* Light */
    --color-light-white: #ffffff;
    --color-light-light: #f9f9f9;
    --color-light-pale: #ebf2f1;
    --color-light-sage: #d7e8e7;
    --color-light-white-8: rgba(255, 255, 255, 0.08);
    --color-light-neutral-15: rgba(182, 182, 182, 0.15);
    --color-light-neutral-20: rgba(182, 182, 182, 0.2);

    /* Accent */
    --color-accent-brand: #516b66;
    --color-accent-accent: #327264;
    --color-accent-emerald: #225953;
    --color-accent-dark-green: #233836;
    --color-accent-light-green: #09ae8b;
    --color-accent-lime: #94ff52;
    --color-accent-pale-green: #84a9a3;
    --color-accent-green-gradient: linear-gradient(317deg, #233836 53%, #327264 100%);

    /* Special */
    --color-special-yellow: #cb9800;
    --color-special-yellow-dark: #89591a;
    --color-special-yellow-bg: #fdf9e8;
    --color-special-yellow-border: #fbf2d1;
    --color-special-red: #c20003;
    --color-special-red-dark: #891a1c;
    --color-special-red-bg: #ffebeb;
    --color-special-red-border: #f7cbcb;


    /* 3. Typography
       ---------------------------------------------------------------------- */
    --font-family-accent: "Manrope", sans-serif;
    --font-family-base: "Roboto", sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;


    /* 4. Margin — distance between components
       ---------------------------------------------------------------------- */
    --margin-5x-small: 2px;     /* between S buttons, badges, tags */
    --margin-4x-small: 4px;     /* between S buttons, badges, tags */
    --margin-3x-small: 8px;     /* main text ↔ secondary text */
    --margin-2x-small: 10px;    /* M/L buttons, badges, tags; component ↔ caption */
    --margin-x-small: 12px;     /* most standard M components */
    --margin-small: 16px;       /* heading ↔ text, default size */
    --margin: 20px;             /* text blocks ↔ interactive panels */
    --margin-medium: 24px;      /* heading ↔ text, large size */
    --margin-x-medium: 28px;    /* heading ↔ text, large size */
    --margin-large: 32px;       /* paragraph gap when next starts with a heading */
    --margin-x-large: 48px;     /* between sub-sections of a page */
    --margin-2x-large: 60px;    /* Header ↔ next component */

    /* Padding — inner spacing of components */
    --padding-2x-small: 4px;            /* small components, size S */
    --padding-x-small: 8px;             /* Badge-large */
    --padding-small: 10px;              /* tables */
    --padding: 12px;                    /* most standard M components */
    --padding-medium: 16px;             /* popups */
    --padding-large: 20px;              /* cards S */
    --padding-x-large: 28px;            /* modals, cards M, L */
    --padding-2x-large: 32px;           /* inputs, buttons, window borders */
    --padding-section-small: 40px;      /* vertical section bounds, S */
    --padding-section-medium: 60px;     /* vertical section bounds, M, L */
    --padding-section-large: 80px;
    --padding-section-x-large: 100px;
    --padding-section-2x-large: 120px;

    /* Radius */
    --radius-3x-small: 4px;     /* Badge-small */
    --radius-2x-small: 8px;     /* Badge-large */
    --radius-x-small: 12px;     /* inputs, buttons, window borders */
    --radius: 16px;             /* Tag */
    --radius-medium: 20px;      /* cards, images */
    --radius-large: 24px;       /* modals (named "radius-x-large" in Figma, duplicated) */
    --radius-x-large: 28px;     /* cards, images, banners S */
    --radius-2x-large: 32px;    /* banners M */
    --radius-3x-large: 40px;    /* banners L */
    --radius-4x-large: 48px;    /* round buttons L */


    /* 5. Layout
       ---------------------------------------------------------------------- */
    --container-width: 1180px;
    --container-padding: 40px;
    --grid-columns: 12;
    --grid-gutter: 20px;
}

@media (max-width: 1023px) {
    :root {
        --grid-columns: 8;
    }
}

@media (max-width: 766px) {
    :root {
        --container-padding: 20px;
        --grid-columns: 4;
        --grid-gutter: 16px;
    }
}


/* 6. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark-black);
    background-color: var(--color-light-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, blockquote, dl, dd {
    margin: 0;
}

/* :where() — zero specificity, so block classes can set their own padding */
:where(ul[class], ol[class]) {
    padding: 0;
    list-style: none;
}

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

[hidden] {
    display: none !important;
}

/* Emphasis in texts — Roboto SemiBold (Figma) */
b,
strong {
    font-weight: var(--font-weight-semibold);
}

a {
    color: inherit;
    text-decoration: none;
}

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

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


/* 7. Layout
   -------------------------------------------------------------------------- */
/* <= 1280px: fluid, 100% width with side paddings (40px, mobile 20px) */
.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* >= 1281px: fixed 1180px container */
@media (min-width: 1281px) {
    .container {
        max-width: var(--container-width);
        padding-inline: 0;
    }
}

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


/* 8. Typography — class names match Figma text styles.
   Values: Desktop by default, Tablet / Mobile overrides below.
   -------------------------------------------------------------------------- */

/* Display — large banner headings, once per screen */
.display-1,
.display-2,
.display-3,
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
h1, h2, h3, h4, h5 {
    font-family: var(--font-family-accent);
    font-weight: var(--font-weight-extrabold);
}

.display-1 { font-size: 72px; line-height: 80px; letter-spacing: -1.5px; }
.display-2 { font-size: 64px; line-height: 72px; letter-spacing: -1.5px; }
.display-3 { font-size: 56px; line-height: 64px; letter-spacing: -1.5px; }

/* Heading — page headings */
.heading-1, h1 { font-size: 48px; line-height: 56px; letter-spacing: -0.8px; }
.heading-2, h2 { font-size: 44px; line-height: 52px; letter-spacing: -0.8px; }
.heading-3, h3 { font-size: 40px; line-height: 48px; letter-spacing: -0.5px; }
.heading-4, h4 { font-size: 36px; line-height: 44px; letter-spacing: -0.5px; }
.heading-5, h5 { font-size: 32px; line-height: 40px; letter-spacing: -0.3px; }

/* Title — card and sub-section headings (L, M, S, XS) */
.title-1,
.title-2,
.title-3,
.title-4 {
    font-family: var(--font-family-accent);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
}

.title-1 { font-size: 28px; line-height: 36px; }
.title-2 { font-size: 24px; line-height: 32px; }
.title-3 { font-size: 20px; line-height: 28px; }
.title-4 { font-size: 16px; line-height: 24px; }

/* Body — running text (L = 1, M/S = 2) */
.body-1,
.body-1-bold,
.body-1-link,
.body-2,
.body-2-bold,
.body-2-link {
    font-family: var(--font-family-base);
    letter-spacing: 0;
}

.body-1,
.body-1-bold,
.body-1-link {
    font-size: 20px;
    line-height: 28px;
}

.body-2,
.body-2-bold,
.body-2-link {
    font-size: 16px;
    line-height: 24px;
}

.body-1,
.body-2 {
    font-weight: var(--font-weight-regular);
}

.body-1-bold,
.body-1-link,
.body-2-bold,
.body-2-link {
    font-weight: var(--font-weight-semibold);
}

.body-1-link,
.body-2-link {
    text-decoration: underline;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.14em;
    text-decoration-skip-ink: none;
}

/* Label — interactive elements (L, M, S) */
.label-1,
.label-2,
.label-3 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
}

.label-1 { font-size: 20px; line-height: 20px; }
.label-2 { font-size: 16px; line-height: 16px; }
.label-3 { font-size: 14px; line-height: 14px; }

/* Caption — small captions, hints, dates; card categories */
.caption-1 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0;
}

.caption-2 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
}

/* Tablet */
@media (max-width: 1023px) {
    .display-1 { font-size: 64px; line-height: 72px; letter-spacing: -1.5px; }
    .display-2 { font-size: 56px; line-height: 64px; letter-spacing: -1.5px; }
    .display-3 { font-size: 48px; line-height: 56px; letter-spacing: -1px; }

    .heading-1, h1 { font-size: 44px; line-height: 52px; letter-spacing: -0.8px; }
    .heading-2, h2 { font-size: 40px; line-height: 48px; letter-spacing: -0.5px; }
    .heading-3, h3 { font-size: 36px; line-height: 44px; letter-spacing: -0.5px; }
    .heading-4, h4 { font-size: 32px; line-height: 40px; letter-spacing: -0.3px; }
    .heading-5, h5 { font-size: 28px; line-height: 36px; letter-spacing: -0.3px; }

    .title-1 { font-size: 24px; line-height: 32px; }
    .title-2 { font-size: 20px; line-height: 28px; }
    .title-3 { font-size: 16px; line-height: 24px; }

    .body-1,
    .body-1-bold,
    .body-1-link {
        line-height: 26px;
    }

    .body-2,
    .body-2-bold,
    .body-2-link {
        line-height: 22px;
    }
}

/* Mobile */
@media (max-width: 766px) {
    .display-1 { font-size: 56px; line-height: 64px; letter-spacing: -1.5px; }
    .display-2 { font-size: 48px; line-height: 56px; letter-spacing: -1px; }
    .display-3 { font-size: 40px; line-height: 48px; letter-spacing: -1px; }

    .heading-1, h1 { font-size: 40px; line-height: 48px; letter-spacing: -0.5px; }
    .heading-2, h2 { font-size: 36px; line-height: 44px; letter-spacing: -0.5px; }
    .heading-3, h3 { font-size: 32px; line-height: 40px; letter-spacing: -0.3px; }
    .heading-4, h4 { font-size: 28px; line-height: 36px; letter-spacing: -0.3px; }
    .heading-5, h5 { font-size: 24px; line-height: 32px; letter-spacing: 0; }

    .title-1 { font-size: 20px; line-height: 28px; }
}


/* 9. Button
   Types:  --primary (default) | --primary-inverted | --secondary | --tertiary
           | --light (white with dark text — page CTAs on photos and dark panels)
   Sizes:  --l (default) | --m | --s
   States: :hover, :focus-visible, :active (pressed), :disabled / [aria-disabled="true"]

   <button class="button button--primary button--m" type="button">Label</button>
   -------------------------------------------------------------------------- */
.button {
    --button-bg: var(--color-accent-accent);
    --button-color: var(--color-light-white);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 28px;
    border: 0;
    border-radius: 30px;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
    color: var(--button-color);
    background: var(--button-bg);
    cursor: pointer;
}

.button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 4px var(--color-accent-light-green);
}

.button:disabled,
.button[aria-disabled="true"] {
    pointer-events: none;
    cursor: default;
}

/* Sizes */
.button--m {
    padding: 16px 24px;
}

.button--s {
    padding: 12px 20px;
}

/* Primary */
.button--primary:hover,
.button--primary:focus-visible,
.button--primary:active {
    --button-bg: var(--color-accent-emerald);
}

.button--primary:disabled,
.button--primary[aria-disabled="true"] {
    --button-bg: var(--color-light-neutral-15);
    --button-color: var(--color-dark-neutral);
}

/* Primary-inverted — for dark backgrounds */
.button--primary-inverted {
    --button-bg: var(--color-light-white);
    --button-color: var(--color-accent-accent);
}

.button--primary-inverted:hover {
    --button-bg: var(--color-light-light);
    --button-color: var(--color-accent-emerald);
}

.button--primary-inverted:active {
    --button-bg: var(--color-light-pale);
    --button-color: var(--color-accent-emerald);
}

.button--primary-inverted:disabled,
.button--primary-inverted[aria-disabled="true"] {
    --button-bg: var(--color-light-neutral-15);
    --button-color: var(--color-dark-gray);
}

/* Secondary */
.button--secondary {
    --button-bg: var(--color-light-pale);
    --button-color: var(--color-accent-accent);
}

.button--secondary:hover,
.button--secondary:active {
    --button-bg: var(--color-light-sage);
    --button-color: var(--color-accent-emerald);
}

.button--secondary:disabled,
.button--secondary[aria-disabled="true"] {
    --button-bg: var(--color-light-neutral-15);
    --button-color: var(--color-dark-neutral);
}

/* Tertiary */
.button--tertiary {
    --button-bg: var(--color-light-neutral-15);
    --button-color: var(--color-dark-black);
}

.button--tertiary:hover,
.button--tertiary:active {
    --button-bg: var(--color-light-pale);
}

.button--tertiary:disabled,
.button--tertiary[aria-disabled="true"] {
    --button-bg: var(--color-dark-neutral-40);
    --button-color: var(--color-dark-neutral);
}

/* Light — white with dark text (main page: Projects, Price, Estimate, Reconstruction, CTA).
   States follow primary-inverted (same white surface). */
.button--light {
    --button-bg: var(--color-light-white);
    --button-color: var(--color-dark-primary);
}

.button--light:hover {
    --button-bg: var(--color-light-light);
}

.button--light:active {
    --button-bg: var(--color-light-pale);
}

.button--light:disabled,
.button--light[aria-disabled="true"] {
    --button-bg: var(--color-light-neutral-15);
    --button-color: var(--color-dark-gray);
}


/* 10. Icon-Button
   Types:  --primary (default) | --primary-inverted | --secondary | --tertiary
   Styles: default (filled) | --outline (primary, primary-inverted) | --plain (secondary, tertiary)
   Sizes:  --l (default, 56px) | --m (48px) | --s (40px)
   Icon: inline SVG with fill/stroke="currentColor".

   <button class="icon-button icon-button--secondary icon-button--m" type="button" aria-label="Call">
       <svg class="icon-button__icon">…</svg>
   </button>
   -------------------------------------------------------------------------- */
.icon-button {
    --icon-button-bg: var(--color-accent-accent);
    --icon-button-color: var(--color-light-white);
    --icon-button-border: transparent;

    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 0;
    border-radius: 30px;
    color: var(--icon-button-color);
    background: var(--icon-button-bg);
    box-shadow: inset 0 0 0 1px var(--icon-button-border);
    cursor: pointer;
}

.icon-button__icon {
    width: 24px;
    height: 24px;
}

.icon-button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 4px var(--color-accent-light-green);
}

.icon-button:disabled,
.icon-button[aria-disabled="true"] {
    pointer-events: none;
    cursor: default;
}

/* Sizes */
.icon-button--m {
    padding: 12px;
}

.icon-button--s {
    padding: 12px;
}

.icon-button--s .icon-button__icon {
    width: 16px;
    height: 16px;
}

/* Primary */
.icon-button--primary:hover,
.icon-button--primary:focus-visible,
.icon-button--primary:active {
    --icon-button-bg: var(--color-accent-emerald);
}

.icon-button--primary:disabled,
.icon-button--primary[aria-disabled="true"] {
    --icon-button-bg: var(--color-dark-neutral-40);
    --icon-button-color: var(--color-dark-neutral);
}

/* Primary-inverted — for dark backgrounds */
.icon-button--primary-inverted {
    --icon-button-bg: var(--color-light-white);
    --icon-button-color: var(--color-accent-accent);
}

.icon-button--primary-inverted:hover {
    --icon-button-bg: var(--color-light-light);
    --icon-button-color: var(--color-accent-emerald);
}

.icon-button--primary-inverted:active {
    --icon-button-bg: var(--color-light-pale);
    --icon-button-color: var(--color-accent-emerald);
}

.icon-button--primary-inverted:disabled,
.icon-button--primary-inverted[aria-disabled="true"] {
    --icon-button-bg: var(--color-light-neutral-15);
    --icon-button-color: var(--color-dark-gray);
}

/* Secondary */
.icon-button--secondary {
    --icon-button-bg: var(--color-light-pale);
    --icon-button-color: var(--color-accent-accent);
}

.icon-button--secondary:hover,
.icon-button--secondary:active {
    --icon-button-bg: var(--color-light-sage);
    --icon-button-color: var(--color-accent-emerald);
}

.icon-button--secondary:disabled,
.icon-button--secondary[aria-disabled="true"] {
    --icon-button-bg: var(--color-light-neutral-15);
    --icon-button-color: var(--color-dark-neutral);
}

/* Tertiary */
.icon-button--tertiary {
    --icon-button-bg: var(--color-light-neutral-15);
    --icon-button-color: var(--color-dark-pebble);
}

.icon-button--tertiary:hover,
.icon-button--tertiary:active {
    --icon-button-bg: var(--color-dark-neutral-40);
}

.icon-button--tertiary:disabled,
.icon-button--tertiary[aria-disabled="true"] {
    --icon-button-bg: var(--color-dark-neutral-40);
    --icon-button-color: var(--color-dark-neutral);
}

/* Style: outline (1px border, no fill) */
.icon-button--outline {
    --icon-button-bg: transparent;
}

.icon-button--primary.icon-button--outline {
    --icon-button-color: var(--color-accent-accent);
    --icon-button-border: var(--color-accent-accent);
}

.icon-button--primary.icon-button--outline:hover,
.icon-button--primary.icon-button--outline:focus-visible,
.icon-button--primary.icon-button--outline:active {
    --icon-button-bg: transparent;
    --icon-button-color: var(--color-accent-emerald);
    --icon-button-border: var(--color-accent-emerald);
}

.icon-button--primary-inverted.icon-button--outline {
    --icon-button-color: var(--color-light-white);
    --icon-button-border: var(--color-light-white);
}

.icon-button--primary-inverted.icon-button--outline:hover,
.icon-button--primary-inverted.icon-button--outline:focus-visible,
.icon-button--primary-inverted.icon-button--outline:active {
    --icon-button-bg: transparent;
    --icon-button-color: var(--color-light-sage);
    --icon-button-border: var(--color-light-sage);
}

.icon-button--outline:disabled,
.icon-button--outline[aria-disabled="true"] {
    --icon-button-bg: transparent;
    --icon-button-color: var(--color-dark-neutral);
    --icon-button-border: var(--color-dark-neutral);
}

/* Style: plain (icon only, no fill) */
.icon-button--plain,
.icon-button--plain:hover,
.icon-button--plain:focus-visible,
.icon-button--plain:active,
.icon-button--plain:disabled,
.icon-button--plain[aria-disabled="true"] {
    --icon-button-bg: transparent;
}


/* 11. Special Button — button with a round icon on the left
   Types:  --primary (default) | --primary-inverted
   Sizes:  --l (default) | --m (primary-inverted only: dark icon circle, lime icon)

   <a class="special-button special-button--primary-inverted" href="tel:…">
       <span class="special-button__icon"><svg>…</svg></span>
       <span class="special-button__label">Label</span>
   </a>
   -------------------------------------------------------------------------- */
.special-button {
    --special-button-bg: var(--color-accent-accent);
    --special-button-color: var(--color-light-white);
    --special-button-icon-bg: var(--color-light-white);
    --special-button-icon-color: var(--color-accent-accent);

    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 4px 52px 4px 4px;
    border: 0;
    border-radius: 30px;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
    line-height: 16px;
    white-space: nowrap;
    color: var(--special-button-color);
    background: var(--special-button-bg);
    cursor: pointer;
}

.special-button__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: 30px;
    color: var(--special-button-icon-color);
    background: var(--special-button-icon-bg);
}

.special-button__icon > svg,
.special-button__icon > img {
    width: 16px;
    height: 16px;
}

.special-button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 4px var(--color-accent-light-green);
}

.special-button:disabled,
.special-button[aria-disabled="true"] {
    pointer-events: none;
    cursor: default;
}

/* Primary */
.special-button--primary:hover,
.special-button--primary:focus-visible,
.special-button--primary:active {
    --special-button-bg: var(--color-accent-emerald);
}

.special-button--primary:disabled,
.special-button--primary[aria-disabled="true"] {
    --special-button-bg: var(--color-light-neutral-15);
    --special-button-color: var(--color-dark-neutral);
    --special-button-icon-color: var(--color-dark-neutral);
}

/* Primary-inverted — for dark backgrounds */
.special-button--primary-inverted {
    --special-button-bg: var(--color-light-white);
    --special-button-color: var(--color-accent-accent);
    --special-button-icon-bg: var(--color-accent-accent);
    --special-button-icon-color: var(--color-light-white);
}

.special-button--primary-inverted:hover {
    --special-button-bg: var(--color-light-light);
}

.special-button--primary-inverted:active {
    --special-button-bg: var(--color-light-pale);
}

.special-button--primary-inverted:hover,
.special-button--primary-inverted:focus-visible,
.special-button--primary-inverted:active {
    --special-button-color: var(--color-accent-emerald);
    --special-button-icon-bg: var(--color-accent-emerald);
}

.special-button--primary-inverted:disabled,
.special-button--primary-inverted[aria-disabled="true"] {
    --special-button-bg: var(--color-light-neutral-15);
    --special-button-color: var(--color-dark-gray);
    --special-button-icon-bg: var(--color-light-neutral-15);
    --special-button-icon-color: var(--color-dark-pebble);
}

/* Size M (primary-inverted) */
.special-button--m {
    gap: 12px;
}

.special-button--primary-inverted.special-button--m {
    --special-button-color: var(--color-dark-black);
    --special-button-icon-bg: var(--color-dark-black);
    --special-button-icon-color: var(--color-accent-lime);
}

.special-button--primary-inverted.special-button--m:hover,
.special-button--primary-inverted.special-button--m:active {
    --special-button-bg: var(--color-light-light);
}

.special-button--primary-inverted.special-button--m:focus-visible {
    --special-button-bg: var(--color-light-white);
}

.special-button--primary-inverted.special-button--m:disabled,
.special-button--primary-inverted.special-button--m[aria-disabled="true"] {
    --special-button-bg: var(--color-light-neutral-15);
    --special-button-color: var(--color-dark-gray);
    --special-button-icon-bg: var(--color-light-neutral-15);
    --special-button-icon-color: var(--color-dark-pebble);
}


/* 12. Link
   Source: Figma "Link" 326:4301 (file Yb1VrQZoNECLMATpHYuEok). Demo: link/link.html.
   Styles: --primary (default, Dark/Primary) | --primary-inverted | --accent
   Types:  default = "button" (Label-2, no underline) | --underline = "link" (Body-2-link)
   --inline — inside a paragraph (wraps with the text)

   <a class="link link--accent link--underline" href="#">Label</a>
   -------------------------------------------------------------------------- */
.link {
    --link-color: var(--color-dark-primary);

    display: inline-flex;
    align-items: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
    line-height: 16px;
    color: var(--link-color);
    cursor: pointer;
}

.link:focus-visible {
    outline: none;
}

.link:disabled,
.link[aria-disabled="true"] {
    pointer-events: none;
    cursor: default;
}

.link--underline {
    line-height: 24px;
    text-decoration: underline;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.14em;
    text-decoration-skip-ink: none;
}

/* Inline — a link inside running text: wraps with the text, keeps its line height */
.link--inline {
    display: inline;
    line-height: inherit;
}

/* Primary */
.link--primary:hover {
    --link-color: var(--color-accent-accent);
}

.link--primary:focus-visible,
.link--primary:active {
    --link-color: var(--color-accent-emerald);
}

.link--primary:disabled,
.link--primary[aria-disabled="true"] {
    --link-color: var(--color-dark-neutral);
}

/* Primary-inverted — for dark backgrounds */
.link--primary-inverted {
    --link-color: var(--color-light-white);
}

.link--primary-inverted:hover {
    --link-color: var(--color-accent-accent);
}

.link--primary-inverted:focus-visible,
.link--primary-inverted:active {
    --link-color: var(--color-accent-emerald);
}

.link--primary-inverted:disabled,
.link--primary-inverted[aria-disabled="true"] {
    --link-color: var(--color-dark-gray);
}

/* Accent */
.link--accent {
    --link-color: var(--color-accent-accent);
}

.link--accent:hover,
.link--accent:focus-visible {
    --link-color: var(--color-accent-emerald);
}

.link--accent:active {
    --link-color: var(--color-accent-dark-green);
}

.link--accent:disabled,
.link--accent[aria-disabled="true"] {
    --link-color: var(--color-dark-neutral);
}


/* 13. Page sections — shared parts of page sections (main page and others)
   -------------------------------------------------------------------------- */

/* Page main area: a size container (full page width without the scrollbar —
   cqw units for full-bleed sliders) that clips their horizontal overflow */
.page-main {
    container-type: inline-size;
    overflow-x: clip;
}

/* Section heading: Heading-3 title + optional Body-2 text.
   Modifiers: --center (centered column), --row (title left, controls/text right),
              --inverted (on dark panels).

   <div class="section-heading section-heading--center">
       <h2 class="section-heading__title heading-3">Title</h2>
       <p class="section-heading__text body-2">Text</p>
   </div> */
.section-heading {
    display: flex;
    flex-direction: column;
    gap: var(--margin-x-medium);
}

.section-heading__title {
    color: var(--color-dark-primary);
}

.section-heading__text {
    color: var(--color-dark-pebble);
}

.section-heading--center {
    align-items: center;
    text-align: center;
}

.section-heading--row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--margin);
}

.section-heading--inverted .section-heading__title {
    color: var(--color-light-white);
}

.section-heading--inverted .section-heading__text {
    color: var(--color-light-light);
}

/* Centered heading column is limited to 720px (Figma) */
.section-heading--center .section-heading__title,
.section-heading--center .section-heading__text {
    max-width: 720px;
}

/* Wide panel: a colored card wider than the container (40px from the screen
   edges, mobile 20px); its content is 1180px max, centered.

   <section class="section-panel">
       <div class="section-panel__inner">…</div>
   </section> */
.section-panel {
    margin-inline: var(--padding-section-small);
    padding: var(--padding-section-large) var(--padding-section-small);
    border-radius: var(--radius-medium);
    background: var(--color-accent-green-gradient);
    overflow: hidden;
}

.section-panel__inner {
    max-width: var(--container-width);
    margin-inline: auto;
}

/* Marker: 8px dot centered in a square box (20 / 24 / 28px — set by the block).
   Color — currentColor. */
.marker {
    --marker-size: 24px;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--marker-size);
    height: var(--marker-size);
}

.marker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

@media (max-width: 1023px) {
    .section-heading {
        gap: var(--margin-medium);
    }

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

@media (max-width: 766px) {
    .section-heading {
        gap: var(--margin);
    }

    .section-panel {
        margin-inline: var(--padding-large);
        padding: var(--padding-x-large) 24px;
    }
}


/* ==========================================================================
   14. Components
   ========================================================================== */


/* ---- action-card ---- */

/* ==========================================================================
   PRO-Chef — Action-card component ("Аварийный ремонт котельных")
   Source: Figma — Header menu (Action-card) and Hero banner.
   Depends on template_styles.css (tokens, .icon-button, .marker, typography).

   Sizes: default (Header menu: padding 16, gap 12) | --l (Hero: padding 20, gap 16, 360px)
   Mobile (<= 766px): padding 12, gap 8, image 92.

   <a class="action-card" href="#">
       <img class="action-card__image" src="…" width="96" height="96" alt="">
       <span class="action-card__body">
           <span class="action-card__title title-4"><span class="marker action-card__marker"></span>Title</span>
           <span class="action-card__footer">
               <span class="action-card__text caption-1">Text</span>
               <span class="icon-button icon-button--primary-inverted action-card__arrow" aria-hidden="true"><svg class="icon-button__icon">…</svg></span>
           </span>
       </span>
   </a>
   ========================================================================== */

.action-card {
    display: flex;
    gap: var(--margin-x-small);
    padding: var(--padding-medium);
    border-radius: var(--radius-x-small);
    background-color: var(--color-dark-graphite);
}

.action-card:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 4px var(--color-accent-light-green);
}

.action-card__image {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-2x-small);
    object-fit: cover;
}

.action-card__body {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.action-card__title {
    display: flex;
    align-items: flex-start;
    gap: var(--margin-4x-small);
    color: var(--color-light-white);
}

.action-card__marker {
    --marker-size: 20px;

    color: var(--color-accent-lime);
}

.action-card__footer {
    display: flex;
    align-items: center;
    gap: var(--margin);
    padding-left: 24px;
}

.action-card__text {
    flex: 1 0 0;
    min-width: 0;
    color: var(--color-light-pale);
}

/* Icon-button 40px with a 24px icon */
.action-card__arrow {
    padding: var(--padding-x-small);
}

.action-card:hover .action-card__arrow {
    --icon-button-bg: var(--color-light-light);
    --icon-button-color: var(--color-accent-emerald);
}

/* Size L — Hero banner */
.action-card--l {
    gap: var(--margin-small);
    width: 360px;
    padding: var(--padding-large);
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .action-card {
        gap: var(--margin-3x-small);
        padding: var(--padding);
    }

    .action-card__image {
        width: 92px;
        height: 92px;
    }

    .action-card__title {
        gap: var(--margin-5x-small);
    }

    .action-card__marker {
        height: 24px;
    }

    .action-card__footer {
        gap: var(--margin-x-small);
        padding-left: 22px;
    }
}


/* ---- slider ---- */

/* ==========================================================================
   PRO-Chef — Slider component
   Horizontal scroll with snapping (CSS scroll-snap) + optional arrows and dots.
   Used on the main page: Stage, Cases, Reviews (all screens), Price and Team
   (tablet / mobile). Depends on template_styles.css (tokens, .icon-button).

   <div class="slider" id="stage-slider">
       <div class="slider__track">
           <div class="slider__item">…</div>
       </div>
   </div>
   <button class="icon-button …" type="button" data-slider-prev="stage-slider">…</button>
   <button class="icon-button …" type="button" data-slider-next="stage-slider">…</button>
   <div class="slider-dots" data-slider-dots="stage-slider"></div>   ← dots are built by slider.js
   Arrows get the disabled attribute at the ends of the track (their disabled style — .icon-button).

   Item width — --slider-item-width on .slider (default: 100%).
   .slider--bleed — the track goes past the container to the screen edges
                    (cards are visible outside the 1180px column, as in Figma).
   .slider--static-desktop — on >= 1024px the track is a plain row, no scrolling
                             (Price, Team: sliders only on tablet / mobile).
   Mouse drag (slider.js): .slider--draggable — the track can scroll (grab cursor);
                           .slider--dragging — while dragging (no snapping / smooth scroll).
   ========================================================================== */

.slider {
    --slider-item-width: 100%;
    --slider-gap: var(--grid-gutter);
}

.slider__track {
    display: flex;
    gap: var(--slider-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

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

.slider__item {
    flex: 0 0 var(--slider-item-width);
    min-width: 0;
    scroll-snap-align: start;
}

/* Bleed: track spans the whole page width, first item stays aligned with the
   container. 100cqw — width of .page-main (a size container, clips the overflow). */
.slider--bleed .slider__track {
    --slider-bleed: max(var(--container-padding), (100cqw - var(--container-width)) / 2);

    margin-inline: calc(50% - 50cqw);
    padding-inline: var(--slider-bleed);
    scroll-padding-inline: var(--slider-bleed);
}

/* Mouse drag */
@media (hover: hover) and (pointer: fine) {
    .slider--draggable .slider__track {
        cursor: grab;
    }
}

.slider--dragging .slider__track {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}

@media (min-width: 1024px) {
    .slider--static-desktop .slider__track {
        overflow: visible;
    }

    .slider--static-desktop .slider__item {
        flex: 1 0 0;
    }
}


/* Dots (Figma "Slider-selector")
   -------------------------------------------------------------------------- */
.slider-dots {
    display: flex;
    align-items: center;
    align-self: center;
    width: max-content;
    margin-inline: auto;
    padding: var(--padding-2x-small) var(--padding-medium);
    border-radius: 36px;
    background-color: var(--color-light-neutral-15);
}

.slider-dots:empty {
    display: none;
}

.slider-dots__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 48px;
    padding: 0;
}

.slider-dots__dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-accent-pale-green);
    transition: width 0.3s ease;
}

.slider-dots__dot--active {
    width: 64px;
}

.slider-dots__dot--active::before {
    width: 48px;
}

.slider-dots__dot:focus-visible {
    outline: none;
}

.slider-dots__dot:focus-visible::before {
    box-shadow: 0 0 0 2px var(--color-accent-light-green);
}


/* ---- segmented ---- */

/* ==========================================================================
   PRO-Chef — Segmented button (tabs)
   Source: Figma "Segmented button" (main page, Projects section).
   Depends on template_styles.css (tokens, typography).

   Buttons switch panels (tabs): segmented.js sets aria-selected on the buttons
   and the "hidden" attribute on the panels.

   <div class="segmented" role="tablist" aria-label="…">
       <button class="segmented__button label-2" type="button" role="tab" aria-selected="true" aria-controls="panel-1">…</button>
       <button class="segmented__button label-2" type="button" role="tab" aria-selected="false" aria-controls="panel-2">…</button>
   </div>
   <div id="panel-1" role="tabpanel">…</div>
   <div id="panel-2" role="tabpanel" hidden>…</div>

   Mobile: buttons stack vertically and take the full width.
   ========================================================================== */

.segmented {
    display: flex;
    gap: var(--margin-4x-small);
    width: max-content;
    max-width: 100%;
    padding: var(--padding-x-small);
    border-radius: 36px;
    background-color: var(--color-light-neutral-15);
}

.segmented__button {
    width: 240px;
    min-height: 40px;
    padding: var(--padding-large) 30px;
    border-radius: 30px;
    text-align: center;
    color: var(--color-dark-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.segmented__button:hover {
    background-color: var(--color-light-neutral-15);
}

.segmented__button[aria-selected="true"] {
    color: var(--color-light-white);
    background-color: var(--color-accent-accent);
}

.segmented__button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 4px var(--color-accent-light-green);
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .segmented {
        flex-direction: column;
        width: 100%;
    }

    .segmented__button {
        width: 100%;
    }
}


/* ---- accordion ---- */

/* ==========================================================================
   PRO-Chef — Accordion component
   Source: Figma "Accordeon" (Type=Desktop | Tablet | Mobile, State=Collapsed | Expanded),
   file 5RWt7Qt6CbCFmmfsT3Np1Y, node 314:2657.
   Depends on template_styles.css (tokens, typography).

   State: .accordion--open (set by accordion.js together with aria-expanded).
   Opening is animated: the panel grows from 0 to its height (grid rows 0fr → 1fr),
   the chevron turns up — see the designer's note in Figma (motion FAQ accordion).

   <div class="accordion">
       <h3 class="accordion__heading">
           <button class="accordion__toggle" type="button" aria-expanded="false" aria-controls="faq-1">
               <span class="accordion__title title-3">Question</span>
               <span class="accordion__icon"><svg>…chevron-down…</svg></span>
           </button>
       </h3>
       <div class="accordion__panel" id="faq-1" role="region">
           <div class="accordion__body"><div class="accordion__content body-2">Answer</div></div>
       </div>
   </div>

   Answer content: plain text or several <p> / <ul class="accordion__list"> (gap 16).
   List item: <li class="accordion__list-item"><span class="marker accordion__marker"></span>Text</li>
   Link in text: <a class="link link--accent link--underline link--inline" href="#">…</a>
   ========================================================================== */

.accordion {
    --accordion-color: var(--color-dark-primary);

    border-radius: var(--radius-x-small);
    background-color: var(--color-light-neutral-15);
}

/* Dark backgrounds (e.g. the price section) */
.accordion--inverted {
    --accordion-color: var(--color-light-white);
}

.accordion__heading {
    margin: 0;
    font: inherit;
}

.accordion__toggle {
    display: flex;
    align-items: center;
    gap: var(--margin-x-medium);
    width: 100%;
    padding: var(--padding-x-large) var(--padding-2x-large);
    border-radius: inherit;
    text-align: left;
    color: var(--accordion-color);
    transition: padding-bottom 0.3s ease;
}

/* Open: title → answer gap is 16 instead of the bottom padding */
.accordion--open .accordion__toggle {
    padding-bottom: var(--margin-small);
}

.accordion__toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 4px var(--color-accent-light-green);
}

.accordion__title {
    flex: 1 0 0;
    min-width: 0;
}

/* Icon-button slot 48px, chevron 40px (tablet / mobile — 32px) */
.accordion__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.accordion__icon > svg {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

.accordion--open .accordion__icon > svg {
    transform: rotate(180deg);
}


/* Panel — animated height
   -------------------------------------------------------------------------- */
.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.accordion--open .accordion__panel {
    grid-template-rows: 1fr;
}

.accordion__body {
    overflow: hidden;
}

/* Answer: max width 748 (desktop) */
.accordion__content {
    display: flex;
    flex-direction: column;
    gap: var(--margin-small);
    max-width: calc(748px + var(--padding-2x-large));
    padding: 0 0 var(--padding-x-large) var(--padding-2x-large);
    color: var(--color-dark-graphite);
}

.accordion--inverted .accordion__content {
    color: var(--color-light-light);
}

.accordion__list {
    display: flex;
    flex-direction: column;
    gap: var(--margin-3x-small);
}

.accordion__list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--margin-3x-small);
}

.accordion__marker {
    color: var(--color-accent-light-green);
}



/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .accordion__toggle {
        gap: var(--margin);
        padding: 24px var(--padding-x-large);
    }

    .accordion__icon > svg {
        width: 32px;
        height: 32px;
    }

    .accordion--open .accordion__toggle {
        padding-bottom: var(--margin-small);
    }

    .accordion__content {
        max-width: none;
        padding: 0 var(--padding-x-large) 24px;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .accordion__toggle {
        padding: var(--padding-large) 24px;
    }

    .accordion--open .accordion__toggle {
        padding-bottom: var(--margin-small);
    }

    .accordion__content {
        padding: 0 24px var(--padding-large);
    }
}


/* ---- review-card ---- */

/* ==========================================================================
   PRO-Chef — Review-card component
   Source: Figma "Review-card" (Device=Desktop | Tablet | Mobile), file 5RWt7Qt6CbCFmmfsT3Np1Y, node 314:2340.
   Depends on template_styles.css (tokens, .icon-button, .link, typography).

   Optional parts — just leave them out of the markup:
   .review-card__video  — "Смотреть видео" button (Figma prop "video")
   .review-card__more   — "Читать полностью" link  (Figma prop "textImage")
   .review-card__logo   — company logo              (Figma prop "showLogo")

   The card fills the width of its slot (grid column / slider item).
   Mobile: the video label and the logo are hidden.
   ========================================================================== */

.review-card {
    display: flex;
    flex-direction: column;
    gap: var(--margin-x-medium);
    padding: var(--padding-2x-large);
    border: 1px solid var(--color-dark-neutral);
    border-radius: var(--radius-x-small);
    background-color: var(--color-light-white);
}


/* Top row: rating + video button
   -------------------------------------------------------------------------- */
.review-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
}

/* Rating: stars drawn with a repeated mask (24px star + 4px gap per tile).
   Number of stars — style="--rating: 4" (default 5). */
.review-card__rating {
    --rating: 5;
    --review-card-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='24' viewBox='0 0 28 24'%3E%3Cpath d='M11.525 2.295C11.5688 2.20646 11.6365 2.13193 11.7205 2.07983C11.8044 2.02772 11.9012 2.00011 12 2.00011C12.0988 2.00011 12.1956 2.02772 12.2795 2.07983C12.3635 2.13193 12.4312 2.20646 12.475 2.295L14.785 6.974C14.9372 7.28197 15.1618 7.54841 15.4396 7.75045C15.7174 7.9525 16.0401 8.08411 16.38 8.134L21.546 8.89C21.6439 8.90418 21.7358 8.94547 21.8115 9.0092C21.8871 9.07293 21.9434 9.15655 21.974 9.25061C22.0046 9.34466 22.0083 9.44541 21.9846 9.54144C21.9609 9.63747 21.9108 9.72495 21.84 9.794L18.104 13.432C17.8576 13.6721 17.6733 13.9685 17.5668 14.2956C17.4604 14.6228 17.4351 14.9709 17.493 15.31L18.375 20.45C18.3923 20.5478 18.3817 20.6486 18.3445 20.7407C18.3073 20.8328 18.2449 20.9126 18.1645 20.971C18.0842 21.0294 17.989 21.064 17.8899 21.0709C17.7908 21.0778 17.6917 21.0567 17.604 21.01L12.986 18.582C12.6817 18.4222 12.3432 18.3388 11.9995 18.3388C11.6558 18.3388 11.3173 18.4222 11.013 18.582L6.396 21.01C6.30833 21.0564 6.2094 21.0773 6.11045 21.0703C6.01151 21.0632 5.91652 21.0286 5.8363 20.9702C5.75607 20.9119 5.69383 20.8322 5.65666 20.7402C5.61948 20.6483 5.60886 20.5477 5.626 20.45L6.507 15.311C6.5652 14.9717 6.53998 14.6234 6.43354 14.296C6.32709 13.9687 6.14261 13.6722 5.896 13.432L2.16 9.795C2.08859 9.72603 2.03799 9.6384 2.01396 9.54207C1.98993 9.44575 1.99344 9.34462 2.02408 9.25019C2.05472 9.15576 2.11127 9.07184 2.18728 9.00798C2.26329 8.94412 2.3557 8.9029 2.454 8.889L7.619 8.134C7.95926 8.0845 8.28239 7.95306 8.56058 7.75099C8.83878 7.54892 9.0637 7.28227 9.216 6.974L11.525 2.295Z' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    width: calc(var(--rating) * 28px - 4px);
    height: 24px;
    background-color: var(--color-accent-pale-green);
    -webkit-mask: var(--review-card-star) repeat-x left center / 28px 24px;
    mask: var(--review-card-star) repeat-x left center / 28px 24px;
}

.review-card__video {
    display: flex;
    align-items: center;
    gap: var(--margin-2x-small);
    color: var(--color-dark-pebble);
}

.review-card__video:focus-visible {
    outline: none;
}

.review-card__video:focus-visible .review-card__play {
    box-shadow: inset 0 0 0 4px var(--color-accent-light-green);
}

/* Icon-button S (40px, 16px icon) on Neutral-40 */
.review-card__play {
    --icon-button-bg: var(--color-dark-neutral-40);
    --icon-button-color: var(--color-dark-gray);
}

.review-card__video:hover .review-card__play {
    --icon-button-color: var(--color-dark-black);
}


/* Quote
   -------------------------------------------------------------------------- */
.review-card__quote {
    display: flex;
    flex-direction: column;
    gap: var(--margin-small);
    min-height: 136px;
    padding-bottom: var(--padding-large);
}

.review-card__text {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-dark-primary);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}


/* Author
   -------------------------------------------------------------------------- */
.review-card__author {
    display: flex;
    align-items: center;
    gap: var(--margin-x-medium);
}

.review-card__person {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: var(--margin-4x-small);
    min-width: 0;
}

.review-card__name {
    color: var(--color-dark-primary);
}

.review-card__role {
    color: var(--color-dark-pebble);
}

/* Logo slot 148×48, image centered */
.review-card__logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 48px;
}

.review-card__logo-img {
    max-width: 128px;
    max-height: 37px;
    object-fit: contain;
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .review-card {
        gap: var(--margin-medium);
        padding: var(--padding-x-large);
    }

    .review-card__quote {
        gap: var(--margin-x-small);
        min-height: 116px;
        padding-bottom: var(--padding-medium);
    }

    .review-card__author {
        gap: var(--margin);
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .review-card {
        gap: var(--margin);
        padding: 24px;
    }

    .review-card__quote {
        min-height: 0;
    }

    .review-card__video-label,
    .review-card__logo {
        display: none;
    }

    .review-card__author {
        gap: var(--margin-small);
    }
}


/* ---- input ---- */

/* ==========================================================================
   PRO-Chef — Input component (text field / text area)
   Source: Figma "Input" 392:2393 (file Yb1VrQZoNECLMATpHYuEok).
   Depends on template_styles.css (tokens, typography).

   Styles: gray (default) | --white | --dark (dark theme)
   Size:   default (field 56px) | --s (48px)
   Type:   <input> — text field | <textarea> — text area (3 lines min)

   States come from native attributes, no extra classes:
   hover / :focus-within / disabled (the control is disabled) /
   error (the control has aria-invalid="true") / filled (value is not empty —
   the clear button appears; needs a placeholder, even " ").
   The border is an inset shadow — 1px → 2px on focus without layout shift.

   <div class="input">
       <div class="input__field">
           <input class="input__control" type="text" placeholder="Placeholder"
                  aria-label="…" aria-describedby="id-text">
           <button class="input__clear" type="button" aria-label="Очистить"><svg>…x…</svg></button>
       </div>
       <p class="input__text" id="id-text">Supporting text</p>
   </div>
   ========================================================================== */

.input {
    --input-bg: var(--color-light-neutral-15);
    --input-bg-hover: var(--color-light-neutral-20);
    --input-bg-focus: var(--input-bg);
    --input-border: var(--color-light-neutral-15);
    --input-border-width: 1px;
    --input-color: var(--color-dark-primary);
    --input-placeholder: var(--color-dark-pebble);
    --input-text: var(--color-dark-pebble);
    --input-icon: var(--color-dark-neutral);
    --input-disabled-bg: var(--color-light-neutral-15);
    --input-disabled-filled-bg: var(--color-light-neutral-20);
    --input-disabled-border: transparent;
    --input-disabled-color: var(--color-dark-neutral);
    --input-error-border: var(--color-special-red-border);

    display: flex;
    flex-direction: column;
    width: 100%;
}

/* White — on light backgrounds */
.input--white {
    --input-bg: var(--color-light-white);
    --input-bg-hover: var(--color-light-light);
    --input-disabled-bg: var(--color-light-neutral-15);
    --input-disabled-filled-bg: var(--color-light-neutral-15);
    --input-disabled-border: var(--color-light-neutral-15);
}

/* Dark theme — on dark backgrounds */
.input--dark {
    --input-color: var(--color-light-white);
    --input-icon: var(--color-dark-gray);
    --input-disabled-bg: var(--color-light-white-8);
    --input-disabled-filled-bg: var(--color-light-white-8);
    --input-disabled-color: var(--color-dark-gray);
    --input-error-border: var(--color-special-red-dark);
}


/* Field
   -------------------------------------------------------------------------- */
.input__field {
    display: flex;
    align-items: center;
    gap: var(--margin-x-small);
    padding: var(--padding-medium);
    border-radius: var(--radius-2x-small);
    background-color: var(--input-bg);
    box-shadow: inset 0 0 0 var(--input-border-width) var(--input-border);
    cursor: text;
}

.input__field:hover {
    background-color: var(--input-bg-hover);
}

.input__field:focus-within {
    --input-border: var(--color-accent-light-green);
    --input-border-width: 2px;

    background-color: var(--input-bg-focus);
}

.input__control {
    flex: 1 0 0;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 24px;
    color: var(--input-color);
}

.input__control:focus {
    outline: none;
}

.input__control::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

/* Text area: 3 lines min, the clear button stays at the top */
.input__field:has(textarea) {
    align-items: flex-start;
}

textarea.input__control {
    min-height: 72px;
    resize: none;
}

/* Clear button: 24px slot, 20px icon; only when the field has a value */
.input__clear {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-3x-small);
    color: var(--input-icon);
    cursor: pointer;
}

.input__clear > svg {
    width: 20px;
    height: 20px;
}

.input__control:not(:placeholder-shown) + .input__clear {
    display: flex;
}

.input__clear:focus-visible {
    outline: 2px solid var(--color-accent-light-green);
    outline-offset: 0;
}

/* Supporting text — Caption-2 */
.input__text {
    padding: var(--padding-2x-small) var(--padding-medium) 0;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    line-height: 16px;
    color: var(--input-text);
}


/* Error: aria-invalid="true" on the control
   -------------------------------------------------------------------------- */
.input:has([aria-invalid="true"]) {
    --input-border: var(--input-error-border);
    --input-text: var(--color-special-red);
}

.input:has([aria-invalid="true"]) .input__field:focus-within {
    --input-border: var(--input-error-border);

    background-color: var(--input-bg-hover);
}


/* Disabled
   -------------------------------------------------------------------------- */
.input:has(.input__control:disabled) {
    --input-bg: var(--input-disabled-bg);
    --input-bg-hover: var(--input-disabled-bg);
    --input-border: var(--input-disabled-border);
    --input-color: var(--input-disabled-color);
    --input-placeholder: var(--input-disabled-color);
    --input-text: var(--input-disabled-color);
    --input-icon: var(--input-disabled-color);
}

.input:has(.input__control:disabled:not(:placeholder-shown)) {
    --input-bg: var(--input-disabled-filled-bg);
    --input-bg-hover: var(--input-disabled-filled-bg);
}

.input__field:has(.input__control:disabled) {
    cursor: default;
}

.input__control:disabled + .input__clear {
    pointer-events: none;
}


/* Small: 48px field
   -------------------------------------------------------------------------- */
.input--s .input__field {
    padding: var(--padding) var(--padding) var(--padding) var(--padding-medium);
}

.input--s .input__text {
    padding-inline: var(--padding);
}


/* ---- checkbox ---- */

/* ==========================================================================
   PRO-Chef — Checkbox component
   Source: Figma "Checkbox" 397:15948 (file Yb1VrQZoNECLMATpHYuEok).
   Depends on template_styles.css (tokens, typography).

   Styles: gray (default) | --white | --dark (dark theme)
   Size:   default (box 28px, icon 20px) | --s (box 24px, icon 16px)
   The box sits in an 8px touch area (Figma component padding).
   States come from the native input: :checked, :hover, :active,
   :focus-visible, :disabled. The label is optional (8px from the box area,
   first line centered on the box, wraps under itself).

   <label class="checkbox">
       <input class="checkbox__input" type="checkbox">
       <span class="checkbox__box"><svg class="checkbox__icon">…check…</svg></span>
       <span class="checkbox__label body-2">Label</span>
   </label>
   ========================================================================== */

.checkbox {
    --checkbox-size: 28px;
    --checkbox-icon-size: 20px;
    --checkbox-bg: var(--color-light-neutral-15);
    --checkbox-bg-hover: var(--checkbox-bg);
    --checkbox-bg-active: var(--color-light-neutral-20);
    --checkbox-bg-focus: var(--checkbox-bg);
    --checkbox-border: var(--color-light-neutral-15);
    --checkbox-border-width: 1px;
    --checkbox-icon: var(--color-light-white);
    --checkbox-disabled-bg: var(--color-light-neutral-15);
    --checkbox-disabled-border: transparent;
    --checkbox-disabled-checked-border: var(--color-light-neutral-15);
    --checkbox-disabled-icon: var(--color-dark-neutral);
    --checkbox-label: var(--color-dark-primary);

    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: var(--margin-3x-small);
    vertical-align: middle;
    cursor: pointer;
}

/* White — on light backgrounds */
.checkbox--white {
    --checkbox-bg: var(--color-light-white);
    --checkbox-bg-hover: var(--color-light-light);
    --checkbox-bg-active: var(--color-light-light);
    --checkbox-border: var(--color-dark-neutral-40);
    --checkbox-disabled-border: var(--color-light-neutral-15);
}

/* Dark theme — on dark backgrounds */
.checkbox--dark {
    --checkbox-bg-active: var(--checkbox-bg);
    --checkbox-disabled-bg: var(--color-light-white-8);
    --checkbox-disabled-checked-border: transparent;
    --checkbox-disabled-icon: var(--color-dark-gray);
    --checkbox-label: var(--color-light-white);
}

.checkbox--s {
    --checkbox-size: 24px;
    --checkbox-icon-size: 16px;
}

/* The native input stays accessible, the box draws the state */
.checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.checkbox__box {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    margin: var(--margin-3x-small);
    border-radius: var(--radius-3x-small);
    background-color: var(--checkbox-bg);
    box-shadow: inset 0 0 0 var(--checkbox-border-width) var(--checkbox-border);
    color: var(--checkbox-icon);
}

.checkbox__icon {
    width: var(--checkbox-icon-size);
    height: var(--checkbox-icon-size);
    visibility: hidden;
}

/* Label: 8px from the box area; its first line is centered on the box
   (Figma popup forms: "Agreement-checkbox") */
.checkbox__label {
    padding-top: calc(var(--margin-3x-small) + (var(--checkbox-size) - 24px) / 2);
    color: var(--checkbox-label);
}


/* Unchecked states
   -------------------------------------------------------------------------- */
.checkbox:hover .checkbox__box {
    background-color: var(--checkbox-bg-hover);
}

.checkbox__input:active + .checkbox__box {
    background-color: var(--checkbox-bg-active);
}

.checkbox__input:focus-visible + .checkbox__box {
    --checkbox-border: var(--color-accent-light-green);
    --checkbox-border-width: 2px;

    background-color: var(--checkbox-bg-focus);
}


/* Checked
   -------------------------------------------------------------------------- */
.checkbox__input:checked + .checkbox__box {
    --checkbox-border: transparent;

    background-color: var(--color-accent-accent);
}

.checkbox__input:checked + .checkbox__box .checkbox__icon {
    visibility: visible;
}

.checkbox:hover .checkbox__input:checked + .checkbox__box {
    --checkbox-border: var(--color-accent-emerald);
}

.checkbox .checkbox__input:checked:active + .checkbox__box {
    --checkbox-border: transparent;

    background-color: var(--color-accent-emerald);
}

.checkbox .checkbox__input:checked:focus-visible + .checkbox__box {
    --checkbox-border: var(--color-accent-light-green);

    background-color: var(--color-accent-emerald);
}


/* Disabled
   -------------------------------------------------------------------------- */
.checkbox:has(.checkbox__input:disabled) {
    cursor: default;
}

.checkbox .checkbox__input:disabled + .checkbox__box {
    --checkbox-border: var(--checkbox-disabled-border);

    background-color: var(--checkbox-disabled-bg);
    color: var(--checkbox-disabled-icon);
}

.checkbox .checkbox__input:disabled:checked + .checkbox__box {
    --checkbox-border: var(--checkbox-disabled-checked-border);
}

.checkbox:has(.checkbox__input:disabled) .checkbox__label {
    color: var(--color-dark-neutral);
}


/* Error: aria-invalid="true" on the input (e.g. a required agreement is not checked).
   Not in Figma — the same red border as the Input error state. */
.checkbox__input[aria-invalid="true"]:not(:checked) + .checkbox__box {
    --checkbox-border: var(--color-special-red-border);
}


/* ---- popup ---- */

/* ==========================================================================
   PRO-Chef — Popup (modal form window)
   Source: Figma file Yb1VrQZoNECLMATpHYuEok — "Форма: Партнерство" 397:8920,
   "ТКП" 397:8921, "Техобслуживание" 397:10343, "Выезд инженера" 397:10943,
   "Обратный звонок" 397:11477; placement on the page — "Визуализация попапы" 397:15947.
   Depends on template_styles.css (.button, .icon-button, .link),
   input/input.css, checkbox/checkbox.css.

   All five forms share one layout, only texts and fields differ:
   close button above the window → window: info (title, text, contacts) + form.
   Desktop >= 1024: window 1024px in the middle of the screen, info column
                    352px on the left with contacts and messengers at the bottom.
   Tablet / mobile: a sheet at the bottom of the screen (top corners rounded),
                    info on top without contacts, then the form.

   <dialog class="popup" id="popup-callback" aria-labelledby="popup-callback-title">
       <div class="popup__top"><button class="icon-button icon-button--tertiary popup__close" data-popup-close>…</button></div>
       <div class="popup__window">
           <div class="popup__info">
               <div class="popup__heading"><p class="popup__title title-1">…</p><p class="popup__text body-2">…</p></div>
               <div class="popup__contacts">…</div>
           </div>
           <form class="popup__form">
               <div class="popup__fields">
                   <div class="popup__field">…label + .input…</div>
                   <div class="popup__row">…two .popup__field…</div>
                   <label class="checkbox checkbox--white checkbox--s popup__agreement">…</label>
               </div>
               <button class="button popup__submit" type="submit">…</button>
           </form>
       </div>
   </dialog>

   Opened by any element with data-popup-open="<name>" (→ #popup-<name>) or by the page
   address ending with #popup-<name>, see popup.js.
   ========================================================================== */

/* Page under an open popup doesn't scroll */
html:has(.popup[open]) {
    overflow: hidden;
}

.popup {
    width: min(1024px, 100% - 2 * var(--padding-section-small));
    max-width: none;
    max-height: 100dvh;
    margin: auto;
    padding: var(--padding-section-small) 0;
    overflow: hidden;
    border: 0;
    background: none;
    color: var(--color-dark-primary);
}

/* Close button stays in place, a window taller than the screen scrolls inside */
.popup[open] {
    display: flex;
    flex-direction: column;
}

.popup:focus {
    outline: none;
}

.popup::backdrop {
    background-color: rgba(35, 38, 38, 0.8);   /* Dark/Graphite, 80% (Figma "Background") */
}

.popup[open] {
    animation: popup-in 0.25s ease;
}

.popup[open]::backdrop {
    animation: popup-fade 0.25s ease;
}

@keyframes popup-in {
    from { opacity: 0; transform: translateY(24px); }
}

@keyframes popup-fade {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .popup[open],
    .popup[open]::backdrop {
        animation: none;
    }
}

/* Close button: above the window, right edge */
.popup__top {
    display: flex;
    justify-content: flex-end;
    padding-bottom: var(--margin-medium);
}

/* The cross sits on the dark backdrop: light icon (Figma Light/Light) */
.popup__close {
    --icon-button-color: var(--color-light-light);
}


/* Window
   -------------------------------------------------------------------------- */
/* Grid, not flex: when the window scrolls, both columns still grow to their content */
.popup__window {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-rows: max-content;
    gap: var(--margin);
    min-height: 0;
    padding: var(--padding-large);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-2x-large);
    background-color: var(--color-light-white);
}

/* Thin scrollbar inside the window's side padding, clear of the round corners */
.popup__window::-webkit-scrollbar {
    width: 6px;
}

.popup__window::-webkit-scrollbar-track {
    margin-block: var(--radius-2x-large);
    background: transparent;
}

.popup__window::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--color-dark-neutral-40);
}

.popup__window::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-dark-pebble);
}

/* Firefox: no ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar) {
    .popup__window {
        scrollbar-width: thin;
        scrollbar-color: var(--color-dark-neutral-40) transparent;
    }
}

/* Info column: heading on top, contacts at the bottom */
.popup__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    width: 352px;
    padding: var(--padding-x-large) var(--padding-large) var(--padding-large);
}

.popup__heading {
    display: flex;
    flex-direction: column;
    gap: var(--margin-small);
}

.popup__contacts {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-top: var(--padding-section-small);
}

.popup__contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--margin-small);
}

.popup__contact {
    display: flex;
    flex-direction: column;
}

.popup__contact-value:hover,
.popup__contact-value:focus-visible {
    color: var(--color-accent-accent);
}

.popup__socials {
    display: flex;
    gap: var(--margin-x-small);
}

.popup__socials .icon-button:nth-child(1),
.popup__socials .icon-button:nth-child(2) {
    display: none;
}


/* Form
   -------------------------------------------------------------------------- */
.popup__form {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: var(--padding-section-small);
    min-width: 0;
    padding: var(--padding-2x-large) var(--padding-section-small) var(--padding-2x-large) var(--padding-2x-large);
    border-radius: var(--radius-x-small);
    background-color: var(--color-light-neutral-15);
}

.popup__fields {
    display: flex;
    flex-direction: column;
}

/* A field keeps room under the input for the supporting / error text (108px),
   except the last one before the agreement checkbox */
.popup__field {
    display: flex;
    flex-direction: column;
    gap: var(--margin-4x-small);
    min-width: 0;
    min-height: 108px;
    padding-left: var(--padding-x-small);
}

.popup__fields > :nth-last-child(2),
.popup__row:nth-last-child(2) > .popup__field {
    min-height: 0;
}

.popup__row {
    display: flex;
    gap: var(--margin-small);
    padding-left: var(--padding-x-small);
}

.popup__row > .popup__field {
    flex: 1 0 0;
    padding-left: 0;
}

.popup__label {
    color: var(--color-dark-gray);
}

/* Inputs in popups are 64px high (Figma), the component default is 56px */
.popup .input__field {
    padding: var(--padding-large);
}

.popup__agreement {
    --checkbox-label: var(--color-dark-gray);

    padding-top: var(--padding-x-small);
}

.popup__submit {
    width: calc(100% - var(--padding-x-small));
    margin-left: var(--padding-x-small);
}


/* Tablet: sheet at the bottom, 40px from the screen sides
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .popup {
        width: calc(100% - 2 * var(--padding-section-small));
        margin-bottom: 0;
        padding-bottom: 0;
    }

    @keyframes popup-in {
        from { transform: translateY(100%); }
    }

    .popup__window {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--margin-3x-small);
        border-radius: var(--radius-x-large) var(--radius-x-large) 0 0;
    }

    .popup__info {
        width: auto;
        padding: var(--padding-large);
    }

    .popup__heading {
        gap: var(--margin-x-small);
    }

    .popup__contacts {
        display: none;
    }

    /* Line breaks in the texts are for the narrow desktop column only */
    .popup__br {
        display: none;
    }

    .popup__form {
        padding: var(--padding-x-large) var(--padding-2x-large) var(--padding-x-large) 24px;
    }
}


/* Mobile: full-width sheet
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .popup {
        width: 100%;
    }

    .popup__top {
        padding-inline: var(--padding-medium);
    }

    .popup__window {
        padding: var(--padding-x-small) 0 0;
        border-radius: var(--radius-large) var(--radius-large) 0 0;
    }

    .popup__info {
        padding: var(--padding-large) 24px;
    }

    .popup__form {
        gap: var(--padding-2x-large);
        padding: var(--padding-x-large) var(--padding-large) var(--padding-section-small) var(--padding-medium);
        border-radius: var(--radius);
    }

    .popup__fields {
        gap: var(--margin-4x-small);
    }

    .popup__field {
        gap: var(--margin-3x-small);
    }

    .popup__row {
        flex-direction: column;
        gap: var(--margin-4x-small);
    }

    .popup__row > .popup__field {
        flex: none;
    }

    /* In a column the first field of a row keeps its room for the text */
    .popup__row:nth-last-child(2) > .popup__field:not(:last-child) {
        min-height: 108px;
    }
}


/* ==========================================================================
   15. Header / Footer
   ========================================================================== */


/* ---- header ---- */

/* ==========================================================================
   PRO-Chef — Header block
   Source: Figma "Header" (Type=Desktop | Tablet | Mobile, State=Default | Expanded).
   Depends on template_styles.css (tokens, .button, .icon-button, .link, typography)
   and action-card/action-card.css (card in the menu).

   Desktop  >= 1024px — logo + dark nav-bar with links and "Связаться с нами"
   Tablet   767–1023px — logo + nav-bar with button and menu toggle; menu opens over the page
   Mobile   <= 766px  — logo + nav-bar with phone and menu toggle; menu opens full screen

   Structure: .header — fixed full-width wrapper with side paddings (page layout from Figma);
              .header__inner — white card with rounded bottom corners.
   Side paddings: >= 1281px — 60px, 767–1280px — 40px, <= 766px — 20px.

   The header is fixed and always visible on scroll. The page is offset
   by --header-height (wrapper height from Figma: 108 / 112 / 76px).

   State: .header--open (set by header.js together with aria-expanded on the toggle)
   ========================================================================== */

:root {
    --header-height: 108px;
}

@media (max-width: 1023px) {
    :root {
        --header-height: 112px;
    }
}

@media (max-width: 766px) {
    :root {
        --header-height: 76px;
    }
}

body {
    padding-top: var(--header-height);
}

.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    padding: 0 var(--padding-section-small) var(--padding-x-small);
    /* the transparent side and bottom paddings don't block the page under them */
    pointer-events: none;
}

@media (min-width: 1281px) {
    .header {
        padding: 0 60px var(--padding);
    }
}

.header__inner {
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    padding: var(--padding-large) 24px var(--padding-large) var(--padding-section-small);
    border-radius: 0 0 var(--radius) var(--radius);
    background-color: var(--color-light-white);
}

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


/* Logo
   -------------------------------------------------------------------------- */
.header__logo {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    min-width: 288px;
    max-width: 360px;
    min-height: 32px;
    padding-right: var(--padding-2x-large);
}

/* 1024–1280px: header is narrower than the 1024px Figma component
   (40px side paddings), let the logo shrink so the nav-bar fits */
@media (min-width: 1024px) and (max-width: 1280px) {
    .header__logo {
        min-width: 0;
    }
}

.header__logo-img {
    width: 100%;
    max-width: 312px;
    height: auto;
}


/* Nav-bar — dark pill on the right
   -------------------------------------------------------------------------- */
.header__nav-bar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--margin-medium);
    padding: var(--padding-x-small) var(--padding-x-small) var(--padding-x-small) var(--padding-x-large);
    border-radius: var(--radius-x-large);
    background-color: var(--color-dark-graphite);
}

.header__nav-list {
    display: flex;
    align-items: center;
    gap: var(--margin-small);
}

/* Label-3 on the dark nav-bar */
.header__nav-link {
    padding: 12px 1px;
    font-size: 14px;
    line-height: 14px;
}

.header__phone,
.header__toggle {
    display: none;
}

/* Menu toggle — plain 40px button with a 28px icon */
.header__toggle {
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-medium);
    color: var(--color-light-white);
}

.header__toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 4px var(--color-accent-light-green);
}

.header__toggle-icon {
    width: 28px;
    height: 28px;
}

.header__toggle-icon--close,
.header--open .header__toggle-icon--open {
    display: none;
}

.header--open .header__toggle-icon--close {
    display: block;
}


/* Expanded menu (tablet, mobile)
   -------------------------------------------------------------------------- */
.header__menu {
    display: none;
}

.header__menu-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--margin);
}

/* Label-1 */
.header__menu-link {
    padding: 2px 1px;
    font-size: 20px;
    line-height: 20px;
}

.header__menu-link[aria-current="page"] {
    --link-color: var(--color-accent-accent);
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .header__inner {
        padding: var(--padding-2x-large) var(--padding-large) var(--padding-medium) var(--padding-x-large);
    }

    .header__logo {
        max-width: 300px;
    }

    .header__nav-bar {
        gap: var(--margin-3x-small);
        padding: var(--padding-x-small) var(--padding-medium) var(--padding-x-small) var(--padding-x-small);
    }

    .header__nav {
        display: none;
    }

    .header__toggle {
        display: flex;
    }

    /* Opened menu overlays the page; scrolls itself on low screens */
    .header--open {
        max-height: 100vh;
        overflow-y: auto;
    }

    .header--open .header__inner {
        gap: var(--margin-x-large);
        padding-bottom: var(--padding-section-small);
    }

    .header--open .header__menu {
        display: flex;
        gap: var(--margin);
        align-items: flex-start;
    }

    .header__menu-nav,
    .header__card {
        flex: 1 0 0;
        min-width: 0;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .header {
        padding: 0 var(--padding-large) var(--padding-2x-small);
    }

    .header__inner {
        padding: var(--padding) var(--padding) var(--padding) var(--padding-medium);
        border-radius: 0 0 var(--radius-x-small) var(--radius-x-small);
    }

    .header__logo {
        min-width: 200px;
        max-width: 360px;
    }

    .header__nav-bar {
        gap: 6px;
        padding: var(--padding-2x-small) var(--padding-small) var(--padding-2x-small) var(--padding-2x-small);
        border-radius: var(--radius-2x-large);
    }

    .header__button {
        display: none;
    }

    .header__phone {
        display: inline-flex;
    }

    /* Full-screen menu; body scroll is locked by header.js */
    body.header-scroll-lock {
        overflow: hidden;
    }

    .header--open {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow-y: auto;
        background-color: var(--color-light-white);
    }

    .header--open .header__inner {
        flex: 1 0 auto;
        gap: 40px;
        border-radius: 0;
    }

    .header--open .header__menu {
        flex: 1 0 auto;
        flex-direction: column;
        justify-content: space-between;
        gap: 40px;
    }

    .header__menu-nav,
    .header__card {
        flex: 0 0 auto;
    }
}


/* ---- footer ---- */

/* ==========================================================================
   PRO-Chef — Footer block
   Source: Figma "Footer" (Type=Desktop | Tablet | Mobile).
   Depends on template_styles.css (tokens, .container, .grid, .link,
   .special-button, typography).

   Structure:
   .footer__nav        — black part: main (brand + links | contacts) and legal info
   .footer__copyright  — graphite strip at the bottom
   Content is laid out on .container + .grid (12 / 8 / 4 columns).

   Mobile: brand column is "unwrapped" (display: contents) so the order becomes
   logo → contacts → links, as in the Figma mobile frame.
   ========================================================================== */

.footer {
    overflow: hidden;
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    color: var(--color-light-white);
}

.footer__nav {
    padding-block: var(--padding-section-medium);
    background-color: var(--color-dark-black);
}

.footer__main {
    row-gap: 96px;
}


/* Brand column: logo + link lists
   -------------------------------------------------------------------------- */
.footer__brand {
    display: flex;
    grid-column: span 6;
    flex-direction: column;
    gap: 68px;
    padding-right: var(--padding-section-small);
}

.footer__logo {
    display: block;
    width: 425px;
    max-width: 100%;
}

.footer__logo-img {
    width: 100%;
    height: auto;
}

.footer__links {
    display: flex;
    gap: var(--margin);
}

.footer__link-list {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: var(--margin-x-small);
    min-width: 0;
}

.footer__link {
    display: flex;
    padding-bottom: var(--padding-2x-small);
}


/* Contacts column
   -------------------------------------------------------------------------- */
.footer__contacts {
    display: flex;
    grid-column: span 6;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--margin-x-large);
}

.footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--padding-section-small);
    width: 100%;
}

.footer__contact-row {
    display: flex;
    gap: var(--margin);
}

.footer__contact {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: var(--margin-3x-small);
    min-width: 0;
    font-style: normal;
}

/* Address row has a fixed 96px height in Figma (desktop, tablet) */
.footer__contact--address {
    min-height: 96px;
}

.footer__contact-value {
    color: var(--color-light-white);
}

a.footer__contact-value:hover {
    color: var(--color-accent-light-green);
}

/* "Заказать звонок" — special-button (primary-inverted, M) with a fixed width,
   centered label and a 24px icon */
.footer__callback {
    width: 280px;
    padding-right: var(--padding-2x-small);
}

.footer__callback .special-button__icon > svg {
    width: 24px;
    height: 24px;
}

.footer__callback .special-button__label {
    flex: 1 0 0;
    padding-right: var(--margin-x-large);
    text-align: center;
}


/* Legal info
   -------------------------------------------------------------------------- */
.footer__legal {
    margin-top: 140px;
}

.footer__legal-list {
    display: flex;
    grid-column: span 6;
    flex-direction: column;
    gap: var(--margin-3x-small);
    font-style: normal;
}

.footer__legal-item {
    display: block;
    padding-bottom: var(--padding-2x-small);
    color: var(--color-dark-neutral);
}

a.footer__legal-item:hover {
    color: var(--color-light-white);
}


/* Copyright
   -------------------------------------------------------------------------- */
.footer__copyright {
    padding-block: var(--padding);
    background-color: var(--color-dark-graphite);
}

.footer__copyright-inner {
    align-items: center;
}

.footer__copyright-text {
    grid-column: span 6;
}

.footer__copyright-text--right {
    text-align: right;
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    /* Line breaks of the postal address are desktop-only */
    .footer__break {
        display: none;
    }

    .footer__brand {
        gap: var(--padding-section-medium);
        padding-right: 0;
    }

    .footer__logo {
        width: 422px;
    }

    .footer__contacts {
        gap: var(--padding-section-small);
    }

    .footer__contact-list {
        gap: var(--margin-large);
    }

    .footer__callback {
        width: 245px;
    }

    .footer__legal {
        margin-top: 100px;
    }

    .footer__legal-list {
        grid-column: span 4;
    }

    .footer__copyright-text {
        grid-column: span 3;
    }

    .footer__copyright-text--right {
        grid-column: 6 / span 3;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .footer__nav {
        padding-block: var(--padding-section-small);
    }

    .footer__main {
        display: flex;
        flex-direction: column;
        gap: var(--margin-x-large);
    }

    .footer__brand {
        display: contents;
    }

    .footer__logo {
        order: 1;
        width: 236px;
    }

    .footer__contacts {
        order: 2;
        gap: var(--margin-x-large);
    }

    .footer__links {
        order: 3;
        flex-direction: column;
        gap: var(--margin-small);
        padding-top: var(--padding-section-small);
    }

    .footer__link-list {
        gap: var(--margin-small);
    }

    .footer__contact--address {
        min-height: auto;
    }

    .footer__contact-row {
        flex-direction: column;
        gap: var(--margin);
    }

    .footer__callback {
        width: 236px;
        gap: var(--margin-small);
    }

    .footer__callback .special-button__label {
        padding-right: 36px;
    }

    .footer__legal {
        display: flex;
        flex-direction: column;
        gap: var(--margin-small);
    }

    .footer__legal-list {
        gap: var(--margin-x-small);
    }

    .footer__copyright-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--margin-small);
    }

    .footer__copyright-text--right {
        text-align: left;
    }
}


/* ==========================================================================
   16. Main page sections
   ========================================================================== */


/* ---- hero ---- */

/* ==========================================================================
   PRO-Chef — Hero section (main page)
   Source: Figma main page — Hero-section 256:226 / 294:1386 / 294:2150.
   Depends on template_styles.css, action-card/action-card.css.

   Banner grid: title + buttons on top (full width); description (left) and
   action-card (right) at the bottom.
   Desktop: photo banner (dark text) + action-card; 4 features below.
   Tablet:  another photo with a 60% dark overlay, white text; action-card hidden; 2 features.
   Mobile:  title Heading-2 size, one button, no description; 1 feature.
   ========================================================================== */

.hero {
    padding-inline: var(--padding-section-small);
}

.hero__container {
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--color-light-neutral-15);
}

.hero__banner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    gap: var(--margin);
    height: 800px;
    padding: var(--padding-section-large);
    overflow: hidden;
    border-radius: var(--radius);
}

/* Background photo */
.hero__picture,
.hero__picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__picture img {
    object-fit: cover;
}

.hero__heading {
    position: relative;
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-section-small);
}

.hero__title {
    text-transform: uppercase;
    color: var(--color-dark-graphite);
}

.hero__title-accent {
    color: var(--color-accent-accent);
}

.hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--margin);
}

.hero__engineer {
    width: 286px;
}

.hero__text {
    position: relative;
    grid-area: 2 / 1;
    align-self: end;
    max-width: 580px;
    color: var(--color-dark-graphite);
}

.hero__card {
    position: relative;
    grid-area: 2 / 2;
    align-self: end;
}


/* <= 1280px: the description column is narrower than in Figma — natural line wrapping */
@media (max-width: 1280px) {
    .hero__text br {
        display: none;
    }
}


/* Features (Container-UTP)
   -------------------------------------------------------------------------- */
.hero__features {
    display: flex;
    gap: var(--margin);
    padding: var(--padding-x-large) var(--padding-section-large);
}

.hero__feature {
    display: flex;
    flex: 1 0 0;
    align-items: flex-start;
    gap: var(--margin-x-small);
    min-width: 0;
}

.hero__feature-marker {
    --marker-size: 28px;

    color: var(--color-accent-accent);
}

.hero__feature-text {
    color: var(--color-dark-primary);
}

.hero__feature-accent {
    display: block;
    color: var(--color-accent-accent);
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .hero__banner {
        padding: var(--padding-section-medium);
    }

    /* Darker photo, white text */
    .hero__picture img {
        object-position: 70% center;
    }

    .hero__picture::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .hero__title,
    .hero__text {
        color: var(--color-light-white);
    }

    .hero__title-accent {
        color: var(--color-accent-light-green);
    }

    .hero__card {
        display: none;
    }

    .hero__features {
        padding: 24px var(--padding-section-medium);
    }

    .hero__feature:nth-child(n + 3) {
        display: none;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .hero {
        padding: var(--padding-2x-small) var(--padding-large) 0;
    }

    .hero__banner {
        grid-template-rows: 1fr;
        height: 600px;
        padding: var(--padding-x-large);
    }

    /* Title at the top, button at the bottom of the banner */
    .hero__heading {
        justify-content: space-between;
    }

    /* Figma mobile uses Heading-2 (36/44) for the title */
    .hero__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -0.5px;
    }

    .hero__calc,
    .hero__text {
        display: none;
    }

    .hero__engineer {
        width: 100%;
    }

    .hero__features {
        justify-content: center;
        padding: var(--padding-large);
    }

    .hero__feature {
        flex: 0 1 auto;
    }

    .hero__feature:nth-child(n + 2) {
        display: none;
    }
}


/* ---- projects ---- */

/* ==========================================================================
   PRO-Chef — Projects section "Работаем на всех типах объектов" (main page)
   Source: Figma main page — Section-Projects 256:279 / 294:1428 / 294:2192.
   Depends on template_styles.css, segmented/segmented.css.

   Tabs "Частный дом / Коммерческий проект" switch the showcase panels.
   Both tabs use the same showcase markup (photo, card, button).

   Showcase = one grid cell with the photo gallery and the button on top of it
   (bottom-right); on mobile the button drops below the gallery.
   ========================================================================== */

.projects {
    padding-block: 140px var(--padding-section-2x-large);
}

.projects__inner {
    display: flex;
    flex-direction: column;
    gap: var(--margin-x-large);
}

.projects__heading .section-heading__title {
    max-width: 480px;
}


/* Showcase
   -------------------------------------------------------------------------- */
/* Desktop: the photo is 28px wider than the container on each side */
.projects__showcase {
    display: grid;
    margin-inline: calc(var(--padding-x-large) * -1);
}

.projects__gallery,
.projects__button {
    grid-area: 1 / 1;
}

.projects__gallery {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 560px;
    padding: var(--padding-x-large);
    overflow: hidden;
    border-radius: var(--radius-3x-large);
    background-color: var(--color-light-neutral-15);
}

.projects__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Photo darkening 30% */
.projects__gallery::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(16, 19, 19, 0.3);
    pointer-events: none;
}

.projects__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--padding-section-small);
    width: 480px;
    padding: var(--padding-x-large);
    border-radius: var(--radius-x-small);
    background-color: var(--color-light-white);
}

.projects__card-title {
    color: var(--color-dark-primary);
}

.projects__list {
    display: flex;
    flex-direction: column;
    gap: var(--margin-3x-small);
}

.projects__list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--margin-3x-small);
    color: var(--color-dark-primary);
}

.projects__marker {
    color: var(--color-accent-light-green);
}

.projects__button {
    position: relative;
    z-index: 1;
    align-self: end;
    justify-self: end;
    width: 280px;
    margin: var(--padding-x-large);
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .projects {
        padding-block: var(--padding-section-large);
    }

    .projects__inner {
        gap: 36px;
    }

    .projects__heading.section-heading--row {
        flex-direction: column;
        gap: var(--margin-large);
        text-align: center;
    }

    .projects__showcase {
        margin-inline: 0;
    }

    .projects__gallery {
        padding: 24px;
    }

    .projects__card {
        gap: var(--margin-x-medium);
        width: 310px;
        padding: 24px;
    }

    .projects__button {
        margin: 24px;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .projects {
        padding-block: var(--padding-section-x-large) var(--padding-section-medium);
    }

    .projects__inner {
        gap: var(--margin-x-medium);
    }

    .projects__heading.section-heading--row {
        align-items: stretch;
    }

    .projects__showcase {
        row-gap: var(--margin-x-medium);
        margin-inline: 0;
    }

    .projects__gallery {
        align-items: flex-start;
        height: 600px;
        padding: var(--padding-large);
    }

    .projects__card {
        width: 100%;
    }

    .projects__photo {
        object-position: 75% center;
    }

    /* The button leaves the photo and goes under it: full width, primary (green) */
    .projects__button {
        --button-bg: var(--color-accent-accent);
        --button-color: var(--color-light-white);

        grid-area: 2 / 1;
        width: 100%;
        margin: 0;
    }

    .projects__button:hover,
    .projects__button:active {
        --button-bg: var(--color-accent-emerald);
    }
}


/* ---- price ---- */

/* ==========================================================================
   PRO-Chef — Price section "Цены и пакеты" (main page)
   Source: Figma main page — Section-Price 256:635 / 294:1448 / 294:2214.
   Depends on template_styles.css (.section-panel, .section-heading),
   slider/slider.css, accordion/accordion.css.

   Desktop: 3 price cards in a row + accordion.
   Tablet:  cards in a slider (2 visible + the edge of the third).
   Mobile:  slider with one card + dots.
   ========================================================================== */

.price__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.price__content {
    display: flex;
    flex-direction: column;
    gap: var(--padding-section-small);
    width: 100%;
}

.price__dots {
    display: none;
}


/* Price card
   -------------------------------------------------------------------------- */
.price__card {
    display: flex;
    flex-direction: column;
    gap: var(--margin-4x-small);
    padding: var(--padding-x-small);
    border-radius: var(--radius-medium);
    background-color: var(--color-light-white-8);
}

.price__card-head {
    display: flex;
    flex-direction: column;
    gap: var(--margin-x-medium);
    padding: var(--padding-x-large);
    border-radius: var(--radius-x-small);
    color: var(--color-light-white);
    background-color: var(--color-dark-primary);
}

.price__card-name,
.price__card-cost {
    display: flex;
    flex-direction: column;
    gap: var(--margin-4x-small);
}

.price__card-label {
    color: var(--color-light-pale);
}

/* Manrope ExtraBold 20/24 (Figma) */
.price__card-title {
    font-weight: var(--font-weight-extrabold);
    line-height: 24px;
}

.price__card-details {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: var(--margin-4x-small);
    padding: 24px var(--padding-large) 36px var(--padding-medium);
    color: var(--color-light-light);
}

.price__card-row {
    display: flex;
    align-items: flex-start;
    gap: var(--margin-x-small);
}

/* 16px icon in a 20px box */
.price__card-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 2px;
}

.price__card-button {
    width: 100%;
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .price.section-panel {
        padding-bottom: var(--padding-section-small);
    }

    .price__inner {
        gap: var(--margin-x-large);
    }

    /* 2 cards in view; the track reaches the panel edges so the third card peeks out */
    .price__slider {
        --slider-item-width: calc((100% - var(--slider-gap)) / 2);
    }

    .price__slider .slider__track {
        margin-inline: calc(var(--padding-section-small) * -1);
        padding-inline: var(--padding-section-small);
        scroll-padding-inline: var(--padding-section-small);
    }

    .price__card-head {
        gap: var(--margin-small);
        padding: var(--padding-large);
    }

    .price__card-details {
        padding: var(--padding-medium) var(--padding-medium) 24px var(--padding);
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .price {
        margin-block: var(--padding-large);
    }

    .price.section-panel {
        padding: var(--margin-x-large) 24px 24px;
    }

    .price__inner {
        gap: var(--padding-section-small);
    }

    .price__slider {
        --slider-item-width: 100%;
        --slider-gap: var(--margin-small);
    }

    .price__slider .slider__track {
        margin-inline: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    /* cards → dots 24, dots → accordion 40 */
    .price__content {
        gap: var(--margin-medium);
    }

    .price__dots {
        display: flex;
    }

    .price__accordion {
        margin-top: var(--margin-small);
    }

    .price__card-head {
        padding: var(--padding-medium);
    }

    .price__card-details {
        padding: var(--padding) var(--padding) var(--padding-large);
    }
}


/* ---- stage ---- */

/* ==========================================================================
   PRO-Chef — Stage section "Как мы работаем" (main page)
   Source: Figma main page — Section-Stage 256:1631 / 294:1599 / 294:2365.
   Depends on template_styles.css (.section-heading, .icon-button, .button),
   slider/slider.css.

   Slider with arrows; cards run past the container to the screen edges.
   Cards in view: 3 (desktop) / 2 (tablet) / 1 (mobile).
   Mobile: the note under the slider is hidden, the button is full width.
   ========================================================================== */

.stage {
    padding-block: 200px var(--padding-section-2x-large);
}

.stage__inner {
    display: flex;
    flex-direction: column;
    gap: var(--margin-x-large);
}

.stage__heading .section-heading__title {
    max-width: 480px;
}

.stage__arrows {
    display: flex;
    flex-shrink: 0;
    gap: var(--margin-x-small);
}

.stage__slider {
    --slider-item-width: calc((100% - var(--slider-gap) * 2) / 3);
}

.stage__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 400px;
    padding: var(--padding-x-large);
    border-radius: 10px;
    background-color: var(--color-light-neutral-15);
}

.stage__number {
    color: var(--color-accent-pale-green);
}

.stage__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--margin-small);
}

.stage__card-title {
    color: var(--color-dark-primary);
}

.stage__card-text {
    color: var(--color-dark-gray);
}

.stage__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--margin);
}

.stage__note {
    max-width: 480px;
    color: var(--color-dark-pebble);
}

.stage__button {
    flex-shrink: 0;
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .stage {
        padding-block: var(--padding-section-2x-large) var(--padding-section-medium);
    }

    .stage__inner {
        gap: var(--padding-section-small);
    }

    .stage__slider {
        --slider-item-width: calc((100% - var(--slider-gap)) / 2);
    }

    .stage__card {
        height: 360px;
    }

    .stage__card-body {
        gap: var(--margin-x-small);
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .stage {
        padding-block: var(--padding-section-large) var(--padding-section-small);
    }

    .stage__inner {
        gap: var(--margin-large);
    }

    .stage__heading.section-heading--row {
        align-items: flex-end;
    }

    .stage__slider {
        --slider-item-width: 100%;
    }

    .stage__card {
        height: 320px;
    }

    .stage__note {
        display: none;
    }

    .stage__button {
        flex: 1 0 auto;
    }
}


/* ---- cases ---- */

/* ==========================================================================
   PRO-Chef — Cases section "Примеры работ" (main page)
   Source: Figma main page — Section-Cases 256:1681 / 294:1641 / 294:2419.
   Depends on template_styles.css (.section-heading, .icon-button),
   slider/slider.css.

   Slider of case cards (one in view, the next one peeks out) + dots.
   Card: photo (right 2/3; --full — whole card) with a dark overlay,
   white panel on the left. Mobile: panel at the bottom, only title and price.
   ========================================================================== */

.cases {
    padding-block: var(--padding-section-2x-large) 140px;
}

.cases__inner {
    display: flex;
    flex-direction: column;
    gap: var(--margin-x-large);
}

.cases__body {
    display: flex;
    flex-direction: column;
    gap: var(--padding-section-small);
}


/* Case card
   -------------------------------------------------------------------------- */
.cases__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 600px;
    padding: var(--padding-x-large);
    overflow: hidden;
    border-radius: var(--radius-3x-large);
}

.cases__photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 66.6%;
    height: 100%;
    object-fit: cover;
}

.cases__photo--full {
    width: 100%;
}

/* Photo darkening (the part without the photo turns grey) */
.cases__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(16, 19, 19, 0.4);
    pointer-events: none;
}

.cases__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--padding-section-small);
    width: 452px;
    height: 100%;
    padding: var(--padding-x-large);
    border-radius: var(--radius-x-small);
    background-color: var(--color-light-white);
}

.cases__title-block {
    display: flex;
    flex-direction: column;
    gap: var(--margin-x-small);
}

.cases__title {
    color: var(--color-dark-primary);
}

.cases__region,
.cases__label,
.cases__package {
    color: var(--color-dark-pebble);
}

.cases__description {
    display: flex;
    flex-direction: column;
    gap: var(--margin-medium);
}

.cases__table {
    display: flex;
    flex-direction: column;
    gap: var(--margin-small);
}

.cases__row {
    display: flex;
    gap: var(--margin-3x-small);
    padding-bottom: var(--padding-medium);
    border-bottom: 1px solid var(--color-dark-neutral-40);
}

.cases__label {
    flex-shrink: 0;
    width: 144px;
}

.cases__value {
    color: var(--color-dark-primary);
}

.cases__price-row {
    display: flex;
    align-items: center;
    gap: var(--margin-x-medium);
}

.cases__price {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: var(--margin-4x-small);
    min-width: 0;
}

.cases__cost {
    color: var(--color-accent-accent);
}

/* Icon-button 60px on Neutral-40 */
.cases__more {
    --icon-button-bg: var(--color-dark-neutral-40);
    --icon-button-color: var(--color-dark-gray);

    padding: 18px;
}

.cases__more:hover {
    --icon-button-color: var(--color-dark-black);
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .cases {
        padding-block: var(--padding-section-medium) var(--padding-section-large);
    }

    .cases__inner {
        gap: var(--padding-section-small);
    }

    .cases__body {
        gap: var(--margin-large);
    }

    .cases__card {
        height: 480px;
        padding: 24px;
        border-radius: 36px;
    }

    .cases__panel {
        width: 310px;
        padding: 24px;
    }

    .cases__title-block {
        gap: var(--margin-3x-small);
    }

    .cases__table {
        gap: var(--margin-x-small);
    }

    .cases__row {
        gap: var(--margin);
        padding-bottom: var(--padding);
    }

    .cases__label {
        width: 132px;
    }

    .cases__price-row {
        gap: var(--margin);
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .cases__card {
        height: 440px;
        padding: var(--padding-large);
        border-radius: var(--radius-2x-large);
    }

    .cases__photo {
        width: 100%;
    }

    .cases__panel {
        flex: 1 0 0;
        justify-content: flex-start;
        width: auto;
        height: auto;
    }

    .cases__region,
    .cases__table {
        display: none;
    }

    /* Icon-button 56px */
    .cases__more {
        padding: var(--padding-medium);
    }
}


/* ---- estimate ---- */

/* ==========================================================================
   PRO-Chef — Estimate section "Готовая смета за 24 часа" (main page)
   Source: Figma main page — Section 256:1795 / 294:1715 / 294:2493.
   Depends on template_styles.css (.section-panel, .section-heading, .marker, .button).

   Wide green panel. The equipment photo sits at the top of the stage block,
   the glass cards and the checklist banner lie over its lower part.
   Cards: 3 in a row (desktop) → rows "title | text" (tablet) → titles only (mobile).
   ========================================================================== */

.estimate__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--padding-section-small);
}

.estimate__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--margin);
    width: 100%;
    min-height: 980px;
}

.estimate__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.estimate__cards {
    position: relative;
    display: flex;
    gap: var(--margin);
}

.estimate__card {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: var(--margin-x-small);
    min-width: 0;
    padding: var(--padding-x-large);
    border-radius: 10px;
    text-align: center;
    background-color: var(--color-light-white-8);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.estimate__card-title {
    color: var(--color-light-white);
}

.estimate__card-text {
    color: var(--color-light-light);
}


/* Checklist banner
   -------------------------------------------------------------------------- */
.estimate__banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--margin);
    padding: var(--padding-x-large);
    border-radius: 10px;
    color: var(--color-light-white);
    background-color: var(--color-accent-emerald);
}

.estimate__banner-body {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: var(--margin-3x-small);
    min-width: 0;
}

.estimate__banner-title {
    display: flex;
    align-items: center;
    gap: var(--margin-3x-small);
}

.estimate__marker {
    --marker-size: 20px;

    color: var(--color-accent-lime);
}

.estimate__banner-text {
    padding-left: var(--padding-x-large);
}

.estimate__button {
    flex-shrink: 0;
    width: 280px;
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .estimate.section-panel {
        padding-bottom: var(--padding-section-small);
    }

    .estimate__inner {
        gap: var(--margin-large);
    }

    .estimate__stage {
        gap: var(--margin-small);
        min-height: 900px;
    }

    .estimate__cards {
        flex-direction: column;
        gap: var(--margin-small);
    }

    /* Card becomes a row: title | text */
    .estimate__card {
        flex-direction: row;
        align-items: center;
        gap: var(--margin);
        padding: 24px;
        text-align: left;
    }

    .estimate__card-title,
    .estimate__card-text {
        flex: 1 0 0;
        min-width: 0;
    }

    .estimate__banner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--margin-medium);
        padding: var(--padding-x-large) 24px;
    }

    /* Button M, aligned with the banner text */
    .estimate__button {
        width: auto;
        margin-left: var(--padding-x-large);
        padding: var(--padding-medium) var(--padding-x-large);
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .estimate {
        margin-block: var(--padding-large);
    }

    .estimate.section-panel {
        padding: var(--margin-x-large) 24px 24px;
    }

    .estimate__stage {
        gap: var(--margin-x-small);
        min-height: 780px;
    }

    .estimate__cards {
        gap: var(--margin-x-small);
    }

    .estimate__card {
        padding: var(--padding-large);
    }

    .estimate__card-text {
        display: none;
    }

    .estimate__banner {
        padding: var(--padding-large);
    }
}


/* ---- partners ---- */

/* ==========================================================================
   PRO-Chef — Partners section "Официальные поставки с гарантией производителя"
   Source: Figma main page — Section-Partners 256:1836 / 294:1744 / 294:2522.
   Depends on template_styles.css (.section-heading), slider/slider.css.

   Desktop: title left, text right; 5 logos in a row (cells 204×120).
   Tablet / mobile: heading centered; the logo row (cells 157×92) is wider than
   the screen — horizontal scroll (slider without controls).
   Logo size is set per logo as a share of its cell: style="--logo-width: 90%".
   ========================================================================== */

.partners {
    padding-block: 140px var(--padding-section-2x-large);
}

.partners__inner {
    display: flex;
    flex-direction: column;
    gap: 72px;
}

.partners__heading.section-heading--row {
    align-items: flex-start;
}

.partners__heading .section-heading__title,
.partners__heading .section-heading__text {
    max-width: 480px;
}

.partners__logos {
    --slider-item-width: 204px;
}

.partners__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
}

.partners__logo img {
    width: var(--logo-width, 80%);
    height: auto;
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .partners {
        padding-block: var(--padding-section-2x-large) var(--padding-section-medium);
    }

    .partners__inner {
        gap: var(--padding-section-medium);
    }

    .partners__heading.section-heading--row {
        flex-direction: column;
        align-items: center;
        gap: var(--margin-medium);
        text-align: center;
    }

    .partners__heading .section-heading__title,
    .partners__heading .section-heading__text {
        max-width: 510px;
    }

    .partners__logos {
        --slider-item-width: 157px;
    }

    .partners__logo {
        height: 92px;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .partners {
        padding-bottom: var(--padding-section-large);
    }

    .partners__inner {
        gap: var(--padding-section-large);
    }

    /* Logos stand close together (Figma) */
    .partners__logos {
        --slider-gap: 0px;
    }
}


/* ---- team ---- */

/* ==========================================================================
   PRO-Chef — Team section "Более 12 лет в теплотехнике…" (main page)
   Source: Figma main page — Section-Team 256:1946 / 294:1854 / 294:2632.
   Depends on template_styles.css, slider/slider.css.

   Desktop: 4 cards in a row. Tablet / mobile: slider (cards 245 / 236px),
   cards run to the screen edges.
   ========================================================================== */

.team {
    padding-block: var(--padding-section-medium) var(--padding-section-2x-large);
}

.team__inner {
    display: flex;
    flex-direction: column;
    gap: var(--padding-section-medium);
}

.team__title {
    color: var(--color-dark-primary);
}

.team__card {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}

.team__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 280 / 356;
    border-radius: var(--radius-2x-small);
    object-fit: cover;
    object-position: center top;
}

.team__person {
    display: flex;
    flex-direction: column;
    gap: var(--margin-4x-small);
}

.team__name {
    color: var(--color-dark-primary);
}

.team__role {
    color: var(--color-dark-pebble);
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .team {
        padding-bottom: var(--padding-section-medium);
    }

    .team__inner {
        gap: var(--margin-x-large);
    }

    .team__title {
        max-width: 522px;
    }

    .team__slider {
        --slider-item-width: 245px;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .team {
        padding-bottom: var(--padding-section-large);
    }

    .team__slider {
        --slider-item-width: 236px;
    }
}


/* ---- statistics ---- */

/* ==========================================================================
   PRO-Chef — Statistics section "Мы проектируем и монтируем…" (main page)
   Source: Figma main page — Section-Statistics 256:1972 / 294:1878 / 294:2656.
   Depends on template_styles.css (.section-panel, .section-heading).

   Wide green panel with 40px margins around it (mobile 40 / 20).
   Cards: 4 in a row → 2×2 (≤1280: Desktop M and tablet) → 1 column (mobile).
   Title: Heading-3 (desktop) → Heading-4 size (tablet) → Heading-5 size (mobile), as in Figma.
   ========================================================================== */

.statistics {
    margin-block: var(--padding-section-small);
}

.statistics__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.statistics__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--margin);
    width: 100%;
}

.statistics__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--margin);
    padding: var(--padding-x-large);
    border-radius: 10px;
    text-align: center;
    color: var(--color-light-light);
    background-color: var(--color-light-white-8);
}


/* Desktop M (1024–1280): 4 cards don't fit the 64px numbers — 2×2 grid */
@media (max-width: 1280px) {
    .statistics__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .statistics.section-panel {
        padding-inline: var(--padding-section-medium);
    }

    .statistics__inner {
        gap: var(--margin-x-large);
    }

    .statistics .section-heading {
        gap: var(--margin);
    }

    /* Heading-4 (tablet) */
    .statistics .section-heading__title {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -0.3px;
    }

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

    .statistics__card {
        gap: var(--margin-x-small);
        padding: 24px;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .statistics.section-panel {
        padding: 36px var(--padding-x-large) var(--padding-x-large);
    }

    .statistics__inner {
        gap: var(--margin-large);
    }

    /* Heading-5 (mobile) */
    .statistics .section-heading__title {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0;
    }

    .statistics__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--margin-small);
    }

    .statistics__card {
        gap: var(--margin-3x-small);
        padding: var(--padding-large);
    }
}


/* ---- reviews ---- */

/* ==========================================================================
   PRO-Chef — Reviews section "Отзывы и рекомендации" (main page)
   Source: Figma main page — Section-Reviews 256:1992 / 294:1898 / 294:2676.
   Depends on template_styles.css, slider/slider.css, review-card/review-card.css.

   Video review (poster + 60% overlay) and a slider of Review-cards
   (580 → 510 → full width + dots on mobile). "Смотреть видео" — a link for now.
   ========================================================================== */

.reviews {
    padding-block: var(--padding-section-2x-large);
}

.reviews__inner {
    display: flex;
    flex-direction: column;
    gap: var(--padding-section-medium);
}

.reviews__title {
    text-align: center;
    color: var(--color-dark-primary);
}

.reviews__body {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}


/* Video review
   -------------------------------------------------------------------------- */
.reviews__video {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 600px;
    padding: var(--padding-section-medium);
    overflow: hidden;
    border-radius: 10px;
    color: var(--color-light-white);
    isolation: isolate;
}

/* Poster under the 60% overlay (::before) */
.reviews__poster {
    z-index: -1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviews__video::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(16, 19, 19, 0.6);
}

.reviews__logo,
.reviews__quote {
    position: relative;
}

.reviews__logo {
    width: 194px;
    height: auto;
}

.reviews__quote {
    display: flex;
    flex-direction: column;
    gap: var(--margin-x-large);
}

.reviews__quote-text {
    max-width: 720px;
}

.reviews__footer {
    display: flex;
    align-items: center;
    gap: var(--padding-section-medium);
}

.reviews__author {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: var(--margin-3x-small);
    min-width: 0;
}

.reviews__button {
    flex-shrink: 0;
    width: 219px;
}


/* Slider of review cards
   -------------------------------------------------------------------------- */
.reviews__slider {
    --slider-item-width: calc((100% - var(--slider-gap)) / 2);
}

.reviews__dots {
    display: none;
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .reviews {
        padding-block: var(--padding-section-large);
    }

    .reviews__inner {
        gap: var(--padding-section-small);
    }

    .reviews__video {
        min-height: 480px;
        padding: var(--margin-x-large);
    }

    .reviews__logo {
        width: 172px;
    }

    .reviews__quote-text {
        max-width: 591px;
    }

    .reviews__author {
        gap: var(--margin-4x-small);
    }

    .reviews__button {
        width: 197px;
    }

    .reviews__slider {
        --slider-item-width: 510px;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .reviews__video {
        justify-content: flex-start;
        gap: 72px;
        min-height: 0;
        padding: var(--padding-x-large);
    }

    .reviews__logo {
        width: 129px;
    }

    .reviews__quote {
        gap: var(--margin-medium);
    }

    /* Title-3 size (mobile, Figma); the desktop line breaks are dropped */
    .reviews__quote-text {
        font-size: 16px;
        line-height: 24px;
    }

    .reviews__quote-text br {
        display: none;
    }

    .reviews__footer {
        flex-direction: column;
        align-items: stretch;
        gap: var(--margin-x-large);
    }

    .reviews__button {
        width: 100%;
    }

    .reviews__slider {
        --slider-item-width: 100%;
    }

    .reviews__dots {
        display: flex;
    }
}


/* ---- warranty ---- */

/* ==========================================================================
   PRO-Chef — Warranty section "Гарантия и сервис" (main page)
   Source: Figma main page — Section-warranty 256:2258 / 294:1957 / 294:2747.
   Depends on template_styles.css.

   Cards 2×2 (desktop) → 1 column (tablet, mobile). Mobile: descriptions hidden.
   ========================================================================== */

.warranty {
    padding-block: var(--padding-section-2x-large) var(--padding-section-small);
}

.warranty__inner {
    display: flex;
    flex-direction: column;
    gap: var(--padding-section-medium);
}

.warranty__title {
    text-align: center;
    color: var(--color-dark-primary);
}

.warranty__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--margin);
}

.warranty__card {
    display: flex;
    align-items: center;
    gap: var(--margin-x-medium);
    padding: var(--padding-2x-large);
    border: 1px solid var(--color-dark-neutral);
    border-radius: 10px;
}

/* Icon: 80px box, 40px glyph */
.warranty__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    color: var(--color-accent-emerald);
    background-color: var(--color-light-neutral-15);
}

.warranty__icon svg {
    width: 40px;
    height: 40px;
}

.warranty__text {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--margin-3x-small);
    min-width: 0;
    min-height: 72px;
}

.warranty__card-title {
    color: var(--color-dark-primary);
}

.warranty__card-text {
    color: var(--color-dark-pebble);
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .warranty {
        padding-block: var(--padding-section-medium);
    }

    .warranty__inner {
        gap: var(--padding-section-small);
    }

    .warranty__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--margin-small);
    }

    .warranty__card {
        gap: var(--margin-medium);
        padding: 24px;
    }

    .warranty__icon svg {
        width: 32px;
        height: 32px;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .warranty {
        padding-block: var(--padding-section-small);
    }

    .warranty__inner {
        gap: 36px;
    }

    .warranty__card {
        gap: var(--margin);
        padding: var(--padding-medium);
    }

    .warranty__icon {
        width: 64px;
        height: 64px;
    }

    .warranty__card-text {
        display: none;
    }
}


/* ---- emergency ---- */

/* ==========================================================================
   PRO-Chef — Emergency banner "Сломался котел или замерзает дом?" (main page)
   Source: Figma main page — Section-banner-Warranty 256:2298 / 294:1995 / 294:2785.
   Depends on template_styles.css (.special-button, typography).

   Grid 2 columns × 2 rows: text (top-left), dark band (bottom, full width),
   master photo (right column: over both rows on desktop, top row on tablet,
   hidden on mobile). Desktop: the panel is 28px wider than the container.
   ========================================================================== */

.emergency {
    padding-block: var(--padding-section-2x-large) var(--padding-section-large);
}

.emergency__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48%;
    grid-template-rows: auto auto;
    margin-inline: calc(var(--padding-x-large) * -1);
    overflow: hidden;
    border-radius: var(--radius-medium);
    background: var(--color-accent-green-gradient);
}

.emergency__main {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--margin-x-large);
    padding: var(--padding-section-large) 0 var(--padding-section-medium) var(--padding-section-medium);
    color: var(--color-light-white);
}

.emergency__heading {
    display: flex;
    flex-direction: column;
    gap: var(--margin-medium);
    max-width: 547px;
}

/* Master photo: grid area over both rows. The wrapper has no intrinsic size
   (contain: size), so the rows are sized by the text; the photo takes the full
   height of the area and is cut on the right by the panel. */
.emergency__visual {
    position: relative;
    z-index: 1;
    grid-area: 1 / 2 / 3 / 3;
    display: flex;
    align-items: flex-end;
    contain: size;
}

.emergency__photo {
    flex-shrink: 0;
    width: auto;
    max-width: none;
    height: 100%;
}

.emergency__band {
    grid-area: 2 / 1 / 3 / 3;
    display: flex;
    padding: var(--margin-x-large) 0 var(--padding-section-medium) var(--padding-section-medium);
    color: var(--color-light-white);
    background-color: var(--color-dark-black);
}

.emergency__columns {
    display: flex;
    gap: var(--margin-x-large);
    width: 548px;
}

.emergency__column {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: var(--margin-small);
    min-width: 0;
}

/* Phone button: special-button (primary-inverted) with an Emerald icon circle,
   Label-1 text, fixed width */
.emergency__phone {
    --special-button-color: var(--color-dark-primary);
    --special-button-icon-bg: var(--color-accent-emerald);

    width: 280px;
    padding-right: var(--padding-2x-small);
}

.emergency__phone .special-button__icon > svg {
    width: 24px;
    height: 24px;
}

.emergency__phone .special-button__label {
    flex: 1 0 0;
    padding-right: var(--padding-large);
    text-align: center;
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .emergency {
        padding-block: var(--padding-section-medium);
    }

    .emergency__panel {
        margin-inline: 0;
    }

    /* Text spans the whole top row, the photo lies over its right part */
    .emergency__main {
        grid-area: 1 / 1 / 2 / 3;
        padding: var(--margin-x-large);
    }

    /* Narrow enough to keep the text left of the photo (4 lines, as in Figma) */
    .emergency__heading {
        max-width: 330px;
    }

    /* Photo stays in the top row, 464px high, bottom-aligned */
    .emergency__visual {
        grid-area: 1 / 2;
    }

    .emergency__photo {
        height: 464px;
    }

    .emergency__band {
        padding: var(--padding-section-small) var(--margin-x-large) var(--margin-x-large);
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .emergency {
        padding-block: var(--padding-large) var(--padding-section-large);
    }

    .emergency__panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .emergency__visual {
        display: none;
    }

    .emergency__main {
        align-items: center;
        padding: var(--padding-2x-large) var(--padding-x-large);
        text-align: center;
    }

    .emergency__band {
        grid-area: 2 / 1;
        padding: 24px var(--padding-x-large) var(--padding-x-large);
    }

    .emergency__columns {
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    .emergency__column {
        gap: var(--margin-3x-small);
    }

    .emergency__column + .emergency__column {
        padding-top: 24px;
        border-top: 1px solid var(--color-dark-neutral-40);
    }
}


/* ---- reconstruction ---- */

/* ==========================================================================
   PRO-Chef — Reconstruction section "Реконструкция и модернизация" (main page)
   Source: Figma main page — Section-reconstruction 256:2341 / 294:2026 / 294:2816.
   Depends on template_styles.css (.section-heading, .button).

   2 cards (dark and light) side by side → 1 column on mobile.
   Photo keeps the 580×460 proportion.
   ========================================================================== */

.reconstruction {
    padding-block: var(--padding-section-2x-large);
}

.reconstruction__inner {
    display: flex;
    flex-direction: column;
    gap: var(--margin-x-large);
}

.reconstruction__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: var(--margin);
}

.reconstruction__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-x-small);
    color: var(--color-dark-graphite);
    background-color: var(--color-light-neutral-15);
}

.reconstruction__card--dark {
    color: var(--color-light-white);
    background: linear-gradient(180deg, rgba(51, 51, 51, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.reconstruction__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 580 / 460;
    object-fit: cover;
}

.reconstruction__body {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--padding-section-small);
    padding: var(--padding-section-small) var(--padding-section-medium);
    text-align: center;
}

.reconstruction__text {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}

.reconstruction__card--dark .reconstruction__description {
    color: var(--color-light-light);
}

.reconstruction__button {
    width: 100%;
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .reconstruction {
        padding-block: var(--padding-section-large) var(--padding-section-x-large);
    }

    .reconstruction__inner {
        gap: var(--padding-section-small);
    }

    .reconstruction__body {
        gap: var(--margin-large);
        padding: var(--padding-x-large) 24px;
    }

    .reconstruction__text {
        gap: var(--margin-small);
    }

    /* Desktop line breaks of the card text are dropped on narrow cards */
    .reconstruction__description br {
        display: none;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .reconstruction {
        padding-block: var(--padding-section-medium);
    }

    .reconstruction__cards {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---- faq ---- */

/* ==========================================================================
   PRO-Chef — FAQ section "Часто задаваемые вопросы" (main page)
   Source: Figma main page — Secton-FAQ 256:2530 / 294:2086 / 294:2913.
   Depends on template_styles.css, accordion/accordion.css.
   ========================================================================== */

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

.faq__inner {
    display: flex;
    flex-direction: column;
    gap: var(--padding-section-medium);
}

.faq__title {
    text-align: center;
    color: var(--color-dark-primary);
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--margin-small);
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .faq {
        padding-block: var(--padding-section-2x-large) var(--padding-section-medium);
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .faq {
        padding-block: var(--padding-section-large) var(--padding-section-medium);
    }

    .faq__inner {
        gap: var(--padding-section-small);
    }
}


/* ---- documents ---- */

/* ==========================================================================
   PRO-Chef — Documents section "Документы и допуски" (main page)
   Source: Figma main page — Section-Documents 256:2613 / 294:2103 / 294:2930.
   Depends on template_styles.css (.button).

   Cards 3 columns (desktop) → 2 (tablet) → 1 (mobile).
   Mobile: only the first 3 cards + "Смотреть все" (documents.js shows the rest).
   ========================================================================== */

.documents {
    padding-block: var(--padding-section-x-large);
}

.documents__inner {
    display: flex;
    flex-direction: column;
    gap: var(--margin-x-large);
}

.documents__title {
    color: var(--color-dark-primary);
}

.documents__body {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}

.documents__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--margin);
}

.documents__card {
    display: flex;
    flex-direction: column;
    gap: var(--margin-x-small);
    height: 240px;
    padding: var(--padding-x-large) var(--padding-large) var(--padding-large);
    border-radius: 10px;
    background-color: var(--color-light-neutral-15);
}

/* Document preview fading into the card background at the bottom */
.documents__preview {
    position: relative;
    flex: 1 0 0;
    min-height: 0;
    margin-inline: auto;
}

.documents__preview img {
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.documents__preview::after {
    content: "";
    position: absolute;
    inset: 0;
    /* #f4f4f4 — Neutral-15 on white, the card background */
    background: linear-gradient(180deg, rgba(244, 244, 244, 0) 25%, #f4f4f4 100%);
}

.documents__name {
    color: var(--color-dark-pebble);
}

.documents__more {
    display: none;
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .documents {
        padding-block: var(--padding-section-medium);
    }

    .documents__inner {
        gap: var(--padding-section-small);
    }

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

    .documents__title {
        text-align: center;
    }

    .documents__card {
        height: 200px;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .documents__inner {
        gap: var(--margin-large);
    }

    .documents__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .documents__card {
        height: auto;
    }

    .documents__preview {
        flex: 0 0 124px;
    }

    .documents__grid:not(.documents__grid--open) .documents__card:nth-child(n + 4) {
        display: none;
    }

    .documents__more {
        display: flex;
        width: 100%;
    }
}


/* ---- cta ---- */

/* ==========================================================================
   PRO-Chef — CTA section "Начните с бесплатного выезда инженера" (main page)
   Source: Figma main page — Section-CTA 256:2739 / 294:2134 / 294:2950.
   Depends on template_styles.css (.section-panel, .section-heading, .button).

   Wide green panel with 40px margins around it (mobile 20).
   Title: Heading-4; on tablet 28/36 (Figma). Buttons side by side → stacked on mobile.
   ========================================================================== */

.cta {
    margin-block: var(--padding-section-small);
}

.cta.section-panel {
    display: flex;
    align-items: center;
    min-height: 720px;
}

.cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    width: 100%;
}

.cta__buttons {
    display: flex;
    justify-content: center;
    gap: var(--margin);
}

.cta__button {
    width: 280px;
}


/* Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .cta.section-panel {
        min-height: 0;
        padding-bottom: var(--padding-section-small);
    }

    .cta__inner {
        gap: var(--padding-section-medium);
    }

    .cta .section-heading__title {
        font-size: 28px;
        line-height: 36px;
    }

    .cta__button {
        width: 290px;
    }
}


/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
    .cta {
        margin-block: var(--padding-large);
    }

    .cta.section-panel {
        padding: 36px var(--padding-x-large) var(--padding-x-large);
    }

    .cta .section-heading__text br {
        display: none;
    }

    .cta__buttons {
        flex-direction: column;
        gap: var(--margin-small);
        width: 100%;
    }

    .cta__button {
        width: 100%;
    }
}