/* Font-face declarations for Onest family */
@font-face {
    font-family: 'Onest';
    src: url('/local/templates/paketti/assets/fonts/Onest/Onest-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Onest';
    src: url('/local/templates/paketti/assets/fonts/Onest/static/Onest-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face { /* ExtraLight */
    font-family: 'Onest';
    src: url('/local/templates/paketti/assets/fonts/Onest/static/Onest-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face { /* Light */
    font-family: 'Onest';
    src: url('/local/templates/paketti/assets/fonts/Onest/static/Onest-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Onest';
    src: url('/local/templates/paketti/assets/fonts/Onest/static/Onest-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Onest';
    src: url('/local/templates/paketti/assets/fonts/Onest/static/Onest-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Onest';
    src: url('/local/templates/paketti/assets/fonts/Onest/static/Onest-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Onest';
    src: url('/local/templates/paketti/assets/fonts/Onest/static/Onest-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Onest';
    src: url('/local/templates/paketti/assets/fonts/Onest/static/Onest-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Onest';
    src: url('/local/templates/paketti/assets/fonts/Onest/static/Onest-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Base typography */
html, body {
    font-family: 'Onest', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}


/*====================================
Start root (variables)
=====================================*/
:root {
    --color-text-primary: #312E2B;
    --color-text-secondary: #5C6062;
    --color-text-tertiary: #B7BDCDC9;
    --color-text-tertiary2: #B7BDCD;
    --color-text-contrast: #FFFFFF;
    --color-text-accent: #DA5D32;
    --color-text-link: #DA5D32;
    --color-text-link-2: #DA5D32;
    --color-link-hover: #E48A6B;
    --color-link-contrast: #FFFFFF;
    --color-icon-accent: #9AA1B6;
    --color-icon: #F5F7FD;
    --color-icon-contrast: #FFF;
    --color-map: #C3CADE;
    --color-map2: #F3E0D8;
    --color-process-circle: #F4ECE9;
    --color-process-circle2: #C3CADE;
    --color-process-hover: radial-gradient(170.32% 118.25% at 41.35% 69.79%, #DA5D32 0%, #FFBC3B 100%);
    --color-typography: linear-gradient(91deg, #B0B8C6 9.03%, #ECE1DE 98.35%);
    --color-bg: #FFF;
    --color-bg-secondary: #EAEDF5;
    --color-button-primary: radial-gradient(207% 178.5% at 41.35% 69.79%, #DA5D32 0%, #FFBC3B 100%);
    --color-button-secondary: #DA5D32;
    --color-button-contrast: #FFF;
    --color-button-tertiary: #EAEDF5;
    --color-card-primary: radial-gradient(170.32% 118.25% at 41.35% 69.79%, #DA5D32 0%, #FFBC3B 100%);
    --color-card-secondary: radial-gradient(145.68% 94.57% at 33.24% 26.73%, #474A4B 0%, #2E3031 100%);
    --color-card-tertiary: #EFF1F5;
    --color-card-tertiary2: linear-gradient(180deg, #EBEEF6 0%, rgba(251, 248, 247, 0.00) 74.49%);
    --color-border: #EAEDF5;
    --color-border2: #C3C7D1;
    --text-color-text-primary: #253247;
    --icons-color-icon-accent: #1D5E9A;
    --divider-color-divider: #D7E2EB;
    --text-color-text-link: #1D5E9A;
    --text-color-text-tertiary: #797F86;
    --column-gap-1: 8px;
    --column-gap-2: 20px;
    --column-gap-3: 40px;
    --column-gap-4: 50px;
}
/*====================================
End root (variables)
=====================================*/

/* Base styles (mobile first) */
:root {
    /* Spacing variables */
    --space-1: 8px !important;
    --space-2: 16px !important;
    --space-3: 24px !important;
    --space-4: 32px !important;
    --space-5: 40px !important;
    --space-6: 50px !important;
    --space-7: 60px !important;
    --space-8: 80px !important;
    --space-9: 120px !important;
    --space-10: 160px !important;
}

/* ========== BREAKPOINTS ========== */
@media (max-width: 1899px) {
    :root {
        --space-5: 32px !important;
        --space-7: 40px !important;
        --space-8: 60px !important;
        --space-9: 80px !important;
        --space-10: 80px !important;
        --column-gap-4: 40px !important;
    }
}

@media (max-width: 1279px) {
    :root {
        --space-2: 8px !important;
        --space-3: 16px !important;
        --space-4: 24px !important;
        --space-5: 24px !important;
        --space-6: 40px !important;
        --space-8: 40px !important;
        --space-10: 60px !important;
        --column-gap-4: 20px !important;
    }
}

@media (max-width: 767px) {
    :root {
        --space-9: 60px !important;
        --space-10: 40px !important;
        --column-gap-4: 8px !important;
    }
}


h1,h2,h3,h4,h5,h6 {
    margin: 0;
    color: #2E3031;
}

/* Auto and zero utilities */
.ma { margin: auto !important; }
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }

.p0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ========== PADDING CLASSES ========== */

/* All sides */
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-7 { padding: var(--space-7) !important; }
.p-8 { padding: var(--space-8) !important; }
.p-9 { padding: var(--space-9) !important; }

/* Horizontal (left & right) */
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-7 { padding-left: var(--space-7) !important; padding-right: var(--space-7) !important; }
.px-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
.px-9 { padding-left: var(--space-9) !important; padding-right: var(--space-9) !important; }
.px-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }

/* Vertical (top & bottom) */
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-7 { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
.py-9 { padding-top: var(--space-9) !important; padding-bottom: var(--space-9) !important; }
.py-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }

/* Top */
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-7 { padding-top: var(--space-7) !important; }
.pt-8 { padding-top: var(--space-8) !important; }
.pt-9 { padding-top: var(--space-9) !important; }
.pt-10 { padding-top: var(--space-10) !important; }

/* Right */
.pr-1 { padding-right: var(--space-1) !important; }
.pr-2 { padding-right: var(--space-2) !important; }
.pr-3 { padding-right: var(--space-3) !important; }
.pr-4 { padding-right: var(--space-4) !important; }
.pr-5 { padding-right: var(--space-5) !important; }
.pr-6 { padding-right: var(--space-6) !important; }
.pr-7 { padding-right: var(--space-7) !important; }
.pr-8 { padding-right: var(--space-8) !important; }
.pr-9 { padding-right: var(--space-9) !important; }
.pr-10 { padding-right: var(--space-10) !important; }

/* Bottom */
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-7 { padding-bottom: var(--space-7) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }
.pb-9 { padding-bottom: var(--space-9) !important; }
.pb-10 { padding-bottom: var(--space-10) !important; }

/* Left */
.pl-1 { padding-left: var(--space-1) !important; }
.pl-2 { padding-left: var(--space-2) !important; }
.pl-3 { padding-left: var(--space-3) !important; }
.pl-4 { padding-left: var(--space-4) !important; }
.pl-5 { padding-left: var(--space-5) !important; }
.pl-6 { padding-left: var(--space-6) !important; }
.pl-7 { padding-left: var(--space-7) !important; }
.pl-8 { padding-left: var(--space-8) !important; }
.pl-9 { padding-left: var(--space-9) !important; }
.pl-10 { padding-left: var(--space-10) !important; }

/* ========== MARGIN CLASSES ========== */

/* All sides */
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-7 { margin: var(--space-7) !important; }
.m-8 { margin: var(--space-8) !important; }
.m-9 { margin: var(--space-9) !important; }
.m-10 { margin: var(--space-10) !important; }  /* Исправлено: было m-9 повтор */

/* Horizontal (left & right) */
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
.mx-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mx-7 { margin-left: var(--space-7) !important; margin-right: var(--space-7) !important; }
.mx-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
.mx-9 { margin-left: var(--space-9) !important; margin-right: var(--space-9) !important; }
.mx-10 { margin-left: var(--space-10) !important; margin-right: var(--space-10) !important; }

/* Vertical (top & bottom) */
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
.my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.my-7 { margin-top: var(--space-7) !important; margin-bottom: var(--space-7) !important; }
.my-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
.my-9 { margin-top: var(--space-9) !important; margin-bottom: var(--space-9) !important; }
.my-10 { margin-top: var(--space-10) !important; margin-bottom: var(--space-10) !important; }

/* Top */
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-7 { margin-top: var(--space-7) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-9 { margin-top: var(--space-9) !important; }
.mt-10 { margin-top: var(--space-10) !important; }

/* Right */
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-5 { margin-right: var(--space-5) !important; }
.mr-6 { margin-right: var(--space-6) !important; }
.mr-7 { margin-right: var(--space-7) !important; }
.mr-8 { margin-right: var(--space-8) !important; }
.mr-9 { margin-right: var(--space-9) !important; }
.mr-10 { margin-right: var(--space-10) !important; }

/* Bottom */
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-7 { margin-bottom: var(--space-7) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mb-9 { margin-bottom: var(--space-9) !important; }
.mb-10 { margin-bottom: var(--space-10) !important; }

/* Left */
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-5 { margin-left: var(--space-5) !important; }
.ml-6 { margin-left: var(--space-6) !important; }
.ml-7 { margin-left: var(--space-7) !important; }
.ml-8 { margin-left: var(--space-8) !important; }
.ml-9 { margin-left: var(--space-9) !important; }
.ml-10 { margin-left: var(--space-10) !important; }

:root {
    /* Font size variables */
    --font-size-2xl: 90px;
    --font-size-xl: 60px;
    --font-size-l: 48px;
    --font-size-m: 32px;
    --font-size-s: 26px;
    --font-size-body-l: 18px;
    --font-size-body-m: 16px;
    --font-size-body-s: 14px;
    --font-size-body-xs: 12px;

    /* Line height variables */
    --line-height-2xl: 90px;
    --line-height-xl: 65px;
    --line-height-l: 54px;
    --line-height-m: 40px;
    --line-height-s: 32px;
    --line-height-body-l: 26px;
    --line-height-body-m: 22px;
    --line-height-body-s: 20px;
    --line-height-body-xs: 16px;

    /* Letter spacing variables */
    --letter-spacing-2xl: -1.2px;
    --letter-spacing-xl: -1.2px;
    --letter-spacing-l: -0.96px;

    /* Font weight variables */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;

    /* Text shadow */
    --text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* ========== BREAKPOINTS ========== */
@media (max-width: 1899px) {
    :root {
        --font-size-2xl: 60px;
        --line-height-2xl: 65px;
        --font-size-xl: 60px;
        --line-height-xl: 65px;
        --font-size-l: 40px;
        --line-height-l: 46px;
        --font-size-m: 26px;
        --line-height-m: 32px;
        --font-size-s: 20px;
        --line-height-s: 24px;
        --font-size-body-l: 18px;
        --line-height-body-l: 26px;
    }
}

@media (max-width: 1679px) {
    :root {
    }
}

@media (max-width: 1279px) {
    :root {
        --font-size-xl: 40px;
        --line-height-xl: 44px;
        --font-size-l: 32px;
        --line-height-l: 40px;
        --font-size-s: 20px;
        --line-height-s: 24px;
        --font-size-body-l: 16px;
        --line-height-body-l: 24px;
    }
}

@media (max-width: 767px) {
    :root {
        --space-9: 60px;
    }
}

/* ======================================= */
/* Базовые настройки типографики */
/* ======================================= */

.typography {
    font-family: Onest;
    font-style: normal;
}

/* ======================================= */
/* Модификаторы размера */
/* ======================================= */

.typography-size-2xl,
.typography-title-2xl {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-2xl);
    letter-spacing: var(--letter-spacing-2xl);
}

.typography-title-xl {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
    letter-spacing: var(--letter-spacing-xl);
}

.typography-title-l {
    font-size: var(--font-size-l);
    line-height: var(--line-height-l);
    letter-spacing: var(--letter-spacing-l);
}

.typography-title-m,
.typography-title-m-bold {
    font-size: var(--font-size-m);
    line-height: var(--line-height-m);
}

.typography-title-s {
    font-size: var(--font-size-s);
    line-height: var(--line-height-s);
}

.typography-size-l {
    font-size: var(--font-size-body-l);
    line-height: var(--line-height-body-l);
}

.typography-size-m {
    font-size: var(--font-size-body-m);
    line-height: var(--line-height-body-m);
}

.typography-size-s {
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-body-s);
}

.typography-size-xs {
    font-size: var(--font-size-body-xs);
    line-height: var(--line-height-body-xs);
}

/* ======================================= */
/* Модификаторы насыщенности (weight) */
/* ======================================= */

.typography-weight-400 {
    font-weight: var(--font-weight-regular);
}

.typography-weight-500,
.typography-text-l {
    font-weight: var(--font-weight-medium);
}

.typography-weight-600,
.typography-title-m,
.typography-title-s {
    font-weight: var(--font-weight-semibold);
}

.typography-weight-700,
.typography-title-2xl,
.typography-title-xl,
.typography-title-m-bold {
    font-weight: var(--font-weight-bold);
}

.typography-weight-800,
.typography-title-l {
    font-weight: var(--font-weight-extra-bold);
}

/* ======================================= */
/* Модификаторы трансформации текста */
/* ======================================= */

.typography-uppercase,
.typography-title-2xl,
.typography-title-xl,
.typography-title-l,
.typography-title-m-bold {
    text-transform: uppercase;
}

/* ========== RESPONSIVE TYPOGRAPHY (max-width: 1024px) ========== */