/* ==========================================================================
   Sodix — site styles.

   Written by hand, no build step. Section order:
     1. Fonts
     2. Tokens
     3. Reset
     4. Layout primitives
     5. Components
     6. Page sections
     7. Responsive

   2026 redesign: general-contractor positioning. Always-dark header, a
   full-bleed hero with a counter strip, mono figures on every card, hairline
   grids instead of drop shadows.
   ========================================================================== */

/* 1. Fonts ================================================================= */

@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/golos-text-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/golos-text-latin.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+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/onest-latin.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+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin.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+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens ================================================================ */

:root {
    --ink: #0e1c2b;
    --blue-700: #16324f;
    --blue-500: #2c5c96;
    --blue-300: #6f92bd;
    --blue-200: #b7c8dd;
    --blue-100: #e3eaf3;
    --concrete: #f1f2f0;
    --white: #ffffff;
    --amber: #f2a20c;

    --text: var(--ink);
    --text-muted: #4a5b6d;
    --text-soft: #5b6b7c;
    --text-invert: #ffffff;
    --border: #d8dee6;
    --hairline: rgba(255, 255, 255, 0.14);

    --font-display: 'Golos Text', 'Segoe UI', sans-serif;
    --font-body: 'Onest', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    --step-0: 1rem;
    --step-1: clamp(1.06rem, 1rem + 0.3vw, 1.19rem);
    --step-2: clamp(1.3rem, 1.15rem + 0.6vw, 1.63rem);
    --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
    --step-4: clamp(2.1rem, 1.4rem + 3.2vw, 3.88rem);
    --step-5: clamp(2.6rem, 1.5rem + 5vw, 5.75rem);

    --space-1: 0.375rem;
    --space-2: 0.75rem;
    --space-3: 1.25rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: clamp(3.5rem, 6vw, 6rem);

    --header-h: 4.5rem;
    --radius: 3px;
    --container: 1280px;
}

/* 3. Reset ================================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    background: var(--white);
    color: var(--text);
    font: 400 var(--step-0)/1.6 var(--font-body);
    -webkit-font-smoothing: antialiased;
}

img, svg, iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

ul, ol {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, textarea {
    font: inherit;
    color: inherit;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /* iteration-count is not optional here: 0.01ms on an infinite loop is not
       a stop, it is a strobe. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 4. Layout primitives ===================================================== */

.container {
    width: min(100% - 2 * var(--space-3), var(--container));
    margin-inline: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 100;
    padding: var(--space-2) var(--space-3);
    background: var(--amber);
    color: var(--ink);
    font-weight: 600;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

.scroll-sentinel {
    display: block;
    height: 1px;
}

.section {
    padding-block: var(--space-6);
}

.section--flush-top {
    padding-top: 0;
}

.section--concrete {
    background: var(--concrete);
}

.section--ink {
    background: var(--ink);
    color: var(--text-invert);
}

.section--blue {
    background: var(--blue-700);
    color: var(--text-invert);
}

.section__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-5);
}

.section__eyebrow {
    margin-bottom: var(--space-2);
    color: var(--blue-500);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section--ink .section__eyebrow,
.section--blue .section__eyebrow,
.page-hero__eyebrow {
    color: var(--amber);
}

.section__title {
    font-size: var(--step-3);
}

.section__title--ruled::after {
    display: block;
    width: 3.5rem;
    height: 3px;
    margin-top: var(--space-3);
    background: var(--amber);
    content: '';
}

.section__lead {
    max-width: 62ch;
    margin-top: var(--space-3);
    color: var(--text-muted);
    font-size: var(--step-1);
}

.section--ink .section__lead,
.section--blue .section__lead {
    color: var(--blue-200);
}

/* Two-column editorial split: sticky-ish aside, wide body. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-6);
    align-items: start;
}

.split--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

.split--middle {
    align-items: center;
}

.split__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    object-fit: cover;
}

.prose {
    display: grid;
    gap: var(--space-3);
    color: var(--text-muted);
    font-size: var(--step-1);
}

.prose__image {
    width: 100%;
    margin-top: var(--space-2);
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    object-fit: cover;
}

.link-mono {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--amber);
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

[id] {
    scroll-margin-top: calc(var(--header-h) + var(--space-3));
}

/* 5. Components ============================================================ */

/* --- Header --------------------------------------------------------------- */

/* Always solid: the hero is a photograph, and a transparent header over it
   was unreadable at the top of the scroll. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ink);
    border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--header-h);
}

.site-header__logo img {
    width: 118px;
    height: auto;
}

.site-header__actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-left: auto;
}

.site-header__phone {
    color: var(--text-invert);
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
}

.site-header__phone:hover {
    color: var(--amber);
}

/* --- Navigation ----------------------------------------------------------- */

.nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.nav__list a {
    position: relative;
    padding-block: var(--space-1);
    color: var(--text-invert);
    font-size: 0.88rem;
}

.nav__list a::after {
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s;
    content: '';
}

.nav__list a:hover::after {
    transform: scaleX(1);
}

.nav-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 22px;
    height: 2px;
    margin-inline: auto;
    background: var(--text-invert);
    transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: '';
}

.nav-toggle__bars::before {
    transform: translateY(-7px);
}

.nav-toggle__bars::after {
    transform: translateY(5px);
}

[aria-expanded='true'] .nav-toggle__bars {
    background: transparent;
}

[aria-expanded='true'] .nav-toggle__bars::before {
    transform: rotate(45deg);
}

[aria-expanded='true'] .nav-toggle__bars::after {
    transform: translateY(-2px) rotate(-45deg);
}

/* --- Buttons -------------------------------------------------------------- */

.button {
    display: inline-block;
    padding: 0.95rem 1.9rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--text-invert);
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.button:hover {
    border-color: var(--blue-500);
    background: var(--blue-500);
}

.button--sm {
    padding: 0.7rem 1.25rem;
    font-size: 0.86rem;
}

.button--lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.button--accent {
    border-color: var(--amber);
    background: var(--amber);
    color: var(--ink);
}

.button--accent:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--text-invert);
}

.button--ghost {
    border-color: rgba(255, 255, 255, 0.35);
    background: none;
    color: var(--text-invert);
}

.button--ghost:hover {
    border-color: var(--text-invert);
    background: rgba(255, 255, 255, 0.1);
}

.button--ink {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--text-invert);
}

.button[disabled] {
    opacity: 0.55;
    cursor: progress;
}

/* --- Specs strip (the signature element) ---------------------------------- */

.specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.specs__item {
    position: relative;
    color: var(--blue-500);
}

.specs__item + .specs__item::before {
    position: absolute;
    left: calc(var(--space-3) / -2);
    color: var(--border);
    content: '·';
}

.specs--card {
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: 0.72rem;
}

/* Big figures under a page-hero heading. */
.figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    margin-top: var(--space-5);
    background: var(--hairline);
    border: 1px solid var(--hairline);
}

.figures__item {
    padding: var(--space-3) var(--space-3);
    background: var(--ink);
    color: var(--text-invert);
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 500;
}

/* --- Object card ---------------------------------------------------------- */

.objects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-3);
}

.objects-grid__cell--wide {
    grid-column: span 2;
}

.object-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
}

.object-card:hover {
    border-color: var(--blue-500);
    transform: translateY(-3px);
}

.object-card--current {
    border-color: var(--amber);
}

.object-card--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.object-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--blue-100);
    overflow: hidden;
}

.object-card--featured .object-card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 300px;
}

.object-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.object-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
}

.object-card--featured .object-card__body {
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
}

.object-card__badge {
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 2px;
    background: var(--amber);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.object-card__title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
}

.object-card--featured .object-card__title {
    font-size: var(--step-2);
    font-weight: 700;
}

.object-card__address {
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* --- Partner row ---------------------------------------------------------- */

.partner-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1px;
    margin-top: var(--space-5);
    background: #e6e8ea;
    border: 1px solid #e6e8ea;
}

.partner-row li {
    display: grid;
    place-items: center;
    min-height: 110px;
    padding: var(--space-3);
    background: var(--white);
}

.partner-row img {
    max-width: 100%;
    max-height: 52px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.2s, opacity 0.2s;
}

.partner-row img:hover {
    filter: none;
    opacity: 1;
}

.partner-row--compact {
    grid-template-columns: repeat(auto-fit, minmax(110px, 130px));
    margin-top: var(--space-2);
    background: none;
    border: 0;
}

.partner-row--compact li {
    min-height: 0;
    padding: 0;
}

/* --- Gallery -------------------------------------------------------------- */

.gallery__track {
    display: flex;
    gap: var(--space-2);
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.gallery__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
}

.gallery__link {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    background: var(--blue-100);
    overflow: hidden;
}

.gallery__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hint that the frame opens full screen. */
.gallery__link::after {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 2px;
    background: rgba(14, 28, 43, 0.65);
    color: var(--white);
    font-size: 1.05rem;
    opacity: 0;
    transition: opacity 0.2s;
    content: '\26F6';
}

.gallery__link:hover::after,
.gallery__link:focus-visible::after {
    opacity: 1;
}

.gallery__caption {
    padding-top: var(--space-2);
    color: var(--text-soft);
    font-size: 0.88rem;
}

/* Autoplay progress: site.js sets --gallery-duration and toggles is-running. */
.gallery__progress {
    height: 3px;
    background: rgba(14, 28, 43, 0.12);
}

.gallery__progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--amber);
}

.gallery.is-running .gallery__progress span {
    width: 100%;
    transition: width var(--gallery-duration, 6s) linear;
}

.gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.gallery__thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: none;
    cursor: pointer;
    opacity: 0.6;
    overflow: hidden;
    transition: opacity 0.2s, border-color 0.2s;
}

.gallery__thumb img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.gallery__thumb:hover,
.gallery__thumb[aria-current='true'] {
    border-color: var(--amber);
    opacity: 1;
}

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
    width: min(94vw, 1400px);
    max-width: none;
    max-height: 94vh;
    padding: var(--space-3);
    border: 0;
    background: var(--ink);
    color: var(--text-invert);
}

.lightbox::backdrop {
    background: rgba(14, 28, 43, 0.94);
}

.lightbox__figure {
    margin: 0;
}

.lightbox__img {
    width: 100%;
    max-height: 82vh;
    object-fit: contain;
}

.lightbox__caption {
    padding-top: var(--space-2);
    color: var(--blue-200);
    font-size: 0.9rem;
    text-align: center;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-invert);
    cursor: pointer;
}

.lightbox__close::before,
.lightbox__nav::before {
    display: block;
    font-size: 1.5rem;
    line-height: 1;
}

.lightbox__close {
    top: var(--space-2);
    right: var(--space-2);
}

.lightbox__close::before {
    content: '\00d7';
}

.lightbox__nav {
    top: 50%;
    translate: 0 -50%;
}

.lightbox__nav--prev {
    left: var(--space-2);
}

.lightbox__nav--prev::before {
    content: '\2039';
}

.lightbox__nav--next {
    right: var(--space-2);
}

.lightbox__nav--next::before {
    content: '\203a';
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background: var(--amber);
    color: var(--ink);
}

/* --- Tabs ----------------------------------------------------------------- */

.tabs {
    display: flex;
    gap: var(--space-1);
}

.tabs__btn {
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.tabs__btn[aria-selected='true'] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--text-invert);
}

/* --- Form ----------------------------------------------------------------- */

.contact-form {
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
}

.contact-form__title {
    margin-bottom: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
}

.contact-form__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    align-items: end;
}

.field {
    display: block;
}

.field--wide {
    grid-column: 1 / -1;
}

.field__label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--text-soft);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.field input,
.field textarea {
    width: 100%;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
}

.field input:focus,
.field textarea:focus {
    border-color: var(--blue-500);
}

.field textarea {
    resize: vertical;
}

.file-field input[type='file'] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.file-field__control {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: 0.7rem 0.95rem;
    border: 1px dashed var(--blue-300);
    border-radius: var(--radius);
}

.file-field__name {
    color: var(--text-soft);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.contact-form__error {
    grid-column: 1 / -1;
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--amber);
    background: var(--concrete);
    font-size: 0.9rem;
}

.contact-form__thanks-title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
}

/* --- Contact details ------------------------------------------------------ */

.contact-details {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.contact-details__item {
    display: grid;
    gap: var(--space-1);
    padding-left: var(--space-3);
    border-left: 2px solid var(--blue-100);
}

.contact-details__label {
    margin-bottom: var(--space-1);
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-details__item--phone a {
    font-family: var(--font-mono);
    font-size: var(--step-2);
    font-weight: 500;
}

.contact-details__item a:hover {
    color: var(--blue-500);
}

/* 6. Page sections ========================================================= */

/* --- Homepage hero -------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--ink);
    color: var(--text-invert);
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
}

.hero::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
    var(--ink) 8%,
    rgba(14, 28, 43, 0.86) 45%,
    rgba(14, 28, 43, 0.45) 100%);
    content: '';
}

.hero__inner,
.hero__counters {
    position: relative;
    z-index: 1;
}

.hero__inner {
    padding-block: var(--space-6);
}

.hero__eyebrow {
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero__title {
    max-width: 16ch;
    margin-top: var(--space-4);
    font-size: var(--step-5);
    font-weight: 900;
    letter-spacing: -0.035em;
}

.hero__lead {
    max-width: 52ch;
    margin-top: var(--space-4);
    color: var(--blue-200);
    font-size: var(--step-1);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.hero__counters {
    border-top: 1px solid var(--hairline);
}

.counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.counters__item {
    padding: var(--space-4) var(--space-3);
    border-right: 1px solid var(--hairline);
}

.counters__item:first-child {
    padding-left: 0;
}

.counters__item:last-child {
    padding-right: 0;
    border-right: 0;
}

.counters__value {
    display: block;
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.counters__label {
    display: block;
    margin-top: var(--space-2);
    color: #8fa8c4;
    font-size: 0.82rem;
}

/* --- Inner page hero ------------------------------------------------------ */

.page-hero {
    position: relative;
    background: var(--ink);
    color: var(--text-invert);
    overflow: hidden;
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.34;
}

.page-hero::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
    var(--ink) 10%, rgba(14, 28, 43, 0.72) 100%);
    content: '';
}

.page-hero--object::after {
    background: linear-gradient(180deg,
    rgba(14, 28, 43, 0.9) 0%,
    rgba(14, 28, 43, 0.72) 50%,
    var(--ink) 100%);
}

.page-hero--flat::after {
    background: none;
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    padding-block: var(--space-6);
}

.page-hero__badge {
    display: inline-block;
    margin-top: var(--space-4);
    padding: 6px 12px;
    border-radius: 2px;
    background: var(--amber);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-hero__title {
    max-width: 20ch;
    margin-top: var(--space-3);
    font-size: var(--step-4);
    font-weight: 900;
    letter-spacing: -0.03em;
}

.page-hero__lead {
    max-width: 60ch;
    margin-top: var(--space-3);
    color: var(--blue-200);
    font-size: var(--step-1);
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: #8fa8c4;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.breadcrumbs__current {
    color: var(--amber);
}

/* --- Services ------------------------------------------------------------- */

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}

.service-card {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4) var(--space-4);
    background: var(--ink);
}

.service-card__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.service-card__index {
    display: block;
    color: var(--blue-300);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
}

.service-card__title {
    margin-top: var(--space-2);
    font-size: 1.19rem;
    font-weight: 600;
    line-height: 1.3;
}

/* --- Виды работ — six animated process cards ------------------------------ */
/*
   Ported from a Claude Design hand-off. The drawings are inline SVG on a dark
   card; every moving part carries `.process-anim` plus a modifier named after
   its keyframes. One 12-second loop in four beats, which is why the four steps
   under each drawing light up in step with it.

   `--process-knockout` MUST equal the card background: pile shafts and machine
   bodies are cut out of the soil hatching by painting them the card colour.
   Let the two drift apart and grey slabs crawl across all six drawings.
*/

@keyframes pa-step {
    0%, 1% { opacity: 0.6 }
    3%, 23% { opacity: 1 }
    26%, 100% { opacity: 0.6 }
}

@keyframes pa-num {
    0%, 1% { color: rgba(255, 255, 255, 0.85) }
    3%, 23% { color: var(--amber) }
    26%, 100% { color: rgba(255, 255, 255, 0.85) }
}

@keyframes pa-fade-1 { 0% { opacity: 0 } 12%, 100% { opacity: 1 } }

@keyframes pa-fade-2 { 0%, 25% { opacity: 0 } 35%, 100% { opacity: 1 } }

@keyframes pa-fade-4 { 0%, 75% { opacity: 0 } 84%, 100% { opacity: 1 } }

@keyframes pa-dash { 0%, 2% { stroke-dashoffset: 1 } 22%, 100% { stroke-dashoffset: 0 } }

@keyframes pa-dash-2 { 0%, 27% { stroke-dashoffset: 1 } 46%, 100% { stroke-dashoffset: 0 } }

@keyframes pa-drive-1 {
    0%, 26% { transform: translateY(-130px); opacity: 0 }
    29% { opacity: 1 }
    46%, 100% { transform: translateY(0); opacity: 1 }
}

@keyframes pa-drive-2 {
    0%, 51% { transform: translateY(-130px); opacity: 0 }
    54% { opacity: 1 }
    71%, 100% { transform: translateY(0); opacity: 1 }
}

@keyframes pa-auger {
    0% { transform: translateY(-118px) }
    25% { transform: translateY(0) }
    48%, 100% { transform: translateY(-150px) }
}

@keyframes pa-fill { 0%, 50% { transform: scaleY(0) } 72%, 100% { transform: scaleY(1) } }

@keyframes pa-cage {
    0%, 76% { transform: translateY(-150px) }
    94%, 100% { transform: translateY(0) }
}

@keyframes pa-jet-rod {
    0% { transform: translateY(-118px) }
    25%, 72% { transform: translateY(0) }
    94%, 100% { transform: translateY(-140px) }
}

@keyframes pa-jet-spray {
    0%, 26% { opacity: 0; transform: scaleX(0.15) }
    31% { opacity: 1; transform: scaleX(1) }
    40% { opacity: 0.55; transform: scaleX(0.75) }
    50% { opacity: 1; transform: scaleX(1) }
    70% { opacity: 0.8; transform: scaleX(1) }
    74%, 100% { opacity: 0; transform: scaleX(0.15) }
}

@keyframes pa-column { 0%, 44% { transform: scaleX(0.12) } 74%, 100% { transform: scaleX(1) } }

@keyframes pa-grab {
    0%, 26% { transform: translateY(-118px) }
    38% { transform: translateY(6px) }
    50%, 100% { transform: translateY(-118px) }
}

@keyframes pa-grab-close { 0%, 35% { transform: scaleX(1) } 42%, 100% { transform: scaleX(0.4) } }

@keyframes pa-boom {
    0% { transform: rotate(-2deg) }
    12% { transform: rotate(-15deg) }
    25% { transform: rotate(3deg) }
    37% { transform: rotate(-15deg) }
    50% { transform: rotate(3deg) }
    62% { transform: rotate(-15deg) }
    75% { transform: rotate(1deg) }
    100% { transform: rotate(-2deg) }
}

@keyframes pa-dig {
    0%, 8% { transform: translateY(0) }
    30% { transform: translateY(16px) }
    55% { transform: translateY(32px) }
    78%, 100% { transform: translateY(48px) }
}

@keyframes pa-truck {
    0%, 60% { transform: translateX(90px); opacity: 0 }
    70%, 86% { transform: translateX(0); opacity: 1 }
    96%, 100% { transform: translateX(-90px); opacity: 0 }
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
}

.process-grid {
    /* The mock-up's rgba(255,255,255,.045) over --ink, flattened to an opaque
       colour so the knockouts above can be exact. */
    --process-card-bg: #192635;
    --process-knockout: var(--process-card-bg);

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.process-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    border: 1px solid var(--hairline);
    background: var(--process-card-bg);
}

.process-card__figure {
    width: 100%;
    height: auto;
}

.process-card__title {
    margin-top: var(--space-3);
    font-size: var(--step-1);
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.process-card__spec {
    margin-top: var(--space-2);
    color: var(--blue-300);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
}

.process-card__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: 0.875rem;
    line-height: 1.4;
}

.process-card__step {
    display: flex;
    gap: 0.625rem;
    /* The mock-up dims idle steps to .3, which is 2.4:1 on this card. */
    opacity: 0.6;
}

.process-card__step-num {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.process-card__text {
    margin-top: auto;
    padding-top: var(--space-4);
    color: var(--blue-200);
    font-size: 0.9rem;
    line-height: 1.5;
}

.process-anim,
.process-card__step,
.process-card__step-num {
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}

.process-anim {
    transform-box: fill-box;
}

.process-anim--view {
    transform-box: view-box;
}

.process-anim__knockout {
    fill: var(--process-knockout);
}

.process-anim--fade-1 { animation-name: pa-fade-1 }
.process-anim--fade-2 { animation-name: pa-fade-2 }
.process-anim--fade-4 { animation-name: pa-fade-4 }
.process-anim--dash { animation-name: pa-dash }
.process-anim--dash-2 { animation-name: pa-dash-2 }
.process-anim--drive-1 { animation-name: pa-drive-1 }
.process-anim--drive-2 { animation-name: pa-drive-2 }
.process-anim--auger { animation-name: pa-auger }
.process-anim--cage { animation-name: pa-cage }
.process-anim--jet-rod { animation-name: pa-jet-rod }
.process-anim--dig { animation-name: pa-dig }
.process-anim--truck { animation-name: pa-truck }
.process-anim--grab { animation-name: pa-grab }

.process-anim--fill {
    animation-name: pa-fill;
    transform-origin: bottom;
}

.process-anim--jet-spray {
    animation-name: pa-jet-spray;
    transform-origin: center;
}

.process-anim--column {
    animation-name: pa-column;
    transform-origin: center;
}

.process-anim--grab-close {
    animation-name: pa-grab-close;
    transform-origin: center top;
}

.process-anim--boom {
    animation-name: pa-boom;
    transform-origin: 104px 128px;
}

.process-card__step { animation-name: pa-step }
.process-card__step-num { animation-name: pa-num }

.process-card__step:nth-child(2),
.process-card__step:nth-child(2) .process-card__step-num { animation-delay: 3s }

.process-card__step:nth-child(3),
.process-card__step:nth-child(3) .process-card__step-num { animation-delay: 6s }

.process-card__step:nth-child(4),
.process-card__step:nth-child(4) .process-card__step-num { animation-delay: 9s }

/* Paused off-screen. The class comes from JS: without it everything keeps
   running, so a script that fails to load cannot freeze the drawings on their
   empty first frame. */
.process-grid.is-anim-managed .process-anim,
.process-grid.is-anim-managed .process-card__step,
.process-grid.is-anim-managed .process-card__step-num {
    animation-play-state: paused;
}

.process-grid.is-anim-managed.is-visible .process-anim,
.process-grid.is-anim-managed.is-visible .process-card__step,
.process-grid.is-anim-managed.is-visible .process-card__step-num {
    animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
    /* The global rule squashes animations to 0.01ms and one pass. That alone
       is not enough: with no fill-mode the element snaps back to its
       un-animated state, leaving the auger in the ground, the truck parked
       mid-frame and the pit undug. Every set of keyframes here ends on the
       finished state, so hold the last frame. */
    .process-anim {
        animation-iteration-count: 1 !important;
        animation-fill-mode: forwards !important;
        animation-delay: 0s !important;
    }

    /* Steps are the exception: idle is already their readable state, and with
       nothing moving there is no "current" step to highlight. */
    .process-card__step,
    .process-card__step-num {
        animation: none !important;
    }
}

/* --- Work types (full list) ----------------------------------------------- */

.types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.type-card {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    transition: border-color 0.2s, background-color 0.2s;
}

.type-card:hover {
    border-color: var(--blue-500);
}

/* The icons are pale cyan line art on transparent — invisible on white, so
   they sit on an ink chip. */
.type-card__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 9px;
    border-radius: var(--radius);
    background: var(--blue-700);
    object-fit: contain;
}

.type-card__title {
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.35;
}

/* --- Renovation block ----------------------------------------------------- */

.renovation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--text-invert);
    overflow: hidden;
}

.renovation__media {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}

.renovation__body {
    padding: var(--space-5) var(--space-5) var(--space-5) var(--space-2);
}

.renovation__eyebrow {
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.renovation__title {
    margin-top: var(--space-2);
    font-size: var(--step-2);
}

.renovation__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
}

.renovation__address {
    display: block;
    color: var(--white);
}

.renovation__spec {
    display: block;
    color: var(--blue-200);
}

/* --- Equipment ------------------------------------------------------------ */

.equipment-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.equipment-preview img {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
    object-fit: cover;
}

.equipment-page {
    display: grid;
    gap: var(--space-6);
}

.equipment-group {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.equipment-group__index {
    color: var(--blue-500);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.equipment-group__title {
    margin-top: var(--space-2);
    font-size: var(--step-2);
}

.equipment-group__note {
    margin-top: var(--space-2);
    color: var(--text-soft);
    font-size: 0.92rem;
}

.equipment-list {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.equipment-list__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-3);
    background: var(--white);
}

.equipment-list__name {
    font-family: var(--font-display);
    font-size: 1.13rem;
    font-weight: 600;
    line-height: 1.3;
}

.equipment-list__note {
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

.equipment-list__note--accent {
    color: var(--amber);
    font-weight: 600;
}

.equipment-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-2);
}

.equipment-strip__link {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
}

.equipment-strip img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.4s;
}

.equipment-strip__link:hover img {
    transform: scale(1.04);
}

/* --- Парк техники — video cards ------------------------------------------- */
/*
   Ported from a Claude Design hand-off (static/public/park/ on the
   park-tehniki-block branch). The prototype's literals turned out to be this
   palette already -- #16324f, #f2a20c and rgba(255,255,255,.14) are --blue-700,
   --amber and --hairline to the digit -- so the port is mostly a rename.

   Every card plays its own segment of one 7.5-second silent file; timings live
   in content.py and reach the markup as data-start / data-end / data-rate.
*/

.reel-grid {
    /* Same flattened card colour as the process cards on /works/. */
    --reel-card-bg: #192635;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.reel-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-2) var(--space-4);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--reel-card-bg);
}

/* Five cards in two columns leave an orphan; the last one spans both. */
.reel-card--wide {
    grid-column: span 2;
}

/* At full width a 16:9 frame would both dominate the page and show almost the
   whole shot, which cancels the crop that tells this card apart from the
   excavators one -- they share a segment. */
.reel-card--wide .reel-card__media {
    aspect-ratio: 3 / 1;
}

.reel-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 2px;
    background: var(--blue-700);
    overflow: hidden;
}

.reel-card__media-fill {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reel-card__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
    rgba(11, 15, 18, 0) 55%,
    rgba(11, 15, 18, 0.72) 100%);
    pointer-events: none;
    content: '';
}

.reel-card__index {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(11, 15, 18, 0.72);
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.69rem;
    letter-spacing: 0.04em;
}

.reel-card__title {
    margin-top: var(--space-3);
    padding-inline: var(--space-2);
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.reel-card__note {
    margin-top: var(--space-1);
    padding-inline: var(--space-2);
    color: var(--blue-200);
    font-size: 0.9rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.reel-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    padding-inline: var(--space-2);
    border-top: 1px solid var(--hairline);
}

.reel-card__row {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.94rem;
}

.reel-card__name {
    font-family: var(--font-display);
    font-weight: 500;
}

/* The mock-up sets these to rgba(255,255,255,.45) at 11px -- about 3:1, under
   the AA floor. --blue-300 is the tone the rest of the dark sections use. */
.reel-card__spec {
    flex: 0 0 auto;
    max-width: 46%;
    color: var(--blue-300);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-align: right;
}

.reel-card__spec--accent {
    color: var(--amber);
    font-weight: 600;
}

.reel-card__strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-1);
    margin-top: var(--space-3);
    padding-inline: var(--space-2);
}

.reel-card__shot {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
}

.reel-card__shot img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.4s;
}

.reel-card__shot:hover img {
    transform: scale(1.04);
}

/* --- Documents ------------------------------------------------------------ */

.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.doc-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.doc-card__media {
    display: block;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--hairline);
    background: var(--blue-700);
    overflow: hidden;
}

.doc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s;
}

.doc-card__media:hover img {
    opacity: 0.8;
}

.doc-card__title {
    font-size: 1.13rem;
    font-weight: 600;
}

.doc-card__text {
    margin-top: var(--space-1);
    color: #9fb6d0;
    font-size: 0.82rem;
}

.doc-card__download {
    align-self: start;
    margin-top: var(--space-2);
    border-bottom: 1px solid var(--amber);
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- Map ------------------------------------------------------------------ */

.object-map {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
}

.object-map__canvas {
    min-height: 480px;
    background: var(--blue-100);
}

.object-map__panel {
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
}

.object-map__panel-title {
    font-size: 1.05rem;
}

.object-map__panel-title a:hover {
    color: var(--blue-500);
}

.object-map__panel-address {
    margin-top: var(--space-2);
    color: var(--text-soft);
    font-size: 0.9rem;
}

/* --- Object detail -------------------------------------------------------- */

.object__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.object__side-title {
    font-size: var(--step-2);
}

.object__side-title::after {
    display: block;
    width: 2.75rem;
    height: 3px;
    margin-top: var(--space-3);
    background: var(--amber);
    content: '';
}

.object__body {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.object__body li {
    padding-left: var(--space-3);
    border-left: 2px solid var(--blue-100);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
}

.object__role {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius);
    background: var(--concrete);
}

.object__role-label,
.object__partners-title {
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.object__role-title {
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
}

.object__role-text {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: 0.94rem;
}

.object__partners {
    margin-top: var(--space-5);
}

.object__side .button {
    margin-top: var(--space-5);
}

/* --- CTA ------------------------------------------------------------------ */

.cta {
    background: var(--amber);
    color: var(--ink);
}

.cta__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-5);
}

.cta__title {
    font-size: var(--step-3);
}

.cta__text {
    margin-top: var(--space-2);
    font-size: var(--step-1);
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.cta__phone {
    font-family: var(--font-mono);
    font-size: var(--step-2);
    font-weight: 700;
}

/* --- Contacts ------------------------------------------------------------- */

.contacts__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-6);
    align-items: start;
}

.contacts__map iframe {
    width: 100%;
    min-height: 460px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
    padding-block: var(--space-5);
    background: var(--ink);
    color: var(--text-invert);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.site-footer__logo img {
    width: 132px;
    height: auto;
}

.site-footer__tagline {
    margin-top: var(--space-2);
    color: var(--amber);
    font-family: var(--font-display);
    font-size: 0.94rem;
}

.nav--footer .nav__list {
    flex-direction: column;
    gap: var(--space-1);
}

.site-footer__contacts {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    color: var(--blue-200);
    font-style: normal;
    font-size: 0.88rem;
}

.site-footer__phone {
    color: var(--text-invert);
    font-family: var(--font-mono);
    font-size: var(--step-1);
    font-weight: 500;
}

.site-footer__contacts a:hover {
    color: var(--amber);
}

/* 7. Responsive ============================================================ */

@media (max-width: 1100px) {
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .objects-grid__cell--wide {
        grid-column: span 1;
    }

    .object-card--featured {
        display: flex;
    }

    .object-card--featured .object-card__media {
        aspect-ratio: 3 / 2;
        min-height: 0;
    }
}

@media (max-width: 960px) {
    .reel-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .reel-card--wide {
        grid-column: span 1;
    }

    .reel-card--wide .reel-card__media {
        aspect-ratio: 16 / 9;
    }

    .split,
    .split--wide,
    .object__layout,
    .contacts__layout,
    .object-map,
    .equipment-group,
    .renovation {
        grid-template-columns: minmax(0, 1fr);
    }

    .renovation__body {
        padding: var(--space-4);
    }

    .object-map__canvas {
        min-height: 340px;
    }

    .object-map__panels {
        order: -1;
    }

    .contact-form {
        padding: var(--space-4);
    }
}

@media (max-width: 820px) {
    :root {
        --header-h: 3.75rem;
    }

    .nav-toggle {
        display: block;
        order: 3;
    }

    .site-header__inner {
        gap: var(--space-3);
    }

    .site-header__phone {
        display: none;
    }

    .nav {
        position: fixed;
        inset: var(--header-h) 0 auto;
        max-height: 0;
        background: var(--ink);
        overflow: hidden;
        transition: max-height 0.25s;
    }

    body.is-nav-open .nav {
        max-height: 80vh;
    }

    .nav__list {
        flex-direction: column;
        gap: 0;
        padding: var(--space-2) var(--space-3) var(--space-4);
    }

    .nav__list a {
        display: block;
        padding-block: var(--space-2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 1rem;
    }

    /* The footer nav is inline, not the fixed panel. */
    .nav--footer {
        position: static;
        max-height: none;
        background: none;
    }

    .nav--footer .nav__list {
        padding: 0;
    }

    .nav--footer .nav__list a {
        border-bottom: 0;
    }

    .counters__item {
        padding-inline: 0;
        border-right: 0;
        border-bottom: 1px solid var(--hairline);
    }
}

@media (max-width: 560px) {
    h1, h2, h3 {
        overflow-wrap: break-word;
    }

    .process-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .process-card {
        padding: var(--space-3);
    }

    /* One per row, the drawing would otherwise grow past 300px tall and push
       the steps off the first screen. */
    .process-card__figure {
        max-width: 300px;
        margin-inline: auto;
    }

    /* The spec would otherwise squeeze into a column of single words. */
    .reel-card__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .reel-card__spec {
        max-width: 100%;
        text-align: left;
    }

    .equipment-preview {
        grid-template-columns: 1fr;
    }

    .section__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .object-card--featured .object-card__body {
        padding: var(--space-3);
    }
}