/* =========================================================
   T. Chikovani — UGC Creator
   Десктоп собран 1:1 по макету (1024 × ~617 pt на экран):
   все координаты в стилях/разметке — в пунктах макета,
   умножаются на --u (масштаб «пункт → пиксель»).
   ========================================================= */

:root{
  --milk:#FAF7F2;      /* тёплый молочный — основной фон */
  --choc:#523B20;      /* тёмный шоколадно-коричневый */
  --coffee:#543727;    /* глубокий кофейный */
  --muted:#94816C;     /* тёплый серо-бежевый */
  --cream:#F3E3D2;     /* кремовый бежевый */
  --pink:#F5B8C4;      /* нежно-розовый (мех) */
  --gloss:#F8CED5;     /* глянцевый пудрово-розовый */
  --stroke:#F8F2E8;    /* светлый кремовый мазок */
  --ink:#3c2f2f;       /* цифры и заголовки прайса */
  --ink2:#544541;
  --note:#96745e;

  --f-ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-serif:'Alta','Cormorant Garamond',Georgia,serif;
  --f-script:'Diploma Script','Buffalo','Caveat',cursive;
  --f-hand:'Caveat',cursive;
  --f-price1:'TT Ramillas','Cormorant Garamond',Georgia,serif;
  --f-price2:'Quincy CF','Cormorant Garamond',Georgia,serif;
}
/* если на компьютере/сервере есть файл Diploma Script — подхватится он */
@font-face{font-family:'Diploma Script';src:local('Diploma Script'),local('DiplomaScript'),local('DiplomaScript-Regular');font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--milk);color:var(--choc);font-family:var(--f-ui);
  container-type:inline-size;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
p,h1,h2,h3,h4,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ---------- масштаб ---------- */
.hdr,.sec{--u:calc(min(100vw,1600px) / 1024)}
@supports (width:1cqw){ .hdr,.sec{--u:calc(min(100cqw,1600px) / 1024)} }

.sec{position:relative;z-index:2;overflow:hidden;background:transparent}
/* экраны не обрезаются по вертикали: пятна и мех мягко переходят на соседний экран */
@supports (overflow:clip){ .sec{overflow:visible;overflow-x:clip} }
.sec.fur{z-index:1}
.works{z-index:3}
.stage{position:relative;width:calc(1024 * var(--u));height:calc(var(--h) * var(--u));margin:0 auto;--ox:0;--oy:0}
.a{position:absolute;left:calc((var(--x) - var(--ox)) * var(--u));top:calc((var(--y) - var(--oy)) * var(--u))}
.d{width:calc(var(--w) * var(--u));height:auto;pointer-events:none;user-select:none}
.g{position:absolute;left:calc(var(--gx) * var(--u));top:calc(var(--gy) * var(--u));
  width:calc(var(--gw) * var(--u));height:calc(var(--gh) * var(--u));--ox:var(--gx);--oy:var(--gy)}

.serif{font-family:var(--f-serif);font-weight:400;color:var(--choc);line-height:1;white-space:nowrap;letter-spacing:0}
.script{font-family:var(--f-script);color:var(--coffee);white-space:nowrap;line-height:1.35;font-weight:400}
.caveat{font-family:var(--f-hand);white-space:nowrap}

/* ---------- кнопки ---------- */
.btn{--bh:calc(46 * var(--u));--bf:calc(11.5 * var(--u));
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:calc(7 * var(--u));
  height:var(--bh);min-width:calc(var(--bh) * 2.4);padding:0 calc(var(--bh) * .55);
  font:800 var(--bf)/1.18 var(--f-ui);letter-spacing:.06em;color:var(--choc);text-align:center;white-space:nowrap;
  border-radius:999px;
  transition:transform .6s cubic-bezier(.22,.8,.3,1),opacity 1s ease}
.btn:hover{transform:translateY(calc(-2 * var(--u))) scale(1.025)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid var(--coffee);outline-offset:4px}
.btn-t,.btn-ic{position:relative;z-index:2}
.btn-ic{width:calc(var(--bf) * 1.55);height:auto;flex:none}
/* мягкий тёплый свет из-под кнопки — без подложки и контура */
.btn-glow{position:absolute;inset:14% 5% 0;z-index:0;border-radius:999px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,150,112,.9),rgba(255,170,135,.5) 65%,rgba(255,190,160,0));
  filter:blur(calc(12 * var(--u)));transform:translateY(calc(5 * var(--u))) scale(1.12,1.5);transition:transform .6s ease}
.btn:hover .btn-glow{transform:translateY(calc(6 * var(--u))) scale(1.2,1.75)}
/* «кожа» кнопки — оригинальная текстура тремя частями: края-капсулы не искажаются, тянется только середина.
   Обычные фоны (без border-image и псевдоэлементов) — в Safari кнопка не пропадает при наведении */
.btn-skin{position:absolute;inset:0;z-index:1;pointer-events:none;transform-origin:50% 100%;
  background:var(--sk-l) left center / auto 100% no-repeat,var(--sk-r) right center / auto 100% no-repeat,
             var(--sk-m) center / calc(100% - var(--bh) + 2px) 100% no-repeat}
.btn-fx{position:absolute;inset:8% 3%;border-radius:999px;overflow:hidden;pointer-events:none}
.btn-fx::before{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-size:260% 100%;background-position:140% 0;opacity:0}

/* меховая — только лёгкий ветерок: ворс покачивается и приподнимается, без блеска */
.btn-fur{--sk-l:url(assets/btn-fur-l.webp);--sk-r:url(assets/btn-fur-r.webp);--sk-m:url(assets/btn-fur-m.webp);color:var(--milk)}
.btn-fur .btn-t{text-shadow:none}
.btn-fur .btn-ic{filter:none}
/* вариант D: под светлым текстом мягкая тёмно-розовая дымка, вплетённая в мех */
.btn-fur .btn-haze{position:absolute;z-index:1;left:16%;right:16%;top:28%;bottom:28%;border-radius:999px;pointer-events:none;
  background:rgba(122,46,66,.38);filter:blur(calc(4.4 * var(--u)))}
.btn-fur .btn-fx{display:none}
.btn-fur:not(.gl):hover .btn-skin,.btn-fur:not(.gl).play .btn-skin{animation:wind 2.6s ease-in-out infinite}
/* в браузерах с WebGL мех рисуется на холсте и колышется по ворсинкам */
.btn-fur.gl .btn-skin{background:none}
.fur-gl{position:absolute;pointer-events:none}
/* порыв ветра: ворс приподнимается и клонится в сторону, потом мягко возвращается */
@keyframes wind{0%,100%{transform:none}20%{transform:skewX(-2.2deg) scale(1.01,1.045)}38%{transform:skewX(-1deg) scale(1.006,1.025)}55%{transform:skewX(1.2deg) scale(1.004,1.03)}75%{transform:skewX(-.5deg) scale(1,1.01)}}

/* глянцевая — блик: луч света проходит по капсуле */
.btn-gloss{--sk-l:url(assets/btn-gloss-l.webp);--sk-r:url(assets/btn-gloss-r.webp);--sk-m:url(assets/btn-gloss-m.webp)}
.btn-gloss .btn-t{text-shadow:0 1px 0 rgba(255,255,255,.6)}
.btn-gloss .btn-ic{filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
.btn-gloss .btn-fx::before{background-image:linear-gradient(112deg,transparent 0 33%,rgba(255,255,255,.35) 42%,rgba(255,255,255,1) 49%,rgba(255,250,246,1) 51%,rgba(255,255,255,.35) 58%,transparent 67% 100%)}
.btn-gloss:hover .btn-fx::before,.btn-gloss.play .btn-fx::before{animation:shine 3s ease-in-out infinite}
@keyframes shine{0%{opacity:1;background-position:140% 0}65%{opacity:1;background-position:-40% 0}66%,100%{opacity:0;background-position:-40% 0}}

/* появление кнопок */
.btn.pre{opacity:0;transform:translateY(calc(10 * var(--u))) scale(.96)}
@media (prefers-reduced-motion:reduce){.btn.pre{opacity:1;transform:none}.btn .btn-skin,.btn .btn-fx::before{animation:none!important}}

/* ---------- шапка ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;transition:background .35s,box-shadow .35s,backdrop-filter .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.hdr.is-hidden{transform:translateY(-105%)}
.hdr-in{position:relative;width:calc(1024 * var(--u));height:calc(66 * var(--u));margin:0 auto}
.hdr.is-solid{background:rgba(250,247,242,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(84,55,39,.08)}
.logo{position:absolute;left:calc(56 * var(--u));top:calc(24 * var(--u));font:800 calc(13.3 * var(--u))/calc(18 * var(--u)) var(--f-ui);letter-spacing:.07em;color:var(--choc)}
.nav a{position:absolute;left:calc(var(--x) * var(--u));top:calc(24 * var(--u));font:500 calc(13.3 * var(--u))/calc(18 * var(--u)) var(--f-ui);letter-spacing:.02em;color:var(--choc);transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:calc(-4 * var(--u));height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav a:hover::after,.nav a.is-cur::after{transform:scaleX(1)}
.hdr.on-fur:not(.is-solid) .logo,.hdr.on-fur:not(.is-solid) .nav a{color:#fff;text-shadow:0 1px 6px rgba(60,35,20,.35)}
.hdr-cta{position:absolute;left:calc(850 * var(--u));top:calc(12 * var(--u));--bh:calc(42 * var(--u));--bf:calc(12.5 * var(--u))}
.burger{display:none}

/* ---------- 1. hero ---------- */
.hero-script{font-size:calc(27.7 * var(--u))}
.hrt{display:inline-block;vertical-align:middle;width:1.25em;height:auto}
.hero-script .hrt{width:calc(18.7 * var(--u));margin-left:calc(26 * var(--u));transform:translateY(calc(-2 * var(--u)))}
.hero-h1{margin:0;font-weight:400}
.creator{font-size:calc(90.3 * var(--u));color:var(--coffee);letter-spacing:-.005em}
.by{font:400 calc(23 * var(--u))/calc(30 * var(--u)) var(--f-ui);color:var(--muted);white-space:nowrap}
.lead{font:400 calc(14.6 * var(--u))/calc(20 * var(--u)) var(--f-ui);color:var(--muted);white-space:nowrap}
.lead .hrt{width:calc(17 * var(--u));margin-left:calc(2 * var(--u))}
.contacts{font:400 calc(13.3 * var(--u))/calc(18.5 * var(--u)) var(--f-ui);color:var(--muted)}
.contacts a{display:inline-flex;align-items:center;gap:calc(5.5 * var(--u));transition:color .25s}
.contacts a:hover{color:var(--choc)}
.contacts img{width:calc(19 * var(--u));height:auto}
.hero-contacts{display:grid;grid-template-columns:calc(132.4 * var(--u)) calc(127 * var(--u)) auto;align-items:start;white-space:nowrap}
.loc{display:flex;align-items:flex-start;gap:calc(15 * var(--u));color:var(--muted);font:400 calc(13.3 * var(--u))/calc(19 * var(--u)) var(--f-ui);white-space:nowrap}
.pin{position:relative;flex:none;width:calc(10.5 * var(--u));height:calc(29 * var(--u));margin-top:calc(3 * var(--u))}
.pin::before{content:"";position:absolute;left:0;top:0;width:calc(10.5 * var(--u));height:calc(10.5 * var(--u));border-radius:50%;background:var(--coffee)}
.pin::after{content:"";position:absolute;left:calc(4.6 * var(--u));top:calc(9 * var(--u));width:calc(1.4 * var(--u));height:calc(19 * var(--u));background:var(--coffee);border-radius:2px}
.hero-btn,.about .btn,.c-btn{--bh:calc(48 * var(--u));width:calc(var(--w) * var(--u))}
.hello{font-size:calc(35.6 * var(--u));transform:rotate(4.6deg);transform-origin:0 0}

/* ---------- 2. about ---------- */
.fur-bg{position:absolute;inset:-56px 0;pointer-events:none;background:#a57f5f url(assets/fur-tile.jpg) 50% 0 / 1200px auto repeat;
  /* край — настоящий контур мехового пятна (ворс), без резких границ между экранами */
  -webkit-mask:url(assets/fur-edge.png) 0 0 / auto 170px repeat-x,linear-gradient(#000,#000) 0 150px / 100% calc(100% - 300px) no-repeat,url(assets/fur-edge-b.png) 0 100% / auto 170px repeat-x;
          mask:url(assets/fur-edge.png) 0 0 / auto 170px repeat-x,linear-gradient(#000,#000) 0 150px / 100% calc(100% - 300px) no-repeat,url(assets/fur-edge-b.png) 0 100% / auto 170px repeat-x}
.contact .fur-bg{background-position:20% 40%}
.h-about{font-size:calc(79.5 * var(--u));line-height:.83}
.about-copy{font:400 calc(16.3 * var(--u))/calc(20.8 * var(--u)) var(--f-ui);color:var(--muted);white-space:nowrap}
.about-copy p+p{margin-top:calc(13 * var(--u))}
.tags{width:calc(var(--w) * var(--u))}
.tags-line{width:calc(557 * var(--u));height:calc(4 * var(--u));margin-left:calc(1 * var(--u))}
.tags ul{display:flex;justify-content:space-between;width:calc(501 * var(--u));margin-top:calc(19 * var(--u));
  font:400 calc(9.5 * var(--u))/calc(13 * var(--u)) var(--f-ui);letter-spacing:.03em;color:var(--muted);white-space:nowrap}
.details{font-size:calc(21.8 * var(--u));transform:rotate(9.2deg);transform-origin:0 0}
.approach{width:calc(200 * var(--u));transform:rotate(3.4deg);transform-origin:0 0;color:var(--muted)}
.approach-h{font:500 calc(13.6 * var(--u))/calc(20 * var(--u)) var(--f-ui);color:#7d6d56;letter-spacing:.02em}
.approach ul{margin:calc(15 * var(--u)) 0 0 calc(-8 * var(--u))}
.approach li{display:flex;align-items:flex-start;gap:calc(10 * var(--u));font:400 calc(13.6 * var(--u))/calc(17 * var(--u)) var(--f-ui);margin-bottom:calc(10 * var(--u))}
.approach li img{width:calc(15.3 * var(--u));height:auto;flex:none;margin-top:calc(-3 * var(--u))}

/* ---------- 3. works ---------- */
.h-works{font-size:calc(64.2 * var(--u))}
.w-script{font-size:calc(26.5 * var(--u))}
.w-lead{font:400 calc(16 * var(--u))/calc(16.5 * var(--u)) var(--f-ui);color:var(--muted);white-space:nowrap}
.rituals{font-size:calc(22.4 * var(--u));line-height:1.05;transform:rotate(-17.5deg);transform-origin:0 0}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);justify-items:center;width:calc(860 * var(--u));left:calc(81 * var(--u))}
.tab{height:calc(37 * var(--u));min-width:calc(96 * var(--u));padding:0 calc(6 * var(--u));
  border-style:solid;border-color:transparent;border-width:0 calc(18.5 * var(--u));
  border-image:url(assets/tab.webp) 0 30 fill / 0 calc(18.5 * var(--u)) stretch;
  font:800 calc(10.4 * var(--u))/1 var(--f-ui);letter-spacing:.05em;color:var(--choc);white-space:nowrap;
  filter:drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(120,90,70,.12));transition:transform .3s,filter .3s}
.tab:hover{transform:translateY(calc(-1.5 * var(--u)))}
.tab.is-active{min-width:calc(118 * var(--u));filter:drop-shadow(0 calc(3 * var(--u)) calc(9 * var(--u)) rgba(255,160,128,.45)) !important;border-image:url(assets/btn-gloss.webp) 0 147 fill / 0 calc(18.5 * var(--u)) stretch;
  filter:drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(150,96,98,.22))}
.arr{width:calc(26 * var(--u));height:calc(33 * var(--u));transition:transform .3s,opacity .3s}
.arr img{width:100%;height:100%}
.arr-l img{transform:scaleX(-1)}
.arr:hover{transform:scale(1.12)}
.reel{left:calc(81 * var(--u));width:calc(860 * var(--u));display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.reel::-webkit-scrollbar{display:none}
.work{flex:0 0 calc(172 * var(--u));scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;transition:opacity .35s,transform .35s}
.phone{display:block;padding:0;border:0;background:none;cursor:pointer;position:relative;width:calc(120 * var(--u));aspect-ratio:413/847;transition:transform .45s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 calc(8 * var(--u)) calc(12 * var(--u)) rgba(84,55,39,.18))}
.phone .scr{position:absolute;left:4.72%;top:2.01%;width:90.44%;height:95.86%;object-fit:cover;object-position:50% 0;border-radius:15% / 7%;background:#2a201a}
.phone .frm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.phone .play{position:absolute;left:50%;top:50%;width:calc(30 * var(--u));height:calc(30 * var(--u));margin:calc(-15 * var(--u)) 0 0 calc(-15 * var(--u));border-radius:50%;
  background:rgba(250,247,242,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 calc(10 * var(--u)) rgba(255,180,150,.5);opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.phone .play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border:solid transparent;border-width:calc(6 * var(--u)) 0 calc(6 * var(--u)) calc(9.5 * var(--u));border-left-color:var(--coffee)}
.phone:hover .play,.phone:focus-visible .play{opacity:1;transform:none}
.reel.is-few{justify-content:center}
.reel-empty{width:calc(860 * var(--u));text-align:center;font:400 calc(26 * var(--u))/1.3 var(--f-script);color:var(--muted)}
/* окно просмотра */
.lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(60,40,28,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
.lb.open{opacity:1}
.lb[hidden]{display:none}
.lb-phone{position:relative;height:min(86vh,900px);aspect-ratio:413/847;transform:scale(.94);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lb.open .lb-phone{transform:none}
.lb-phone video{position:absolute;left:4.72%;top:2.01%;width:90.44%;height:95.86%;object-fit:cover;border-radius:15% / 7%;background:#2a201a}
.lb-phone .frm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lb-x{position:absolute;right:22px;top:18px;width:44px;height:44px;border-radius:50%;background:rgba(250,247,242,.85);box-shadow:0 0 14px rgba(255,180,150,.5)}
.lb-x::before,.lb-x::after{content:"";position:absolute;left:13px;right:13px;top:21px;height:1.6px;background:var(--choc);transform:rotate(45deg)}
.lb-x::after{transform:rotate(-45deg)}
html.lb-lock{overflow:hidden}
.work:hover .phone{transform:translateY(calc(-4 * var(--u))) rotate(-1deg)}
.work figcaption{text-align:center;margin-top:calc(9 * var(--u))}
.work b{display:block;font:800 calc(12.2 * var(--u))/calc(16 * var(--u)) var(--f-ui);color:var(--choc)}
.work span{display:block;margin-top:calc(5 * var(--u));font:400 calc(9 * var(--u))/calc(12 * var(--u)) var(--f-ui);letter-spacing:.03em;color:var(--muted);white-space:nowrap}
.work.is-hidden{display:none}

/* ---------- 4. pricing ---------- */
.h-pricing{font-size:calc(64 * var(--u))}
.p-sub{font:400 calc(11.5 * var(--u))/calc(16 * var(--u)) var(--f-ui);color:#7d6456;white-space:nowrap}
.note-t{font-size:calc(19.2 * var(--u));line-height:.84;color:var(--note);transform:rotate(-19.3deg);transform-origin:0 0}
.note-t{padding-left:calc(2 * var(--u))}
.choose-t{font-size:calc(16 * var(--u));line-height:.95;color:#b89c84;transform:rotate(-11deg);transform-origin:0 0}
.price-wrap{width:calc(var(--w) * var(--u));color:var(--ink)}
.p-title{display:flex;align-items:center;margin-left:calc(12 * var(--u));height:calc(24 * var(--u));margin-top:calc(7 * var(--u))}
.p-title h3{font:400 calc(16.7 * var(--u))/1 var(--f-price1);color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.p-rule{display:block;width:calc(270 * var(--u));height:1px;background:linear-gradient(90deg,rgba(150,120,100,.55),rgba(150,120,100,.35));margin:calc(8 * var(--u)) 0 0 calc(115 * var(--u))}
.svc{margin-top:calc(2 * var(--u));height:calc(125.6 * var(--u));background:url(assets/svc-card.webp) center/100% 100% no-repeat;display:grid;grid-template-rows:41.3fr 41.3fr 43fr}
.svc li,.bulk{display:grid;grid-template-columns:calc(50 * var(--u)) calc(40 * var(--u)) 1fr calc(85 * var(--u)) calc(29 * var(--u));align-items:center;padding:0 calc(17 * var(--u)) 0 calc(23 * var(--u))}
.svc li{grid-template-columns:1fr calc(85 * var(--u)) calc(29 * var(--u));padding-left:calc(34 * var(--u))}
.bar{display:block;width:calc(1.3 * var(--u));height:calc(25 * var(--u));background:#a1897a;border-radius:2px;margin-left:calc(6 * var(--u))}
.svc .t{font:400 calc(11.5 * var(--u))/calc(16 * var(--u)) var(--f-price1);letter-spacing:.005em;white-space:nowrap}
.svc small,.bulk small{display:block;font:400 calc(8.5 * var(--u))/calc(12 * var(--u)) var(--f-ui);color:var(--note);letter-spacing:0;margin-top:calc(1 * var(--u))}
.svc .pr{font:400 calc(16.7 * var(--u))/1 var(--f-price1);white-space:nowrap}
.dot{position:relative;display:block;width:calc(28.6 * var(--u));height:calc(29.9 * var(--u));background:url(assets/circle.webp) center/contain no-repeat;transition:transform .3s,filter .3s;
  filter:drop-shadow(0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(255,160,128,.35))}
.dot:hover{filter:drop-shadow(0 calc(3 * var(--u)) calc(9 * var(--u)) rgba(255,160,128,.5))}
.dot::after{content:"";position:absolute;left:50%;top:50%;width:calc(7 * var(--u));height:calc(9 * var(--u));background:url(assets/arrow.webp) center/contain no-repeat;transform:translate(-42%,-50%);opacity:.85;transition:transform .3s}
.dot:hover{transform:scale(1.12)}
.dot:hover::after{transform:translate(-22%,-50%)}
.p-title2{margin-top:calc(13 * var(--u))}
.pkgs{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(9 * var(--u));margin-top:calc(2 * var(--u))}
.pkg{position:relative;height:calc(142 * var(--u));background:url(assets/pkg-card.webp) center/100% 100% no-repeat;padding:calc(16 * var(--u)) calc(10 * var(--u)) 0 calc(16 * var(--u));color:var(--ink2);transition:transform .35s}
.pkg:hover{transform:translateY(calc(-3 * var(--u)))}
.tag{position:absolute;left:calc(1 * var(--u));top:calc(-4 * var(--u));width:calc(35 * var(--u));height:calc(35 * var(--u));background:url(assets/pkg-tag.webp) center/contain no-repeat;
  display:grid;place-items:center;font:400 calc(11.5 * var(--u))/1 var(--f-price1);color:var(--ink);transform:rotate(var(--r))}
.pkg h4{font:500 calc(14.1 * var(--u))/calc(17 * var(--u)) var(--f-price2);margin-left:calc(32 * var(--u));letter-spacing:.02em;white-space:nowrap}
.pkg ul{margin:calc(8 * var(--u)) 0 0 calc(31 * var(--u));font:400 calc(9.5 * var(--u))/calc(13 * var(--u)) var(--f-ui);color:#8f725d;white-space:nowrap}
.pkg li{position:relative}
.pkg li::before{content:"";position:absolute;left:calc(-14 * var(--u));top:calc(5 * var(--u));width:calc(3 * var(--u));height:calc(3 * var(--u));border-radius:50%;background:#8f725d}
.pkg-f{position:absolute;left:calc(12 * var(--u));right:calc(12 * var(--u));top:calc(90 * var(--u));border-top:1px solid rgba(150,120,100,.38);display:flex;align-items:center;justify-content:space-between;padding:calc(10 * var(--u)) 0 0 calc(4 * var(--u))}
.pkg-f b,.bulk b{font:500 calc(17.4 * var(--u))/1 var(--f-price2);color:var(--ink2);white-space:nowrap}
.bulk{margin-top:calc(3 * var(--u));height:calc(43.8 * var(--u));background:url(assets/bottom-card.webp) center/100% 100% no-repeat;grid-template-columns:calc(28 * var(--u)) calc(41 * var(--u)) 1fr calc(88 * var(--u)) calc(29 * var(--u))}
.bulk-h{width:calc(19 * var(--u));height:auto}
.bulk .t{font:500 calc(12.4 * var(--u))/calc(15 * var(--u)) var(--f-price2);color:var(--ink2);white-space:nowrap}
.bulk .bar{margin-left:calc(4 * var(--u))}
.p-btns{display:flex;justify-content:center;gap:calc(60 * var(--u));margin-top:calc(12 * var(--u));padding-right:calc(14 * var(--u))}
.p-btns .btn{--bh:calc(44 * var(--u));min-width:calc(172 * var(--u))}
.p-tags{display:grid;grid-template-columns:repeat(4,1fr);margin:calc(9 * var(--u)) calc(-13 * var(--u)) 0;padding-top:calc(7 * var(--u));border-top:1px solid rgba(150,120,100,.25);
  font:400 calc(8.3 * var(--u))/calc(10 * var(--u)) var(--f-ui);letter-spacing:.04em;color:#8f725d;text-align:center}
.p-fur{z-index:0}
.pricing .stage>*:not(.p-fur){z-index:1}
.pricing .price-wrap{z-index:2}
.p-coffee{z-index:3}

/* ---------- 5. contact ---------- */
.h-contact{font-size:calc(79.5 * var(--u))}
.c-list li+li{margin-top:calc(16.5 * var(--u))}
.c-list a{gap:calc(14 * var(--u))}
.c-list img{width:calc(20 * var(--u))}
.me{font-size:calc(30.9 * var(--u));transform:rotate(9.2deg);transform-origin:0 0}
.c-tags{opacity:.75}
.c-tags ul{color:#7c6a58}

/* ---------- лёгкая анимация ---------- */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(calc(-4 * var(--u))) rotate(1.2deg)}}
.float{animation:floaty 6s ease-in-out infinite}
.float.f2{animation-duration:7.5s;animation-delay:-2s}
.float.f3{animation-duration:8.5s;animation-delay:-4s}
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.float{animation:none}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ (< 900px)
   ========================================================= */
@media (max-width:899px){
  .hdr,.sec{--u:1.1px}
  .stage{width:100%;max-width:560px;height:auto;padding:96px 18px 48px;display:flex;flex-direction:column;align-items:flex-start}
  .a{position:relative;left:auto;top:auto}
  .g{position:relative;left:auto;top:auto;align-self:center;margin:28px auto 8px;
     --u:calc((min(100vw,560px) - 36px) / var(--gw))}
  @supports (width:1cqw){ .g{--u:calc((min(100cqw,560px) - 36px) / var(--gw))} }
  .g .a{position:absolute;left:calc((var(--x) - var(--ox)) * var(--u));top:calc((var(--y) - var(--oy)) * var(--u))}

  /* шапка */
  .hdr{background:rgba(250,247,242,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 2px 12px rgba(84,55,39,.07)}
  .hdr-in{width:100%;height:62px}
  .logo{left:18px;top:21px;font-size:14px;line-height:20px}
  .hdr-cta{left:auto;right:62px;top:10px;--bh:42px;--bf:11px}
  .burger{display:block;position:absolute;right:14px;top:15px;width:34px;height:32px}
  .burger span{position:absolute;left:6px;right:6px;height:1.6px;background:var(--choc);border-radius:2px;transition:transform .3s,top .3s}
  .burger span:first-child{top:11px}.burger span:last-child{top:19px}
  .hdr.menu-open .burger span:first-child{top:15px;transform:rotate(45deg)}
  .hdr.menu-open .burger span:last-child{top:15px;transform:rotate(-45deg)}
  .nav{position:absolute;top:62px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 0 22px;
    background:rgba(250,247,242,.97);box-shadow:0 14px 24px rgba(84,55,39,.08);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
  .hdr.menu-open .nav{opacity:1;transform:none;pointer-events:auto}
  .nav a{position:relative;left:auto;top:auto;font-size:15px;line-height:22px;padding:9px 18px;letter-spacing:.06em}
  .nav a::after{bottom:6px;left:18px;right:18px}
  .hdr.on-fur:not(.is-solid) .logo,.hdr.on-fur:not(.is-solid) .nav a{color:var(--choc);text-shadow:none}

  /* hero */
  .hero-script{font-size:26px}
  .hero-script .hrt{width:18px;margin-left:10px}
  .hero-h1{display:flex;flex-direction:column;width:100%}
  .ugc{width:min(100%,420px);margin:2px 0 0 -6px}
  .creator{font-size:min(99px,calc((100vw - 36px) / 4.02));margin-top:8px;line-height:.98}
  .by{font-size:22px;line-height:28px;margin:6px 0 0 6px}
  .lead{font-size:15px;line-height:22px;margin:6px 0 0 6px;white-space:normal}
  .hero-contacts{grid-template-columns:auto auto;gap:12px 22px;margin:22px 0 0 6px;font-size:14.5px;line-height:20px}
  .hero-contacts .loc{grid-column:1 / -1;font-size:14.5px;line-height:20px}
  .contacts img{width:20px}
  .hero-btn,.about .btn,.c-btn{width:auto;--bh:54px;--bf:12.5px;margin-top:26px;min-width:190px}
  .hero-art{margin-top:22px}

  /* about / contact: панель-«мазок» вместо огромного пятна */
  .fluff{display:none}
  .fur-bg{background-size:760px auto}
  .about-text,.contact-text{position:relative;width:calc(100% + 36px);margin:0 -18px;padding:42px 30px 46px;
    background:url(assets/about-fluff.webp) center/155% 112% no-repeat}
  .contact-text{background-image:url(assets/contact-fluff.webp);background-size:150% 118%}
  .h-about{font-size:min(80px,19vw)}
  .about-copy{font-size:16px;line-height:23px;white-space:normal;margin-top:20px}
  .about-copy br{display:none}
  .tags{width:100%;margin-top:30px}
  .tags-line{width:100%;height:4px}
  .tags ul{width:100%;flex-wrap:wrap;justify-content:flex-start;gap:6px 10px;font-size:11px;line-height:15px;margin-top:14px}
  .approach{width:calc(200 * var(--u))}
  .about-pol{margin-top:34px}

  /* works */
  .h-works{font-size:min(70px,calc((100vw - 36px) / 5.15))}
  .w-tape{position:absolute;left:min(calc(100vw - 80px),300px);top:-8px;width:50px}
  .works-head{position:relative;width:100%}
  .works-head .h-works{position:relative;z-index:0}
  .w-script{font-size:23px;margin-top:4px}
  .w-lead{font-size:16px;line-height:21px;white-space:normal;margin-top:8px}
  .w-lead br{display:none}
  .works-art{margin:18px auto 6px}
  .tabs{display:flex;left:auto;width:calc(100% + 36px);margin:10px -18px 0;padding:6px 18px 10px;overflow-x:auto;gap:8px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;height:38px;border-width:0 19px;font-size:11px;min-width:auto;border-image-width:0 19px}
  .tab.is-active{min-width:auto;border-image-width:0 19px}
  .arr{display:none}
  .reel-empty{width:100%;font-size:24px;margin:30px 0}
  .phone .play{opacity:.85;transform:none;width:34px;height:34px;margin:-17px 0 0 -17px}
  .phone .play::after{border-width:7px 0 7px 11px}
  .reel{left:auto;width:calc(100% + 36px);margin:8px -18px 0;padding:0 18px;gap:6px;scroll-padding:0 18px}
  .work{flex:0 0 46%}
  .phone{width:100%}
  .work b{font-size:14px;line-height:19px}
  .work span{font-size:10.5px;line-height:14px;white-space:normal}

  /* pricing */
  .pricing .stage{padding-top:104px}
  .p-fur{position:absolute;left:auto;right:-58%;top:-40px;width:110%;opacity:.95}
  .pricing-head{position:relative;width:100%}
  .h-pricing{font-size:70px}
  .p-heart{position:absolute;left:250px;top:-6px;width:44px}
  .p-sub{font-size:14px;line-height:20px;white-space:normal;margin-top:10px;max-width:70%}
  .p-note-g{position:absolute;right:6px;top:70px;left:auto;margin:0;--u:1px}
  .p-choose{display:none}
  .price-wrap{width:100%;margin-top:26px}
  .p-title{margin-left:2px}
  .p-title h3{font-size:19px}
  .p-rule{flex:1;width:auto;margin-left:14px;margin-right:4px}
  .svc{height:auto;background:rgba(250,245,240,.72);border:1px solid rgba(170,140,120,.3);border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:block;margin-top:8px}
  .svc li,.bulk{grid-template-columns:34px 1fr auto 34px;gap:0 8px;padding:14px 12px 14px 14px}
  .svc li{grid-template-columns:1fr auto 34px;padding-left:18px}
  .svc li+li{border-top:1px solid rgba(170,140,120,.28)}
  .svc .bar,.bulk .bar{display:none}
  .svc .t{font-size:13px;line-height:18px;white-space:normal}
  .svc small,.bulk small{font-size:11.5px;line-height:15px}
  .svc .pr{font-size:17px}
  .dot{width:30px;height:31px}
  .dot::after{width:8px;height:10px}
  .p-title2{margin-top:30px}
  .pkgs{grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
  .pkg{height:auto;min-height:168px;padding:20px 12px 64px 16px}
  .tag{width:36px;height:36px;font-size:12px}
  .pkg h4{font-size:15.5px;line-height:20px;margin-left:30px}
  .pkg ul{margin:12px 0 0 14px;font-size:12px;line-height:17px;white-space:normal}
  .pkg li::before{left:-11px;top:7px}
  .pkg-f{top:auto;bottom:12px;padding-top:10px}
  .pkg-f b,.bulk b{font-size:18px}
  .bulk{height:auto;margin-top:12px;background:rgba(250,245,240,.75);border:1px solid rgba(170,140,120,.3);border-radius:16px;grid-template-columns:28px 1fr auto 34px}
  .bulk .t{font-size:14px;line-height:18px;white-space:normal}
  .bulk-h{width:20px}
  .p-btns{flex-direction:column;align-items:center;gap:16px;margin-top:30px;padding:0}
  .p-btns .btn{--bh:54px;--bf:12.5px;min-width:230px}
  .p-btns .btn-t br{display:none}
  .p-tags{margin:30px 0 0;padding-top:12px;font-size:10.5px;line-height:13px;gap:6px}
  .p-coffee{position:absolute;right:-18px;top:auto;bottom:330px;left:auto;width:84px;z-index:3}
  .p-choc{display:none}

  /* contact */
  .contact .stage{padding-top:84px}
  .contact-text{order:-1;padding-top:52px}
  .h-contact{font-size:min(87px,calc((100vw - 60px) / 4.45))}
  .c-heart{position:absolute;right:26px;top:6px;left:auto;width:40px}
  .c-list{margin-top:26px;font-size:15px;line-height:22px}
  .c-list li+li{margin-top:16px}
  .c-list img{width:22px}
  .c-loc{margin-top:22px;font-size:15px;line-height:21px}
  .c-heart2{position:absolute;right:40px;bottom:46px;top:auto;left:auto;width:26px}
  .contact-pol{margin-top:30px}
  .c-btn{align-self:center}
  .c-tags{width:100%;opacity:1;background:rgba(250,247,242,.82);border-radius:14px;padding:12px 14px 14px;margin-top:30px}
  .c-tags .tags-line{display:none}
  .c-tags ul{margin-top:0}
}