/* =========================================================================
   Трасса — a freight and logistics theme (child of Default).

   Default's layers load first; this file re-dresses them.

   ART DIRECTION
   Palette: deep navy (#0b1b3a) for every dark band, cool paper (#eef1f6)
   for the pages, one signal yellow (#ffd21f) for buttons, figures, route
   markers and the dashed road. Yellow is a fill with navy text on top, and
   the text colour only on navy.

   Type: Unbounded — a wide, heavy grotesque — for headlines, prices and
   figures, in sentence case (it is wide enough to shout); Onest for text.

   Form: square, 2px navy frames like a waybill, hard offset shadow on hover,
   a dashed yellow "road marking" under the header and on dark bands, and
   kilometre posts (a navy plate with the section number) instead of numbered sheets above each section.
   ========================================================================= */

@font-face {
    font-family: 'Trassa Unbounded';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url('/themes/default/assets/fonts/unbounded-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Trassa Unbounded';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url('/themes/default/assets/fonts/unbounded-latin-wght-normal.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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Trassa Onest';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/themes/default/assets/fonts/onest-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Trassa Onest';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/themes/default/assets/fonts/onest-latin-wght-normal.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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Trassa Manrope';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('/themes/default/assets/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Trassa Manrope';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('/themes/default/assets/fonts/manrope-latin-wght-normal.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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Trassa Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/themes/default/assets/fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Trassa Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/themes/default/assets/fonts/inter-latin-wght-normal.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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The owner's design settings (theme.json → design.controls) arrive as
   :root{--trassa-…} after this file; these are the defaults. */
:root {
    --trassa-accent: #ffd21f;
    --trassa-font-display: 'Trassa Unbounded', 'Unbounded', 'Arial Black', 'Segoe UI', sans-serif;
    --trassa-font-body: 'Trassa Onest', 'Segoe UI', Arial, system-ui, sans-serif;
    --trassa-radius: 0px;
}

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root:root {
    --tr-y: var(--trassa-accent);
    --tr-y-hi: color-mix(in srgb, var(--tr-y), #ffffff 24%);
    --tr-y-deep: color-mix(in srgb, var(--tr-y), #000000 14%);
    --tr-y-ink: color-mix(in srgb, var(--tr-y), #000000 55%);
    --tr-n-950: #060f24;
    --tr-n-900: #0b1b3a;
    --tr-n-800: #12284f;
    --tr-n-700: #1c3868;
    --tr-n-600: #34518a;
    --tr-n-300: #9fb0cf;
    --tr-paper: #eef1f6;
    --tr-sheet: #e2e8f1;
    --tr-line: #c5cfe0;
    --tr-r: var(--trassa-radius);

    --tr-grid-dark: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
    --tr-grid-light: linear-gradient(rgb(11 27 58 / 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(11 27 58 / 0.05) 1px, transparent 1px);
    --tr-grid-size: 48px 48px, 48px 48px;
    --tr-road: repeating-linear-gradient(90deg, var(--tr-y) 0 26px, transparent 26px 44px);

    --c-bg: var(--tr-paper);
    --c-surface: #ffffff;
    --c-surface-sunk: var(--tr-sheet);
    --c-text: #1a2742;
    --c-text-strong: var(--tr-n-900);
    --c-text-muted: #55627d;
    --c-text-faint: #8590a8;
    --c-border: var(--tr-line);
    --c-border-strong: var(--tr-n-900);
    --c-accent: var(--tr-y);
    --c-accent-hover: var(--tr-y-hi);
    --c-accent-contrast: var(--tr-n-900);
    --c-accent-soft: color-mix(in srgb, var(--tr-y) 22%, #ffffff);
    --c-link: var(--tr-n-700);
    --c-link-hover: var(--tr-n-900);
    --c-mark: var(--tr-y);
    --c-mark-text: var(--tr-y-ink);
    --c-mark-soft: color-mix(in srgb, var(--tr-y) 22%, #ffffff);
    --c-slab: var(--tr-n-900);
    --c-slab-text: #f3f6fb;
    --c-slab-muted: #a9b6d0;
    --c-danger: #c62f1f;
    --c-success: #1f7a45;

    --font-display: var(--trassa-font-display);
    --font-ui: var(--trassa-font-body);
    --font-prose: var(--font-ui);
    --fw-heading: 700;
    --tr-tight: -0.01em;
    --lh-tight: 1.08;
    --lh-snug: 1.14;
    --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
    --t-xl: clamp(1.55rem, 1.2rem + 1.5vw, 2.45rem);
    --t-2xl: clamp(1.9rem, 1.4rem + 2.4vw, 3.3rem);
    --t-3xl: clamp(2.1rem, 1.4rem + 3.4vw, 4.2rem);

    --r-xs: var(--tr-r);
    --r-sm: var(--tr-r);
    --r-md: var(--tr-r);
    --r-lg: var(--tr-r);
    --r-pill: var(--tr-r);
    --r-btn: var(--tr-r);
    --card-radius: var(--tr-r);
    --card-bg: #ffffff;
    --card-border: 2px solid var(--tr-n-900);
    --card-shadow: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 8px 8px 0 0 var(--tr-n-900);
    --shadow-lift: 0 18px 40px -22px rgb(6 15 36 / 0.5);

    --w-container: 82rem;
    --w-wide: 82rem;
    --sp-md: clamp(3.25rem, 2.2rem + 4.2vw, 5.75rem);
    --sp-lg: clamp(4.25rem, 2.8rem + 5.8vw, 7.5rem);

    color-scheme: light;
}

html[data-trassa-tone="ink"]:root {
    --tr-n-950: #04060b;
    --tr-n-900: #0a0d16;
    --tr-n-800: #151a28;
    --tr-n-700: #232a3e;
    --tr-n-600: #3b4561;
    --tr-n-300: #9aa3b8;
}

html[data-trassa-tone="steel"]:root {
    --tr-n-950: #0f1823;
    --tr-n-900: #1c2b3c;
    --tr-n-800: #263a50;
    --tr-n-700: #34506b;
    --tr-n-600: #4f6b88;
    --tr-n-300: #a9bacb;
}

:is(.cms-tone-dark, .cms-on-dark):not(#tr) {
    --c-bg: var(--tr-n-900);
    --c-surface: var(--tr-n-800);
    --c-surface-sunk: var(--tr-n-950);
    --c-text: #e4eaf5;
    --c-text-strong: #ffffff;
    --c-text-muted: #a9b6d0;
    --c-text-faint: #7886a4;
    --c-border: #2b4272;
    --c-border-strong: #e4eaf5;
    --c-accent: var(--tr-y);
    --c-accent-hover: var(--tr-y-hi);
    --c-accent-contrast: var(--tr-n-900);
    --c-accent-soft: color-mix(in srgb, var(--tr-y) 14%, var(--tr-n-900));
    --c-link: var(--tr-y);
    --c-link-hover: var(--tr-y-hi);
    --c-mark: var(--tr-y);
    --c-mark-text: var(--tr-y);
    --card-bg: var(--tr-n-800);
    --card-border: 2px solid #2b4272;
    color-scheme: dark;
}

.cms-tone-dark:not(#tr) {
    --section-bg: var(--tr-n-900);
    --section-bg-image: var(--tr-grid-dark);
    background-size: var(--tr-grid-size);
    background-position: -1px -1px;
}

.cms-tone-soft:not(#tr) {
    --section-bg: var(--tr-sheet);
    --section-bg-image: var(--tr-grid-light);
    --c-bg: var(--tr-sheet);
    --c-surface: #ffffff;
    --c-surface-sunk: #d6dfec;
    background-size: var(--tr-grid-size);
    background-position: -1px -1px;
}

.cms-tone-primary:not(#tr) {
    --section-bg: var(--tr-y);
    --c-bg: var(--tr-y);
    --c-surface: var(--tr-y-hi);
    --c-surface-sunk: color-mix(in srgb, var(--tr-y), #000000 7%);
    --c-text: var(--tr-n-900);
    --c-text-strong: var(--tr-n-950);
    --c-text-muted: #3d3a1f;
    --c-text-faint: #5e5826;
    --c-border: rgb(11 27 58 / 0.25);
    --c-border-strong: var(--tr-n-900);
    --c-accent: var(--tr-n-900);
    --c-accent-hover: var(--tr-n-700);
    --c-accent-contrast: var(--tr-y);
    --c-link: var(--tr-n-900);
    --c-mark: var(--tr-n-900);
    --c-mark-text: var(--tr-n-900);
    color-scheme: light;
}

.cms-tone-accent:not(#tr) {
    --section-bg: var(--tr-n-700);
    --c-bg: var(--tr-n-700);
    --c-surface: var(--tr-n-600);
    --c-surface-sunk: var(--tr-n-800);
    --c-text: #eef3fb;
    --c-text-strong: #ffffff;
    --c-text-muted: #c1cde3;
    --c-border: #4c6aa3;
    --c-accent: var(--tr-y);
    --c-accent-contrast: var(--tr-n-900);
    --c-link: var(--tr-y);
    --c-mark: var(--tr-y);
    --c-mark-text: var(--tr-y);
    color-scheme: dark;
}

.cms-on-light:not(#tr) {
    --c-bg: var(--tr-paper);
    --c-text: #1a2742;
    --c-text-strong: var(--tr-n-900);
    --c-text-muted: #55627d;
    --c-border: var(--tr-line);
    color-scheme: light;
}

/* -------------------------------------------------------------------------
   2. Base, buttons, forms
   ------------------------------------------------------------------------- */

body {
    background-color: var(--tr-paper);
    font-family: var(--font-ui);
    font-size: var(--t-base);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tr-tight);
    line-height: var(--lh-snug);
    text-wrap: balance;
}

a { text-decoration-color: var(--tr-y); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--tr-y); outline-offset: 2px; }

.cms-btn {
    min-height: 52px;
    padding: 0.7rem 1.6rem;
    border-width: 2px;
    border-radius: var(--tr-r);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.cms-btn--primary { background-color: var(--tr-y); border-color: var(--tr-y); color: var(--tr-n-900); }
.cms-btn--primary:hover { background-color: var(--tr-y-hi); border-color: var(--tr-y-hi); color: var(--tr-n-900); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--tr-n-900); }
.cms-btn--ghost { border-color: currentColor; color: var(--c-text-strong); }
.cms-btn--ghost:hover { background-color: var(--c-text-strong); border-color: var(--c-text-strong); color: var(--c-bg); }

:is(.cms-tone-dark, .cms-on-dark, .cms-tone-accent) .cms-btn--primary:hover { box-shadow: 4px 4px 0 0 #ffffff; }
:is(.cms-tone-dark, .cms-on-dark, .cms-tone-accent) .cms-btn--ghost { border-color: rgb(255 255 255 / 0.5); color: #fff; }
:is(.cms-tone-dark, .cms-on-dark, .cms-tone-accent) .cms-btn--ghost:hover { background: var(--tr-y); border-color: var(--tr-y); color: var(--tr-n-900); }
.cms-tone-primary .cms-btn--primary { background-color: var(--tr-n-900); border-color: var(--tr-n-900); color: var(--tr-y); }
.cms-tone-primary .cms-btn--primary:hover { background-color: var(--tr-n-700); border-color: var(--tr-n-700); box-shadow: 4px 4px 0 0 rgb(11 27 58 / 0.35); color: var(--tr-y); }

.cms-card { border-radius: var(--tr-r); box-shadow: none; }

.cms-badge-icon { border-radius: var(--tr-r) !important; background: var(--tr-y) !important; color: var(--tr-n-900) !important; }
.cms-badge-icon--plain { background: transparent !important; color: var(--tr-n-700) !important; }
:is(.cms-tone-dark, .cms-on-dark) .cms-badge-icon--plain { color: var(--tr-y) !important; }

input:not([type="checkbox"], [type="radio"], [type="range"]),
select,
textarea { border-radius: var(--tr-r) !important; }

.cms-field__input:focus,
input:not([type="checkbox"], [type="radio"], [type="range"]):focus,
textarea:focus,
select:focus { border-color: var(--tr-n-900) !important; box-shadow: inset 0 -3px 0 var(--tr-y) !important; outline: none; }

.cms-popover__panel { border-radius: var(--tr-r); border-top: 6px solid var(--tr-y); }
.cms-popover__title { font-family: var(--font-display); }

/* -------------------------------------------------------------------------
   3. Sections: kilometre posts above each headed section
   ------------------------------------------------------------------------- */

.landing { counter-reset: tr-km; }

.cms-section__head { max-width: none; margin-block-end: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.cms-section__head--center,
.cms-section__head--left { margin-inline: 0; text-align: start; }

.cms-section__title { max-width: 24ch; font-size: var(--t-xl); font-weight: 700; line-height: 1.12; }
.cms-section__subtitle { max-width: 44rem; margin-block-start: var(--s-4); font-size: var(--t-md); line-height: 1.55; }

.landing .cms-section__head { counter-increment: tr-km; }

.landing .cms-section__head::before {
    content: counter(tr-km, decimal-leading-zero);
    display: block;
    width: fit-content;
    min-width: 3.6rem;
    margin-block-end: var(--s-5);
    padding: 0.32rem 0.8rem;
    background: var(--tr-n-900);
    border-left: 8px solid var(--tr-y);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
}

:is(.cms-tone-dark, .cms-on-dark) .cms-section__head::before { background: var(--tr-y); border-left-color: #ffffff; color: var(--tr-n-900); }
.cms-tone-primary .cms-section__head::before { background: var(--tr-n-900); border-left-color: #ffffff; color: var(--tr-y); }

@media (min-width: 62rem) {
    .cms-section__head:has(.cms-section__subtitle) {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: var(--s-8);
        align-items: end;
    }

    .landing .cms-section__head:has(.cms-section__subtitle)::before { grid-column: 1 / -1; }

    .cms-section__head:has(.cms-section__subtitle) .cms-section__subtitle {
        margin: 0;
        padding-inline-start: var(--s-5);
        border-inline-start: 4px solid var(--tr-y);
    }
}

/* The road: a dashed yellow line on the top edge of yellow and dark bands. */
.cms-section.cms-tone-dark::before,
.cms-section.cms-tone-primary::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--tr-road);
    opacity: 0.9;
}

.cms-section.cms-tone-primary::before { background: repeating-linear-gradient(90deg, var(--tr-n-900) 0 26px, transparent 26px 44px); }

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */

.site-header { position: relative; z-index: 40; background: #ffffff; border-bottom: 3px solid var(--tr-n-900); box-shadow: none; }
.site-header.site-header--sticky { position: sticky; top: 0; }

.tr-hdr__row--top { position: relative; background: var(--tr-n-900); color: #cbd6ec; font-size: 0.8rem; }
.tr-hdr__row--top::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--tr-road); }
.tr-hdr__row--top :is(a, .hdr-text, .hdr-links, .hdr-icon-btn) { color: #cbd6ec; }
.tr-hdr__row--top a:hover { color: var(--tr-y); }
.tr-hdr__row--top .cms-icon { color: var(--tr-y); }
.tr-hdr__row--top .hdr-row__inner { min-height: 40px; padding-block: 0.15rem 0.35rem; }

.tr-hdr__row--main { background: #ffffff; }
.tr-hdr__row--main .hdr-row__inner { min-height: 78px; }

.tr-hdr__row--bottom { background: var(--tr-sheet); border-top: 1px solid var(--tr-line); font-size: 0.9rem; }

.tr-logo { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--tr-n-900); text-decoration: none; }
.tr-logo__mark { width: 2.7rem; height: 2.7rem; flex: none; color: var(--tr-n-900); }
.tr-logo__plate { fill: var(--tr-y); }
.tr-logo .hdr-logo__name { font-family: var(--font-display); font-size: 1.28rem; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.tr-logo .hdr-logo__tagline { display: block; margin-top: 0.1rem; color: var(--c-text-muted); font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; }

.tr-hdr .hdr-nav__list { gap: 0; }
.tr-hdr .hdr-nav__link {
    padding: 0.7rem 0.95rem;
    border-radius: 0;
    color: var(--tr-n-900);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: inset 0 -4px 0 transparent;
    transition: box-shadow 0.12s ease, background-color 0.12s ease;
}

.tr-hdr .hdr-nav__item:hover > .hdr-nav__link,
.tr-hdr .hdr-nav__link[aria-current],
.tr-hdr .hdr-nav__link:hover { background: var(--tr-sheet); box-shadow: inset 0 -4px 0 var(--tr-y); color: var(--tr-n-900); }

.tr-hdr .hdr-phone__number { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; color: var(--tr-n-900); }
.tr-hdr .hdr-phone__caption { color: var(--c-text-muted); font-size: 0.72rem; }
.tr-hdr .hdr-button { white-space: nowrap; }

.tr-hdr .hdr-sub__list { border: 2px solid var(--tr-n-900); border-top: 4px solid var(--tr-y); border-radius: 0; box-shadow: 8px 8px 0 0 rgb(11 27 58 / 0.18); background: #ffffff; }
.tr-hdr .hdr-sub__link { border-radius: 0; font-size: 0.92rem; }
.tr-hdr .hdr-sub__link:hover { background: var(--tr-y); color: var(--tr-n-900); }

.tr-burger { border: 2px solid var(--tr-n-900); border-radius: 0; background: var(--tr-y); color: var(--tr-n-900); }
.tr-drawer { border-radius: 0; background: var(--tr-n-900); color: #ffffff; border-right: 6px solid var(--tr-y); }
.tr-drawer .hdr-dmenu__link { font-family: var(--font-display); font-size: 0.9rem; text-transform: uppercase; }

/* Variant: all dark. */
html[data-trassa-header="dark"] .site-header { background: var(--tr-n-900); border-bottom-color: var(--tr-y); }
html[data-trassa-header="dark"] .tr-hdr__row--main { background: var(--tr-n-900); }
html[data-trassa-header="dark"] .tr-hdr__row--top { background: var(--tr-n-950); }
html[data-trassa-header="dark"] .tr-logo,
html[data-trassa-header="dark"] .tr-logo__mark,
html[data-trassa-header="dark"] .tr-hdr .hdr-nav__link,
html[data-trassa-header="dark"] .tr-hdr .hdr-phone__number { color: #ffffff; }
html[data-trassa-header="dark"] .tr-logo .hdr-logo__tagline,
html[data-trassa-header="dark"] .tr-hdr .hdr-phone__caption { color: #a9b6d0; }
html[data-trassa-header="dark"] .tr-hdr .hdr-nav__item:hover > .hdr-nav__link,
html[data-trassa-header="dark"] .tr-hdr .hdr-nav__link:hover,
html[data-trassa-header="dark"] .tr-hdr .hdr-nav__link[aria-current] { background: var(--tr-n-800); color: var(--tr-y); }
html[data-trassa-header="dark"] .tr-logo__mark { color: var(--tr-n-900); }

/* Variant: all light — the strip turns pale too. */
html[data-trassa-header="light"] .tr-hdr__row--top { background: var(--tr-sheet); color: var(--c-text-muted); }
html[data-trassa-header="light"] .tr-hdr__row--top :is(a, .hdr-text, .hdr-links, .hdr-icon-btn) { color: var(--c-text-muted); }
html[data-trassa-header="light"] .tr-hdr__row--top .cms-icon { color: var(--tr-n-700); }
html[data-trassa-header="light"] .site-header { border-bottom-width: 1px; border-bottom-color: var(--tr-line); }

/* -------------------------------------------------------------------------
   5. Footer: the dispatcher's desk, a road, the columns
   ------------------------------------------------------------------------- */

.tr-ftr { background: var(--tr-n-900); color: #cbd6ec; }
.tr-ftr__desk { background: var(--tr-y); color: var(--tr-n-900); }
.tr-ftr__desk-in { display: grid; gap: var(--s-6); max-width: var(--w-wide); margin-inline: auto; padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--s-5); }
.tr-ftr__phone { display: block; color: var(--tr-n-900); font-family: var(--font-display); font-size: clamp(1.7rem, 1rem + 3.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; text-decoration: none; }
.tr-ftr__phone:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 0.1em; }
.tr-ftr__hours { margin: var(--s-3) 0 0; font-size: 0.95rem; font-weight: 500; }
.tr-ftr__kicker { margin: 0 0 var(--s-3); font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tr-ftr__title { margin: 0; color: var(--tr-n-900); font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); }
.tr-ftr__lead { max-width: 34rem; margin: var(--s-3) 0 var(--s-5); color: #3d3a1f; }
.tr-ftr__btn { background: var(--tr-n-900); border-color: var(--tr-n-900); color: var(--tr-y); }
.tr-ftr__btn:hover { background: var(--tr-n-700); border-color: var(--tr-n-700); color: var(--tr-y); box-shadow: 4px 4px 0 0 rgb(11 27 58 / 0.35); }
.tr-ftr__road { height: 14px; background: var(--tr-n-950) var(--tr-road) center / auto 4px no-repeat; }

@media (min-width: 62rem) {
    .tr-ftr__desk-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s-9, 4rem); padding-inline: var(--s-6); }
}

.tr-ftr .site-footer__inner { max-width: var(--w-wide); padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--s-6); }
.tr-ftr .ftr-col__title { margin-bottom: var(--s-4); color: var(--tr-y); font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tr-ftr a { color: #e4eaf5; }
.tr-ftr a:hover { color: var(--tr-y); }
.tr-ftr .ftr-contacts__phone a { color: #ffffff; font-family: var(--font-display); font-weight: 700; }
.tr-ftr .cms-icon { color: var(--tr-y); }
.tr-ftr .ftr-bottom { border-top: 1px dashed #2b4272; color: #8c9bbd; font-size: 0.85rem; }

/* -------------------------------------------------------------------------
   6. First screen (trassa_hero)
   ------------------------------------------------------------------------- */

.tr-hero { position: relative; isolation: isolate; overflow: hidden; }
.tr-hero__photo { position: absolute; inset: 0; z-index: -1; margin: 0; }
.tr-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 80%; opacity: 0.95; }
.tr-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tr-n-900) 0%, rgb(11 27 58 / 0.72) 38%, rgb(11 27 58 / 0.1) 75%, rgb(11 27 58 / 0) 100%), linear-gradient(0deg, rgb(11 27 58 / 0.55) 0%, transparent 35%); }

.tr-hero__grid { display: grid; gap: var(--s-7); padding-block: clamp(1rem, 1rem + 2vw, 3rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.tr-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; margin: 0 0 var(--s-5); color: var(--tr-y); font-family: var(--font-display); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tr-hero__dash { width: 2.6rem; height: 4px; background: var(--tr-road); background-size: 20px 4px; }
.tr-hero__title { max-width: 16ch; margin: 0; color: #ffffff; font-size: var(--t-3xl); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.tr-hero__lead { max-width: 36rem; margin: var(--s-5) 0 0; color: #c6d2ea; font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem); }
.tr-hero__actions { margin-top: var(--s-6); }

.tr-hero__board { align-self: end; padding: var(--s-5); background: rgb(6 15 36 / 0.82); border: 2px solid var(--tr-y); box-shadow: 10px 10px 0 0 rgb(255 210 31 / 0.22); backdrop-filter: blur(6px); }
.tr-hero__board-title { margin: 0 0 var(--s-3); color: var(--tr-y); font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tr-hero__board-list { margin: 0; padding: 0; list-style: none; }
.tr-hero__board-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem var(--s-4); padding: 0.85rem 0; border-top: 1px dashed #3a568d; }
.tr-hero__board-link { position: absolute; inset: 0; z-index: 1; }
.tr-hero__board-row:hover { background: rgb(255 255 255 / 0.05); }
.tr-hero__board-path { display: flex; align-items: center; gap: 0.5rem; color: #ffffff; font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; }
.tr-hero__board-path i { flex: 0 1 1.4rem; min-width: 0.7rem; height: 2px; background: var(--tr-y); position: relative; }
.tr-hero__board-path i::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left: 6px solid var(--tr-y); border-right: 0; }
.tr-hero__board-days { grid-column: 1; color: #9fb0cf; font-size: 0.84rem; }
.tr-hero__board-price { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--tr-y); font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
.tr-hero__board-note { margin: var(--s-3) 0 0; color: #8c9bbd; font-size: 0.8rem; }

.tr-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--tr-y); }
.tr-hero__fact { padding: var(--s-5) var(--s-4) var(--s-6) 0; }
.tr-hero__fact + .tr-hero__fact { padding-left: var(--s-5); border-left: 1px dashed #3a568d; }
.tr-hero__fact-value { display: block; color: var(--tr-y); font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.tr-hero__fact-label { display: block; margin-top: 0.25rem; color: #a9b6d0; font-size: 0.9rem; }

@media (min-width: 62rem) {
    .tr-hero--board .tr-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr); align-items: end; column-gap: var(--s-8); }
}

@media (max-width: 40rem) {
    .tr-hero__photo { inset: 0; }
    .tr-hero__facts { grid-template-columns: 1fr 1fr; }
    .tr-hero__fact:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px dashed #3a568d; }
    .tr-hero__fact:nth-child(2) { padding-left: var(--s-4); }
    .tr-hero__board { box-shadow: 6px 6px 0 0 rgb(255 210 31 / 0.22); }
}

/* -------------------------------------------------------------------------
   7. Routes (trassa_routes)
   ------------------------------------------------------------------------- */

.tr-routes__list { margin: 0; padding: 0; list-style: none; background: #ffffff; border: 2px solid var(--tr-n-900); }
.tr-routes__head,
.tr-routes__row { display: grid; grid-template-columns: 3.2rem minmax(0, 1.9fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 0.9fr) 3.4rem; align-items: center; column-gap: var(--s-4); }
.tr-routes__head { grid-template-columns: 3.2rem minmax(0, 1.9fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 0.9fr) 3.4rem; padding: 0.7rem var(--s-4); background: var(--tr-n-900); color: #cbd6ec; font-family: var(--font-display); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tr-routes__c-path { grid-column: 1 / 3; }
.tr-routes__c-price { text-align: end; }
.tr-routes__row { position: relative; padding: var(--s-4); border-top: 1px solid var(--tr-line); transition: background-color 0.12s ease; }
.tr-routes__row:first-of-type { border-top: 0; }
.tr-routes__row:hover { background: var(--c-accent-soft); }
.tr-routes__n { color: var(--c-text-faint); font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; }
.tr-routes__path { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; min-width: 0; }
.tr-routes__city { color: var(--tr-n-900); font-family: var(--font-display); font-size: clamp(0.92rem, 0.8rem + 0.5vw, 1.15rem); font-weight: 700; letter-spacing: -0.02em; }
.tr-routes__line { flex: 1 1 2.5rem; max-width: 7rem; min-width: 1.5rem; height: 4px; background: var(--tr-n-900); background: repeating-linear-gradient(90deg, var(--tr-n-900) 0 8px, transparent 8px 14px); position: relative; }
.tr-routes__line::after { content: ""; position: absolute; right: -2px; top: -4px; border: 6px solid transparent; border-left: 9px solid var(--tr-n-900); border-right: 0; }
.tr-routes__kind { flex-basis: 100%; color: var(--c-text-muted); font-size: 0.84rem; font-style: normal; }
.tr-routes__meta { color: var(--c-text); font-size: 0.95rem; }
.tr-routes__price { justify-self: end; padding: 0.3rem 0.65rem; background: var(--tr-y); color: var(--tr-n-900); font-family: var(--font-display); font-size: clamp(0.82rem, 0.74rem + 0.3vw, 1rem); font-weight: 700; white-space: nowrap; }
.tr-routes__go { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; justify-self: end; border: 2px solid var(--tr-n-900); color: var(--tr-n-900); text-decoration: none; }
.tr-routes__go::after { content: ""; position: absolute; inset: 0; }
.tr-routes__row:hover .tr-routes__go { background: var(--tr-n-900); color: var(--tr-y); }
.tr-routes__note { margin: var(--s-4) 0 0; color: var(--c-text-muted); font-size: 0.9rem; }
.tr-routes__actions { margin-top: var(--s-5); }

@media (max-width: 52rem) {
    .tr-routes__head { display: none; }
    .tr-routes__row { grid-template-columns: 2.2rem minmax(0, 1fr) auto; row-gap: 0.45rem; }
    .tr-routes__path { grid-column: 2 / 4; }
    .tr-routes__meta { grid-column: 2; font-size: 0.88rem; }
    .tr-routes__meta + .tr-routes__meta { grid-column: 2; margin-top: -0.35rem; }
    .tr-routes__price { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 0.25rem; }
    .tr-routes__go { grid-column: 3; grid-row: 3 / span 2; align-self: end; }
}

/* -------------------------------------------------------------------------
   8. Tracking card (trassa_track)
   ------------------------------------------------------------------------- */

.tr-track__card { max-width: 56rem; background: #ffffff; color: var(--tr-n-900); border-top: 8px solid var(--tr-y); box-shadow: 12px 12px 0 0 rgb(255 210 31 / 0.25); }
.tr-track__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6) var(--s-4); }
.tr-track__label { margin: 0; color: #55627d; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tr-track__number { margin: 0.1rem 0 0; color: var(--tr-n-900); font-family: var(--font-display); font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; }
.tr-track__status { margin: 0; padding: 0.4rem 0.9rem; background: var(--tr-n-900); color: var(--tr-y); font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tr-track__path { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-6); font-family: var(--font-display); font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1.1rem); }
.tr-track__bar { position: relative; height: 10px; background: repeating-linear-gradient(90deg, #c5cfe0 0 10px, transparent 10px 16px); }
.tr-track__fill { position: absolute; inset: 0 auto 0 0; background: var(--tr-n-900); }
.tr-track__truck { position: absolute; top: 50%; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; transform: translate(-50%, -50%); background: var(--tr-y); border: 2px solid var(--tr-n-900); color: var(--tr-n-900); }
.tr-track__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: var(--s-4) var(--s-6); background: var(--tr-sheet); }
.tr-track__facts dt { color: #55627d; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tr-track__facts dd { margin: 0.15rem 0 0; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; }
.tr-track__points { position: relative; margin: 0; padding: var(--s-5) var(--s-6) var(--s-6); list-style: none; }
.tr-track__point { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; column-gap: var(--s-3); padding-bottom: var(--s-5); }
.tr-track__point:last-child { padding-bottom: 0; }
.tr-track__point::before { content: ""; position: absolute; left: 0.7rem; top: 1.3rem; bottom: -0.1rem; width: 0; border-left: 3px dashed #c5cfe0; }
.tr-track__point:last-child::before { display: none; }
.tr-track__point.is-done::before { border-left: 3px solid var(--tr-n-900); }
.tr-track__dot { grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; background: #ffffff; border: 3px solid #c5cfe0; }
.tr-track__point.is-done .tr-track__dot { background: var(--tr-n-900); border-color: var(--tr-n-900); }
.tr-track__point.is-current .tr-track__dot { background: var(--tr-y); border-color: var(--tr-n-900); box-shadow: 0 0 0 5px rgb(255 210 31 / 0.4); }
.tr-track__place { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; }
.tr-track__point.is-planned .tr-track__place { color: #7886a4; }
.tr-track__time { color: #55627d; font-size: 0.84rem; white-space: nowrap; }
.tr-track__note { grid-column: 2 / 4; color: #55627d; font-size: 0.9rem; }
.tr-track__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); max-width: 56rem; margin-top: var(--s-6); }
.tr-track__hint { flex: 1 1 20rem; margin: 0; color: var(--c-text-muted); font-size: 0.92rem; }

@media (max-width: 40rem) {
    .tr-track__top, .tr-track__path, .tr-track__facts, .tr-track__points { padding-inline: var(--s-4); }
    .tr-track__facts { grid-template-columns: 1fr 1fr; }
    .tr-track__path { grid-template-columns: 1fr; gap: var(--s-3); }
    .tr-track__path b:last-child { text-align: end; }
    .tr-track__point { grid-template-columns: 1.6rem minmax(0, 1fr); }
    .tr-track__time { grid-column: 2; }
    .tr-track__note { grid-column: 2; }
}

/* -------------------------------------------------------------------------
   9. Default blocks re-dressed
   ------------------------------------------------------------------------- */

.cms-block--stats .cms-stat__value,
.cms-stat__num { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; }
.cms-stat { border-radius: var(--tr-r); }
.cms-stats--divided .cms-stat + .cms-stat { border-inline-start: 1px dashed var(--c-border); }

.cms-card { border: var(--card-border); background: var(--card-bg); }
.cms-card:hover { box-shadow: 8px 8px 0 0 var(--tr-y); transform: translate(-2px, -2px); transition: transform 0.12s ease, box-shadow 0.12s ease; }
html[data-trassa-cards="flat"] .cms-card { border-color: transparent; }
html[data-trassa-cards="lift"] .cms-card { border-color: var(--tr-line); box-shadow: var(--shadow-lift); }

.cms-faq__item, .cms-faq details { border-radius: var(--tr-r); }
.cms-faq__toggle { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; }

.cms-step__marker { border-radius: var(--tr-r); background: var(--tr-y); color: var(--tr-n-900); font-family: var(--font-display); font-weight: 800; }
.cms-step__title { font-family: var(--font-display); }

.cms-ptable, .cms-calc { border-radius: var(--tr-r); }
.cms-ptable__plan--featured, .cms-ptable__plan.is-featured { box-shadow: 8px 8px 0 0 var(--tr-y); }
.cms-calc__total, .cms-calc__result-value { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }

.cms-review, .cms-contact { border-radius: var(--tr-r); }
.cms-prose a { text-decoration-color: var(--tr-y); }
.cms-media__img { border-radius: var(--tr-r); }

/* -------------------------------------------------------------------------
   10. Design settings (theme.json → design.controls)
   ------------------------------------------------------------------------- */

html[data-trassa-buttons="outline"] .cms-btn--primary { background: transparent; border-color: var(--tr-n-900); color: var(--tr-n-900); }
html[data-trassa-buttons="outline"] .cms-btn--primary:hover { background: var(--tr-y); border-color: var(--tr-n-900); }
html[data-trassa-buttons="outline"] :is(.cms-tone-dark, .cms-on-dark) .cms-btn--primary { border-color: var(--tr-y); color: var(--tr-y); }
html[data-trassa-buttons="outline"] :is(.cms-tone-dark, .cms-on-dark) .cms-btn--primary:hover { background: var(--tr-y); color: var(--tr-n-900); }

html[data-trassa-stripes="off"] .tr-hdr__row--top::after { background: var(--tr-y); }
html[data-trassa-stripes="off"] .cms-section.cms-tone-dark::before,
html[data-trassa-stripes="off"] .cms-section.cms-tone-primary::before { background: var(--tr-y); }
html[data-trassa-stripes="off"] .tr-ftr__road { background-image: none; }

html[data-trassa-grid="off"] .cms-tone-dark:not(#tr),
html[data-trassa-grid="off"] .cms-tone-soft:not(#tr) { --section-bg-image: none; background-image: none; }

html[data-trassa-density="compact"] { --sp-md: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); --sp-lg: clamp(3rem, 2rem + 3.6vw, 5rem); }

@media (max-width: 40rem) {
    .tr-hdr__row--main .hdr-row__inner { min-height: 66px; }
    .tr-ftr__phone { font-size: 1.55rem; }
}