/* Landy Decor — кинематографичный лендинг на 12-колоночной сетке.
   Палитра и шрифт — как у Landy School (Manrope, 6 цветов школы) + один бордовый.
   Порядок файла: токены → сетка → общий фон (.stage) → элементы → секции по порядку → без анимаций.
   Правила: у секций нет своего фона и рамок — один фон на всю страницу, поэтому стыков не видно.
   Начальные состояния анимаций задаёт decor.js; без JS всё видно сразу. */

:root{
  /* ПАЛИТРА: 6 цветов Landy School + один бордовый. Другие цвета не добавлять —
     только эти же с прозрачностью (rgba от тех же значений). */
  --bg:#0F0C09;        /* 15,12,9    — фон */
  --bg2:#2B2218;       /* 43,34,24   — тени, подложки */
  --object:#4B4035;    /* 75,64,53   — предметы, мягкие свечения */
  --detail:#8A7A6A;    /* 138,122,106 — подписи */
  --accent:#A88E7C;    /* 168,142,124 — акцент (золото) */
  --text:#E9E9E8;      /* 233,233,232 — текст */
  --wine:#6E1A24;      /* 110,26,36  — бордо: бархатные блоки и ошибки в форме */
  --accent-hi:#C2A794; /* акцент при наведении — светлее тот же оттенок */
  --line:rgba(233,233,232,.12);
  --dim:rgba(233,233,232,.72); --dim2:rgba(233,233,232,.5);
  --font:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.16,.9,.3,1);

  /* сетка */
  --maxw:1440px;
  --pad:clamp(16px,4vw,56px);                                   /* внешние поля */
  --gut:clamp(12px,1.6vw,24px);                                 /* промежуток между колонками */
  --wrap:min(100vw, var(--maxw));
  --col:calc((var(--wrap) - 2 * var(--pad) - 11 * var(--gut)) / 12);
  --edge:max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));  /* левый край сетки */
  --sec:clamp(96px,15vh,170px);                                 /* вертикальный ритм секций */
  --r:18px;                                                     /* радиус карточек */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg);}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
body{color:var(--text);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:transparent;}
img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;}
em{font-style:normal;color:var(--accent);}
h1,h2,h3,h4{font-weight:300;letter-spacing:-.02em;line-height:1.08;}
h2{font-size:clamp(28px,3.4vw,54px);}
fieldset{border:none;}

/* ===== Сетка ===== */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.s1{grid-column-end:span 1}.s2{grid-column-end:span 2}.s3{grid-column-end:span 3}.s4{grid-column-end:span 4}
.s5{grid-column-end:span 5}.s6{grid-column-end:span 6}.s7{grid-column-end:span 7}.s8{grid-column-end:span 8}
.s9{grid-column-end:span 9}.s10{grid-column-end:span 10}.s11{grid-column-end:span 11}.s12{grid-column:1 / -1}
.c2{grid-column-start:2}.c3{grid-column-start:3}.c4{grid-column-start:4}.c5{grid-column-start:5}.c6{grid-column-start:6}
.c7{grid-column-start:7}.c8{grid-column-start:8}.c9{grid-column-start:9}
.right{text-align:right;}.center{justify-content:center;text-align:center;}
@media(max-width:900px){
  .grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .grid > :is(.s1,.s2,.s3,.s4,.s5,.s6,.s7,.s8,.s9,.s10,.s11,.s12){grid-column:1 / -1;}
  .grid > .m3{grid-column:auto / span 3;}
  .right{text-align:left;}
}
.grid-overlay{position:fixed;inset:0;z-index:140;pointer-events:none;display:none;}
.grid-overlay .grid{height:100%;}
.grid-overlay i{background:rgba(168,142,124,.07);box-shadow:inset 1px 0 rgba(168,142,124,.3),inset -1px 0 rgba(168,142,124,.3);}
@media(max-width:900px){.grid-overlay i:nth-child(n+7){display:none;}}
body.show-grid .grid-overlay{display:block;}

/* ===== Общий фон страницы: четыре тона, меняются плавной сменой прозрачности ===== */
/* Производительность: каждый слой — отдельный слой видеокарты (will-change), градиенты рисуются один раз,
   смена тона — только прозрачность, без перерисовки. Метка тона стоит на самом .stage, а не на body —
   смена тона не пересчитывает стили всей страницы. contain изолирует фон от остального документа. */
.stage{position:fixed;inset:0;z-index:-1;background:var(--bg);pointer-events:none;contain:strict;}
.stage > i{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;will-change:opacity;transform:translateZ(0);backface-visibility:hidden;}
.l-night{background:
  radial-gradient(ellipse 70% 55% at 50% 45%, rgba(43,34,24,.6), transparent 75%),
  var(--bg);}
.l-velvet{background:   /* без вертикальной штриховки — гладкий бордовый */
  radial-gradient(ellipse 60% 70% at 15% 30%, rgba(110,26,36,.55), transparent 70%),
  radial-gradient(ellipse 55% 60% at 88% 78%, rgba(110,26,36,.45), transparent 70%),
  linear-gradient(180deg,rgba(110,26,36,.18),rgba(110,26,36,.32) 50%,rgba(110,26,36,.18)),var(--bg);}
.l-ink{background:
  radial-gradient(ellipse 55% 45% at 85% 25%, rgba(168,142,124,.12), transparent 70%),
  radial-gradient(ellipse 50% 45% at 12% 80%, rgba(75,64,53,.3), transparent 70%),
  var(--bg);}
.stage[data-tone="night"] .l-night,.stage[data-tone="velvet"] .l-velvet,.stage[data-tone="ink"] .l-ink{opacity:1;}
/* тёплые огни — видны в бархатном тоне */
.lights{position:absolute;inset:-10%;opacity:0;transition:opacity 1.2s ease;will-change:transform,opacity;backface-visibility:hidden;
  background-image:
    radial-gradient(circle at 8% 22%, rgba(194,167,148,.28) 0, transparent 1.4%),
    radial-gradient(circle at 23% 64%, rgba(194,167,148,.2) 0, transparent 2.2%),
    radial-gradient(circle at 37% 18%, rgba(194,167,148,.16) 0, transparent 3%),
    radial-gradient(circle at 52% 78%, rgba(194,167,148,.24) 0, transparent 1.3%),
    radial-gradient(circle at 66% 35%, rgba(194,167,148,.18) 0, transparent 2.6%),
    radial-gradient(circle at 78% 62%, rgba(194,167,148,.26) 0, transparent 1.6%),
    radial-gradient(circle at 91% 26%, rgba(194,167,148,.16) 0, transparent 3.4%),
    radial-gradient(circle at 14% 88%, rgba(194,167,148,.14) 0, transparent 3.8%);
  animation:drift 36s ease-in-out infinite alternate;}
.stage[data-tone="velvet"] .lights{opacity:1;}
.stage:not([data-tone="velvet"]) .lights{animation-play-state:paused;}   /* огни двигаются, только когда видны */
@keyframes drift{from{transform:translate3d(-2%,1%,0)}to{transform:translate3d(2%,-2%,0)}}

/* ===== Общие элементы ===== */
.sec{padding:var(--sec) 0;}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--detail);margin-bottom:22px;}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;transform-origin:left;}
.eyebrow.center::after{content:"";width:28px;height:1px;background:currentColor;}
.sec-head{align-items:end;margin-bottom:clamp(40px,7vh,80px);}
.sec-head h2{grid-row:2;}
.head-note{grid-row:2;grid-column-start:9;color:var(--dim);font-size:15px;padding-bottom:.6em;}
@media(max-width:900px){.sec-head h2,.head-note{grid-row:auto;}.head-note{margin-top:18px;}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:18px 34px;border-radius:100px;background:var(--accent);color:var(--bg);font-weight:600;font-size:15px;white-space:nowrap;transition:background .3s,transform .4s var(--ease),box-shadow .3s;}
.btn:hover{background:var(--accent-hi);transform:translateY(-2px);box-shadow:0 10px 34px rgba(168,142,124,.32);}
.btn-sm{padding:12px 22px;font-size:13.5px;}
.btn-line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(233,233,232,.35);}
.btn-line:hover{background:rgba(233,233,232,.08);box-shadow:inset 0 0 0 1px rgba(233,233,232,.6);}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.tags li{padding:7px 12px;border-radius:100px;background:rgba(233,233,232,.08);font-size:12.5px;color:var(--dim);}
.more{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);transition:letter-spacing .4s var(--ease);}
.more:hover{letter-spacing:.12em;}
.vid,.h-img img{width:100%;height:100%;object-fit:cover;}

/* ===== Заставка / прогресс ===== */
.loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;animation:loaderUp 1s var(--ease) 1.5s forwards;pointer-events:none;}
.ld{display:flex;flex-direction:column;align-items:center;gap:14px;}
.ld-logo{display:block;width:clamp(150px,18vw,240px);height:auto;color:var(--text);clip-path:inset(100% 0 0 0);animation:ldIn 1s var(--ease) .1s forwards;}
.ld small{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--accent-hi);padding-left:.42em;opacity:0;animation:ldFade .8s ease .55s forwards;}
@keyframes ldIn{to{clip-path:inset(0 0 0 0);}}
@keyframes ldFade{to{opacity:1;}}
@keyframes loaderUp{to{transform:translateY(-100%);visibility:hidden;}}
.progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:120;}
.progress span{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);}

/* ===== Шапка ===== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;transition:transform .5s var(--ease),background .4s,padding .4s;}
.hdr.solid{background:rgba(15,12,9,.94);padding:14px 0;}
.hdr.hide{transform:translateY(-110%);}
.hdr-grid{align-items:center;}
.logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:1;justify-self:start;}
.logo .logo-w{display:block;height:22px;width:auto;color:var(--text);}
.logo small{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent-hi);}
.hdr-nav{display:flex;justify-content:center;gap:30px;font-size:14px;color:var(--dim);}
.hdr-nav a{transition:color .3s;}
.hdr-nav a:hover{color:var(--text);}
.hdr-cta{display:flex;justify-content:flex-end;}
@media(max-width:900px){.hdr-nav{display:none;}.hdr .grid > .logo,.hdr .grid > .hdr-cta{grid-column:auto / span 3;}}
@media(max-width:420px){.logo{font-size:15px;}.btn-sm{padding:10px 16px;font-size:12.5px;}}

/* ===== 1. Первый экран ===== */
.intro{position:relative;height:100vh;height:100svh;overflow:hidden;}
.intro-frame{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%);}
.intro-frame > img,.intro-frame > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.intro-frame > video{z-index:1;}
/* затемнение там, где текст: шапка и подпись сверху, заголовок с кнопками слева внизу, строка клиентов внизу */
.intro-shade{position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse 65% 55% at 18% 78%, rgba(15,12,9,.72) 0%, rgba(15,12,9,.35) 55%, transparent 80%),
             linear-gradient(180deg,rgba(15,12,9,.8) 0%,rgba(15,12,9,.35) 22%,rgba(15,12,9,.25) 45%,rgba(15,12,9,.6) 70%,rgba(15,12,9,.95) 100%),
             linear-gradient(90deg,rgba(15,12,9,.7) 0%,rgba(15,12,9,.2) 60%,rgba(15,12,9,.35) 100%);}
@media(max-width:900px){
  .intro-shade{background:linear-gradient(180deg,rgba(15,12,9,.75) 0%,rgba(15,12,9,.3) 18%,rgba(15,12,9,.45) 32%,rgba(15,12,9,.82) 46%,rgba(15,12,9,.9) 70%,rgba(15,12,9,.97) 100%);}
}
.intro-meta{position:absolute;left:0;right:0;top:96px;z-index:5;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.intro-caption{position:absolute;z-index:5;left:0;right:0;bottom:28px;}
.hero-main{align-items:end;}
.intro-caption h1{font-size:clamp(32px,4vw,64px);}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;}
.hero-card{background:rgba(15,12,9,.84);border-radius:var(--r);padding:22px;}
.intro-sub{font-size:15px;color:var(--dim);margin-bottom:18px;}
.hero-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px;}
.hero-thumbs a{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;}
.hero-thumbs img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.hero-thumbs a:hover img{transform:scale(1.08);}
.hero-count{display:flex;align-items:baseline;gap:10px;}
.hero-count span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim2);margin-right:auto;}
.hero-count b{font-size:34px;font-weight:200;line-height:1;font-variant-numeric:tabular-nums;}
.hero-count em{font-size:13px;}
.hero-bar{margin-top:34px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim2);}
.hero-bar b{color:var(--text);font-weight:500;}
@media(max-width:900px){
  .intro-meta{top:84px;}
  .intro-meta .right{display:none;}
  .intro-caption h1{font-size:clamp(32px,9vw,44px);}
  .hero-actions{margin-top:22px;}
  .hero-actions .btn{padding:14px 22px;font-size:14px;}
  .hero-card{margin-top:20px;padding:16px;}
  .hero-thumbs,.intro-sub{display:none;}
  .hero-bar{margin-top:18px;letter-spacing:.12em;}
  .hero-bar .right{display:none;}
}
@media(max-height:760px) and (min-width:901px){.hero-thumbs{display:none;}}

/* ===== 2. Манифест ===== */
.statement .eyebrow{padding-top:.9em;align-self:start;}
.statement-text{font-size:clamp(21px,2.3vw,36px);font-weight:300;line-height:1.22;letter-spacing:-.015em;}
.statement-text .w{display:inline-block;}
/* преимущества: номер · короткий заголовок · пояснение */
.fact{margin-top:clamp(56px,9vh,100px);}
.fact i{display:block;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--accent);margin-bottom:14px;}
.fact b{display:block;font-size:clamp(22px,1.9vw,30px);font-weight:300;line-height:1.1;letter-spacing:-.01em;}
.fact p{margin-top:12px;font-size:14.5px;color:var(--dim);max-width:260px;}
/* панель отсчёта: таймер слева, призыв и кнопка справа */
.ny{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-top:clamp(56px,9vh,100px);
  padding:clamp(22px,2.6vw,36px) clamp(22px,3vw,44px);border-radius:var(--r);background:rgba(15,12,9,.55);}
.ny-time{display:flex;flex-direction:column;gap:12px;}
.ny-label{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);}
.ny-nums{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums;}
.ny-nums b{font-size:clamp(30px,2.8vw,46px);font-weight:200;line-height:1;}
.ny-nums i{font-style:normal;font-size:12px;color:var(--dim2);margin-right:18px;}
.ny-nums i:last-child{margin-right:0;}
.ny-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.ny-cta p{max-width:220px;font-size:15px;color:var(--dim);}
@media(max-width:900px){
  .fact{margin-top:40px;}
  .ny{margin-top:48px;}
  .ny-nums i{margin-right:12px;}
  .ny-cta .btn{width:100%;}
}

/* ===== 3. Работы ===== */
/* лента: все карточки одной высоты, подписи — внутри кадра */
.works-pin{position:relative;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:64px;}
.h-track{--band:clamp(420px,calc(100vh - 190px),760px);display:flex;align-items:stretch;gap:var(--gut);height:var(--band);padding:0 var(--edge);will-change:transform;width:max-content;}
.h-intro{flex:none;align-self:center;width:calc(var(--col) * 3 + var(--gut) * 2);}
.h-intro p{color:var(--dim);margin:20px 0 34px;font-size:15px;}
.h-count{margin-bottom:26px;font-size:13px;letter-spacing:.2em;color:var(--dim2);}
.h-count b{color:var(--accent);font-weight:600;font-size:22px;letter-spacing:.06em;}
/* скругление задаём обрезкой самой карточки — так все четыре угла одинаковые и при параллаксе внутри */
.h-card{position:relative;flex:none;width:calc(var(--col) * 3 + var(--gut) * 2);border-radius:var(--r);overflow:hidden;clip-path:inset(0 round var(--r));background:var(--bg2);}
.h-card.h-wide{width:calc(var(--col) * 5 + var(--gut) * 4);}
.h-img{position:absolute;inset:0;overflow:hidden;}
/* фото шире карточки на 12% с каждой стороны: при параллаксе (±5%) его край никогда не заходит внутрь карточки */
.h-img > :is(img,video){position:absolute;top:0;left:-12%;width:124%;max-width:none;height:100%;object-fit:cover;}   /* сильнее общих правил img{max-width:100%} и .h-img img{width:100%} */
.h-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,12,9,.85));}
.h-card figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(16px,1.6vw,24px);display:flex;align-items:baseline;gap:12px;font-size:clamp(16px,1.3vw,20px);}
.h-card figcaption span{margin-left:auto;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.h-end{flex:none;width:calc(var(--col) * 4 + var(--gut) * 3);align-self:center;padding-left:calc(var(--col) + var(--gut));}
.h-end p{font-size:clamp(24px,2.4vw,38px);font-weight:300;line-height:1.15;margin-bottom:30px;}
@media(max-width:900px){
  .h-track{--band:clamp(380px,calc(100vh - 140px),640px);}
  .h-card,.h-intro{width:72vw;}
  .h-card.h-wide{width:86vw;}
  .h-end{width:80vw;padding-left:8vw;}
}
html:not(.motion) .works-pin{overflow-x:auto;}

/* ===== 4. Кино-вставка ===== */
.cine-pin{position:relative;height:100vh;height:100svh;overflow:hidden;}
.cine-frame{position:absolute;inset:0;overflow:hidden;will-change:transform;
  --cf:0%;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--cf)),transparent 100%);mask-image:linear-gradient(180deg,#000 calc(100% - var(--cf)),transparent 100%);}
.cine-frame video,.cine-day{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
html.motion .cine-night{clip-path:inset(0 0 0 100%);}   /* вечер выезжает поверх дня — шторкой справа налево (без JS сразу виден вечер) */
html:not(.motion) .ct-day,html:not(.motion) .cine-side{display:none;}
.cine-tag{position:absolute;z-index:3;top:5%;left:3%;padding:.5em 1em;border-radius:100px;font-size:clamp(24px,2.6vw,38px);   /* кадр в начале уменьшен вдвое — поэтому крупно */letter-spacing:.14em;text-transform:uppercase;background:rgba(15,12,9,.55);}
.ct-night{opacity:0;color:var(--accent-hi);}
/* боковые кадры проекта: слева снизу и справа сверху, ширина 2 колонки */
.cine-side{position:absolute;z-index:1;width:calc(var(--col) * 2 + var(--gut));aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;will-change:transform;}
.cine-side img{width:100%;height:100%;object-fit:cover;}
.cine-side::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,12,9,.85));}
.cine-side span{position:absolute;z-index:2;left:14px;bottom:12px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}
.cs-l{left:var(--edge);bottom:9vh;}
.cs-r{right:var(--edge);top:12vh;}
@media(max-width:900px){.cine-side{display:none;}}   /* на узком экране боковым кадрам нет места — остаётся день → вечер */
.cine-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(15,12,9,.35),rgba(15,12,9,.1) 40%,rgba(15,12,9,.8));}
.cine-words{position:absolute;inset:0;z-index:3;align-content:center;row-gap:52vh;pointer-events:none;}   /* слова — над и под кадром, не поверх него */
@media(max-width:900px){.cine-words{row-gap:64vh;}}
.cw{display:block;font-size:clamp(40px,7vw,120px);font-weight:200;letter-spacing:-.03em;line-height:.95;}
.cw-r{text-align:right;color:var(--accent);}
.cine-cap{position:absolute;left:0;right:0;bottom:clamp(28px,6vh,60px);z-index:3;align-items:end;}
.cine-cap p{font-size:clamp(16px,1.3vw,20px);color:var(--text);}
.cine-cap span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
@media(max-width:900px){.cine-cap span{margin-top:12px;}}

/* ===== 5. История ===== */
.story{padding:6vh 0;}
.story-grid{align-items:start;}
.story-media{position:sticky;top:12vh;height:76vh;border-radius:var(--r);overflow:hidden;background:var(--bg2);}
/* сцены лежат стопкой (следующая выше); смену двигает прокрутка — decor.js открывает сцену снизу вверх
   ровно со скоростью текста следующей главы */
.sm-img{position:absolute;inset:0;z-index:1;}
html.motion .sm-img:not([data-scene="0"]){clip-path:inset(100% 0 0 0);}
html:not(.motion) .sm-img:not(.is-active){display:none;}
.sm-img > img,.sm-img > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* сцена с видео Нигины: видео во весь рост, по бокам — размытый кадр */
/* сцена с Нигиной: по центру видео 9:16, по бокам — его же размытая копия (canvas 18×24, растянутый браузером) */
.sm-talk{background:var(--bg);}
/* растянутый маленький canvas в Firefox даёт квадраты — поэтому поверх ещё настоящее размытие; края уведены за рамку */
.sm-talk .talk-amb{position:absolute;inset:-12%;width:124%;height:124%;opacity:.9;}   /* кадр 36×48, растянутый браузером, — уже мягкое пятно */
.sm-talk .talk-vid{left:50%;right:auto;width:auto;height:100%;aspect-ratio:9/16;object-fit:cover;transform:translateX(-50%);border-radius:0;box-shadow:0 0 60px rgba(15,12,9,.5);}
/* кнопка звука: видна, когда на экране сцена с Нигиной; на компьютере ярче при наведении на кадр */
.talk-sound{position:absolute;z-index:5;left:50%;bottom:clamp(20px,4vh,36px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:12px 20px 12px 14px;border-radius:100px;background:rgba(15,12,9,.6);font-size:13px;font-weight:600;letter-spacing:.04em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .4s,background .3s;}
.talk-sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.talk-sound svg path:first-child{fill:currentColor;stroke:none;}
.talk-sound .w{display:none;}
.talk-sound[aria-pressed="true"] .w{display:block;}
.talk-sound[aria-pressed="true"] .x{display:none;}
.story-media.talk-on .talk-sound{opacity:.75;pointer-events:auto;}
.story-media.talk-on:hover .talk-sound,.talk-sound:focus-visible{opacity:1;background:rgba(15,12,9,.85);}
.sm-year{position:absolute;left:var(--gut);bottom:var(--gut);z-index:4;font-size:clamp(40px,4.6vw,84px);font-weight:200;line-height:1;overflow:hidden;}
.sm-year span{display:inline-block;}
.sm-year{transition:opacity .6s;}
.sm-talk.is-active ~ .sm-year{opacity:0;}   /* на сцене с Нигиной подпись года не закрывает видео */
.story-nav{position:absolute;z-index:4;top:var(--gut);left:var(--gut);display:flex;gap:6px;}
.story-nav span{padding:8px 14px;border-radius:100px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:rgba(15,12,9,.62);transition:background .4s,color .4s;}
.story-nav span.is-active{background:var(--accent);color:var(--bg);}
.chapter{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:4vh 0;}
/* Каждая глава: текст прилипает на той же высоте, что и сцена (12vh, высота 76vh), и стоит на месте --hold прокрутки —
   время прочитать. Затем глава уезжает вверх, а следующая поднимается снизу, и её кадр открывается вместе с ней.
   Расстояние между главами = 76vh + --hold, поэтому смены кадров никогда не накладываются. */
.story{--hold:20vh;}   /* короткая остановка: 65vh показалось долгой паузой */
.chapter.ch-hold{display:block;min-height:0;height:calc(76vh + var(--hold));padding:0;}
.ch-inner{position:sticky;top:12vh;height:76vh;display:flex;flex-direction:column;justify-content:center;}   /* текст стоит по центру относительно кадра */
.chapter h2{font-size:clamp(28px,2.9vw,46px);margin-bottom:24px;}
.chapter p{color:var(--dim);font-size:clamp(16px,1.2vw,19px);}
.chapter-img{display:none;}
.sign{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;}
.sign b{display:block;font-weight:500;}
.sign span{font-size:13px;color:var(--dim2);}
@media(max-width:900px){
  .story-media{display:none;}
  .chapter{min-height:auto;padding:56px 0;}
  .chapter-img{display:block;position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;margin-bottom:28px;}
  .chapter-img > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .chapter-talk{aspect-ratio:9/16;width:100%;max-width:calc(82vh * 9 / 16);align-self:center;}
  .chapter.ch-hold{height:auto;padding:56px 0;}
  .ch-inner{position:static;height:auto;}
  .talk-btn{display:none;}
}

/* ===== 6. Клиенты: бенто (большая, высокая, малые плитки + плитка-призыв) ===== */
.bento{grid-auto-rows:clamp(200px,27vh,300px);row-gap:var(--gut);}
.b-big{grid-column:1 / span 6;grid-row:span 2;}
.b-tall{grid-column:7 / span 3;grid-row:span 2;}
.b-sm{grid-column:10 / span 3;}
.b-row{grid-column:span 6;}
.case{position:relative;border-radius:var(--r);overflow:hidden;clip-path:inset(0 round var(--r));background:var(--bg2);}
/* фото выше плитки на 16%: decor.js двигает его при прокрутке (параллакс), края не видны */
.case-img{position:absolute;left:0;right:0;top:-8%;height:116%;}
.case-img img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease);}
.case:hover .case-img img{scale:1.06;}
/* затемнение под подписью: плотный градиент снизу, без плашек */
.case::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 35%,rgba(15,12,9,.55) 62%,rgba(15,12,9,.94) 100%);}
.case figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(16px,1.8vw,26px);transition:transform .8s var(--ease);}
.case:hover figcaption{transform:translateY(-6px);}
.case b{display:block;font-size:clamp(19px,1.4vw,24px);font-weight:300;line-height:1.1;}
.b-big b{font-size:clamp(24px,2vw,34px);}
.case span{display:block;margin-top:6px;font-size:14px;color:var(--dim);}
.case[data-gallery]{cursor:pointer;outline:none;}
.case[data-gallery]:focus-visible{box-shadow:0 0 0 2px var(--accent-hi);}
/* «N фото →»: проявляется при наведении (на телефоне видно всегда) */
.case-more{display:block;margin-top:10px;font-style:normal;font-size:13px;letter-spacing:.04em;color:var(--accent-hi);opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .8s var(--ease);}
.case:hover .case-more,.case:focus-visible .case-more{opacity:1;transform:none;}
@media(hover:none){.case-more{opacity:1;transform:none;}}

/* ===== Галерея объекта ===== */
.gal{position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(10px,2vh,20px);padding:clamp(14px,2.4vw,32px);
  background:var(--bg);opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s;}
.gal.is-open{opacity:1;visibility:visible;transition:opacity .6s ease;}
.gal[hidden]{display:none;}
.gal-top{display:flex;align-items:center;gap:20px;}
.gal-title{flex:1;min-width:0;}
.gal-title b{display:block;font-size:clamp(20px,1.8vw,28px);font-weight:300;line-height:1.1;}
.gal-title span{display:block;margin-top:4px;font-size:14px;color:var(--dim);}
.gal-count{font-size:14px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.06em;}
.gal-close,.gal-arr{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(43,34,24,.7);color:var(--text);font-size:18px;transition:background .3s,color .3s;}
.gal-close:hover,.gal-arr:hover{background:var(--accent);color:var(--bg);}
.gal-stage{position:relative;display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);min-height:0;}
.gal-frame{position:relative;flex:1;align-self:stretch;min-height:0;}
.gal-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.02);transition:opacity .7s ease,transform 1.2s var(--ease);}
.gal-frame img.is-on{opacity:1;transform:none;}
.gal-thumbs{display:flex;gap:8px;justify-content:safe center;overflow-x:auto;scrollbar-width:none;padding:2px;}
.gal-thumbs::-webkit-scrollbar{display:none;}
.gal-thumbs button{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden;opacity:.4;transition:opacity .4s ease;}
.gal-thumbs button.is-on,.gal-thumbs button:hover{opacity:1;}
.gal-thumbs img{width:100%;height:100%;object-fit:cover;}
@media(max-width:900px){
  .gal{padding:14px var(--pad);}
  .gal-arr{position:absolute;z-index:2;bottom:0;width:44px;height:44px;}
  .gal-prev{left:0;}
  .gal-next{right:0;}
  .gal-frame{margin-bottom:56px;}
  .gal-thumbs button{width:52px;height:52px;}
}
/* призыв под плитками: отдельная рамка по краям сетки, тёмный мутный фон, основная кнопка */
.want-wrap{margin-top:clamp(48px,7vh,88px);}
.want{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;
  padding:clamp(28px,3.4vw,52px) clamp(24px,3.4vw,52px);border-radius:var(--r);
  background:rgba(15,12,9,.5);-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1);}
.want h3{font-size:clamp(26px,2.6vw,40px);font-weight:300;line-height:1.1;letter-spacing:-.01em;}
.want p{margin-top:10px;font-size:15px;color:var(--dim);max-width:460px;}
@media(max-width:900px){
  .bento{grid-auto-rows:clamp(170px,26vh,240px);}
  .b-big{grid-column:1 / -1;grid-row:span 2;}
  .b-tall,.b-sm,.b-row{grid-column:span 3;grid-row:span 1;}
  .bento > .case:last-child{grid-column:1 / -1;}   /* пять малых плиток — последняя на всю ширину, без пустого места */
  .want{background:rgba(15,12,9,.72);-webkit-backdrop-filter:none;backdrop-filter:none;}   /* на телефоне без размытия — оно тормозит прокрутку */
  .want .btn{width:100%;}
}

/* ===== 7. Заявка ===== */
.fin{align-items:start;}
.faq{display:flex;flex-direction:column;gap:8px;}
details{border-radius:14px;background:rgba(15,12,9,.5);padding:18px 20px;}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-size:16px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1;transition:transform .3s;}
details[open] summary::after{transform:rotate(45deg);}
details p{color:var(--dim);font-size:15px;margin-top:12px;}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
.contact-cards a{display:block;padding:18px 20px;border-radius:14px;background:rgba(15,12,9,.5);transition:background .4s;}
.contact-cards a:hover{background:rgba(15,12,9,.8);}
.contact-cards span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim2);}
.contact-cards b{display:block;margin-top:6px;font-weight:500;}
.lead{position:relative;display:flex;flex-direction:column;padding:clamp(22px,2.6vw,36px);border-radius:22px;background:rgba(15,12,9,.9);}
.lead > label{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim2);margin:20px 0 8px;}
.lead > label:first-of-type{margin-top:0;}
.lead > label i{font-style:normal;text-transform:none;letter-spacing:0;}
.lead input,.lead textarea{background:rgba(233,233,232,.06);border:none;border-radius:12px;color:var(--text);font:inherit;font-size:16px;padding:14px 16px;outline:none;resize:vertical;transition:background .3s,box-shadow .3s;}
.lead input:focus,.lead textarea:focus{background:rgba(233,233,232,.1);box-shadow:inset 0 0 0 1px var(--accent);}
.lead input.err{box-shadow:inset 0 0 0 1px var(--wine);background:rgba(110,26,36,.3);}
.lead .btn{margin-top:26px;}
.lead small{display:block;text-align:center;margin-top:14px;font-size:12.5px;color:var(--dim2);}
.lead-ok{position:absolute;inset:0;z-index:4;border-radius:22px;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;opacity:0;pointer-events:none;transition:opacity .4s;}
.lead-ok.show{opacity:1;pointer-events:auto;}
.lead-ok b{font-size:24px;font-weight:400;}
.lead-ok span{color:var(--dim);}
@media(max-width:900px){.lead{margin-top:28px;}.contact-cards{grid-template-columns:1fr;}}

/* ===== Подвал ===== */
.ftr{padding:40px 0 30px;overflow:hidden;}
.ftr .grid{row-gap:30px;}
.ftr-logo{display:flex;align-items:flex-end;gap:clamp(8px,1.4vw,22px);margin-bottom:24px;color:#E9E9E8;}
.ftr-logo .fw-logo{display:block;width:min(78%,1100px);height:auto;}
.ftr-logo span{font-size:clamp(22px,4.4vw,80px);font-weight:300;letter-spacing:.04em;line-height:.8;color:var(--accent-hi);padding-bottom:.08em;}
.ftr h5{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim2);font-weight:600;margin-bottom:14px;}
.ftr .grid > div > a:not(.btn){display:block;margin-bottom:9px;color:var(--dim);font-size:14.5px;transition:color .3s;}
.ftr .grid > div > a:not(.btn):hover{color:var(--accent);}
.ftr-season p{color:var(--dim);font-size:14px;margin-bottom:16px;}
.ftr-copy{font-size:13px;color:var(--dim2);margin-top:20px;}

/* ===== Подписи поверх фото и видео: только тёмный градиент снизу кадра, без плашек ===== */
.h-img::after{background:linear-gradient(180deg,transparent 40%,rgba(15,12,9,.55) 68%,rgba(15,12,9,.92) 100%);}
.story-media::before{content:"";position:absolute;left:0;right:0;top:0;height:28%;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(15,12,9,.75),transparent);}   /* под кнопками глав */
.story-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(15,12,9,.55) 45%,rgba(15,12,9,.92));}   /* под годом */
.cine-shade{background:linear-gradient(180deg,rgba(15,12,9,.35),rgba(15,12,9,.1) 40%,rgba(15,12,9,.6) 70%,rgba(15,12,9,.92));}

/* ===== Телефон и планшет: облегчённый режим (тот же вид, меньше работы для видеокарты) ===== */
@media(max-width:900px),(pointer:coarse){
  .lights{display:none;}                                   /* огни: большой постоянно двигающийся слой */
  .stage > i{transition-duration:.8s;}
  .want{background:rgba(15,12,9,.72);-webkit-backdrop-filter:none;backdrop-filter:none;}   /* размытие под рамкой пересчитывается на каждом шаге прокрутки */
}

/* ===== Анимации (классы, которые ставит decor.js) ===== */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em;}
.wi{display:inline-block;}
html.motion .eyebrow::before{transform:scaleX(0);transition:transform 1.1s var(--ease);}
html.motion .eyebrow.drawn::before{transform:scaleX(1);}

@media (prefers-reduced-motion: reduce){
  .loader{display:none;}
  .lights{animation:none;}
  .sm-img,.sm-img > *{transition:none;}
}