/* =========================================================================
   Сруб — frame houses and saunas turnkey. A northern architecture magazine
   after dark: resin-black ground, linen text, amber only where a window
   glows (buttons, prices, the active step). Literata + Onest, 10px corners,
   hairlines instead of shadows, a full-screen dusk photo, a strip of
   projects you scroll sideways, slow parallax.

   Layers: fonts, tokens, base, buttons, header, sections, footer, own blocks
   (hero, strip, spread), shared blocks re-dressed, design variants.
   Core prints the chosen design values as :root{--srub-…} after this file.
   ========================================================================= */

@font-face {
    font-family: 'Srub Literata';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(../fonts/literata-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: 'Srub Literata';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(../fonts/literata-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: 'Srub Literata';
    font-style: italic;
    font-display: swap;
    font-weight: 200 900;
    src: url(../fonts/literata-cyrillic-wght-italic.woff2) format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Srub Literata';
    font-style: italic;
    font-display: swap;
    font-weight: 200 900;
    src: url(../fonts/literata-latin-wght-italic.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: 'Srub Lora';
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url(/themes/default/assets/fonts/lora-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: 'Srub Lora';
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url(/themes/default/assets/fonts/lora-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: 'Srub Onest';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/themes/default/assets/fonts/onest-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: 'Srub Onest';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/themes/default/assets/fonts/onest-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: 'Srub Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/themes/default/assets/fonts/inter-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: 'Srub Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/themes/default/assets/fonts/inter-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: 'Srub Manrope';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(/themes/default/assets/fonts/manrope-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: 'Srub Manrope';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(/themes/default/assets/fonts/manrope-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;
}

:root {
    --srub-accent: #e0a458;
    --srub-font-display: 'Srub Literata', Georgia, 'Times New Roman', serif;
    --srub-font-body: 'Srub Onest', 'Segoe UI', Arial, system-ui, sans-serif;
    --srub-radius: 10px;
}

/* -------------------------------------------------------------------------
   1. Tokens — the whole site is night
   ------------------------------------------------------------------------- */

:root:root {
    --sr-amber: var(--srub-accent);
    --sr-amber-hi: color-mix(in srgb, var(--sr-amber), #ffffff 18%);
    --sr-amber-deep: color-mix(in srgb, var(--sr-amber), #000000 26%);
    --sr-night: #14181a;
    --sr-night-deep: #0e1112;
    --sr-surface: #1f2527;
    --sr-surface-hi: #272e30;
    --sr-text: #ece6da;
    --sr-muted: #8e968f;
    --sr-line: rgb(236 230 218 / 0.14);
    --sr-line-hi: rgb(236 230 218 / 0.3);
    --sr-r: var(--srub-radius);
    --sr-dusk-a: 0.28;
    --sr-dusk-b: 0.92;

    --c-bg: var(--sr-night);
    --c-surface: var(--sr-surface);
    --c-surface-sunk: var(--sr-night-deep);
    --c-text: var(--sr-text);
    --c-text-strong: #f7f2e8;
    --c-text-muted: #a3aaa3;
    --c-text-faint: var(--sr-muted);
    --c-border: var(--sr-line);
    --c-border-strong: var(--sr-line-hi);
    --c-accent: var(--sr-amber);
    --c-accent-hover: var(--sr-amber-hi);
    --c-accent-contrast: #1a1410;
    --c-accent-soft: color-mix(in srgb, var(--sr-amber) 16%, var(--sr-night));
    --c-link: var(--sr-amber);
    --c-link-hover: var(--sr-amber-hi);
    --c-mark: var(--sr-amber);
    --c-mark-text: var(--sr-amber);
    --c-mark-soft: color-mix(in srgb, var(--sr-amber) 16%, var(--sr-night));
    --c-slab: var(--sr-night);
    --c-slab-text: var(--sr-text);
    --c-slab-muted: var(--sr-muted);
    --c-danger: #e0745a;
    --c-success: #8fbf8a;

    --font-display: var(--srub-font-display);
    --font-ui: var(--srub-font-body);
    --font-prose: var(--font-ui);
    --fw-heading: 400;
    --tr-tight: -0.02em;
    --tr-snug: -0.01em;
    --lh-tight: 1.02;
    --lh-snug: 1.14;
    --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --t-xl: clamp(2rem, 1.4rem + 2.4vw, 3.75rem);
    --t-2xl: clamp(2.6rem, 1.7rem + 3.4vw, 4.8rem);
    --t-3xl: clamp(3rem, 1.6rem + 5.4vw, 6.5rem);

    --r-xs: calc(var(--sr-r) * 0.4);
    --r-sm: calc(var(--sr-r) * 0.8);
    --r-md: var(--sr-r);
    --r-lg: var(--sr-r);
    --r-pill: 999px;
    --r-btn: calc(var(--sr-r) * 0.8);
    --card-radius: var(--sr-r);
    --card-bg: var(--sr-surface);
    --card-border: 1px solid var(--sr-line);
    --card-shadow: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 0 0 1px var(--sr-line);
    --shadow-lift: 0 0 0 1px var(--sr-line-hi);

    --w-container: 78rem;
    --w-wide: 90rem;
    --sp-md: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem);
    --sp-lg: clamp(5rem, 3rem + 7vw, 9.5rem);

    color-scheme: dark;
}

html[data-srub-night="ink"]:root:root {
    --sr-night: #11171d;
    --sr-night-deep: #0b1015;
    --sr-surface: #1a232c;
    --sr-surface-hi: #222d38;
    --sr-muted: #8b97a3;
}

html[data-srub-night="umber"]:root:root {
    --sr-night: #1a1613;
    --sr-night-deep: #120f0d;
    --sr-surface: #251f1a;
    --sr-surface-hi: #2f2721;
    --sr-muted: #9a8f83;
}

html[data-srub-dusk="light"]:root:root { --sr-dusk-a: 0.1; --sr-dusk-b: 0.8; }
html[data-srub-dusk="deep"]:root:root { --sr-dusk-a: 0.42; --sr-dusk-b: 0.97; }

/* Section tones: deeper, a step lighter, and the one amber band. */
.cms-tone-dark:not(#sr) {
    --section-bg: var(--sr-night-deep);
    --c-bg: var(--sr-night-deep);
    --c-surface: var(--sr-surface);
}

.cms-tone-soft:not(#sr),
.cms-tone-accent:not(#sr) {
    --section-bg: var(--sr-surface);
    --c-bg: var(--sr-surface);
    --c-surface: var(--sr-surface-hi);
    --c-surface-sunk: var(--sr-night);
}

.cms-tone-primary:not(#sr) {
    --section-bg: var(--sr-amber);
    --c-bg: var(--sr-amber);
    --c-surface: var(--sr-amber-deep);
    --c-surface-sunk: var(--sr-amber-deep);
    --c-text: #2a1d0e;
    --c-text-strong: #1a1008;
    --c-text-muted: #4b3519;
    --c-text-faint: #5e4524;
    --c-border: rgb(26 16 8 / 0.28);
    --c-border-strong: #1a1008;
    --c-accent: #1a1008;
    --c-accent-hover: #000000;
    --c-accent-contrast: #fbe9cf;
    --c-link: #1a1008;
    --c-mark: #1a1008;
    --c-mark-text: #1a1008;
}

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

body {
    background-color: var(--sr-night);
    font-family: var(--font-ui);
    font-size: var(--t-base);
    line-height: 1.62;
}

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

h3 { font-family: var(--font-ui); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.005em; }

a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

:focus-visible {
    outline: 2px solid var(--sr-amber);
    outline-offset: 3px;
    box-shadow: none;
}

::selection { background: var(--sr-amber); color: #1a1410; }

/* -------------------------------------------------------------------------
   3. Buttons — a flat amber label, or a hairline outline
   ------------------------------------------------------------------------- */

.cms-btn {
    min-height: 52px;
    padding: 0.7rem 1.75rem;
    border-width: 1px;
    border-radius: var(--r-btn);
    font-family: var(--font-ui);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.cms-btn--primary {
    background-color: var(--sr-amber);
    border-color: var(--sr-amber);
    color: #1a1410;
    box-shadow: none;
}

.cms-btn--primary:hover {
    background-color: var(--sr-amber-hi);
    border-color: var(--sr-amber-hi);
    color: #1a1410;
}

.cms-btn--ghost {
    background: transparent;
    border-color: var(--sr-line-hi);
    color: var(--c-text-strong);
}

.cms-btn--ghost:hover {
    background: rgb(236 230 218 / 0.08);
    border-color: var(--c-text-strong);
    color: var(--c-text-strong);
}

.cms-tone-primary .cms-btn--primary {
    background: #1a1008;
    border-color: #1a1008;
    color: #fbe9cf;
}

.cms-tone-primary .cms-btn--primary:hover { background: #000; border-color: #000; }
.cms-tone-primary .cms-btn--ghost { border-color: rgb(26 16 8 / 0.5); color: #1a1008; }
.cms-tone-primary .cms-btn--ghost:hover { background: rgb(26 16 8 / 0.1); border-color: #1a1008; }

html[data-srub-buttons="outline"] .cms-btn--primary {
    background: transparent;
    border-color: var(--sr-amber);
    color: var(--sr-amber);
}

html[data-srub-buttons="outline"] .cms-btn--primary:hover { background: var(--sr-amber); color: #1a1410; }

.sr-btn-dark {
    background-color: var(--sr-amber);
    border-color: var(--sr-amber);
    color: #1a1410;
}

.sr-btn-dark:hover { background: var(--sr-amber-hi); border-color: var(--sr-amber-hi); color: #1a1410; }

.cms-card { border-radius: var(--sr-r); }

input:not([type="checkbox"], [type="radio"], [type="range"]),
select,
textarea {
    border-radius: calc(var(--sr-r) * 0.8) !important;
    background-color: var(--sr-night) !important;
    border-color: var(--sr-line-hi) !important;
    color: var(--c-text-strong);
}

.cms-field__input:focus,
input:not([type="checkbox"], [type="radio"], [type="range"]):focus,
textarea:focus,
select:focus {
    border-color: var(--sr-amber) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sr-amber) 22%, transparent) !important;
    outline: none;
}

.cms-popover__panel {
    border: 1px solid var(--sr-line-hi);
    border-radius: calc(var(--sr-r) * 1.2);
    background: var(--sr-surface);
}

.cms-popover__title { font-family: var(--font-display); font-weight: 400; }

/* -------------------------------------------------------------------------
   4. Sections: heads on the left, a hairline with a number-less amber tick
   ------------------------------------------------------------------------- */

.cms-section__head,
.cms-section__head--left,
.cms-section__head--center {
    max-width: none;
    margin-inline: 0;
    margin-block-end: clamp(2rem, 1.4rem + 2.4vw, 3.6rem);
    text-align: left;
    display: grid;
    gap: var(--s-4);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
    .cms-section__head:has(.cms-section__subtitle) {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        align-items: end;
        column-gap: clamp(2rem, 6vw, 7rem);
    }
}

.cms-section__title {
    max-width: 18ch;
    margin: 0;
    font-size: var(--t-xl);
    font-weight: 400;
    line-height: 1.04;
}

.cms-section__subtitle {
    max-width: 34rem;
    margin: 0;
    color: var(--c-text-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.cms-section__head:has(.cms-section__title)::before {
    content: "";
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    height: 1px;
    margin-block-end: var(--s-3);
    background: linear-gradient(90deg, var(--sr-amber) 0 3.5rem, var(--sr-line) 3.5rem);
}

/* -------------------------------------------------------------------------
   5. Header — floats over the dusk photo, goes solid night on scroll
   ------------------------------------------------------------------------- */

.site-header {
    background: var(--sr-night);
    border-bottom: 1px solid var(--sr-line);
    box-shadow: none;
    --c-text-strong: #f7f2e8;
}

.site-header--overlay,
.site-header--overlay.is-scrolled {
    border-bottom-color: transparent;
}

.site-header--overlay { background: linear-gradient(180deg, rgb(10 13 14 / 0.72), transparent); }
.site-header--overlay.is-scrolled { background: var(--sr-night); border-bottom-color: var(--sr-line); }
.site-header--sticky.is-scrolled { box-shadow: none; }

html[data-srub-header="solid"] .site-header--overlay {
    background: var(--sr-night);
    margin-bottom: 0;
}

.hdr-row--top {
    background: var(--sr-night-deep);
    border-bottom: 1px solid var(--sr-line);
    color: var(--c-text-muted);
    font-size: 0.82rem;
}

.hdr-row--top .hdr-row__inner { min-height: 2.4rem; }
.hdr-row--top a { color: var(--c-text); text-decoration: none; }
.hdr-row--top a:hover { color: var(--sr-amber); }
.hdr-row--top .cms-icon { color: var(--sr-amber); }

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

.sr-logo { gap: 12px; color: var(--sr-amber); }
.sr-logo__mark { flex: none; width: 2.4rem; height: auto; color: var(--sr-amber); }

.hdr-logo__name {
    color: var(--c-text-strong);
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.01em;
    line-height: 1;
}

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

.hdr-row--main .hdr-zone--center { justify-content: center; }
.hdr-nav__list { gap: 0.4rem; }

.hdr-nav__link {
    position: relative;
    padding: 0.6rem 0.8rem;
    border-radius: 0;
    color: var(--c-text-strong);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    background: none;
}

.hdr-nav__link::after {
    content: "";
    position: absolute;
    inset: auto 0.8rem 0.3rem;
    height: 1px;
    background: var(--sr-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.hdr-nav__link:hover,
.hdr-nav__link.is-active { background: none; color: var(--c-text-strong); }
.hdr-nav__link:hover::after,
.hdr-nav__link.is-active::after { transform: scaleX(1); }

.hdr-phone__number {
    color: var(--c-text-strong);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
}

.hdr-phone__number:hover { color: var(--sr-amber); }
.hdr-phone__caption { color: var(--c-text-muted); font-size: 0.76rem; }
.hdr-button.cms-btn { min-height: 46px; padding-inline: 1.3rem; border-radius: var(--r-btn); }

.hdr-sub__list {
    border: 1px solid var(--sr-line-hi);
    border-radius: var(--sr-r);
    background: var(--sr-surface);
    box-shadow: none;
    --c-text: var(--sr-text);
    --c-text-strong: #f7f2e8;
}

.site-header--overlay .hdr-sub {
    --c-text: var(--sr-text);
    --c-text-strong: #f7f2e8;
    --c-text-muted: #a3aaa3;
    --c-surface-sunk: var(--sr-surface-hi);
    --c-border: var(--sr-line);
}

.hdr-sub__link { border-radius: calc(var(--sr-r) * 0.7); }
.hdr-sub__link:hover { background: var(--sr-surface-hi); color: var(--sr-amber); }

.hdr-icon-btn, .hdr-burger { border-radius: var(--sr-r) !important; border-color: var(--sr-line-hi); }
.hdr-drawer { background: var(--sr-night); color: var(--sr-text); }
.hdr-drawer__head { border-bottom: 1px solid var(--sr-line); }

/* -------------------------------------------------------------------------
   6. Footer — a site-visit band, then night columns and a roof line
   ------------------------------------------------------------------------- */

.sr-prefooter {
    position: relative;
    background: var(--sr-surface);
    border-block: 1px solid var(--sr-line);
    color: var(--sr-text);
}

.sr-prefooter__inner {
    display: grid;
    gap: var(--s-6);
    align-items: end;
    max-width: var(--w-container);
    margin-inline: auto;
    padding: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem) var(--s-5);
}

@media (min-width: 62rem) {
    .sr-prefooter__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 7rem); }
}

.sr-prefooter__kicker {
    margin: 0 0 var(--s-3);
    color: var(--sr-amber);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sr-prefooter__title {
    max-width: 16ch;
    margin: 0;
    color: #f7f2e8;
    font-size: clamp(2.2rem, 1.5rem + 3vw, 4.2rem);
    font-weight: 400;
    line-height: 1.02;
}

.sr-prefooter__lead { max-width: 34rem; margin: var(--s-4) 0 0; color: var(--c-text-muted); font-size: 1.0625rem; }
.sr-prefooter__side { display: grid; gap: var(--s-3); justify-items: start; }

.sr-prefooter__phone {
    color: #f7f2e8;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
    font-style: italic;
    line-height: 1.05;
    text-decoration: none;
    white-space: nowrap;
}

.sr-prefooter__phone:hover { color: var(--sr-amber); }
.sr-prefooter__hours { margin: 0; color: var(--c-text-muted); font-size: 0.9rem; }

.sr-footer {
    position: relative;
    background: var(--sr-night-deep);
    color: var(--c-text-muted);
}

.sr-footer .ftr-col__title {
    color: var(--c-text-strong);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sr-footer a { color: var(--sr-text); text-decoration: none; }
.sr-footer a:hover { color: var(--sr-amber); }
.sr-footer .ftr-brand__name { font-family: var(--font-display); font-size: 1.6rem; font-style: italic; color: var(--c-text-strong); }
.sr-footer .ftr-bottom { border-top: 1px solid var(--sr-line); }
.sr-footer .ftr-contacts__phone a { font-family: var(--font-display); font-size: 1.25rem; }

.sr-footer__roof {
    display: block;
    height: 14px;
    background:
        linear-gradient(135deg, transparent 50%, var(--sr-night) 50%) 0 0 / 28px 14px repeat-x,
        linear-gradient(225deg, transparent 50%, var(--sr-night) 50%) 14px 0 / 28px 14px repeat-x,
        var(--sr-line);
    opacity: 0.9;
}

/* -------------------------------------------------------------------------
   7. Hero — the house at dusk, the whole screen
   ------------------------------------------------------------------------- */

.cms-section:has(.sr-hero) { overflow: clip; }
.cms-section:has(.sr-hero) .cms-section__inner { max-width: none; padding: 0; }

.sr-hero {
    position: relative;
    min-height: max(100svh, 40rem);
    display: grid;
    align-items: end;
    background: var(--sr-night);
    overflow: clip;
}

.sr-hero__bg { position: absolute; inset: 0; overflow: hidden; }

.sr-hero__img {
    position: absolute;
    inset: -4% 0 auto;
    width: 100%;
    height: 112%;
    object-fit: cover;
    object-position: 50% 60%;
}

.sr-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(10 13 14 / var(--sr-dusk-a)) 0, transparent 22%, transparent 38%, rgb(20 24 26 / 0.55) 68%, rgb(20 24 26 / var(--sr-dusk-b)) 100%),
        linear-gradient(90deg, rgb(20 24 26 / 0.5), transparent 60%);
}

.sr-hero__inner {
    position: relative;
    display: grid;
    gap: var(--s-7);
    align-items: end;
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
    padding: 8rem clamp(1.25rem, 0.5rem + 3.4vw, 3.5rem) clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
}

@media (min-width: 62rem) {
    .sr-hero__inner { grid-template-columns: minmax(0, 1fr) 22.5rem; gap: clamp(2rem, 5vw, 6rem); }
}

.sr-hero__eyebrow {
    margin: 0 0 var(--s-4);
    color: var(--sr-text);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sr-hero__title {
    max-width: 11ch;
    margin: 0;
    color: #f7f2e8;
    font-size: clamp(3rem, 1.2rem + 6.5vw, 6.5rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.sr-hero__meta {
    margin: var(--s-5) 0 0;
    color: var(--sr-amber);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
    font-style: italic;
}

.sr-hero__lead { max-width: 30rem; margin: var(--s-3) 0 0; color: #cfc9bd; font-size: 1.0625rem; }
.sr-hero__actions { margin-block-start: var(--s-6); }

.sr-pick {
    padding: var(--s-5);
    border: 1px solid var(--sr-line-hi);
    border-radius: calc(var(--sr-r) * 1.2);
    background: var(--sr-surface);
    display: grid;
    gap: var(--s-4);
}

.sr-pick__title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.sr-pick__list { display: grid; margin: 0; padding: 0; list-style: none; }
.sr-pick__row { border-top: 1px solid var(--sr-line); }
.sr-pick__row:last-child { border-bottom: 1px solid var(--sr-line); }

.sr-pick__link,
.sr-pick__row > .sr-pick__name {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 0.85rem 0;
    color: var(--c-text-strong);
    text-decoration: none;
}

.sr-pick__name { font-weight: 500; }
.sr-pick__value { color: var(--sr-amber); font-family: var(--font-display); font-size: 1.1rem; white-space: nowrap; }
.sr-pick__link:hover .sr-pick__name { text-decoration: underline; text-underline-offset: 0.25em; }
.sr-pick .cms-btn { width: 100%; }

/* Slow parallax (CSS scroll-driven), static without support or by choice. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        html:not([data-srub-parallax="off"]) .sr-hero__img {
            animation: sr-drift linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 100vh;
        }

        html:not([data-srub-parallax="off"]) .sr-spread__img {
            animation: sr-drift-in linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
    }
}

@keyframes sr-drift { from { transform: translateY(0); } to { transform: translateY(60px); } }
@keyframes sr-drift-in { from { transform: translateY(-48px); } to { transform: translateY(48px); } }

/* -------------------------------------------------------------------------
   8. Project strip — a row you scroll sideways
   ------------------------------------------------------------------------- */

.cms-section:has(.sr-strip) { overflow: clip; }
.cms-section:has(.sr-strip) .cms-section__inner { max-width: none; padding-inline: 0; }
.cms-section:has(.sr-strip) .cms-section__head {
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 0.5rem + 3.4vw, 3.5rem);
}

.cms-block--srub_strip .sr-strip__track {
    display: flex;
    gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
    margin: 0;
    padding: 0 clamp(1.25rem, 0.5rem + 3.4vw, 3.5rem) var(--s-5);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(1.25rem, 0.5rem + 3.4vw, 3.5rem);
    scrollbar-width: thin;
    scrollbar-color: var(--sr-amber) var(--sr-line);
}

@media (min-width: 96rem) {
    .cms-block--srub_strip .sr-strip__track { padding-inline: calc((100vw - 90rem) / 2 + 3.5rem); scroll-padding-inline: calc((100vw - 90rem) / 2 + 3.5rem); }
}

.sr-strip__track:focus-visible { outline-offset: -3px; }

.sr-card {
    position: relative;
    flex: 0 0 clamp(17.5rem, 78vw, 31rem);
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

.sr-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--sr-r);
    background: var(--sr-surface);
}

.sr-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sr-card:hover .sr-card__img { transform: scale(1.04); }

.sr-card__badge {
    position: absolute;
    inset: 0.9rem auto auto 0.9rem;
    color: #f7f2e8;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.7);
}

.sr-card__title {
    margin: var(--s-4) 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.sr-card__link { color: var(--c-text-strong); text-decoration: none; }
.sr-card__link::after { content: ""; position: absolute; inset: 0; }
.sr-card__link:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

.sr-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0;
    margin: var(--s-2) 0 0;
    color: var(--c-text-muted);
    font-size: 0.9rem;
}

.sr-card__specs span + span::before { content: "·"; margin-inline: 0.55em; color: var(--sr-line-hi); }

.sr-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin-block-start: auto;
    padding-block-start: var(--s-3);
}

.sr-card .cat-price,
.sr-card [class*="price"] { font-family: var(--font-display); font-size: 1.45rem; color: var(--sr-amber); line-height: 1.1; }

.sr-card__btn {
    position: relative;
    z-index: 1;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-text-strong);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--sr-line-hi);
    text-underline-offset: 0.3em;
    cursor: pointer;
}

.sr-card__btn:hover { color: var(--sr-amber); text-decoration-color: var(--sr-amber); }

.sr-card--more { flex-basis: clamp(12rem, 40vw, 16rem); justify-content: center; }

.sr-card__all {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-3);
    height: 100%;
    min-height: 14rem;
    padding: var(--s-5);
    border: 1px solid var(--sr-line-hi);
    border-radius: var(--sr-r);
    color: var(--c-text-strong);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.15;
    text-decoration: none;
    transition: border-color 0.25s, color 0.25s;
}

.sr-card__all .cms-icon { width: 2rem; height: 2rem; color: var(--sr-amber); }
.sr-card__all:hover { border-color: var(--sr-amber); color: var(--sr-amber); }

/* -------------------------------------------------------------------------
   9. Photo spread — a quiet panel over a wide photograph
   ------------------------------------------------------------------------- */

.cms-section:has(.sr-spread) { overflow: clip; }
.cms-section:has(.sr-spread) .cms-section__inner { max-width: none; padding: 0; }

.sr-spread {
    position: relative;
    display: grid;
    align-items: center;
    min-height: clamp(34rem, 90svh, 56rem);
    overflow: clip;
    background: var(--sr-night-deep);
}

.sr-spread__bg { position: absolute; inset: 0; overflow: hidden; }

.sr-spread__img {
    position: absolute;
    inset: -6% 0;
    width: 100%;
    height: 112%;
    object-fit: cover;
}

.sr-spread__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(14 17 18 / 0.92) 0, rgb(14 17 18 / 0.7) 38%, rgb(14 17 18 / 0.1) 75%);
}

.sr-spread--right .sr-spread__bg::after { background: linear-gradient(270deg, rgb(14 17 18 / 0.92) 0, rgb(14 17 18 / 0.7) 38%, rgb(14 17 18 / 0.1) 75%); }

.sr-spread__inner {
    position: relative;
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
    padding: var(--sp-md) clamp(1.25rem, 0.5rem + 3.4vw, 3.5rem);
}

.sr-spread--right .sr-spread__panel { margin-inline-start: auto; }
.sr-spread__panel { max-width: 34rem; display: grid; gap: var(--s-4); justify-items: start; }

.sr-spread__eyebrow {
    margin: 0;
    color: #d6d0c3;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sr-spread__title { margin: 0; color: #f7f2e8; font-size: var(--t-xl); line-height: 1.03; }
.sr-spread__lead { margin: 0; color: #d6d0c3; font-size: 1.125rem; }
.sr-spread__text { display: grid; gap: var(--s-3); color: #d6d0c3; }
.sr-spread__text p { margin: 0; }

.sr-spread__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5) var(--s-7);
    margin: var(--s-2) 0 var(--s-2);
    padding: var(--s-4) 0 0;
    border-top: 1px solid var(--sr-line-hi);
    list-style: none;
    width: 100%;
}

.sr-spread__fact { display: grid; gap: 0.15rem; }

.sr-spread__fact-value {
    color: #f7f2e8;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem);
    font-style: italic;
    line-height: 1;
}

.sr-spread__fact-label { color: #b9b4a8; font-size: 0.88rem; }

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

/* Stages: a vertical line of weeks, the active step in amber. */
.cms-stages__item { border-radius: var(--sr-r); }

.cms-stages--timeline .cms-stages__list,
.cms-stages--steps .cms-stages__list { counter-reset: none; }

.cms-stages__marker {
    border: 1px solid var(--sr-line-hi);
    background: var(--sr-night);
    color: var(--c-text-strong);
    font-family: var(--font-display);
    font-style: italic;
    box-shadow: none;
}

.cms-stages__item.is-done .cms-stages__marker {
    border-color: var(--sr-amber);
    background: var(--sr-night);
    color: var(--sr-amber);
}

.cms-stages__item.is-current .cms-stages__marker {
    border-color: var(--sr-amber);
    background: var(--sr-amber);
    color: #1a1410;
}

.cms-stages__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); font-weight: 400; }

.cms-stages__meta li:first-child {
    color: var(--sr-amber);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-style: italic;
}

.cms-stages__item.is-current { border-color: var(--sr-amber); }
.cms-stages__text { color: var(--c-text-muted); }
.cms-stages__total-value { font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* Calculator: a surface with an antiqua total. */
.cms-block--calculator .cms-calc__inputs,
.cms-block--calculator .cms-calc__result {
    border: 1px solid var(--sr-line);
    border-radius: calc(var(--sr-r) * 1.2);
    background: var(--sr-surface);
    box-shadow: none;
}

.cms-calc__total,
.cms-calc__amount,
.cms-calc__value {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
}

.cms-block--calculator .cms-calc__variant-card { background: var(--sr-night); border-radius: var(--sr-r); border-color: var(--sr-line); }
.cms-block--calculator .cms-calc__radio:checked + .cms-calc__variant-card { border-color: var(--sr-amber); background: color-mix(in srgb, var(--sr-amber) 9%, var(--sr-night)); }

/* Objects map: night plan, amber points. */
.cms-objmap__canvas { border: 1px solid var(--sr-line); border-radius: calc(var(--sr-r) * 1.2); overflow: hidden; background: var(--sr-night-deep); }
.cms-objmap__point { background: var(--sr-amber); border-color: var(--sr-night); color: #1a1410; font-weight: 700; }
.cms-objmap__item { border-radius: var(--sr-r); border-color: var(--sr-line); background: var(--sr-surface); }
.cms-objmap__chip { border-radius: var(--sr-r); }

/* Reviews: wide italic quotes, no cards. */
.cms-block--testimonials .cms-testimonial,
.cms-block--testimonials .cms-card {
    background: transparent;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--sr-line-hi);
    box-shadow: none;
}

.cms-block--testimonials blockquote,
.cms-testimonial__text {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
    font-style: italic;
    line-height: 1.4;
}

/* Pricing table and FAQ: hairlines. */
.cms-ptable__plan,
.cms-ptable__col { border-radius: var(--sr-r); }
.cms-faq__item { border-color: var(--sr-line); }
.cms-faq__question { font-family: var(--font-display); font-size: 1.25rem; }

/* Media + text pictures: soft corners. */
.cms-media-text__image img,
.cms-block--media_text img { border-radius: var(--sr-r); }

/* -------------------------------------------------------------------------
   11. Design variants (theme.json → design.controls)
   ------------------------------------------------------------------------- */

html[data-srub-density="compact"]:root:root {
    --sp-md: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
    --sp-lg: clamp(3.25rem, 2.2rem + 4.4vw, 6rem);
}

@media (max-width: 40rem) {
    .sr-hero { min-height: max(100svh, 36rem); }
    .sr-hero__inner { padding-top: 6rem; gap: var(--s-6); }
    .sr-hero__title { font-size: clamp(2.6rem, 14vw, 3.6rem); }
    .sr-spread__bg::after,
    .sr-spread--right .sr-spread__bg::after { background: linear-gradient(180deg, rgb(14 17 18 / 0.5), rgb(14 17 18 / 0.92)); }
    .sr-prefooter__phone { white-space: normal; }
}