/* ============================================================
   Мастерская Белочки — версия 2 («живая»)
   Тёмная основа липучки, золотая и оранжевая нить, парусина
   для светлых секций. Движение отвечает на прокрутку.
   ============================================================ */

:root{
  --loop:#0f0c0a;
  --loop-2:#1a1512;
  --loop-3:#26201b;
  --canvas:#d9d0bb;
  --canvas-2:#cbc1a8;
  --ink:#1f170f;
  --ink-soft:#5a4a3b;
  --sand:#e6dcc7;           /* светлый текст на тёмном */
  --sand-soft:#a99a84;
  --brown:#6e4433;
  --gold:#b78e3c;
  --gold-lt:#dcb45c;
  --rust:#c2461e;

  /* логотип ВКонтакте (Simple Icons, CC0): маска, закрашивается currentColor */
  --vk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.489.004.729-.003h3.564l.73.003.914.01.433.007.418.011.403.014.388.016.374.021.36.025.345.03.333.033c1.74.196 2.933.616 3.833 1.516.9.9 1.32 2.092 1.516 3.833l.034.333.029.346.025.36.02.373.025.588.012.41.013.644.009.915.004.98-.001 3.313-.003.73-.01.914-.007.433-.011.418-.014.403-.016.388-.021.374-.025.36-.03.345-.033.333c-.196 1.74-.616 2.933-1.516 3.833-.9.9-2.092 1.32-3.833 1.516l-.333.034-.346.029-.36.025-.373.02-.588.025-.41.012-.644.013-.915.009-.98.004-3.313-.001-.73-.003-.914-.01-.433-.007-.418-.011-.403-.014-.388-.016-.374-.021-.36-.025-.345-.03-.333-.033c-1.74-.196-2.933-.616-3.833-1.516-.9-.9-1.32-2.092-1.516-3.833l-.034-.333-.029-.346-.025-.36-.02-.373-.025-.588-.012-.41-.013-.644-.009-.915-.004-.98.001-3.313.003-.73.01-.914.007-.433.011-.418.014-.403.016-.388.021-.374.025-.36.03-.345.033-.333c.196-1.74.616-2.933 1.516-3.833.9-.9 2.092-1.32 3.833-1.516l.333-.034.346-.029.36-.025.373-.02.588-.025.41-.012.644-.013.915-.009ZM6.79 7.3H4.05c.13 6.24 3.25 9.99 8.72 9.99h.31v-3.57c2.01.2 3.53 1.67 4.14 3.57h2.84c-.78-2.84-2.83-4.41-4.11-5.01 1.28-.74 3.08-2.54 3.51-4.98h-2.58c-.56 1.98-2.22 3.78-3.8 3.95V7.3H10.5v6.92c-1.6-.4-3.62-2.34-3.71-6.92Z'/%3E%3C/svg%3E");
  --f-display:"Oswald", "Arial Narrow", system-ui, sans-serif;
  --f-text:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1200px;
  --r:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--f-text); font-size:clamp(16px,.5vw + 14.5px,18px);
  line-height:1.6; color:var(--sand); background:var(--loop);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold-lt); text-underline-offset:3px; }
a:hover{ color:#f2cf7b; }
:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }
.wrap{ width:min(100% - 40px,var(--wrap)); margin-inline:auto; }
section[id]{ scroll-margin-top:72px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--rust); color:#fff; padding:12px 18px; }
.skip:focus{ left:12px; top:12px; }

h1,h2,h3{ font-family:var(--f-display); font-weight:500; line-height:1.05; margin:0; letter-spacing:.005em; }
.h2{ font-size:clamp(34px,4.4vw,60px); text-transform:uppercase; letter-spacing:.02em; }
h3{ font-size:clamp(21px,1.6vw,25px); }
p{ margin:0 0 1em; max-width:66ch; }
p:last-child{ margin-bottom:0; }

.section{ padding:clamp(72px,9vw,130px) 0; }
.section--light{ background:var(--canvas); color:var(--ink); }
.section__head{ margin-bottom:clamp(30px,4vw,56px); }
.section__lead{ font-size:clamp(17px,1.15vw,20px); margin-top:14px; max-width:48ch; opacity:.85; }
.section__lead--narrow{ display:none; }

/* ---------- фактура липучки на тёмных блоках ---------- */
.section--dark{
  background-color:var(--loop);
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px), radial-gradient(rgba(255,255,255,.03) 1px, transparent 1.6px);
  background-size:7px 7px, 11px 11px; background-position:0 0, 4px 6px;
}

/* ---------- именная лента (логотип) ---------- */
.tape{
  display:inline-block; position:relative; text-decoration:none;
  background:var(--brown); border:2px solid var(--gold); border-radius:var(--r); padding:8px 16px 6px;
  background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 2px, transparent 2px 4px);
}
.tape::after{ content:""; position:absolute; inset:3px; border:1px dashed rgba(220,180,92,.7); border-radius:2px; pointer-events:none; }
.tape span{ font-family:var(--f-display); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:15px; line-height:1; color:var(--gold-lt); }
.tape--sm{ padding:6px 12px 4px; } .tape--sm span{ font-size:13px; }

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--f-display); font-weight:500; font-size:clamp(16px,1.05vw,19px); letter-spacing:.06em; text-transform:uppercase;
  padding:13px 24px 11px; border-radius:var(--r); border:2px solid transparent;
  transition:transform .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn--tg{ background:var(--rust); border-color:var(--rust); color:#fff4ea; }
.btn--tg::before{ content:""; width:18px; height:18px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.8 20c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.6-.6-.2L6.4 13.1l-4.8-1.5c-1-.3-1-1 .2-1.5l18.7-7.2c.9-.3 1.6.2 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.8 20c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.6-.6-.2L6.4 13.1l-4.8-1.5c-1-.3-1-1 .2-1.5l18.7-7.2c.9-.3 1.6.2 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.btn--tg:hover{ background:#a83a15; border-color:#a83a15; color:#fff4ea; transform:translateY(-2px); }
.btn--line{ border-color:currentColor; color:inherit; }
/* кнопка ВКонтакте: контурная, с логотипом ВК */
.btn--vk::before{ content:""; flex:none; width:22px; height:22px; background:currentColor; -webkit-mask:var(--vk-icon) center/contain no-repeat; mask:var(--vk-icon) center/contain no-repeat; }
.btn__long{ display:none; }
.nav__vk{ padding:0; width:48px; height:44px; justify-content:center; margin-left:calc(10px - clamp(14px,2vw,28px)); font-size:16px; white-space:nowrap; border-color:rgba(230,220,199,.5); }
.nav__vk::before{ width:24px; height:24px; }
.nav__vk:hover{ border-color:var(--gold-lt); background:none; color:var(--gold-lt); }
.contacts__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.btn--line:hover{ background:var(--gold-lt); border-color:var(--gold-lt); color:var(--ink); transform:translateY(-2px); }
.btn--lg{ padding:17px 32px 15px; font-size:clamp(18px,1.3vw,22px); }

/* ---------- прогресс-прострочка ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:4px; z-index:70; pointer-events:none; }
.progress span{
  display:block; height:100%; width:0;
  background:repeating-linear-gradient(90deg, var(--gold-lt) 0 8px, transparent 8px 13px);
}

/* ---------- шапка ---------- */
.head{ position:fixed; top:0; left:0; right:0; z-index:60; padding:16px 0; transition:background-color .3s, padding .3s, box-shadow .3s; }
.head.is-stuck{ background:rgba(15,12,10,.9); backdrop-filter:blur(8px); padding:8px 0; box-shadow:0 8px 30px rgba(0,0,0,.35); }
.head__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.nav ul{ display:flex; gap:clamp(12px,1.8vw,26px); list-style:none; margin:0; padding:0; }
.nav ul a{ font-family:var(--f-display); font-size:18px; letter-spacing:.03em; color:var(--sand); text-decoration:none; white-space:nowrap; padding-bottom:3px; border-bottom:2px solid transparent; }
.nav ul a:hover{ color:var(--gold-lt); border-bottom-color:var(--gold-lt); }
/* в шапке на десктопе Telegram и ВК — одинаковые контурные квадраты с иконками */
.nav .btn--tg{ padding:0; width:48px; height:44px; justify-content:center; font-size:16px; white-space:nowrap; background:none; border-color:rgba(230,220,199,.5); color:var(--sand); }
.nav .btn--tg::before{ width:22px; height:22px; }
.nav .btn--tg:hover{ background:none; border-color:var(--gold-lt); color:var(--gold-lt); transform:none; }
.nav__vk:hover{ transform:none; }
.burger{ display:none; width:44px; height:40px; padding:9px 8px; background:none; border:2px solid var(--sand); border-radius:var(--r); cursor:pointer; flex-direction:column; justify-content:space-between; }
.burger span{ display:block; height:2px; background:var(--sand); transition:transform .22s, opacity .18s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---------- первый экран ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:140px 0 110px; overflow:hidden; }
.hero__media{ position:absolute; inset:-8% 0; z-index:0; will-change:transform; }
/* видео приглушено и затонировано под палитру: текст главнее фона */
.hero__video{ width:100%; height:100%; object-fit:cover; object-position:50% 38%; filter:saturate(.45) sepia(.35) brightness(.62) contrast(1.05); }
.hero__shade{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(15,12,10,.6) 0%, rgba(15,12,10,.25) 35%, rgba(15,12,10,.8) 75%, var(--loop) 100%),
  linear-gradient(90deg, rgba(15,12,10,.7) 0%, rgba(15,12,10,.1) 65%),
  linear-gradient(0deg, rgba(110,68,51,.28), rgba(110,68,51,.28)); }
.hero__inner{ position:relative; z-index:1; will-change:transform, opacity; }
.hero__kicker{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:14px; color:var(--gold-lt); margin-bottom:18px; }
.hero__title{ font-size:clamp(44px,7vw,108px); text-transform:uppercase; line-height:.95; letter-spacing:.01em; color:#fff6e8; max-width:15ch; text-shadow:0 4px 40px rgba(0,0,0,.4); }
.hero__lead{ font-size:clamp(17px,1.2vw,21px); margin-top:26px; max-width:54ch; color:#e6dcc7; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__scroll{ position:absolute; z-index:1; right:max(20px,calc((100vw - var(--wrap)) / 2)); bottom:40px; width:26px; height:44px; border:2px solid rgba(230,220,199,.5); border-radius:14px; }
.hero__scroll span{ position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; background:var(--gold-lt); border-radius:2px; animation:wheel 1.6s ease-in-out infinite; }
@keyframes wheel{ 0%,100%{ transform:translateY(0); opacity:1 } 60%{ transform:translateY(16px); opacity:0 } }
.hero__mute{ position:absolute; z-index:1; left:max(20px,calc((100vw - var(--wrap)) / 2)); bottom:40px; width:44px; height:44px; display:grid; place-items:center; background:rgba(15,12,10,.45); border:1px solid rgba(230,220,199,.4); color:var(--sand); border-radius:50%; cursor:pointer; padding:0; backdrop-filter:blur(4px); transition:border-color .2s, background-color .2s; }
.hero__mute:hover{ border-color:var(--gold-lt); color:var(--gold-lt); background:rgba(15,12,10,.7); }
.hero__mute svg{ display:block; }
.hero__mute[aria-pressed="true"] .hero__mute-play{ display:none; }
.hero__mute[aria-pressed="false"] .hero__mute-pause{ display:none; }

/* появление первого экрана */
@media (prefers-reduced-motion:no-preference){
  .hero__inner > *{ animation:rise .9s var(--ease) both; }
  .hero__inner > :nth-child(2){ animation-delay:.12s } .hero__inner > :nth-child(3){ animation-delay:.24s } .hero__inner > :nth-child(4){ animation-delay:.36s }
}
@keyframes rise{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }

/* ---------- бегущая лента ---------- */
/* лента золотом по тёмному: оранжевый оставлен только кнопкам действия */
.marquee{ background:var(--loop-2); color:var(--gold-lt); overflow:hidden; padding:14px 0; border-top:2px dashed rgba(220,180,92,.45); border-bottom:2px dashed rgba(220,180,92,.45); }
.marquee__track{ display:flex; align-items:center; gap:34px; width:max-content; will-change:transform; animation:marquee 32s linear infinite; }
.marquee__track span{ font-family:var(--f-display); font-size:clamp(18px,1.6vw,24px); letter-spacing:.06em; white-space:nowrap; }
.marquee__track i{ width:7px; height:7px; background:var(--rust); border-radius:50%; flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%) } }
.marquee:hover .marquee__track{ animation-play-state:paused; }
/* на сенсорных экранах наведения нет: лента не крутится, её можно листать пальцем */
@media (hover:none){
  .marquee{ overflow-x:auto; scrollbar-width:none; }
  .marquee::-webkit-scrollbar{ display:none; }
  .marquee__track{ animation:none; }
}

/* ---------- появление при прокрутке ---------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }

/* ---------- услуги ---------- */
.services{ background:var(--canvas); color:var(--ink); }
.cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.card{ position:relative; background:var(--canvas-2); border:2px solid rgba(31,23,15,.12); border-radius:var(--r); padding:clamp(24px,2.5vw,34px); overflow:hidden;
  transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .25s; }
.card:nth-child(2){ transition-delay:.08s } .card:nth-child(3){ transition-delay:.16s } .card:nth-child(4){ transition-delay:.24s } .card:nth-child(5){ transition-delay:.32s }
.card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--rust); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.card:hover{ border-color:var(--rust); } .card:hover::after{ transform:scaleX(1); }
.card__n{ position:absolute; right:18px; top:12px; font-family:var(--f-display); font-size:64px; line-height:1; color:rgba(31,23,15,.08); }
.card h3{ margin-bottom:12px; text-transform:uppercase; letter-spacing:.03em; }
.card p{ color:var(--ink-soft); font-size:16px; }

/* ---------- процесс: закреплённый кадр ---------- */
.scrolly{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,80px); align-items:start; }
.scrolly__pin{ position:sticky; top:90px; }
.frame{ position:relative; aspect-ratio:4/5; max-height:calc(100vh - 130px); max-width:440px; border:2px solid var(--gold); border-radius:18px; overflow:hidden; background:#161210; box-shadow:0 30px 60px rgba(0,0,0,.45); }
.frame__item{ position:absolute; inset:0; opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .7s var(--ease); }
.frame__item.is-active{ opacity:1; transform:none; }

/* «телефон» с перепиской */
.chat__bar{ position:relative; z-index:2; display:flex; align-items:center; gap:12px; padding:12px 16px; background:#1f1917; border-bottom:1px solid rgba(220,180,92,.25); }
.chat__ava{ width:36px; height:36px; border-radius:50%; background:var(--brown); border:1.5px solid var(--gold); color:var(--gold-lt); font:500 13px/34px var(--f-display); text-align:center; letter-spacing:.08em; flex:none; }
.chat__who{ display:flex; flex-direction:column; min-width:0; }
.chat__who b{ font-family:var(--f-display); font-weight:500; font-size:16px; letter-spacing:.02em; color:var(--sand); }
.frame__caption{ font-size:12.5px; color:var(--gold-lt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat{ top:61px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:14px 14px 16px;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.4px); background-size:9px 9px; }
.msg{ position:relative; max-width:86%; padding:8px 12px 8px; border-radius:14px; font-size:13.5px; line-height:1.4; color:var(--sand); }
.msg--in{ align-self:flex-start; background:#2b2421; border-bottom-left-radius:4px; }
.msg--out{ align-self:flex-end; background:var(--brown); color:#fff3e0; border-bottom-right-radius:4px; }
.msg__t{ display:inline-block; margin-left:8px; font-size:10.5px; opacity:.55; vertical-align:bottom; }
.msg--card{ padding:6px; max-width:78%; width:fit-content; }
.sk{ display:block; width:100%; height:auto; border-radius:9px; }
.sk--sketch{ width:min(100%,220px); }
.swatches{ display:flex; gap:8px; padding:6px; width:232px; max-width:100%; }
.sw{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font:500 11px/1 var(--f-display); letter-spacing:.04em; color:#fff3e0; }
.sw::before{ content:""; width:100%; aspect-ratio:1; border-radius:6px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 4px); }
.sw i{ font:11px/1 var(--f-text); font-style:normal; opacity:.7; }
.progress-row{ display:flex; align-items:center; gap:8px; padding:8px 6px 4px; font-size:11.5px; color:#fff3e0; }
.progress-bar{ flex:1; height:6px; border-radius:3px; background:rgba(0,0,0,.35); overflow:hidden; }
.progress-bar i{ display:block; height:100%; background:var(--gold-lt); border-radius:3px; }
.ship{ display:flex; align-items:center; gap:12px; padding:8px 8px 8px 6px; }
.ship div{ display:flex; flex-direction:column; gap:2px; font-size:12px; line-height:1.3; }
.ship b{ font-family:var(--f-display); font-weight:500; font-size:15px; letter-spacing:.02em; }
.ship__note{ opacity:.45; font-size:10.5px; }
/* сообщения всплывают по очереди, когда шаг становится активным */
@media (prefers-reduced-motion:no-preference){
  .frame__item.is-active .msg{ animation:pop .45s var(--ease) both; }
  .frame__item.is-active .msg:nth-child(2){ animation-delay:.18s } .frame__item.is-active .msg:nth-child(3){ animation-delay:.36s }
  .frame__item.is-active .msg:nth-child(4){ animation-delay:.54s } .frame__item.is-active .msg:nth-child(5){ animation-delay:.72s }
  .frame__item.is-active .stitch-line{ stroke-dashoffset:100; stroke-dasharray:100; animation:stitch 3.5s linear .6s both; }
  .frame__item.is-active .stitch-line--2{ animation-delay:2.4s; animation-duration:2.2s; }
  .frame__item.is-active .needle{ animation:needle .14s ease-in-out .6s 40 alternate; }
}
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.97) } to{ opacity:1; transform:none } }
@keyframes stitch{ to{ stroke-dashoffset:0 } }
@keyframes needle{ from{ transform:translateY(0) } to{ transform:translateY(6px) } }
.steps{ list-style:none; margin:0; padding:10vh 0 30vh; }
.step{ padding:clamp(28px,4vw,44px) 0; border-bottom:1px dashed rgba(183,142,60,.4); opacity:.35; transform:translateX(12px); transition:opacity .5s, transform .5s var(--ease); }
.step.is-active{ opacity:1; transform:none; }
.step__n{ display:block; font-family:var(--f-display); font-size:15px; letter-spacing:.2em; color:var(--gold-lt); margin-bottom:6px; }
.step h3{ font-size:clamp(26px,2.4vw,34px); text-transform:uppercase; margin:0 0 10px; }
.step__btn{ display:block; width:100%; padding:0; margin:0; background:none; border:0; font:inherit; color:inherit; text-align:left; letter-spacing:inherit; text-transform:inherit; cursor:pointer; border-radius:var(--r); transition:color .2s; }
.step__btn:hover{ color:var(--gold-lt); }
.step:hover{ opacity:.75; }
.step.is-active:hover{ opacity:1; }
.step__btn:focus-visible{ outline:2px solid var(--rust); outline-offset:6px; }
.step p{ color:var(--sand); opacity:.85; }

/* ---------- работы: горизонтальная лента ---------- */
.works{ background:var(--canvas); color:var(--ink); }
.works__sticky{ position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:center; gap:28px; overflow:hidden; padding:80px 0 30px; }
.works__head{ flex:none; }
.rail{ display:flex; align-items:flex-start; gap:22px; padding-left:max(20px,calc((100vw - var(--wrap)) / 2)); padding-right:40px; width:max-content; will-change:transform; }
.tile{ margin:0; flex:none; width:min(clamp(260px,26vw,400px),44vh); background:var(--canvas-2); border:2px solid rgba(31,23,15,.14); border-radius:var(--r); overflow:hidden; }
.tile__btn{ display:block; width:100%; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:zoom-in; }
.tile img, .tile video{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .5s var(--ease); }
.tile:hover img{ transform:scale(1.04); }
.tile figcaption{ padding:12px 14px 14px; font-size:14px; color:var(--ink-soft); }
.tile--video{ border-color:var(--rust); }
.tile--more{ display:flex; flex-direction:column; justify-content:center; gap:18px; padding:28px; background:var(--loop-2); color:var(--sand); }
.tile--more p{ font-family:var(--f-display); font-size:26px; line-height:1.15; }

/* ---------- о мастерской ---------- */
.about{ background:var(--canvas); color:var(--ink); border-top:2px dashed rgba(31,23,15,.2); }
.about__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,80px); align-items:center; }
.about__text .h2{ margin-bottom:24px; }
.about__text p{ font-size:clamp(17px,1.15vw,20px); }
.about__shot{ transition-delay:.15s; }
.about__shot img{ border:2px solid var(--brown); border-radius:var(--r); box-shadow:16px 16px 0 rgba(110,68,51,.18); }

/* ---------- вопросы ---------- */
.faq__grid{ display:grid; grid-template-columns:.6fr 1.4fr; gap:clamp(24px,4vw,60px); }
.qa{ border-bottom:1px dashed rgba(183,142,60,.4); }
.qa summary{ cursor:pointer; list-style:none; font-family:var(--f-display); font-size:clamp(20px,1.5vw,24px); padding:20px 46px 20px 0; position:relative; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:28px; color:var(--gold-lt); transition:transform .25s var(--ease); }
.qa[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.qa summary:hover{ color:var(--gold-lt); }
.qa__body{ padding:0 0 22px; } .qa__body p{ color:var(--sand-soft); }

/* ---------- контакты ---------- */
.contacts{ position:relative; padding:clamp(90px,12vw,160px) 0; overflow:hidden; }
.contacts__media{ position:absolute; inset:-15% 0; z-index:0; will-change:transform; }
.contacts__media img{ width:100%; height:100%; object-fit:cover; opacity:.22; filter:saturate(.7); }
.contacts__inner{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; }
.contacts__inner .section__lead{ margin:14px auto 32px; }
.contacts__list{ list-style:none; margin:40px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:2px; border:2px solid rgba(220,180,92,.35); border-radius:var(--r); background:rgba(220,180,92,.35); }
.contacts__list li{ background:var(--loop-2); padding:18px 30px; min-width:240px; display:flex; flex-direction:column; gap:4px; }
.contacts__list span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sand-soft); }
.contacts__list a, .contacts__list b{ font-family:var(--f-display); font-weight:500; font-size:20px; text-decoration:none; color:var(--sand); padding:6px 0; }
.contacts__list a:hover{ color:var(--gold-lt); }

/* ---------- подвал ---------- */
.foot{ background:#0a0806; color:var(--sand-soft); padding:36px 0; border-top:1px dashed rgba(183,142,60,.3); }
.foot__row{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; justify-content:space-between; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:18px; }
.foot__nav a{ color:var(--sand); font-family:var(--f-display); font-size:17px; letter-spacing:.03em; text-decoration:none; padding:8px 0; }
.foot__nav a:hover{ color:var(--gold-lt); }
.foot__legal{ font-size:14px; margin:0; }

/* ---------- иконка Telegram в шапке (только на узких экранах) ---------- */
.head__tg{ display:none; width:44px; height:40px; margin-left:auto; border:2px solid var(--sand); border-radius:var(--r); background:none; color:var(--sand); flex:none; }
.head__tg::before{ content:""; display:block; width:22px; height:22px; margin:7px auto 0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.8 20c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.6-.6-.2L6.4 13.1l-4.8-1.5c-1-.3-1-1 .2-1.5l18.7-7.2c.9-.3 1.6.2 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.8 20c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.6-.6-.2L6.4 13.1l-4.8-1.5c-1-.3-1-1 .2-1.5l18.7-7.2c.9-.3 1.6.2 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.head__tg:hover{ border-color:var(--gold-lt); color:var(--gold-lt); }
.head__vk{ display:none; width:44px; height:40px; flex:none; border:2px solid var(--sand); border-radius:var(--r); color:var(--sand); text-decoration:none; }
.head__vk::before{ content:""; display:block; width:22px; height:22px; margin:7px auto 0; background:currentColor; -webkit-mask:var(--vk-icon) center/contain no-repeat; mask:var(--vk-icon) center/contain no-repeat; }
.head__vk:hover{ border-color:var(--gold-lt); color:var(--gold-lt); }

/* ---------- лайтбокс ---------- */
.lb{ position:fixed; inset:0; z-index:80; background:rgba(8,6,4,.95); display:flex; align-items:center; justify-content:center; gap:8px; padding:clamp(16px,4vw,48px); }
.lb[hidden]{ display:none; }
.lb__fig{ margin:0; max-width:min(92vw,980px); text-align:center; }
.lb__fig img{ max-height:76vh; width:auto; margin-inline:auto; border:2px solid var(--gold); border-radius:var(--r); }
.lb__fig figcaption{ color:var(--sand); font-size:15px; margin-top:14px; }
.lb__close,.lb__nav{ background:none; border:2px solid rgba(220,180,92,.5); color:var(--sand); border-radius:var(--r); cursor:pointer; font-size:28px; line-height:1; width:48px; height:48px; flex:none; }
.lb__close{ position:absolute; top:16px; right:16px; font-size:32px; }
.lb__close:hover,.lb__nav:hover{ border-color:var(--gold-lt); color:#fff; }

/* ============================================================ адаптив */
@media (max-width:1024px){
  .scrolly{ grid-template-columns:1fr; }
  /* на узких экранах «телефон» с перепиской не показываем: остаются только шаги, все читаемые */
  .scrolly__pin{ display:none; }
  .section__lead--wide{ display:none; }
  .steps{ padding:0 0 2vh; }
  .step{ opacity:1; transform:none; padding:clamp(22px,4vw,32px) 0; }
  .step__btn{ pointer-events:none; }
  .step h3{ font-size:clamp(24px,5vw,30px); }
  .section__lead--narrow{ display:block; }
  .about__grid,.faq__grid{ grid-template-columns:1fr; }
  .about__shot{ max-width:520px; }
}
.rail__ctl{ display:none; }
@media (max-width:900px){
  /* ниже 900px «Работы» — слайдер: одно фото на экран, листается пальцем с привязкой, ничего не обрезается.
     Снизу счётчик и стрелки */
  .works__sticky{ position:static; height:auto; padding:clamp(64px,9vw,100px) 0; overflow:visible; }
  .rail{ display:flex; gap:0; width:min(100% - 40px, 480px); margin-inline:auto; padding:0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-radius:var(--r); will-change:auto; }
  .rail::-webkit-scrollbar{ display:none; }
  .tile{ flex:0 0 100%; width:100%; scroll-snap-align:center; scroll-snap-stop:always; border-width:0; border-radius:0; }
  .tile img, .tile video{ aspect-ratio:4/5; }
  .tile:hover img{ transform:none; }
  .tile figcaption{ font-size:15px; padding:14px 16px 16px; min-height:74px; }
  .tile--video{ box-shadow:inset 0 0 0 2px var(--rust); }
  .tile--more{ justify-content:center; align-items:flex-start; padding:28px 24px; min-height:100%; }
  .rail__ctl{ display:flex; align-items:center; justify-content:center; gap:18px; width:min(100% - 40px, 480px); margin:16px auto 0; }
  .rail__btn{ width:48px; height:48px; border-radius:50%; border:2px solid rgba(31,23,15,.25); background:none; color:var(--ink); font-size:28px; line-height:1; cursor:pointer; }
  .rail__btn:hover{ border-color:var(--rust); color:var(--rust); }
  .rail__btn:disabled{ opacity:.3; cursor:default; }
  .rail__count{ font-family:var(--f-display); font-size:17px; letter-spacing:.08em; color:var(--ink-soft); min-width:64px; text-align:center; }
}
/* до 1024px меню не помещается в строку шапки рядом с логотипом и кнопкой — прячем его за бургер */
@media (max-width:1024px){
  .burger{ display:flex; position:relative; z-index:70; }
  .head__tg{ display:block; margin-right:8px; }
  .head__vk{ display:block; margin-right:8px; }
  .head__row{ gap:0; }
  .burger[aria-expanded="true"]{ border-color:var(--gold-lt); } .burger[aria-expanded="true"] span{ background:var(--gold-lt); }
  .nav{ position:fixed; inset:0 0 0 auto; width:min(84vw,340px); background:var(--loop-2); flex-direction:column; align-items:flex-start; gap:8px; padding:92px 26px 30px; transform:translateX(100%); transition:transform .3s var(--ease); overflow-y:auto; z-index:50; box-shadow:-18px 0 40px rgba(0,0,0,.5); }
  .nav.is-open{ transform:none; }
  .nav ul{ flex-direction:column; gap:6px; width:100%; }
  .nav ul a{ font-size:22px; display:block; padding:10px 0; white-space:normal; }
  /* в мобильном меню Telegram снова оранжевый, с полным текстом */
  .nav .btn--tg{ margin-top:18px; white-space:normal; height:auto; padding:11px 18px 9px; background:var(--rust); border-color:var(--rust); color:#fff4ea; }
  .nav .btn--tg::before{ width:18px; height:18px; }
  .nav .btn--tg:hover{ background:#a83a15; border-color:#a83a15; color:#fff4ea; }
  .nav__vk{ white-space:normal; height:auto; width:auto; justify-content:flex-start; margin-left:0; padding:11px 18px 9px; }
  .nav .btn--tg{ width:auto; justify-content:flex-start; }
  .nav__vk::before{ width:22px; height:22px; }
  .btn__long{ display:inline; }
  body.is-locked{ overflow:hidden; }
}
@media (max-width:768px){
  .head{ padding:10px 0; } .head.is-stuck{ backdrop-filter:none; }
  .hero{ padding:120px 0 90px; align-items:center; }
  .hero__mute{ bottom:22px; width:40px; height:40px; } .hero__scroll{ display:none; }
  .foot__row{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px){
  /* узкая шапка: логотип меньше, три кнопки справа компактнее */
  .tape{ padding:6px 11px 4px; } .tape span{ font-size:12px; letter-spacing:.12em; }
  .head__tg, .head__vk, .burger{ width:40px; height:36px; }
  .head__tg::before{ margin-top:6px; width:20px; height:20px; }
  .head__vk::before{ width:20px; height:20px; margin-top:6px; }
  .head__tg, .head__vk{ margin-right:6px; }
  .burger{ padding:8px 7px; }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:360px){
  .tape span{ font-size:11px; letter-spacing:.08em; }
}
@media (max-width:600px){
  .contacts__list li{ min-width:100%; }
  .lb__nav{ position:absolute; bottom:20px; } .lb__nav--prev{ left:20px; } .lb__nav--next{ right:20px; }
  .card__n{ font-size:48px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .rv,.card{ opacity:1; transform:none; }
  .step{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}