/* ============================================================
   ORTIKOV — LED visual design for events
   Тёмная галерея: работы светятся, интерфейс молчит.
   Мотив движения взят из логотипа — волны, расходящиеся от центра.
   ============================================================ */
:root{
  color-scheme:dark;
  --ink:#08080A; --ink-2:#0F0F13; --ink-3:#16161C;
  --line:#23232C; --line-2:#30303A;
  --text:#EFE9DE; --text-2:#C6BFB0; --muted:#9D9587;
  --gold:#C7A55F; --gold-2:#E2C88C;
  --max:1280px; --pad:clamp(20px,5vw,60px);
  --f-disp:"Cormorant Garamond",Georgia,serif;
  --f-body:"Manrope","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--f-body); font-weight:500; font-size:1.125rem; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.loading, .loading body{overflow:hidden; height:100%}
.lb-lock, .lb-lock body{overflow:hidden}
html:not(.js) #pre{display:none}
img,video{max-width:100%; display:block}
a,a:link,a:visited,a:hover,a:active{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:400}
p{margin:0}
::selection{background:var(--gold); color:#100D06}

/* ── примитивы ─────────────────────────────────────────── */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.sec{padding-block:clamp(72px,10vw,150px); position:relative}
.label{font-size:.8125rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--gold)}
.mono{font-family:var(--f-mono); font-weight:500; font-variant-numeric:tabular-nums}
.h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(2.35rem,5vw,4rem); line-height:1.08; letter-spacing:-.015em}
.lede{max-width:62ch; color:var(--text-2); font-size:1.25rem; font-weight:400; line-height:1.62}
.sec-head{display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(38px,5vw,64px)}

.rule{display:flex; align-items:center; gap:18px; color:var(--line-2)}
.rule::before,.rule::after{content:""; height:1px; background:currentColor; flex:1}
.rule svg{width:16px; height:16px; color:var(--gold); opacity:.6; flex:none}

.btn{font-size:.9375rem;
  position:relative; display:inline-flex; align-items:center; gap:10px; padding:14px 28px;
  border:1px solid var(--gold); color:var(--gold-2); text-decoration:none; overflow:hidden;
  font-size:.875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; cursor:pointer; will-change:transform;
}
.btn span{position:relative; z-index:1; transition:color .4s var(--ease)}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:scaleY(0); transform-origin:bottom; transition:transform .45s var(--ease);
}
.btn:hover::before{transform:scaleY(1)}
.btn:hover span{color:#100D06}
.btn-q{border-color:var(--line-2); color:var(--text-2)}
.btn-q::before{background:var(--text)}
:where(a,button,input,textarea):focus-visible{outline:2px solid var(--gold-2); outline-offset:3px}

/* ── прелоадер: волны логотипа расходятся от центра ─────── */
#pre{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:center; will-change:opacity;
}
#pre .waves{width:min(70vmin,560px); aspect-ratio:1; color:var(--gold)}
#pre .waves circle{fill:none; stroke:currentColor; vector-effect:non-scaling-stroke}
#pre .core{stroke-width:8.5; opacity:0}
#pre .w{stroke-width:1.4; opacity:0}
#pre .bar{
  position:absolute; bottom:12%; left:50%; translate:-50% 0; width:min(200px,34vw); height:1px;
  background:var(--line-2); overflow:hidden;
}
#pre .bar i{display:block; height:100%; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left}
#pre .pct{
  position:absolute; bottom:calc(12% + 18px); left:50%; translate:-50% 0;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.2em; color:var(--muted);
}

/* ── свечение за курсором ───────────────────────────────── */
#glow{
  position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; pointer-events:none; z-index:1; opacity:0;
  background:radial-gradient(circle,rgba(199,165,95,.13),rgba(199,165,95,.04) 42%,transparent 68%);
  transition:opacity .5s ease; will-change:transform;
}

/* ── шапка ──────────────────────────────────────────────── */
.hdr{position:fixed; top:0; left:0; right:0; z-index:90; border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,backdrop-filter .35s}
.hdr.stuck{background:rgba(8,8,10,.86); backdrop-filter:blur(16px); border-bottom-color:var(--line)}
.hdr-in{display:flex; align-items:center; gap:24px; height:74px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand svg{width:27px; height:27px; color:var(--text); flex:none}
.brand b{font-weight:700; font-size:.9375rem; letter-spacing:.3em; text-transform:uppercase}
.nav{display:flex; gap:30px}
.nav a{position:relative; text-decoration:none; font-size:.875rem; font-weight:600; color:var(--text-2); letter-spacing:.03em}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease)}
.nav a:hover{color:var(--gold-2)}
.nav a:hover::after{transform:scaleX(1); transform-origin:left}
.hdr .btn{padding:11px 22px}
@media(max-width:1000px){.nav,.hdr .btn{display:none}}

/* ── первый экран ───────────────────────────────────────── */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden;
  border-bottom:1px solid var(--line); padding-block:120px clamp(40px,6vw,72px)}
.hero-bg{position:absolute; inset:-14% -8%; z-index:0; overflow:hidden;
  will-change:transform; backface-visibility:hidden}
.hero-bg video,.hero-bg img.poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s ease; will-change:opacity;
}
.hero-bg video.on,.hero-bg img.poster.on{opacity:1}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,10,.94) 4%,rgba(8,8,10,.5) 46%,rgba(8,8,10,.72));
}
.rings-wrap{position:absolute; z-index:2; left:50%; top:46%; width:min(180vw,1750px); aspect-ratio:1;
  margin-left:calc(min(180vw,1750px) / -2); margin-top:calc(min(180vw,1750px) / -2);
  pointer-events:none}
.rings{width:100%; height:100%; color:var(--gold); opacity:.42; will-change:transform}
.rings circle{fill:none; stroke:currentColor; stroke-width:1; vector-effect:non-scaling-stroke}
.hero-in{position:relative; z-index:3; width:100%; will-change:transform}
.hero h1{font-family:var(--f-disp); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2.8rem,7.4vw,6.2rem); line-height:1; margin:26px 0 0; max-width:15ch}
.hero h1 em{font-style:italic; color:var(--gold-2)}
.hero .lede{margin-top:28px; font-size:clamp(1.125rem,1.6vw,1.375rem); color:var(--text)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}
.specs{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:40px;
  font-family:var(--f-mono); font-weight:500; font-size:.875rem; color:var(--text-2)}
.specs span{display:flex; align-items:center; gap:9px}
.specs span::before{content:""; width:4px; height:4px; background:var(--gold); flex:none}
.hero-dots{position:absolute; right:var(--pad); bottom:clamp(40px,6vw,72px); z-index:4;
  display:flex; align-items:center; gap:9px}
/* Ширина кнопок ФИКСИРОВАНА, а подпись вынесена из потока над ними:
   иначе длина названия и подсветка активной полоски двигали весь ряд,
   и попасть по кнопке было тяжело. */
.hero-dots button{width:30px; height:26px; padding:0; border:0; background:transparent;
  cursor:pointer; display:block; position:relative; flex:0 0 30px}
.hero-dots button::before{content:""; position:absolute; left:0; right:0; top:12px; height:2px;
  background:var(--line-2); transition:background .3s,height .25s,top .25s}
.hero-dots button:hover::before{background:var(--muted); height:3px; top:11.5px}
.hero-dots button b{position:absolute; left:0; right:0; top:12px; height:2px; display:block;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:height .25s,top .25s}
.hero-dots button[aria-current="true"]::before{background:var(--muted); height:4px; top:11px}
.hero-dots button[aria-current="true"] b{height:4px; top:11px}
.dot-name{position:absolute; right:0; bottom:100%; margin-bottom:12px; white-space:nowrap;
  text-align:right; font-family:var(--f-mono); font-weight:500; font-size:.8125rem;
  color:var(--text-2); letter-spacing:.05em}
@media(max-width:760px){
  .hero-dots{right:auto; left:var(--pad)}
  .dot-name{right:auto; left:0; text-align:left; font-size:.75rem}
}

/* ── появление ──────────────────────────────────────────── */
.js .rv{opacity:0}
.line-mask{overflow:hidden; display:block}

/* ── три принципа ───────────────────────────────────────── */
.tri{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px)}
.tri>div{position:relative; padding-top:24px}
.tri>div::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .95s var(--ease)}
.tri>div.drawn::before{transform:scaleX(1)}
html:not(.js) .tri>div::before{transform:scaleX(1)}
.tri h3{font-family:var(--f-disp); font-weight:600; font-size:2.1rem; line-height:1.14; margin-bottom:14px}
.tri p{color:var(--text-2); font-size:1.125rem}
@media(max-width:820px){.tri{grid-template-columns:1fr; gap:34px}}

/* ── реальные мероприятия ───────────────────────────────── */
.live{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:14px}
.slot{position:relative; aspect-ratio:16/10; border:1px dashed var(--line-2); overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,rgba(199,165,95,.05),transparent 62%),var(--ink-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px}
.slot svg{width:46px; height:46px; color:var(--gold); opacity:.28}
.slot .cap{font-family:var(--f-mono); font-weight:500; font-size:.8125rem; color:var(--muted); text-align:center; padding-inline:14px}
.slot .cap b{display:block; color:var(--text-2); margin-bottom:4px}
@media(max-width:820px){.live{grid-template-columns:1fr 1fr}.live>:first-child{grid-column:1/-1}}

/* ── каталог ────────────────────────────────────────────── */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.chip{border:1px solid var(--line-2); background:transparent; color:var(--text-2); font-family:var(--f-body);
  font-size:.9375rem; font-weight:600; letter-spacing:.02em; padding:10px 20px; cursor:pointer;
  transition:color .25s,border-color .25s,background .25s}
.chip:hover{color:var(--text); border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#100D06; font-weight:700}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media(max-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}
.card{position:relative; overflow:hidden; background:var(--ink-2); border:1px solid var(--line);
  aspect-ratio:16/9; cursor:pointer}
.lang{font-family:var(--f-mono); font-size:.8125rem; font-weight:600; letter-spacing:.08em;
  color:var(--text-2); border:1px solid var(--line-2); padding:9px 13px; margin-left:auto;
  transition:color .25s, border-color .25s}
.lang:hover{color:var(--gold-2); border-color:var(--gold)}
@media(max-width:900px){.lang{margin-left:0; padding:7px 10px}}
.more-wrap{display:flex; justify-content:center; margin-top:26px}
.more[hidden]{display:none}
.card.pano{aspect-ratio:3/1; grid-column:span 2}
@media(max-width:460px){.card.pano{grid-column:span 1}}
.card img,.card video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.card video{opacity:0; transition:opacity .55s ease}
.card.playing video{opacity:1}
.card img,.card video{transition:transform .7s var(--ease), opacity .5s ease}
.card:hover img,.card:hover video{transform:scale(1.05)}
.card.playing img{opacity:0}
.card figcaption{position:absolute; inset:auto 0 0 0; padding:26px 14px 13px; z-index:2;
  background:linear-gradient(to top,rgba(8,8,10,.94),transparent);
  font-size:1.0625rem; font-weight:600; color:var(--text);
  opacity:0; transform:translateY(8px); transition:opacity .35s ease,transform .35s var(--ease)}
.card:hover figcaption{opacity:1; transform:none}
.card::after{content:""; position:absolute; inset:0; border:1px solid var(--gold); opacity:0;
  transition:opacity .35s ease; pointer-events:none; z-index:3}
.card:hover::after{opacity:.55}
.cat-note{margin-top:28px; color:var(--muted); font-size:1.0625rem; max-width:62ch}

/* ── сцена мультизонного маппинга (закрепляется при прокрутке) ── */
.zone-stage{position:relative}
.zone-row{display:flex; align-items:stretch; gap:0}
.zone{position:relative; overflow:hidden; aspect-ratio:var(--ar); border:1px solid transparent}
.zone img{position:absolute; top:0; height:100%; max-width:none; object-fit:cover}
.zone .px{position:absolute; left:0; right:0; bottom:0; z-index:2; opacity:0;
  font-family:var(--f-mono); font-weight:500; font-size:.75rem; color:var(--gold-2); text-align:center;
  background:linear-gradient(to top,rgba(8,8,10,.92),transparent); padding:18px 8px 8px}
.zone-a{flex:0 0 19.3%} .zone-b{flex:0 0 61.4%} .zone-c{flex:0 0 19.3%}
html:not(.js) .zone-row{gap:12px}
html:not(.js) .zone{border-color:var(--line-2)}
html:not(.js) .zone .px{opacity:1}
.zone-sweep{position:absolute; left:0; top:50%; height:1px; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:left; z-index:4; opacity:.85; pointer-events:none}
.zone-cap{display:flex; align-items:center; gap:14px; margin-top:20px;
  font-family:var(--f-mono); font-weight:500; font-size:.75rem; color:var(--muted); letter-spacing:.06em}
.zone-cap::before,.zone-cap::after{content:""; height:1px; background:var(--line-2); flex:1}
.zone-cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start;
  margin-top:clamp(38px,5vw,60px)}
@media(max-width:880px){.zone-cols{grid-template-columns:1fr}}
.zh3{font-family:var(--f-disp); font-weight:600; font-size:2.1rem; margin-bottom:14px}

/* ── персонализация ─────────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,64px); align-items:center}
.split-media{border:1px solid var(--line-2); background:var(--ink-2); overflow:hidden; position:relative}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.scripts{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.scripts span{font-family:var(--f-mono); font-weight:500; font-size:.8438rem; color:var(--text-2);
  border:1px solid var(--line-2); padding:6px 13px}

/* ── технические возможности ────────────────────────────── */
.tech-wrap{overflow-x:auto; border:1px solid var(--line); background:var(--ink-2)}
.tech{width:100%; border-collapse:collapse; min-width:580px}
.tech th,.tech td{text-align:left; padding:18px 24px; border-bottom:1px solid var(--line); vertical-align:top}
.tech tr:last-child th,.tech tr:last-child td{border-bottom:0}
.tech th{width:31%; font-family:var(--f-body); font-size:.75rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); white-space:nowrap}
.tech td{font-family:var(--f-mono); font-weight:500; font-size:.9375rem; color:var(--text-2); line-height:1.65}
.tech td em{font-style:normal; font-family:var(--f-body); font-weight:400; font-size:.9375rem;
  color:var(--muted); display:block; margin-top:6px}

/* ── процесс ────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(4,1fr); position:relative; border-top:1px solid var(--line)}
.steps::before{content:""; position:absolute; top:-1px; left:0; height:1px; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease)}
.steps.drawn::before{transform:scaleX(1)}
html:not(.js) .steps::before{transform:scaleX(1)}
.step{padding:28px 28px 32px 0; border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step:not(:first-child){padding-left:28px}
.step .n{font-family:var(--f-mono); font-weight:500; font-size:.8125rem; color:var(--gold); letter-spacing:.1em}
.step h3{font-family:var(--f-disp); font-weight:600; font-size:1.9rem; margin:12px 0 4px}
.step .t{font-family:var(--f-mono); font-weight:500; font-size:.8125rem; color:var(--muted); margin-bottom:14px}
.step p{font-size:1.0625rem; color:var(--text-2)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.step{border-bottom:1px solid var(--line)}
  .step:nth-child(2n){border-right:0}.step:nth-child(n+3){border-bottom:0}}
@media(max-width:560px){.steps{grid-template-columns:1fr}
  .step{border-right:0; padding-left:0!important; padding-right:0}.step:last-child{border-bottom:0}}

/* ── цены ───────────────────────────────────────────────── */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{border:1px solid var(--line); background:var(--ink-2); padding:34px 30px 36px; position:relative;
  display:flex; flex-direction:column; gap:18px; transition:border-color .4s ease,transform .5s var(--ease)}
.tier:hover{border-color:var(--line-2); transform:translateY(-4px)}
.tier.hi{border-color:var(--gold); background:linear-gradient(to bottom,rgba(199,165,95,.055),var(--ink-2) 46%)}
.tier .flag{position:absolute; top:-1px; right:22px; background:var(--gold); color:#100D06;
  font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:5px 13px}
.tier h3{font-family:var(--f-body); font-size:.75rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold)}
.tier .price{font-family:var(--f-disp); font-size:3.4rem; font-weight:600; line-height:1}
.tier .price small{font-family:var(--f-body); font-size:.8125rem; font-weight:500; color:var(--muted);
  letter-spacing:.05em; display:block; margin-bottom:8px}
.tier>p{color:var(--text-2); font-size:1.0625rem}
.tier ul{list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.tier li{display:flex; gap:11px; font-size:1.0625rem; color:var(--text-2); border-top:1px solid var(--line); padding-top:11px}
.tier li::before{content:""; width:5px; height:5px; background:var(--gold); flex:none; margin-top:9px}
.addon{margin-top:16px; border:1px solid var(--line); background:var(--ink-2); padding:22px 26px;
  display:flex; flex-wrap:wrap; gap:10px 34px; align-items:center; font-size:1.0625rem; color:var(--text-2)}
.addon b{color:var(--text); font-weight:700}
.price-note{margin-top:15px; color:var(--muted); font-size:.9375rem}

/* ── бриф ───────────────────────────────────────────────── */
.brief{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(30px,5vw,70px); align-items:start}
@media(max-width:880px){.brief{grid-template-columns:1fr}}
.checks{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.checks li{display:flex; gap:15px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line);
  font-size:1.125rem}
.checks li span{font-family:var(--f-mono); font-weight:500; font-size:.75rem; color:var(--gold); flex:none}
.checks li i{font-style:normal; color:var(--muted); font-size:.9063rem; display:block; margin-top:2px}

/* ── контакты и подвал ──────────────────────────────────── */
.contact{text-align:center; border-top:1px solid var(--line)}
.contact h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.04}
.contact .lede{margin-inline:auto}
.links{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:38px}
.plain{display:flex; flex-wrap:wrap; gap:8px 30px; justify-content:center; margin-top:32px;
  font-family:var(--f-mono); font-weight:500; font-size:.875rem; color:var(--muted)}
.plain a{text-decoration:none; transition:color .25s}
.plain a:hover{color:var(--gold-2)}
.foot{border-top:1px solid var(--line); padding-block:32px; display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between; font-size:.875rem; color:var(--muted)}
.foot .brand svg{width:21px; height:21px; color:var(--muted)}
.foot .brand b{font-size:.8125rem; letter-spacing:.26em}

/* ── доступность движения ───────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  .rv{opacity:1!important}
  #pre{display:none}
  .rings{display:none}
}

/* ── галерея «в зале» ───────────────────────────────────── */
.halls{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.hall{position:relative; overflow:hidden; border:1px solid var(--line); background:var(--ink-2); cursor:pointer}
.hall.w3{grid-column:span 3} .hall.w2{grid-column:span 2} .hall.w6{grid-column:span 6}
.hall img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; transition:transform .9s var(--ease)}
.hall:hover img{transform:scale(1.04)}
.hall figcaption{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px 18px 15px;
  background:linear-gradient(to top,rgba(8,8,10,.92),transparent);
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.hall figcaption b{font-size:1.0625rem; font-weight:600}
.hall figcaption span{font-family:var(--f-mono); font-weight:500; font-size:.8125rem; color:var(--gold-2)}
.hall::after{content:""; position:absolute; inset:0; border:1px solid var(--gold); opacity:0;
  transition:opacity .35s; pointer-events:none; z-index:3}
.hall:hover::after{opacity:.5}
@media(max-width:900px){.halls{grid-template-columns:1fr}.hall.w3,.hall.w2,.hall.w6{grid-column:span 1}}
.hall-note{margin-top:22px; color:var(--muted); font-size:1rem; max-width:66ch}

/* ── просмотр во весь экран ─────────────────────────────── */
#lb{position:fixed; inset:0; z-index:150; background:rgba(6,6,8,.96); backdrop-filter:blur(10px);
  display:none; place-items:center; padding:clamp(16px,4vw,52px)}
#lb.open{display:grid}
#lb .stage{position:relative; width:fit-content; max-width:min(1500px,100%); max-height:88vh; margin:auto;
  display:flex; align-items:center; justify-content:center}
#lb video,#lb img{max-width:100%; max-height:74vh; width:auto; border:1px solid var(--line-2); background:#000}
#lb .meta{display:contents}
#lb .meta b,#lb .meta span{position:absolute; left:0; right:0; text-align:center;
  pointer-events:none}                       /* иначе подпись перекрывает крестик */
#lb .meta b{bottom:calc(100% + 18px)}
#lb .meta span{top:calc(100% + 16px)}
#lb .meta b{font-family:var(--f-disp); font-weight:600; font-size:1.5rem; color:var(--text)}
#lb .meta span{font-family:var(--f-mono); font-weight:500; font-size:.8125rem; color:var(--muted)}
#lb button{position:absolute; z-index:3; background:transparent; border:1px solid var(--line-2); color:var(--text);
  width:52px; height:52px; cursor:pointer; font-size:1.5rem; line-height:1; transition:all .25s}
#lb button:hover{border-color:var(--gold); color:var(--gold-2)}
#lb .x{top:-64px; right:0}
#lb .prev{left:-64px; top:50%; margin-top:-26px}
#lb .next{right:-64px; top:50%; margin-top:-26px}
@media(max-width:1100px){#lb .prev{left:0}#lb .next{right:0}#lb .x{top:0; right:0}}
@media(max-width:640px){#lb .meta b{bottom:calc(100% + 12px); font-size:1.15rem}
  #lb .meta span{top:calc(100% + 12px)}}

/* ── персонализация: альбомный кадр, текст сверху ───────── */
.personal-media{border:1px solid var(--line-2); background:var(--ink-2); overflow:hidden;
  position:relative; margin-top:clamp(30px,4vw,48px)}
.personal-media img{width:100%; aspect-ratio:16/9; object-fit:cover}
.personal-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(24px,4vw,60px); align-items:end}
@media(max-width:880px){.personal-grid{grid-template-columns:1fr}}

/* ── сцена зон: закреплённая ────────────────────────────── */
.zone-pin{display:flex; flex-direction:column; gap:26px}
.zone-stage{position:relative; width:100%}
.zone-steps{display:flex; gap:26px; flex-wrap:wrap; font-family:var(--f-mono); font-weight:500;
  font-size:.875rem; color:var(--muted)}
.zone-steps b{display:block; color:var(--text-2); font-weight:600; font-family:var(--f-body);
  font-size:1rem; margin-bottom:2px}
.zone-steps>div{opacity:.28; transition:opacity .45s ease; flex:1 1 190px; border-top:1px solid var(--line);
  padding-top:12px}
.zone-steps>div.on{opacity:1; border-top-color:var(--gold)}

/* ── дополнительные позиции прайса ─────────────────────── */
.add-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px}
@media(max-width:1000px){.add-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.add-grid{grid-template-columns:1fr}}
.add{border:1px solid var(--line); background:var(--ink-2); padding:22px 22px 24px;
  display:flex; flex-direction:column; gap:8px}
.add b{font-size:1rem; font-weight:600; color:var(--text)}
.add .v{font-family:var(--f-disp); font-weight:600; font-size:2rem; line-height:1; color:var(--gold-2)}
.add i{font-style:normal; font-size:.9375rem; color:var(--text-2); margin-top:auto; padding-top:6px}
.price-note b{color:var(--gold-2); font-weight:600}

/* ── карусель работ с именами ───────────────────────────── */
.ncar{position:relative; margin-top:clamp(30px,4vw,48px); max-width:1000px; margin-inline:auto}
.nstage{position:relative; border:1px solid var(--line-2); background:var(--ink-2);
  overflow:hidden; aspect-ratio:6/5}
.nslide{position:absolute; inset:0; margin:0; opacity:0; transition:opacity .6s var(--ease);
  pointer-events:none}
.nslide.on{opacity:1; pointer-events:auto}
.nslide img{width:100%; height:100%; object-fit:cover; cursor:zoom-in}
.narrow{position:absolute; top:50%; margin-top:-27px; z-index:3; width:54px; height:54px;
  border:1px solid var(--line-2); background:rgba(8,8,10,.6); backdrop-filter:blur(8px);
  color:var(--text); font-size:1.6rem; line-height:1; cursor:pointer; transition:all .25s}
.narrow:hover{border-color:var(--gold); color:var(--gold-2); background:rgba(8,8,10,.85)}
.narrow.prev{left:-27px} .narrow.next{right:-27px}
@media(max-width:1120px){.narrow.prev{left:10px}.narrow.next{right:10px}}
.ndots{display:flex; gap:8px; justify-content:center; margin-top:18px}
.ndots button{width:30px; height:2px; padding:0; border:0; background:var(--line-2);
  cursor:pointer; transition:background .3s}
.ndots button:hover{background:var(--muted)}
.ndots button[aria-current="true"]{background:var(--gold)}

/* ── кнопки со стрелками: строго по центру ──────────────── */
#lb button, .narrow{display:grid; place-items:center; padding:0; line-height:0}
#lb button svg, .narrow svg{width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block}
.narrow svg{width:24px; height:24px}
/* скрытая половина просмотра не должна оставлять пустой плеер */
#lb [hidden]{display:none !important}
#lb video{background:#000}

/* ── карусель сцен мультизонного маппинга ───────────────── */
.zcar{position:relative; margin-top:clamp(24px,3vw,40px)}
.zstage{position:relative; aspect-ratio:3/1}
.zscene{position:absolute; inset:0; opacity:0; transition:opacity .55s var(--ease); pointer-events:none}
.zscene.on{opacity:1; pointer-events:auto}
.zrow{display:flex; gap:14px; height:100%}
.zpanel{position:relative; overflow:hidden; border:1px solid var(--line-2);
  background:var(--ink-2); height:100%}
.zpanel img{position:absolute; top:0; height:100%; max-width:none; object-fit:cover}
.zpanel::after{content:attr(data-px); position:absolute; left:0; right:0; bottom:0;
  font-family:var(--f-mono); font-weight:500; font-size:.75rem; color:var(--gold-2);
  background:linear-gradient(to top,rgba(8,8,10,.9),transparent); padding:20px 8px 8px;
  text-align:center; opacity:0; transition:opacity .3s}
.zcar:hover .zpanel::after{opacity:1}
.zp-l::after{content:"боковая"} .zp-c::after{content:"центральная"} .zp-r::after{content:"боковая"}
.zbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px}
.zname{font-family:var(--f-disp); font-weight:600; font-size:1.5rem; min-width:12ch}
.zhint{font-family:var(--f-mono); font-weight:500; font-size:.8125rem; color:var(--muted);
  letter-spacing:.04em; margin-right:auto}
.zdots{display:flex; gap:7px}
.zdots button{width:26px; height:2px; padding:0; border:0; background:var(--line-2);
  cursor:pointer; transition:background .3s}
.zdots button:hover{background:var(--muted)}
.zdots button[aria-current="true"]{background:var(--gold)}
@media(max-width:760px){.zrow{gap:8px} .zhint{display:none} .zname{font-size:1.25rem}}