/* =========================================================================
   Уклад — a construction & renovation theme (child of Default).

   Everything of the Default theme is kept — templates/base.twig links the
   Default stylesheets and the modules' ones first, then this file last, so
   it only has to override.

   ART DIRECTION
   Palette: graphite and safety yellow. The page is warm concrete paper
   (#F3F2EE), the dark bands are graphite (#1C1F23) with a drawing grid on
   them, and the one accent is signal yellow (#FFC400) — on buttons, figures,
   markers and the hazard stripe. Yellow is never text on a light ground: on
   paper it is a fill, with graphite text on top.

   Type: Oswald for everything that is a heading, a number or a button —
   upper case, heavy, condensed, like stencilled lettering on a site board.
   Roboto Condensed for running text and the interface.

   Form: no radii anywhere. Structure comes from 1–2px rules, a drawing grid
   and hard edges; the only "shadow" is a flat yellow offset on hover.
   Sections are numbered (01, 02…) like sheets of a drawing set.

   The site's own design settings (/design.css, loaded after this file) are
   deliberately outranked — :root:root and :not(#uk) — so the theme keeps
   its character on any site it is switched on for.
   ========================================================================= */

@font-face {
    font-family: 'Oswald Uk';
    font-style: normal;
    font-display: swap;
    font-weight: 200 700;
    src: url('../fonts/oswald-cyrillic-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Oswald Uk';
    font-style: normal;
    font-display: swap;
    font-weight: 200 700;
    src: url('../fonts/oswald-latin-wght-normal.woff2') format('woff2-variations');
    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: 'Roboto Condensed Uk';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/roboto-condensed-cyrillic-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Roboto Condensed Uk';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/roboto-condensed-latin-wght-normal.woff2') format('woff2-variations');
    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;
}

/* Alternatives offered in the design settings (fonts shipped by the Default
   theme); downloaded only when chosen. */
@font-face {
    font-family: 'Uklad 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: 'Uklad 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: 'Uklad 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: 'Uklad 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; «Дизайн →
   Настройки шаблона»). Core prints the chosen values as :root{--uklad-…}
   after this file, so these are only the defaults; the tokens below derive
   from them. Variants (data-uklad-…) are at the end of this file. */
:root {
    --uklad-accent: #ffc400;
    --uklad-font-display: 'Oswald Uk', 'Oswald', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
    --uklad-font-body: 'Roboto Condensed Uk', 'Roboto Condensed', 'Arial Narrow', 'Segoe UI', Arial, sans-serif;
    --uklad-radius: 0px;
}

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

:root:root {
    --uk-y: var(--uklad-accent);
    --uk-y-hi: color-mix(in srgb, var(--uk-y), #ffffff 23%);
    --uk-y-deep: color-mix(in srgb, var(--uk-y), #000000 12%);
    --uk-y-ink: color-mix(in srgb, var(--uk-y), #000000 52%);
    --uk-g-950: #131518;
    --uk-g-900: #1c1f23;
    --uk-g-800: #25292e;
    --uk-g-700: #333840;
    --uk-g-600: #474d56;
    --uk-g-400: #8b9098;
    --uk-g-300: #b6b9be;
    --uk-concrete: #e8e6e0;
    --uk-paper: #f3f2ee;
    --uk-line: #d3d0c8;

    --uk-grid-light: linear-gradient(rgb(28 31 35 / 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgb(28 31 35 / 0.055) 1px, transparent 1px),
        linear-gradient(rgb(28 31 35 / 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgb(28 31 35 / 0.03) 1px, transparent 1px);
    --uk-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),
        linear-gradient(rgb(255 255 255 / 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.022) 1px, transparent 1px);
    --uk-grid-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    --uk-hazard: repeating-linear-gradient(-45deg, var(--uk-y) 0 14px, var(--uk-g-900) 14px 28px);

    --c-bg: var(--uk-paper);
    --c-surface: #ffffff;
    --c-surface-sunk: var(--uk-concrete);
    --c-text: #23272c;
    --c-text-strong: #111316;
    --c-text-muted: #595e66;
    --c-text-faint: #868a91;
    --c-border: var(--uk-line);
    --c-border-strong: #23272c;
    --c-accent: var(--uk-y);
    --c-accent-hover: var(--uk-y-hi);
    --c-accent-contrast: #131518;
    --c-accent-soft: color-mix(in srgb, var(--uk-y) 25%, #ffffff);
    --c-link: #111316;
    --c-link-hover: #000000;
    --c-mark: var(--uk-y);
    --c-mark-text: var(--uk-y-ink);
    --c-mark-soft: color-mix(in srgb, var(--uk-y) 25%, #ffffff);
    --c-slab: var(--uk-g-900);
    --c-slab-text: #f3f2ee;
    --c-slab-muted: #a9adb3;
    --c-danger: #c62f1f;
    --c-success: #2e7d32;

    --font-display: var(--uklad-font-display);
    --font-ui: var(--uklad-font-body);
    --font-prose: var(--font-ui);
    --fw-heading: 600;
    --tr-tight: 0;
    --tr-snug: 0.005em;
    --lh-tight: 1.02;
    --lh-snug: 1.1;
    --t-base: clamp(1.02rem, 0.98rem + 0.2vw, 1.1rem);
    --t-xl: clamp(1.9rem, 1.5rem + 1.6vw, 2.9rem);
    --t-2xl: clamp(2.4rem, 1.7rem + 3vw, 4.2rem);
    --t-3xl: clamp(3rem, 2rem + 4.6vw, 5.8rem);

    --r-xs: 0;
    --r-sm: 0;
    --r-md: 0;
    --r-lg: 0;
    --r-pill: 0;
    --r-btn: 0;
    --card-radius: 0;
    --card-bg: #ffffff;
    --card-border: 1px solid var(--uk-line);
    --card-shadow: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 8px 8px 0 0 var(--uk-y);
    --shadow-lift: 0 18px 40px -22px rgb(19 21 24 / 0.45);

    --w-container: 84rem;
    --w-wide: 84rem;
    --sp-md: clamp(3.5rem, 2.4rem + 4.4vw, 6rem);
    --sp-lg: clamp(4.5rem, 3rem + 6vw, 8rem);

    color-scheme: light;
}

/* Tones: graphite, concrete, yellow. Re-declared with an id-level boost so
   the site's generated tones (design.css) do not repaint the theme. */
:is(.cms-tone-dark, .cms-on-dark):not(#uk) {
    --c-bg: var(--uk-g-900);
    --c-surface: var(--uk-g-800);
    --c-surface-sunk: var(--uk-g-950);
    --c-text: #e7e6e1;
    --c-text-strong: #ffffff;
    --c-text-muted: #a8acb2;
    --c-text-faint: #7d828a;
    --c-border: #3a3f47;
    --c-border-strong: #e7e6e1;
    --c-accent: var(--uk-y);
    --c-accent-hover: var(--uk-y-hi);
    --c-accent-contrast: #131518;
    --c-accent-soft: color-mix(in srgb, var(--uk-y) 13%, var(--uk-g-900));
    --c-link: var(--uk-y);
    --c-link-hover: var(--uk-y-hi);
    --c-mark: var(--uk-y);
    --c-mark-text: var(--uk-y);
    --card-bg: var(--uk-g-800);
    --card-border: 1px solid #3a3f47;
    color-scheme: dark;
}

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

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

.cms-tone-primary:not(#uk) {
    --section-bg: var(--uk-y);
    --c-bg: var(--uk-y);
    --c-surface: var(--uk-y-hi);
    --c-surface-sunk: color-mix(in srgb, var(--uk-y), #000000 6%);
    --c-text: #1c1f23;
    --c-text-strong: #111316;
    --c-text-muted: #4d4323;
    --c-text-faint: #6f6031;
    --c-border: rgb(19 21 24 / 0.22);
    --c-border-strong: #111316;
    --c-accent: #111316;
    --c-accent-hover: #2b2f35;
    --c-accent-contrast: var(--uk-y);
    --c-accent-soft: color-mix(in srgb, var(--uk-y), #000000 6%);
    --c-link: #111316;
    --c-link-hover: #000;
    --c-mark: #111316;
    --c-mark-text: #111316;
    color-scheme: light;
}

.cms-tone-accent:not(#uk) {
    --section-bg: var(--uk-g-700);
    --c-bg: var(--uk-g-700);
    --c-surface: var(--uk-g-600);
    --c-surface-sunk: var(--uk-g-800);
    --c-text: #eeede8;
    --c-text-strong: #ffffff;
    --c-text-muted: #b9bcc1;
    --c-border: #555b64;
    --c-border-strong: #eeede8;
    --c-accent: var(--uk-y);
    --c-accent-hover: var(--uk-y-hi);
    --c-accent-contrast: #131518;
    --c-link: var(--uk-y);
    --c-mark: var(--uk-y);
    --c-mark-text: var(--uk-y);
    color-scheme: dark;
}

.cms-on-light:not(#uk) {
    --c-bg: var(--uk-paper);
    --c-text: #23272c;
    --c-text-strong: #111316;
    --c-text-muted: #595e66;
    --c-border: var(--uk-line);
    --c-border-strong: #23272c;
    --c-link: #111316;
    color-scheme: light;
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.004em;
    line-height: var(--lh-snug);
}

h1 { font-weight: 700; line-height: 1.06; }

a {
    text-decoration-color: var(--uk-y);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

a:hover { text-decoration-color: currentColor; }

:focus-visible {
    outline: 3px solid var(--uk-y);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--uk-g-900);
    border-radius: 0;
}

::selection { background: var(--uk-y); color: #111316; }

.cms-prose {
    font-family: var(--font-ui);
    font-size: var(--t-base);
    line-height: 1.62;
}

.cms-prose h2,
.cms-prose h3 { text-transform: uppercase; }

.cms-prose ul > li::marker { color: var(--uk-y-deep); }

.cms-prose :where(ul) {
    list-style: square;
}

/* -------------------------------------------------------------------------
   3. Buttons — stencil-lettered, square, yellow or outlined
   ------------------------------------------------------------------------- */

.cms-btn {
    min-height: 52px;
    padding: 0.7rem 1.6rem;
    border-width: 2px;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cms-btn--primary {
    background-color: var(--uk-y);
    border-color: var(--uk-y);
    color: #131518;
}

.cms-btn--primary:hover {
    background-color: var(--uk-g-900);
    border-color: var(--uk-g-900);
    color: var(--uk-y);
}

.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 {
    background-color: transparent;
    border-color: var(--uk-y);
    color: var(--uk-y);
}

:is(.cms-tone-dark, .cms-on-dark, .cms-tone-accent) .cms-btn--ghost {
    border-color: rgb(255 255 255 / 0.45);
    color: #fff;
}

:is(.cms-tone-dark, .cms-on-dark, .cms-tone-accent) .cms-btn--ghost:hover {
    background: transparent;
    border-color: var(--uk-y);
    color: var(--uk-y);
}

.cms-tone-primary .cms-btn--primary {
    background-color: var(--uk-g-900);
    border-color: var(--uk-g-900);
    color: var(--uk-y);
}

.cms-tone-primary .cms-btn--primary:hover {
    background-color: transparent;
    color: var(--uk-g-900);
}

.uk-btn-dark {
    background-color: var(--uk-g-900);
    border-color: var(--uk-g-900);
    color: var(--uk-y);
}

.uk-btn-dark:hover {
    background-color: transparent;
    color: var(--uk-g-900);
}

/* -------------------------------------------------------------------------
   4. Cards, badges, forms
   ------------------------------------------------------------------------- */

.cms-card {
    border-radius: 0;
    box-shadow: none;
}

.cms-badge-icon {
    border-radius: 0 !important;
    background: var(--uk-y) !important;
    color: #131518 !important;
}

.cms-badge-icon--plain {
    background: transparent !important;
    color: var(--uk-y-deep) !important;
}

:is(.cms-tone-dark, .cms-on-dark) .cms-badge-icon--plain { color: var(--uk-y) !important; }

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

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

.cms-popover__panel {
    border-radius: 0;
    border-top: 6px solid var(--uk-y);
}

.cms-popover__title {
    font-family: var(--font-display);
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   5. Sections: numbered sheets with a left-set heading
   ------------------------------------------------------------------------- */

.landing { counter-reset: uk-sheet; }

.cms-section__head {
    max-width: none;
    margin-block-end: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

.cms-section__head--center,
.cms-section__head--left {
    margin-inline: 0;
    text-align: start;
}

.cms-section__title {
    max-width: 22ch;
    font-size: var(--t-xl);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.06;
}

.cms-section__subtitle {
    max-width: 44rem;
    margin-block-start: var(--s-4);
    font-size: var(--t-md);
    line-height: 1.5;
}

/* The sheet number and its rule, above every headed section of a page. */
.landing .cms-section__head {
    counter-increment: uk-sheet;
}

.landing .cms-section__head::before {
    content: counter(uk-sheet, decimal-leading-zero);
    display: block;
    margin-block-end: var(--s-5);
    padding: 0.28rem 0 0.28rem 0.6rem;
    background:
        linear-gradient(var(--uk-y), var(--uk-y)) no-repeat left center / 2.7rem 100%,
        linear-gradient(var(--c-border), var(--c-border)) no-repeat left center / 100% 1px;
    color: #131518;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
}

@media (min-width: 62rem) {
    .cms-section__head:has(.cms-section__subtitle) {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) 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: 2px solid var(--uk-y);
    }
}

.cms-section.cms-tone-dark .cms-section__subtitle { color: var(--c-text-muted); }

/* A hazard stripe on the top edge of yellow and graphite bands. */
.cms-section.cms-tone-primary::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    background: var(--uk-hazard);
}

/* -------------------------------------------------------------------------
   6. Header
   ------------------------------------------------------------------------- */

.site-header {
    background: #ffffff;
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--uk-line);
}

.site-header::before {
    content: "";
    display: block;
    height: 5px;
    background: var(--uk-hazard);
}

.site-header--sticky.is-scrolled { box-shadow: 0 1px 0 var(--uk-line), 0 16px 30px -24px rgb(19 21 24 / 0.6); }

.hdr-row--top {
    background: var(--uk-g-950);
    border-bottom: 0;
    color: #b3b7bd;
    font-size: 0.84rem;
    letter-spacing: 0.01em;
}

.hdr-row--top .hdr-row__inner { min-height: 2.4rem; }

.hdr-row--top a { color: #e4e3de; text-decoration: none; }
.hdr-row--top a:hover { color: var(--uk-y); }
.hdr-row--top .cms-icon { color: var(--uk-y); }

.hdr-row--main .hdr-row__inner { min-height: 5.6rem; }

.hdr-row--bottom {
    background: var(--uk-g-900);
    border-top: 0;
    color: #fff;
}

.hdr-row--bottom .hdr-row__inner { min-height: 3.4rem; }
.hdr-row--main + .hdr-row--bottom .hdr-zone--left { margin-inline-start: -1.15rem; }

/* Wordmark: a yellow stamp with the initial, the name stencilled beside it. */
.uk-logo { gap: 12px; }

.uk-logo__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.1rem;
    height: 3.1rem;
    background: var(--uk-y);
    color: #131518;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 -6px 0 rgb(19 21 24 / 0.14);
}

.hdr-logo__name {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.hdr-logo__tagline {
    margin-block-start: 5px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

a.hdr-logo:hover .hdr-logo__name { color: var(--c-text-strong); }

/* Short trust lines between the logo and the phone. */
.hdr-row--main .hdr-text {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 13rem;
    font-size: 0.86rem;
    line-height: 1.2;
    color: var(--c-text-muted);
}

.hdr-row--main .hdr-text .cms-icon {
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0.45rem;
    border: 2px solid var(--uk-g-900);
    color: var(--uk-g-900);
}

.hdr-row--main .hdr-zone--center { gap: var(--s-6); }

.hdr-phone__number {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hdr-phone__number:hover { color: var(--c-text-strong); text-decoration: underline; text-decoration-color: var(--uk-y); }

.hdr-phone__caption {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.hdr-phone__callback {
    color: var(--c-text-strong);
    text-decoration-color: var(--uk-y);
}

.hdr-button.cms-btn { min-height: 54px; }

/* Menu on the graphite bar: stencil caps, divided by hairlines. */
.hdr-row--bottom .hdr-nav__list { gap: 0; }

.hdr-row--bottom .hdr-nav__item + .hdr-nav__item::before {
    content: "";
    width: 1px;
    height: 1.1rem;
    background: rgb(255 255 255 / 0.16);
}

.hdr-row--bottom .hdr-nav__link {
    min-height: 3.4rem;
    padding: 0 1.15rem;
    color: #e7e6e1;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hdr-row--bottom .hdr-nav__link > span {
    background-image: linear-gradient(var(--uk-y), var(--uk-y));
    background-size: 0 3px;
    padding-block: 5px;
}

.hdr-row--bottom .hdr-nav__link:hover > span,
.hdr-row--bottom .hdr-nav__link.is-active > span { background-size: 100% 3px; }

.hdr-row--bottom .hdr-nav__link:hover,
.hdr-row--bottom .hdr-nav__link.is-active { color: #ffffff; }

.hdr-row--bottom .hdr-nav__toggle { color: #b3b7bd; }

.hdr-row--bottom .hdr-links a,
.hdr-row--bottom .hdr-text {
    color: var(--uk-y);
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.hdr-row--bottom .hdr-links a:hover { color: #fff; }

.hdr-sub__list {
    border: 0;
    border-top: 4px solid var(--uk-y);
    box-shadow: 0 22px 40px -20px rgb(19 21 24 / 0.5);
}

.hdr-sub__link:hover { background: var(--uk-concrete); }

.hdr-burger {
    border-radius: 0 !important;
    background: var(--uk-y) !important;
    border-color: var(--uk-y) !important;
    color: #131518 !important;
}

.hdr-icon-btn { border-radius: 0 !important; }

.hdr-drawer { border-radius: 0; }
.hdr-drawer__head { border-bottom: 4px solid var(--uk-y); }

.hdr-dmenu__link {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 59.99rem) {
    .hdr-row--main .hdr-row__inner { min-height: 4.4rem; }
    .uk-logo__mark { width: 2.6rem; height: 2.6rem; font-size: 1.7rem; }
    .hdr-logo__name { font-size: 1.45rem; }
    .hdr-logo__tagline { display: none; }
}

/* -------------------------------------------------------------------------
   7. Footer: yellow band, graphite columns, the name as an outlined stamp
   ------------------------------------------------------------------------- */

.uk-prefooter {
    position: relative;
    background: var(--uk-y);
    color: #131518;
    overflow: hidden;
}

.uk-prefooter::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 10px;
    background: repeating-linear-gradient(-45deg, #131518 0 14px, transparent 14px 28px);
}

.uk-prefooter::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgb(19 21 24 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(19 21 24 / 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}

.uk-prefooter__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-6) var(--s-8);
    align-items: center;
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: clamp(3rem, 2rem + 3vw, 4.5rem) var(--gutter) clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.uk-prefooter__kicker {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.uk-prefooter__title {
    margin-block: 0.4rem 0.9rem;
    color: #131518;
    font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);
    font-weight: 700;
    line-height: 0.98;
}

.uk-prefooter__lead {
    max-width: 38rem;
    font-size: 1.12rem;
    line-height: 1.5;
    color: #2b2717;
}

.uk-prefooter__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-inline-start: var(--s-6);
    border-inline-start: 3px solid #131518;
}

.uk-prefooter__phone {
    color: #131518;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.uk-prefooter__phone:hover { text-decoration: underline; text-decoration-color: #131518; }

.uk-prefooter__hours { font-size: 0.95rem; margin-block-end: 0.9rem; }

.uk-prefooter .cms-btn { min-width: 17rem; }

.uk-footer:not(#uk) {
    --c-bg: var(--uk-g-950);
    --c-surface: var(--uk-g-900);
    --c-text: #cfd0cc;
    --c-text-strong: #ffffff;
    --c-text-muted: #979ba1;
    --c-border: #30343a;
    --c-link: #e7e6e1;
    --c-link-hover: var(--uk-y);
    position: relative;
    overflow: hidden;
    background: var(--uk-g-950);
    background-image: var(--uk-grid-dark);
    background-size: var(--uk-grid-size);
    color: #cfd0cc;
}

.uk-footer .site-footer__inner { position: relative; z-index: 1; }

.uk-footer .ftr-col__title {
    color: var(--uk-y);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.uk-footer .ftr-brand__name {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.uk-footer .ftr-contacts__phone a {
    font-family: var(--font-display);
    font-size: 1.45rem;
    letter-spacing: 0.02em;
    color: #fff;
}

.uk-footer .ftr-menu__link { color: #cfd0cc; text-decoration: none; }
.uk-footer .ftr-menu__link:hover { color: var(--uk-y); }
.uk-footer .cms-icon { color: var(--uk-y); }

.uk-footer .ftr-bottom {
    border-top-color: #30343a;
    color: #7f848b;
}

.uk-footer .ftr-bottom a { color: #a9adb3; }

.uk-footer__wordmark {
    position: relative;
    z-index: 0;
    margin: 0;
    padding: 0 var(--gutter);
    color: transparent;
    font-family: var(--font-display);
    font-size: clamp(5rem, 22vw, 21rem);
    font-weight: 700;
    line-height: 0.78;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--uk-y) 38%, transparent);
    user-select: none;
    translate: 0 0.12em;
}

@media (max-width: 47.99rem) {
    .uk-prefooter__inner { grid-template-columns: 1fr; }
    .uk-prefooter__side { padding-inline-start: 0; padding-block-start: var(--s-5); border-inline-start: 0; border-block-start: 3px solid #131518; }
    .uk-prefooter .cms-btn { width: 100%; min-width: 0; }
}

/* -------------------------------------------------------------------------
   8. First screen (uklad_hero)
   ------------------------------------------------------------------------- */

.cms-section:has(> .cms-section__inner > .uk-hero) {
    --section-bg-image: var(--uk-grid-dark);
    overflow: hidden;
}

.uk-hero {
    position: relative;
}

.uk-hero__photo {
    position: absolute;
    z-index: -1;
    inset: calc(var(--sp-lg) * -1) calc((100vw - min(100vw, var(--w-wide))) / -2 - var(--gutter) - 1px) 0 38%;
    margin: 0;
    pointer-events: none;
}

.uk-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(0.25) contrast(1.05);
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}

.uk-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(28 31 35 / 0) 40%, rgb(28 31 35 / 0.9)), linear-gradient(90deg, rgb(28 31 35 / 0.55), rgb(28 31 35 / 0.1));
}

.uk-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7);
    align-items: center;
}

.uk-hero--calc .uk-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.uk-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-block-end: var(--s-5);
    padding: 0.35rem 0.8rem 0.35rem 0;
    color: var(--uk-y);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.uk-hero__tick {
    width: 2.2rem;
    height: 0.8rem;
    background: var(--uk-hazard);
}

.uk-hero__title {
    max-width: 7.575em; /* 14ch of Oswald, in em so another headline font keeps the same measure */
    color: #ffffff;
    font-size: clamp(2.7rem, 1.6rem + 4.2vw, 5.4rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: 0.005em;
}

.uk-hero__lead {
    max-width: 36rem;
    margin-block-start: var(--s-5);
    color: #cfd0cc;
    font-size: clamp(1.08rem, 1rem + 0.35vw, 1.3rem);
    line-height: 1.5;
}

.uk-hero__actions { margin-block-start: var(--s-6); }
.uk-hero__actions .cms-btn { min-height: 58px; padding-inline: 2rem; font-size: 1.05rem; }

.uk-hero__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0;
    border-top: 1px solid rgb(255 255 255 / 0.14);
}

.uk-hero__fact {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.6rem 1.2rem 1.9rem 0;
}

.uk-hero__fact + .uk-hero__fact { padding-inline-start: 1.4rem; border-inline-start: 1px solid rgb(255 255 255 / 0.14); }

.uk-hero__fact::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 3rem;
    height: 3px;
    background: var(--uk-y);
}

.uk-hero__fact + .uk-hero__fact::before { left: 1.4rem; }

.uk-hero__fact-value {
    color: #ffffff;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.4rem + 2vw, 3.3rem);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.uk-hero__fact-label {
    color: #a8acb2;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

@media (max-width: 74.99rem) {
    .uk-hero--calc .uk-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .uk-hero__calc { max-width: 40rem; }
}

@media (max-width: 61.99rem) {
    .uk-hero__photo { inset: calc(var(--sp-lg) * -1) calc(var(--gutter) * -1) auto; height: 34rem; }
    .uk-hero__img { mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
    .uk-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uk-hero__fact:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
    .uk-hero__fact:nth-child(3)::before { left: 0; }
    .uk-hero__fact:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / 0.14); }
}

/* -------------------------------------------------------------------------
   9. Calculator (templates/uklad/calc.twig, assets/js/uklad-calc.js)
   ------------------------------------------------------------------------- */

.uk-calc:not(#uk) {
    --c-bg: #ffffff;
    --c-text: #23272c;
    --c-text-strong: #111316;
    --c-text-muted: #595e66;
    --c-border: var(--uk-line);
    color-scheme: light;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: 1.6rem 1.7rem 1.7rem;
    background: #ffffff;
    color: #23272c;
    border-top: 8px solid var(--uk-y);
    box-shadow: 14px 14px 0 0 rgb(0 0 0 / 0.28);
}

.uk-calc::after {
    content: "";
    position: absolute;
    top: -8px;
    right: 0;
    width: 5.5rem;
    height: 8px;
    background: repeating-linear-gradient(-45deg, #131518 0 8px, transparent 8px 16px);
}

.uk-calc__title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #111316;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
}

.uk-calc__title .cms-icon {
    flex: none;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0.4rem;
    background: #131518;
    color: var(--uk-y);
}

.uk-calc__group {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.uk-calc__legend {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-block-end: 0.6rem;
    padding: 0;
    color: #595e66;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.uk-calc__step {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    background: var(--uk-y);
    color: #131518;
    font-size: 0.8rem;
    letter-spacing: 0;
}

.uk-calc__types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.5rem;
}

.uk-calc__type { position: relative; cursor: pointer; }

.uk-calc__type input,
.uk-calc__opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.uk-calc__type-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem 0.75rem;
    border: 2px solid var(--uk-line);
    background: #ffffff;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.uk-calc__type:hover .uk-calc__type-box { border-color: #595e66; }

.uk-calc__type input:checked + .uk-calc__type-box {
    border-color: #131518;
    background: #131518;
    color: #ffffff;
}

.uk-calc__type input:focus-visible + .uk-calc__type-box { outline: 3px solid var(--uk-y); outline-offset: 2px; }

.uk-calc__type-name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.15;
    text-transform: uppercase;
}

.uk-calc__type-note {
    font-size: 0.8rem;
    line-height: 1.3;
    color: #6b7078;
}

.uk-calc__type-price {
    margin-block-start: auto;
    padding-block-start: 0.35rem;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
}

.uk-calc__type input:checked + .uk-calc__type-box .uk-calc__type-note { color: #a8acb2; }
.uk-calc__type input:checked + .uk-calc__type-box .uk-calc__type-price { color: var(--uk-y); }

.uk-calc__area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.uk-calc__range {
    flex: 1;
    min-width: 0;
    height: 2rem;
    margin: 0;
    background: transparent;
    accent-color: #131518;
    -webkit-appearance: none;
    appearance: none;
}

.uk-calc__range::-webkit-slider-runnable-track {
    height: 6px;
    background: repeating-linear-gradient(90deg, #131518 0 1px, transparent 1px 10%), #e8e6e0;
    background-size: 100% 6px;
}

.uk-calc__range::-moz-range-track {
    height: 6px;
    background: #e8e6e0;
}

.uk-calc__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: -0.55rem;
    border: 3px solid #131518;
    border-radius: 0;
    background: var(--uk-y);
    cursor: grab;
}

.uk-calc__range::-moz-range-thumb {
    width: 1.3rem;
    height: 1.3rem;
    border: 3px solid #131518;
    border-radius: 0;
    background: var(--uk-y);
}

.uk-calc__num {
    display: flex;
    align-items: center;
    flex: none;
    border: 2px solid #131518;
    background: #ffffff;
}

.uk-calc__num input {
    width: 4.6rem;
    min-height: 2.8rem;
    padding: 0 0.3rem 0 0.7rem;
    border: 0 !important;
    background: transparent;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    text-align: right;
    -moz-appearance: textfield;
}

.uk-calc__num input::-webkit-inner-spin-button { opacity: 0.6; }

.uk-calc__num span {
    padding: 0 0.7rem 0 0.2rem;
    color: #595e66;
    font-weight: 600;
}

.uk-calc__opts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.35rem 1rem;
}

.uk-calc__opt {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.95rem;
    cursor: pointer;
}

.uk-calc__opt-box {
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid #131518;
    background: #ffffff;
}

.uk-calc__opt input:checked + .uk-calc__opt-box {
    background: var(--uk-y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23131518' stroke-width='2.6'/%3E%3C/svg%3E") center / 85% no-repeat;
}

.uk-calc__opt input:focus-visible + .uk-calc__opt-box { outline: 3px solid var(--uk-y); outline-offset: 2px; }

.uk-calc__opt-price {
    color: #595e66;
    font-size: 0.86rem;
    white-space: nowrap;
}

.uk-calc__result {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 1rem 1.1rem;
    background: #131518;
    background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
    background-size: 16px 16px;
    color: #ffffff;
}

.uk-calc__sum { display: flex; flex-direction: column; }

.uk-calc__sum-label {
    color: #a8acb2;
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.uk-calc__sum-value {
    color: var(--uk-y);
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem);
    font-weight: 600;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.uk-calc:not(.is-live) .uk-calc__sum-value::before { content: "≈ "; }

.uk-calc__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    color: #cfd0cc;
    font-size: 0.9rem;
    text-align: end;
}

.uk-calc__foot { display: flex; flex-direction: column; gap: 0.6rem; }
.uk-calc__btn { width: 100%; min-height: 56px; }

.uk-calc__note {
    color: #6b7078;
    font-size: 0.82rem;
    line-height: 1.35;
}

.uk-calc--compact .uk-calc__types { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 30rem) {
    .uk-calc:not(#uk) { padding: 1.2rem 1.1rem 1.3rem; box-shadow: 8px 8px 0 0 rgb(0 0 0 / 0.28); }
    .uk-calc .uk-calc__types { grid-template-columns: minmax(0, 1fr); }
    .uk-calc__type-box { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; }
    .uk-calc__type-price { margin-inline-start: auto; padding: 0; }
    .uk-calc__type-note { flex-basis: 100%; order: 3; }
}

/* The calculator as its own section. */
.uk-calcblock__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
}

.uk-points {
    display: grid;
    gap: 0;
    margin-block-start: var(--s-6);
    border-top: 2px solid var(--c-text-strong);
}

.uk-points__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--c-border);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--c-text-strong);
}

.uk-points__item .cms-icon {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.5rem;
    background: var(--uk-y);
    color: #131518;
}

@media (max-width: 61.99rem) {
    .uk-calcblock__grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   10. Objects on the map (uklad_objects)
   ------------------------------------------------------------------------- */

.uk-objects__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: start;
}

.uk-map {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 0.86;
    border: 1px solid rgb(255 255 255 / 0.16);
    background-color: #16191c;
    background-image: linear-gradient(color-mix(in srgb, var(--uk-y) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--uk-y) 7%, transparent) 1px, transparent 1px),
        linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px);
    background-size: 10% 10%, 10% 10%, 2.5% 2.5%, 2.5% 2.5%;
}

.uk-map::before,
.uk-map::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 3px solid var(--uk-y);
}

.uk-map::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.uk-map::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }

.uk-map__plan {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.uk-map__plan path { fill: none; vector-effect: non-scaling-stroke; }
.uk-map__ring { stroke: rgb(255 255 255 / 0.22); stroke-width: 1.5; stroke-dasharray: 6 4; }
.uk-map__ring--outer { stroke: rgb(255 255 255 / 0.32); stroke-width: 2.5; stroke-dasharray: none; }
.uk-map__ring--inner { stroke: color-mix(in srgb, var(--uk-y) 35%, transparent); stroke-dasharray: none; }
.uk-map__river { stroke: rgb(120 160 190 / 0.45); stroke-width: 6; }
.uk-map__road { stroke: rgb(255 255 255 / 0.08); stroke-width: 1; }

.uk-map__pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    translate: -50% -100%;
    background: var(--uk-y);
    color: #131518;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 62% 78%, 50% 100%, 38% 78%, 0 78%);
    padding-bottom: 0.55rem;
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
    transform-origin: 50% 100%;
}

.uk-map__caption {
    position: absolute;
    left: 1rem;
    bottom: 0.9rem;
    color: #a8acb2;
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.uk-map__north {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1.5px solid rgb(255 255 255 / 0.4);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.85rem;
}

.uk-objects__list {
    border-top: 2px solid var(--uk-y);
}

.uk-obj {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    padding: 1.05rem 0.4rem 1.1rem 0;
    border-bottom: 1px solid var(--c-border);
    transition: background-color var(--dur) var(--ease);
}

.uk-obj__n {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 2px solid var(--uk-y);
    color: var(--uk-y);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.uk-obj__title {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.2;
    color: #ffffff;
}

.uk-obj__link { color: inherit; text-decoration: none; }
.uk-obj__link::after { content: ""; position: absolute; inset: 0; }

.uk-obj__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.9rem;
    margin-block-start: 0.2rem;
    color: var(--c-text-muted);
    font-size: 0.9rem;
}

.uk-obj__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin: 0.55rem 0 0;
}

.uk-obj__facts div { display: flex; gap: 0.4rem; align-items: baseline; }
.uk-obj__facts dt { color: var(--c-text-muted); font-size: 0.82rem; text-transform: lowercase; }
.uk-obj__facts dd { margin: 0; color: #fff; font-family: var(--font-display); font-size: 1rem; font-weight: 500; }

.uk-obj__go {
    align-self: center;
    color: var(--c-text-muted);
    transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.uk-obj:hover,
.uk-obj:focus-within { background: rgb(255 255 255 / 0.04); }
.uk-obj:hover .uk-obj__n,
.uk-obj:focus-within .uk-obj__n { background: var(--uk-y); color: #131518; }
.uk-obj:hover .uk-obj__go,
.uk-obj:focus-within .uk-obj__go { color: var(--uk-y); transform: translate(3px, -3px); }

/* The hovered object lights its pin on the map. */
.uk-objects__grid:has(.uk-obj:is(:hover, :focus-within)) .uk-map__pin { background: #5b6068; color: #d0d2d5; }
.uk-objects__grid:has(.uk-obj[data-n="1"]:is(:hover, :focus-within)) .uk-map__pin[data-n="1"],
.uk-objects__grid:has(.uk-obj[data-n="2"]:is(:hover, :focus-within)) .uk-map__pin[data-n="2"],
.uk-objects__grid:has(.uk-obj[data-n="3"]:is(:hover, :focus-within)) .uk-map__pin[data-n="3"],
.uk-objects__grid:has(.uk-obj[data-n="4"]:is(:hover, :focus-within)) .uk-map__pin[data-n="4"],
.uk-objects__grid:has(.uk-obj[data-n="5"]:is(:hover, :focus-within)) .uk-map__pin[data-n="5"],
.uk-objects__grid:has(.uk-obj[data-n="6"]:is(:hover, :focus-within)) .uk-map__pin[data-n="6"],
.uk-objects__grid:has(.uk-obj[data-n="7"]:is(:hover, :focus-within)) .uk-map__pin[data-n="7"],
.uk-objects__grid:has(.uk-obj[data-n="8"]:is(:hover, :focus-within)) .uk-map__pin[data-n="8"],
.uk-objects__grid:has(.uk-obj[data-n="9"]:is(:hover, :focus-within)) .uk-map__pin[data-n="9"],
.uk-objects__grid:has(.uk-obj[data-n="10"]:is(:hover, :focus-within)) .uk-map__pin[data-n="10"],
.uk-objects__grid:has(.uk-obj[data-n="11"]:is(:hover, :focus-within)) .uk-map__pin[data-n="11"],
.uk-objects__grid:has(.uk-obj[data-n="12"]:is(:hover, :focus-within)) .uk-map__pin[data-n="12"] {
    background: var(--uk-y);
    color: #131518;
    transform: scale(1.3);
    z-index: 2;
}

.uk-objects__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 1.6rem;
}

.uk-objects__live {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #cfd0cc;
    font-size: 0.95rem;
}

.uk-objects__dot {
    width: 0.7rem;
    height: 0.7rem;
    background: #3ddc84;
    box-shadow: 0 0 0 4px rgb(61 220 132 / 0.2);
}

@media (max-width: 61.99rem) {
    .uk-objects__grid { grid-template-columns: minmax(0, 1fr); }
    .uk-map__pin { width: 2.1rem; height: 2.1rem; font-size: 0.85rem; }
}

/* -------------------------------------------------------------------------
   11. Price sheet (uklad_prices)
   ------------------------------------------------------------------------- */

.uk-prices__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
}

.uk-prices--aside .uk-prices__grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }

.uk-prices__radio { position: absolute; opacity: 0; pointer-events: none; }

.uk-prices__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--c-text-strong);
}

.uk-prices__tab {
    padding: 0.85rem 1.3rem 0.8rem;
    border: 2px solid transparent;
    border-bottom: 0;
    color: var(--c-text-muted);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.uk-prices__tab:hover { color: var(--c-text-strong); }

.uk-prices__panel { display: none; }

.uk-prices__radio:nth-of-type(1):checked ~ .uk-prices__panels > .uk-prices__panel:nth-child(1),
.uk-prices__radio:nth-of-type(2):checked ~ .uk-prices__panels > .uk-prices__panel:nth-child(2),
.uk-prices__radio:nth-of-type(3):checked ~ .uk-prices__panels > .uk-prices__panel:nth-child(3),
.uk-prices__radio:nth-of-type(4):checked ~ .uk-prices__panels > .uk-prices__panel:nth-child(4),
.uk-prices__radio:nth-of-type(5):checked ~ .uk-prices__panels > .uk-prices__panel:nth-child(5),
.uk-prices__radio:nth-of-type(6):checked ~ .uk-prices__panels > .uk-prices__panel:nth-child(6),
.uk-prices__radio:nth-of-type(7):checked ~ .uk-prices__panels > .uk-prices__panel:nth-child(7),
.uk-prices__radio:nth-of-type(8):checked ~ .uk-prices__panels > .uk-prices__panel:nth-child(8) { display: block; }

.uk-prices__radio:nth-of-type(1):checked ~ .uk-prices__tabs > .uk-prices__tab:nth-child(1),
.uk-prices__radio:nth-of-type(2):checked ~ .uk-prices__tabs > .uk-prices__tab:nth-child(2),
.uk-prices__radio:nth-of-type(3):checked ~ .uk-prices__tabs > .uk-prices__tab:nth-child(3),
.uk-prices__radio:nth-of-type(4):checked ~ .uk-prices__tabs > .uk-prices__tab:nth-child(4),
.uk-prices__radio:nth-of-type(5):checked ~ .uk-prices__tabs > .uk-prices__tab:nth-child(5),
.uk-prices__radio:nth-of-type(6):checked ~ .uk-prices__tabs > .uk-prices__tab:nth-child(6),
.uk-prices__radio:nth-of-type(7):checked ~ .uk-prices__tabs > .uk-prices__tab:nth-child(7),
.uk-prices__radio:nth-of-type(8):checked ~ .uk-prices__tabs > .uk-prices__tab:nth-child(8) {
    background: var(--c-text-strong);
    border-color: var(--c-text-strong);
    color: var(--uk-y);
}

.uk-prices__radio:nth-of-type(1):focus-visible ~ .uk-prices__tabs > .uk-prices__tab:nth-child(1),
.uk-prices__radio:nth-of-type(2):focus-visible ~ .uk-prices__tabs > .uk-prices__tab:nth-child(2),
.uk-prices__radio:nth-of-type(3):focus-visible ~ .uk-prices__tabs > .uk-prices__tab:nth-child(3),
.uk-prices__radio:nth-of-type(4):focus-visible ~ .uk-prices__tabs > .uk-prices__tab:nth-child(4) { outline: 3px solid var(--uk-y); outline-offset: -3px; }

.uk-prices__table {
    width: 100%;
    background: var(--c-surface);
    font-variant-numeric: tabular-nums;
}

.uk-prices__table thead th {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-align: start;
    text-transform: uppercase;
}

.uk-prices__table thead th:nth-child(n + 2) { text-align: end; }

.uk-prices__table tbody tr { border-bottom: 1px solid var(--c-border); }
.uk-prices__table tbody tr:hover { background: #fffbea; }

.uk-prices__table tbody th,
.uk-prices__table td { padding: 1rem; vertical-align: baseline; }

.uk-prices__table tbody th { font-weight: 400; text-align: start; }

.uk-prices__name { display: block; color: var(--c-text-strong); font-size: 1.08rem; font-weight: 500; }
.uk-prices__desc { display: block; color: var(--c-text-muted); font-size: 0.9rem; }

.uk-prices__unit { color: var(--c-text-muted); text-align: end; white-space: nowrap; }

.uk-prices__price {
    color: var(--c-text-strong);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    text-align: end;
    white-space: nowrap;
}

.uk-prices__note { margin-block-start: 0.9rem; color: var(--c-text-muted); font-size: 0.9rem; }

.uk-prices__aside {
    position: sticky;
    top: 7rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.8rem;
    background: var(--uk-g-900);
    background-image: var(--uk-grid-dark);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    color: #e7e6e1;
    border-top: 6px solid var(--uk-y);
}

.uk-prices__aside-title {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
}

.uk-prices__incl { display: grid; gap: 0.7rem; }
.uk-prices__incl li { display: flex; gap: 0.7rem; align-items: flex-start; }
.uk-prices__incl .cms-icon { flex: none; color: var(--uk-y); margin-top: 0.15rem; }

.uk-prices__aside .cms-btn--primary:hover { background: transparent; border-color: var(--uk-y); color: var(--uk-y); }

@media (max-width: 61.99rem) {
    .uk-prices--aside .uk-prices__grid { grid-template-columns: minmax(0, 1fr); }
    .uk-prices__aside { position: static; }
}

@media (max-width: 40rem) {
    .uk-prices__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .uk-prices__tab { flex: none; padding-inline: 0.9rem; font-size: 0.9rem; }
    .uk-prices__table thead { display: none; }
    .uk-prices__table tbody tr { display: grid; grid-template-columns: 1fr auto; padding: 0.8rem 0.9rem; }
    .uk-prices__table tbody th { grid-column: 1 / -1; padding: 0 0 0.3rem; }
    .uk-prices__table td { padding: 0; }
    .uk-prices__unit { text-align: start; }
}

/* -------------------------------------------------------------------------
   12. Certificates (uklad_certs)
   ------------------------------------------------------------------------- */

.uk-certs__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: var(--s-5);
}

.uk-doc {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.uk-doc:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 0 var(--uk-y); }

.uk-doc__sheet {
    position: relative;
    aspect-ratio: 1 / 0.72;
    margin: 1rem 1rem 0;
    padding: 1.2rem 1.1rem;
    background: #fbfaf6;
    border: 1px solid #dcd8cc;
    overflow: hidden;
}

.uk-doc__sheet::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid #e3dfd3;
    pointer-events: none;
}

.uk-doc__lines { display: flex; flex-direction: column; gap: 9px; margin-top: 1.6rem; }
.uk-doc__lines i { display: block; height: 5px; background: #e4e0d5; }
.uk-doc__lines i:nth-child(1) { width: 70%; height: 8px; background: #cfcabc; }
.uk-doc__lines i:nth-child(2) { width: 88%; }
.uk-doc__lines i:nth-child(3) { width: 80%; }
.uk-doc__lines i:nth-child(4) { width: 92%; }
.uk-doc__lines i:nth-child(5) { width: 40%; }

.uk-doc__stamp {
    position: absolute;
    right: 1rem;
    bottom: 0.9rem;
    display: grid;
    place-items: center;
    width: 4.2rem;
    height: 4.2rem;
    border: 3px double rgb(30 80 170 / 0.55);
    border-radius: 50% !important;
    color: rgb(30 80 170 / 0.6);
    rotate: -14deg;
}

.uk-doc__stamp .cms-icon { width: 1.8rem; height: 1.8rem; }

.uk-doc__scan { width: 100%; height: 100%; object-fit: cover; }
.uk-doc--scan .uk-doc__sheet { padding: 0; }

.uk-doc__kind {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.3rem 0.6rem;
    background: var(--uk-g-900);
    color: var(--uk-y);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.uk-doc__body { padding: 1rem 1.1rem 1.2rem; }

.uk-doc__title {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.2;
}

.uk-doc__link { color: inherit; text-decoration: none; }
.uk-doc__link::after { content: ""; position: absolute; inset: 0; }

.uk-doc__meta { display: grid; gap: 0.2rem; margin: 0.7rem 0 0; font-size: 0.86rem; }
.uk-doc__meta div { display: flex; gap: 0.5rem; }
.uk-doc__meta dt { min-width: 3.6rem; color: var(--c-text-muted); }
.uk-doc__meta dd { margin: 0; color: var(--c-text-strong); font-weight: 500; }

.uk-certs__note {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-block-start: var(--s-6);
    color: var(--c-text-muted);
}

.uk-certs__note .cms-icon { color: var(--uk-y-deep); }


/* -------------------------------------------------------------------------
   13. Sharp corners everywhere — the theme's one hard rule
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
    border-radius: 0 !important;
}

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

/* Header promises may wrap onto two lines instead of being cut. */
.hdr-row--main .hdr-text { white-space: normal; }
.hdr-row--main .hdr-text span { overflow: visible; text-overflow: clip; }

/* Narrow sections keep a one-column heading. */
.cms-w-narrow .cms-section__head { display: block !important; }
.cms-w-narrow .cms-section__head .cms-section__subtitle { margin-block-start: var(--s-4) !important; padding-inline-start: 0 !important; border: 0 !important; }

/* Advantages, numbered: a stencilled graphite figure on a yellow bar. */
.cms-feature--numbered {
    gap: var(--s-3);
    padding-block-start: 0;
    border-top: 2px solid var(--c-text-strong);
}

.cms-feature__num {
    display: inline-block;
    align-self: flex-start;
    margin-block-start: -2px;
    padding: 0.2rem 0.55rem 0.1rem;
    background: var(--uk-y);
    color: #131518;
    font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem);
    font-weight: 600;
}

.cms-feature .cms-card__title { font-size: 1.3rem; }

/* Steps on one line: square markers, a dashed line like a dimension. */
.cms-steps__list { --marker: 3.2rem; }

@media (min-width: 62rem) {
    .cms-steps--timeline .cms-steps__list {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        grid-template-columns: none;
        gap: var(--s-5);
    }
}

.cms-step__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #131518;
    color: var(--uk-y);
    font-size: 1.3rem;
    font-weight: 600;
    box-shadow: 0 0 0 6px var(--c-bg);
}

.cms-step__marker:not(:empty)::before { content: "0"; }

.cms-steps--timeline .cms-step:not(:last-child)::after {
    height: 0 !important;
    border-top: 2px dashed var(--c-text-strong);
    background: none !important;
}

.cms-step__title { font-size: 1.35rem; }
.cms-step__duration { color: var(--c-text-strong); }
.cms-step__duration .cms-icon { color: var(--uk-y-deep); }

:is(.cms-tone-dark, .cms-on-dark) .cms-step__marker { background: var(--uk-y); color: #131518; }
:is(.cms-tone-dark, .cms-on-dark) .cms-step__duration { color: var(--uk-y); }

/* Reviews: squares, a yellow rule on top, rating set to the left. */
.cms-rating-summary { justify-content: flex-start; }
.cms-rating-summary__value { font-weight: 600; }
.cms-stars__star { color: var(--uk-y); }

.cms-review.cms-card { border-top: 4px solid var(--uk-y); }
.cms-review__text { font-size: 1.08rem; line-height: 1.55; }

.cms-review__initial {
    background: var(--uk-y) !important;
    color: #131518 !important;
    font-family: var(--font-display);
}

.cms-review__name { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }

/* FAQ: square toggles, stencilled questions. */
.cms-faq__question {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.cms-faq__toggle {
    background: transparent !important;
    border: 2px solid var(--c-text-strong) !important;
    color: var(--c-text-strong) !important;
}

.cms-faq__item[open] .cms-faq__toggle,
details[open] > summary .cms-faq__toggle {
    background: var(--uk-y) !important;
    border-color: var(--uk-y) !important;
    color: #131518 !important;
}

/* Contacts: solid yellow icon squares, stencilled values. */
.cms-contact__icon {
    background: var(--uk-y);
    color: #131518;
}

.cms-contact__title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cms-contact__value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--c-text-strong);
    text-decoration: none;
}

.cms-contacts--card .cms-contact.cms-card { border-top: 4px solid var(--c-text-strong); }
.cms-contacts--card .cms-contact.cms-card:hover { border-top-color: var(--uk-y); }

/* Before / after: labels as stencil plates. */
.cms-ba__label {
    background: #131518 !important;
    color: var(--uk-y) !important;
    font-family: var(--font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cms-ba__knob { background: var(--uk-y) !important; color: #131518 !important; }
.cms-ba__handle::before, .cms-ba__handle { --ba-line: var(--uk-y); }

/* Stats: big stencilled figures with a yellow bar. */
.cms-stat__value {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-text-strong);
}

.cms-stat__num { font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem); }

.cms-stats--divided .cms-stat { border-color: var(--c-text-strong); }

.cms-stat::before {
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-block-end: var(--s-4);
    background: var(--uk-y);
}

.cms-stats--center .cms-stat::before { margin-inline: auto; }

/* Media and text, heading block. */
.cms-block--media_text .cms-media__img,
.cms-block--media_text img { filter: saturate(0.9); }

/* Footer: menus without their sub-items (the header has those). */
.uk-footer .ftr-menu__sub { display: none; }

@media (max-width: 40rem) {
    .uk-certs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    .uk-doc__sheet { margin: 0.6rem 0.6rem 0; padding: 0.8rem 0.7rem; }
    .uk-doc__stamp { width: 2.8rem; height: 2.8rem; right: 0.5rem; bottom: 0.5rem; }
    .uk-doc__stamp .cms-icon { width: 1.2rem; height: 1.2rem; }
    .uk-doc__lines { margin-top: 1.2rem; gap: 6px; }
    .uk-doc__kind { font-size: 0.62rem; padding: 0.2rem 0.4rem; }
    .uk-doc__body { padding: 0.7rem 0.7rem 0.9rem; }
    .uk-doc__title { font-size: 0.92rem; }
    .uk-doc__meta { font-size: 0.78rem; }
    .uk-doc__meta div { flex-direction: column; gap: 0; }
}

/* The trust lines between logo and phone only where there is room. */
@media (max-width: 79.99rem) {
    .hdr-row--main .hdr-zone--center .hdr-text { display: none; }
}

.uk-calc__type-name { hyphens: auto; overflow-wrap: normal; }

/* The footer hangs straight under the yellow band; the band keeps the gap. */
.uk-footer { margin-block-start: 0 !important; border-top: 0 !important; }
.uk-prefooter { margin-block-start: var(--s-9); }
:is(.page--landing, .page--page) .uk-prefooter { margin-block-start: 0; }

.cms-stat__suffix { color: var(--c-text-strong); }
:is(.cms-tone-dark, .cms-on-dark) .cms-stat__suffix { color: var(--uk-y); }

/* =========================================================================
   15. Design settings (theme.json → design.controls)

   The owner's variants, as data-uklad-… attributes on <html> printed by
   theme_attrs(). The defaults (no rule matches) are the look above. Token
   overrides use `html[…]:root` to outrank the `:root:root` token block.
   ========================================================================= */

/* Tone of the dark bands: graphite (default), steel, wet concrete. */
html[data-uklad-tone="steel"]:root {
    --uk-g-950: #10151c;
    --uk-g-900: #19212c;
    --uk-g-800: #222c39;
    --uk-g-700: #2f3a4a;
    --uk-g-600: #435063;
}

html[data-uklad-tone="earth"]:root {
    --uk-g-950: #171411;
    --uk-g-900: #221e1a;
    --uk-g-800: #2c2723;
    --uk-g-700: #3b3530;
    --uk-g-600: #4f4841;
}

/* Header: all dark. */
html[data-uklad-header="dark"] .site-header {
    background: var(--uk-g-900);
    box-shadow: none;
}

html[data-uklad-header="dark"] .hdr-row--main {
    --c-bg: var(--uk-g-900);
    --c-text: #e7e6e1;
    --c-text-strong: #ffffff;
    --c-text-muted: #a8acb2;
    --c-border: #3a3f47;
    --c-link: #ffffff;
    background: var(--uk-g-900);
    color: #e7e6e1;
}

html[data-uklad-header="dark"] .hdr-row--main .hdr-text .cms-icon {
    border-color: var(--uk-y);
    color: var(--uk-y);
}

html[data-uklad-header="dark"] .hdr-row--bottom {
    background: var(--uk-g-950);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

html[data-uklad-header="dark"] .hdr-row--main .hdr-icon-btn { color: #ffffff; }

/* Header: all light — the menu on concrete, the top line on paper. */
html[data-uklad-header="light"] .hdr-row--top {
    background: var(--uk-paper);
    color: var(--c-text-muted);
    box-shadow: inset 0 -1px 0 var(--uk-line);
}

html[data-uklad-header="light"] .hdr-row--top a { color: var(--c-text); }
html[data-uklad-header="light"] .hdr-row--top a:hover { color: var(--c-text-strong); }
html[data-uklad-header="light"] .hdr-row--top .cms-icon { color: var(--uk-y-deep); }

html[data-uklad-header="light"] .hdr-row--bottom {
    background: var(--uk-concrete);
    color: var(--c-text-strong);
}

html[data-uklad-header="light"] .hdr-row--bottom .hdr-nav__link { color: #23272c; }

html[data-uklad-header="light"] .hdr-row--bottom .hdr-nav__link:hover,
html[data-uklad-header="light"] .hdr-row--bottom .hdr-nav__link.is-active { color: #111316; }

html[data-uklad-header="light"] .hdr-row--bottom .hdr-nav__item + .hdr-nav__item::before { background: rgb(19 21 24 / 0.16); }
html[data-uklad-header="light"] .hdr-row--bottom .hdr-nav__toggle { color: var(--c-text-muted); }

html[data-uklad-header="light"] .hdr-row--bottom .hdr-links a,
html[data-uklad-header="light"] .hdr-row--bottom .hdr-text {
    color: #111316;
    text-decoration: underline;
    text-decoration-color: var(--uk-y);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.3em;
}

html[data-uklad-header="light"] .hdr-row--bottom .hdr-links a:hover { color: #000000; }

/* Primary buttons outlined: a graphite frame with the signal colour as an
   underline; filled on hover. On dark grounds the frame is the signal colour. */
html[data-uklad-buttons="outline"] .cms-btn--primary {
    background-color: transparent;
    border-color: var(--c-text-strong);
    color: var(--c-text-strong);
    box-shadow: inset 0 -5px 0 var(--uk-y);
}

html[data-uklad-buttons="outline"] .cms-btn--primary:hover {
    background-color: var(--uk-y);
    border-color: var(--uk-y);
    color: #131518;
    box-shadow: none;
}

html[data-uklad-buttons="outline"] :is(.cms-tone-dark, .cms-on-dark, .cms-tone-accent, .uk-prices__aside) .cms-btn--primary {
    border-color: var(--uk-y);
    color: var(--uk-y);
    box-shadow: none;
}

html[data-uklad-buttons="outline"] :is(.cms-tone-dark, .cms-on-dark, .cms-tone-accent, .uk-prices__aside) .cms-btn--primary:hover {
    background-color: var(--uk-y);
    color: #131518;
}

/* Light cards on a dark band (the calculator) are light again. */
html[data-uklad-buttons="outline"] :is(.uk-calc, .cms-on-light) .cms-btn--primary {
    border-color: #131518;
    color: #131518;
    box-shadow: inset 0 -5px 0 var(--uk-y);
}

html[data-uklad-buttons="outline"] :is(.uk-calc, .cms-on-light) .cms-btn--primary:hover {
    background-color: var(--uk-y);
    border-color: var(--uk-y);
    box-shadow: none;
}

html[data-uklad-buttons="outline"] .cms-tone-primary .cms-btn--primary {
    border-color: #131518;
    color: #131518;
    box-shadow: none;
}

html[data-uklad-buttons="outline"] .cms-tone-primary .cms-btn--primary:hover {
    background-color: #131518;
    color: var(--uk-y);
}

/* Corner radius: 0 keeps the hard rule of section 13; a value softens the
   things you touch — buttons, cards, fields, the calculator, panels. */
:is(.cms-btn, .cms-card, .cms-popover__panel, .hdr-burger, .hdr-icon-btn, .hdr-sub__list,
    .uk-calc, .uk-calc__type-box, .uk-calc__num, .uk-doc, .uk-prices__sheet, .uk-prices__aside,
    .cat-card, .svc-card, .pf-card, .cms-badge-icon),
input:not([type="checkbox"], [type="radio"], [type="range"]),
select,
textarea {
    border-radius: var(--uklad-radius) !important;
}

/* Hazard stripes off: the stripes become a plain signal-colour rule. */
html[data-uklad-hazard="off"]:root {
    --uk-hazard: linear-gradient(var(--uk-y), var(--uk-y));
}

html[data-uklad-hazard="off"] .uk-prefooter::before,
html[data-uklad-hazard="off"] .uk-calc::after { display: none; }

/* Drawing grid off: plain graphite and concrete bands. */
html[data-uklad-grid="off"]:root {
    --uk-grid-light: none;
    --uk-grid-dark: none;
}

html[data-uklad-grid="off"] .uk-prefooter::after { display: none; }

/* Compact spacing between sections. */
html[data-uklad-density="compact"]:root {
    --sp-md: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
    --sp-lg: clamp(3.2rem, 2.2rem + 4vw, 5.5rem);
}