/* MERIT & MATTER — премиальный минимализм по ТЗ §8.
   Палитра ТЗ: ivory #F2EFEA · greige #D9D5CF · графит #1E1F22 · серый #8C8F93 · медь #A86733.
   Подпись страницы: вертикальная ось «точки опоры» с медными точками секций. */

:root {
  --ivory: #F2EFEA;
  --greige: #D9D5CF;
  --ink: #1E1F22;
  --grey: #8C8F93;
  --copper: #A86733;
  --copper-soft: rgba(168, 103, 51, 0.35);
  --serif: "Playfair Display", "Georgia", serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --shell: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 32px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 0.6em; }
h3 { font-size: 1.25rem; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--copper); outline-offset: 3px;
}

.eyebrow {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 1.4em;
}

/* ── Шапка ── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--greige);
}
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 24px; }
.brand { text-decoration: none; display: flex; flex-direction: column; gap: 1px; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.06em; }
.brand-sub { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--grey); }
.site-nav { display: flex; align-items: center; gap: 34px; }
.site-nav a {
  text-decoration: none; font-size: 0.92rem; font-weight: 500;
  color: var(--ink); padding: 4px 0;
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.site-nav a:hover { border-bottom-color: var(--copper); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--copper); }
.lang-switch {
  border: 1px solid var(--greige) !important; border-radius: 2px;
  padding: 5px 12px !important; letter-spacing: 0.1em; font-size: 0.8rem !important;
}
.lang-switch:hover { border-color: var(--copper) !important; }
.nav-toggle { display: none; }

/* ── Hero ── */
.hero { padding: 96px 0 110px; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 48px; align-items: center;
}
.hero-sub { font-size: 1.15rem; color: var(--ink); max-width: 34em; margin: 1.2em 0 2em; }
.hero-art { display: flex; justify-content: center; }

.beacon { width: min(300px, 100%); height: auto; }
.bc-axis { stroke: var(--ink); stroke-width: 1.5; }
.bc-base { stroke: var(--ink); stroke-width: 1.5; }
.bc-dot { fill: var(--copper); }
.bc-beams line { stroke: var(--copper); stroke-width: 1; opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .bc-beams { animation: beam-pulse 6s ease-in-out infinite; transform-origin: 160px 96px; }
  @keyframes beam-pulse {
    0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; }
  }
}

/* ── Секции с осью ── */
.section { padding: 110px 0; }
.section-alt { background: linear-gradient(var(--greige) 1px, transparent 1px) top / 100% 100% no-repeat; background-color: color-mix(in srgb, var(--greige) 38%, var(--ivory)); }
.axis-section .shell { position: relative; padding-left: 72px; }
.axis-section .shell::before {
  content: ""; position: absolute; left: 33px; top: 6px; bottom: 0;
  width: 1px; background: var(--greige);
}
.section-mark { position: relative; }
.section-mark::before {
  content: ""; position: absolute; left: -43px; top: 0.15em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--copper);
}
.lede { font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.5; font-family: var(--serif); max-width: 30em; }
.section-intro { max-width: 38em; color: var(--ink); margin-bottom: 2.5em; }

/* Подход: схема-опора + триада */
.fulcrum { width: min(640px, 100%); height: auto; margin: 0 0 12px; display: block; }
.fc-line { stroke: var(--greige); stroke-width: 1; }
.fc-node { fill: var(--ink); }
.fc-dot { fill: var(--copper); }
.fc-base { stroke: var(--ink); stroke-width: 1.5; }
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.triad-item h3 { margin-bottom: 0.4em; font-size: 1.1rem; }
.triad-item p { color: var(--ink); font-size: 0.95rem; }

/* Принципы */
.principles { list-style: none; max-width: 44em; }
.principles li {
  display: grid; grid-template-columns: 180px 1fr; gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--greige); align-items: baseline;
}
.principles li:first-child { border-top: 1px solid var(--greige); }
.principle-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.principle-text { color: var(--ink); font-size: 0.97rem; }

/* Услуги */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.services-list { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 52em; }
.services-list .service-card {
  display: grid; grid-template-columns: 72px 1fr; gap: 8px 24px;
  padding: 36px 0; border-top: 1px solid var(--greige);
}
.services-list .service-card:last-child { border-bottom: 1px solid var(--greige); }
.services-list .service-name { grid-column: 2; }
.services-list .service-desc { grid-column: 2; }
.services-list .service-num { grid-row: span 2; }
.service-num {
  font-family: var(--serif); font-size: 1.05rem; color: var(--copper);
  letter-spacing: 0.08em;
}
.service-name { margin: 10px 0 8px; }
.services-list .service-name { margin-top: 0; }
.service-desc { color: var(--ink); font-size: 0.95rem; }
.services-all { margin-top: 48px; }
.text-link {
  color: var(--copper); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid var(--copper-soft);
}
.text-link:hover { border-bottom-color: var(--copper); }

/* ── Кнопки ── */
.btn {
  display: inline-block; font: 500 0.95rem var(--sans);
  padding: 14px 34px; border: 1px solid var(--ink); border-radius: 2px;
  color: var(--ink); background: transparent; text-decoration: none;
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { border-color: var(--copper); color: var(--copper); }
.btn-primary { background: var(--ink); color: var(--ivory); }
.btn-primary:hover { background: var(--copper); border-color: var(--copper); color: var(--ivory); }
.btn-small { padding: 9px 22px; font-size: 0.85rem; }

/* ── CTA ── */
.cta-section { padding: 120px 0; text-align: center; }
.cta-inner { max-width: 620px; }
.cta-inner p { color: var(--ink); margin-bottom: 2em; }
.cta-inner h2 { margin-bottom: 0.5em; }

/* ── Внутренние страницы ── */
.page-head { padding: 84px 0 20px; }
.page-head .lede { margin-top: 0.9em; }
.legal-body { max-width: 42em; }
.legal-body p { margin-bottom: 1.2em; }

/* ── Контакты ── */
.contacts-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.contact-ways { display: flex; flex-direction: column; gap: 20px; }
.contact-way {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--serif); font-size: 1.25rem; text-decoration: none;
  padding: 18px 0; border-bottom: 1px solid var(--greige);
}
.contact-way:hover { color: var(--copper); }
.contact-label { font: 600 0.68rem var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); }
.contact-note { font-size: 0.9rem; color: var(--grey); margin-top: 10px; max-width: 26em; }

.inquiry-form { background: #fff; border: 1px solid var(--greige); border-radius: 3px; padding: 40px; }
.inquiry-form h2 { font-size: 1.5rem; margin-bottom: 1.2em; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 6px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; font: 400 1rem var(--sans); color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--greige); border-radius: 2px;
  background: var(--ivory);
}
.field input:focus, .field textarea:focus { border-color: var(--copper); outline: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-hint { font-size: 0.8rem; color: var(--grey); margin: -10px 0 18px; }
.field .field-hint { margin: 6px 0 0; }
.field-consent { display: flex; gap: 10px; align-items: flex-start; }
.field-consent input { margin-top: 4px; accent-color: var(--copper); }
.field-consent label { font-size: 0.83rem; font-weight: 400; color: var(--ink); }
.field-invalid { border-color: #b0413e !important; }
.form-status { margin-top: 16px; font-size: 0.92rem; min-height: 1.4em; }
.form-status.ok { color: #2e6b3f; }
.form-status.err { color: #b0413e; }

/* ── Подвал ── */
.site-footer { background: var(--ink); color: var(--ivory); padding: 72px 0 56px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 48px; }
.site-footer .brand-name { color: var(--ivory); margin-bottom: 12px; display: block; }
.footer-about p { font-size: 0.9rem; color: var(--greige); max-width: 26em; margin-bottom: 10px; }
.footer-requisites { font-size: 0.75rem !important; color: var(--grey) !important; }
.footer-contacts { display: flex; flex-direction: column; gap: 10px; }
.footer-contacts a, .footer-legal a {
  color: var(--greige); text-decoration: none; font-size: 0.9rem;
  display: block; margin-bottom: 8px;
}
.footer-contacts a:hover, .footer-legal a:hover { color: var(--copper); }
.footer-label { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: 14px; }

/* ── Cookie ── */
.cookie-bar[hidden] { display: none !important; }
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--ink); color: var(--ivory);
  padding: 16px 22px; border-radius: 3px; font-size: 0.85rem;
  max-width: 720px; margin: 0 auto;
}
.cookie-bar a { color: var(--copper); }
.cookie-bar .btn { border-color: var(--ivory); color: var(--ivory); flex-shrink: 0; }
.cookie-bar .btn:hover { border-color: var(--copper); color: var(--copper); }

/* ── 404 ── */
.notfound { padding: 140px 0; text-align: center; }
.notfound-code { font-family: var(--serif); font-size: 6rem; color: var(--copper); line-height: 1; margin-bottom: 20px; }
.notfound p { max-width: 34em; margin: 0.8em auto; color: var(--ink); }
.notfound-en { color: var(--grey) !important; font-size: 0.9rem; }
.notfound-links { display: flex; gap: 14px; justify-content: center; margin-top: 2em; flex-wrap: wrap; }

/* ── Появление при скролле ── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .bc-beams { animation: none; }
}

/* ── Адаптив (ТЗ §8.4: 1440 / 1024-1439 / 768-1023 / 360-767) ── */
@media (max-width: 1023px) {
  .hero { padding: 64px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { order: -1; }
  .beacon { width: 200px; }
  .section { padding: 72px 0; }
  .services-grid, .triad { grid-template-columns: 1fr 1fr; }
  .contacts-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .shell { padding: 0 20px; }
  .axis-section .shell { padding-left: 44px; }
  .axis-section .shell::before { left: 21px; }
  .section-mark::before { left: -27px; width: 7px; height: 7px; }
  .services-grid, .triad { grid-template-columns: 1fr; }
  .principles li { grid-template-columns: 1fr; gap: 4px; }
  .field-row { grid-template-columns: 1fr; }
  .inquiry-form { padding: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .services-list .service-card { grid-template-columns: 48px 1fr; }
  .cookie-bar { flex-direction: column; align-items: stretch; text-align: center; }

  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px; justify-content: center;
    background: none; border: none; padding: 10px; cursor: pointer; min-width: 44px; min-height: 44px;
  }
  .nav-toggle-bar { width: 22px; height: 1.5px; background: var(--ink); transition: transform 0.2s; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--ivory); border-bottom: 1px solid var(--greige); padding: 8px 20px 16px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 0; width: 100%; font-size: 1rem; }
}

/* ══════════════════ 5 ДИЗАЙНОВ (data-skin на <html>) ══════════════════
   Контент один — шаблоны разные. Токены сняты с оригиналов:
   s1 «Опора»    — базовый по ТЗ (ivory/copper, Playfair) — стили выше.
   s2 «Издание»  — hourglass/uxui002 KILBURN: чёрное издание, красный/кислотный/синий,
                   мono-подписи, зерно+скан-линии, лента, смена акцента по секциям.
   s3 «Дыхание»  — uxui003 Stillwater: крем/шалфей/терракота, Cormorant, пилюли,
                   дышащий маяк, прорисовка оси, typewriter.
   s4 «Кузня»    — uxui004 IRONFORGE: чёрный + #FF5400, Bebas/Oswald, капс,
                   лента, липкая CTA, tilt, тост.
   s5 «Система»  — uxui006 shadcn: белый/цинк, Inter, radius 8, карточки с тенями.
   Кириллические замены: Bricolage→Unbounded, Space Grotesk→Manrope,
   Fraunces→Cormorant, Archivo→Inter, Geist→Inter. */

/* ── переключатель дизайнов ── */
.skin-switch { display: inline-flex; gap: 4px; margin-left: 8px; }
.skin-switch button {
  font: 600 0.7rem var(--sans); min-width: 24px; padding: 5px 6px; cursor: pointer;
  background: transparent; color: var(--grey);
  border: 1px solid var(--greige); border-radius: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.skin-switch button:hover { color: var(--copper); border-color: var(--copper); }
html[data-skin="s1"] .skin-switch button[data-skin-btn="s1"],
html[data-skin="s2"] .skin-switch button[data-skin-btn="s2"],
html[data-skin="s3"] .skin-switch button[data-skin-btn="s3"],
html[data-skin="s4"] .skin-switch button[data-skin-btn="s4"],
html[data-skin="s5"] .skin-switch button[data-skin-btn="s5"] {
  color: var(--copper); border-color: var(--copper); background: color-mix(in srgb, var(--copper) 10%, transparent);
}

/* ── общие элементы дизайнов ── */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; display: none; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 0; background: var(--copper); }
html[data-skin="s2"] .scroll-progress, html[data-skin="s3"] .scroll-progress,
html[data-skin="s4"] .scroll-progress, html[data-skin="s1"] .scroll-progress { display: block; }

.practice-marquee { display: none; overflow: hidden; border-top: 1px solid var(--greige); border-bottom: 1px solid var(--greige); padding: 14px 0; }
.mq-track { display: flex; white-space: nowrap; width: max-content; }
.mq-track span { font: 500 0.8rem var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); padding-right: 8px; }
.mq-dot { color: var(--copper); }
html[data-skin="s2"] .practice-marquee, html[data-skin="s4"] .practice-marquee { display: block; }
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="s2"] .mq-track, html[data-skin="s4"] .mq-track { animation: mm-mq 40s linear infinite; }
  @keyframes mm-mq { to { transform: translateX(-50%); } }
}

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none; align-items: center; justify-content: center; gap: 22px;
  background: color-mix(in srgb, var(--ink) 96%, transparent); color: var(--ivory);
  padding: 12px 20px; font-size: 0.9rem;
  transform: translateY(110%); transition: transform 0.35s ease;
}
.sticky-cta .btn { border-color: var(--copper); }
html[data-skin="s4"] .sticky-cta { display: flex; }
html[data-skin="s4"] .sticky-cta.show { transform: none; }

#cursor-dot { position: fixed; z-index: 90; width: 8px; height: 8px; border-radius: 50%; background: var(--copper); pointer-events: none; display: none; transform: translate(-50%, -50%); opacity: 0.75; }
html[data-skin="s4"] #cursor-dot.on { display: block; }

#toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  background: var(--ink); color: var(--ivory); border-left: 3px solid var(--copper);
  border-radius: 3px; padding: 14px 20px; font-size: 0.9rem; max-width: 340px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* живость базового s1 + мягкого s3: дыхание маяка, прорисовка оси, каретка */
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="s1"] .bc-dot, html[data-skin="s3"] .bc-dot { animation: mm-breath 8s ease-in-out infinite; transform-origin: 160px 96px; }
  @keyframes mm-breath {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(168,103,51,0)); }
    50% { transform: scale(1.35); filter: drop-shadow(0 0 14px rgba(168,103,51,0.55)); }
  }
  html[data-skin="s1"] .fc-dot, html[data-skin="s3"] .fc-dot { animation: mm-breath-s 8s ease-in-out infinite; transform-origin: 320px 86px; }
  @keyframes mm-breath-s { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
}
html[data-skin="s1"] .axis-section .shell::before, html[data-skin="s3"] .axis-section .shell::before {
  transform: scaleY(var(--axis-grow, 0)); transform-origin: top;
  background: var(--copper); opacity: 0.45; transition: transform 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="s1"] .axis-section .shell::before, html[data-skin="s3"] .axis-section .shell::before { transform: none; background: var(--greige); opacity: 1; }
}
.hero-sub .caret { display: none; }
html[data-skin="s1"] .hero-sub .caret, html[data-skin="s3"] .hero-sub .caret {
  display: inline-block; width: 1px; height: 1em; background: var(--copper); vertical-align: -0.15em; margin-left: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="s1"] .hero-sub .caret, html[data-skin="s3"] .hero-sub .caret { animation: mm-blink 0.9s step-end infinite; }
  @keyframes mm-blink { 50% { opacity: 0; } }
}

/* ════════ s2 «ИЗДАНИЕ» — KILBURN (uxui002) ════════ */
html[data-skin="s2"] {
  --ivory: #080808;          /* фон */
  --greige: rgba(255,255,255,0.12);
  --ink: #f5f5f5;            /* текст */
  --grey: #888;
  --copper: var(--sa, #ff2a2a); /* акцент секции, JS циклит red→acid→blue */
  --copper-soft: rgba(255,42,42,0.4);
  --serif: 'Unbounded', 'Arial Black', sans-serif;
  --sans: 'Manrope', system-ui, sans-serif;
}
html[data-skin="s2"] body { background: #080808; }
html[data-skin="s2"] .site-header { background: rgba(8,8,8,0.92); border-bottom-color: rgba(255,255,255,0.12); }
html[data-skin="s2"] h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 600; letter-spacing: -0.02em; text-transform: uppercase; }
html[data-skin="s2"] h2 { text-transform: uppercase; letter-spacing: 0.02em; }
html[data-skin="s2"] .eyebrow, html[data-skin="s2"] .contact-label, html[data-skin="s2"] .footer-label, html[data-skin="s2"] .mq-track span, html[data-skin="s2"] .service-num {
  font-family: 'JetBrains Mono', monospace;
}
html[data-skin="s2"] .eyebrow::before { content: "// "; }
html[data-skin="s2"] .lede { font-family: var(--sans); font-weight: 500; }
html[data-skin="s2"] .section-alt { background: #111; }
html[data-skin="s2"] .inquiry-form { background: #111; border-color: rgba(255,255,255,0.12); }
html[data-skin="s2"] .field input, html[data-skin="s2"] .field textarea { background: #080808; border-color: rgba(255,255,255,0.18); color: #f5f5f5; }
html[data-skin="s2"] .btn { border-radius: 0; border-width: 1px; }
html[data-skin="s2"] .btn-primary { background: var(--copper); border-color: var(--copper); color: #080808; font-weight: 700; }
html[data-skin="s2"] .btn-primary:hover { background: #f5f5f5; border-color: #f5f5f5; color: #080808; }
html[data-skin="s2"] .site-footer { background: #000; border-top: 1px solid rgba(255,255,255,0.12); }
html[data-skin="s2"] .bc-axis, html[data-skin="s2"] .bc-base, html[data-skin="s2"] .fc-node, html[data-skin="s2"] .fc-base { stroke: #f5f5f5; }
html[data-skin="s2"] .fc-node { fill: #f5f5f5; }
html[data-skin="s2"] .cookie-bar { background: #111; border: 1px solid rgba(255,255,255,0.18); }
/* зерно + скан-линии (# в data-URI → %23) */
html[data-skin="s2"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-skin="s2"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.18) 3px 4px);
}

/* ════════ s3 «ДЫХАНИЕ» — Stillwater (uxui003) ════════ */
html[data-skin="s3"] {
  --ivory: #f4ede0;
  --greige: rgba(44,38,32,0.14);
  --ink: #2c2620;
  --grey: #7a6e60;
  --copper: #b16a48;          /* терракота */
  --copper-soft: rgba(177,106,72,0.35);
  --serif: 'Cormorant', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
}
html[data-skin="s3"] body { background: #f4ede0; }
html[data-skin="s3"] .site-header { background: rgba(244,237,224,0.92); }
html[data-skin="s3"] h1 { font-weight: 500; font-size: clamp(2.6rem, 5.8vw, 4.6rem); }
html[data-skin="s3"] h2 { font-weight: 500; }
html[data-skin="s3"] .lede { font-style: italic; font-weight: 500; color: #4a4036; }
html[data-skin="s3"] .eyebrow { color: #5d6e5a; letter-spacing: 0.3em; }
html[data-skin="s3"] .section-mark::before { background: #5d6e5a; }
html[data-skin="s3"] .section-alt { background: #e3d5c1; }
html[data-skin="s3"] .btn { border-radius: 999px; }
html[data-skin="s3"] .btn-primary { background: #5d6e5a; border-color: #5d6e5a; }
html[data-skin="s3"] .btn-primary:hover { background: #b16a48; border-color: #b16a48; }
html[data-skin="s3"] .inquiry-form { background: #faf5ec; border-radius: 14px; border-color: rgba(44,38,32,0.14); }
html[data-skin="s3"] .field input, html[data-skin="s3"] .field textarea { background: #f4ede0; border-radius: 10px; }
html[data-skin="s3"] .service-num { color: #5d6e5a; }
html[data-skin="s3"] .site-footer { background: #2c2620; }
html[data-skin="s3"] .bc-dot, html[data-skin="s3"] .fc-dot { fill: #b16a48; }
html[data-skin="s3"] .bc-beams line { stroke: #5d6e5a; }
html[data-skin="s3"] .section { padding: 130px 0; }

/* ════════ s4 «КУЗНЯ» — IRONFORGE (uxui004) ════════ */
html[data-skin="s4"] {
  --ivory: #0a0a0a;
  --greige: #1f1f1f;
  --ink: #f5f5f5;
  --grey: #6a6a6a;
  --copper: #FF5400;
  --copper-soft: rgba(255,84,0,0.4);
  --serif: 'Oswald', Impact, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
}
html[data-skin="s4"] body { background: #0a0a0a; }
html[data-skin="s4"] .site-header { background: rgba(10,10,10,0.94); border-bottom-color: #1f1f1f; }
html[data-skin="s4"] .brand-name, html[data-skin="s4"] h1, html[data-skin="s4"] h2 {
  font-family: 'Bebas Neue', var(--serif); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 400;
}
html[data-skin="s4"] h1 { font-size: clamp(2.6rem, 5.2vw, 4.8rem); line-height: 0.98; }
html[data-skin="s4"] h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
html[data-skin="s4"] h3, html[data-skin="s4"] .principle-name { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
html[data-skin="s4"] .eyebrow { font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.3em; }
html[data-skin="s4"] .lede { font-family: var(--sans); font-weight: 600; }
html[data-skin="s4"] .section-alt { background: #050505; }
html[data-skin="s4"] .service-card { background: #141414; border: 1px solid #1f1f1f; padding: 26px; }
html[data-skin="s4"] .services-list .service-card { background: transparent; border: none; border-top: 1px solid #1f1f1f; padding: 36px 0; }
html[data-skin="s4"] .service-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; line-height: 1; color: #FF5400; }
html[data-skin="s4"] .btn { border-radius: 0; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; }
html[data-skin="s4"] .btn-primary { background: #FF5400; border-color: #FF5400; color: #0a0a0a; }
html[data-skin="s4"] .btn-primary:hover { background: #FF7A33; border-color: #FF7A33; color: #0a0a0a; }
html[data-skin="s4"] .inquiry-form { background: #141414; border-color: #1f1f1f; }
html[data-skin="s4"] .field input, html[data-skin="s4"] .field textarea { background: #0a0a0a; border-color: #2a2a2a; color: #f5f5f5; }
html[data-skin="s4"] .site-footer { background: #050505; border-top: 1px solid #1f1f1f; }
html[data-skin="s4"] .bc-axis, html[data-skin="s4"] .bc-base, html[data-skin="s4"] .fc-base { stroke: #f5f5f5; stroke-width: 2; }
html[data-skin="s4"] .fc-node { fill: #f5f5f5; }
html[data-skin="s4"] .mq-track span { font-family: 'Oswald', sans-serif; font-size: 1rem; color: #f5f5f5; font-weight: 600; }
html[data-skin="s4"] .sticky-cta { background: #FF5400; color: #0a0a0a; font-weight: 600; }
html[data-skin="s4"] .sticky-cta .btn { border-color: #0a0a0a; color: #0a0a0a; }
html[data-skin="s4"] .cookie-bar { background: #141414; border: 1px solid #2a2a2a; }
html[data-skin="s4"] .services-grid .service-card {
  transform: perspective(700px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); will-change: transform;
}

/* ════════ s5 «СИСТЕМА» — shadcn (uxui006) ════════ */
html[data-skin="s5"] {
  --ivory: #ffffff;
  --greige: #e4e4e7;
  --ink: #09090b;
  --grey: #71717a;
  --copper: #18181b;          /* primary */
  --copper-soft: rgba(24,24,27,0.3);
  --serif: 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
}
html[data-skin="s5"] body { background: #fff; font-size: 15.5px; }
html[data-skin="s5"] .site-header { background: rgba(255,255,255,0.9); }
html[data-skin="s5"] h1 { font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
html[data-skin="s5"] h2 { font-weight: 600; letter-spacing: -0.02em; }
html[data-skin="s5"] h3 { font-weight: 600; font-size: 1.05rem; }
html[data-skin="s5"] .eyebrow { font-family: 'JetBrains Mono', monospace; text-transform: none; letter-spacing: 0; color: #71717a; }
html[data-skin="s5"] .eyebrow::before { content: "› "; color: #a1a1aa; }
html[data-skin="s5"] .lede { font-family: var(--sans); font-weight: 400; color: #3f3f46; font-size: 1.15rem; }
html[data-skin="s5"] .section { padding: 84px 0; }
html[data-skin="s5"] .section-alt { background: #fafafa; }
html[data-skin="s5"] .service-card, html[data-skin="s5"] .triad-item {
  background: #fff; border: 1px solid #e4e4e7; border-radius: 10px; padding: 22px;
  box-shadow: 0 1px 2px rgba(9,9,11,0.05); transition: box-shadow 0.2s;
}
html[data-skin="s5"] .service-card:hover { box-shadow: 0 4px 12px rgba(9,9,11,0.08); }
html[data-skin="s5"] .services-list .service-card { border: 1px solid #e4e4e7; margin-bottom: 14px; grid-template-columns: 56px 1fr; padding: 22px; }
html[data-skin="s5"] .services-list .service-card:last-child { border-bottom: 1px solid #e4e4e7; }
html[data-skin="s5"] .service-num { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: #71717a; background: #f4f4f5; border-radius: 6px; padding: 3px 8px; height: fit-content; width: fit-content; }
html[data-skin="s5"] .btn { border-radius: 8px; border-color: #e4e4e7; padding: 11px 22px; font-weight: 500; }
html[data-skin="s5"] .btn:hover { background: #f4f4f5; color: #09090b; border-color: #e4e4e7; transform: none; }
html[data-skin="s5"] .btn-primary { background: #18181b; border-color: #18181b; color: #fafafa; }
html[data-skin="s5"] .btn-primary:hover { background: #3f3f46; border-color: #3f3f46; color: #fafafa; }
html[data-skin="s5"] .inquiry-form { border-radius: 12px; box-shadow: 0 1px 2px rgba(9,9,11,0.05); }
html[data-skin="s5"] .field input, html[data-skin="s5"] .field textarea { background: #fff; border-radius: 8px; }
html[data-skin="s5"] .field input:focus, html[data-skin="s5"] .field textarea:focus { border-color: #a1a1aa; box-shadow: 0 0 0 3px rgba(161,161,170,0.25); }
html[data-skin="s5"] .axis-section .shell::before { display: none; }
html[data-skin="s5"] .axis-section .shell { padding-left: 32px; }
html[data-skin="s5"] .section-mark::before { display: none; }
html[data-skin="s5"] .site-footer { background: #fafafa; color: #09090b; border-top: 1px solid #e4e4e7; }
html[data-skin="s5"] .site-footer .brand-name, html[data-skin="s5"] .footer-about p { color: #09090b; }
html[data-skin="s5"] .footer-requisites { color: #71717a !important; }
html[data-skin="s5"] .footer-contacts a, html[data-skin="s5"] .footer-legal a { color: #52525b; }
html[data-skin="s5"] .footer-contacts a:hover, html[data-skin="s5"] .footer-legal a:hover { color: #09090b; }
html[data-skin="s5"] .bc-dot, html[data-skin="s5"] .fc-dot { fill: #18181b; }
html[data-skin="s5"] .bc-beams line { stroke: #a1a1aa; }
html[data-skin="s5"] .cookie-bar { background: #fff; color: #09090b; border: 1px solid #e4e4e7; border-radius: 10px; box-shadow: 0 4px 12px rgba(9,9,11,0.08); }
html[data-skin="s5"] .cookie-bar a { color: #09090b; }
html[data-skin="s5"] .cookie-bar .btn { border-color: #18181b; color: #fff; background: #18181b; }
html[data-skin="s5"] #toast { background: #fff; color: #09090b; border: 1px solid #e4e4e7; border-left: 3px solid #18181b; }

@media (max-width: 767px) {
  .sticky-cta { font-size: 0.8rem; gap: 12px; flex-wrap: wrap; text-align: center; }
}

/* ══════════════════ ФОТОСЛОЙ (Unsplash hotlink, редактируется в админке) ══════════════════ */
.hero-art { position: relative; }
.hero-photo { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 4px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-art .beacon { position: relative; z-index: 2; }
.hero-photo::after { content: ""; position: absolute; inset: 0; }

.positioning-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: center; }
.section-photo { margin: 0; overflow: hidden; border-radius: 4px; }
.section-photo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }
.contacts-photo { margin-top: 26px; }
.contacts-photo img { aspect-ratio: 16 / 10; }

.page-photo-band { overflow: hidden; }
.page-photo-band figure { margin: 0; }
.page-photo-band img { width: 100%; height: clamp(180px, 26vw, 320px); object-fit: cover; display: block; }

.cta-photo { position: relative; background-image: var(--cta-img); background-size: cover; background-position: center; }
.cta-photo::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ivory) 82%, transparent); }
.cta-photo .cta-inner { position: relative; z-index: 2; }

/* hero: маяк поверх фото — фото затемняем/тонируем под скин */
.hero-photo img { filter: saturate(0.82) contrast(1.02); }
html[data-skin="s1"] .hero-photo::after { background: linear-gradient(160deg, rgba(242,239,234,0.35), rgba(30,31,34,0.38)); }
html[data-skin="s1"] .bc-axis, html[data-skin="s1"] .bc-base { stroke: #F2EFEA; }
html[data-skin="s1"] .bc-beams line { stroke: #E8C49A; }

/* s2 Издание: ч/б жёсткое фото, красная плашка-кант */
html[data-skin="s2"] .hero-photo img, html[data-skin="s2"] .section-photo img, html[data-skin="s2"] .page-photo-band img {
  filter: grayscale(1) contrast(1.25) brightness(0.82);
}
html[data-skin="s2"] .hero-photo::after { background: linear-gradient(160deg, rgba(8,8,8,0.15), rgba(8,8,8,0.65)); }
html[data-skin="s2"] .hero-photo, html[data-skin="s2"] .section-photo { border-radius: 0; border: 1px solid rgba(255,255,255,0.18); }
html[data-skin="s2"] .section-photo { position: relative; }
html[data-skin="s2"] .section-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--copper); }
html[data-skin="s2"] .bc-axis, html[data-skin="s2"] .bc-base { stroke: #f5f5f5; }

/* s3 Дыхание: тёплое мягкое фото, большие радиусы, арка в hero */
html[data-skin="s3"] .hero-photo { border-radius: 160px 160px 8px 8px; }
html[data-skin="s3"] .hero-photo img, html[data-skin="s3"] .section-photo img { filter: sepia(0.18) saturate(0.9) brightness(1.04); }
html[data-skin="s3"] .hero-photo::after { background: linear-gradient(180deg, rgba(244,237,224,0.06), rgba(93,110,90,0.28)); }
html[data-skin="s3"] .section-photo { border-radius: 14px; }
html[data-skin="s3"] .bc-axis, html[data-skin="s3"] .bc-base { stroke: #f4ede0; }

/* s4 Кузня: тёмное контрастное фото с оранжевым дуотоном */
html[data-skin="s4"] .hero-photo img, html[data-skin="s4"] .section-photo img, html[data-skin="s4"] .page-photo-band img {
  filter: grayscale(0.9) contrast(1.3) brightness(0.72) sepia(0.35) hue-rotate(-18deg) saturate(2.2);
}
html[data-skin="s4"] .hero-photo, html[data-skin="s4"] .section-photo { border-radius: 0; border: 1px solid #1f1f1f; }
html[data-skin="s4"] .hero-photo::after { background: linear-gradient(200deg, rgba(10,10,10,0.1), rgba(10,10,10,0.72)); }
html[data-skin="s4"] .bc-axis, html[data-skin="s4"] .bc-base { stroke: #f5f5f5; }

/* s5 Система: аккуратная карточка с рамкой и тенью, без тонировки */
html[data-skin="s5"] .hero-photo, html[data-skin="s5"] .section-photo { border-radius: 12px; border: 1px solid #e4e4e7; box-shadow: 0 4px 12px rgba(9,9,11,0.08); }
html[data-skin="s5"] .hero-photo img { filter: none; }
html[data-skin="s5"] .hero-photo::after { background: none; }
html[data-skin="s5"] .bc-axis, html[data-skin="s5"] .bc-base { stroke: #fff; }
html[data-skin="s5"] .bc-dot { fill: #fff; }

@media (max-width: 1023px) {
  .positioning-grid { grid-template-columns: 1fr; }
  .positioning-grid .section-photo img { aspect-ratio: 16 / 9; }
  .hero-art { min-height: 380px; width: 100%; }
}
@media (max-width: 767px) {
  .hero-art { min-height: 300px; }
}

/* ══════════ ГЛОБАЛЬНЫЙ ПОЛУРАЗМЫТЫЙ ФОН + ПОЛНОШИРИННЫЙ HERO ══════════ */
.page-bg {
  position: fixed; inset: -40px; z-index: 0; pointer-events: none;
  background: var(--bg-img) center / cover no-repeat;
  filter: blur(16px) saturate(0.85);
  opacity: 0.13;
}
main, .site-footer, .practice-marquee, .page-photo-band { position: relative; z-index: 2; }
html[data-skin="s2"] .page-bg { opacity: 0.16; filter: blur(16px) grayscale(1) contrast(1.2) brightness(0.5); }
html[data-skin="s3"] .page-bg { opacity: 0.2; filter: blur(14px) sepia(0.25) saturate(0.85) brightness(1.05); }
html[data-skin="s4"] .page-bg { opacity: 0.22; filter: blur(16px) grayscale(0.85) contrast(1.25) brightness(0.42) sepia(0.3) hue-rotate(-18deg) saturate(1.9); }
html[data-skin="s5"] .page-bg { opacity: 0.07; filter: blur(20px) saturate(0.7); }

/* hero: фото во всю ширину, полуразмытое, с вуалью скина; маяк остаётся знаком поверх */
.hero-bleed { position: relative; overflow: hidden; }
.hero-bleed::before {
  content: ""; position: absolute; inset: -24px;
  background: var(--hero-img) center 30% / cover no-repeat;
  filter: blur(5px) saturate(0.85);
  transform: scale(1.04);
}
.hero-bleed::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--ivory) 93%, transparent) 0%,
    color-mix(in srgb, var(--ivory) 82%, transparent) 55%,
    color-mix(in srgb, var(--ivory) 55%, transparent) 100%);
}
.hero-bleed .hero-grid { position: relative; z-index: 2; }
.hero-bleed .bc-axis, .hero-bleed .bc-base { stroke: var(--ink); }

html[data-skin="s2"] .hero-bleed::before { filter: blur(4px) grayscale(1) contrast(1.25) brightness(0.65); }
html[data-skin="s2"] .hero-bleed::after { background: linear-gradient(100deg, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.8) 55%, rgba(8,8,8,0.55) 100%); }
html[data-skin="s3"] .hero-bleed::before { filter: blur(6px) sepia(0.22) saturate(0.9) brightness(1.02); }
html[data-skin="s3"] .hero-bleed::after { background: linear-gradient(100deg, rgba(244,237,224,0.93) 0%, rgba(244,237,224,0.8) 55%, rgba(227,213,193,0.5) 100%); }
html[data-skin="s4"] .hero-bleed::before { filter: blur(4px) grayscale(0.85) contrast(1.3) brightness(0.55) sepia(0.3) hue-rotate(-18deg) saturate(2); }
html[data-skin="s4"] .hero-bleed::after { background: linear-gradient(100deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.78) 55%, rgba(10,10,10,0.5) 100%); }
html[data-skin="s5"] .hero-bleed::before { filter: blur(7px) saturate(0.8); }
html[data-skin="s5"] .hero-bleed::after { background: linear-gradient(100deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 55%, rgba(255,255,255,0.66) 100%); }

@media (prefers-reduced-motion: no-preference) {
  .hero-bleed::before { transition: transform 0.3s ease-out; }
}
@media (max-width: 767px) {
  .page-bg { filter: blur(12px) saturate(0.85); }
  .hero-art { min-height: 220px; }
}

/* ══════════════ ОСЬ «СХЕМА»: светлая и тёмная под каждый скин ══════════════
   Родные схемы: s1/s3/s5 — светлые, s2/s4 — тёмные. Ниже — противоположные. */

/* подвал и cookie: цвета выводим из пары ink/ivory — переживают любой флип */
.footer-contacts a, .footer-legal a { color: color-mix(in srgb, var(--ivory) 80%, var(--ink)); }
.footer-about p { color: color-mix(in srgb, var(--ivory) 82%, var(--ink)); }

/* ── s1 Опора · тёмная ── */
html[data-skin="s1"][data-scheme="dark"] {
  --ivory:#16171a; --greige:#2c2d31; --ink:#ece9e2; --grey:#8c8f93; --copper:#C0854E;
}
html[data-skin="s1"][data-scheme="dark"] .site-header { background: rgba(22,23,26,0.92); }
html[data-skin="s1"][data-scheme="dark"] .section-alt { background: #1b1c20; }
html[data-skin="s1"][data-scheme="dark"] .inquiry-form { background: #1b1c20; }
html[data-skin="s1"][data-scheme="dark"] .field input, html[data-skin="s1"][data-scheme="dark"] .field textarea { background: #16171a; color: var(--ink); }
html[data-skin="s1"][data-scheme="dark"] .site-footer { background: #0e0f11; color: #ece9e2; }
html[data-skin="s1"][data-scheme="dark"] .cookie-bar { background: #1b1c20; border: 1px solid #2c2d31; color: #ece9e2; }
html[data-skin="s1"][data-scheme="dark"] .hero-bleed::after { background: linear-gradient(100deg, rgba(22,23,26,0.93) 0%, rgba(22,23,26,0.8) 55%, rgba(22,23,26,0.55) 100%); }
html[data-skin="s1"][data-scheme="dark"] .hero-bleed::before { filter: blur(5px) saturate(0.7) brightness(0.6); }

/* ── s2 Издание · светлая (газетная бумага) ── */
html[data-skin="s2"][data-scheme="light"] {
  --ivory:#f5f4f0; --greige:rgba(13,13,13,0.16); --ink:#0d0d0d; --grey:#61605c;
  --copper:var(--sa, #c81e1e); --copper-soft:rgba(200,30,30,0.35);
}
html[data-skin="s2"][data-scheme="light"] body { background: #f5f4f0; }
html[data-skin="s2"][data-scheme="light"] .site-header { background: rgba(245,244,240,0.93); border-bottom-color: rgba(13,13,13,0.16); }
html[data-skin="s2"][data-scheme="light"] .section-alt { background: #ebeae4; }
html[data-skin="s2"][data-scheme="light"] .inquiry-form { background: #fff; border-color: rgba(13,13,13,0.16); }
html[data-skin="s2"][data-scheme="light"] .field input, html[data-skin="s2"][data-scheme="light"] .field textarea { background: #f5f4f0; border-color: rgba(13,13,13,0.25); color: #0d0d0d; }
html[data-skin="s2"][data-scheme="light"] .site-footer { background: #0d0d0d; border-top: none; }
html[data-skin="s2"][data-scheme="light"] .cookie-bar { background: #0d0d0d; border: none; }
html[data-skin="s2"][data-scheme="light"] .btn-primary { color: #f5f4f0; }
html[data-skin="s2"][data-scheme="light"] .bc-axis, html[data-skin="s2"][data-scheme="light"] .bc-base, html[data-skin="s2"][data-scheme="light"] .fc-base { stroke: #0d0d0d; }
html[data-skin="s2"][data-scheme="light"] .fc-node { fill: #0d0d0d; }
html[data-skin="s2"][data-scheme="light"] body::before { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(13,13,13,0.05) 3px 4px); }
html[data-skin="s2"][data-scheme="light"] .hero-bleed::before { filter: blur(4px) grayscale(1) contrast(1.1) brightness(1.05); }
html[data-skin="s2"][data-scheme="light"] .hero-bleed::after { background: linear-gradient(100deg, rgba(245,244,240,0.94) 0%, rgba(245,244,240,0.82) 55%, rgba(245,244,240,0.6) 100%); }
html[data-skin="s2"][data-scheme="light"] .page-bg { filter: blur(16px) grayscale(1) brightness(1.1); opacity: 0.1; }

/* ── s3 Дыхание · тёмная (вечерняя практика) ── */
html[data-skin="s3"][data-scheme="dark"] {
  --ivory:#241f19; --greige:rgba(240,233,220,0.16); --ink:#f0e9dc; --grey:#9a8f80; --copper:#c8825c;
}
html[data-skin="s3"][data-scheme="dark"] body { background: #241f19; }
html[data-skin="s3"][data-scheme="dark"] .site-header { background: rgba(36,31,25,0.92); }
html[data-skin="s3"][data-scheme="dark"] .section-alt { background: #2b2520; }
html[data-skin="s3"][data-scheme="dark"] .inquiry-form { background: #2b2520; border-color: rgba(240,233,220,0.16); }
html[data-skin="s3"][data-scheme="dark"] .field input, html[data-skin="s3"][data-scheme="dark"] .field textarea { background: #241f19; color: #f0e9dc; }
html[data-skin="s3"][data-scheme="dark"] .btn-primary { background: #7a8b6f; border-color: #7a8b6f; color: #241f19; }
html[data-skin="s3"][data-scheme="dark"] .site-footer { background: #17130f; }
html[data-skin="s3"][data-scheme="dark"] .cookie-bar { background: #2b2520; border: 1px solid rgba(240,233,220,0.16); }
html[data-skin="s3"][data-scheme="dark"] .eyebrow { color: #a3b295; }
html[data-skin="s3"][data-scheme="dark"] .section-mark::before { background: #a3b295; }
html[data-skin="s3"][data-scheme="dark"] .hero-bleed::before { filter: blur(6px) sepia(0.25) brightness(0.55); }
html[data-skin="s3"][data-scheme="dark"] .hero-bleed::after { background: linear-gradient(100deg, rgba(36,31,25,0.93) 0%, rgba(36,31,25,0.8) 55%, rgba(36,31,25,0.5) 100%); }
html[data-skin="s3"][data-scheme="dark"] .page-bg { filter: blur(14px) sepia(0.3) brightness(0.5); }

/* ── s4 Кузня · светлая (бетон и сталь) ── */
html[data-skin="s4"][data-scheme="light"] {
  --ivory:#f2f1ee; --greige:#d9d7d1; --ink:#0f0f10; --grey:#6a6a6a; --copper:#E64A00;
}
html[data-skin="s4"][data-scheme="light"] body { background: #f2f1ee; }
html[data-skin="s4"][data-scheme="light"] .site-header { background: rgba(242,241,238,0.94); border-bottom-color: #d9d7d1; }
html[data-skin="s4"][data-scheme="light"] .section-alt { background: #e8e6e1; }
html[data-skin="s4"][data-scheme="light"] .service-card { background: #fff; border-color: #d9d7d1; }
html[data-skin="s4"][data-scheme="light"] .services-list .service-card { background: transparent; border-color: #d9d7d1; }
html[data-skin="s4"][data-scheme="light"] .inquiry-form { background: #fff; border-color: #d9d7d1; }
html[data-skin="s4"][data-scheme="light"] .field input, html[data-skin="s4"][data-scheme="light"] .field textarea { background: #f2f1ee; border-color: #c9c6bf; color: #0f0f10; }
html[data-skin="s4"][data-scheme="light"] .site-footer { background: #0f0f10; border-top: none; }
html[data-skin="s4"][data-scheme="light"] .cookie-bar { background: #fff; border: 1px solid #d9d7d1; color: #0f0f10; }
html[data-skin="s4"][data-scheme="light"] .btn-primary { color: #f2f1ee; }
html[data-skin="s4"][data-scheme="light"] .bc-axis, html[data-skin="s4"][data-scheme="light"] .bc-base, html[data-skin="s4"][data-scheme="light"] .fc-base { stroke: #0f0f10; }
html[data-skin="s4"][data-scheme="light"] .fc-node { fill: #0f0f10; }
html[data-skin="s4"][data-scheme="light"] .mq-track span { color: #0f0f10; }
html[data-skin="s4"][data-scheme="light"] .hero-bleed::before { filter: blur(4px) grayscale(0.6) contrast(1.05) brightness(1.02) sepia(0.15); }
html[data-skin="s4"][data-scheme="light"] .hero-bleed::after { background: linear-gradient(100deg, rgba(242,241,238,0.94) 0%, rgba(242,241,238,0.8) 55%, rgba(242,241,238,0.55) 100%); }
html[data-skin="s4"][data-scheme="light"] .page-bg { filter: blur(16px) grayscale(0.6) brightness(1.05); opacity: 0.12; }

/* ── s5 Система · тёмная (shadcn dark) ── */
html[data-skin="s5"][data-scheme="dark"] {
  --ivory:#09090b; --greige:#27272a; --ink:#fafafa; --grey:#a1a1aa; --copper:#fafafa;
}
html[data-skin="s5"][data-scheme="dark"] body { background: #09090b; }
html[data-skin="s5"][data-scheme="dark"] .site-header { background: rgba(9,9,11,0.9); }
html[data-skin="s5"][data-scheme="dark"] .section-alt { background: #111113; }
html[data-skin="s5"][data-scheme="dark"] .service-card, html[data-skin="s5"][data-scheme="dark"] .triad-item { background: #0f0f11; border-color: #27272a; box-shadow: none; }
html[data-skin="s5"][data-scheme="dark"] .services-list .service-card { border-color: #27272a; }
html[data-skin="s5"][data-scheme="dark"] .service-num { background: #18181b; color: #a1a1aa; }
html[data-skin="s5"][data-scheme="dark"] .lede { color: #d4d4d8; }
html[data-skin="s5"][data-scheme="dark"] .btn { border-color: #27272a; color: #fafafa; }
html[data-skin="s5"][data-scheme="dark"] .btn:hover { background: #18181b; color: #fafafa; }
html[data-skin="s5"][data-scheme="dark"] .btn-primary { background: #fafafa; border-color: #fafafa; color: #18181b; }
html[data-skin="s5"][data-scheme="dark"] .btn-primary:hover { background: #d4d4d8; border-color: #d4d4d8; color: #18181b; }
html[data-skin="s5"][data-scheme="dark"] .inquiry-form { background: #0f0f11; border-color: #27272a; box-shadow: none; }
html[data-skin="s5"][data-scheme="dark"] .field input, html[data-skin="s5"][data-scheme="dark"] .field textarea { background: #09090b; border-color: #27272a; color: #fafafa; }
html[data-skin="s5"][data-scheme="dark"] .site-footer { background: #0f0f11; color: #fafafa; border-top-color: #27272a; }
html[data-skin="s5"][data-scheme="dark"] .site-footer .brand-name, html[data-skin="s5"][data-scheme="dark"] .footer-about p { color: #fafafa; }
html[data-skin="s5"][data-scheme="dark"] .footer-contacts a, html[data-skin="s5"][data-scheme="dark"] .footer-legal a { color: #a1a1aa; }
html[data-skin="s5"][data-scheme="dark"] .footer-contacts a:hover, html[data-skin="s5"][data-scheme="dark"] .footer-legal a:hover { color: #fafafa; }
html[data-skin="s5"][data-scheme="dark"] .cookie-bar { background: #0f0f11; color: #fafafa; border-color: #27272a; }
html[data-skin="s5"][data-scheme="dark"] .cookie-bar .btn { background: #fafafa; color: #18181b; border-color: #fafafa; }
html[data-skin="s5"][data-scheme="dark"] #toast { background: #0f0f11; color: #fafafa; border-color: #27272a; border-left-color: #fafafa; }
html[data-skin="s5"][data-scheme="dark"] .bc-dot, html[data-skin="s5"][data-scheme="dark"] .fc-dot { fill: #fafafa; }
html[data-skin="s5"][data-scheme="dark"] .bc-axis, html[data-skin="s5"][data-scheme="dark"] .bc-base { stroke: #fafafa; }
html[data-skin="s5"][data-scheme="dark"] .hero-bleed::before { filter: blur(7px) saturate(0.6) brightness(0.5); }
html[data-skin="s5"][data-scheme="dark"] .hero-bleed::after { background: linear-gradient(100deg, rgba(9,9,11,0.95) 0%, rgba(9,9,11,0.85) 55%, rgba(9,9,11,0.6) 100%); }
html[data-skin="s5"][data-scheme="dark"] .page-bg { opacity: 0.1; filter: blur(20px) brightness(0.4); }

/* ══════════════ ОСЬ «ШРИФТЫ»: три пары, поверх любого скина ══════════════
   f1 — как задумано скином (без переопределений).
   f2 «Антиква» — Playfair Display в заголовках.
   f3 «Гротеск» — Manrope в заголовках. Идёт ПОСЛЕ скинов: при равной
   специфичности побеждает поздний в файле. */
html[data-font="f2"] h1, html[data-font="f2"] h2, html[data-font="f2"] h3,
html[data-font="f2"] .brand-name, html[data-font="f2"] .principle-name {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
}
html[data-font="f2"] .lede { font-family: 'Playfair Display', Georgia, serif; }
html[data-font="f2"] h1 { letter-spacing: -0.01em; }
html[data-font="f3"] h1, html[data-font="f3"] h2, html[data-font="f3"] h3,
html[data-font="f3"] .brand-name, html[data-font="f3"] .principle-name {
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 700;
}
html[data-font="f3"] .lede { font-family: 'Manrope', system-ui, sans-serif; font-weight: 500; }
html[data-font="f3"] h1 { letter-spacing: -0.03em; }


/* ══ панель осей (язык · дизайны · шрифты · схема) ══ */
.axes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (max-width: 1023px) and (min-width: 768px) {
  .header-row { flex-wrap: wrap; padding: 10px 0; gap: 12px; }
}
@media (max-width: 767px) {
  .header-row { flex-wrap: wrap; row-gap: 0; }
  .nav-toggle { order: 2; }
  .brand { order: 1; }
  .axes {
    order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 0 10px; gap: 8px; scrollbar-width: none;
  }
  .axes::-webkit-scrollbar { display: none; }
  .site-nav { order: 4; }
  .hero { padding: 40px 0 56px; }
  .hero-grid { gap: 20px; }
  .hero-art { min-height: 190px; }
  .beacon { width: 150px; }
}

/* ════════ s6 «ФИРМЕННЫЙ» — брендборд Direction 4 «The Point of Support» ════════
   Палитра борда: #F2EFEA · #D9D5CF · #8C8F93 · #1E1F22 · медь #B87333.
   Playfair Medium в заявлениях, Inter в тексте, вертикальная ось = опора.
   Тёмная hero-витрина и тёмная лента принципов на светлой странице — как на борде. */
html[data-skin="s6"] {
  --copper:#B87333; --copper-soft:rgba(184,115,51,0.35);
}
html[data-skin="s6"] h1, html[data-skin="s6"] h2 { font-weight: 500; }
html[data-skin="s6"] .brand-name { letter-spacing: 0.3em; font-weight: 500; }
html[data-skin="s6"] .brand-sub { letter-spacing: 0.32em; }
.amp { color: inherit; }
html[data-skin="s6"] .amp { color: var(--copper); }
.h1-accent { font-style: normal; }
html[data-skin="s6"] .h1-accent { font-style: italic; color: var(--copper); }

/* тёмная hero-витрина (как макет ноутбука на борде) */
html[data-skin="s6"] .hero-bleed::before { filter: blur(4px) saturate(0.55) brightness(0.55); }
html[data-skin="s6"] .hero-bleed::after {
  background: linear-gradient(100deg, rgba(30,31,34,0.93) 0%, rgba(30,31,34,0.74) 58%, rgba(30,31,34,0.45) 100%);
}
html[data-skin="s6"] .hero-copy { color: #F2EFEA; }
html[data-skin="s6"] .hero-copy h1 { color: #F2EFEA; }
html[data-skin="s6"] .hero-sub { color: #D9D5CF; }
html[data-skin="s6"] .hero .btn-primary { background: var(--copper); border-color: var(--copper); color: #1E1F22; font-weight: 600; }
html[data-skin="s6"] .hero .btn-primary:hover { background: #F2EFEA; border-color: #F2EFEA; color: #1E1F22; }
html[data-skin="s6"] .bc-axis, html[data-skin="s6"] .bc-base { stroke: #F2EFEA; }
html[data-skin="s6"] .bc-beams line { stroke: var(--copper); }

/* тёмная лента принципов («Good decisions today create value tomorrow») */
html[data-skin="s6"] .sec-principles { background: #1E1F22; color: #F2EFEA; }
html[data-skin="s6"] .sec-principles .shell::before { background: rgba(242,239,234,0.22); }
html[data-skin="s6"] .sec-principles .principle-name { color: #F2EFEA; }
html[data-skin="s6"] .sec-principles .principle-text { color: #D9D5CF; }
html[data-skin="s6"] .sec-principles .principles li { border-color: rgba(242,239,234,0.16); }

html[data-skin="s6"] .service-num { color: var(--copper); }

/* s6 · тёмная схема целиком */
html[data-skin="s6"][data-scheme="dark"] {
  --ivory:#16171A; --greige:#2c2d31; --ink:#ECE9E2; --grey:#8C8F93; --copper:#C98A4B;
}
html[data-skin="s6"][data-scheme="dark"] .site-header { background: rgba(22,23,26,0.92); }
html[data-skin="s6"][data-scheme="dark"] .section-alt { background: #1b1c20; }
html[data-skin="s6"][data-scheme="dark"] .sec-principles { background: #101114; }
html[data-skin="s6"][data-scheme="dark"] .inquiry-form { background: #1b1c20; border-color: #2c2d31; }
html[data-skin="s6"][data-scheme="dark"] .field input, html[data-skin="s6"][data-scheme="dark"] .field textarea { background: #16171a; color: #ECE9E2; }
html[data-skin="s6"][data-scheme="dark"] .site-footer { background: #0e0f11; color: #ECE9E2; }
html[data-skin="s6"][data-scheme="dark"] .cookie-bar { background: #1b1c20; border: 1px solid #2c2d31; color: #ECE9E2; }
html[data-skin="s6"][data-scheme="dark"] .page-bg { filter: blur(16px) saturate(0.6) brightness(0.5); }

html[data-skin="s6"] .skin-switch button[data-skin-btn="s6"] {
  color: var(--copper); border-color: var(--copper); background: color-mix(in srgb, var(--copper) 10%, transparent);
}