/* ============================================================
   RUEV — токены
   ============================================================ */
:root{
  /* базовая палитра — из вашего файла */
  --cream:#F9F7F4;
  --bark:#3D3228;
  --ink:#2C2420;
  --ink-soft:#645955;
  --gold:#B08D5C;
  /* акцент, взятый из вашей же съёмки — глубокий красный абажура */
  --ember:#7E2B24;
  --hairline:rgba(61,50,40,.14);
  --hairline-light:rgba(249,247,244,.22);

  --header-h:70px;

  /* типографика */
  --f-display:'Playfair Display',Georgia,serif;
  --f-text:'Montserrat',system-ui,sans-serif;

  --t-hero:clamp(36px,5vw,76px);
  --t-h2:clamp(27px,3.8vw,50px);
  --t-h3:clamp(20px,2.2vw,28px);
  --t-lead:clamp(16px,1.3vw,19px);
  --t-body:16px;
  --t-small:13px;
  --t-micro:11px;

  --ease:cubic-bezier(.16,.84,.44,1);
}

*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-text);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}

img,video{display:block;max-width:100%}
a{color:inherit}

::selection{background:var(--ember);color:#fff}

:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ============================================================
   ВЕРХНЯЯ КРОМКА
   ============================================================ */
/* фон холста — чтобы нигде не проступала белая полоса
   (например, над закреплённой шапкой на телефоне) */
html{background:var(--cream)}

/* когда админ вошёл в WordPress, сверху появляется его панель.
   Сдвигаем шапку сайта, чтобы она не наезжала и не оставляла разрыв.
   Посетители сайта этого не видят. */
.admin-bar .masthead{top:32px}
@media screen and (max-width:782px){
  .admin-bar .masthead{top:46px}
}

/* ============================================================
   ШАПКА
   ============================================================ */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--header-h);
  display:flex;align-items:center;
  padding:0 clamp(18px,4vw,48px);
  background:rgba(249,247,244,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease);
}
.masthead.is-inverted{
  background:rgba(44,36,32,.5);
  border-bottom-color:var(--hairline-light);
  color:var(--cream);
}
.masthead__inner{
  width:100%;max-width:1440px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.wordmark{
  font-family:var(--f-display);
  font-size:clamp(17px,1.5vw,21px);
  font-weight:500;letter-spacing:.14em;
  text-decoration:none;white-space:nowrap;
}
.mainnav{display:flex;gap:clamp(16px,2.2vw,34px);align-items:center}
.mainnav a{
  font-size:var(--t-small);
  text-decoration:none;
  letter-spacing:.02em;
  opacity:.72;
  transition:opacity .3s var(--ease);
}
.mainnav a:hover{opacity:1}

.navbutton{display:none;background:none;border:0;cursor:pointer;padding:8px;color:inherit}
.navbutton span{display:block;width:24px;height:1.5px;background:currentColor;margin:5px 0;transition:transform .35s var(--ease),opacity .25s}
.navbutton.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.navbutton.is-open span:nth-child(2){opacity:0}
.navbutton.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ============================================================
   ГЕРОЙ
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding:0 clamp(18px,4vw,48px) clamp(40px,7vh,88px);
  background:var(--bark);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(44,36,32,.42) 0%,rgba(44,36,32,.12) 38%,rgba(44,36,32,.74) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%;max-width:1440px;margin:0 auto;color:var(--cream)}
.hero h1{
  font-family:var(--f-display);
  font-weight:400;
  font-size:var(--t-hero);
  line-height:.96;
  letter-spacing:-.015em;
  max-width:16ch;
}
.hero__lead{
  margin-top:16px;
  font-size:var(--t-lead);
  font-weight:300;
  line-height:1.5;
  max-width:44ch;
  opacity:.9;
}
.hero__hint{
  margin-top:clamp(24px,4vh,42px);
  display:flex;align-items:center;gap:12px;
  font-size:var(--t-small);opacity:.72;
}
.hero__hint i{
  display:block;width:1px;height:44px;background:currentColor;
  transform-origin:top;animation:drop 2.6s var(--ease) infinite;
}
@keyframes drop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* мягкое появление первого экрана */
.hero h1,.hero__lead,.hero__hint{animation:rise 1.2s var(--ease) both}
.hero__lead{animation-delay:.18s}
.hero__hint{animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ============================================================
   МАНИФЕСТ
   ============================================================ */
.manifesto{
  background:var(--ink);color:var(--cream);
  padding:clamp(72px,12vh,140px) clamp(18px,4vw,48px);
}
.manifesto__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,4.5vw,70px)}
.manifesto h2{
  font-family:var(--f-display);font-weight:400;
  font-size:var(--t-h2);line-height:1.06;letter-spacing:-.01em;
}
.manifesto__body p{
  font-weight:300;
  font-size:var(--t-lead);
  line-height:1.7;
  max-width:62ch;
}
.manifesto__body p + p{margin-top:1.15em}
.manifesto__body em{font-style:normal;color:var(--gold)}


/* ── семь ремёсел сходятся в одно ── */
.craftloop{
  width:100%;max-width:390px;margin-top:clamp(26px,4vh,46px);
  overflow:visible;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.craftloop .mi{
  stroke:rgba(249,247,244,.5);stroke-width:1.25;
  transform-box:fill-box;transform-origin:center;
  animation:cl-gather 9.5s cubic-bezier(.16,.84,.44,1) infinite both;
  animation-delay:calc(var(--i) * .06s);
}
.craftloop .cl-ring{
  stroke:var(--gold);stroke-width:.7;
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:cl-ring 9.5s cubic-bezier(.16,.84,.44,1) infinite both;
}
.craftloop .cl-shake{animation:cl-shake 9.5s ease-in-out infinite both;transform-box:fill-box;transform-origin:center}
.craftloop .cl-heart{
  stroke:var(--gold);stroke-width:.62;
  stroke-dasharray:100;stroke-dashoffset:100;opacity:0;
  animation:cl-heart 9.5s cubic-bezier(.16,.84,.44,1) infinite both;
}
@keyframes cl-gather{
  0%   {transform:translate(var(--dx),var(--dy)) scale(.7);opacity:0}
  7%   {opacity:.95}
  26%  {transform:translate(0,0) scale(1);opacity:.95}
  52%  {transform:translate(0,0) scale(1);opacity:.95}
  63%  {transform:translate(0,0) scale(.35);opacity:0}
  100% {transform:translate(0,0) scale(.35);opacity:0}
}
@keyframes cl-ring{
  0%,22% {stroke-dashoffset:100;opacity:.9}
  40%    {stroke-dashoffset:0;opacity:.9}
  58%    {stroke-dashoffset:0;opacity:.9}
  68%    {stroke-dashoffset:0;opacity:0}
  100%   {stroke-dashoffset:0;opacity:0}
}
@keyframes cl-shake{
  0%,42%  {transform:none}
  45%     {transform:translateX(-3.5px) rotate(-1.4deg)}
  48%     {transform:translateX(3.5px) rotate(1.4deg)}
  51%     {transform:translateX(-2.5px) rotate(-1deg)}
  54%     {transform:translateX(1.5px) rotate(.6deg)}
  57%,100%{transform:none}
}
@keyframes cl-heart{
  0%,60% {stroke-dashoffset:100;opacity:0}
  64%    {opacity:1}
  80%    {stroke-dashoffset:0;opacity:1}
  92%    {stroke-dashoffset:0;opacity:1}
  100%   {stroke-dashoffset:0;opacity:0}
}
@media(max-width:960px){.craftloop{max-width:320px;margin-left:auto;margin-right:auto}}

/* ============================================================
   ГЛАВЫ — механика скролла
   ============================================================ */
.chapters{position:relative}

.chapter{position:relative;height:240vh}
.chapter__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--cream);
}
/* тональная подложка главы */
.chapter__tone{position:absolute;inset:0;background:var(--tone,var(--cream));opacity:0;transition:none}

.film{
  position:absolute;left:0;right:0;
  height:33.334vh;
  height:33.334svh;
  overflow:hidden;
  background:var(--bark);
  will-change:transform;
}
.film__media{position:absolute;inset:0}
.film__media picture,.hero__media picture,.interlude__media picture{display:block;width:100%;height:100%}
.film__media img,.film__media video{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(var(--sat,1)) brightness(var(--bri,1));
  will-change:filter;
}
.film__scrim{position:absolute;inset:0;background:rgba(26,20,17,var(--scrim,.74))}
.film__caption{
  opacity:0;
  position:absolute;left:clamp(18px,4vw,56px);right:clamp(18px,4vw,56px);
  top:50%;transform:translateY(-50%);
  color:var(--cream);
  will-change:opacity,transform;
}
.film__caption h2{
  font-family:var(--f-display);font-weight:400;
  font-size:var(--t-h2);line-height:1;letter-spacing:-.01em;
}
.film__caption p{
  margin-top:11px;max-width:48ch;
  font-weight:300;font-size:var(--t-lead);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

.goods{
  opacity:0;
  position:absolute;left:0;right:0;
  padding:0 clamp(16px,2.4vw,44px);
  will-change:transform,opacity;
}
.goods__grid{
  max-width:1440px;margin:0 auto;
  transform:scale(var(--gs,1));transform-origin:top center;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,32px);
  align-items:start;
}
.good{text-align:center}
.good__slot{
  position:relative;
  aspect-ratio:1/0.84;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(61,50,40,.26);
  border-radius:2px;
  color:rgba(61,50,40,.42);
  font-size:var(--t-micro);letter-spacing:.14em;
}
.good__slot img{width:100%;height:100%;object-fit:contain;object-position:bottom}

/* слоты с настоящими предметами */
.good__slot--filled{border:0;padding:6%}
.good__slot--filled::after{display:none}
/* --s уравнивает предметы по занимаемой площади:
   без него высокое кашпо вписывается по высоте, а низкая чаша по ширине */
.good__slot--filled img{object-position:center;transform:scale(var(--s,1))}

.good h3{
  margin-top:11px;
  font-family:var(--f-text);font-weight:500;font-size:var(--t-small);
  letter-spacing:.02em;
}
.good p{font-size:11.5px;line-height:1.4;color:var(--ink-soft);margin-top:4px;max-width:24ch;margin-left:auto;margin-right:auto}

/* тёмные главы: кожа и подобные */
.chapter[data-dark="true"] .good__slot{border-color:rgba(249,247,244,.3);color:rgba(249,247,244,.5)}
.chapter[data-dark="true"] .good h3{color:var(--cream)}
.chapter[data-dark="true"] .good p{color:rgba(249,247,244,.62)}

/* боковой указатель глав */
.chapterrail{
  position:fixed;z-index:150;
  right:clamp(12px,2vw,26px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:11px;align-items:flex-end;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.chapterrail.is-on{opacity:1;pointer-events:auto}
.chapterrail a{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;font-size:var(--t-micro);letter-spacing:.1em;
  color:var(--ink-soft);opacity:.5;transition:opacity .3s var(--ease),color .3s var(--ease);
}
.chapterrail a span{width:16px;height:1px;background:currentColor;transition:width .35s var(--ease)}
.chapterrail a.is-current{opacity:1;color:var(--ember)}
.chapterrail a.is-current span{width:34px}
.chapterrail.is-inverted a{color:var(--cream)}
.chapterrail.is-inverted a.is-current{color:var(--gold)}
.chapterrail__skip{
  margin-top:14px;font-size:var(--t-micro);letter-spacing:.06em;
  opacity:.5;text-decoration:none;
}


/* ── передышки между главами ── */
.interlude{
  position:relative;overflow:hidden;
  min-height:74vh;min-height:74svh;
  display:flex;
  padding:clamp(40px,7vh,80px) clamp(18px,4vw,56px);
  background:var(--bark);
}
.interlude__media{position:absolute;inset:0}
.interlude__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.07);transition:transform 2.4s var(--ease);
}
.interlude.is-in .interlude__media img{transform:scale(1)}

/* без затемнения, только кадр */
.interlude--corners{align-items:stretch;background:var(--cream)}

@media(max-width:720px){.interlude{min-height:58svh}}


/* ============================================================
   ДИЗАЙН-БЮРО
   ============================================================ */
.studio{
  padding:clamp(72px,12vh,140px) clamp(18px,4vw,48px);
  background:var(--cream);
  border-top:1px solid var(--hairline);
}
.studio__inner{max-width:1180px;margin:0 auto}
.studio h2{
  font-family:var(--f-display);font-weight:400;
  font-size:var(--t-h2);line-height:1.05;letter-spacing:-.01em;max-width:18ch;
}
.studio__lead{
  margin-top:20px;max-width:60ch;
  font-size:var(--t-lead);font-weight:300;line-height:1.65;color:var(--ink-soft);
}
.steps{
  margin-top:clamp(36px,5vh,64px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3.4vw,56px);
  counter-reset:step;
}
.step{border-top:1px solid var(--hairline);padding-top:18px}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--f-display);font-size:15px;color:var(--ember);
}
.step h3{margin-top:12px;font-size:var(--t-h3);font-weight:400;line-height:1.5}
.step h3 mark{
  font-family:var(--f-display);
  background:var(--ember);color:var(--cream);
  padding:.06em .3em .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.step p{margin-top:9px;max-width:56ch;font-size:15px;line-height:1.6;color:var(--ink-soft)}

/* ============================================================
   СТЫК ОТДЕЛОВ
   ============================================================ */
.crossover{
  background:var(--bark);color:var(--cream);
  padding:clamp(72px,12vh,140px) clamp(18px,4vw,48px);
}
.crossover__inner{max-width:1180px;margin:0 auto}
.crossover h2{font-family:var(--f-display);font-weight:400;font-size:var(--t-h2);line-height:1.05;max-width:16ch}
.crossover__text{margin-top:20px;max-width:62ch;font-weight:300;font-size:var(--t-lead);line-height:1.7;opacity:.86}
.crossover__text p + p{margin-top:1.2em}
.pairs{margin-top:clamp(34px,5vh,60px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,26px)}
.pair figure{aspect-ratio:3/4;overflow:hidden;background:rgba(249,247,244,.05)}
.pair figure img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) brightness(.97);
  transition:transform 1.1s var(--ease),filter .8s var(--ease);
}
.pair:hover figure img{transform:scale(1.03);filter:saturate(1) brightness(1)}
.pair figcaption{margin-top:12px;font-size:var(--t-small);opacity:.78}

/* ============================================================
   КОНТАКТ
   ============================================================ */
.contact{
  padding:clamp(78px,13vh,150px) clamp(18px,4vw,48px);
  text-align:center;background:var(--cream);
}
.contact h2{font-family:var(--f-display);font-weight:400;font-size:var(--t-h2);line-height:1.05}
.contact p{margin:18px auto 0;max-width:56ch;font-size:var(--t-lead);font-weight:300;color:var(--ink-soft)}
.cta{
  display:inline-block;margin-top:30px;
  padding:15px 38px;
  background:var(--ember);color:var(--cream);
  text-decoration:none;font-size:var(--t-small);letter-spacing:.06em;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.cta:hover{background:#6A231D;transform:translateY(-2px)}

/* ============================================================
   ПОДВАЛ
   ============================================================ */
footer{background:var(--ink);color:var(--cream);padding:clamp(50px,7vh,80px) clamp(18px,4vw,48px) 40px}
.footer__cols{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.footer__cols h4{font-family:var(--f-display);font-weight:400;font-size:17px;margin-bottom:16px}
.footer__cols ul{list-style:none}
.footer__cols li{margin-bottom:9px}
.footer__cols a{font-size:14px;text-decoration:none;opacity:.72;transition:opacity .3s}
.footer__cols a:hover{opacity:1}
.footer__base{
  max-width:1180px;margin:clamp(36px,5vh,58px) auto 0;padding-top:24px;
  border-top:1px solid var(--hairline-light);
  display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;
  font-size:12px;line-height:1.75;opacity:.66;
}
.footer__base a{text-decoration:none;display:block;margin-bottom:6px}

/* ============================================================
   АДАПТИВ
   ============================================================ */

/* ── планшет ── */
@media(max-width:960px){
  :root{--t-lead:clamp(16px,2vw,19px)}
  .manifesto__inner{grid-template-columns:1fr;gap:28px}
  .manifesto{padding:clamp(72px,12vh,130px) clamp(18px,4vw,48px)}
  .goods__grid{gap:18px}
  .steps{grid-template-columns:1fr;gap:26px}
  .pairs{grid-template-columns:repeat(2,1fr)}
  .film__caption p{max-width:44ch}
}

/* ── телефон ── */
@media(max-width:720px){
  :root{
    --header-h:60px;
    --t-hero:clamp(32px,9vw,44px);
    --t-h2:clamp(24px,6.4vw,32px);
    --t-h3:19px;
    --t-lead:16px;
  }

  /* меню */
  .navbutton{display:block}
  .mainnav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--cream);
    /* над тёмной обложкой шапка светлеет; меню не должно
       наследовать этот цвет, иначе ссылки сливаются с фоном */
    color:var(--ink);
    padding:6px 18px 22px;
    border-bottom:1px solid var(--hairline);
    box-shadow:0 18px 40px -24px rgba(42,38,36,.45);
    transform:translateY(-120%);transition:transform .45s var(--ease);
  }
  .mainnav a{color:var(--ink)}
  .mainnav.is-open{transform:none}
  .mainnav a{padding:13px 0;width:100%;border-bottom:1px solid var(--hairline);opacity:1;font-size:15px}
  .mainnav a:last-child{border-bottom:0}

  /* обложка */
  .hero{padding:0 20px 40px}
  .hero h1{max-width:12ch;line-height:1.02}
  .hero__lead{margin-top:14px;max-width:30ch;font-size:15px}
  .hero__hint{margin-top:26px;font-size:12px}
  .hero__hint i{height:30px}

  /* манифест */
  .manifesto{padding:64px 20px}
  .manifesto__inner{gap:22px}
  /* заголовок и знак — по центру колонки */
  .manifesto h2{line-height:1.08;text-align:center}
  .craftloop{display:block;margin:26px auto 0;max-width:260px}
  .manifesto__body p{font-size:15px;line-height:1.65}
  .manifesto__body p + p{margin-top:1em}

  /* ── ГЛАВЫ: обычный поток, без залипания ── */
  .chapter{height:auto}
  .chapter__stage{position:static;height:auto;overflow:visible;padding-bottom:52px}
  .chapter__tone{opacity:1}

  .film{
    position:relative;left:auto;right:auto;
    height:auto;aspect-ratio:1/1;
    transform:none;--scrim:.46;
  }
  .film__caption{
    opacity:1;transform:none;
    top:auto;bottom:20px;left:20px;right:20px;
  }
  .film__caption h2{font-size:var(--t-h2);line-height:1.06}
  .film__caption p{
    margin-top:9px;font-size:13.5px;line-height:1.5;max-width:none;opacity:.92;
    display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* товары под кадром, по два в ряд */
  .goods{
    position:static;opacity:1;transform:none;
    padding:28px 20px 0;
  }
  .goods__grid{grid-template-columns:repeat(2,1fr);gap:22px 16px;align-items:start}
  .good__slot{aspect-ratio:1/0.92}
  .good__slot--filled{padding:4%}
  .good h3{margin-top:10px;font-size:12.5px}
  .good p{font-size:11.5px;line-height:1.4;margin-top:3px}

  /* указатель глав на телефоне не нужен — главы листаются пальцем */
  .chapterrail{display:none}

  /* передышка */
  .interlude{min-height:0;aspect-ratio:9/14;padding:0}

  /* остальные секции */
  .studio{padding:64px 20px}
  .studio h2{max-width:14ch}
  .studio__lead{margin-top:16px;font-size:15px;line-height:1.6}
  .steps{margin-top:32px;gap:22px}
  .step{padding-top:15px}
  .step p{margin-top:8px;font-size:14px}
  .crossover{padding:64px 20px}
  .crossover h2{max-width:13ch}
  .crossover__text{margin-top:16px;font-size:15px;line-height:1.65}
  .pairs{margin-top:30px;gap:12px}
  .pair figcaption{margin-top:8px;font-size:12px}
  .contact{padding:70px 20px}
  .contact p{margin-top:14px;font-size:15px}
  .cta{margin-top:26px;padding:15px 30px;width:100%;max-width:340px}
  footer{padding:52px 20px 30px}
  .footer__cols{grid-template-columns:1fr;gap:26px}
  .footer__cols h4{font-size:16px;margin-bottom:12px}
  .footer__base{gap:18px;margin-top:34px;padding-top:20px}
}

/* ── совсем узкий ── */
@media(max-width:400px){
  .hero{padding:0 16px 34px}
  .manifesto,.studio,.crossover{padding-left:16px;padding-right:16px}
  .goods{padding:24px 16px 0}
  .goods__grid{gap:18px 12px}
  .film__caption{left:16px;right:16px;bottom:16px}
  .pairs{gap:10px}
  footer{padding-left:16px;padding-right:16px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .craftloop .mi{opacity:.95;transform:none}
  .craftloop .cl-ring{stroke-dashoffset:0;opacity:.9}
  .craftloop .cl-heart{display:none}
  .interlude__media img{transform:none}
  /* главы — обычным потоком */
  .chapter{height:auto}
  .chapter__stage{position:static;height:auto;overflow:visible;padding-bottom:60px}
  .chapter__tone{opacity:1}
  .film{position:relative;height:auto;aspect-ratio:16/7;transform:none!important;--scrim:.5}
  .film__caption{opacity:1!important;transform:none!important;top:auto;bottom:24px}
  .goods{position:static;opacity:1!important;transform:none!important;padding-top:36px}
}

/* ============================================================
   ФОРМА ЗАЯВКИ
   ============================================================ */
.contact__actions{
  margin-top:30px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
}
.cta--ghost{
  background:none;color:var(--ink);
  border:1px solid var(--hairline);
}
.cta--ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
button.cta{font-family:var(--f-text);cursor:pointer;border:0}

/* затемнение и окно */
/* пока окно закрыто — его не должно быть в потоке:
   иначе прозрачный слой висит поверх страницы и перехватывает клики */
.lead[hidden]{display:none;pointer-events:none}
.lead{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vh,48px) clamp(16px,4vw,40px);
  background:rgba(26,20,17,0);
  transition:background .32s var(--ease);
}
.lead.is-on{background:rgba(26,20,17,.62)}
.lead__panel{
  position:relative;width:100%;max-width:560px;
  max-height:100%;overflow-y:auto;
  background:var(--cream);
  padding:clamp(26px,4vw,44px);
  opacity:0;transform:translateY(18px);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.lead.is-on .lead__panel{opacity:1;transform:none}
.lead__close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border:0;background:none;cursor:pointer;
  color:var(--ink-soft);font-size:22px;line-height:1;
  transition:color .25s var(--ease);
}
.lead__close:hover{color:var(--ember)}
.lead h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(23px,2.6vw,32px);line-height:1.1;letter-spacing:-.01em;
  max-width:16ch;
}
.lead__lead{margin-top:12px;font-size:14.5px;font-weight:300;line-height:1.6;color:var(--ink-soft);max-width:44ch}

/* поля */
.lead__form{margin-top:26px}
.lead__field{margin-bottom:20px}
.lead__field label{display:block;font-size:11px;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:7px}
.lead__field input[type="text"],
.lead__field input[type="tel"],
.lead__field input[type="email"],
.lead__field textarea{
  width:100%;padding:9px 0;
  font-family:var(--f-text);font-size:15px;font-weight:300;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--hairline);
  border-radius:0;transition:border-color .25s var(--ease);
}
.lead__field input:focus,.lead__field textarea:focus{outline:0;border-bottom-color:var(--ember)}
.lead__field textarea{resize:vertical;min-height:76px;line-height:1.55}

/* файл */
.lead__file{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lead__file input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.lead__filebtn{
  display:inline-block;padding:9px 18px;cursor:pointer;
  font-size:12px;letter-spacing:.04em;
  border:1px solid var(--hairline);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.lead__filebtn:hover{border-color:var(--ink)}
.lead__filename{font-size:12px;color:var(--ink-soft);font-weight:300}
.lead__hint{margin-top:8px;font-size:11.5px;color:var(--ink-soft);font-weight:300}

/* согласие */
.lead__agree{display:flex;gap:10px;align-items:flex-start;margin:22px 0 4px}
.lead__agree input{margin-top:3px;accent-color:var(--ember);flex:none}
.lead__agree span{font-size:12px;line-height:1.5;color:var(--ink-soft);font-weight:300}
.lead__agree a{color:var(--ink)}

.lead__submit{margin-top:22px;width:100%}
.lead__submit:disabled{opacity:.55;cursor:default;transform:none}

/* ловушка для роботов — людям не видна */
.lead__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* сообщение о результате */
.lead__note{margin-top:16px;font-size:14px;line-height:1.6;font-weight:300}
.lead__note.is-ok{
  margin-top:24px;font-size:16px;color:var(--ink);
  padding-left:14px;border-left:2px solid var(--gold);
}
.lead__note.is-err{color:var(--ember)}

@media(max-width:720px){
  .contact__actions{flex-direction:column;align-items:center}
  .contact__actions .cta{width:100%;max-width:340px}

  /* окно поднимается снизу шторкой */
  .lead{padding:0;align-items:flex-end}
  .lead__panel{
    max-width:none;
    /* svh считает реальную высоту экрана с учётом панелей браузера:
       с vh верх окна уезжал за границу и крестик был недосягаем */
    max-height:86vh;
    max-height:86svh;
    padding:12px 18px calc(26px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior:contain;
  }
  /* крестик остаётся на виду при прокрутке формы */
  .lead__close{
    position:sticky;top:0;right:auto;
    display:block;margin:0 -8px 4px auto;
    background:var(--cream);z-index:2;
  }
  .lead h2{font-size:21px;max-width:none}
  .lead__lead{font-size:13.5px;max-width:none}
  .lead__form{margin-top:20px}
  .lead__field{margin-bottom:16px}
  .lead__agree{margin:18px 0 4px}
  .lead__submit{margin-top:18px}
}