/* ══════════════════════════════════════════════════════════════════════
   ARCOO Heritage (/heritage) и общие куски, которые стоят и на других
   страницах: большая кнопка, баннер ближайшего мероприятия (/heritage,
   /art, /antique), блок «Искусство» на главной. 09.10.2026.
   Основа — стили главной (_home_css.html): секции, .reveal, .display,
   .eyebrow, витрина, сетка каталога и дуга «Кому это нужно».
   ══════════════════════════════════════════════════════════════════════ */

/* ── Проявление по очереди внутри секции .reveal ─────────────────────── */
html.js-reveal .reveal .hr-who > li,
html.js-reveal .reveal .hr-factors > li,
html.js-reveal .reveal .hr-now-grid > li,
html.js-reveal .reveal .hr-rows > li{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease calc(var(--i, 0) * .09s + .15s),
             transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i, 0) * .09s + .15s) }
html.js-reveal .reveal.in .hr-who > li,
html.js-reveal .reveal.in .hr-factors > li,
html.js-reveal .reveal.in .hr-now-grid > li,
html.js-reveal .reveal.in .hr-rows > li{ opacity:1; transform:none }

.hr-h{ max-width:24ch; font-size:clamp(32px,4.2vw,68px) }
.hr-h + .lead{ margin-top:var(--space-5) }
.hr-final-cta .display{ font-size:clamp(36px,4.6vw,76px) }

/* ── Первый экран без ролика ─────────────────────────────────────────── */
.hr-hero{ position:relative; z-index:1; height:100svh; min-height:520px; display:flex; align-items:center;
  justify-content:center; text-align:center; background:var(--canvas-100); padding:90px var(--page-margin) 40px; box-sizing:border-box }
.hr-hero-in{ display:flex; flex-direction:column; align-items:center; gap:clamp(10px,2vh,22px) }
.hr-hero-arch{ width:clamp(110px,15vw,200px); height:auto; color:var(--graphite-900); overflow:visible }
.hr-hero-arch path{ stroke-dasharray:1; stroke-dashoffset:1; animation:hrDraw 1.8s cubic-bezier(.65,0,.35,1) .15s forwards }
.hr-hero-arch path + path{ animation-delay:.55s }
@keyframes hrDraw{ to{ stroke-dashoffset:0 } }
.hr-hero-title{ margin:clamp(6px,1.4vh,16px) 0 0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(40px,7.4vw,124px); line-height:1; letter-spacing:.01em; text-transform:uppercase; color:var(--text-strong) }
.hr-hero-sub{ margin:0; font-family:var(--font-display); font-size:clamp(18px,2vw,30px); color:var(--text-body) }
.hr-hero-line{ margin:0; font-family:var(--font-text); font-size:11px; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-700) }
.hr-hero-title, .hr-hero-sub, .hr-hero-line, .hr-hero-down{ opacity:0; transform:translateY(22px);
  animation:hrRise .9s cubic-bezier(.16,1,.3,1) forwards }
.hr-hero-title{ animation-delay:.7s } .hr-hero-sub{ animation-delay:.9s }
.hr-hero-line{ animation-delay:1.05s } .hr-hero-down{ animation-delay:1.3s }
@keyframes hrRise{ to{ opacity:1; transform:none } }
.hr-hero-down{ position:absolute; left:50%; bottom:clamp(18px,4vh,40px); margin-left:-30px; width:60px;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; border:0;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-muted) }
.hr-hero-down i{ display:block; width:1px; height:34px; background:linear-gradient(var(--gold-500),transparent);
  animation:hrDrop 2s ease-in-out infinite }
@keyframes hrDrop{ 0%,100%{ transform:scaleY(.4); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } }
@media (prefers-reduced-motion:reduce){
  .hr-hero-arch path{ animation:none; stroke-dashoffset:0 }
  .hr-hero-title, .hr-hero-sub, .hr-hero-line, .hr-hero-down{ animation:none; opacity:1; transform:none }
  .hr-hero-down i{ animation:none }
}

/* ── Большая кнопка ──────────────────────────────────────────────────── */
.hr-big-btn{ position:relative; display:inline-flex; align-items:center; gap:clamp(16px,2vw,32px);
  min-height:clamp(68px,9vh,100px); padding:0 clamp(28px,3.6vw,56px);
  border-radius:999px; overflow:hidden; isolation:isolate;
  background:var(--navy-800); color:var(--canvas-100); text-decoration:none; border:0;
  font-family:var(--font-display); font-weight:400; font-size:clamp(21px,2.3vw,34px); line-height:1.1;
  box-shadow:0 24px 60px -28px rgba(6,15,31,.6);
  transition:color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.16,1,.3,1) }
.hr-big-btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--gold-500);
  transform:scaleX(0); transform-origin:left center; transition:transform .6s cubic-bezier(.16,1,.3,1) }
.hr-big-btn:hover{ color:var(--navy-900); transform:translateY(-2px); box-shadow:0 30px 70px -28px rgba(6,15,31,.7) }
.hr-big-btn:hover::before{ transform:scaleX(1) }
.hr-big-btn .arr{ display:inline-block; transition:transform .45s cubic-bezier(.16,1,.3,1) }
.hr-big-btn:hover .arr{ transform:translateX(8px) }
.hr-big-btn:focus-visible{ outline:2px solid var(--gold-500); outline-offset:4px }
.hr-big-btn.on-dark{ background:var(--gold-500); color:var(--navy-900) }
.hr-big-btn.on-dark::before{ background:var(--canvas-100) }

/* ── Вступление: кто ищет ────────────────────────────────────────────── */
.hr-who{ list-style:none; margin:clamp(32px,6vh,64px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,32px) }
.hr-who li{ display:flex; flex-direction:column; gap:8px; padding-top:var(--space-4);
  border-top:2px solid var(--border-hairline); transition:border-color .3s ease }
.hr-who li:hover{ border-top-color:var(--gold-500) }
.hr-who b{ font-family:var(--font-display); font-weight:400; font-size:clamp(20px,1.7vw,27px);
  color:var(--text-strong); line-height:1.15 }
.hr-who span{ font-size:var(--text-sm); color:var(--text-muted); line-height:1.55 }
.hr-cta-row{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(20px,3vw,48px);
  margin-top:clamp(40px,7vh,80px) }
.hr-note{ margin:0; font-size:var(--text-sm); line-height:1.6; color:var(--text-muted) }

/* ── Заголовок витрины и ссылка на событие ───────────────────────────── */
.hr-show-head{ padding-bottom:clamp(28px,5vh,56px) }
.hr-show-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap }
.hr-ev-link{ display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 20px; border:1px solid var(--border-gold, rgba(201,162,39,.5)); border-radius:999px;
  text-decoration:none; color:var(--text-strong); background:var(--canvas-100);
  font-size:var(--text-sm); transition:background .3s ease, border-color .3s ease }
.hr-ev-link b{ color:var(--gold-700); font-weight:600 }
.hr-ev-link:hover{ background:var(--canvas-000, #fff); border-color:var(--gold-500) }

/* ── Баннер ближайшего мероприятия ───────────────────────────────────── */
.mev{ position:relative; z-index:3; background:var(--navy-900); color:var(--canvas-100);
  padding:clamp(56px,10vh,120px) var(--page-margin, 6vw); overflow:hidden }
.mev::before{ content:""; position:absolute; right:-12vw; top:-30%; width:60vw; aspect-ratio:1;
  border:1px solid rgba(201,162,39,.18); border-radius:50%; pointer-events:none }
.mev-in{ position:relative; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,96px); align-items:center; max-width:1400px; margin:0 auto }
.mev-pic{ display:block; position:relative; aspect-ratio:2/3; max-height:78vh; overflow:hidden;
  border-radius:999px 999px var(--radius-md, 6px) var(--radius-md, 6px); background:var(--navy-800);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.7); border:0 }
.mev-pic img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1) }
.mev-pic:hover img{ transform:scale(1.04) }
.mev-kicker{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-400) }
.mev-date{ display:flex; align-items:flex-end; gap:14px; margin-top:clamp(18px,3vh,32px) }
.mev-date b{ font-family:var(--font-display); font-weight:400; font-size:clamp(72px,10vw,150px);
  line-height:.8; color:var(--gold-500) }
.mev-date span{ font-family:var(--font-text); font-size:var(--text-sm); letter-spacing:.14em;
  text-transform:uppercase; color:var(--canvas-300); padding-bottom:6px; line-height:1.5 }
.mev-title{ font-family:var(--font-display); font-weight:400; font-size:clamp(30px,3.6vw,60px);
  line-height:1.05; margin:clamp(18px,3vh,30px) 0 0; color:var(--canvas-100); max-width:20ch }
.mev-place{ margin-top:var(--space-3); font-size:var(--text-sm); color:var(--canvas-300) }
.mev-lead{ margin:var(--space-4) 0 0; max-width:52ch; line-height:1.6; color:rgba(247,242,233,.78);
  font-size:clamp(14px,1.1vw,17px) }
.mev .hr-big-btn{ margin-top:clamp(24px,4vh,44px) }
/* Появление: афиша раскрывается аркой снизу вверх, текст поднимается следом */
.mev.js .mev-pic{ clip-path:inset(100% 0 0 0 round 999px 999px 0 0);
  transition:clip-path 1.3s cubic-bezier(.16,1,.3,1) }
.mev.js .mev-pic img{ transform:scale(1.18) }
.mev.js .mev-text > *{ opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1) }
.mev.js.in .mev-pic{ clip-path:inset(0 0 0 0 round 999px 999px 0 0) }
.mev.js.in .mev-pic img{ transform:none }
.mev.js.in .mev-text > *{ opacity:1; transform:none }
.mev.js.in .mev-text > :nth-child(2){ transition-delay:.12s }
.mev.js.in .mev-text > :nth-child(3){ transition-delay:.22s }
.mev.js.in .mev-text > :nth-child(4){ transition-delay:.3s }
.mev.js.in .mev-text > :nth-child(5){ transition-delay:.38s }
.mev.js.in .mev-text > :nth-child(6){ transition-delay:.46s }
.mev.js.in .mev-text > :nth-child(7){ transition-delay:.54s }

/* ── Собственнику особняка ───────────────────────────────────────────── */
.hr-mansion-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,6vw,110px); align-items:start }
.hr-mansion-text p{ margin:0 0 var(--space-4); font-size:clamp(15px,1.2vw,19px); line-height:1.7;
  color:var(--text-body); max-width:54ch }
.hr-quote{ margin-top:var(--space-6) !important; padding-left:var(--space-5);
  border-left:2px solid var(--gold-500); font-family:var(--font-display);
  font-size:clamp(20px,1.9vw,30px) !important; line-height:1.3 !important; color:var(--text-strong) !important }

/* ── Что вы получаете: сцена на шесть частей ─────────────────────────── */
.hr-gets.eco-stage{ height:580vh }
.hr-steps{ gap:var(--space-4) }
.hr-gets .eco-texts{ min-height:min(60vh,600px) }
.hr-ticks{ list-style:none; margin:var(--space-4) 0 0; padding:0; display:flex; flex-direction:column; gap:8px; max-width:50ch }
.hr-ticks li{ position:relative; padding-left:22px; font-size:clamp(13.5px, min(1.05vw, 1.9vh), 16px);
  line-height:1.5; color:var(--text-body) }
.hr-ticks li::before{ content:""; position:absolute; left:0; top:.62em; width:12px; height:1px; background:var(--gold-500) }
.hr-pic-empty{ background:linear-gradient(160deg, var(--canvas-200), var(--canvas-300)) }
.hr-view-num{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  font-family:var(--font-display); font-size:clamp(40px,4vw,64px); color:var(--canvas-100);
  text-shadow:0 4px 24px rgba(0,0,0,.45); pointer-events:none }

/* ── Почему ОКН ─────────────────────────────────────────────────────── */
.hr-factors{ list-style:none; margin:clamp(36px,6vh,72px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,48px) clamp(16px,2vw,32px) }
.hr-factors li{ display:flex; flex-direction:column; gap:8px }
.hr-factors i{ font-style:normal; font-family:var(--font-display); font-size:clamp(34px,3.4vw,54px);
  line-height:1; color:var(--gold-500) }
.hr-factors b{ font-family:var(--font-display); font-weight:400; font-size:clamp(19px,1.5vw,24px);
  color:var(--text-strong); line-height:1.2; padding-top:var(--space-3); border-top:1px solid var(--border-hairline) }
.hr-factors span{ font-size:var(--text-sm); line-height:1.6; color:var(--text-muted) }

.hr-now-grid{ list-style:none; margin:clamp(28px,5vh,56px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,48px) }
.hr-now-grid li{ display:flex; flex-direction:column; gap:10px; padding-top:var(--space-4);
  border-top:1px solid rgba(201,162,39,.4) }
.hr-now-grid b{ font-family:var(--font-display); font-weight:400; font-size:clamp(30px,3.2vw,52px);
  line-height:1; color:var(--gold-400) }
.hr-now-grid span{ font-size:var(--text-sm); line-height:1.6; color:var(--text-on-inverse-muted) }
.hr-now .eyebrow{ color:var(--gold-400) }

/* ── Кому это подходит: пять узлов ───────────────────────────────────── */
.hr-roles.roles-stage.live{ height:500vh }
.hr-roles.roles-stage.live .roles-screen .display{ max-width:none }
.hr-roles .roles-cards{ grid-template-columns:repeat(5,1fr) }

/* ── Как это работает: линия шагов ───────────────────────────────────── */
/* У каждого шага свой отрезок линии до следующей точки: сначала растёт отрезок,
   дойдя до точки — она вспыхивает и пульсирует, и начинается следующий. Так
   линия не рвётся ни в одной ширине и идёт неторопливо (1,3 с на шаг). */
.hr-steps-line{ --gap:clamp(16px,2vw,32px); --seg:1.3s; position:relative; list-style:none; margin:clamp(40px,7vh,80px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gap) }
.hr-steps-line li{ position:relative; display:flex; flex-direction:column; gap:8px; padding:34px 6px 10px 0;
  transition:transform .45s cubic-bezier(.16,1,.3,1) }
.hr-steps-line li::before{ content:""; position:absolute; left:0; top:0; width:16px; height:16px; z-index:2;
  border-radius:50%; background:var(--canvas-200); border:2px solid #b9b4a8; box-sizing:border-box;
  transition:transform .45s cubic-bezier(.16,1,.3,1) }
.hr-steps-line li:hover{ transform:translateY(-8px) scale(1.05); transform-origin:left top }
.hr-steps-line li:hover::before{ transform:scale(1.3) }
.hr-steps-line .seg{ position:absolute; left:16px; top:7px; height:2px; width:calc(100% - 16px + var(--gap));
  background:var(--border-hairline); text-decoration:none }
.hr-steps-line .seg::after{ content:""; position:absolute; inset:0; background:var(--gold-500);
  transform:scaleX(0); transform-origin:left center }
.hr-steps-line i{ font-style:normal; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-700) }
.hr-steps-line b{ font-family:var(--font-display); font-weight:400; font-size:clamp(19px,1.5vw,24px);
  color:var(--text-strong); line-height:1.2 }
.hr-steps-line span{ font-size:var(--text-sm); line-height:1.6; color:var(--text-muted) }
/* Запуск — когда секция показалась (.in); без скрипта (нет .js-reveal) всё уже нарисовано */
.hr-how.in .hr-steps-line .seg::after{ animation:hrSeg var(--seg) cubic-bezier(.45,0,.35,1) forwards;
  animation-delay:calc(var(--i) * var(--seg) + .3s) }
.hr-how.in .hr-steps-line li::before{ animation:hrDot .9s ease forwards; animation-delay:calc(var(--i) * var(--seg) + .3s) }
@keyframes hrSeg{ to{ transform:scaleX(1) } }
@keyframes hrDot{ 0%{ background:var(--gold-500); border-color:var(--gold-500); box-shadow:0 0 0 0 rgba(201,162,39,.55) }
  60%{ background:var(--gold-500); border-color:var(--gold-500); box-shadow:0 0 0 14px rgba(201,162,39,0) }
  100%{ background:var(--gold-500); border-color:var(--gold-500); box-shadow:0 0 0 0 rgba(201,162,39,0) } }
html:not(.js-reveal) .hr-steps-line .seg::after{ transform:none }
html:not(.js-reveal) .hr-steps-line li::before{ background:var(--gold-500); border-color:var(--gold-500) }

/* ── Пакеты: таблица, столбцы-арки продолжаются вниз линиями ──────────── */
.pk{ display:grid; grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(0,1fr)); column-gap:clamp(10px,1.4vw,22px);
  margin-top:clamp(32px,6vh,64px) }
.pk-h{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; text-align:center;
  padding:clamp(60px,6vw,96px) 12px 18px; border:1px solid var(--border-hairline); border-bottom:0;
  border-radius:999px 999px 0 0; background:var(--canvas-100) }
.pk-name{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-700) }
.pk-cost{ font-family:var(--font-display); font-weight:400; font-size:clamp(22px,2.4vw,40px); line-height:1; color:var(--text-strong) }
.pk-cost .short{ display:none }
.pk-l{ display:flex; align-items:center; padding:14px 18px 14px 0; font-size:var(--text-sm); line-height:1.4;
  color:var(--text-body); border-top:1px solid var(--border-hairline) }
.pk-c, .pk-f{ display:flex; align-items:center; justify-content:center; min-height:52px; background:var(--canvas-100);
  border-left:1px solid var(--border-hairline); border-right:1px solid var(--border-hairline);
  border-top:1px solid var(--border-hairline) }
.pk-f{ min-height:28px; border-bottom:1px solid var(--border-hairline); border-radius:0 0 var(--radius-md,6px) var(--radius-md,6px) }
.pk-c i{ position:relative; display:block; width:18px; height:18px; border-radius:50% }
.pk-c i::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid currentColor;
  border-width:0 2px 2px 0; transform:rotate(45deg) }
.pk-c i.new{ color:var(--gold-700); background:rgba(201,162,39,.16) }
.pk-c i.old{ color:#a9a9a4 }
.pk-c em{ font-style:normal; color:#b9b9b4 }
/* Премиум — главный пакет: тёмный столбец */
.pk .c2.pk-h, .pk .c2.pk-c, .pk .c2.pk-f{ background:var(--navy-800); border-color:var(--navy-800);
  border-top-color:rgba(233,209,140,.22) }
.pk .c2 .pk-name{ color:var(--gold-400) } .pk .c2 .pk-cost{ color:var(--canvas-100) }
.pk .c2 i.new{ color:var(--gold-400); background:rgba(233,209,140,.18) }
.pk .c2 i.old{ color:rgba(247,242,233,.5) } .pk .c2 em{ color:rgba(247,242,233,.35) }
.hr-pk-legend{ display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center; margin:var(--space-5) 0 var(--space-6);
  font-size:var(--text-xs); color:var(--text-muted) }
.hr-pk-legend span{ display:inline-flex; align-items:center; gap:8px }
.hr-pk-legend i{ position:relative; display:inline-block; width:16px; height:16px; border-radius:50% }
.hr-pk-legend i::after{ content:""; position:absolute; left:5px; top:1px; width:4px; height:9px; border:solid currentColor;
  border-width:0 2px 2px 0; transform:rotate(45deg) }
.hr-pk-legend i.new{ color:var(--gold-700); background:rgba(201,162,39,.16) } .hr-pk-legend i.old{ color:#a9a9a4 }
html.js-reveal .reveal .pk-c, html.js-reveal .reveal .pk-h{ opacity:0; transform:translateY(14px);
  transition:opacity .6s ease .1s, transform .7s cubic-bezier(.16,1,.3,1) .1s }
html.js-reveal .reveal.in .pk-c, html.js-reveal .reveal.in .pk-h{ opacity:1; transform:none }

/* ── После размещения / почему это работает: один блок в рамке ────────── */
.hr-twin{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; border:1px solid var(--border-hairline);
  border-radius:var(--radius-md,6px); background:var(--canvas-100) }
.hr-twin-col{ display:flex; flex-direction:column; padding:clamp(22px,3vw,44px) }
.hr-twin-col + .hr-twin-col{ border-left:1px solid var(--border-hairline) }
.hr-rows{ flex:1; list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid }
.hr-rows.n4{ grid-template-rows:repeat(4,1fr) } .hr-rows.n5{ grid-template-rows:repeat(5,1fr) }
.hr-rows li{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:14px 0; border-top:1px solid var(--border-hairline) }
.hr-rows.n4 li{ padding-left:56px }
.hr-rows.n4 li i{ position:absolute; left:0; top:50%; transform:translateY(-50%); font-style:normal;
  font-family:var(--font-display); font-size:30px; line-height:1; color:var(--gold-500) }
.hr-rows b{ font-family:var(--font-display); font-weight:400; font-size:clamp(18px,1.4vw,22px); color:var(--text-strong); line-height:1.2 }
.hr-rows span{ font-size:var(--text-sm); line-height:1.5; color:var(--text-muted) }

/* ── Последний экран ─────────────────────────────────────────────────── */
.hr-final-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,110px); align-items:center }
.hr-final .eyebrow{ color:var(--gold-400) }
.hr-need{ list-style:none; margin:var(--space-5) 0 0; padding:0 }
.hr-need li{ position:relative; padding:14px 0 14px 34px; border-top:1px solid var(--border-inverse, rgba(255,255,255,.14));
  color:var(--canvas-200); font-size:clamp(15px,1.15vw,18px); line-height:1.5 }
.hr-need li::before{ content:"✓"; position:absolute; left:0; top:13px; color:var(--gold-500) }
.hr-final-cta .lead{ margin:var(--space-4) 0 var(--space-6) }

/* ── Узкие экраны ───────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .hr-factors{ grid-template-columns:repeat(2,1fr) }
  /* Шаги — вертикальная линия: отрезок идёт сверху вниз до следующей точки */
  .hr-steps-line{ grid-template-columns:1fr; gap:0 }
  .hr-steps-line li{ padding:0 0 clamp(26px,4vh,40px) 40px }
  .hr-steps-line li::before{ top:2px; left:0 }
  .hr-steps-line .seg{ left:7px; top:20px; width:2px; height:calc(100% - 16px) }
  .hr-steps-line .seg::after{ transform:scaleY(0); transform-origin:center top }
  .hr-steps-line li:hover{ transform:translateX(6px) scale(1.02); transform-origin:left center }
  @keyframes hrSeg{ to{ transform:scaleY(1) } }
}
@media (max-width: 900px){
  .hr-who{ grid-template-columns:repeat(2,1fr) }
  .hr-now-grid{ grid-template-columns:repeat(2,1fr) }
  .hr-mansion-grid, .hr-final-grid{ grid-template-columns:1fr }
  .hr-twin{ grid-template-columns:1fr }
  .hr-twin-col + .hr-twin-col{ border-left:0; border-top:1px solid var(--border-hairline) }
  .mev-in{ grid-template-columns:1fr }
  .mev-pic{ max-width:420px; width:100%; margin:0 auto; max-height:none }
  .hr-roles .roles-cards{ grid-template-columns:1fr }
  /* Переключатель залов и плашка «Ближайшее мероприятие» на телефоне — floating,
     снизу экрана (карточка 2026-10-18-010, тот же разбор, что у «Искусства»):
     высота экрана первого экрана учитывает полосу администратора, а подсказка
     «Листайте» со своим bottom-отступом отдельно поднята, чтобы не уйти под них */
  .hr-hero{ height:calc(100svh - var(--admin-bar-h,0px)); }
  .hr-hero-down{ bottom:clamp(96px,13svh,130px); }
}
/* Пакеты на телефоне остаются таблицей: пункты слева, четыре узких столбца рядом;
   названия пакетов — вертикально внутри арки, цена короткая */
@media (max-width: 640px){
  .pk{ grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,.62fr)); column-gap:4px }
  .pk-h{ padding:44px 2px 10px; gap:8px }
  .pk-name{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:10.5px; letter-spacing:.08em; white-space:nowrap }
  .pk-cost{ font-size:12.5px; line-height:1.1 }
  .pk-cost .full{ display:none } .pk-cost .short{ display:inline }
  .pk-l{ padding:11px 8px 11px 0; font-size:12.5px; line-height:1.3 }
  .pk-c{ min-height:46px }
}
@media (max-width: 767px){
  .hr-gets.eco-stage{ height:auto }
  .hr-gets .eco-texts{ min-height:0 }
  .hr-who, .hr-factors, .hr-now-grid{ grid-template-columns:1fr }
  .hr-big-btn{ width:100%; justify-content:space-between; box-sizing:border-box }
  .hr-cta-row{ flex-direction:column; align-items:stretch }
  .hr-show-row{ flex-direction:column; align-items:flex-start }
  .hr-ev-link{ border-radius:var(--radius-md, 6px) }
  .mev-pic{ max-width:min(300px,78%) }
}
@media (prefers-reduced-motion: reduce){
  .mev.js .mev-pic, .mev.js .mev-pic img, .mev.js .mev-text > *{ clip-path:none; transform:none; opacity:1; transition:none }
  .hr-gets.eco-stage{ height:auto }
  .hr-gets .eco-texts{ min-height:0 }
}
.hr-price .hr-h{ max-width:34ch }