/* =========================================================================
   «Гараж» — a template for detailing centres and car services.

   Matte black and carbon weave, a racing accent (yellow by default) and a
   chrome second colour, a wide display face set in capitals, an instrument
   mono for figures, and HUD details: target corners around photos, tick
   scales, gauges, a racing stripe under the header.

   1. Fonts            5. Header           9. Shared blocks re-dressed
   2. Design settings  6. Footer          10. Variants (data-garazh-…)
   3. Tokens and tones 7. HUD kit         11. Phones
   4. Type, buttons    8. Own blocks
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fonts — self-hosted: the parent's Unbounded, Inter, Manrope, Onest and
   the template's own Oswald and JetBrains Mono (assets/fonts, OFL).
   ------------------------------------------------------------------------- */

@font-face { font-family: 'Garazh Wide'; 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: 'Garazh Wide'; 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: 'Garazh 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: 'Garazh 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; }
@font-face { font-family: 'Garazh 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: 'Garazh 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: 'Garazh 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: 'Garazh 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: 'Garazh Narrow'; font-style: normal; font-display: swap; font-weight: 200 700;
    src: url('../fonts/oswald-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: 'Garazh Narrow'; font-style: normal; font-display: swap; font-weight: 200 700;
    src: url('../fonts/oswald-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: 'Garazh Mono'; font-style: normal; font-display: swap; font-weight: 100 800;
    src: url('../fonts/jetbrains-mono-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: 'Garazh Mono'; font-style: normal; font-display: swap; font-weight: 100 800;
    src: url('../fonts/jetbrains-mono-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; }

/* -------------------------------------------------------------------------
   2. Design settings (theme.json → design.controls). Core prints the
   owner's values as :root{--garazh-…} after this file.
   ------------------------------------------------------------------------- */

:root {
    --garazh-accent: #f2c200;
    --garazh-chrome: #c9ced6;
    --garazh-font-display: 'Garazh Wide', 'Unbounded', 'Segoe UI', system-ui, sans-serif;
    --garazh-font-body: 'Garazh Inter', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --garazh-font-hud: 'Garazh Mono', 'JetBrains Mono', Consolas, monospace;
    --garazh-radius: 2px;
}

/* -------------------------------------------------------------------------
   3. Tokens and tones
   ------------------------------------------------------------------------- */

:root:root {
    --gz-accent: var(--garazh-accent);
    --gz-accent-hi: color-mix(in srgb, var(--gz-accent), #ffffff 22%);
    --gz-accent-lo: color-mix(in srgb, var(--gz-accent), #000000 18%);
    --gz-accent-glow: color-mix(in srgb, var(--gz-accent) 32%, transparent);
    --gz-chrome: var(--garazh-chrome);
    --gz-ink: #0c0d0f;          /* text on the accent */

    --gz-bg: #0c0d0f;
    --gz-surface: #15161a;
    --gz-raise: #1c1e22;
    --gz-sunk: #08090a;
    --gz-line: #26282e;
    --gz-line-hi: #3a3d44;
    --gz-text: #c4c8cf;
    --gz-strong: #f4f5f7;
    --gz-muted: #8e939c;
    --gz-faint: #6b7079;
    --gz-weave-a: #121316;
    --gz-weave-b: #17181c;

    --gz-r: var(--garazh-radius);
    --gz-cut: 14px;             /* the bevelled corner of panels */
    --gz-hud: var(--garazh-font-hud);
    --gz-hair: 1px solid var(--gz-line);
    --gz-sheen: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gz-chrome) 55%, transparent) 30%, transparent 70%);

    --c-bg: var(--gz-bg);
    --c-surface: var(--gz-surface);
    --c-surface-sunk: var(--gz-sunk);
    --c-text: var(--gz-text);
    --c-text-strong: var(--gz-strong);
    --c-text-muted: var(--gz-muted);
    --c-text-faint: var(--gz-faint);
    --c-border: var(--gz-line);
    --c-border-strong: var(--gz-line-hi);
    --c-accent: var(--gz-accent);
    --c-accent-hover: var(--gz-accent-hi);
    --c-accent-contrast: var(--gz-ink);
    --c-accent-soft: color-mix(in srgb, var(--gz-accent) 12%, var(--gz-bg));
    --c-link: var(--gz-accent);
    --c-link-hover: var(--gz-accent-hi);
    --c-mark: var(--gz-accent);
    --c-mark-text: var(--gz-accent);
    --c-mark-soft: color-mix(in srgb, var(--gz-accent) 14%, var(--gz-bg));
    --c-slab: var(--gz-sunk);
    --c-slab-text: var(--gz-strong);
    --c-slab-muted: var(--gz-muted);
    --c-danger: #ff6b5e;
    --c-success: #5fd08a;

    --font-display: var(--garazh-font-display);
    --font-ui: var(--garazh-font-body);
    --font-prose: var(--garazh-font-body);
    --font-mono: var(--garazh-font-hud);
    --fw-heading: 700;
    --tr-tight: -0.02em;
    --tr-snug: -0.01em;
    --lh-tight: 1.02;
    --lh-snug: 1.12;
    --t-lg: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
    --t-xl: clamp(1.45rem, 1.1rem + 1.4vw, 2.3rem);
    --t-2xl: clamp(1.9rem, 1.2rem + 2.8vw, 3.5rem);
    --t-3xl: clamp(2.1rem, 1.2rem + 3.2vw, 3.7rem);

    --r-xs: var(--gz-r);
    --r-sm: var(--gz-r);
    --r-md: var(--gz-r);
    --r-lg: var(--gz-r);
    --r-btn: var(--gz-r);
    --card-radius: 0px;
    --card-bg: var(--gz-surface);
    --card-border: 1px solid var(--gz-line);
    --card-shadow: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 30px 70px -30px rgb(0 0 0 / 0.9);
    --shadow-lift: 0 30px 70px -30px rgb(0 0 0 / 0.9);

    --w-container: 76rem;
    --w-wide: 88rem;
    --sp-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --sp-md: clamp(4.5rem, 3rem + 5.5vw, 8rem);
    --sp-lg: clamp(5.5rem, 3.5rem + 8vw, 10.5rem);

    color-scheme: dark;
}

html[data-garazh-surface="graphite"] {
    --gz-bg: #151412;
    --gz-surface: #1f1d1b;
    --gz-raise: #282624;
    --gz-sunk: #0e0d0c;
    --gz-line: #34312d;
    --gz-line-hi: #4a4641;
    --gz-text: #cfcac3;
    --gz-muted: #9a948b;
    --gz-weave-a: #191816;
    --gz-weave-b: #1f1d1a;
}

html[data-garazh-surface="night"] {
    --gz-bg: #0a0d12;
    --gz-surface: #111620;
    --gz-raise: #182030;
    --gz-sunk: #06080c;
    --gz-line: #202837;
    --gz-line-hi: #33405a;
    --gz-text: #c2cad6;
    --gz-muted: #8791a2;
    --gz-weave-a: #0d1118;
    --gz-weave-b: #121824;
}

html.garazh { background-color: var(--gz-bg); }

body.gz-body {
    background-color: var(--gz-bg);
    color: var(--c-text);
    font-family: var(--font-ui);
    font-feature-settings: 'lnum' 1, 'tnum' 1;
    -webkit-font-smoothing: antialiased;
}

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

/* Carbon weave: two diagonal twills over a dark ground, very low contrast. */
.gz-carbon,
html[data-garazh-carbon="on"] :is(.cms-tone-dark, .cms-tone-soft, .gz-hdr, .gz-ftr__band) {
    background-image:
        linear-gradient(27deg, var(--gz-weave-b) 5px, transparent 5px),
        linear-gradient(207deg, var(--gz-weave-b) 5px, transparent 5px),
        linear-gradient(27deg, var(--gz-weave-a) 5px, transparent 5px),
        linear-gradient(207deg, var(--gz-weave-a) 5px, transparent 5px),
        linear-gradient(90deg, color-mix(in srgb, var(--gz-weave-a), #000 10%) 10px, transparent 10px),
        linear-gradient(var(--gz-weave-a) 25%, var(--gz-weave-b) 25%, var(--gz-weave-b) 50%, transparent 50%, transparent 75%, var(--gz-weave-a) 75%);
    background-size: 20px 20px;
    background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
}

/* Tones. The id-level boost keeps the site's generated tones out. */
.cms-tone-soft:not(#gz) {
    --section-bg: var(--gz-sunk);
    --c-bg: var(--gz-sunk);
    --c-surface: var(--gz-surface);
    --card-bg: var(--gz-surface);
    background-color: var(--gz-sunk);
}

:is(.cms-tone-dark, .cms-on-dark):not(#gz) {
    --section-bg: #050506;
    --c-bg: #050506;
    --c-surface: #111215;
    --card-bg: #111215;
    color-scheme: dark;
}
.cms-tone-dark:not(#gz) { background-color: #050506; }

.cms-tone-primary:not(#gz),
.cms-tone-accent:not(#gz) {
    --section-bg: var(--gz-accent);
    --c-bg: var(--gz-accent);
    --c-surface: color-mix(in srgb, var(--gz-accent), #ffffff 18%);
    --c-text: #1b1c1f;
    --c-text-strong: var(--gz-ink);
    --c-text-muted: #3a3b3f;
    --c-border: color-mix(in srgb, var(--gz-ink) 22%, transparent);
    --c-accent: var(--gz-ink);
    --c-accent-hover: #2a2c31;
    --c-accent-contrast: var(--gz-accent);
    --c-link: var(--gz-ink);
    background-color: var(--gz-accent);
    color-scheme: light;
}

/* -------------------------------------------------------------------------
   4. Type, buttons, section heads
   ------------------------------------------------------------------------- */

body.gz-body :is(h1, h2, h3, h4) {
    font-family: var(--font-display);
    color: var(--c-text-strong);
}

body.gz-body :is(h1, h2) { text-transform: uppercase; }

/* Page titles of module pages: the wide face needs a smaller cap. */
body.gz-body h1:not(.gz-hero__title) {
    font-size: clamp(1.7rem, 1.05rem + 2.4vw, 3.1rem);
    line-height: 1.06;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
    text-wrap: balance;
}

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

.cms-section__title {
    font-weight: var(--fw-heading);
    letter-spacing: var(--tr-snug);
    line-height: 1.08;
    text-wrap: balance;
}

/* A HUD index before every section title: «01 ——— ▮». */
main { counter-reset: gz-sec; }
.cms-section__head { counter-increment: gz-sec; }
.cms-section__head .cms-section__title::before {
    content: counter(gz-sec, decimal-leading-zero);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: max-content;
    margin-block-end: 1.1rem;
    padding-inline-end: 4.5rem;
    font-family: var(--gz-hud);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--gz-accent);
    background:
        linear-gradient(var(--gz-accent), var(--gz-accent)) right 0.55rem center / 0.5rem 0.5rem no-repeat,
        linear-gradient(color-mix(in srgb, var(--gz-chrome) 45%, transparent), color-mix(in srgb, var(--gz-chrome) 45%, transparent)) right 1.5rem center / 2.2rem 1px no-repeat;
}
.cms-section__head--center .cms-section__title::before { margin-inline: auto; }

.cms-section__subtitle {
    max-width: 44rem;
    color: var(--c-text-muted);
    font-size: var(--t-md);
    line-height: 1.6;
}

.gz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.2rem;
    font-family: var(--gz-hud);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gz-chrome);
}
.gz-eyebrow::before {
    content: '';
    width: 1.8rem;
    height: 3px;
    background: var(--gz-accent);
    box-shadow: 0 0 12px var(--gz-accent-glow);
}

.cms-btn {
    min-height: 50px;
    padding: 0.9rem 1.6rem;
    border-radius: var(--r-btn);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cms-btn--primary {
    background-color: var(--c-accent);
    color: var(--c-accent-contrast);
    border-color: var(--c-accent);
}
.cms-btn--primary:hover {
    background-color: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
    box-shadow: 0 0 28px var(--gz-accent-glow);
}
.cms-btn--ghost {
    border: 1px solid color-mix(in srgb, var(--c-text-strong) 38%, transparent);
    color: var(--c-text-strong);
    background: transparent;
}
.cms-btn--ghost:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 6%, transparent);
}
.cms-tone-primary .cms-btn--primary:hover { box-shadow: none; }

:focus-visible { outline-color: var(--gz-accent); }

.gz-ticks { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.gz-ticks li { position: relative; padding-inline-start: 1.7rem; line-height: 1.5; color: var(--c-text); }
.gz-ticks li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.3em;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--gz-accent);
    border-top: 0;
    border-left: 0;
    transform: rotate(-45deg) translate(-1px, -1px) scale(0.8);
}

/* Density */
html[data-garazh-density="compact"] {
    --sp-sm: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    --sp-md: clamp(3rem, 2.2rem + 3.4vw, 5rem);
    --sp-lg: clamp(4rem, 3rem + 4vw, 6.5rem);
}

/* Forms on the dark ground. */
body.gz-body .cms-form__input,
body.gz-body .cms-calc__number {
    background-color: color-mix(in srgb, var(--c-text-strong) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-text-strong) 16%, transparent);
    border-radius: var(--gz-r);
    color: var(--c-text-strong);
    color-scheme: dark;
}
body.gz-body .cms-form__input::placeholder { color: var(--gz-faint); }
body.gz-body .cms-form__input:hover { border-color: color-mix(in srgb, var(--c-text-strong) 30%, transparent); }
body.gz-body :is(.cms-form__input, .cms-calc__number):focus {
    border-color: var(--gz-accent);
    outline: 2px solid var(--gz-accent-glow);
    outline-offset: 0;
}
body.gz-body select.cms-form__input option { background: var(--gz-surface); color: var(--gz-strong); }
body.gz-body .cms-form__label {
    font-family: var(--gz-hud);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
body.gz-body .cms-form__req { color: var(--gz-accent); }
body.gz-body input[type="checkbox"],
body.gz-body input[type="radio"] { accent-color: var(--gz-accent); }
body.gz-body .cms-form__check { color: var(--c-text-muted); font-size: 0.85rem; }

/* -------------------------------------------------------------------------
   5. Header
   ------------------------------------------------------------------------- */

.gz-hdr.site-header {
    background-color: var(--gz-sunk);
    border-bottom: 0;
    color: var(--gz-text);
}

.gz-hdr .hdr-row__inner { max-width: var(--w-wide); }

.gz-hdr .hdr-row--top {
    background: transparent;
    border-bottom: var(--gz-hair);
    color: var(--gz-muted);
    font-family: var(--gz-hud);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}
.gz-hdr .hdr-row--top .hdr-row__inner { min-height: 2.3rem; }
.gz-hdr .hdr-row--top .cms-icon { color: var(--gz-accent); }
.gz-hdr .hdr-row--top a { color: inherit; }
.gz-hdr .hdr-row--top a:hover { color: var(--gz-strong); }

.gz-hdr .hdr-row--main { position: relative; background: color-mix(in srgb, var(--gz-sunk) 88%, transparent); }
.gz-hdr .hdr-row--main .hdr-row__inner { min-height: 4.6rem; }

.gz-hdr__stripe {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background:
        linear-gradient(90deg, var(--gz-accent) 0 max(var(--gutter), calc((100% - var(--w-wide)) / 2 + var(--gutter) + 9rem)), transparent 0) no-repeat,
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--gz-chrome) 35%, transparent) 20%, color-mix(in srgb, var(--gz-chrome) 12%, transparent) 90%, transparent) 0 100% / 100% 1px no-repeat;
}

.gz-logo { color: var(--gz-strong); gap: 0.75rem; }
.gz-logo__mark { width: 2.6rem; height: 1.9rem; color: var(--gz-accent); flex: none; }
.gz-hdr .hdr-logo__name,
.gz-drawer .hdr-logo__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gz-strong);
}
.gz-hdr .hdr-logo__tagline {
    font-family: var(--gz-hud);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gz-muted);
}

.gz-hdr .hdr-nav__link {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gz-text);
}
.gz-hdr .hdr-nav__link:hover,
.gz-hdr .hdr-nav__link.is-active { color: var(--gz-strong); }
.gz-hdr .hdr-nav__link.is-active { box-shadow: inset 0 -2px 0 var(--gz-accent); }
.gz-hdr .hdr-nav__toggle { color: var(--gz-muted); }

.gz-hdr .hdr-sub {
    background: var(--gz-surface);
    border: 1px solid var(--gz-line);
    border-top: 2px solid var(--gz-accent);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
}
.gz-hdr .hdr-sub__link { color: var(--gz-text); font-size: 0.92rem; border-radius: 0; }
.gz-hdr .hdr-sub__link:hover { background: var(--gz-raise); color: var(--gz-strong); }

.gz-hdr .hdr-phone__number {
    font-family: var(--gz-hud);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gz-strong);
}
.gz-hdr .hdr-phone__caption { font-size: 0.7rem; color: var(--gz-muted); }
.gz-hdr .hdr-button { min-height: 44px; padding-inline: 1.3rem; }
.gz-hdr .hdr-icon-btn { color: var(--gz-strong); }

.gz-burger { color: var(--gz-strong); }

.gz-drawer.hdr-drawer {
    background: var(--gz-sunk);
    color: var(--gz-text);
    border-left: 2px solid var(--gz-accent);
}
.gz-drawer .hdr-drawer__close { color: var(--gz-strong); }
.gz-drawer a { color: var(--gz-strong); }
.gz-drawer__stripe {
    display: block;
    height: 3px;
    margin-block-start: 2rem;
    background: linear-gradient(90deg, var(--gz-accent) 0 30%, transparent 30% 32%, var(--gz-chrome) 32% 34%, transparent 34%);
}

/* Floating header: a detached panel with bevelled corners. */
html[data-garazh-header="floating"] .gz-hdr.site-header {
    background: transparent;
    padding: 0.75rem var(--gutter) 0;
}
html[data-garazh-header="floating"] .gz-hdr .gz-hdr__shell {
    max-width: var(--w-wide);
    margin-inline: auto;
    background: color-mix(in srgb, var(--gz-sunk) 86%, transparent);
    backdrop-filter: blur(14px);
    border: 1px solid var(--gz-line);
    clip-path: polygon(var(--gz-cut) 0, 100% 0, 100% calc(100% - var(--gz-cut)), calc(100% - var(--gz-cut)) 100%, 0 100%, 0 var(--gz-cut));
}
html[data-garazh-header="floating"] .gz-hdr .hdr-row--main { background: transparent; }
html[data-garazh-header="floating"] .gz-hdr .hdr-row__inner { padding-inline: 1.25rem; }
html[data-garazh-header="floating"] .gz-hdr__stripe {
    background: linear-gradient(90deg, var(--gz-accent) 0 9rem, transparent 9rem);
}
html[data-garazh-header="floating"][data-garazh-carbon="on"] .gz-hdr { background-image: none; }

/* -------------------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------------------- */

.gz-ftr.site-footer {
    background-color: var(--gz-sunk);
    color: var(--gz-muted);
    border-top: 0;
}

.gz-ftr__band {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--gutter) 0;
    border-bottom: var(--gz-hair);
}
.gz-ftr__scale {
    display: block;
    max-width: var(--w-wide);
    height: 14px;
    margin-inline: auto;
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--gz-chrome) 45%, transparent) 0 1px, transparent 1px 60px) 0 0 / 100% 14px no-repeat,
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--gz-chrome) 22%, transparent) 0 1px, transparent 1px 12px) 0 8px / 100% 6px no-repeat;
}
.gz-ftr__word {
    max-width: var(--w-wide);
    margin: 0.4rem auto -0.12em;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3.4rem, 1rem + 14vw, 15rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: transparent;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gz-chrome) 34%, transparent) 0%, color-mix(in srgb, var(--gz-chrome) 8%, transparent) 70%, transparent 100%);
    -webkit-background-clip: text;
    background-clip: text;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}
.gz-ftr__stripe {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--gz-accent) 0 38%, transparent 38% 39%, var(--gz-accent) 39% 41%, transparent 41%);
}

.gz-ftr .site-footer__inner { max-width: var(--w-wide); }
.gz-ftr .ftr-col__title {
    font-family: var(--gz-hud);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gz-accent);
}
.gz-ftr .ftr-menu__link { color: var(--gz-text); }
.gz-ftr .ftr-menu__link:hover { color: var(--gz-strong); }
.gz-ftr .ftr-about { color: var(--gz-muted); line-height: 1.6; }
.gz-ftr .ftr-contacts__phone a {
    font-family: var(--gz-hud);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gz-strong);
}
.gz-ftr .ftr-contacts__line { color: var(--gz-text); }
.gz-ftr .ftr-contacts .cms-icon { color: var(--gz-accent); }
.gz-ftr__data.ftr-bottom {
    border-top: var(--gz-hair);
    font-family: var(--gz-hud);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--gz-faint);
}
.gz-ftr__data a { color: var(--gz-muted); }
.gz-ftr__data a:hover { color: var(--gz-strong); }

/* -------------------------------------------------------------------------
   7. HUD kit — corners, panels, readouts
   ------------------------------------------------------------------------- */

.gz-hud-corners {
    position: absolute;
    inset: 14px;
    pointer-events: none;
    z-index: 2;
}
.gz-hud-corners i {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 0 solid var(--gz-accent);
}
.gz-hud-corners i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.gz-hud-corners i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.gz-hud-corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.gz-hud-corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
html[data-garazh-hud="off"] :is(.gz-hud-corners, .gz-hero__grid) { display: none; }

.gz-panel {
    position: relative;
    background:
        var(--gz-sheen) top / 100% 1px no-repeat,
        var(--c-surface);
    border: 1px solid var(--c-border);
}
html[data-garazh-cards="bevel"] .gz-panel {
    border: 0;
    clip-path: polygon(0 0, calc(100% - var(--gz-cut)) 0, 100% var(--gz-cut), 100% 100%, var(--gz-cut) 100%, 0 calc(100% - var(--gz-cut)));
}

.gz-readouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid color-mix(in srgb, var(--gz-chrome) 25%, transparent);
}
.gz-readout {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 1rem 1rem 0 0;
    position: relative;
}
.gz-readout::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 2.2rem;
    height: 3px;
    background: var(--gz-accent);
}
.gz-readout__value {
    margin: 0;
    text-transform: uppercase;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
    line-height: 1;
    color: var(--gz-strong);
    white-space: nowrap;
}
.gz-readout__label {
    font-family: var(--gz-hud);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gz-muted);
}

/* -------------------------------------------------------------------------
   8. Own blocks
   ------------------------------------------------------------------------- */

/* 8.1 First screen */
.gz-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: clamp(640px, 92vh, 900px);
    background: var(--gz-sunk);
    overflow: hidden;
}
.gz-hero__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: -2;
}
.gz-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.gz-hero__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(6 7 8 / 0.94) 0%, rgb(6 7 8 / 0.78) 34%, rgb(6 7 8 / 0.25) 62%, rgb(6 7 8 / 0.55) 100%),
        linear-gradient(0deg, rgb(6 7 8 / 0.9) 0%, transparent 38%);
}
.gz-hero--no-photo { background: radial-gradient(120% 90% at 80% 20%, var(--gz-raise), var(--gz-sunk) 60%); }
.gz-hero__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / 0.045) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 96px);
    mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}
.gz-hero__corners { inset: clamp(14px, 2vw, 28px); }
.gz-hero__frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    align-items: end;
    gap: clamp(2rem, 1rem + 4vw, 6rem);
    width: 100%;
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: clamp(4rem, 3rem + 5vw, 8rem) var(--gutter) clamp(3rem, 2rem + 3vw, 5rem);
}
.gz-hero:not(.gz-hero--form) .gz-hero__frame { grid-template-columns: minmax(0, 52rem); }
.gz-hero__content { max-width: 48rem; }
.gz-hero__title {
    margin: 0;
    font-size: var(--t-3xl);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--gz-strong);
    text-wrap: balance;
}
.gz-hero__lead {
    max-width: 36rem;
    margin: 1.4rem 0 0;
    font-size: var(--t-md);
    line-height: 1.6;
    color: var(--gz-text);
}
.gz-hero__actions { margin-block-start: 2rem; }
.gz-hero__readouts { margin-block-start: clamp(2.2rem, 1.5rem + 2vw, 3.5rem); max-width: 40rem; }

.gz-hero__form {
    padding: 1.7rem 1.6rem 1.6rem;
    background:
        linear-gradient(var(--gz-accent), var(--gz-accent)) top left / 4.5rem 3px no-repeat,
        var(--gz-sheen) top / 100% 1px no-repeat,
        rgb(10 11 13 / 0.78);
    backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgb(255 255 255 / 0.1);
}
html[data-garazh-cards="bevel"] .gz-hero__form { border: 0; }
.gz-hero__form-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gz-strong);
}
.gz-hero__form-note { margin: 0.5rem 0 0; color: var(--gz-muted); font-size: 0.88rem; line-height: 1.5; }
.gz-hero__form .cms-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 0.8rem;
    margin-block-start: 1.3rem;
}
.gz-hero__form .cms-form > :is(.cms-form__field--check, .cms-form__actions, .cms-form__field--wide, .cms-hp) { grid-column: 1 / -1; }
.gz-hero__form .cms-form__field { gap: 0.35rem; margin: 0; }
.gz-hero__form .cms-form__input { min-height: 46px; padding: 0.6rem 0.75rem; font-size: 0.92rem; }
.gz-hero__form .cms-form__actions .cms-btn { width: 100%; }
.gz-hero__form .cms-form__actions { margin: 0.2rem 0 0; }

/* 8.2 Guarantees on gauges */
.gz-guar__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gz-guar__item { padding: 1.8rem 1.5rem 1.7rem; }
.gz-gauge {
    position: relative;
    width: 10rem;
    aspect-ratio: 1;
    margin-block-end: 1.2rem;
}
.gz-gauge__svg { width: 100%; height: 100%; transform: rotate(135deg); overflow: visible; }
.gz-gauge__ticks {
    fill: none;
    stroke: color-mix(in srgb, var(--gz-chrome) 45%, transparent);
    stroke-width: 5;
    stroke-dasharray: 1 8;
    stroke-dashoffset: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0.8;
}
.gz-gauge__track,
.gz-gauge__fill { fill: none; stroke-width: 7; stroke-linecap: butt; }
.gz-gauge__track { stroke: var(--gz-line-hi); stroke-dasharray: 212.06 400; }
.gz-gauge__fill { stroke: var(--gz-accent); filter: drop-shadow(0 0 6px var(--gz-accent-glow)); }
.gz-gauge__value {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 1.9rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.05;
    text-align: center;
    color: var(--gz-strong);
    text-transform: uppercase;
}
.gz-guar__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.gz-guar__text { margin: 0.6rem 0 0; color: var(--c-text-muted); line-height: 1.55; font-size: 0.95rem; }

.gz-guar__band {
    position: relative;
    isolation: isolate;
    display: grid;
    margin-block-start: 1rem;
    overflow: hidden;
    background: var(--gz-surface);
    border-left: 3px solid var(--gz-accent);
}
.gz-guar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gz-guar__band--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(6 7 8 / 0.94) 20%, rgb(6 7 8 / 0.55) 70%, rgb(6 7 8 / 0.35));
}
.gz-guar__band-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    padding: clamp(1.8rem, 1.2rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem);
    min-height: 11rem;
}
.gz-guar__note {
    flex: 1 1 26rem;
    max-width: 44rem;
    margin: 0;
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--gz-strong);
}

/* 8.3 Parts and materials */
.gz-mat {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: start;
}
.gz-mat--photo { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.gz-mat__media {
    position: sticky;
    top: 7.5rem;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--gz-surface);
}
.gz-mat__img { width: 100%; height: 100%; object-fit: cover; }
.gz-mat__caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    padding: 2.2rem 1.2rem 1.1rem;
    background: linear-gradient(0deg, rgb(6 7 8 / 0.9), transparent);
    font-family: var(--gz-hud);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gz-strong);
}
.gz-mat__caption::before {
    content: '';
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-inline-end: 0.7rem;
    background: var(--gz-accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--gz-accent);
}
.gz-mat__text { margin: 0 0 1.8rem; font-size: var(--t-md); line-height: 1.6; color: var(--c-text); max-width: 40rem; }
.gz-mat__sheet { border-top: 1px solid var(--c-border-strong); }
.gz-mat__group {
    margin: 1.8rem 0 0.2rem;
    font-family: var(--gz-hud);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gz-accent);
}
.gz-mat__group:first-child { margin-block-start: 1.1rem; }
.gz-mat__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.85rem;
    border-bottom: 1px dashed var(--c-border-strong);
}
.gz-mat__name { margin: 0; color: var(--c-text-strong); font-weight: 600; }
.gz-mat__origin { display: block; margin-block-start: 0.2rem; font-weight: 400; font-size: 0.86rem; color: var(--c-text-muted); }
.gz-mat__spec {
    flex: none;
    margin: 0;
    font-family: var(--gz-hud);
    font-size: 0.86rem;
    color: var(--gz-chrome);
    text-align: end;
}
.gz-mat__points { margin-block-start: 1.8rem; }

/* 8.4 Map and hours */
.gz-loc {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
}
.gz-loc__map {
    position: relative;
    min-height: 26rem;
    overflow: hidden;
    background: var(--gz-sunk);
}
.gz-loc__frame,
.gz-loc__img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.gz-loc__map--embed .gz-loc__frame { filter: grayscale(0.4) contrast(1.05); }
.gz-radar {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 48px),
        radial-gradient(circle at 55% 50%, color-mix(in srgb, var(--gz-accent) 10%, transparent), transparent 55%);
}
.gz-radar__rings {
    position: absolute;
    left: 55%;
    top: 50%;
    width: min(78%, 30rem);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 calc(16.66% - 1px), color-mix(in srgb, var(--gz-chrome) 22%, transparent) calc(16.66% - 1px) 16.66%);
}
.gz-radar__sweep {
    position: absolute;
    left: 55%;
    top: 50%;
    width: min(78%, 30rem);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(from 0deg, color-mix(in srgb, var(--gz-accent) 30%, transparent), transparent 22%);
    animation: gz-sweep 6s linear infinite;
}
@keyframes gz-sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
.gz-radar__roads i {
    position: absolute;
    background: color-mix(in srgb, var(--gz-chrome) 30%, transparent);
}
.gz-radar__roads i:nth-child(1) { left: 0; right: 0; top: 62%; height: 3px; transform: rotate(-8deg); }
.gz-radar__roads i:nth-child(2) { top: 0; bottom: 0; left: 38%; width: 2px; transform: rotate(14deg); }
.gz-radar__roads i:nth-child(3) { left: 30%; right: 0; top: 30%; height: 1px; transform: rotate(22deg); opacity: 0.6; }
.gz-radar__pin {
    position: absolute;
    left: 55%;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--gz-accent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--gz-accent) 25%, transparent), 0 0 30px var(--gz-accent);
}
.gz-loc__coords {
    position: absolute;
    left: 28px;
    bottom: 24px;
    z-index: 3;
    margin: 0;
    font-family: var(--gz-hud);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    color: var(--gz-chrome);
}
.gz-loc__map--embed .gz-loc__coords { display: none; }
.gz-loc__info { padding: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.gz-loc__label {
    margin: 0 0 0.5rem;
    font-family: var(--gz-hud);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gz-accent);
}
.gz-loc__address {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--c-text-strong);
}
.gz-loc__directions { margin: 0.9rem 0 2rem; color: var(--c-text-muted); line-height: 1.6; }
.gz-loc__hours { margin: 0 0 2rem; border-top: 1px solid var(--c-border); }
.gz-loc__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--c-border);
}
.gz-loc__row dt { color: var(--c-text); }
.gz-loc__row dd {
    margin: 0;
    font-family: var(--gz-hud);
    font-weight: 600;
    color: var(--c-text-strong);
    text-align: end;
}
.gz-loc__row small { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 0.8rem; color: var(--c-text-muted); }
.gz-loc__hours-text { margin: 0 0 2rem; font-family: var(--gz-hud); color: var(--c-text-strong); line-height: 1.7; }
.gz-loc__phone { gap: 0.5rem; font-family: var(--gz-hud); font-size: 0.85rem; letter-spacing: 0.02em; }
.gz-loc__phone .cms-icon { width: 1.1em; height: 1.1em; }

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

/* Generic cards of the design system */
body.gz-body .cms-card {
    background: var(--gz-sheen) top / 100% 1px no-repeat, var(--card-bg);
    border-radius: 0;
}
html[data-garazh-cards="bevel"] body.gz-body :is(.cms-review, .cms-calc__inputs, .cms-calc__result, .cms-ptable__card) {
    clip-path: polygon(0 0, calc(100% - var(--gz-cut)) 0, 100% var(--gz-cut), 100% 100%, var(--gz-cut) 100%, 0 calc(100% - var(--gz-cut)));
}

/* Accent instead of «success» green in shared blocks */
body.gz-body .cms-block--stages { --stage-done: var(--gz-accent); --stage-current: var(--gz-accent-hi); }
body.gz-body .cms-block--pricing_table { --ptable-yes: var(--gz-accent); }
body.gz-body .cms-block--pricing_table .cms-ptable__badge { border-radius: 0; }
body.gz-body .cms-stages__status--done { background: color-mix(in srgb, var(--gz-accent) 14%, transparent); color: var(--gz-accent); }
body.gz-body .cms-stages__title { overflow-wrap: normal; hyphens: auto; }

/* Calculator */
body.gz-body .cms-calc__variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.gz-body .cms-calc { gap: 1rem; }
body.gz-body .cms-calc__inputs,
body.gz-body .cms-calc__result { border: 0; padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }
body.gz-body .cms-calc__result {
    background:
        linear-gradient(var(--gz-accent), var(--gz-accent)) top left / 4.5rem 3px no-repeat,
        var(--gz-sheen) top / 100% 1px no-repeat,
        var(--gz-raise);
}
body.gz-body .cms-calc__label,
body.gz-body .cms-calc__breakdown-title,
body.gz-body .cms-calc__total-label,
body.gz-body .cms-calc__send-title {
    font-family: var(--gz-hud);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
body.gz-body .cms-calc__total-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
    letter-spacing: -0.01em;
    color: var(--gz-accent);
    text-shadow: 0 0 30px var(--gz-accent-glow);
}
body.gz-body .cms-calc__number { font-family: var(--gz-hud); font-weight: 600; }
body.gz-body .cms-calc__range { accent-color: var(--gz-accent); }
body.gz-body .cms-calc__scale { font-family: var(--gz-hud); font-size: 0.72rem; color: var(--c-text-faint); }
body.gz-body .cms-calc__variant-card {
    background: var(--gz-sunk);
    border: 1px solid var(--c-border);
    border-radius: 0;
}
body.gz-body .cms-calc__variant-title { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--c-text-strong); }
body.gz-body .cms-calc__variant-price { font-family: var(--gz-hud); color: var(--gz-chrome); }
body.gz-body .cms-calc__variant-text { color: var(--c-text-muted); }
body.gz-body .cms-calc__radio:checked + .cms-calc__variant-card {
    border-color: var(--gz-accent);
    background: color-mix(in srgb, var(--gz-accent) 8%, var(--gz-sunk));
    box-shadow: inset 0 3px 0 var(--gz-accent);
}
body.gz-body .cms-calc__radio:checked + .cms-calc__variant-card .cms-calc__variant-price { color: var(--gz-accent); }
body.gz-body .cms-calc__option { border-color: var(--c-border); border-radius: 0; }
body.gz-body .cms-calc__option-add { font-family: var(--gz-hud); color: var(--gz-chrome); }
body.gz-body .cms-calc__lines { font-family: var(--gz-hud); font-size: 0.84rem; color: var(--c-text); }
body.gz-body .cms-calc__note { color: var(--c-text-muted); font-size: 0.88rem; }

/* Packages comparison (pricing_table) */
body.gz-body .cms-ptable__table { border-color: var(--c-border); }
body.gz-body .cms-ptable__plan-inner { background: var(--c-surface); border-radius: 0; }
body.gz-body .cms-ptable__plan.is-featured .cms-ptable__plan-inner {
    background: linear-gradient(var(--gz-accent), var(--gz-accent)) top / 100% 3px no-repeat, var(--gz-raise);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gz-accent) 45%, transparent);
}
body.gz-body .cms-ptable__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--c-text-strong);
}
body.gz-body .cms-ptable__amount { font-family: var(--font-display); font-weight: 800; color: var(--c-text-strong); }
body.gz-body .cms-ptable__plan.is-featured .cms-ptable__amount { color: var(--gz-accent); }
body.gz-body .cms-ptable__period,
body.gz-body .cms-ptable__old { font-family: var(--gz-hud); font-size: 0.78rem; color: var(--c-text-muted); }
body.gz-body .cms-ptable__badge {
    background: var(--gz-accent);
    color: var(--gz-ink);
    border-radius: 0;
    font-family: var(--gz-hud);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
body.gz-body .cms-ptable__group {
    font-family: var(--gz-hud);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gz-accent);
}
body.gz-body .cms-ptable__row { border-color: var(--c-border); }
body.gz-body .cms-ptable__mark--yes { color: var(--gz-accent); }
body.gz-body .cms-ptable__mark--no { color: var(--c-text-faint); }
body.gz-body .cms-ptable__text { font-family: var(--gz-hud); font-size: 0.84rem; color: var(--c-text-strong); }
body.gz-body .cms-ptable__note { font-size: 0.88rem; color: var(--c-text-muted); }

/* Before and after */
body.gz-body .cms-ba { border-radius: 0; }
body.gz-body .cms-ba__label {
    border-radius: 0;
    background: rgb(6 7 8 / 0.78);
    color: var(--gz-strong);
    font-family: var(--gz-hud);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
body.gz-body .cms-ba__label--after { background: var(--gz-accent); color: var(--gz-ink); }
body.gz-body .cms-ba__handle { background: var(--gz-accent); box-shadow: 0 0 16px var(--gz-accent-glow); }
body.gz-body .cms-ba__knob { background: var(--gz-accent); color: var(--gz-ink); border: 0; box-shadow: 0 0 0 6px rgb(6 7 8 / 0.5); }
body.gz-body .cms-ba-item__caption {
    margin-block-start: 0.9rem;
    font-family: var(--gz-hud);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
}
body.gz-body .cms-ba-item__caption::before { content: '▮ '; color: var(--gz-accent); }

/* Stages */
body.gz-body .cms-stages__total {
    border-radius: 0;
    border-color: var(--c-border);
    background: var(--c-surface);
}
body.gz-body .cms-stages__total-label { font-family: var(--gz-hud); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-muted); }
body.gz-body .cms-stages__total-value { font-family: var(--font-display); font-weight: 800; color: var(--gz-accent); }
body.gz-body .cms-stages__marker {
    border-radius: 0;
    font-family: var(--gz-hud);
    font-weight: 700;
    background: var(--gz-surface);
    border: 1px solid var(--gz-line-hi);
    color: var(--c-text-strong);
}
body.gz-body .cms-stages__item.is-done .cms-stages__marker { background: var(--gz-accent); border-color: var(--gz-accent); color: var(--gz-ink); }
body.gz-body .cms-stages__item.is-current .cms-stages__marker { border-color: var(--gz-accent); color: var(--gz-accent); box-shadow: 0 0 0 4px var(--gz-accent-glow); }
body.gz-body .cms-stages__title { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
body.gz-body .cms-stages__meta { font-family: var(--gz-hud); font-size: 0.78rem; color: var(--gz-chrome); }
body.gz-body .cms-stages__text { color: var(--c-text-muted); }
body.gz-body .cms-stages__result { font-size: 0.88rem; color: var(--c-text); }
body.gz-body .cms-stages__result-label { font-family: var(--gz-hud); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gz-accent); }
body.gz-body .cms-stages__status { border-radius: 0; font-family: var(--gz-hud); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Testimonials */
body.gz-body .cms-review { border: 0; }
body.gz-body .cms-review__text { color: var(--c-text-strong); line-height: 1.6; }
body.gz-body .cms-review__initial { border-radius: 0; background: var(--gz-accent); color: var(--gz-ink); font-family: var(--font-display); font-weight: 800; }
body.gz-body .cms-review__name { color: var(--c-text-strong); font-weight: 600; }
body.gz-body .cms-review__role,
body.gz-body .cms-review__source { font-family: var(--gz-hud); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--c-text-muted); }
body.gz-body .cms-stars { color: var(--gz-accent); }
body.gz-body .cms-rating-summary__value { font-family: var(--font-display); font-weight: 800; color: var(--c-text-strong); }

/* FAQ */
body.gz-body .cms-faq__title { text-transform: uppercase; }
body.gz-body .cms-faq__item { border-color: var(--c-border); }
body.gz-body .cms-faq__title { font-size: var(--t-2xl); }
body.gz-body .cms-faq__question { font-size: 0.95rem; font-weight: 700; color: var(--c-text-strong); }
body.gz-body .cms-faq__question:hover { color: var(--gz-accent); }
body.gz-body .cms-faq__toggle { color: var(--gz-accent); }

/* Stats */
body.gz-body .cms-stat__value,
body.gz-body .cms-stats__value { font-family: var(--font-display); font-weight: 800; color: var(--gz-strong); }

/* Contacts */
body.gz-body .cms-contacts__icon,
body.gz-body .cms-contact__icon { color: var(--gz-accent); }

/* -------------------------------------------------------------------------
   10. Variants — the rectangular cards reset the bevel everywhere.
   ------------------------------------------------------------------------- */

html[data-garazh-cards="plain"] .gz-hero__form { border: 1px solid rgb(255 255 255 / 0.12); }

/* -------------------------------------------------------------------------
   11. Phones and motion
   ------------------------------------------------------------------------- */

@media (max-width: 64rem) {
    .gz-hero__frame { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .gz-hero__form { max-width: 36rem; }
    .gz-mat--photo { grid-template-columns: minmax(0, 1fr); }
    .gz-mat__media { aspect-ratio: 16 / 10; position: relative; top: 0; }
    .gz-loc { grid-template-columns: minmax(0, 1fr); }
    .gz-loc__map { min-height: 20rem; }
}

@media (max-width: 40rem) {
    .gz-hero { min-height: 0; }
    .gz-hero__photo::after {
        background: linear-gradient(0deg, rgb(6 7 8 / 0.96) 35%, rgb(6 7 8 / 0.55) 75%, rgb(6 7 8 / 0.7));
    }
    .gz-hero__frame { padding-block: 4rem 2.5rem; }
    .gz-hero__title { font-size: clamp(1.7rem, 1rem + 5vw, 2.4rem); }
    .gz-hero__form { padding: 1.3rem 1.1rem; }
    .gz-hero__form .cms-form { grid-template-columns: minmax(0, 1fr); }
    .gz-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gz-readout__value { font-size: 1.3rem; }
    .gz-hud-corners i { width: 14px; height: 14px; }
    .gz-gauge { width: 8rem; }
    .gz-mat__row { flex-direction: column; gap: 0.3rem; }
    .gz-mat__spec { text-align: start; }
    .gz-hdr .hdr-logo__tagline { display: none; }
    .cms-section__head .cms-section__title::before { margin-block-end: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gz-radar__sweep { animation: none; }
    .cms-btn { transition: none; }
}