/* Hallmark · genre: editorial · macrostructure: Marquee Hero · theme: custom (warm-craft, deep burgundy)
 * H1 hero knobs: photographic fold, script slogan overlay, alignment=left-bias
 * nav: N6 masthead · footer: Ft1 mast-headed · section heads: S2 hanging
 * display: Cormorant Garamond · body: Manrope · script: Marck Script
 * axes: light / roman-serif / warm · studied: no · context: inferred
 * Pre-flight critique: P5 H5 E4 S5 R4 V5
 */

/* tokens.css подключён отдельным <link> в partials/head.php:
   @import грузится последовательно после site.css и задерживает первый рендер. */

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

html, body { overflow-x: clip; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* Мера для абзацев прозы */
.measure { max-width: 62ch; }

/* ---------- служебные заголовки секций (S2 hanging) ---------- */

.section { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.section:first-of-type { border-top: 0; }
.section__kicker {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.section__title { font-size: var(--text-2xl); max-width: 20ch; }
.section__lead { margin-top: var(--space-md); font-size: var(--text-md); color: var(--color-ink-2); }

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
  line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  padding: 0.95em 1.6em; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-accent);
  background: var(--color-accent); color: var(--color-on-accent);
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.btn:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.btn--ghost {
  background: transparent; color: var(--color-ink);
  border-color: var(--color-rule);
}
.btn--ghost:hover { background: var(--color-paper-3); border-color: var(--color-ink-2); }

.btn--on-carbon { border-color: var(--color-on-carbon-2); }

/* Типографическая ссылка-CTA (C3) */
.tlink {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 600; text-decoration: none; color: var(--color-ink);
  border-bottom: 1.5px solid var(--color-accent); padding-bottom: 2px;
  transition: color var(--dur-short) var(--ease-out), gap var(--dur-short) var(--ease-out);
}
.tlink:hover { color: var(--color-accent); gap: 0.7em; }
.tlink:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.tlink .arw { transition: transform var(--dur-short) var(--ease-out); }
.tlink:hover .arw { transform: translateX(3px); }

/* ---------- N6 · мастхед ---------- */

.topbar {
  border-bottom: 1px solid var(--color-rule-2);
  font-size: var(--text-sm); color: var(--color-muted);
}
.topbar__row {
  display: flex; align-items: center; gap: var(--space-md);
  padding-block: 0.55rem; flex-wrap: wrap;
}
.topbar__row .sp { flex: 1; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--color-ink); }
.topbar__phone { font-weight: 600; color: var(--color-ink); white-space: nowrap; }

.masthead { text-align: center; padding-block: var(--space-lg) var(--space-sm); }
.masthead__descriptor {
  font-size: var(--text-xs); letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: 0.35rem; padding-left: 0.42em;
}
.wordmark {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4rem); line-height: 0.9; color: var(--color-accent);
  text-decoration: none; display: inline-block;
}
.mastnav {
  border-top: 2px solid var(--color-ink); border-bottom: 1px solid var(--color-ink);
  margin-top: var(--space-sm);
}
.mastnav__list {
  list-style: none; margin: 0; padding: 0.7rem 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem 1.6rem;
}
.mastnav__list a {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; text-decoration: none; color: var(--color-ink);
  padding: 2px 0; border-bottom: 2px solid transparent;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.mastnav__list a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.mastnav__list a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.burger { display: none; }

/* ---------- Hero (Marquee / photographic fold) ---------- */

.hero { padding-block: var(--space-xl) var(--space-2xl); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl);
  align-items: center;
}
.hero__slogan {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--color-accent);
  line-height: 1; margin-bottom: var(--space-sm);
}
.hero__title { font-size: var(--text-display); font-weight: 600; max-width: 15ch; }
.hero__title em { font-style: normal; color: var(--color-accent); }
.hero__cta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; }
.facts {
  margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-xs) 0;
  border-top: 1px solid var(--color-rule); padding-top: var(--space-md);
}
.facts li {
  list-style: none; font-size: var(--text-sm); color: var(--color-ink-2);
  padding-right: var(--space-md); margin-right: var(--space-md);
  border-right: 1px solid var(--color-rule);
}
.facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.facts b { color: var(--color-ink); font-weight: 700; }

/* Плейсхолдер фотографии — честная «рамка под кадр», не фейковый сток */
.photo {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, var(--color-paper-3), var(--color-paper-2));
  border: 1px solid var(--color-rule);
  display: grid; place-content: center; text-align: center;
  color: var(--color-muted); min-height: 0;
}
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--color-rule) 0.6px, transparent 0.6px);
  background-size: 7px 7px; opacity: 0.35;
}
.photo__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.photo:has(.photo__img)::after { display: none; }   /* реальное фото — без плейсхолдер-точек */
.photo__label { position: relative; z-index: 1; font-size: var(--text-sm); padding: 1rem; max-width: 26ch; }
.photo__label b { display: block; color: var(--color-ink-2); font-weight: 600; margin-bottom: 2px; }
.hero__photo { aspect-ratio: 4 / 3; }

/* Первый экран — фоновый декор: мебельные эскизы + тёплое свечение */
.hero-band { position: relative; overflow: clip; }
.hero-band > .hero { position: relative; z-index: 1; }
.hero__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__defs { position: absolute; width: 0; height: 0; }
.hero__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 20% 6%, oklch(97.5% 0.014 76) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 100%, oklch(90% 0.012 60 / 0.6) 0%, transparent 60%);
}
.hero__sketch { position: absolute; color: var(--color-ink); height: auto; }
.hero__sketch use {
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* верхняя полоса (над контентом) */
.hero__sketch--wardrobe { left: 1%;    top: 5%;  width: clamp(52px, 7vw, 78px);   opacity: 0.13; stroke-width: 2.0; transform: rotate(-3deg); }
.hero__sketch--shelf    { left: 27%;   top: 1%;  width: clamp(64px, 8vw, 96px);   opacity: 0.12; stroke-width: 2.0; transform: rotate(2deg); }
.hero__sketch--lamp     { right: 34%;  top: 3%;  width: clamp(44px, 6vw, 64px);   opacity: 0.15; stroke-width: 2.2; }
.hero__sketch--chair    { right: 21%;  top: 1%;  width: clamp(54px, 7vw, 78px);   opacity: 0.14; stroke-width: 2.2; transform: rotate(4deg); }
.hero__sketch--ruler    { right: 2%;   top: 12%; width: clamp(90px, 11vw, 140px); opacity: 0.18; stroke-width: 2.2; transform: rotate(-4deg); }
/* нижний ряд (приподнят и сдвинут правее, целиком в кадре) */
.hero__sketch--kitchen  { left: 2%;    bottom: 14%; width: clamp(180px, 20vw, 300px); opacity: 0.11; stroke-width: 1.7; transform: rotate(2deg); }
.hero__sketch--dresser  { left: 62%;   bottom: 7%; width: clamp(88px, 11vw, 120px);  opacity: 0.11; stroke-width: 2.0; transform: rotate(2deg); }
.hero__sketch--sofa     { right: 5%;   bottom: 4%; width: clamp(116px, 14vw, 164px); opacity: 0.11; stroke-width: 2.0; transform: rotate(-2deg); }
@media (max-width: 820px) {
  .hero__sketch { display: none; }
  .hero__glow { opacity: 0.6; }
}

/* ---------- 2 · Рассрочка ---------- */

.rassrochka { background: var(--color-paper-2); }
.rassrochka .section__lead { max-width: 60ch; }
.rass-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-lg); border-top: 1px solid var(--color-rule);
}
.rass-row__item { padding: var(--space-md) var(--space-md) var(--space-md) 0; }
.rass-row__item + .rass-row__item { border-left: 1px solid var(--color-rule); padding-left: var(--space-md); }
.rass-row__k { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent); line-height: 1; }
.rass-row__v { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: 0.4rem; }

/* ---------- 3 · Категории (F6 product card grid, ирр. spans) ---------- */

.cats { margin-top: var(--space-lg); display: grid; gap: var(--space-md);
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat {
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  border: 1px solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-paper); transition: border-color var(--dur-short) var(--ease-out);
}
.cat:hover { border-color: var(--color-ink-2); }
.cat:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.cat--lead { grid-column: span 2; grid-row: span 2; }
.cat__photo { flex: 1; min-height: 150px; }
.cat--lead .cat__photo { min-height: 320px; }
.cat__photo .photo { height: 100%; border: 0; border-radius: 0; border-bottom: 1px solid var(--color-rule); }
.cat__photo .photo > * { transition: transform var(--dur-med) var(--ease-out); }
.cat:hover .cat__photo .photo__label,
.cat:hover .cat__photo .photo__img { transform: scale(1.03); }
.cat__body { padding: var(--space-sm) var(--space-md) var(--space-md); }
.cat__name { font-size: var(--text-md); }
.cat--lead .cat__name { font-size: var(--text-xl); }
.cat__desc { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: 0.25rem; }

/* ---------- 4 · Работы (лента / сетка) ---------- */

.works-strip {
  margin-top: var(--space-lg); display: grid; gap: var(--space-md);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.works-strip .photo { aspect-ratio: 4 / 5; }

/* ---------- Слайдер фото (hero + «Наши работы») ---------- */

.slider { position: relative; }
.slider:focus { outline: none; }
.slider:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-md); }
.slider__viewport {
  position: relative; overflow: hidden;
  border: 1px solid var(--color-rule); border-radius: var(--radius-md);
}
.slider__track {
  display: flex; height: 100%;
  transition: transform var(--dur-med) var(--ease-out);
  will-change: transform;
}
.slider__slide { flex: 0 0 100%; height: 100%; }
.slider__slide .photo { display: block; height: 100%; border: 0; border-radius: 0; }
.slider__slide .photo__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.slider--hero .slider__viewport { aspect-ratio: 4 / 3; }
.slider--works { margin-top: var(--space-lg); }
/* Фото работ — телефонные снимки разной ориентации (в основном вертикальные).
   Показываем целиком (contain) в компактной квадратной рамке-паспарту, без «зума». */
.slider--works .slider__viewport {
  aspect-ratio: 1 / 1; max-width: 640px; margin-inline: auto;
  background: linear-gradient(135deg, var(--color-paper-3), var(--color-paper-2));
}
.slider--works .slider__slide .photo { background: transparent; }
.slider--works .slider__slide .photo__img { object-fit: contain; }

.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-content: center; cursor: pointer;
  background: var(--color-paper); border: 1px solid var(--color-rule);
  color: var(--color-ink); font-size: 1.5rem; line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.slider__arrow:hover { background: var(--color-paper-2); border-color: var(--color-ink-2); }
.slider__arrow:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.slider__arrow--prev { left: var(--space-sm); }
.slider__arrow--next { right: var(--space-sm); }

.slider__dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: var(--space-md); }
.slider__dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--color-rule);
  transition: background var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.slider__dot[aria-current="true"] { background: var(--color-accent); transform: scale(1.3); }
.slider__dot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .slider__track { transition: none; }
}

/* ---------- 5 · Как работаем (F4 step sequence) ---------- */

.steps { margin-top: var(--space-lg); display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-md);
  padding-block: var(--space-md); border-top: 1px solid var(--color-rule);
}
.step:first-child { border-top: 0; }
.step__n {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600;
  color: var(--color-accent); line-height: 1;
}
.step__t { font-size: var(--text-md); font-family: var(--font-display); font-weight: 600; }
.step__d { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: 0.35rem; max-width: 58ch; }

/* «Пять шагов» на фоне 3D-проекта: рендер во всю ширину секции, приглушённый
   (не яркий цвет), под затемнением; текст этапов — поверх. Развёртка чертёж→ghost
   один раз при прокрутке (data-reveal + site.js «вооружает» и запускает). */
.steps-band { position: relative; overflow: hidden; background: var(--color-carbon); color: var(--color-on-carbon); border-top: 0; }
.steps-band .section__title { color: var(--color-on-carbon); }
.steps-band__sub { margin-top: var(--space-sm); max-width: 54ch; color: var(--color-on-carbon-2); font-size: var(--text-base); }
/* Читаемость держит сам текст (плотная тень-ореол), а не затемнение фона —
   поэтому рендер остаётся видимым. */
.steps-band .wrap { position: relative; z-index: 3; text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 1px 18px rgba(0,0,0,0.7); }
.steps-band .tlink { color: var(--color-on-carbon); }
.steps-band .steps { margin-top: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
.steps-band .step { border-top-color: var(--color-rule-carbon); }
.steps-band .steps .step:nth-child(2) { border-top: 0; }         /* верхний ряд (1,2) без разделителя */
.steps-band .step__t { color: var(--color-on-carbon); }
.steps-band .step__d { color: oklch(90% 0.012 70); font-weight: 500; }   /* ярче и плотнее */

/* фон-рендер (две копии: цветной внизу, чертёж сверху) */
.steps-band__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.reveal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reveal__img--color { z-index: 0; filter: grayscale(0.7) contrast(1.02) brightness(0.72); }
.reveal__img--blueprint {
  z-index: 1; opacity: 0;                        /* без JS виден приглушённый рендер */
  filter: grayscale(1) sepia(1) hue-rotate(200deg) saturate(1.3) brightness(0.62) contrast(1.05);
}
.reveal--armed .reveal__img--blueprint { opacity: 1; clip-path: inset(0 0 0 0); }
.steps-band.is-revealed .reveal__img--blueprint { animation: bp-wipe 3.6s var(--ease-in-out) forwards; }
@keyframes bp-wipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }

/* затемняющий слой — гарантирует читаемость текста поверх рендера */
.steps-band__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--color-carbon) 62%, transparent) 0%,
    color-mix(in oklab, var(--color-carbon) 50%, transparent) 55%,
    color-mix(in oklab, var(--color-carbon) 44%, transparent) 100%);
}

/* световая развёртка — над затемнением, но под текстом */
.reveal__scan {
  position: absolute; top: 0; bottom: 0; left: 0; width: 90px; z-index: 2; opacity: 0;
  transform: translateX(-90px); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5) 55%, rgba(255,255,255,0.82) 78%, rgba(255,255,255,0.5) 84%, transparent);
  mix-blend-mode: screen;
}
.steps-band.is-revealed .reveal__scan { animation: scan-move 3.6s var(--ease-in-out) forwards; }
@keyframes scan-move {
  0% { transform: translateX(-90px); opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(calc(100vw + 90px)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal--armed .reveal__img--blueprint { opacity: 0; animation: none; }  /* сразу приглушённый рендер */
  .reveal__scan { display: none; }
}

/* ---------- 6 · Поставщики (T2 logo wall hairline) ---------- */

.suppliers { background: var(--color-paper-2); }
.supp-wall {
  margin-top: var(--space-lg); display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden;
}
.supp {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  color: var(--color-ink-2); text-align: center; padding: var(--space-md) var(--space-sm);
  border-right: 1px solid var(--color-rule); border-top: 1px solid var(--color-rule);
}
.supp:nth-child(-n+4) { border-top: 0; }

/* ---------- 7 · Доверие (T4 stat strip, тёмная древесная секция) ---------- */

.trust { background: var(--color-carbon); color: var(--color-on-carbon); border-top: 0; }
.trust .section__kicker { color: var(--color-on-carbon-2); }
.stat-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg); margin-bottom: var(--space-lg);
}
.stat__n {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600;
  line-height: 1; color: var(--color-on-carbon); font-variant-numeric: tabular-nums;
}
.stat__l { font-size: var(--text-sm); color: var(--color-on-carbon-2); margin-top: 0.5rem; }
.trust__note { max-width: 60ch; color: var(--color-on-carbon-2); font-size: var(--text-base); }

/* ---------- 8 · Отзывы (T1 pull-quote) ---------- */

.reviews-grid {
  margin-top: var(--space-lg); display: grid; gap: var(--space-lg);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.review { border-top: 2px solid var(--color-accent); padding-top: var(--space-md); }
.review__q {
  font-family: var(--font-display); font-size: var(--text-md); line-height: 1.35;
  color: var(--color-ink);
}
.review__who { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: 600; }
.review__where { font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- 9 · Форма ---------- */

.leadform { background: var(--color-paper-2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); margin-top: var(--space-lg); align-items: start; }
.form { display: grid; gap: var(--space-sm); }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field input, .field textarea {
  font-family: var(--font-body); font-size: var(--text-base); color: var(--color-ink);
  padding: 0.85em 1em; border: 1.5px solid var(--color-rule); border-radius: var(--radius-sm);
  background: var(--color-paper); width: 100%;
  transition: border-color var(--dur-short) var(--ease-out);
}
.field input:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-accent);
}
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink-2); margin-top: 0.3rem; }
.consent input { margin-top: 0.2rem; accent-color: var(--color-accent); width: 1.05rem; height: 1.05rem; flex: none; }
.consent a { color: var(--color-accent); }
.form .btn { margin-top: var(--space-xs); justify-self: start; }
.form__status { margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.form__status--error { color: var(--color-accent); }
.form__status--ok { font-size: var(--text-base); font-weight: 600; }
.form.is-sent > :not(.form__status) { display: none; }
.field .is-invalid, .consent .is-invalid { border-color: var(--color-accent); outline: 1px solid var(--color-accent); }
.form-aside { font-size: var(--text-base); color: var(--color-ink-2); }
.form-aside p + p { margin-top: var(--space-md); }
.form-aside .ask { margin-top: var(--space-md); }

/* ---------- 10 · Контакты ---------- */

.contacts-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-xl); margin-top: var(--space-lg); align-items: start; }
dl.contacts { margin: 0; display: grid; gap: var(--space-md); }
.contacts dt { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.contacts dd { margin: 0.35rem 0 0; font-size: var(--text-md); font-weight: 500; line-height: 1.6; }
.contacts dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-rule); }
.contacts dd a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.contacts .map { aspect-ratio: 16 / 10; }

/* ---------- Ft1 · подвал ---------- */

.foot { background: var(--color-carbon); color: var(--color-on-carbon); padding-block: var(--space-2xl) var(--space-xl); }
.foot__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-xl); }
.foot__brand .wordmark { color: var(--color-on-carbon); }
.foot__slogan { font-family: var(--font-script); font-size: var(--text-lg); color: var(--color-on-carbon-2); margin-top: var(--space-xs); }
.foot h4 { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-on-carbon-2); font-weight: 600; margin-bottom: var(--space-sm); }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--text-sm); }
.foot__links a { color: var(--color-on-carbon); text-decoration: none; opacity: 0.9; }
.foot__links a:hover { opacity: 1; color: var(--color-on-carbon); border-bottom: 1px solid var(--color-accent); }
.foot__bottom {
  margin-top: var(--space-2xl); padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule-carbon);
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm); color: var(--color-on-carbon-2);
}
.foot__bottom .sp { flex: 1; }
.foot__pending { color: var(--color-on-carbon-2); font-style: italic; }

/* ---------- липкая мобильная CTA ---------- */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; padding: 0.7rem clamp(1rem, 4vw, 2rem);
  background: var(--color-paper); border-top: 1px solid var(--color-rule);
  transform: translateY(110%); transition: transform var(--dur-med) var(--ease-out);
}
.sticky-cta.is-shown { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }

/* ---------- Конструктор дизайна (аид для показа заказчику, в продакшн не идёт) ----------
   Палитра фонов + палитра акцентов выбором по образцам-точкам. */

.constructor {
  position: fixed; right: 1rem; bottom: 1rem; z-index: var(--z-preview);
  background: var(--color-carbon); color: var(--color-on-carbon);
  border: 1px solid var(--color-rule-carbon); border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem; display: grid; gap: 0.6rem;
  box-shadow: 0 8px 30px oklch(24% 0.02 45 / 0.30);
  max-width: calc(100vw - 2rem); font-family: var(--font-body);
}
.constructor__group { display: grid; gap: 0.4rem; }
.constructor__label { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-on-carbon-2); }
.constructor__dots { display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: 15rem; }

.dot {
  width: 1.6rem; height: 1.6rem; border-radius: 999px; cursor: pointer; padding: 0;
  background: var(--c, var(--color-paper));
  border: 0; box-shadow: 0 0 0 1px var(--color-rule-carbon) inset;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.dot:hover { transform: scale(1.12); }
.dot:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--color-carbon), 0 0 0 4px var(--color-on-carbon); }

/* Образцы фонов */
.dot[data-bg="ivory"]  { --c: oklch(96%   0.010 70); }
.dot[data-bg="linen"]  { --c: oklch(97.5% 0.009 76); }
.dot[data-bg="oat"]    { --c: oklch(95%   0.018 78); }
.dot[data-bg="sand"]   { --c: oklch(92.5% 0.024 74); }
.dot[data-bg="clay"]   { --c: oklch(94%   0.020 55); }
.dot[data-bg="greige"] { --c: oklch(95%   0.006 95); }
.dot[data-bg="sage"]   { --c: oklch(94.5% 0.014 135); }
.dot[data-bg="fog"]    { --c: oklch(95.5% 0.005 240); }

/* Образцы акцентов */
.dot[data-set="burgundy"]   { --c: oklch(34% 0.115 20); }
.dot[data-set="marsala"]    { --c: oklch(38% 0.10  15); }
.dot[data-set="raspberry"]  { --c: oklch(44% 0.16  10); }
.dot[data-set="cherry"]     { --c: oklch(45% 0.17  25); }
.dot[data-set="bright"]     { --c: oklch(48% 0.205 28); }
.dot[data-set="terracotta"] { --c: oklch(50% 0.13  40); }

/* на мобильном поднимаем над липкой кнопкой «Замер» */
@media (max-width: 640px) {
  .constructor { bottom: 4.75rem; right: 0.75rem; padding: 0.6rem 0.7rem; }
  .constructor__dots { max-width: calc(100vw - 3rem); }
}

/* ---------- вступительная анимация (одна, оркестрованная) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise var(--dur-long) var(--ease-out) forwards; }
  .rise:nth-child(2) { animation-delay: 70ms; }
  .rise:nth-child(3) { animation-delay: 140ms; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ================= Адаптив ================= */

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .slider--hero { order: -1; }
  .slider--hero .slider__viewport { aspect-ratio: 16 / 9; }
  .steps-band .steps { grid-template-columns: 1fr; }
  .steps-band .steps .step:nth-child(2) { border-top: 1px solid var(--color-rule-carbon); }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat--lead { grid-column: span 2; grid-row: auto; }
  .cat--lead .cat__photo { min-height: 200px; }
  .works-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supp-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supp:nth-child(-n+4) { border-top: 1px solid var(--color-rule); }
  .supp:nth-child(-n+2) { border-top: 0; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .reviews-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .form-grid, .contacts-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .mastnav { display: none; }
  .burger {
    display: inline-flex; margin-left: auto; align-items: center; gap: 0.5rem;
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
    border: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink);
    padding: 0.5rem 0.8rem; border-radius: var(--radius-sm); cursor: pointer;
  }
  .topbar__row { justify-content: center; }
  .topbar__addr { display: none; }
  .masthead { padding-top: var(--space-md); }
  .section { padding-block: var(--space-xl); }
  .section__title { font-size: var(--text-xl); }
  .rass-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .rass-row__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .rass-row__item:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
  .cats, .works-strip { grid-template-columns: 1fr; }
  .cat--lead { grid-column: auto; }                       /* span 2 в одной колонке ломал сетку */
  .cat--lead .cat__photo, .cat__photo { flex: none; height: 220px; min-height: 0; }
  .cat__photo .photo { display: block; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 3rem 1fr; gap: var(--space-sm); }
  .sticky-cta { display: block; }
  .facts { flex-direction: column; }
  .facts li { border-right: 0; margin-right: 0; padding-right: 0; padding-block: 0.15rem; }
}

@media (max-width: 380px) {
  .wordmark { font-size: 2.4rem; }
  .foot__top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   СТРАНИЦЫ ВТОРОГО УРОВНЯ · категория · портфолио · карточка · статика · материалы
   Одна дизайн-система (design.md), каждая страница — своя макроструктура.
   Токены, N6-мастхед, Ft1-подвал, S2-заголовки, кнопки, форма, фото-плейсхолдеры —
   общие с главной.
   ========================================================================== */

/* активный пункт меню + хлебные крошки (сквозные) */
.mastnav__list a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.crumbs { padding-top: var(--space-md); }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  font-size: var(--text-sm); color: var(--color-muted);
}
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.crumbs li::after { content: "→"; margin-left: 0.35rem; color: var(--color-rule); }
.crumbs li:last-child::after { content: none; }
.crumbs [aria-current="page"] { color: var(--color-ink-2); }

/* ---------- Обложка страницы категории (Long Document) ---------- */

.pagehead { padding-block: var(--space-lg) var(--space-xl); }
.pagehead__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); align-items: center;
}
.pagehead__photo { aspect-ratio: 4 / 3; }
.pagehead h1 { font-size: var(--text-display-s); max-width: 16ch; }
.pagehead__lead { margin-top: var(--space-md); font-size: var(--text-md); color: var(--color-ink-2); max-width: 48ch; }
.pagehead__cta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; }

/* блок «место под цены» — скрыт, пока нет вилок */

/* ---------- Карточки материалов фасадов ---------- */

.matgrid { margin-top: var(--space-lg); display: grid; gap: var(--space-md); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.matcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper); padding: var(--space-md);
  transition: border-color var(--dur-short) var(--ease-out);
}
a.matcard:hover { border-color: var(--color-ink-2); }
a.matcard:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.matcard__name { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
.matcard__desc { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: 0.4rem; }
.matcard__more { margin-top: auto; padding-top: var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }

/* ---------- Проза категории / статики ---------- */

.prose { max-width: 68ch; }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-lg); }
.prose h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); letter-spacing: 0.01em; margin-top: var(--space-md); color: var(--color-ink); }
.prose p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.prose p + p { margin-top: var(--space-sm); }
.prose ul { margin-top: var(--space-sm); padding-left: 1.15rem; color: var(--color-ink-2); }
.prose li { margin-top: 0.3rem; }
.prose li::marker { color: var(--color-accent); }
.prose strong { color: var(--color-ink); font-weight: 700; }

/* ---------- «Как работаем» — свёрнутый ряд ---------- */

.steps-mini { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; list-style: none; padding: 0; }
.steps-mini li { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.steps-mini li::after { content: "→"; margin-left: 0.75rem; color: var(--color-accent); }
.steps-mini li:last-child::after { content: none; }

/* ---------- FAQ-аккордеон (нативный details) ---------- */

.faq { margin-top: var(--space-lg); max-width: 74ch; border-top: 1px solid var(--color-rule); }
.faq__item { border-bottom: 1px solid var(--color-rule); }
.faq__item > summary {
  list-style: none; cursor: pointer; display: flex; gap: var(--space-md); align-items: flex-start; justify-content: space-between;
  padding-block: var(--space-md); font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; color: var(--color-ink);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.faq__mark { flex: none; font-family: var(--font-body); color: var(--color-accent); font-size: var(--text-xl); line-height: 1; transition: transform var(--dur-short) var(--ease-out); }
.faq__item[open] .faq__mark { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--space-md); color: var(--color-ink-2); font-size: var(--text-base); max-width: 64ch; }

/* ---------- Портфолио (Catalogue Grid) ---------- */

.count { font-variant-numeric: tabular-nums; color: var(--color-accent); font-weight: 700; }

.chips { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); }
.chips--sub { margin-top: var(--space-sm); }
.chip {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  background: var(--color-paper); color: var(--color-ink);
  border: 1.5px solid var(--color-rule); border-radius: 999px; padding: 0.5em 1.1em;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.chip:hover { border-color: var(--color-ink-2); }
.chip:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.chip[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

.pgrid { margin-top: var(--space-lg); display: grid; gap: var(--space-md); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.work { position: relative; text-decoration: none; color: inherit; display: block; }
.work .photo { aspect-ratio: 4 / 5; }
.work .photo > * { transition: transform var(--dur-med) var(--ease-out); }
.work--project:hover .photo__label { transform: scale(1.03); }
.work--project .photo { border-color: var(--color-ink-2); }
.work__tag {
  position: absolute; left: 0.6rem; top: 0.6rem; z-index: 2;
  background: var(--color-accent); color: var(--color-on-accent);
  font-size: var(--text-xs); font-weight: 600; padding: 0.25em 0.6em; border-radius: var(--radius-sm);
}
.work__cap { margin-top: 0.5rem; font-size: var(--text-sm); color: var(--color-ink-2); }
.work__cap b { color: var(--color-ink); font-weight: 600; }
.work:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.load-more { margin-top: var(--space-xl); display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }
.load-more [hidden] { display: none; }

/* ---------- Карточка проекта (Record / Spec-sheet) ---------- */

.gallery { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
.gallery__main { aspect-ratio: 3 / 2; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.gallery__thumb {
  aspect-ratio: 1 / 1; cursor: pointer; padding: 0; background: none;
  border: 2px solid transparent; border-radius: var(--radius-md); overflow: hidden; display: block; width: 100%;
}
.gallery__thumb .photo { display: block; height: 100%; border: 0; border-radius: calc(var(--radius-md) - 2px); }
.gallery__thumb .photo__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gallery__thumb[aria-current="true"] { border-color: var(--color-accent); }
.gallery__thumb:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.project-body { margin-top: var(--space-xl); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: start; }
.project-body h1 { font-size: var(--text-2xl); }
.project-lead { margin-top: var(--space-md); font-size: var(--text-md); color: var(--color-ink-2); }

.spec { margin-top: var(--space-xs); border-top: 1px solid var(--color-rule); }
.spec > div { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.spec dt { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.spec dd { margin: 0; font-size: var(--text-base); font-weight: 500; color: var(--color-ink); }

/* ---------- Статичная страница (Letter) ---------- */

.article { max-width: 74ch; }
.article .prose { max-width: none; }
.article__lead { margin-top: var(--space-md); font-size: var(--text-md); color: var(--color-ink-2); max-width: 60ch; }

.spec-table { margin-top: var(--space-lg); border-collapse: collapse; width: 100%; max-width: 40rem; }
.spec-table th, .spec-table td { text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid var(--color-rule); font-size: var(--text-base); }
.spec-table th { font-family: var(--font-body); font-weight: 600; color: var(--color-muted); width: 45%; }

.steps-list { counter-reset: s; list-style: none; padding: 0; margin-top: var(--space-lg); max-width: 60ch; }
.steps-list li { counter-increment: s; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-sm); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }
.steps-list li::before { content: counter(s); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-accent); line-height: 1.2; }

.sidelinks { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }

.legal-note { margin-top: var(--space-lg); padding: var(--space-md); border: 1px dashed var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 60ch; }
.legal-note b { color: var(--color-ink); }

/* ---------- Каталог образцов (страницы материалов) ---------- */

.swatch-note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }
.swatches { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.swatch { display: flex; flex-direction: column; gap: 0.35rem; text-align: left; }
.swatch__chip {
  aspect-ratio: 1 / 1; border-radius: var(--radius-md);
  border: 1px solid var(--color-rule); position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--color-paper-3), var(--color-paper-2));
}
.swatch__chip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--color-rule) 0.6px, transparent 0.6px);
  background-size: 6px 6px; opacity: 0.3;
}
.swatch__cap { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.3; }
.swatch__cap b { display: block; color: var(--color-ink-2); font-weight: 600; }

/* каталог эмали RAL — плотная сетка реальных цветных плашек (код → hex).
   auto-fill, поэтому одинаково хорош на 320 и 1280; .swatches.swatches--ral
   специфичнее фиксированных колонок из медиазапросов ниже — они его не трогают.
   Подпись — только RAL-код (компактно); полное имя цвета — в title при наведении. */
.swatches.swatches--ral { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: var(--space-sm) var(--space-xs); margin-top: 0; }
.swatch--ral { cursor: default; }
.swatch--ral .swatch__chip { aspect-ratio: 1 / 1; background-image: none; }
.swatch--ral .swatch__chip::after { display: none; }        /* реальный цвет — без плейсхолдер-точек */
.swatch--ral .swatch__cap { font-size: 0.68rem; }
.swatch--ral .swatch__cap b { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* каталог свёрнут по умолчанию: виден тизер из пары рядов + затухание.
   Кнопка «Показать все» снимает клэмп; клик по фильтру-группе тоже (см. site.js). */
.ral-cat { position: relative; margin-top: var(--space-lg); }
.ral-cat.is-clamped { max-height: 19rem; overflow: hidden; }
.ral-cat.is-clamped::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 6rem; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-paper));
}
.ral-cat__more { margin-top: var(--space-md); }

/* курированный ряд «ходовые для кухонь» — крупнее, с именами цветов */
.ral-sub { margin-top: var(--space-xl); font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); color: var(--color-ink); }
.ral-sub--first { margin-top: var(--space-lg); }
.swatches.swatches--pop { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: var(--space-md) var(--space-sm); margin-top: var(--space-sm); }
.swatch--pop .swatch__cap { font-size: var(--text-xs); }

/* показать ещё / фильтры прячут плитки */
.is-collapsed { display: none !important; }
.is-hidden { display: none !important; }

/* ================= Адаптив страниц второго уровня ================= */

@media (max-width: 960px) {
  .pagehead__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .pagehead__photo { aspect-ratio: 16 / 9; order: -1; }
  .matgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-body { grid-template-columns: 1fr; gap: var(--space-lg); }
  .gallery__main { aspect-ratio: 16 / 10; }
  .swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .pagehead { padding-block: var(--space-md) var(--space-lg); }
  .pagehead h1 { font-size: var(--text-xl); }
  .matgrid { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spec > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .spec-table th { width: auto; }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq__item > summary { font-size: var(--text-base); }
}

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

/* ============================================================
   Правки заказчика · 2026-09-02
   1) ярче преимущества (.facts) и рассрочка (.rass-row)
   2) лайтбокс портфолио
   3) реальные цветные плашки пластика (.swatch--real)
   Блок-оверрайд в конце файла — специфичность решает порядок.
   ============================================================ */

/* --- Преимущества под hero: акцентная плашка --- */
.facts {
  background: var(--color-accent-soft);
  border: 1px solid color-mix(in oklab, var(--color-accent) 25%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid color-mix(in oklab, var(--color-accent) 25%, transparent);
}
.facts li { color: var(--color-ink); border-right-color: color-mix(in oklab, var(--color-accent) 25%, transparent); }
.facts b { color: var(--color-accent); font-weight: 700; }

/* --- Рассрочка: акцентная карта, крупнее цифры --- */
.rass-row {
  background: var(--color-accent-soft);
  border: 1px solid color-mix(in oklab, var(--color-accent) 22%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--color-accent) 22%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-md);
}
.rass-row__item + .rass-row__item { border-left-color: color-mix(in oklab, var(--color-accent) 22%, transparent); }
.rass-row__k { font-size: var(--text-2xl); font-weight: 600; }
@media (max-width: 640px) {
  .rass-row { padding-inline: 0; }
  .rass-row__item { padding-inline: var(--space-md); }
  .rass-row__item:nth-child(3) { border-left: 0; padding-left: var(--space-md); }
  .rass-row__item:nth-child(n+3) { border-top: 1px solid color-mix(in oklab, var(--color-accent) 22%, transparent); }
}

/* --- Плитки портфолио кликабельны как фото (курсор-зум) --- */
.work:has(.photo__img) { cursor: zoom-in; }

/* --- Лайтбокс --- */
.lightbox {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--color-carbon) 92%, black);
  padding: var(--space-lg);
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: min(1100px, 94vw); max-height: 86vh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.lightbox__cap {
  position: absolute; left: 0; right: 0; bottom: calc(var(--space-md) + 3.1rem);
  text-align: center; color: var(--color-on-carbon);
  font-size: var(--text-sm); padding: 0 var(--space-lg);
}
.lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-rule-carbon);
  background: color-mix(in oklab, var(--color-carbon) 70%, transparent);
  color: var(--color-on-carbon); font-size: 1.5rem; line-height: 1;
  display: grid; place-content: center;
}
.lightbox__btn:hover { background: var(--color-carbon-2); }
.lightbox__prev { left: var(--space-md); }
.lightbox__next { right: var(--space-md); }
.lightbox__close {
  position: absolute; top: var(--space-md); right: var(--space-md);
  width: 2.75rem; height: 2.75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-rule-carbon);
  background: color-mix(in oklab, var(--color-carbon) 70%, transparent);
  color: var(--color-on-carbon); font-size: 1.4rem; line-height: 1;
  display: grid; place-content: center;
}
.lightbox__close:hover { background: var(--color-carbon-2); }
@media (max-width: 640px) {
  .lightbox__btn { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; }
  .lightbox { padding: var(--space-sm); }
}

/* --- Реальные цветные плашки пластика (без плейсхолдер-точек) --- */
.swatch--real .swatch__chip { background-image: none; }
.swatch--real .swatch__chip::after { display: none; }
.swatch--real .swatch__cap b { color: var(--color-ink); }

/* ===== Свечение внутренних страниц — то же, что на главной (.hero__glow) ===== */
:root{
  --sk-glow:
    radial-gradient(120% 90% at 20% 6%, oklch(97.5% 0.014 76) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 100%, oklch(90% 0.012 60 / 0.6) 0%, transparent 60%);
}
.facts,.rass-row{background:color-mix(in oklab, var(--color-accent) 8%, var(--color-paper));}
.pagehead,.pagedecor{position:relative;}
.pagehead>*,.pagedecor>*{position:relative;z-index:1;}
.pagehead::before,.pagedecor::before{content:"";position:absolute;z-index:0;pointer-events:none;left:50%;width:100vw;margin-left:-50vw;top:0;background:var(--sk-glow);}
.pagehead::before{bottom:0;}
.pagedecor::before{height:clamp(210px,34vh,340px);-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);mask-image:linear-gradient(to bottom,#000 62%,transparent);}
@media (max-width:820px){.pagehead::before,.pagedecor::before{opacity:0.6;}}

/* Отметка «по какой акции/работе» над формой + кнопка «Хочу такую же» в лайтбоксе */
.form__pick {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 var(--space-s);
  padding: .55rem .75rem;
  font-size: var(--text-sm); line-height: 1.4;
  color: var(--color-ink);
  background: color-mix(in oklch, var(--color-accent) 8%, transparent);
  border-left: 2px solid var(--color-accent);
  border-radius: 2px;
}
.form__pick-drop {
  margin-left: auto; flex: none;
  width: 1.6rem; height: 1.6rem;
  font-size: .8rem; line-height: 1;
  color: var(--color-ink-2);
  background: none; border: 0; border-radius: 50%;
  cursor: pointer;
}
.form__pick-drop:hover { color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 12%, transparent); }

.lightbox__pick {
  position: absolute; left: 50%; bottom: var(--space-md); transform: translateX(-50%);
  padding: .55rem 1.1rem;
  font: inherit; font-size: var(--text-sm);
  color: var(--color-paper); background: var(--color-accent);
  border: 0; border-radius: 2px; cursor: pointer;
  white-space: nowrap;
}
.lightbox__pick:hover { filter: brightness(1.15); }

/* Баннер согласия на cookie — появляется, только когда на сайте есть счётчики */
.cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-md);
  padding: var(--space-s) var(--space-md);
  background: var(--color-carbon); color: var(--color-on-carbon);
  border-top: 1px solid var(--color-rule-carbon);
}
.cookiebar[hidden] { display: none; }
.cookiebar__text { flex: 1 1 22rem; margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.cookiebar__text a { color: var(--color-on-carbon); text-decoration: underline; }
.cookiebar__acts { display: flex; gap: .6rem; flex: none; }
.cookiebar__btn {
  padding: .5rem 1rem; font: inherit; font-size: var(--text-sm); cursor: pointer;
  color: var(--color-paper); background: var(--color-accent);
  border: 1px solid var(--color-accent); border-radius: 2px;
}
.cookiebar__btn--ghost { color: var(--color-on-carbon); background: none; border-color: var(--color-rule-carbon); }
.cookiebar__btn:hover { filter: brightness(1.15); }
@media (max-width: 40rem) {
  .cookiebar { padding-bottom: calc(var(--space-s) + 4.2rem); }  /* не перекрываем липкую кнопку замера */
  .cookiebar__acts { width: 100%; }
  .cookiebar__btn { flex: 1; }
}