/* ==========================================================================
   ALUMIRROR — стили сайта по макету дизайнера (alumirror website.fig, Figma Make).
   Только переменные темы (значения — theme.css из «Дизайн → Тема», запасные — ниже).
   Макет: компьютер 1280 (контент 1168 + поля 56) и 1440 (контент 1328 + поля 56) — контейнер тянется
   вместе с окном до 1328; телефон 390 (поля 20).
   Анимации — motion.css (направление D); здесь — вид состояний (плашка шапки, открытые окна).
   ========================================================================== */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/montserrat-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/montserrat-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; }

/* ------------------------------------------------------------------ Токены (запасные значения = тема макета) */
:root {
  --brand: #0b2a24; --brand-2: #163d35; --on-brand: #faf8f2;
  --bg: #ede3d9; --surface: #f0ebe3; --surface-2: #e6d6c3; --surface-3: #faf8f2;
  --text: #51382b; --muted: #7a685b; --muted-2: #a6968a; --line: #d9cfc2; --gold: #b08d57;
  --danger: #a33b2b; --success: #2f6b4f; --ann: #0b2a24; --ann-text: #faf8f2;
  --footer-bg: transparent; --footer-text: #51382b;
  --font-body: "Montserrat", Arial, sans-serif; --font-heading: "Montserrat", Arial, sans-serif;
  --fs-base: 14px; --fs-h1: 60px; --fs-h2: 36px; --fs-h3: 18px; --fw-heading: 300; --ls-heading: .01em;
  --r-sm: 0px; --r: 0px; --r-lg: 0px; --r-pill: 999px;
  --container: 1328px; --gut-max: 56px; --section-gap: 96px; --grid-gap: 24px; --motion-speed: 1;
  --shadow: 0 12px 32px -16px rgba(81, 56, 43, .28); --shadow-lg: 0 30px 80px -30px rgba(81, 56, 43, .45);
  --texture: url(/assets/img/texture-stone.webp); --texture-opacity: .6;

  /* производные */
  --gut: clamp(20px, 4.375vw, var(--gut-max));
  --wrap: calc(var(--container) + 2 * var(--gut));
  --pad-y: clamp(56px, 6.25vw, 80px);
  --hdr-h: 110px;
  --icon-stroke: 1.25;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t: calc(.35s * var(--motion-speed));
  --line-soft: color-mix(in srgb, var(--line) 70%, transparent);
  --text-30: color-mix(in srgb, var(--text) 30%, transparent);
  --dark: var(--text);
}
@media (max-width: 767px) { :root { --hdr-h: 139px; } }

/* ------------------------------------------------------------------ Основа */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; position: relative; isolation: isolate; overflow-x: clip;
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; font-weight: 400;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
/* Фактура камня поверх фона (как в макете: плитки 1600 px, на телефоне 744 px) */
body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--texture); background-repeat: repeat; background-position: 50% 0;
  background-size: 1600px auto; opacity: var(--texture-opacity);
}
@media (max-width: 767px) { body::before { background-size: 744px auto; opacity: calc(var(--texture-opacity) * .7); } }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
picture > img { width: 100%; height: 100%; }
/* h.picture всегда даёт <picture>: в рамках с заданной пропорцией он должен занимать всю рамку, иначе фото встаёт по своей пропорции */
:where(.mega__media, .mnav__card, .scard__media, .media-text__media, .brand-banner__bg, .dcard__media, .pcard__media, .pcard__slider [data-slide], .image-hero__bg, .stats-row__img, .pstep__media, .manager-split__media, .ctile, .vrev__media, .gallery__item, .promo-banner__link) > picture { width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: color-mix(in srgb, var(--brand) 85%, transparent); color: var(--on-brand); }
:focus-visible { outline: 1px solid var(--brand); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden, .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.i { width: 1em; height: 1em; max-width: none; flex: none; stroke-width: var(--icon-stroke); }
.i use { stroke-width: inherit; }
main { display: block; padding-top: var(--hdr-h); }
.has-overlay main { padding-top: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--brand); color: var(--on-brand); font-size: 12px; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ Сетка и секции */
.container, .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sec { position: relative; padding-block: var(--pad-y); }
.sec.pt-none { padding-top: 0; } .sec.pt-xs { padding-top: 8px; } .sec.pt-s { padding-top: 24px; } .sec.pt-m { padding-top: 48px; } .sec.pt-l { padding-top: 80px; } .sec.pt-xl { padding-top: 120px; }
.sec.pb-none { padding-bottom: 0; } .sec.pb-xs { padding-bottom: 8px; } .sec.pb-s { padding-bottom: 24px; } .sec.pb-m { padding-bottom: 48px; } .sec.pb-l { padding-bottom: 80px; } .sec.pb-xl { padding-bottom: 120px; }
@media (max-width: 767px) {
  .sec.pt-l { padding-top: 56px; } .sec.pt-xl { padding-top: 80px; } .sec.pb-l { padding-bottom: 56px; } .sec.pb-xl { padding-bottom: 80px; }
}
.sec.bg-surface { background: var(--surface); }
.sec.bg-sand { background: var(--surface-2); }
.sec.bg-brand { background: var(--brand); color: var(--on-brand); --text: var(--on-brand); --muted: color-mix(in srgb, var(--on-brand) 75%, transparent); --line: color-mix(in srgb, var(--on-brand) 25%, transparent); }
.sec.bg-dark { background: var(--dark); color: var(--surface-3); --text: var(--surface-3); --muted: color-mix(in srgb, var(--surface-3) 75%, transparent); --line: color-mix(in srgb, var(--surface-3) 25%, transparent); }
.sec.bg-custom { background: var(--sec-bg, transparent); }
.sec.has-bg-img { background-image: linear-gradient(rgba(0, 0, 0, var(--sec-overlay, 0)), rgba(0, 0, 0, var(--sec-overlay, 0))), var(--sec-bg-img); background-size: cover; background-position: center; }
.sec.has-text-color { color: var(--sec-text); --text: var(--sec-text); }
.sec.w-wide > .container { max-width: calc(var(--wrap) + 160px); }
.sec.w-full > .container { max-width: none; }
.sec.ta-left { text-align: left; } .sec.ta-center { text-align: center; } .sec.ta-right { text-align: right; }
@media (max-width: 767px) { .hide-m { display: none !important; } }
@media (min-width: 768px) { .hide-d { display: none !important; } }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } .grid-4 { gap: 12px; } }

/* ------------------------------------------------------------------ Типографика */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 10px; line-height: 15px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.eyebrow--regular { font-weight: 400; }
.eyebrow--light { color: color-mix(in srgb, var(--surface-3) 80%, transparent); }
.eyebrow__line { display: block; width: 24px; height: 1px; background: currentColor; opacity: .5; flex: none; }
@media (max-width: 767px) { .eyebrow { line-height: 16px; letter-spacing: .15em; } }

.h1, .h2, .h3, .h-light { font-family: var(--font-heading); color: var(--text); }
.h1 { font-size: clamp(34px, 27px + 1.8vw, 50px); line-height: 1.2; font-weight: var(--fw-heading); letter-spacing: .02em; }
.h1--xl { font-size: clamp(40px, 28px + 2.6vw, var(--fs-h1)); line-height: 1.25; letter-spacing: .025em; }
.h2 { font-size: clamp(28px, 24.5px + .9vw, var(--fs-h2)); line-height: 1.3; font-weight: 500; letter-spacing: .015em; }
.h2--light, .h-light { font-weight: var(--fw-heading); }
.h2--light { font-size: clamp(28px, 21.4px + 1.69vw, 43px); line-height: 1.3; letter-spacing: .015em; }
.h2--m { font-size: clamp(28px, 22.5px + 1.4vw, 37px); }
.h2--s { font-size: clamp(26px, 21.6px + 1.12vw, 34px); line-height: 1.4; letter-spacing: 0; }
.h3 { font-size: 15px; line-height: 1.5; font-weight: 500; }
.h3--light { font-weight: 300; font-size: 17px; }
.lead { font-size: 13px; line-height: 28px; color: var(--muted); }
.txt { font-size: 12px; line-height: 24px; color: var(--muted); }
.txt-s { font-size: 11px; line-height: 24px; color: var(--muted); }
.muted { color: var(--muted); }
.lead p + p, .txt p + p { margin-top: 1em; }
@media (max-width: 767px) {
  .lead, .txt { font-size: 14px; line-height: 24px; }
  .txt-s { font-size: 13px; line-height: 22px; }
  .h3 { font-size: 16px; }
}
.rich { font-size: 13px; line-height: 26px; color: var(--muted); }
.rich > * + * { margin-top: 14px; }
.rich h2, .rich h3, .rich h4 { color: var(--text); font-weight: 500; line-height: 1.35; }
.rich h2 { font-size: 22px; margin-top: 40px; font-weight: 400; }
.rich h3 { font-size: 16px; margin-top: 28px; }
.rich h2:first-child, .rich h3:first-child { margin-top: 0; }
.rich strong, .rich b { color: var(--text); font-weight: 500; }
.rich a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-30); transition: text-decoration-color var(--t); }
.rich a:hover { text-decoration-color: currentColor; }
.rich ul li, .rich ol li { position: relative; padding-left: 22px; }
.rich ul li + li, .rich ol li + li { margin-top: 8px; }
.rich ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border: 1px solid var(--muted); transform: rotate(45deg); }
.rich ol { counter-reset: n; }
.rich ol li { counter-increment: n; }
.rich ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0; font-size: 10px; color: var(--muted); }
.rich dl { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; border-top: 1px solid var(--line); }
.rich dt, .rich dd { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rich dt { color: var(--muted); padding-right: 24px; }
.rich dd { color: var(--text); }
.rich table { width: 100%; border-collapse: collapse; }
.rich td, .rich th { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
@media (max-width: 767px) { .rich { font-size: 14px; line-height: 24px; } .rich dl { grid-template-columns: 1fr; } .rich dt { padding-bottom: 0; border-bottom: 0; } }

/* ------------------------------------------------------------------ Кнопки и ссылки */
.btn {
  --btn-bg: var(--brand); --btn-fg: var(--on-brand);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 24px;
  min-height: 48px; padding: 14px 28px; border-radius: var(--r);
  background: var(--btn-bg); color: var(--btn-fg); font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand-2); transform: scaleX(0); transform-origin: 100% 50%; transition: transform calc(.55s * var(--motion-speed)) var(--ease-out); }
.btn:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.btn .i { width: 17px; height: 17px; transition: transform var(--t) var(--ease); }
.btn:hover .i { transform: translateX(4px); }
.btn--light { --btn-bg: var(--surface-3); --btn-fg: var(--brand); }
.btn--light::before { background: var(--surface); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); box-shadow: inset 0 0 0 1px var(--text-30); }
.btn--ghost::before { background: color-mix(in srgb, var(--text) 6%, transparent); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }
.btn.is-busy::after { content: ""; width: 14px; height: 14px; border: 1px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
  .btn { font-size: 13px; }
  .btn--m-block { display: flex; width: 100%; justify-content: space-between; padding-inline: 22px; }
}

.link-arrow {
  position: relative; display: inline-flex; align-items: center; gap: 20px; min-height: 44px; padding-bottom: 1px;
  font-size: 12px; line-height: 18px; font-weight: 500; color: var(--text); white-space: nowrap;
}
.link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--text-30); }
.link-arrow::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--text); transform: scaleX(0); transform-origin: 0 50%; transition: transform calc(.6s * var(--motion-speed)) var(--ease-out); z-index: 1; }
.link-arrow:hover::before { transform: scaleX(1); }
.link-arrow .i { width: 17px; height: 17px; transition: transform var(--t) var(--ease); }
.link-arrow:hover .i { transform: translate(3px, -3px); }
.link-arrow--light { color: var(--surface-3); }
.link-arrow--light::after { background: color-mix(in srgb, var(--surface-3) 35%, transparent); }
.link-arrow--light::before { background: var(--surface-3); }
@media (max-width: 767px) {
  .link-arrow { font-size: 13px; }
  .link-arrow--m-block { display: flex; width: 100%; justify-content: space-between; min-height: 52px; }
}

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; color: inherit; transition: background-color var(--t), color var(--t); }
.icon-btn .i { width: 19px; height: 19px; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 8px; line-height: 1; font-weight: 400; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 16px; border: 1px solid var(--line); color: var(--text); font-size: 11px; font-weight: 500; transition: background-color var(--t), color var(--t), border-color var(--t); }
.chip:hover { border-color: var(--text-30); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--bg); }

/* Хлебные крошки */
.crumbs { font-size: 10px; line-height: 15px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 12px 0 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); opacity: .8; }
.crumbs a { transition: color var(--t); }
.crumbs a:hover { color: var(--text); }
.crumbs--light { color: color-mix(in srgb, var(--surface-3) 80%, transparent); }
@media (max-width: 767px) { .crumbs { font-size: 11px; } }

/* ------------------------------------------------------------------ Поля форм */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__label { font-size: 12px; line-height: 18px; color: var(--text); }
.input, .textarea, .select {
  width: 100%; min-height: 48px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r);
  background: color-mix(in srgb, var(--surface-3) 88%, transparent); color: var(--text); font-size: 13px; line-height: 18px;
  transition: border-color var(--t), background-color var(--t), box-shadow var(--t);
}
.textarea { min-height: 104px; resize: vertical; line-height: 21px; }
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.input:hover, .textarea:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--text); background: var(--surface-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 8%, transparent); }
.field.is-invalid .input, .field.is-invalid .textarea { border-color: var(--danger); }
.field__err { font-size: 11px; color: var(--danger); }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 9px; line-height: 20px; color: var(--muted); cursor: pointer; }
.check input { appearance: none; flex: none; width: 16px; height: 16px; margin: 2px 0 0; border: 1px solid var(--text); background: transparent; cursor: pointer; display: grid; place-content: center; transition: background-color var(--t); }
.check input::after { content: ""; width: 8px; height: 4px; border-left: 1px solid var(--on-brand); border-bottom: 1px solid var(--on-brand); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input:checked { background: var(--brand); border-color: var(--brand); }
.check input:checked::after { opacity: 1; }
.check a { text-decoration: underline; text-underline-offset: 2px; color: var(--text); }
.drop {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 1px dashed color-mix(in srgb, var(--muted) 45%, var(--line));
  background: color-mix(in srgb, var(--surface-3) 40%, transparent); cursor: pointer; transition: border-color var(--t), background-color var(--t);
}
.drop:hover, .drop.is-over { border-color: var(--text); background: color-mix(in srgb, var(--surface-3) 75%, transparent); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .i { width: 20px; height: 20px; color: var(--text); }
.drop__t { font-size: 11px; line-height: 16.5px; color: var(--text); }
.drop__s { font-size: 9px; line-height: 13.5px; color: var(--muted); margin-top: 4px; }
.files { display: flex; flex-wrap: wrap; gap: 8px; }
.files:empty { display: none; }
.file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 8px 6px 12px; background: var(--surface); font-size: 11px; color: var(--text); }
.file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.file button { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; color: var(--muted); }
.file button:hover { color: var(--danger); }
.form-msg { font-size: 12px; line-height: 20px; }
.form-msg.is-error { color: var(--danger); }
.form-ok { padding: 32px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.form-ok__t { font-size: 22px; line-height: 1.35; font-weight: 300; color: var(--text); }
.form-ok__s { margin-top: 12px; font-size: 12px; line-height: 22px; color: var(--muted); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 767px) { .input, .textarea { font-size: 14px; } .check { font-size: 10px; line-height: 18px; } }

/* ------------------------------------------------------------------ Шапка */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 60; color: var(--text); transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), backdrop-filter var(--t); }
.hdr__strip { height: 32px; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); font-size: 9px; line-height: 13.5px; letter-spacing: .025em; color: var(--muted); }
.hdr__strip .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hdr__strip nav { display: flex; align-items: center; gap: 28px; }
.hdr__strip a { display: inline-flex; align-items: center; gap: 4px; transition: color var(--t); }
.hdr__strip a:hover { color: var(--text); }
.hdr__strip .i { width: 11px; height: 11px; }
.hdr__row .container { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.hdr__logo { display: inline-flex; align-items: center; color: var(--brand); flex: none; }
.hdr__logo .logo { width: 180px; height: auto; }
.hdr__nav { display: flex; align-items: center; gap: 36px; font-size: 11px; line-height: 16.5px; }
.hdr__nav > a, .hdr__cat > a { position: relative; padding: 20px 0; transition: color var(--t); }
.hdr__nav > a::after, .hdr__cat > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform calc(.5s * var(--motion-speed)) var(--ease-out); }
.hdr__nav > a:hover::after, .hdr__nav > a.is-current::after, .hdr__cat > a:hover::after, .hdr__cat.is-current > a::after { transform: scaleX(1); }
.hdr__cat { position: relative; display: flex; align-items: center; gap: 6px; }
.hdr__cat-btn { display: inline-flex; padding: 8px; margin-right: -8px; color: inherit; }
.hdr__cat-btn .i { width: 11px; height: 11px; transition: transform var(--t) var(--ease); }
.hdr__cat.is-open .hdr__cat-btn .i { transform: rotate(180deg); }
.hdr__icons { display: flex; align-items: center; gap: 24px; flex: none; }
.hdr__icon { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px; font-size: 10px; line-height: 15px; transition: color var(--t), opacity var(--t); }
.hdr__icon .i { width: 19px; height: 19px; }
.hdr__icon:hover { opacity: .7; }
.hdr__badge { position: absolute; left: 23px; top: -4px; }
.hdr__count:empty { display: none; }
.hdr__burger { display: none; }
.hdr__sub { display: none; }
/* Прозрачная шапка над первым экраном главной: светлая вуаль как в макете */
.hdr--overlay::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 153px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #e9dfd3 0%, color-mix(in srgb, #e9dfd3 72%, transparent) 42%, color-mix(in srgb, #e9dfd3 58%, transparent) 58%, transparent 100%);
  transition: opacity var(--t); }
/* Плашка при прокрутке (состояние ставит motion.js: .is-scrolled / .is-hidden / .is-top) */
.hdr.is-scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent); }
.hdr.is-scrolled::before { opacity: 0; }
@media (min-width: 768px) {
  .hdr.is-scrolled .hdr__strip { height: 0; overflow: hidden; border-bottom-color: transparent; }
  .hdr__strip { transition: height var(--t) var(--ease); }
  .hdr.is-scrolled .hdr__row .container { height: 64px; }
  .hdr__row .container { transition: height var(--t) var(--ease); }
  /* на главной (поверх первого экрана) ряд меню в макете выше: середина на 60 px, а не на 71 px */
  .hdr--overlay:not(.is-scrolled) .hdr__row .container { height: 57px; }
}
/* Выпадающий каталог */
.mega {
  position: absolute; left: -32px; top: calc(100% - 6px); z-index: 5; width: min(860px, 86vw);
  padding: 28px 32px 32px; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
.hdr__cat.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mega__item { display: flex; flex-direction: column; gap: 12px; }
.mega__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.mega__media img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(.9s * var(--motion-speed)) var(--ease-out); }
.mega__item:hover .mega__media img { transform: scale(1.05); }
.mega__t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 500; color: var(--text); }
.mega__t .i { width: 14px; height: 14px; }
.mega__kids { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10px; color: var(--muted); }
.mega__kids a:hover { color: var(--text); }
.mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
@media (max-width: 1180px) { .hdr__nav { gap: 22px; } .hdr__row .container { gap: 18px; } }
@media (max-width: 1080px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: inline-flex; }
}
@media (max-width: 767px) {
  .hdr { background: color-mix(in srgb, var(--bg) 0%, transparent); }
  .hdr__strip { height: 30px; border-bottom: 1px solid var(--line); }
  .hdr__strip nav { display: none; }
  .hdr__row .container { height: 70px; gap: 12px; }
  .hdr__row .container::after { content: none; }
  .hdr__logo .logo { width: 180px; }
  .hdr__icons { gap: 4px; }
  .hdr__icon { padding: 8px 6px; }
  .hdr__icon .i { width: 22px; height: 22px; }
  .hdr__icon--account, .hdr__icon--compare { display: none; }
  .hdr__badge { left: 22px; top: -2px; }
  .hdr__burger { display: inline-flex; width: 40px; height: 40px; margin-right: -8px; }
  .hdr__burger .i { width: 24px; height: 24px; }
  .hdr__sub { display: block; }
  .hdr__sub .container { display: flex; align-items: center; justify-content: space-between; height: 39px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 10px; color: var(--muted); }
  .hdr__sub a { display: inline-flex; align-items: center; gap: 2px; }
  .hdr__sub .i { width: 11px; height: 11px; }
  .hdr.is-scrolled .hdr__strip, .hdr.is-scrolled .hdr__sub { display: none; }
  .hdr--overlay::before { display: none; }
}

/* Мобильное меню на весь экран */
.mnav { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--bg); visibility: hidden; opacity: 0; transition: opacity var(--t) var(--ease), visibility 0s linear var(--t); overflow: hidden; }
.mnav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--texture) 50% 0 / 744px auto; opacity: calc(var(--texture-opacity) * .7); pointer-events: none; }
.mnav.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.mnav__head { display: flex; align-items: center; justify-content: space-between; height: 70px; padding-inline: var(--gut); border-bottom: 1px solid var(--line); flex: none; }
.mnav__head .logo { width: 150px; color: var(--brand); }
.mnav__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px var(--gut) 32px; }
.mnav__list > li { border-bottom: 1px solid var(--line); }
.mnav__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; font-size: 22px; line-height: 1.3; font-weight: 300; color: var(--text); }
.mnav__link .i { width: 18px; height: 18px; color: var(--muted); transition: transform var(--t) var(--ease); }
.mnav__item.is-open .mnav__link .i { transform: rotate(180deg); }
.mnav__sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 0 20px; }
.mnav__card { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 500; }
.mnav__card .mnav__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.mnav__card img { width: 100%; height: 100%; object-fit: cover; }
.mnav__foot { flex: none; padding: 20px var(--gut) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 13px; color: var(--muted); }
.mnav__foot a { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.mnav__foot .i { width: 16px; height: 16px; }
.mnav__soc { display: flex; gap: 8px; margin-top: 4px; }
.mnav__soc a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.mnav__soc .i { width: 18px; height: 18px; }
.mnav__extra { display: grid; gap: 2px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.mnav__extra a { padding: 8px 0; display: flex; justify-content: space-between; }
body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------------ Подвал */
.ftr { position: relative; padding: 56px 0 24px; background: var(--footer-bg); color: var(--footer-text); border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
/* Колонки растут вместе с сеткой: 379 + 3 × 223 при 1168 (макет 1280), 432 + 3 × 259 при 1328 (макет 1440) */
.ftr__grid { display: grid; grid-template-columns: minmax(0, 379fr) repeat(3, minmax(0, 223fr)); column-gap: 40px; padding-bottom: 48px; }
.ftr__logo { display: inline-flex; color: var(--brand); }
.ftr__logo .logo { width: 123px; }
.ftr__about { margin-top: 24px; font-size: 12px; line-height: 24px; color: var(--muted); white-space: pre-line; }
.ftr__title { font-size: 10px; line-height: 15px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--footer-text); }
.ftr__links { margin-top: 20px; display: grid; gap: 12px; font-size: 11px; line-height: 16.5px; color: var(--muted); }
.ftr__links a { transition: color var(--t); width: fit-content; }
.ftr__links a:hover { color: var(--text); }
.ftr__contacts { margin-top: 20px; display: grid; gap: 8px; font-size: 11px; color: var(--muted); }
.ftr__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 9px; line-height: 13.5px; color: var(--muted); }
.ftr__bottom nav { display: flex; gap: 24px; flex-wrap: wrap; }
.ftr__bottom a:hover { color: var(--text); }
@media (max-width: 1023px) { .ftr__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; } .ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .ftr { padding-top: 40px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 32px; padding-bottom: 32px; }
  .ftr__logo .logo { width: 180px; }
  .ftr__about { font-size: 14px; line-height: 24px; margin-top: 24px; }
  .ftr__title { line-height: 16px; letter-spacing: .15em; color: var(--muted); }
  .ftr__links { gap: 32px; font-size: 12px; line-height: 20px; }
  .ftr__col--wide { grid-column: 1 / -1; padding-top: 32px; border-top: 1px solid var(--line); }
  .ftr__bottom { flex-direction: column; align-items: flex-start; gap: 20px; font-size: 10px; line-height: 20px; }
  .ftr__bottom nav a { font-size: 12px; }
}

/* ------------------------------------------------------------------ Окна (формы заявок, выбор WhatsApp), уведомления, просмотр фото */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity var(--t) var(--ease), visibility 0s linear var(--t); }
.modal.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--text) 45%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal__panel { position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; overscroll-behavior: contain; background: var(--bg); box-shadow: var(--shadow-lg); padding: 44px 44px 36px; transform: translateY(14px) scale(.985); transition: transform calc(.5s * var(--motion-speed)) var(--ease-out); }
.modal.is-open .modal__panel { transform: none; }
.modal__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--texture) 50% 0 / 1000px auto; opacity: calc(var(--texture-opacity) * .7); pointer-events: none; }
.modal__close { position: absolute; top: 14px; right: 14px; }
.modal__eyebrow { margin-bottom: 14px; }
.modal__title { font-size: 28px; line-height: 1.3; font-weight: 300; letter-spacing: .01em; color: var(--text); }
.modal__text { margin-top: 12px; font-size: 12px; line-height: 22px; color: var(--muted); }
.modal__body { margin-top: 26px; }
.modal--wa .modal__panel { width: min(420px, 100%); }
@media (max-width: 767px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal__panel { width: 100%; max-height: 92vh; padding: 36px 20px calc(24px + env(safe-area-inset-bottom)); transform: translateY(40px); }
  .modal__title { font-size: 24px; }
}
.rform { display: grid; gap: 16px; }
.rform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rform__foot { display: grid; gap: 14px; margin-top: 4px; }
@media (max-width: 767px) { .rform__row { grid-template-columns: 1fr; gap: 16px; } }
.wa-list { display: grid; gap: 10px; }
.wa-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); transition: border-color var(--t), background-color var(--t); }
.wa-opt:hover { border-color: var(--text); background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.wa-opt strong { font-size: 14px; font-weight: 500; color: var(--text); }
.wa-opt span { font-size: 11px; color: var(--muted); }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: grid; gap: 10px; width: min(360px, calc(100vw - 40px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--brand); color: var(--on-brand); font-size: 12px; line-height: 18px; box-shadow: var(--shadow-lg); animation: toast-in calc(.5s * var(--motion-speed)) var(--ease-out); }
.toast.is-out { animation: toast-out calc(.35s * var(--motion-speed)) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.lightbox { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, #1d140f 92%, transparent); visibility: hidden; opacity: 0; transition: opacity var(--t), visibility 0s linear var(--t); }
.lightbox.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.lightbox__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 48px 80px; scroll-snap-align: center; }
.lightbox__slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .icon-btn { position: absolute; color: var(--surface-3); width: 48px; height: 48px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__nav--prev { left: 16px; top: 50%; translate: 0 -50%; }
.lightbox__nav--next { right: 16px; top: 50%; translate: 0 -50%; }
.lightbox__count { position: absolute; bottom: 20px; left: 50%; translate: -50% 0; color: var(--surface-3); font-size: 11px; letter-spacing: .1em; }
@media (max-width: 767px) { .lightbox__slide { padding: 56px 12px; } .lightbox__nav { display: none; } }

/* ------------------------------------------------------------------ Общие куски блоков */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.shead__main { max-width: 640px; }
.shead .h2 { margin-top: 16px; }
.shead .lead { margin-top: 16px; }
.shead__link { flex: none; }
@media (max-width: 767px) {
  .shead { flex-direction: column; align-items: stretch; gap: 20px; }
  .shead__link { align-self: stretch; }
}
.media { position: relative; overflow: hidden; background: var(--surface); }
.media > img, .media > picture, .media > picture > img, .media > video { width: 100%; height: 100%; object-fit: cover; }
.ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px; background: repeating-linear-gradient(-45deg, var(--surface), var(--surface) 10px, color-mix(in srgb, var(--surface-2) 70%, var(--surface)) 10px, color-mix(in srgb, var(--surface-2) 70%, var(--surface)) 20px); color: var(--muted); font-size: 11px; }
.leaves { position: absolute; z-index: 0; pointer-events: none; background: url(/assets/img/leaves.webp) center / contain no-repeat; opacity: .55; mix-blend-mode: multiply; }
.sec > .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ Блок: первый экран главной */
.hero-home { position: relative; min-height: 790px; padding: 0; display: flex; align-items: stretch; }
.hero-home__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-home__bg picture, .hero-home__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-home > .container { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--hdr-h) + 24px); padding-bottom: 0; }
.hero-home__copy { margin-left: 150px; width: 430px; max-width: 100%; }
.hero-home__eyebrow { font-size: 9px; line-height: 13.5px; letter-spacing: .22em; color: var(--text); }
.hero-home__title { margin-top: 28px; font-size: clamp(34px, 28.3px + 1.46vw, 47px); line-height: 1.23; font-weight: 300; letter-spacing: .015em; color: var(--text); }
.hero-home__text { margin-top: 24px; max-width: 350px; font-size: 14px; line-height: 22.8px; color: var(--muted); }
.hero-home__actions { margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; }
.hero-home__tagline { position: absolute; right: var(--gut); bottom: 32px; z-index: 1; font-size: 9px; line-height: 13.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); }
@media (min-width: 1440px) { .hero-home { min-height: min(56vw, 980px); } }
@media (max-width: 1023px) { .hero-home__copy { margin-left: 0; } }
@media (max-width: 767px) {
  .hero-home { min-height: 0; display: flex; flex-direction: column; }
  /* на телефоне как в макете: сначала текст и кнопка, под ними фото */
  .hero-home__bg { order: 1; position: relative; inset: auto; height: auto; aspect-ratio: 390 / 330; margin-top: 32px; }
  .hero-home__bg img { object-position: 65% 50%; }
  .hero-home > .container { padding-top: 36px; padding-bottom: 0; }
  .hero-home__copy { width: auto; }
  .hero-home__eyebrow { font-size: 10px; line-height: 16px; letter-spacing: .15em; color: var(--muted); }
  .hero-home__eyebrow .eyebrow__line { width: 24px; }
  .hero-home__title { margin-top: 22px; font-size: 34px; line-height: 42px; }
  .hero-home__text { margin-top: 22px; max-width: none; font-size: 14px; line-height: 24px; }
  .hero-home__actions { margin-top: 30px; }
  .hero-home__actions .btn { width: 100%; justify-content: space-between; }
  .hero-home__tagline { display: none; }
}
.has-overlay .hero-home > .container { padding-top: calc(var(--hdr-h) + 24px); }
@media (max-width: 767px) { .has-overlay .hero-home > .container { padding-top: 36px; } .has-overlay main { padding-top: var(--hdr-h); } }

/* ------------------------------------------------------------------ Блок: полоса преимуществ */
.feature-strip { padding: 0; }
.feature-strip__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.feature-strip__eyebrow { display: none; }
.feature-strip__item { display: flex; align-items: center; gap: 16px; font-size: 16.25px; line-height: 24.4px; color: var(--muted); }
.feature-strip__item .i { width: 24px; height: 24px; stroke-width: 1.2; }
@media (max-width: 1023px) { .feature-strip__item { font-size: 14px; } }
@media (max-width: 767px) {
  .feature-strip { padding: 24px 0 0; }
  .feature-strip__eyebrow { display: block; margin-bottom: 16px; }
  .feature-strip__in { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 0 24px; }
  .feature-strip__item { gap: 12px; font-size: 12px; line-height: 20px; }
  .feature-strip__item .i { display: none; }
  .feature-strip__item::before { content: ""; width: 6px; height: 6px; margin: 0 3px; border: 1px solid var(--muted); transform: rotate(45deg); flex: none; }
}

/* ------------------------------------------------------------------ Блок: карточки форм */
.shape-cards__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.scard { position: relative; display: flex; flex-direction: column; }
.scard__media { position: relative; display: block; aspect-ratio: 274 / 311; overflow: hidden; background: var(--surface); }
.scard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(1.2s * var(--motion-speed)) var(--ease-out); }
.scard:hover .scard__media img { transform: scale(1.045); }
.scard__fav { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--text); transition: background-color var(--t), color var(--t); }
.scard__fav .i { width: 17px; height: 17px; }
.scard__fav:hover { background: var(--bg); }
.scard__fav.is-on, .scard__fav[aria-pressed="true"] { color: var(--brand); }
.scard__fav.is-on .i, .scard__fav[aria-pressed="true"] .i { fill: currentColor; }
.scard__title { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--text); }
.scard__title .i { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.scard:hover .scard__title .i { transform: translate(2px, -2px); }
.scard__sub { margin-top: 8px; font-size: 11px; line-height: 16.5px; color: var(--muted); }
.scard__foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scard__price { font-size: 12px; line-height: 18px; color: var(--text); }
.scard__more { font-size: 10px; line-height: 15px; color: var(--text); transition: opacity var(--t); }
.scard__more:hover { opacity: .65; }
.scard__link { position: absolute; inset: 0; z-index: 1; }
.shape-cards__foot { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.shape-cards__note { font-size: 12px; line-height: 20.5px; color: var(--muted); }
@media (max-width: 1023px) { .shape-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .shape-cards__grid { margin-top: 32px; gap: 40px 12px; }
  .scard__media { aspect-ratio: 169 / 225; }
  .scard__fav { top: 8px; right: 8px; width: 36px; height: 36px; }
  .scard__title { margin-top: 12px; font-size: 13px; line-height: 20px; }
  .scard__title .i { display: none; }
  .scard__sub { margin-top: 10px; font-size: 11px; line-height: 17px; min-height: 34px; }
  .scard__foot { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 8px; }
  .scard__price { font-size: 13px; line-height: 20px; }
  .scard__more { font-size: 11px; }
  .shape-cards__foot { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 40px; padding-top: 24px; }
  .shape-cards__note { font-size: 14px; line-height: 24px; }
}

/* ------------------------------------------------------------------ Блок: фото и текст */
.media-text { padding-block: 62px 60px; }
.media-text__grid { display: grid; grid-template-columns: minmax(0, 544fr) minmax(0, 544fr); column-gap: 80px; align-items: center; }
.media-text--right .media-text__media { order: 2; }
.media-text__media { position: relative; aspect-ratio: 544 / 560; overflow: hidden; background: var(--surface); }
.media-text__media img { width: 100%; height: 100%; object-fit: cover; }
.media-text__cap { position: absolute; left: 20px; bottom: 16px; z-index: 2; padding: 8px 16px; font-size: 9px; line-height: 13.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--surface-3); }
.media-text__copy { padding-block: 20px; }
.media-text__copy .eyebrow { margin-bottom: 24px; }
.media-text__body { margin-top: 24px; max-width: 452px; }
.media-text .media-text__body > * + * { margin-top: 32px; }
.media-text__body p:last-child:not(:first-child) { font-size: 12px; line-height: 24px; max-width: 390px; }
.media-text__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
/* Вариант «фото до края экрана» (для бизнеса) */
.media-text--bleed { padding-block: 60px; }
.media-text--bleed .media-text__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
.media-text--bleed .media-text__copy { padding: 56px 64px 56px 0; }
.media-text--bleed .media-text__media { aspect-ratio: auto; height: 440px; margin-right: calc((100vw - min(100vw, var(--wrap))) / -2 - var(--gut)); }
.media-text--bleed.media-text--right .media-text__media { margin-right: calc((min(100vw, var(--wrap)) - 100vw) / 2 - var(--gut)); }
.media-text--bleed .media-text__body { max-width: 420px; }
.media-text--bleed .media-text__body p { font-size: 12px; line-height: 22px; }
.media-text--bleed .media-text__actions .link-arrow { width: 100%; max-width: 520px; }
@media (max-width: 1023px) { .media-text__grid { column-gap: 40px; } }
@media (max-width: 767px) {
  .media-text { padding-block: 40px; }
  .media-text__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .media-text--right .media-text__media { order: 0; }
  .media-text__media { aspect-ratio: 350 / 364; }
  .media-text__cap { left: 0; bottom: 8px; padding: 8px 20px; font-size: 10px; letter-spacing: .1em; }
  .media-text__copy { padding: 0; }
  .media-text__copy .eyebrow { margin-bottom: 20px; }
  .media-text__body { margin-top: 20px; }
  .media-text .media-text__body > * + * { margin-top: 20px; }
  .media-text__body p:last-child:not(:first-child) { font-size: 14px; }
  .media-text__actions { margin-top: 28px; }
  .media-text__actions > * { width: 100%; }
  .media-text--bleed { padding-block: 40px 0; }
  .media-text--bleed .media-text__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .media-text--bleed .media-text__copy { padding: 0; order: -1; }
  .media-text--bleed.media-text--right .media-text__media { margin-inline: calc(-1 * var(--gut)); }
  .media-text--bleed .media-text__media { height: auto; aspect-ratio: 390 / 300; margin-inline: calc(-1 * var(--gut)); }
  .media-text--bleed .media-text__body p { font-size: 14px; line-height: 24px; }
}

/* ------------------------------------------------------------------ Блок: о бренде (фото во всю ширину) */
.brand-banner { padding: 0 0 var(--section-gap); }
.brand-banner { padding-block: 0; }
.brand-banner__box { position: relative; min-height: 700px; color: var(--surface-3); overflow: hidden; }
.brand-banner__bg { position: absolute; inset: 0; z-index: 0; }
.brand-banner__bg img, .brand-banner__bg picture { width: 100%; height: 100%; object-fit: cover; }
.brand-banner__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--text) 82%, transparent) 5%, color-mix(in srgb, var(--text) 56%, transparent) 25%, color-mix(in srgb, var(--text) 0%, transparent) 45%), color-mix(in srgb, var(--text) 18%, transparent); }
.brand-banner__in { position: relative; z-index: 1; min-height: 700px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding-block: 48px; padding-inline: max(48px, calc((100vw - var(--container)) / 2 - 8px)); }
.brand-banner__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.brand-banner__top > div { max-width: 512px; }
.brand-banner__title { margin-top: 16px; font-size: clamp(28px, 18px + 2.6vw, 42px); line-height: 1.3; font-weight: 500; letter-spacing: .015em; color: inherit; }
.brand-banner__text { margin-top: 16px; font-size: 13px; line-height: 28px; color: color-mix(in srgb, var(--surface-3) 80%, transparent); }
.brand-banner__bottom { max-width: 740px; }
.brand-banner__stats { max-width: 672px; }
.brand-banner__h3 { margin-top: 16px; font-size: clamp(26px, 21px + 1.3vw, 32px); line-height: 1.35; font-weight: 300; color: inherit; }
.brand-banner__p { margin-top: 16px; max-width: 576px; font-size: 12px; line-height: 24px; color: color-mix(in srgb, var(--surface-3) 80%, transparent); }
.brand-banner__stats { margin-top: 24px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--surface-3) 35%, transparent); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.brand-banner__num { font-size: 25px; line-height: 37.5px; font-weight: 300; }
.brand-banner__label { margin-top: 8px; font-size: 10px; line-height: 20px; color: color-mix(in srgb, var(--surface-3) 70%, transparent); }
.brand-banner .eyebrow { color: color-mix(in srgb, var(--surface-3) 70%, transparent); }
.brand-banner__mbtn { display: none; }
@media (max-width: 767px) {
  .brand-banner { padding-bottom: 0; }
  .brand-banner__box { min-height: 0; }
  .brand-banner__bg { position: relative; height: 460px; }
  .brand-banner__bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--text) 75%, transparent) 0%, color-mix(in srgb, var(--text) 13%, transparent) 50%, color-mix(in srgb, var(--text) 53%, transparent) 100%); }
  .brand-banner__in { position: static; min-height: 0; padding: 0; gap: 0; }
  .brand-banner__top { position: absolute; top: 20px; left: var(--gut); right: var(--gut); }
  .brand-banner__top .btn { display: none; }
  .brand-banner .eyebrow { color: var(--surface-3); }
  .brand-banner__title { font-size: 28px; line-height: 37px; }
  .brand-banner__text { font-size: 14px; line-height: 24px; color: var(--surface-3); }
  .brand-banner__bottom { max-width: none; padding: 30px var(--gut) 60px; background: var(--text); }
  .brand-banner__h3 { margin-top: 22px; font-size: 28px; line-height: 37px; }
  .brand-banner__p { font-size: 14px; line-height: 24px; color: var(--surface-3); }
  .brand-banner__stats { margin-top: 40px; padding-top: 24px; gap: 20px; }
  .brand-banner__num { font-size: 26px; line-height: 39px; }
  .brand-banner__label { font-size: 11px; line-height: 19px; color: var(--surface-3); }
  .brand-banner__mbtn { display: flex; margin-top: 32px; }
}

/* ------------------------------------------------------------------ Блок: карточки деталей (дизайн в деталях, материалы) */
.detail-cards__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.detail-cards--lined .detail-cards__grid { gap: 40px; padding-top: 20px; border-top: 1px solid var(--line); margin-top: 40px; }
.dcard__media { position: relative; aspect-ratio: 368 / 273; overflow: hidden; background: var(--surface); }
.dcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(1.4s * var(--motion-speed)) var(--ease-out); }
.dcard:hover .dcard__media img { transform: scale(1.04); }
.dcard__body { margin-top: 20px; display: flex; gap: 16px; }
.dcard__n { padding-top: 4px; font-size: 9px; line-height: 13.5px; color: var(--muted); flex: none; }
.dcard__t { font-size: 15px; line-height: 22.5px; font-weight: 500; color: var(--text); }
.dcard__p { margin-top: 12px; font-size: 12px; line-height: 24px; color: var(--muted); }
.detail-cards--light .dcard__t { font-weight: 300; font-size: 17px; line-height: 25.5px; }
.detail-cards--light .dcard__p { line-height: 28px; margin-top: 16px; }
.detail-cards--light .dcard__body { margin-top: 20px; flex-direction: column; gap: 0; }
@media (max-width: 1023px) { .detail-cards__grid { gap: 20px; } }
@media (max-width: 767px) {
  .detail-cards__grid { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
  .detail-cards--lined .detail-cards__grid { margin-top: 32px; padding-top: 20px; }
  .dcard__media { aspect-ratio: 350 / 260; }
  .dcard__n { padding-top: 0; font-size: 10px; line-height: 24px; width: 20px; }
  .dcard__t { font-size: 16px; line-height: 24px; }
  .dcard__p { font-size: 14px; line-height: 24px; }
  .detail-cards--light .dcard__p { font-size: 14px; line-height: 24px; }
  .detail-cards .shead__link { order: 9; }
}

/* ------------------------------------------------------------------ Блок: консультация */
.consult-cta { overflow: hidden; }
.consult-cta__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.consult-cta__copy { max-width: 575px; }
.consult-cta__copy .h2 { margin-top: 16px; }
.consult-cta__copy .txt { margin-top: 16px; }
.consult-cta .leaves { right: -40px; top: -60px; width: 640px; height: 460px; opacity: .35; transform: rotate(90deg); }
@media (max-width: 767px) {
  .consult-cta__in { flex-direction: column; align-items: stretch; gap: 28px; }
  .consult-cta .leaves { width: 260px; height: 300px; top: 0; right: -40px; opacity: .25; }
  .consult-cta .btn { justify-content: space-between; }
}

/* ------------------------------------------------------------------ Блок: превью портфолио и сетка портфолио */
.pf-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; }
.pcard { position: relative; display: flex; flex-direction: column; min-width: 0; }
.pcard__media { position: relative; display: block; aspect-ratio: 373 / 467; overflow: hidden; background: var(--surface); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__media > a { position: absolute; inset: 0; z-index: 1; }
.pcard__type { margin-top: 20px; font-size: 9px; line-height: 13.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pcard__head { margin-top: 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pcard__title { font-size: 17px; line-height: 25.5px; font-weight: 500; color: var(--text); }
.pcard__room { padding-top: 4px; font-size: 10px; line-height: 15px; color: var(--muted); text-align: right; }
.pcard__text { margin-top: 12px; font-size: 11px; line-height: 24px; color: var(--muted); }
.pcard__body { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pcard__label { font-size: 9px; line-height: 13.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pcard__task { margin-top: 8px; font-size: 11px; line-height: 24px; color: var(--muted); }
.pcard__quote { font-size: 12px; line-height: 24px; font-weight: 300; color: var(--text); }
.pcard__author { margin-top: 12px; font-size: 10px; line-height: 15px; font-weight: 500; color: var(--muted); }
/* слайдер фото в карточке */
.pcard__slider { position: absolute; inset: 0; }
.pcard__slider [data-slider-track] { width: 100%; height: 100%; }
.pcard__slider [data-slide] { width: 100%; height: 100%; }
.pcard__slider [data-slide] img { width: 100%; height: 100%; object-fit: cover; }
/* Кадры слайдера («проявление» раскладывает их сеткой) — ровно по рамке фото, иначе строка сетки растёт
   по высоте картинки и кадр обрезается сверху, а не по центру */
.pcard__slider [data-slider-track] { grid-template-rows: 100%; }
.pcard__slider [data-slide] { min-height: 0; overflow: hidden; }
.pcard__slider [data-slide] picture { display: block; width: 100%; height: 100%; }
.pcard__count { position: absolute; left: 16px; bottom: 16px; z-index: 3; min-width: 42px; padding: 8px 10px; background: color-mix(in srgb, var(--bg) 85%, transparent); font-size: 9px; line-height: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--text); text-align: center; }
.pcard__nav { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; gap: 4px; }
.pcard__nav button { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--text); transition: background-color var(--t); }
.pcard__nav button:hover { background: var(--bg); }
.pcard__nav .i { width: 16px; height: 16px; }
.pf-filters { margin-top: 36px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pf-filter { min-height: 64px; padding: 12px 16px; display: flex; align-items: center; text-align: left; border: 1px solid var(--line); font-size: 11px; line-height: 16.5px; font-weight: 500; color: var(--text); transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t); }
.pf-filter:hover { border-color: var(--text-30); }
.pf-filter.is-active { background: var(--brand); border-color: var(--brand); color: var(--bg); }
.pf-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--muted); font-size: 13px; }
.pcard.is-hidden { display: none; }
.portfolio-grid .pf-grid { margin-top: 36px; }
@media (max-width: 1023px) { .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .pf-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
  .pcard__media { aspect-ratio: 350 / 438; }
  .pcard__type { margin-top: 14px; font-size: 10px; line-height: 16px; letter-spacing: .15em; }
  .pcard__title { font-size: 20px; line-height: 24px; }
  .pcard__room { font-size: 11px; }
  .pcard__text { margin-top: 14px; font-size: 14px; line-height: 24px; }
  .pcard__quote { font-size: 14px; }
  .pcard__task { font-size: 14px; }
  .pf-filters { display: flex; overflow-x: auto; gap: 8px; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scrollbar-width: none; }
  .pf-filters::-webkit-scrollbar { display: none; }
  .pf-filter { flex: none; min-height: 48px; }
  .pf-preview__more { margin-top: 32px; }
}

/* ------------------------------------------------------------------ Блок: заголовок страницы */
.page-intro { padding-top: 32px; padding-bottom: 40px; }
.page-intro__crumbs { margin-bottom: 44px; }
.page-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 398px); gap: 40px 64px; align-items: end; }
.page-intro--wide .page-intro__grid { grid-template-columns: minmax(0, 553px) minmax(0, 553px); justify-content: space-between; }
/* Планшет: крупный заголовок («Пространство. Свет. Отражение.») не упирается в текст справа */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-intro--wide .page-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.page-intro__title { margin-top: 20px; }
/* Обычный заголовок страницы («Портфолио ALUMIRROR») — 48/48, как в макете; крупный (h1--xl) — свой */
@media (min-width: 768px) {
  .page-intro__title.h1:not(.h1--xl) { font-size: clamp(34px, 26px + 1.72vw, 48px); line-height: 1; }
  /* «Портфолио»: фильтры сразу под линией (отступ 36 — у самих фильтров) */
  .sec.page-intro--line:has(+ .sec.portfolio-grid) { padding-bottom: 0; }
}
.page-intro__text { font-size: 12px; line-height: 28px; color: var(--muted); }
.page-intro--wide .page-intro__text { font-size: 14px; line-height: 28px; max-width: 512px; }
.page-intro--line .page-intro__grid { padding-bottom: 40px; border-bottom: 1px solid var(--line); }
/* Крупный надзаголовок (12 px) — у вводного блока, текстовых колонок и «Личного менеджера», как в макете */
.eyebrow--big { font-size: 12px; line-height: 16px; letter-spacing: .1em; font-weight: 400; }
@media (max-width: 767px) {
  .page-intro { padding-top: 20px; padding-bottom: 32px; }
  .page-intro__crumbs { margin-bottom: 36px; }
  .page-intro__grid, .page-intro--wide .page-intro__grid { grid-template-columns: 1fr; gap: 24px; }
  .page-intro__text, .page-intro--wide .page-intro__text { font-size: 14px; line-height: 24px; }
}

/* ------------------------------------------------------------------ Блок: фото-обложка с текстом */
.image-hero { padding: 0; }
@media (min-width: 768px) { .image-hero:not(:has(.image-hero__crumbs)) { padding-top: 32px; } } /* в макете фото на 32 px ниже шапки */
.image-hero__crumbs { padding-block: 32px 32px; }
.image-hero__box { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; color: var(--surface-3); }
.image-hero__bg { position: absolute; inset: 0; }
.image-hero__bg img, .image-hero__bg picture { width: 100%; height: 100%; object-fit: cover; }
/* Планшет: у фото «Партнёрам» надпись справа — кадр прижат вправо, чтобы она не обрезалась */
@media (min-width: 768px) and (max-width: 1023px) { .image-hero:has(.image-hero__crumbs) .image-hero__bg img { object-position: 100% 50%; } }
.image-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--brand) var(--ov-a, 90%), transparent) 0%, color-mix(in srgb, var(--brand) var(--ov-b, 45%), transparent) 50%, transparent 100%); }
.image-hero__in { position: relative; z-index: 1; width: 100%; }
.image-hero__copy { max-width: 576px; }
.image-hero .eyebrow { color: color-mix(in srgb, var(--surface-3) 80%, transparent); font-weight: 400; }
.image-hero__title { margin-top: 20px; font-size: clamp(34px, 27px + 1.8vw, 50px); line-height: 1.2; font-weight: 300; letter-spacing: .02em; color: var(--surface-3); }
/* «Партнёрам» (обложка с крошками) — 48 px, «Индивидуальный заказ» — 50 px, как в макете */
@media (min-width: 768px) {
  .image-hero:has(.image-hero__crumbs) .image-hero__title { font-size: clamp(34px, 26px + 1.72vw, 48px); line-height: 1.25; }
  .image-hero:has(.image-hero__crumbs) .image-hero__text { max-width: 384px; }
}
.image-hero__text { margin-top: 24px; max-width: 448px; font-size: 13px; line-height: 28px; color: color-mix(in srgb, var(--surface-3) 90%, transparent); }
.image-hero__actions { margin-top: 32px; }
.image-hero__actions .btn { --btn-bg: var(--brand); }
@media (max-width: 767px) {
  .image-hero__crumbs { padding-block: 20px; }
  .image-hero__box { min-height: 396px; align-items: flex-end; }
  .image-hero__bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) var(--ovm-a, 15%), transparent) 0%, color-mix(in srgb, var(--brand) var(--ovm-b, 72%), transparent) 50%, color-mix(in srgb, var(--brand) 90%, transparent) 100%); }
  .image-hero__in { padding-block: 56px 28px; }
  /* с «хлебными крошками» (Партнёрам) фото в макете выше — 440 px, текст прижат к низу */
  .image-hero:has(.image-hero__crumbs) .image-hero__box { min-height: 440px; }
  .image-hero:has(.image-hero__crumbs) .image-hero__in { padding-bottom: 36px; }
  .image-hero__copy { padding-inline: 20px; }
  .image-hero__title { font-size: 34px; line-height: 42px; }
  .image-hero__text { font-size: 14px; line-height: 24px; }
  .image-hero__actions .btn { width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------------ Блок: первый экран с видео (производство) */
.split-hero { padding-top: 32px; padding-bottom: var(--pad-y); }
.split-hero__crumbs { margin-bottom: 52px; }
.split-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 566px); align-items: center; gap: 40px; }
/* Планшет: видео не забирает почти всю ширину — колонки поровну, иначе текст вытягивается в столбик по слову */
@media (min-width: 768px) and (max-width: 1023px) { .split-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.split-hero__title { margin-top: 20px; font-size: clamp(34px, 27.4px + 1.7vw, 48px); line-height: 1.25; font-weight: 300; letter-spacing: .02em; color: var(--text); }
.split-hero__text { margin-top: 24px; max-width: 468px; font-size: 12px; line-height: 28px; color: var(--muted); }
.vbox { position: relative; aspect-ratio: 566 / 420; overflow: hidden; background: #5e5e5e; }
.vbox img, .vbox video, .vbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vbox__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; translate: -50% -50%; border-radius: 50%; background: color-mix(in srgb, var(--surface-2) 92%, transparent); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t) var(--ease), background-color var(--t); }
.vbox__play .i { width: 22px; height: 22px; margin-left: 3px; }
.vbox__play:hover { transform: scale(1.08); background: var(--surface-3); }
.vbox__play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--surface-3) 60%, transparent); animation: vbox-ring calc(2.4s * var(--motion-speed)) var(--ease) infinite; }
@keyframes vbox-ring { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.vbox.is-playing .vbox__play, .vbox.is-playing > img { display: none; }
.vbox__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .18)); z-index: 1; pointer-events: none; }
@media (max-width: 767px) {
  .split-hero { padding-top: 20px; }
  .split-hero__crumbs { margin-bottom: 36px; }
  .split-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .split-hero__title { font-size: 34px; line-height: 42px; }
  .split-hero__text { font-size: 14px; line-height: 24px; }
  .vbox { aspect-ratio: 350 / 260; }
  .vbox__play { width: 56px; height: 56px; }
}

/* ------------------------------------------------------------------ Блок: цифры (о бренде) */
.stats-row__img { position: relative; aspect-ratio: 1168 / 530; overflow: hidden; background: var(--surface); }
.stats-row__img img { width: 100%; height: 100%; object-fit: cover; }
.stats-row__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.stats-row__item { padding: 40px; }
.stats-row__item + .stats-row__item { border-left: 1px solid var(--line); }
.stats-row__n { font-size: 36px; line-height: 40px; font-weight: 300; letter-spacing: -.025em; color: var(--text); }
.stats-row__l { margin-top: 12px; font-size: 12px; line-height: 24px; color: var(--muted); }
@media (max-width: 767px) {
  .stats-row__img { aspect-ratio: 350 / 250; }
  .stats-row__grid { grid-template-columns: 1fr; }
  .stats-row__item { padding: 24px 0; }
  .stats-row__item + .stats-row__item { border-left: 0; border-top: 1px solid var(--line); }
  .stats-row__n { font-size: 32px; }
}

/* ------------------------------------------------------------------ Блок: нумерованные пункты */
.num-grid__head { max-width: 640px; }
.num-grid__head .h2 { margin-top: 16px; }
.num-grid__head .lead { margin-top: 16px; }
.num-grid__grid:first-child { margin-top: 0 !important; }
.num-grid__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: 28px; row-gap: 0; }
.num-grid__item { padding: 24px 0 32px; border-top: 1px solid var(--line); }
.num-grid__n { font-size: 9px; line-height: 13.5px; color: var(--muted); }
.num-grid__t { margin-top: 20px; font-size: 17px; line-height: 25.5px; font-weight: 300; color: var(--text); }
.num-grid__p { margin-top: 16px; font-size: 11px; line-height: 24px; color: var(--muted); }
.num-grid__bul { margin-top: 14px; display: grid; gap: 8px; font-size: 12px; line-height: 22px; color: var(--muted); }
.num-grid__bul li { position: relative; padding-left: 18px; }
.num-grid__bul li::before { content: ""; position: absolute; left: 1px; top: 9px; width: 5px; height: 5px; border: 1px solid var(--muted); transform: rotate(45deg); }
.num-grid--medium .num-grid__t { font-weight: 500; font-size: 18px; line-height: 28px; margin-top: 28px; }
.num-grid--medium .num-grid__n { font-size: 12px; line-height: 16px; }
.num-grid--medium .num-grid__p { font-size: 14px; line-height: 28px; }
.num-grid__link { margin-top: 24px; }
@media (max-width: 1023px) { .num-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .num-grid__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .num-grid__item { display: grid; grid-template-columns: 38px 1fr; padding: 20px 0 32px; }
  .num-grid__n { font-size: 10px; line-height: 24px; }
  .num-grid__t { margin-top: 0; font-size: 17px; line-height: 24px; font-weight: 400; }
  .num-grid__p, .num-grid__bul { grid-column: 2; margin-top: 10px; font-size: 13px; line-height: 22px; }
  .num-grid--medium .num-grid__t { margin-top: 0; font-size: 17px; line-height: 24px; }
  .num-grid--medium .num-grid__p { font-size: 13px; line-height: 22px; }
  .num-grid__link { margin-top: 8px; }
  .num-grid__link .link-arrow { width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------------ Блок: текст в две колонки */
.text-cols__grid { display: grid; grid-template-columns: minmax(0, 512px) minmax(0, 553px); justify-content: space-between; gap: 32px 64px; align-items: start; }
.text-cols__title { margin-top: 20px; letter-spacing: 0; }
.text-cols__title.h2--m { font-size: clamp(28px, 22.5px + 1.4vw, 36px); }
@media (min-width: 768px) { .text-cols__title.h2--m { line-height: 1.375; } }
.text-cols__body { font-size: 14px; line-height: 32px; color: var(--muted); }
.text-cols__body > * + * { margin-top: 24px; }
.text-cols__links { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px 32px; }
@media (max-width: 767px) {
  .text-cols__grid { grid-template-columns: 1fr; }
  .text-cols__body { font-size: 14px; line-height: 26px; }
  .text-cols__links { flex-direction: column; }
  .text-cols__links .link-arrow { width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------------ Блок: этапы в плашке */
.process-steps__box { position: relative; padding: 44px 40px 40px; background: var(--surface-2); }
.process-steps__title { margin-top: 16px; }
.process-steps__grid { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.pstep__media { position: relative; aspect-ratio: 248 / 186; overflow: hidden; background: var(--surface); }
.pstep__media img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(1.4s * var(--motion-speed)) var(--ease-out); }
.pstep:hover .pstep__media img { transform: scale(1.05); }
.pstep__n { margin-top: 24px; font-size: 11px; line-height: 16.5px; color: var(--muted); }
.pstep__t { margin-top: 19px; font-size: 15px; line-height: 22.5px; font-weight: 500; color: var(--text); }
.pstep__p { margin-top: 16px; font-size: 11px; line-height: 24px; color: var(--muted); }
.process-steps__actions { margin-top: 64px; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
@media (max-width: 1023px) { .process-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .process-steps__box { padding: 36px 20px 40px; margin-inline: calc(-1 * var(--gut)); }
  .process-steps__grid { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }
  .pstep__media { aspect-ratio: 310 / 233; }
  /* как в макете: номер слева от названия, описание под названием */
  .pstep { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: baseline; }
  .pstep__media { grid-column: 1 / -1; }
  .pstep__n { grid-column: 1; margin-top: 20px; }
  .pstep__t { grid-column: 2; margin-top: 20px; }
  .pstep__p { grid-column: 2; margin-top: 10px; font-size: 14px; line-height: 24px; }
  .process-steps__actions { flex-direction: column; align-items: stretch; margin-top: 40px; }
  .process-steps__actions > * { width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------------ Блок: личный менеджер */
.manager-split__grid { display: grid; grid-template-columns: minmax(0, 584fr) minmax(0, 585fr); background: var(--surface-2); }
.manager-split { padding-block: 32px 40px; }
.portfolio-grid { padding-top: 32px; }
.stats-row { padding-bottom: 48px; }
.text-columns { padding-top: 56px; }
@media (max-width: 767px) { .text-columns { padding-top: 32px; } .stats-row { padding-bottom: 32px; } }
.manager-split__media { position: relative; min-height: 556px; overflow: hidden; }
.manager-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.manager-split__copy { padding: 47px 48px 48px; }
.manager-split__title { margin-top: 20px; font-size: clamp(26px, 21px + 1.3vw, 36px); line-height: 1.375; font-weight: 300; color: var(--text); }
.manager-split__body { margin-top: 28px; font-size: 14px; line-height: 32px; color: var(--muted); }
.manager-split__body > * + * { margin-top: 24px; }
@media (max-width: 767px) {
  .manager-split__grid { grid-template-columns: 1fr; background: none; }
  .manager-split__media { min-height: 0; aspect-ratio: 350 / 334; }
  .manager-split__copy { padding: 32px 0 0; }
  .manager-split__body { font-size: 14px; line-height: 26px; }
}

/* ------------------------------------------------------------------ Блок: форма индивидуального заказа */
.request-form { overflow: hidden; }
.request-form__grid { display: grid; grid-template-columns: minmax(0, 536px) minmax(0, 536px); justify-content: space-between; gap: 48px; }
.request-form__title { margin-top: 16px; }
.request-form__text { margin-top: 44px; max-width: 448px; font-size: 12px; line-height: 28px; color: var(--muted); }
.request-form__steps { margin-top: 36px; display: grid; gap: 20px; }
.rstep { display: grid; grid-template-columns: 36px 1fr; column-gap: 20px; }
.rstep__n { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text); background: color-mix(in srgb, var(--surface-3) 30%, transparent); }
.rstep__t { font-size: 13px; line-height: 19.5px; font-weight: 500; color: var(--text); padding-top: 0; }
.rstep__p { margin-top: 8px; font-size: 11px; line-height: 24px; color: var(--muted); }
.request-form .leaves { left: 12%; bottom: -40px; width: 330px; height: 330px; opacity: .25; transform: rotate(-90deg); }
@media (max-width: 767px) {
  .request-form__grid { grid-template-columns: 1fr; gap: 40px; }
  .request-form__text { margin-top: 20px; font-size: 14px; line-height: 24px; }
  .request-form__steps { margin-top: 28px; gap: 24px; }
  .rstep { column-gap: 16px; }
  .rstep__p { font-size: 12px; line-height: 22px; margin-top: 6px; }
}

/* ------------------------------------------------------------------ Блок: вкладки партнёров */
@media (min-width: 768px) { .sec.partners-tabs { padding-block: 56px; } } /* как в макете 1280/1440 */
.partners-tabs__grid { display: grid; grid-template-columns: minmax(0, 371px) minmax(0, 741px); justify-content: space-between; gap: 40px; padding-top: 56px; border-top: 1px solid var(--line); }
.ptabs__list { display: flex; flex-direction: column; }
.ptab { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 80px; padding: 20px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; line-height: 18px; color: var(--text); transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.ptab:hover { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.ptab .i { width: 16px; height: 16px; flex: none; transition: transform var(--t) var(--ease); }
.ptab.is-active { background: var(--brand); color: var(--bg); border-bottom-color: color-mix(in srgb, var(--line) 50%, transparent); }
.ptab.is-active .i { transform: rotate(0deg); }
.ptab__ico-m { display: none; }
.ptabs__panel { display: none; }
.ptabs__panel.is-active { display: block; }
.ptabs__title { font-size: clamp(26px, 21px + 1.3vw, 32px); line-height: 1.4; font-weight: 300; color: var(--text); max-width: 576px; }
.ptabs__text { margin-top: 20px; max-width: 576px; font-size: 12px; line-height: 28px; color: var(--muted); }
.ptabs__cond { margin-top: 28px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--text); }
.ptabs__list-c { margin-top: 18px; border-top: 1px solid var(--line-soft); }
.ptabs__list-c li { display: flex; align-items: flex-start; gap: 13px; padding: 12px 0 12px 1px; border-bottom: 1px solid var(--line-soft); font-size: 11px; line-height: 24px; color: var(--muted); }
.ptabs__list-c .i { width: 14px; height: 14px; margin-top: 5px; color: var(--text); }
.ptabs__actions { margin-top: 32px; }
.partners-tabs .leaves { left: 200px; bottom: 0; width: 230px; height: 430px; opacity: .25; }
@media (max-width: 767px) {
  .partners-tabs__grid { display: flex; flex-direction: column; padding-top: 40px; border-top: 0; gap: 0; }
  .ptabs__list { display: contents; }
  .ptab { order: calc(var(--o, 0) * 2); }
  .ptabs__panel { order: calc(var(--o, 0) * 2 + 1); }
  .ptab { min-height: 76px; padding: 20px 16px; font-size: 13px; line-height: 21px; }
  .ptab .i { display: none; }
  .ptab__ico-m { display: inline-flex; }
  .ptab__ico-m .i { display: block; transform: rotate(0); }
  .ptab.is-active .ptab__ico-m .i { transform: rotate(180deg); }
  .ptabs__panels { display: contents; }
  .ptabs__panel { padding: 32px 0 40px; }
  .ptabs__title { font-size: 26px; line-height: 36px; }
  .ptabs__text { font-size: 14px; line-height: 24px; }
  .ptabs__cond { font-size: 13px; line-height: 22px; font-weight: 400; }
  .ptabs__list-c li { padding: 16px 0; font-size: 13px; line-height: 22px; }
  .ptabs__actions .btn { width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------------ Блок: контакты */
.contacts__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 80px; }
.contacts__list { margin-top: 32px; display: grid; border-top: 1px solid var(--line); }
.contacts__row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 22px; }
.contacts__row dt { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
.contacts__row dd { color: var(--text); display: grid; gap: 4px; }
.contacts__row a { width: fit-content; transition: opacity var(--t); }
.contacts__row a:hover { opacity: .7; }
.contacts__row small { color: var(--muted); font-size: 11px; }
.contacts__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.contacts__msg { display: flex; gap: 10px; flex-wrap: wrap; }
.contacts__msg a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); font-size: 12px; transition: border-color var(--t); }
.contacts__msg a:hover { border-color: var(--text); }
.contacts__msg .i { width: 16px; height: 16px; }
.contacts__map { position: relative; min-height: 460px; background: var(--surface); overflow: hidden; }
.contacts__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25) sepia(.12); }
@media (max-width: 767px) {
  .contacts__grid { grid-template-columns: 1fr; }
  .contacts__row { grid-template-columns: 1fr; gap: 6px; font-size: 14px; }
  .contacts__map { min-height: 320px; margin-inline: calc(-1 * var(--gut)); }
}

/* ------------------------------------------------------------------ Блок: баннер акции */
.promo-banner__link { position: relative; display: block; overflow: hidden; background: var(--brand); }
.promo-banner__link img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; transition: transform calc(1.2s * var(--motion-speed)) var(--ease-out); }
.promo-banner__link:hover img { transform: scale(1.02); }
.promo-banner__btn { position: absolute; right: 24px; bottom: 20px; z-index: 2; }
.promo-banner__cap { display: none; }
@media (max-width: 767px) {
  .promo-banner__btn { position: static; width: 100%; justify-content: space-between; }
  .promo-banner__cap { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface-2); font-size: 12px; color: var(--text); }
  .promo-banner__link img { aspect-ratio: 3 / 1.4; }
}

/* ------------------------------------------------------------------ Блок: подборка товаров, плитки разделов */
.products-rail__track { margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.products-rail--carousel .products-rail__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 24px; }
.products-rail--carousel .products-rail__track > * { flex: 0 0 calc((100% - 72px) / 4); scroll-snap-align: start; }
.products-rail__track::-webkit-scrollbar { display: none; }
.products-rail__empty { margin-top: 24px; color: var(--muted); font-size: 12px; }
@media (max-width: 1023px) { .products-rail__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } .products-rail--carousel .products-rail__track > * { flex-basis: 44%; } }
@media (max-width: 767px) { .products-rail__track { gap: 32px 12px; margin-top: 32px; } .products-rail--carousel .products-rail__track > * { flex-basis: 72%; } }
.catalog-tiles__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 20px; }
.ctile { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); color: var(--surface-3); }
.ctile img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(1.2s * var(--motion-speed)) var(--ease-out); }
.ctile:hover img { transform: scale(1.05); }
.ctile__over { position: absolute; inset: auto 0 0 0; padding: 48px 20px 18px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--text) 70%, transparent)); display: grid; gap: 4px; }
.ctile__eyebrow { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.ctile__label { font-size: 16px; line-height: 1.35; font-weight: 400; }
.ctile__count { font-size: 10px; opacity: .75; }
@media (max-width: 1023px) { .catalog-tiles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .catalog-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ctile__label { font-size: 13px; } .ctile__over { padding: 32px 12px 12px; } }

/* ------------------------------------------------------------------ Блок: видеоотзывы */
.video-reviews__track { margin-top: 44px; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.video-reviews__track::-webkit-scrollbar { display: none; }
.vrev { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; }
.vrev__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.vrev__media img, .vrev__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vrev__ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px; font-size: 11px; color: var(--muted); }
.vrev__ph::before { content: ""; position: absolute; inset: 18% 22%; border: 1px solid color-mix(in srgb, var(--surface-3) 70%, transparent); border-radius: 48% 48% 6px 6px / 38% 38% 6px 6px; box-shadow: 0 0 40px color-mix(in srgb, var(--surface-3) 60%, transparent), inset 0 0 30px color-mix(in srgb, var(--surface-3) 40%, transparent); }
.vrev__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface-3) 85%, transparent); color: var(--brand); transition: transform var(--t) var(--ease); }
.vrev__play .i { width: 20px; height: 20px; margin-left: 3px; }
.vrev__play:hover { transform: scale(1.08); }
.vrev.is-playing .vrev__play, .vrev.is-playing img { display: none; }
.vrev__name { font-size: 13px; font-weight: 500; color: var(--text); }
.vrev__text { font-size: 11px; line-height: 20px; color: var(--muted); }
.video-reviews__nav { display: flex; gap: 8px; }
.video-reviews__nav button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); transition: border-color var(--t); }
.video-reviews__nav button:hover { border-color: var(--text); }
.video-reviews__nav .i { width: 16px; height: 16px; }
@media (max-width: 1023px) { .vrev { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 767px) { .vrev { flex-basis: 64%; } .video-reviews__nav { display: none; } }

/* ------------------------------------------------------------------ Блок: инфо-карточки (доставка), сравнение */
.info-cards__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 24px; }
.icard { padding: 32px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-3) 35%, transparent); display: flex; flex-direction: column; }
.icard__t { font-size: 18px; line-height: 1.4; font-weight: 400; color: var(--text); }
.icard__p { margin-top: 14px; font-size: 12px; line-height: 24px; color: var(--muted); }
.icard__p p + p { margin-top: 10px; }
.icard__rows { margin-top: auto; padding-top: 24px; display: grid; }
.icard__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 12px; }
.icard__rows dt { color: var(--muted); }
.icard__rows dd { color: var(--text); text-align: right; }
@media (max-width: 767px) { .info-cards__grid { grid-template-columns: 1fr; margin-top: 32px; } .icard { padding: 24px 20px; } .icard__p { font-size: 14px; } }
.versus__grid { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.versus__col { padding: 32px; border: 1px solid var(--line); }
.versus__col--accent { background: var(--brand); border-color: var(--brand); color: var(--surface-3); }
.versus__tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.versus__t { margin-top: 10px; font-size: 22px; font-weight: 300; }
.versus__list { margin-top: 22px; display: grid; gap: 12px; font-size: 12px; line-height: 22px; }
.versus__list li { display: flex; gap: 12px; }
.versus__list .i { width: 14px; height: 14px; margin-top: 4px; flex: none; }
.versus__col:not(.versus__col--accent) .versus__list { color: var(--muted); }
@media (max-width: 767px) { .versus__grid { grid-template-columns: 1fr; } .versus__col { padding: 24px 20px; } .versus__list { font-size: 14px; } }

/* ------------------------------------------------------------------ Блоки: текст, вопросы, призыв, видео, галерея, строка, таймер, отступ */
.rich-sec__head { margin-bottom: 40px; }
.rich-sec__head .h1 { margin-top: 20px; }
.rich-sec__lead { margin-top: 20px; max-width: 640px; }
.rich-sec__body { max-width: 860px; }
.rich-sec--narrow .rich-sec__body { max-width: 720px; }
.faq__list { margin-top: 36px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 15px; line-height: 1.5; color: var(--text); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .i { width: 16px; height: 16px; transition: transform var(--t) var(--ease); flex: none; }
.faq__item[open] .faq__q .i { transform: rotate(45deg); }
.faq__a { padding: 0 48px 24px 0; }
.cta__box { position: relative; padding: 56px; background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; gap: 32px; overflow: hidden; }
.cta--brand .cta__box { background: var(--brand); color: var(--surface-3); --text: var(--surface-3); --muted: color-mix(in srgb, var(--surface-3) 75%, transparent); }
.cta--brand .btn { --btn-bg: var(--surface-3); --btn-fg: var(--brand); }
.cta--brand .btn::before { background: var(--surface); }
.cta__copy { max-width: 640px; }
.cta__copy .h2 { margin-top: 14px; }
.cta__copy .txt { margin-top: 14px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; flex: none; }
@media (max-width: 767px) { .cta__box { flex-direction: column; align-items: stretch; padding: 32px 20px; margin-inline: calc(-1 * var(--gut)); } .cta__actions > * { width: 100%; justify-content: space-between; } }
.video-sec .vbox { aspect-ratio: var(--ar, 16 / 9); }
.video-sec__cap { margin-top: 12px; font-size: 11px; color: var(--muted); }
.gallery__grid { margin-top: 36px; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; }
.gallery__item { position: relative; overflow: hidden; background: var(--surface); aspect-ratio: var(--ar, 4 / 3); cursor: zoom-in; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(1.2s * var(--motion-speed)) var(--ease-out); }
.gallery__item:hover img { transform: scale(1.04); }
@media (max-width: 767px) { .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.marquee { overflow: hidden; padding-block: 28px; border-block: 1px solid var(--line); }
.marquee__track { display: flex; width: max-content; gap: 48px; font-size: clamp(28px, 4vw, 56px); font-weight: 300; letter-spacing: .02em; color: var(--text); white-space: nowrap; }
.marquee__sep { color: var(--gold); }
.countdown__box { padding: 48px; background: var(--brand); color: var(--surface-3); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.countdown__t { font-size: clamp(26px, 3vw, 36px); font-weight: 300; }
.countdown__p { margin-top: 10px; font-size: 12px; opacity: .8; }
.countdown__clock { display: flex; gap: 20px; }
.countdown__clock div { text-align: center; }
.countdown__clock b { display: block; font-size: 36px; font-weight: 300; font-variant-numeric: tabular-nums; }
.countdown__clock span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.spacer { padding: 0; }
.spacer__line { height: 1px; background: var(--line); }

/* ------------------------------------------------------------------ Уведомление о cookies */
.cookie { position: fixed; left: 20px; bottom: 20px; z-index: 85; display: flex; align-items: center; gap: 20px; max-width: 560px; padding: 18px 20px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: 11px; line-height: 18px; color: var(--muted); }
.cookie .btn { min-height: 40px; padding: 10px 20px; flex: none; }
@media (max-width: 767px) { .cookie { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; gap: 12px; } }

/* ------------------------------------------------------------------ Страница 404 */
.nf { padding-block: 120px 140px; text-align: center; }
.nf__mirror { width: 180px; height: 240px; margin: 0 auto 40px; border: 1px solid var(--line); border-radius: 90px 90px 4px 4px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 60px color-mix(in srgb, var(--surface-3) 80%, transparent), inset 0 0 40px color-mix(in srgb, var(--surface-3) 70%, transparent); }
.nf__mirror span { font-size: 44px; font-weight: 300; letter-spacing: .1em; color: var(--text); }
.nf .h2 { font-weight: 300; }
.nf .lead { margin-top: 16px; }
.nf__acts { margin-top: 36px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ Совместимость со старыми классами (шаблоны магазина до переделки) */
.stitle { font-size: clamp(24px, 3vw, 32px); font-weight: 300; line-height: 1.3; color: var(--text); margin-bottom: 28px; }
.stitle a { display: inline-flex; align-items: center; gap: 12px; }
.stitle .i { width: 20px; height: 20px; }
.btn--brand { --btn-bg: var(--brand); --btn-fg: var(--on-brand); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--text); box-shadow: inset 0 0 0 1px var(--text-30); }
.btn--lg { min-height: 52px; }

/* ==================================================================
   Мобильная версия по макету (страница «мобильные версии» нового .fig, 10.11.2026).
   Сверено с фреймами 390 px по каждому тексту: размеры и веса шрифтов, межстрочные, отступы секций, кадры.
   Только телефон (до 767 px); ПК не меняется.
   ================================================================== */
@media (max-width: 767px) {
  /* Типографика: в мобильном макете надзаголовки Medium, заголовки без разрядки, «хлебные крошки» 10/16 */
  .eyebrow--regular { font-weight: 500; }
  .h1, .h1--xl, .h2, .h2--light, .h2--m, .hero-home__title, .image-hero__title, .split-hero__title, .brand-banner__title { letter-spacing: 0; }
  .h2--s { font-size: 28px; line-height: 37px; }
  .crumbs { font-size: 10px; line-height: 16px; }

  /* Ссылка со стрелкой во всю ширину: тонкая линия цвета рамок, как в макете */
  .link-arrow::after { background: var(--line); }

  /* Главная: секции по высоте макета */
  .sec.feature-strip, .sec.feature-strip.pt-none { padding-top: 10px; }
  .shape-cards__grid { row-gap: 24px; }
  .media-text { padding-block: 8px 56px; }
  .sec.media-text--bleed, .sec.media-text--bleed.pt-m, .sec.media-text--bleed.pb-m { padding-block: 8px 28px; }
  .media-text--bleed .media-text__grid { row-gap: 28px; }
  /* «Зеркала для бизнеса и интерьерных проектов»: перенос строки — только для ПК, в мобильном макете его нет */
  .media-text--bleed .media-text__copy .h2 br { display: none; }
  .media-text__actions { margin-top: 20px; }
  .brand-banner__bottom { padding: 30px var(--gut) 36px; }
  .brand-banner__stats { margin-top: 22px; padding-top: 20px; }
  .brand-banner__mbtn { margin-top: 22px; }
  .consult-cta { padding-block: 48px; }
  .consult-cta__in { gap: 22px; }
  .pf-preview { padding-top: 36px; }

  /* Подвал: шаг 30 px, у ссылок зона нажатия 44 px */
  .ftr { padding: 40px 0 28px; }
  .ftr__grid { row-gap: 30px; padding-bottom: 30px; }
  .ftr__about { margin-top: 30px; }
  .ftr__links { margin-top: 8px; gap: 8px; }
  .ftr__links a { display: flex; align-items: center; min-height: 44px; }
  .ftr__col--wide { padding-top: 30px; }
  .ftr__bottom { padding-top: 30px; gap: 8px; }
  .ftr__bottom nav a { display: flex; align-items: center; min-height: 44px; font-size: 11px; }

  /* Заголовок страницы с линией (портфолио, доставка, гарантия…) — как шапка мобильного портфолио */
  .page-intro { padding-top: 24px; }
  .page-intro__crumbs { margin-bottom: 28px; }
  .page-intro--line { padding-bottom: 0; }
  .page-intro--line .page-intro__grid { gap: 0; padding-bottom: 28px; }
  .page-intro--line .page-intro__title { margin-top: 0; font-size: 28px; line-height: 37px; font-weight: 500; }
  /* «О бренде»: «Пространство. Свет. Отражение.» 34/42, надзаголовок 10 Medium */
  .eyebrow--big { font-size: 10px; line-height: 16px; letter-spacing: .15em; font-weight: 500; }
  .page-intro__title.h1--xl { font-size: 34px; line-height: 42px; }
  .page-intro--wide .page-intro__title { margin-top: 24px; }

  /* Цифры (о бренде): 28/36, подпись 12/22 */
  .stats-row__item { padding: 24px 0; }
  .stats-row__n { font-size: 28px; line-height: 36px; letter-spacing: 0; }
  .stats-row__l { margin-top: 10px; font-size: 12px; line-height: 22px; }

  /* Нумерованные пункты: шаг 20/22 и 10 между названием и текстом; «принципы» (medium) — номер над названием */
  .num-grid__grid { margin-top: 28px; }
  .num-grid__item { padding: 20px 0 22px; }
  .num-grid--medium .num-grid__item { display: block; padding: 20px 0 24px; }
  .num-grid--medium .num-grid__n { font-size: 10px; line-height: 16px; }
  .num-grid--medium .num-grid__t { margin-top: 16px; font-size: 17px; line-height: 26px; font-weight: 500; }
  .num-grid--medium .num-grid__p { margin-top: 16px; font-size: 14px; line-height: 24px; }

  /* Текст в две колонки (о бренде): 14/24 */
  .text-cols__title { margin-top: 16px; }
  .text-cols__body { font-size: 14px; line-height: 24px; }

  /* Этапы в плашке (производство): плашка внутри полей 20 px, текст 13/22 */
  .process-steps__box { margin-inline: 0; padding: 32px 20px; }
  .process-steps__grid { gap: 32px; margin-top: 32px; }
  .pstep__n, .pstep__t { margin-top: 18px; }
  .pstep__n { font-size: 10px; line-height: 24px; }
  .pstep__p { font-size: 13px; line-height: 22px; }
  /* О бренде: «Наш взгляд» и «Принципы» в макете одна секция — между текстом и списком 32 px */
  .text-cols__grid { row-gap: 24px; }
  .sec.text-columns:has(+ .numbered-grid) { padding-bottom: 0; }
  .sec.text-columns + .sec.numbered-grid, .sec.text-columns + .sec.numbered-grid.pt-m { padding-top: 32px; }
  .sec.text-columns:not(:first-child) { padding-top: 56px; }
  .sec.stats-row { padding-bottom: 0; }
  .sec.manager-split { padding-block: 0; }

  /* Личный менеджер (о бренде): бежевая плашка под фото, заголовок 28/37 */
  .manager-split__copy { padding: 32px 20px; background: var(--surface-2); }
  .manager-split__title { margin-top: 22px; font-size: 28px; line-height: 37px; }
  .manager-split__body { margin-top: 22px; font-size: 14px; line-height: 24px; }

  /* Индивидуальный заказ: между пунктами и формой в макете 34 + 22 px */
  .sec.numbered-grid:has(+ .request-form) { padding-bottom: 34px; }
  .sec.numbered-grid + .sec.request-form { padding-top: 22px; }
  /* Партнёрам: текст на обложке у поля 20 px (без внутреннего отступа), список направлений — 40 px от обложки */
  .image-hero:has(.image-hero__crumbs) .image-hero__copy { padding-inline: 0; }
  /* «Индивидуальный заказ»: надзаголовок обложки — с чертой и Medium, как в мобильном макете */
  .image-hero:not(:has(.image-hero__crumbs)) .eyebrow { font-weight: 500; }
  .image-hero:not(:has(.image-hero__crumbs)) .eyebrow::before { content: ""; width: 24px; height: 1px; flex: none; background: currentColor; opacity: .5; }
  .sec.partners-tabs { padding-top: 40px; overflow-x: clip; }
  .partners-tabs__grid { padding-top: 0; }
  /* тень листвы — как в мобильном макете (150×300 у правого края); на узких телефонах не расширяет страницу */
  .partners-tabs .leaves { left: auto; right: 0; top: 14px; bottom: auto; width: 150px; height: 300px; opacity: .18; }

  /* Форма заявки: кнопка отправки во всю ширину, подпись слева, стрелка справа */
  .request-form .btn[type="submit"], .rform .btn[type="submit"] { width: 100%; justify-content: space-between; }

  /* Партнёрам: вверху все четыре направления (раскрытое — тёмное), под ним условия, ниже — остальные три */
  .ptabs__list { display: flex; flex-direction: column; }
  .ptabs__panels { display: block; }
  .ptab, .ptabs__panel { order: 0; }
  .ptab { min-height: 76px; padding: 18px 16px; border: 0; border-bottom: 1px solid var(--line); }
  .ptabs__list .ptab:first-child, .ptabs__more .ptab:first-child, .ptabs__more .ptab.is-active + .ptab { border-top: 1px solid var(--line); }
  .ptab.is-active { border-color: var(--brand); }
  .ptabs__panel { padding: 28px 0 36px; }
  .ptabs__more { display: flex; flex-direction: column; padding-bottom: 1px; }
  .ptabs__more .ptab.is-active { display: none; }
  .partners-tabs:not(:has(.ptabs__panel.is-active)) .ptabs__more { display: none; }

  /* Портфолио: фильтр сеткой 2×3 вплотную, фото 350×320, шаг карточек 32, тексты как в макете */
  .portfolio-grid { padding-top: 28px; }
  .pf-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; overflow: visible; }
  .pf-filter { min-height: 60px; padding: 10px 12px; font-size: 11px; line-height: 17px; }
  .pf-filter:nth-child(even) { margin-left: -1px; }
  .pf-filter:nth-child(n + 3) { margin-top: -1px; }
  .pf-filter.is-active { position: relative; z-index: 1; }
  .pf-grid { gap: 32px; margin-top: 28px; }
  .portfolio-grid .pf-grid { margin-top: 28px; }
  .portfolio-grid .pcard__media { aspect-ratio: 350 / 320; } /* на странице портфолио; в превью на главной фото 350×438 */
  .pcard__type { margin-top: 12px; font-size: 10px; line-height: 16px; font-weight: 500; }
  .portfolio-grid .pcard__type { letter-spacing: 0; } /* в превью на главной — с разрядкой .15em */
  .pcard__head { margin-top: 6px; align-items: baseline; }
  .pcard__title { font-size: 20px; line-height: 24px; }
  .pcard__room { padding-top: 0; font-size: 11px; line-height: 13px; }
  .pcard__text { margin-top: 12px; font-size: 14px; line-height: 24px; }
  .pcard__body { margin-top: 12px; padding-top: 12px; }
  .pcard__label { font-size: 10px; line-height: 16px; letter-spacing: 0; font-weight: 500; }
  .pcard__task { margin-top: 8px; font-size: 14px; line-height: 24px; }
  .pcard__quote { font-size: 14px; line-height: 24px; font-weight: 400; color: var(--muted); }
  .pcard__author { margin-top: 8px; font-size: 11px; line-height: 13px; font-weight: 400; }
  .pcard__count { left: 12px; bottom: 12px; min-width: 43px; padding: 8px 12px; font-size: 10px; line-height: 12px; letter-spacing: 0; }
  .pcard__nav { right: 12px; bottom: 12px; }
  .pcard__nav button { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn::before, .link-arrow::before, .scard__media img, .dcard__media img, .pstep__media img, .ctile img, .mega__media img { transition: none !important; }
  .vbox__play::before { animation: none; }
}
@media print { .hdr, .ftr, .mnav, .modal, .toasts { display: none !important; } main { padding-top: 0; } body::before { display: none; } }