/* ===== Общие заголовки для страницы Проекты ===== */
.works-hero, .case-rail, .before-after { padding-block: 40px; }

/* ===== S1 Герой-портфолио ===== */
.wh-grid{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:28px; align-items:center;
}
.wh-copy h1{
  font-family:"Playfair Display",serif; font-weight:700;
  font-size:clamp(26px,3.2vw,44px); line-height:1.15; margin:0 0 10px;
}
.wh-copy .lead{ color:#dfe7de; margin:0 0 10px; }
.wh-points{ margin:8px 0 0; padding-left:18px; color:#cbd6cb; }

.wh-mosaic{
  display:grid; gap:12px;
  grid-template-areas: "s1 s2" "s1 s3";
  grid-template-columns: 1fr 1fr;
}
.wh-shot{ position:relative; background:var(--c-panel); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.wh-shot img{ aspect-ratio:4/5; object-fit:cover; transition: transform .6s var(--ease), filter .6s var(--ease); }
.wh-shot:hover img{ transform: scale(1.05); }
.wh-shot figcaption{
  position:absolute; inset-inline:10px; inset-block-end:8px; font-size:12px;
  background:rgba(15,18,15,.55); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:6px 8px;
}
.wh-shot.s1{ grid-area:s1; transform: rotate(-1deg); }
.wh-shot.s2{ grid-area:s2; transform: rotate(1deg); }
.wh-shot.s3{ grid-area:s3; transform: rotate(-.5deg); }
.wh-shot:hover{ transform: rotate(0deg) scale(1.01); }

/* ===== S2 Горизонтальная лента кейсов ===== */
.cr-head{ display:grid; grid-template-columns: 1fr auto; gap:16px; align-items:end; }
.cr-head h2{ margin:0; font-family:"Playfair Display",serif; font-size:clamp(22px,2.4vw,34px); }
.sec-lead{ color:#dfe7de; grid-column:1/-1; margin:0; }

.cr-controls{ display:flex; gap:10px; }
.cr-btn{
  inline-size:38px; block-size:38px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer; transition:.2s var(--ease);
}
.cr-btn:hover{ transform: translateY(-1px); background: rgba(155,207,135,.12); }

.cr-rail{
  margin-top:14px; display:grid; grid-auto-flow:column; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:16px; padding-bottom:6px;
}
.cr-rail::-webkit-scrollbar{ height:8px; }
.cr-rail::-webkit-scrollbar-thumb{ background:#2a2f2a; border-radius:8px; }

.cr-card{
  scroll-snap-align:start;
  inline-size: clamp(260px, 48vw, 350px);
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  transition: transform .3s var(--ease);
}
.cr-card:hover{ transform: translateY(-3px); }
.cr-card img{ aspect-ratio:4/3; object-fit:cover; }
.cr-card h3{ margin:10px 12px 6px; font-size:18px; }
.cr-card p{ margin:0 12px 12px; color:#cbd6cb; }
.cr-card.text-only{ display:grid; align-content:start; padding-bottom:10px; }
.cr-card.text-only h3{ margin-top:10px; }

/* ===== S3 До/после ===== */
.ba-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:start; }
.ba-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.ba-slider{ margin-top:10px; }
.ba-range{
  width:100%; appearance:none; background:transparent; margin-bottom:10px;
}
.ba-range::-webkit-slider-runnable-track{ height:6px; border-radius:999px; background:#2a2f2a; }
.ba-range::-moz-range-track{ height:6px; border-radius:999px; background:#2a2f2a; }
.ba-range::-webkit-slider-thumb{
  appearance:none; width:18px; height:18px; border-radius:50%;
  background: linear-gradient(180deg, var(--c-moss), var(--c-meadow));
  margin-top:-6px; box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.ba-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background: linear-gradient(180deg, var(--c-moss), var(--c-meadow));
  border:none;
}

.ba-viewport{
  position:relative; border-radius:16px; overflow:hidden; background:#111;
  block-size:auto; /* высота по содержимому */
}
.ba-img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.ba-before{ filter: saturate(.9) contrast(.95); }
.ba-after{
  position:absolute; inset:0; width:var(--pos,50%); object-fit:cover; clip-path: inset(0 calc(100% - var(--pos,50%)) 0 0);
}
.ba-handle{
  position:absolute; top:0; left:var(--pos,50%); width:2px; height:100%; background:#e8efe8; opacity:.6;
  transform: translateX(-1px);
}
.ba-label{
  position:absolute; top:8px; font-size:12px; background:rgba(15,18,15,.55); border:1px solid rgba(255,255,255,.08);
  padding:4px 8px; border-radius:10px;
}
.ba-label.ba-l{ left:8px; }
.ba-label.ba-r{ right:8px; }

/* Деталь */
.ba-detail .ba-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.ba-detail .ba-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== Адаптив: текст сверху на мобилке ===== */
@media (max-width: 1100px){
  .wh-grid{ grid-template-columns:1fr; }
  .wh-copy{ order:1; } .wh-mosaic{ order:2; }

  .cr-head{ grid-template-columns:1fr; }
  .ba-grid{ grid-template-columns:1fr; }
  .ba-copy{ order:1; } .ba-detail{ order:2; }
}
@media (max-width: 720px){
  .wh-mosaic{ grid-template-areas: "s1" "s2" "s3"; }
  .wh-shot.s1,.wh-shot.s2,.wh-shot.s3{ transform:none; }
}
/* ===== S4 Пары материалов ===== */
.material-pairs{ padding-block: 40px; }
.mp-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.mp-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.mp-tabs{ display:flex; gap:10px; margin:10px 0; flex-wrap:wrap; }
.mp-tab{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer; transition: background .25s var(--ease), transform .25s var(--ease);
}
.mp-tab:hover{ transform: translateY(-1px); }
.mp-tab.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }
.mp-points{ margin:10px 0 0; padding-left:18px; color:#cbd6cb; }

.mp-view{ position:relative; min-block-size:280px; }
.mp-layer{ margin:0; }
.mp-layer img{ aspect-ratio:4/3; object-fit:cover; border-radius:16px; box-shadow:var(--shadow); }
.mp-layer.gabion{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
.mp-view.state-gabion .gabion{ opacity:1; pointer-events:auto; }
.mp-view.state-gabion .lime{ opacity:0; }

/* ===== S5 План маршрутов ===== */
.route-plan{ padding-block: 40px; }
.rp-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.rp-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.rp-controls{ display:flex; gap:10px; margin:10px 0; }
.rp-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer; transition: background .25s var(--ease), transform .25s var(--ease);
}
.rp-btn:hover{ transform: translateY(-1px); }
.rp-btn.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }
.rp-legend{ list-style:none; display:flex; gap:14px; margin:6px 0 0; padding:0; color:#cbd6cb; }
.chip{ inline-size:16px; block-size:8px; border-radius:6px; display:inline-block; margin-right:6px; vertical-align:middle; }
.chip-path{ background:linear-gradient(90deg,#8ac08a,#c3d7a4); }
.chip-light{ background:#6b7569; }

.rp-view{ position:relative; min-block-size:280px; }
.rp-layer{ margin:0; }
.rp-layer img{ aspect-ratio:4/3; object-fit:cover; border-radius:16px; box-shadow:var(--shadow); }
.rp-layer.night{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
.rp-view.mode-night .night{ opacity:1; pointer-events:auto; }
.rp-view.mode-night .day{ opacity:0; }

/* ненавязчивый «свет» для ночного плана */
.rp-layer.night::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:
    radial-gradient(160px 60px at 75% 70%, rgba(255,220,150,.28), transparent 60%),
    radial-gradient(100px 40px at 30% 40%, rgba(255,220,150,.22), transparent 60%);
  mix-blend-mode:screen;
}

/* ===== S6 История клиента ===== */
.client-story{ padding-block: 40px; }
.cs-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.cs-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.cs-quote{
  margin:8px 0 10px; padding:10px 12px; color:#dfe7de;
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06); border-radius:14px;
  box-shadow: var(--shadow);
}

.cs-photos{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
.cs-shot{ position:relative; background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.cs-shot img{ aspect-ratio:4/3; object-fit:cover; transition: transform .45s var(--ease); }
.cs-shot.a{ transform: rotate(-.6deg); }
.cs-shot.b{ transform: rotate(.8deg); }
.cs-shot:hover{ transform: rotate(0deg) scale(1.01); }
.cs-shot figcaption{
  position:absolute; inset-inline:10px; inset-block-end:8px; font-size:12px;
  background:rgba(15,18,15,.55); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:6px 8px;
}

/* ===== Адаптив 4–6: текст сверху ===== */
@media (max-width: 1100px){
  .mp-grid, .rp-grid, .cs-grid{ grid-template-columns: 1fr; }
  .mp-copy, .rp-copy, .cs-copy{ order:1; }
  .mp-view, .rp-view, .cs-photos{ order:2; }
}
@media (max-width: 700px){
  .cs-photos{ grid-template-columns: 1fr; }
  .cs-shot.a, .cs-shot.b{ transform:none; }
}
/* ===== S7 Террасы и уклон ===== */
.slope-terraces{ padding-block: 40px; }
.st-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.st-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.st-controls{ display:flex; gap:10px; margin:10px 0; }
.st-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer; transition:.25s var(--ease);
}
.st-btn:hover{ transform: translateY(-1px); }
.st-btn.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.st-legend{ list-style:none; display:flex; gap:14px; margin:6px 0 0; padding:0; color:#cbd6cb; }
.chip{ inline-size:16px; block-size:8px; border-radius:6px; display:inline-block; margin-right:6px; vertical-align:middle; }
.chip-flow{ background:linear-gradient(90deg,#8ac08a,#c3d7a4); }
.chip-retain{ background:#6b7569; }

.st-visual{ display:grid; gap:12px; }
.st-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.st-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

.st-diagram{
  position:relative; background:var(--c-panel); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:12px; min-block-size:200px; overflow:hidden;
}
.st-diagram .step{
  display:block; inline-size:100%; block-size:14px; border-radius:10px; margin:8px 0;
  background: repeating-linear-gradient(90deg, #2f332f 0 18px, #3a433a 18px 36px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.flow{
  position:absolute; left:16px; inline-size:calc(100% - 32px); height:4px; border-radius:999px;
  background: linear-gradient(90deg, var(--c-moss), var(--c-meadow));
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  animation: stFlow 1.6s linear infinite;
}
@keyframes stFlow {
  0%{ transform: translateX(-4%); } 100%{ transform: translateX(4%); }
}
.flow.f1{ top: 36px; } .flow.f2{ top: 80px; } .flow.f3{ top: 124px; }

/* реакция на уклон: меняем «амплитуду» (высоту) потока */
.st-diagram.state-1 .flow{ height:4px; opacity:.9; }
.st-diagram.state-3 .flow{ height:6px; opacity:.95; }
.st-diagram.state-5 .flow{ height:8px; opacity:1; }

/* ===== S8 Малые формы ===== */
.small-forms{ padding-block: 40px; }
.sfm-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.sfm-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.sfm-cards{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
.sfm-cards .card{
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06); border-radius:16px;
  padding:12px; box-shadow:var(--shadow); transition: transform .25s var(--ease);
}
.sfm-cards .card:hover{ transform: translateY(-2px); }
.sfm-cards .card h3{ margin:6px 0 6px; }

.sfm-photos{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
.sfm-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.sfm-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== S9 Камень после дождя ===== */
.stone-wet-dry{ padding-block: 40px; }
.swd-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.swd-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.swd-controls{ display:flex; gap:10px; margin-top:10px; }
.swd-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer; transition:.25s var(--ease);
}
.swd-btn:hover{ transform: translateY(-1px); }
.swd-btn.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.swd-view{ position:relative; min-block-size:280px; }
.swd-layer{ margin:0; }
.swd-layer img{ aspect-ratio:4/3; object-fit:cover; border-radius:16px; box-shadow:var(--shadow); }
.swd-layer.wet{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
.swd-view.mode-wet .wet{ opacity:1; pointer-events:auto; }
.swd-view.mode-wet .dry{ opacity:0; }

/* имитация «капель» поверх мокрого кадра (чисто CSS) */
.swd-layer.wet::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:
    radial-gradient(6px 6px at 20% 30%, rgba(200,220,255,.25), transparent 40%),
    radial-gradient(5px 5px at 60% 50%, rgba(200,220,255,.22), transparent 40%),
    radial-gradient(4px 4px at 35% 70%, rgba(200,220,255,.2), transparent 40%);
  mix-blend-mode:screen;
}

/* ===== Адаптив 7–9: текст сверху на мобилке ===== */
@media (max-width: 1100px){
  .st-grid, .sfm-grid, .swd-grid{ grid-template-columns: 1fr; }
  .st-copy, .sfm-copy, .swd-copy{ order:1; }
  .st-visual, .sfm-photos, .swd-view{ order:2; }
}
@media (max-width: 720px){
  .sfm-cards, .sfm-photos{ grid-template-columns: 1fr; }
}
/* ===== S10 Злаки — низкие vs высокие ===== */
.grasses-heights{ padding-block: 40px; }
.gh-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.gh-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.gh-tabs{ display:flex; gap:10px; margin:10px 0; }
.gh-tab{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer; transition:.25s var(--ease);
}
.gh-tab:hover{ transform: translateY(-1px); }
.gh-tab.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.gh-bars{
  margin-top:10px; display:grid; grid-auto-flow:column; gap:8px; align-items:end;
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:10px;
}
.gh-bars .bar{
  inline-size:18px; border-radius:10px 10px 0 0;
  background: linear-gradient(180deg, var(--c-moss), var(--c-meadow));
  height: 28px; transition: height .35s var(--ease), filter .25s var(--ease);
}
.gh-bars.mode-tall .bar{ height: 68px; }
.gh-bars .bar:hover{ filter: brightness(1.05) contrast(1.05); }

.gh-points{ margin:10px 0 0; padding-left:18px; color:#cbd6cb; }

.gh-photos{
  display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0, 350px));
  justify-content:start;
}
.gh-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.gh-shot img{ aspect-ratio:4/3; object-fit:cover; display:block; }
.gh-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== S11 Сухой ручей ===== */
.dry-creek{ padding-block: 40px; }
.dc-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.dc-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.dc-controls{ margin:10px 0; }
.dc-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer; transition:.25s var(--ease);
}
.dc-btn:hover{ transform: translateY(-1px); }

.dc-legend{ list-style:none; display:flex; gap:14px; margin:6px 0 0; padding:0; color:#cbd6cb; }
.chip{ inline-size:16px; block-size:8px; border-radius:6px; display:inline-block; margin-right:6px; vertical-align:middle; }
.chip-flow{ background:linear-gradient(90deg,#8ac08a,#c3d7a4); }
.chip-retain{ background:#6b7569; }

.dc-photos{
  position:relative;
  display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0, 350px)); justify-content:start;
}
.dc-shot{ position:relative; background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.dc-shot img{ aspect-ratio:4/3; object-fit:cover; display:block; }
.dc-shot figcaption{
  position:absolute; inset-inline:10px; inset-block-end:8px; font-size:12px;
  background:rgba(15,18,15,.55); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:6px 8px;
}

/* Схема потока поверх основного кадра */
#dcView.show-flow .dc-main::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:16px;
  background:
    radial-gradient(14px 14px at 20% 30%, rgba(170,220,170,.35), transparent 50%),
    radial-gradient(12px 12px at 60% 55%, rgba(170,220,170,.28), transparent 50%),
    linear-gradient(180deg, rgba(120,170,120,.18), transparent 60%);
  mix-blend-mode:screen;
}
#dcView.show-flow .dc-main::before{
  content:""; position:absolute; left:10%; right:10%; top:40%; height:6px; border-radius:999px;
  background: linear-gradient(90deg, var(--c-moss), var(--c-meadow));
  opacity:.9; box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* ===== S12 Патио — кейсы ===== */
.patio-cases{ padding-block: 40px; }
.pc-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.pc-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.pc-points{ margin:10px 0 0; padding-left:18px; color:#cbd6cb; }

.pc-photos{
  display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0, 350px));
  justify-content:start;
}
.pc-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.pc-shot img{ aspect-ratio:4/3; object-fit:cover; display:block; }
.pc-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== Адаптив 10–12: текст сверху ===== */
@media (max-width: 1100px){
  .gh-grid, .dc-grid, .pc-grid{ grid-template-columns: 1fr; }
  .gh-copy, .dc-copy, .pc-copy{ order:1; }
  .gh-photos, .dc-photos, .pc-photos{ order:2; }
}
@media (max-width: 720px){
  .gh-photos, .dc-photos, .pc-photos{ grid-template-columns: 1fr; }
}
/* ===== S13 Свет по фасаду ===== */
.facade-light{ padding-block: 40px; }
.fl-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.fl-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.fl-controls{ display:flex; gap:10px; margin:10px 0; flex-wrap:wrap; }
.fl-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer; transition:.25s var(--ease);
}
.fl-btn:hover{ transform: translateY(-1px); }
.fl-btn.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.fl-view{
  position:relative; border:1px solid rgba(255,255,255,.06); border-radius:16px; overflow:hidden; background:#111;
}
.fl-base{ margin:0; }
.fl-base img{ aspect-ratio: 4/3; object-fit: cover; display:block; }
.beam{ position:absolute; inset:0; pointer-events:none; opacity:0; transition: opacity .4s var(--ease); }
.beam-15{
  background:
    linear-gradient(15deg, rgba(255,230,180,.22) 0%, transparent 55%),
    radial-gradient(400px 140px at 10% 90%, rgba(255,230,180,.28), transparent 60%);
  mix-blend-mode:screen;
}
.beam-30{
  background:
    linear-gradient(30deg, rgba(255,225,170,.22) 10%, transparent 60%),
    radial-gradient(300px 120px at 20% 80%, rgba(255,225,170,.25), transparent 60%);
  mix-blend-mode:screen;
}
.beam-60{
  background:
    radial-gradient(220px 80px at 35% 75%, rgba(255,220,150,.3), transparent 60%),
    radial-gradient(180px 60px at 70% 60%, rgba(255,220,150,.25), transparent 60%);
  mix-blend-mode:screen;
}
.fl-view.a15 .beam-15{ opacity:1; }
.fl-view.a30 .beam-30{ opacity:1; }
.fl-view.a60 .beam-60{ opacity:1; }

.fl-photos{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0, 350px)); justify-content:start; }
.fl-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.fl-shot img{ aspect-ratio:4/3; object-fit:cover; display:block; }
.fl-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== S14 Город и двор — шум ===== */
.urban-calm{ padding-block: 40px; }
.uc-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.uc-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.uc-tabs{ display:flex; gap:10px; margin:10px 0; }
.uc-tab{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer; transition:.25s var(--ease);
}
.uc-tab:hover{ transform: translateY(-1px); }
.uc-tab.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.uc-visual{ display:grid; gap:12px; }
.noise-waves{
  display:grid; grid-template-columns: repeat(20, 1fr); gap:4px;
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px;
}
.nw{
  block-size:30px; border-radius:6px;
  background: linear-gradient(180deg, var(--c-moss), var(--c-meadow));
  transform-origin:center bottom; animation: nwCity 1.2s ease-in-out infinite;
  opacity:.9;
}
@keyframes nwCity{ 0%,100%{ transform: scaleY(.8); } 50%{ transform: scaleY(1.2); } }
.noise-waves.mode-courtyard .nw{ animation: nwYard 1.6s ease-in-out infinite; }
@keyframes nwYard{ 0%,100%{ transform: scaleY(.4); } 50%{ transform: scaleY(.8); } }
.nw:nth-child(odd){ animation-delay:.1s; } .nw:nth-child(3n){ animation-delay:.2s; }

.uc-photos{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0, 350px)); justify-content:start; }
.uc-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.uc-shot img{ aspect-ratio:4/3; object-fit:cover; display:block; }
.uc-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== S15 Тропинки — шаг ===== */
.path-rhythm{ padding-block: 40px; }
.pr-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.pr-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.pr-tabs{ display:flex; gap:10px; margin:10px 0; flex-wrap:wrap; }
.pr-tab{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer; transition:.25s var(--ease);
}
.pr-tab:hover{ transform: translateY(-1px); }
.pr-tab.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.pr-visual{
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06); border-radius:16px;
  padding:12px; display:grid; grid-auto-flow:column; gap: var(--gap, 22px); justify-content:start;
}
.pr-visual .p{
  inline-size:44px; block-size:20px; border-radius:6px;
  background: repeating-linear-gradient(90deg, #2f332f 0 18px, #3a433a 18px 36px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.pr-visual.s45{ --gap: 22px; }
.pr-visual.s60{ --gap: 36px; }
.pr-visual.s75{ --gap: 50px; }

.pr-photos{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0, 350px)); justify-content:start; }
.pr-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.pr-shot img{ aspect-ratio:4/3; object-fit:cover; display:block; }
.pr-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== S16 Команда ===== */
.craft-team{ padding-block: 40px; }
.ct-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start; }
.ct-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.ct-photos{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0, 350px)); justify-content:start; }
.ct-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.ct-shot img{ aspect-ratio:4/3; object-fit:cover; display:block; }
.ct-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== Адаптив 13–16: текст сверху ===== */
@media (max-width: 1100px){
  .fl-grid, .uc-grid, .pr-grid, .ct-grid{ grid-template-columns: 1fr; }
  .fl-copy, .uc-copy, .pr-copy, .ct-copy{ order:1; }
  .fl-view, .uc-visual, .pr-photos, .ct-photos{ order:2; }
}
@media (max-width: 720px){
  .fl-photos, .uc-photos, .pr-photos, .ct-photos{ grid-template-columns: 1fr; }
}
/* базовое положение бегунка/среза для before/after без инлайна */
.ba-viewport{ --pos: 50%; }