/* ==========================================================================
   Story.Eventhome — Новогодние корпоративы 2026
   Палитра взята из живого сайта storyevent.ru (реальные hex из CSS главной):
   #2D2B2C ink · #A0958C taupe · #8A7A72 taupe-dark · #8A9691 sage
   #E5E2DA sand · #C8BEB5 sand-2 · #C8CCC9 mist · #FFFFFF
   ========================================================================== */

:root{
  --ink:#2D2B2C;
  --ink-70: rgba(45,43,44,.7);
  --ink-50: rgba(45,43,44,.5);
  --taupe:#A0958C;
  --taupe-dark:#8A7A72;
  --sage:#8A9691;
  --sand:#E5E2DA;
  --sand-2:#C8BEB5;
  --mist:#C8CCC9;
  --white:#FFFFFF;
  --cream:#FAF8F5;
  /* На живом storyevent.ru почти все блоки светлые/белые, тёплый бежевый —
     это акцент (кнопки/текст/обводка), а не фон целой секции. Поэтому
     .section-alt — едва заметный оттенок белого, а не насыщенный крем. */
  --panel:#F4F1EC;

  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1180px;
  --radius: 2px;
  --radius-btn: 999px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 84px;

  --ease: cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:300;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ font-family:var(--font-body); font-weight:300; }
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
[hidden]{ display:none !important; }
/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:1000;
  background:var(--ink); color:var(--white); padding:10px 16px;
}
.skip-link:focus{ left:8px; top:8px; }
/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--taupe-dark);
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--taupe-dark);
}
/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 30px; font-size:15px; font-weight:500; letter-spacing:.01em;
  border-radius:var(--radius-btn); border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.btn-primary:hover{ background:var(--taupe-dark); border-color:var(--taupe-dark); }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-secondary:hover{ background:var(--ink); color:var(--white); }
.btn-light{ background:var(--white); color:var(--ink); border-color:var(--white); }
.btn-light:hover{ background:var(--sand); border-color:var(--sand); }
.btn-lg{ padding:18px 34px; font-size:16px; }
/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), height .25s var(--ease);
}
/* Мобильная база (<1180px, поведение не меняем): логотип по центру, CTA
   справа, .header-right-group становится "прозрачной" (display:contents),
   чтобы вложенные .header-right и .logo встали как обычные grid-элементы
   в 2-й/3-й колонки — независимо от их порядка в разметке. */
.header-grid{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  width:100%; height:100%; gap:12px; padding:0 var(--gutter);
}
.header-right-group{ display:contents; }
.site-header.is-scrolled{
  height:68px;
  background:rgba(250,248,245,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(45,43,44,.08);
}
.site-header .logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; grid-column:2; grid-row:1; justify-self:center; }
.site-header .logo img{ height:40px; width:auto; filter:brightness(0) invert(1); transition:filter .35s var(--ease); }
.site-header.is-scrolled .logo img{ filter:none; }

.main-nav{ display:none; grid-column:1; grid-row:1; justify-self:start; min-width:0; }
.main-nav ul{ display:flex; gap:10px; flex-wrap:nowrap; }
.nav-link{
  padding:8px 14px; font-size:13px; font-weight:400; color:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.55); border-radius:var(--radius-btn); background:transparent;
  white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav-link:hover{ background:rgba(255,255,255,.14); border-color:var(--white); }
.site-header.is-scrolled .nav-link{ color:var(--ink-70); border-color:rgba(45,43,44,.3); }
.site-header.is-scrolled .nav-link:hover{ background:rgba(45,43,44,.06); color:var(--ink); border-color:var(--ink); }

.header-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; grid-column:3; grid-row:1; justify-self:end; }
.phone-link{
  display:none; align-items:center; gap:8px; font-size:13.5px; font-weight:500;
  color:var(--white); padding:9px 14px; border-radius:var(--radius-btn); white-space:nowrap;
  border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.12);
  transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.phone-link:hover{ background:rgba(255,255,255,.2); }
.site-header.is-scrolled .phone-link{ color:var(--ink); border-color:rgba(45,43,44,.25); background:rgba(45,43,44,.05); }
.site-header.is-scrolled .phone-link:hover{ background:rgba(45,43,44,.1); }
.phone-link svg{ width:16px; height:16px; flex-shrink:0; }

/* ---------- 3. Мобильное меню (гамбургер) ----------
   Ниже 1180px навигация .main-nav в прототипе просто скрыта, и перейти
   к разделам с телефона было нельзя. Кнопка встаёт в пустую левую колонку
   сетки шапки (логотип по центру, «Перезвоните мне» справа), по нажатию под
   шапкой раскрывается панель с теми же пунктами и телефоном. */
.nav-burger{
  grid-column:1; grid-row:1; justify-self:start;
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 12px;
  border:1px solid rgba(255,255,255,.55); border-radius:var(--radius-btn);
  background:transparent; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.nav-burger span{
  display:block; width:100%; height:1.5px; border-radius:2px; background:var(--white);
  transition:transform .25s var(--ease), opacity .2s var(--ease), background .25s var(--ease);
}
.nav-burger:hover{ background:rgba(255,255,255,.14); }
.site-header.is-scrolled .nav-burger,
.site-header.menu-open .nav-burger{ border-color:rgba(45,43,44,.3); }
.site-header.is-scrolled .nav-burger:hover,
.site-header.menu-open .nav-burger:hover{ background:rgba(45,43,44,.06); }
.site-header.is-scrolled .nav-burger span,
.site-header.menu-open .nav-burger span{ background:var(--ink); }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* открытое меню: шапка светлая, как после прокрутки */
.site-header.menu-open{
  background:rgba(250,248,245,.97);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(45,43,44,.08);
}
.site-header.menu-open .logo img{ filter:none; }

.mobile-nav{
  position:absolute; top:100%; left:0; right:0;
  max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  padding:4px var(--gutter) 22px;
  background:#FAF8F5; border-top:1px solid rgba(45,43,44,.08);
  box-shadow:0 22px 30px -20px rgba(45,43,44,.35);
}
.mobile-nav ul{ list-style:none; margin:0; padding:0; }
.mobile-nav li a{
  display:block; padding:15px 0; font-size:17px; color:var(--ink);
  border-bottom:1px solid rgba(45,43,44,.08);
}
.mobile-nav li a:hover{ color:var(--taupe); }
.mobile-nav-phone{
  display:inline-flex; align-items:center; gap:10px; margin-top:18px;
  font-size:16px; font-weight:500; color:var(--ink);
}
.mobile-nav-phone svg{ width:18px; height:18px; flex-shrink:0; }

@media (min-width:1180px){
  .nav-burger, .mobile-nav{ display:none !important; }
}

/* burger-right: гамбургер справа, как в основной шапке сайта; «Перезвоните мне»
   уходит в левую колонку. Только ниже 1180px — на десктопе своя раскладка. */
@media (max-width:1179.98px){
  .site-header .nav-burger{ grid-column:3; justify-self:end; }
  .site-header .header-right{ grid-column:1; justify-self:start; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; min-height:calc(100svh - clamp(110px, 17svh, 170px)); display:flex; align-items:flex-end; /* на 1/6 ниже окна: следующий блок виден снизу */
  color:var(--white); overflow:hidden; background:var(--ink);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(20,19,19,.55) 0%, rgba(20,19,19,.25) 30%, rgba(20,19,19,.55) 68%, rgba(20,19,19,.92) 100%),
    linear-gradient(90deg, rgba(20,19,19,.55) 0%, rgba(20,19,19,.05) 45%);
}
.hero-content{
  position:relative; z-index:2; width:100%;
  padding:calc(var(--header-h) + 40px) 0 clamp(48px, 8vw, 96px);
}
.hero-inner{ max-width:720px; }
.hero-eyebrow{ color:rgba(255,255,255,.85); }
.hero-eyebrow::before{ background:rgba(255,255,255,.85); }
.hero-title{
  font-family:var(--font-display); font-weight:200;
  font-size:clamp(32px, 5.4vw, 58px); line-height:1.12;
  margin-top:18px; letter-spacing:.005em;
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}
.hero-body{
  margin-top:20px; font-size:clamp(15px, 1.6vw, 18px); line-height:1.55;
  color:rgba(255,255,255,.92); max-width:560px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-microcopy{ margin-top:16px; font-size:15px; color:rgba(255,255,255,.92); max-width:480px; }
@media (max-height:820px) and (min-width:900px){
  .hero-content{ padding-top:calc(var(--header-h) + 20px); padding-bottom:52px; }
}
/* ---------- Hero intro (Story reveal) ---------- */
.hero-intro{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  padding:0 24px; text-align:center;
  pointer-events:none;
  opacity:1;
  transition:opacity .42s var(--ease);
}
.hero-intro.is-hidden{ opacity:0; }
.hero-intro-word{
  display:inline-block; white-space:pre;
  font-family:var(--font-display); font-weight:200;
  font-size:clamp(56px, 14vw, 160px); line-height:1;
  letter-spacing:.01em; color:var(--white);
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}
.hero-intro-word .letter{
  display:inline-block;
  animation:heroIntroLetterUp .55s var(--ease) both;
  animation-delay:calc(var(--i, 0) * 88ms);
}
@keyframes heroIntroLetterUp{
  from{ opacity:0; transform:translateY(.4em); }
  to  { opacity:1; transform:translateY(0); }
}
.hero-inner{
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.hero-inner.is-revealed{ opacity:1; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .hero-intro-word .letter{ animation:none !important; opacity:1; transform:none; }
  .hero-intro{ transition:none !important; }
  .hero-inner{ transition:none !important; }
}
/* ---------- Section shell ---------- */
.section{ padding:clamp(64px, 9vw, 120px) 0; }
/* ==========================================================================
   КОМПАКТНЫЕ СЦЕНЫ (принцип Apple / Microsoft): блок занимает 50–75% окна,
   поэтому следующий всегда виден снизу и тянет листать дальше. Цвета
   чередуются: тёмный → светлый → тёмный. Высоты считаются от высоты окна (svh).
   ========================================================================== */
.sc{ --sc-pad:clamp(30px, 5.6svh, 56px); position:relative; padding:var(--sc-pad) 0; }
.sc--light{ background:var(--cream); }
.sc--alt{ background:var(--panel); }
.sc--sand{ background:var(--sand); }
.sc--dark{ background:var(--ink); color:var(--white); }
.sc--dark .eyebrow{ color:rgba(255,255,255,.75); }
.sc--dark .eyebrow::before{ background:rgba(255,255,255,.5); }
/* Первая сцена выезжает «листом» на нижний край hero — приоткрывает следующий блок */
.sc--sheet{ z-index:3; margin-top:-72px; padding-top:calc(var(--sc-pad) + 14px); border-radius:28px 28px 0 0; }
@media (max-height:820px) and (min-width:900px){ .sc--sheet{ margin-top:-40px; }
}
.sc-head{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:14px clamp(28px, 4vw, 64px); align-items:end;
  margin-bottom:clamp(18px, 3.4svh, 32px);
}
.sc-title{
  margin-top:12px; font-family:var(--font-display); font-weight:200;
  font-size:clamp(28px, 2.9vw, 40px); line-height:1.12; letter-spacing:-.02em;
}
.sc-title--xl{ max-width:860px; margin:14px auto 0; font-size:clamp(30px, 4.6vw, 58px); }
.sc-lead{ font-size:16.5px; line-height:1.6; color:var(--ink-70); max-width:470px; }
.sc--dark .sc-lead{ color:rgba(255,255,255,.76); }
.sc-side .sc-lead{ margin:0; }
/* Появление при прокрутке (класс st-rv ставит JS; без JS всё видно сразу) */
.st-rv .rv{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.st-rv .rv.is-in{ opacity:1; transform:none; }
/* ---------- Форматы ---------- */
.fmt-help{ margin-top:10px; font-size:15.5px; color:var(--ink); }
.fmt-help button{
  font-size:inherit; font-weight:500; color:var(--ink); background:none; border:0; padding:0;
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--ink); white-space:nowrap;
}
.fmt-help button:hover{ text-decoration-color:var(--ink); }
.fmt-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; }
.fmt-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border:1px solid rgba(45,43,44,.12); border-radius:16px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.fmt-line{ height:4px; background:linear-gradient(90deg, var(--mist), rgba(200,204,201,.45)); }
.fmt-body{ display:flex; flex-direction:column; flex:1; padding:clamp(18px, 3svh, 28px) 26px clamp(18px, 3svh, 26px); }
.fmt-role{ font-size:13.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe-dark); margin-bottom:clamp(10px, 2svh, 18px); }
.fmt-cap{ display:flex; align-items:baseline; gap:10px; }
.fmt-pre, .fmt-unit{ font-size:15px; line-height:1; color:var(--ink-70); }
.fmt-num{
  font-family:var(--font-display); font-weight:200;
  font-size:clamp(56px, 9svh, 84px); line-height:.82; letter-spacing:-.045em;
  font-variant-numeric:lining-nums tabular-nums; color:var(--ink);
}
.fmt-scale{ position:relative; height:2px; margin:clamp(12px, 2.4svh, 20px) 0; background:rgba(45,43,44,.12); border-radius:2px; overflow:hidden; }
.fmt-scale i{ position:absolute; top:0; bottom:0; left:0; width:var(--fill,100%); background:var(--ink); transition:width 1.1s var(--ease); }
.fmt-anim .fmt-scale i{ width:0; }
.fmt-anim.fmt-in .fmt-scale i{ width:var(--fill,100%); }
.fmt-name{ font-size:22px; font-weight:400; line-height:1.2; margin-bottom:8px; }
.fmt-text{ font-size:14.5px; line-height:1.55; color:var(--ink-70); margin-bottom:clamp(14px, 2.4svh, 22px); }
.fmt-cta{
  display:block; width:100%; margin-top:auto; padding:13px 18px;
  font-size:15px; font-weight:500; letter-spacing:.01em; text-align:center;
  color:var(--ink); background:transparent; border:1px solid var(--ink); border-radius:var(--radius-btn);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
}
.fmt-cta:hover{ background:var(--ink); color:var(--white); }
.fmt-cta:active{ transform:scale(.98); }
.fmt-cta:focus-visible, .st-track:focus-visible, .gallery-track:focus-visible{ outline:2px solid var(--taupe-dark); outline-offset:3px; }
.fmt-card--vip{ background:var(--ink); border-color:var(--ink); box-shadow:0 24px 48px -30px rgba(45,43,44,.55); }
.fmt-card--vip .fmt-line,
.fmt-card--vip .fmt-num,
.fmt-card--vip .fmt-scale i{
  background:linear-gradient(135deg, #8A7A72, #C8BEB5, #A0958C, #C4BAB1, #8A7570);
  background-size:200% 200%; animation:fmt-shimmer 6s ease-in-out infinite;
}
.fmt-card--vip .fmt-num{ -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fmt-card--vip .fmt-role{ color:var(--sand-2); }
.fmt-card--vip .fmt-pre, .fmt-card--vip .fmt-unit{ color:rgba(255,255,255,.62); }
.fmt-card--vip .fmt-scale{ background:rgba(255,255,255,.14); }
.fmt-card--vip .fmt-name{ color:var(--white); }
.fmt-card--vip .fmt-text{ color:rgba(255,255,255,.72); }
.fmt-card--vip .fmt-cta{ background:var(--white); border-color:var(--white); color:var(--ink); }
.fmt-card--vip .fmt-cta:hover{ background:var(--sand); border-color:var(--sand); }
@keyframes fmt-shimmer{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
@media (hover:hover){
  .fmt-card:hover{ transform:translateY(-4px); border-color:rgba(160,149,140,.5); box-shadow:0 26px 44px -30px rgba(45,43,44,.35); }
  .fmt-card--vip:hover{ border-color:var(--ink); box-shadow:0 32px 56px -30px rgba(45,43,44,.65); }
}
/* ---------- Почему Story: четыре факта в ряд на фото-фоне ---------- */
.why{ overflow:hidden; }
.why .container{ position:relative; z-index:1; }
.why-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.why-bg img{ width:100%; height:100%; object-fit:cover; filter:blur(3px) brightness(.48) saturate(1.05); transform:scale(1.04); }
.why-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,22,22,.35) 0%, rgba(23,22,22,.55) 55%, rgba(23,22,22,.72) 100%); }
.why-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.why-card{
  display:flex; flex-direction:column; padding:clamp(16px, 2.8svh, 24px) 22px clamp(18px, 3svh, 26px);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.why-top{ display:flex; flex-direction:column; gap:clamp(6px, 1.4svh, 14px); }
.why-card .num{ font-family:var(--font-display); font-weight:200; font-size:14px; color:var(--taupe); letter-spacing:.08em; }
.why-stat{ display:flex; align-items:baseline; gap:6px; font-family:var(--font-display); font-weight:200; color:var(--white); line-height:.95; }
.why-stat-val{ font-size:clamp(38px, 5.4svh, 52px); letter-spacing:-.03em; white-space:nowrap; }
.why-stat-val--word{ font-size:clamp(28px, 3.9svh, 36px); letter-spacing:-.02em; line-height:1.3; }
.why-stat-unit{ font-size:17px; color:rgba(255,255,255,.7); }
.why-stat-lab{ margin-top:8px; font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1.5; color:var(--sand-2); }
.why-card h3{ margin:clamp(12px, 2.2svh, 18px) 0 10px; padding-bottom:10px; font-size:17px; font-weight:300; line-height:1.3; border-bottom:1px solid rgba(255,255,255,.35); }
.why-card p{ font-size:15px; line-height:1.55; color:rgba(255,255,255,.9); }
@media (hover:hover){ .why-card:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.85); transform:translateY(-3px); }
}
/* ---------- Пространство: заголовок, цифры и горизонтальная лента ---------- */
.space-meta{ display:flex; flex-wrap:wrap; gap:14px clamp(20px, 2.6vw, 36px); margin-top:clamp(16px, 2.6svh, 24px); }
.space-meta b{ display:block; white-space:nowrap; font-family:var(--font-display); font-weight:200; font-size:clamp(22px, 2.2vw, 28px); line-height:1.1; }
.space-meta span{ display:block; margin-top:4px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-70); }
.gallery-track{
  --pad:max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-padding-inline:var(--pad); padding-inline:var(--pad);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-track a{ flex:none; position:relative; overflow:hidden; scroll-snap-align:start; border-radius:var(--radius); height:clamp(190px, 30svh, 300px); aspect-ratio:3/2; }
.gallery-track a img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
@media (hover:hover){ .gallery-track a:hover img{ transform:scale(1.05); }
}
/* ---------- Кейтеринг ---------- */
.cat-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px, 6vw, 80px); align-items:center; }
.cat-copy .sc-title{ font-size:clamp(26px, 3vw, 40px); }
.cat-text{ margin-top:16px; max-width:520px; font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.82); }
.cat-link{ display:inline-block; margin-top:14px; font-size:16px; text-decoration:underline; text-underline-offset:5px; text-decoration-color:rgba(255,255,255,.85); }
.cat-link:hover{ text-decoration-color:var(--white); }
.cat-photos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cat-photos img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); }
.cat-photos img:nth-child(2){ transform:translateY(clamp(12px, 3svh, 28px)); }
/* ---------- SEO-блок «Как выбрать площадку»: абзац + «Читать далее» (нативный details) ---------- */
.gd-head{ max-width:760px; }
.gd-intro{ margin-top:18px; font-size:18px; line-height:1.65; color:var(--ink); }
.gd-more{ margin-top:clamp(16px, 2.6svh, 24px); }
.gd-more summary{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  padding:14px 28px; border:1.5px solid var(--ink); border-radius:var(--radius-btn);
  font-size:16px; font-weight:500; color:var(--ink); transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.gd-more summary::-webkit-details-marker{ display:none; }
.gd-more summary:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.gd-more summary:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.gd-close{ display:none; }
.gd-more[open] .gd-open{ display:none; }
.gd-more[open] .gd-close{ display:inline; }
.gd-body{ margin-top:clamp(22px, 4svh, 36px); columns:2; column-gap:clamp(32px, 5vw, 72px); }
.gd-body h3{ break-after:avoid; margin:0 0 8px; font-family:var(--font-display); font-weight:400; font-size:20px; line-height:1.3; color:var(--ink); }
.gd-body p{ margin:0 0 26px; font-size:16.5px; line-height:1.7; color:var(--ink); break-inside:avoid-column; }
.gd-body p + h3{ margin-top:0; }
.gd-cta{ margin-bottom:0 !important; }
@media (max-width:899px){
  .gd-body{ columns:1; }
  .gd-intro{ font-size:16.5px; }
}
/* ---------- Финал ---------- */
.sc--final{ text-align:center; padding:calc(var(--sc-pad) * 1.4) 0; }
.sc--final .eyebrow{ justify-content:center; }
.sc--final .sc-lead{ margin:16px auto 0; max-width:540px; }
.sc-actions{ display:flex; justify-content:center; margin-top:clamp(20px, 3.4svh, 30px); }
/* ---------- Компактные сцены: планшет и телефон ---------- */
@media (max-width:1099px){
  .why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fmt-card--vip{ box-shadow:none; }
}
@media (max-width:899px){
  .sc--sheet{ margin-top:-30px; border-radius:22px 22px 0 0; padding-top:calc(var(--sc-pad) + 8px); }
  .sc-head{ grid-template-columns:1fr; gap:10px; }
  .sc-lead{ max-width:none; font-size:14.5px; }
  .cat-grid{ grid-template-columns:1fr; gap:24px; }
  .gallery-track a{ height:auto; width:min(76vw, 420px); }
}
@media (max-width:699px){
  /* форматы — горизонтальная лента: следующая карточка выглядывает справа */
  .fmt-grid{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch;
  }
  .fmt-grid::-webkit-scrollbar{ display:none; }
  .fmt-card{ flex:0 0 80%; scroll-snap-align:start; }
  .fmt-body{ padding:18px 20px; }
  .fmt-num{ font-size:60px; }
  .fmt-text{ font-size:15px; }
  /* почему Story — плитки 2×2: цифра, подпись, заголовок; описание остаётся для скринридеров */
  .why-grid{ gap:8px; }
  .why-card{ padding:14px 14px 16px; }
  .why-stat-val{ font-size:38px; }
  .why-stat-val--word{ font-size:25px; }
  .why-stat-lab{ font-size:12.5px; letter-spacing:.1em; }
  .why-card h3{ font-size:15.5px; margin:10px 0 0; padding-bottom:0; border-bottom:0; }
  .why-card p{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .why .sc-lead, #formats .sc-lead, #space .sc-lead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .space-meta{ gap:12px 22px; }
  .space-meta b{ font-size:21px; }
  .cat-text{ font-size:14.5px; }
  .cat-photos{ order:-1; }
  .cat-photos img{ aspect-ratio:1/1; }
  .cat-photos img:nth-child(2){ transform:none; }
  .sc--final{ padding:calc(var(--sc-pad) * 1.3) 0; }
}
@media (prefers-reduced-motion: reduce){
  .st-rv .rv{ opacity:1; transform:none; transition:none; }
  .fmt-card, .fmt-cta, .fmt-scale i, .why-card, .gallery-track a img{ transition:none; }
  .fmt-card--vip .fmt-line, .fmt-card--vip .fmt-num, .fmt-card--vip .fmt-scale i{ animation:none; }
}
/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.9); padding:64px 0 100px; font-size:15.5px; }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:40px clamp(24px,4vw,56px); align-items:start; }
.footer-grid .logo img{ display:block; width:clamp(140px,14vw,184px); height:auto; filter:brightness(0) invert(1); margin:-10px 0 0 -6px; }
.footer-tag{ margin-top:14px; max-width:280px; line-height:1.6; color:rgba(255,255,255,.8); }
.footer-col h4{ color:var(--white); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-col a{ display:block; padding:4px 0; color:rgba(255,255,255,.92); }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ margin-top:48px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:14px; color:rgba(255,255,255,.78); }
@media (max-width:899px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-grid .logo{ grid-column:1/-1; } .site-footer{ padding-top:48px; }
}
/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  display:flex; gap:8px; padding:10px var(--gutter);
  background:rgba(250,248,245,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 -4px 24px rgba(45,43,44,.12);
  transform:translateY(0); transition:transform .3s var(--ease);
}
.sticky-cta.is-hidden{ transform:translateY(100%); }
.sticky-cta .btn{ flex:1; padding:14px 16px; }
/* ---------- Modal / quiz ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(20,19,19,.6);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal{
  background:var(--cream); width:100%; max-width:520px; border-radius:12px 12px 0 0;
  max-height:92vh; overflow-y:auto; padding:28px 24px 32px;
  transform:translateY(24px); transition:transform .35s var(--ease);
}
.modal-overlay.is-open .modal{ transform:translateY(0); }
@media (min-width:640px){
  .modal-overlay{ align-items:center; }
  .modal{ border-radius:12px; padding:36px 40px 40px; }
}
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.modal-head h2{ font-family:var(--font-display); font-size:22px; line-height:1.3; }
.modal-close{ background:transparent; border:none; width:32px; height:32px; flex-shrink:0; color:var(--ink-70); }
.modal-close svg{ width:20px; height:20px; }
.modal-sub{ margin-top:6px; font-size:15px; color:var(--ink-70); }
@keyframes fadein{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* ---------- Responsive ---------- */
/* Десктоп (≥1180px): навигация у левого края, телефон/CTA у правого —
   оба через обычный flex-поток (space-between). Логотип из этого потока
   выведен (position:absolute) и центрируется по left:50% ОТНОСИТЕЛЬНО
   .header-grid — а так как header-grid идёt на всю ширину экрана без
   max-width, 50% его padding-box геометрически равны 50vw, независимо
   от того, сколько места занимают левый/правый блоки. */
@media (min-width:1180px){
  .main-nav{ display:block; }
  .phone-link{ display:flex; }

  .header-grid{
    position:relative;
    display:flex; justify-content:space-between; align-items:center;
    width:100%; padding:0 56px; gap:24px;
  }
  .main-nav{ grid-column:unset; }
  .header-right-group{ display:flex; align-items:center; gap:28px; flex-shrink:0; }
  .site-header .logo{
    grid-column:unset; justify-self:unset;
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  }
  .header-right{ grid-column:unset; justify-self:unset; }
}
@media (min-width:900px){
  .sticky-cta{ display:none !important; }
}
@media (max-width:899px){
  body{ padding-bottom:66px; }
  .footer-bottom{ flex-direction:column; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
/* ---------- Форма: мелкий текст и ссылки читаются без напряжения ---------- */
.story-b24 .b24-form-field-agreement-link,
.story-b24 .b24-form-field-agreement-link:visited{ font-size:14px !important; color:var(--ink) !important; text-decoration:underline !important; text-underline-offset:3px; }
.story-b24 .b24-form-sign-text,
.story-b24 .b24-form-control-required{ font-size:14px !important; }
.story-b24 .b24-form-sign-text{ color:var(--ink-70) !important; }

/* ---------- Ссылка на портфолио в блоке «Пространство» ---------- */
.sp-more{ margin-top:clamp(18px, 3svh, 28px); }
.sp-link{ font-size:17px; font-weight:500; color:var(--ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
.sp-link:hover{ text-decoration-color:var(--taupe-dark); }