/* GKL • оболочка «Шумоизоляция»: спокойствие, материалы, пространство.
   Палитра и композиция — предложение для превью, не утверждённая айдентика.
   Все правила ограничены [data-direction="soundproofing"]. */

[data-direction="soundproofing"] {
  --bg: #f6f2eb;
  --surface: #fffdf9;
  --surface-2: #efe8dd;
  --ink: #1e2a2b;
  --ink-2: #5b6766;
  --line: #e0d7c8;
  --accent: #1f6f6b;
  --accent-ink: #ffffff;
  --accent-soft: #d8e8e4;
  --header-bg: #f6f2eb;
  --header-ink: #1e2a2b;
  --header-ink-2: #5b6766;
  --header-line: #e6dccd;
  --focus: #1f6f6b;
  --radius: 18px;
}
[data-direction="soundproofing"] h1,
[data-direction="soundproofing"] h2 { font-weight: 600; letter-spacing: -0.015em; }

/* ---------- Первый экран: воздух слева, интерьер с разрезом справа ---------- */
[data-direction="soundproofing"] .sp-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 7vw, 88px); }
[data-direction="soundproofing"] .sp-hero__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(24px, 4vw, 64px); align-items: center;
}
@media (max-width: 900px) { [data-direction="soundproofing"] .sp-hero__grid { grid-template-columns: 1fr; } }
[data-direction="soundproofing"] .sp-hero .subnav { margin-bottom: clamp(28px, 5vw, 56px); color: var(--ink-2); }
[data-direction="soundproofing"] .sp-eyebrow { color: var(--accent); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
[data-direction="soundproofing"] .sp-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.08; margin-bottom: 22px; }
[data-direction="soundproofing"] .sp-hero__lead { color: var(--ink-2); font-size: clamp(1rem, 1.3vw, 1.14rem); max-width: 46ch; margin-bottom: 28px; }
[data-direction="soundproofing"] .sp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
[data-direction="soundproofing"] .b-btn { border-radius: 999px; }

[data-direction="soundproofing"] .sp-art {
  position: relative; border-radius: 28px; overflow: hidden; background: #f3ece1;
  aspect-ratio: 640 / 520; box-shadow: 0 30px 80px -40px rgba(31, 60, 58, .35);
  view-transition-name: art-sound;
}
[data-direction="soundproofing"] .sp-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-direction="soundproofing"] .sp-art picture,
[data-direction="soundproofing"] .sp-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
[data-direction="soundproofing"] .sp-art__note {
  position: absolute; left: 16px; bottom: 14px; right: 16px;
  font-size: .74rem; color: #6d6558; background: rgba(255, 253, 249, .82); border-radius: 999px;
  padding: 6px 12px; width: fit-content;
}

/* раскрытие слоёв и затухание волн — один раз при загрузке, без зацикливания */
@media (prefers-reduced-motion: no-preference) {
  [data-direction="soundproofing"] .sp-layer { animation: sp-spread 1.6s cubic-bezier(.22,1,.36,1) .25s both; }
  [data-direction="soundproofing"] .sp-layer--2 { animation-delay: .35s; }
  [data-direction="soundproofing"] .sp-layer--3 { animation-delay: .45s; }
  [data-direction="soundproofing"] .sp-layer--4 { animation-delay: .55s; }
  [data-direction="soundproofing"] .sp-label { animation: sp-fade .8s ease both; }
  [data-direction="soundproofing"] .sp-label--1 { animation-delay: 1.3s; }
  [data-direction="soundproofing"] .sp-label--2 { animation-delay: 1.45s; }
  [data-direction="soundproofing"] .sp-label--3 { animation-delay: 1.6s; }
  [data-direction="soundproofing"] .sp-label--4 { animation-delay: 1.75s; }
  [data-direction="soundproofing"] .sp-label--5 { animation-delay: 1.9s; }
  [data-direction="soundproofing"] .sp-wave-out { animation: sp-wave 2.4s ease-out .2s both; }
  [data-direction="soundproofing"] .sp-wave-in { animation: sp-wave-in 2.4s ease-out 1.4s both; }
}
@keyframes sp-spread { from { transform: translateX(var(--from, 0)); } to { transform: translateX(0); } }
@keyframes sp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sp-wave { from { opacity: 0; transform: translateX(26px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes sp-wave-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Откуда шум: заголовок слева, спокойный список источников справа ---------- */
[data-direction="soundproofing"] .sp-section { padding: clamp(56px, 8vw, 104px) 0; }
[data-direction="soundproofing"] .sp-section--tint { background: var(--surface-2); }
[data-direction="soundproofing"] .sp-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px clamp(24px, 5vw, 80px); }
@media (max-width: 900px) { [data-direction="soundproofing"] .sp-split { grid-template-columns: 1fr; } }
[data-direction="soundproofing"] .sp-split__head { position: sticky; top: 96px; align-self: start; }
@media (max-width: 900px) { [data-direction="soundproofing"] .sp-split__head { position: static; } }
[data-direction="soundproofing"] .sp-section h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 16px; }
[data-direction="soundproofing"] .sp-muted { color: var(--ink-2); max-width: 44ch; }

[data-direction="soundproofing"] .sp-sources { list-style: none; margin: 0; padding: 0; }
[data-direction="soundproofing"] .sp-source {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
[data-direction="soundproofing"] .sp-source:first-child { border-top: 1px solid var(--line); }
[data-direction="soundproofing"] .sp-source svg { width: 64px; height: 64px; }
[data-direction="soundproofing"] .sp-source h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 6px; }
[data-direction="soundproofing"] .sp-source p { color: var(--ink-2); }
[data-direction="soundproofing"] .sp-aside {
  margin-top: 26px; padding: 18px 22px; border-radius: var(--radius); background: var(--accent-soft); color: #1b4a47;
}

/* ---------- Помещения ---------- */
[data-direction="soundproofing"] .sp-rooms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
@media (max-width: 1000px) { [data-direction="soundproofing"] .sp-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { [data-direction="soundproofing"] .sp-rooms { grid-template-columns: 1fr; } }
[data-direction="soundproofing"] .sp-room { background: var(--surface); border-radius: var(--radius); padding: 22px 20px; min-height: 150px; }
[data-direction="soundproofing"] .sp-room h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
[data-direction="soundproofing"] .sp-room p { color: var(--ink-2); font-size: .9rem; }

/* ---------- Решения по поверхностям: «слоёная» раскладка ---------- */
[data-direction="soundproofing"] .sp-strata { margin-top: 30px; border-radius: 22px; overflow: hidden; }
[data-direction="soundproofing"] .sp-stratum {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr); gap: 16px 28px;
  padding: 24px clamp(18px, 3vw, 34px);
}
@media (max-width: 640px) { [data-direction="soundproofing"] .sp-stratum { grid-template-columns: 1fr; } }
[data-direction="soundproofing"] .sp-stratum:nth-child(1) { background: #fffdf9; }
[data-direction="soundproofing"] .sp-stratum:nth-child(2) { background: #f7f1e6; }
[data-direction="soundproofing"] .sp-stratum:nth-child(3) { background: #efe5d3; }
[data-direction="soundproofing"] .sp-stratum:nth-child(4) { background: #e3eee9; }
[data-direction="soundproofing"] .sp-stratum:nth-child(5) { background: #d3e5df; }
[data-direction="soundproofing"] .sp-stratum h3 { font-size: 1.2rem; font-weight: 600; }
[data-direction="soundproofing"] .sp-stratum p { color: var(--ink-2); }

/* ---------- Этапы: мягкие точки на одной линии ---------- */
[data-direction="soundproofing"] .sp-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; counter-reset: sp; }
@media (max-width: 900px) { [data-direction="soundproofing"] .sp-steps { grid-template-columns: 1fr; } }
[data-direction="soundproofing"] .sp-steps li { counter-increment: sp; position: relative; padding-top: 58px; }
[data-direction="soundproofing"] .sp-steps li::before {
  content: counter(sp); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 600;
}
[data-direction="soundproofing"] .sp-steps h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
[data-direction="soundproofing"] .sp-steps p { color: var(--ink-2); font-size: .92rem; }

/* ---------- Вопросы ---------- */
[data-direction="soundproofing"] .sp-faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
[data-direction="soundproofing"] .sp-faq details:first-child { border-top: 1px solid var(--line); }
[data-direction="soundproofing"] .sp-faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
[data-direction="soundproofing"] .sp-faq summary::-webkit-details-marker { display: none; }
[data-direction="soundproofing"] .sp-faq summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 1.4rem; line-height: 1; }
[data-direction="soundproofing"] .sp-faq details[open] summary::after { content: "−"; }
[data-direction="soundproofing"] .sp-faq details p { color: var(--ink-2); margin-top: 10px; max-width: 70ch; }

/* ---------- Подбор (форма) ---------- */
[data-direction="soundproofing"] .sp-form-card {
  background: var(--surface); border-radius: 28px; padding: clamp(22px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 28px clamp(24px, 4vw, 56px);
  box-shadow: 0 30px 80px -50px rgba(31, 60, 58, .4);
}
@media (max-width: 900px) { [data-direction="soundproofing"] .sp-form-card { grid-template-columns: 1fr; } }
[data-direction="soundproofing"] .sp-prep { list-style: none; padding: 0; margin: 18px 0 0; }
[data-direction="soundproofing"] .sp-prep li { padding: 8px 0 8px 26px; position: relative; color: var(--ink-2); }
[data-direction="soundproofing"] .sp-prep li::before { content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); }