:root{--grain:url("/grain.png")}
/* Страницы услуг: те же шрифт, размеры, цвета и ритм, что на главной */
:root{--ink:#050505;--muted:rgba(5,5,5,.5);--line:rgba(5,5,5,.1);--stroke:rgba(5,5,5,.18);--bg:#f5f5f5;--ease:cubic-bezier(.22,.8,.2,1)}
*{box-sizing:border-box;letter-spacing:-0.03em}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Manrope","Manrope Placeholder",sans-serif;font-weight:500;letter-spacing:-0.03em;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-256px;background:var(--grain) repeat;background-size:256px 256px;opacity:.04;pointer-events:none;z-index:-1;will-change:transform;animation:grain 8s steps(1) infinite}
@keyframes grain{0%{transform:translate(-26px,-51px)}1.11%{transform:translate(-51px,-102px)}2.22%{transform:translate(-77px,-154px)}3.33%{transform:translate(-102px,-205px)}4.44%{transform:translate(-128px,0px)}5.56%{transform:translate(-154px,-51px)}6.67%{transform:translate(-179px,-102px)}7.78%{transform:translate(-205px,-154px)}10%{transform:translate(0px,0px)}11.11%{transform:translate(-51px,-179px)}12.22%{transform:translate(-102px,-102px)}13.33%{transform:translate(-154px,-26px)}14.44%{transform:translate(-205px,-205px)}15.56%{transform:translate(0px,-128px)}16.67%{transform:translate(-51px,-51px)}17.78%{transform:translate(-102px,26px)}20%{transform:translate(-205px,179px)}21.11%{transform:translate(0px,0px)}22.22%{transform:translate(-143px,102px)}23.33%{transform:translate(-31px,-51px)}24.44%{transform:translate(-174px,-205px)}25.56%{transform:translate(-61px,-102px)}26.67%{transform:translate(-205px,0px)}27.78%{transform:translate(-92px,-154px)}30%{transform:translate(133px,-205px)}31.11%{transform:translate(246px,-102px)}32.22%{transform:translate(102px,0px)}33.33%{transform:translate(41px,0px)}34.44%{transform:translate(236px,0px)}35.56%{transform:translate(174px,0px)}36.67%{transform:translate(113px,0px)}37.78%{transform:translate(51px,0px)}40%{transform:translate(-72px,0px)}41.11%{transform:translate(-133px,0px)}42.22%{transform:translate(-195px,0px)}43.33%{transform:translate(0px,0px)}44.44%{transform:translate(-51px,179px)}45.56%{transform:translate(-102px,102px)}46.67%{transform:translate(-154px,26px)}47.78%{transform:translate(-205px,205px)}50%{transform:translate(-51px,51px)}51.11%{transform:translate(-102px,230px)}52.22%{transform:translate(-154px,154px)}53.33%{transform:translate(-205px,77px)}54.44%{transform:translate(0px,0px)}55.56%{transform:translate(-102px,205px)}56.67%{transform:translate(-205px,154px)}57.78%{transform:translate(-51px,102px)}60%{transform:translate(0px,0px)}61.11%{transform:translate(154px,205px)}62.22%{transform:translate(51px,154px)}63.33%{transform:translate(205px,102px)}64.44%{transform:translate(102px,51px)}65.56%{transform:translate(0px,0px)}66.67%{transform:translate(179px,77px)}67.78%{transform:translate(102px,154px)}70%{transform:translate(205px,51px)}71.11%{transform:translate(128px,128px)}72.22%{transform:translate(51px,205px)}73.33%{transform:translate(230px,26px)}74.44%{transform:translate(154px,102px)}75.56%{transform:translate(77px,179px)}76.67%{transform:translate(0px,0px)}77.78%{transform:translate(15px,102px)}78.89%{transform:translate(31px,205px)}81.25%{transform:translate(61px,154px)}82.22%{transform:translate(77px,0px)}83.33%{transform:translate(92px,102px)}84.44%{transform:translate(108px,205px)}85.56%{transform:translate(123px,51px)}86.67%{transform:translate(138px,154px)}87.78%{transform:translate(154px,0px)}88.89%{transform:translate(87px,128px)}90%{transform:translate(20px,0px)}91.11%{transform:translate(-46px,128px)}92.22%{transform:translate(-113px,0px)}93.33%{transform:translate(-179px,128px)}94.44%{transform:translate(-246px,0px)}95.56%{transform:translate(-56px,128px)}96.67%{transform:translate(-123px,0px)}97.78%{transform:translate(-189px,128px)}98.89%{transform:translate(0px,0px)}100%{transform:translate(0px,0px)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
a{color:inherit}
.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 20px}

/* шапка — как на главной: строка 48 px — логотип, статус, город с часами, меню */
.top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1200px;height:48px;margin:0 auto;padding:0 20px}
.logo{font-size:20px;line-height:28px;text-decoration:none}
.status,.city{display:flex;align-items:center;gap:6px;font-size:14px;line-height:1.4}
.status .dot{margin-right:0}
.clock{opacity:.6}
.menu-btn{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;font:inherit;font-size:14px;line-height:1.4;letter-spacing:-0.03em;color:var(--ink);cursor:pointer}
/* иконка как на главной: квадрат 20×20 с обрезкой, три линии по 20 px со сдвигом — видно короткую, длинную и короткую */
.burger{position:relative;flex:none;width:20px;height:20px;overflow:hidden}
.burger span{position:absolute;width:20px;height:1px;background:var(--ink);transition:transform .4s var(--ease)}
.burger span:nth-child(1){left:-8px;top:6px}
.burger span:nth-child(2){left:0;top:10px}
.burger span:nth-child(3){left:8px;top:14px}
.menu-btn:hover .burger span:nth-child(1){transform:translateX(8px)}
.menu-btn:hover .burger span:nth-child(3){transform:translateX(-8px)}

/* меню — как на главной: затемнение с бегущей строкой и фото, панель справа */
.menu{position:fixed;inset:0;z-index:30;visibility:hidden;pointer-events:none;transition:visibility 0s .6s}
.menu.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.menu-back{position:absolute;inset:0;overflow:hidden;background:rgba(5,5,5,.7);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .4s ease;cursor:pointer}
.menu.open .menu-back{opacity:1}
.menu-run{position:absolute;top:50%;left:0;display:flex;width:max-content;white-space:nowrap;font-size:56px;line-height:1.2;color:#f5f5f5;transform:translateY(-50%);animation:menu-run var(--mr-dur,40s) linear infinite}
/* строка едет вправо, как на первом экране */
@keyframes menu-run{from{transform:translate(-50%,-50%)}to{transform:translate(0,-50%)}}
.menu-photo{position:absolute;top:50%;left:calc((100% - min(500px,100%)) / 2);width:170px;height:200px;object-fit:cover;transform:translate(-50%,-50%)}
.menu-panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(500px,100%);padding:0 24px 24px;background:var(--bg);transform:translateX(min(500px,100%));transition:transform .6s cubic-bezier(.4,0,.2,1)}
.menu.open .menu-panel{transform:none;transition:transform 1s cubic-bezier(.16,1.04,.3,1)}
/* «Закрыть» стоит ровно на месте кнопки «Меню» в шапке — по сетке сайта, а не у края панели */
.m-close{align-self:flex-end;display:flex;align-items:center;gap:10px;height:48px;margin-right:calc(max(20px,(100vw - 1160px) / 2) - 24px);padding:0;border:0;background:none;font:inherit;font-size:14px;line-height:1.4;letter-spacing:-0.03em;color:var(--ink);cursor:pointer}
.m-close i{position:relative;flex:none;width:20px;height:20px}
.m-close i::before,.m-close i::after{content:"";position:absolute;top:10px;left:2px;width:16px;height:1px;background:var(--ink);transform:rotate(45deg)}
.m-close i::after{transform:rotate(-45deg)}
.m-label{margin:0 0 8px;font-size:12px;line-height:1.4;color:var(--muted)}
.m-links{display:flex;flex-direction:column}
.m-links a{font-size:24px;line-height:1.6;text-decoration:none;transition:opacity .4s ease}
.m-links a:hover{opacity:.5}
.m-contacts{margin:0}
.m-mail{display:inline-block;margin-bottom:24px;font-size:20px;line-height:1.4;text-decoration:none}
.m-soc{display:flex;gap:12px}
.m-soc a{display:flex;width:22px;height:22px;transition:opacity .3s ease}
.m-soc a:hover{opacity:.55}
.m-soc svg{width:100%;height:100%;fill:var(--ink)}
.m-status{display:flex;align-items:center;gap:6px;margin:0;font-size:14px}
html.menu-lock,html.menu-lock body{overflow:hidden}

/* кнопки как на главной */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:100px;border:1px solid var(--stroke);background:transparent;font:inherit;font-size:15px;line-height:1.4;color:var(--ink);text-decoration:none;transition:background .3s ease,color .3s ease,border-color .3s ease}
.btn span{transition:transform .3s ease}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#f5f5f5}
.btn:hover span{transform:translateX(4px)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#f5f5f5}
.btn.dark:hover{background:transparent;color:var(--ink)}

/* зелёная точка «на связи», как у «Открыта к проектам» на главной */
.dot{position:relative;flex:none;width:8px;height:8px;margin-right:4px;border-radius:50%;background:#47c554}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#47c554;animation:dot-pulse 1.8s ease-out infinite}
@keyframes dot-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}

/* Размеры как на главной: заголовки разделов 56, крупные подписи 36, вводный текст 18, текст 16, мелкий 14 */
.back{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;font-size:14px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .3s ease}
.back span{transition:transform .3s ease}
.back:hover{color:var(--ink)}
.back:hover span{transform:translateX(-4px)}

.sec-head{display:flex;align-items:flex-start;gap:6px;margin-bottom:48px}




/* Страница услуги: слева карточка с ценой, сроком и кнопкой стоит на месте, справа листается содержание.
   Размеры как на главной: заголовки 56, крупные подписи 36, вводный текст 18, текст 16, мелкий 14 */
.svc-hero{padding-top:72px;padding-bottom:56px}
.svc-hero .back{margin-bottom:28px}
.svc-hero h1{margin:0;max-width:980px;font-size:56px;line-height:1.2;font-weight:500;letter-spacing:-0.03em}

.svc-split{display:grid;grid-template-columns:360px 1fr;gap:80px;align-items:start;padding-bottom:96px}
.svc-side{position:sticky;top:24px}
.svc-card{padding:28px;border:1px solid var(--line);background:rgba(255,255,255,.45)}
.svc-card dl>div:first-child{padding-top:0}
.svc-card .btn{width:100%;justify-content:center}
.svc-card dl{margin:0 0 24px}
.svc-card dl>div{padding:20px 0;border-bottom:1px solid var(--line)}
.svc-card dt{font-size:14px;line-height:1.4;color:var(--muted)}
.svc-card dd{margin:8px 0 0;font-size:36px;line-height:1.2;letter-spacing:-0.03em}
.svc-card dd small{display:block;margin-top:12px;font-size:14px;line-height:1.4;color:var(--muted)}

.svc-lead{max-width:640px;margin:0 0 72px;font-size:18px;line-height:1.4;color:var(--muted)}
.svc-sec{padding-top:40px;border-top:1px solid var(--line)}
.svc-sec+.svc-sec{margin-top:80px}
.svc-sec h2{margin:0 0 40px;font-size:56px;line-height:1.2;font-weight:500;letter-spacing:-0.03em}

.svc-incl{list-style:none;margin:0;padding:0}
.svc-incl li{display:grid;grid-template-columns:56px 1fr;padding:22px 0;border-bottom:1px solid var(--line);font-size:20px;line-height:1.4}
.svc-incl li span{font-size:14px;line-height:28px;color:var(--muted)}

/* этапы — вертикальная линия с точками */
.svc-steps{position:relative;list-style:none;margin:0;padding:0 0 0 32px}
.svc-steps::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--stroke)}
.svc-steps li{position:relative;padding:0 0 48px}
.svc-steps li:last-child{padding-bottom:0}
.svc-steps li::before{content:"";position:absolute;left:-32px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--ink)}
.svc-st-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.svc-steps .n{font-size:14px;line-height:1.4;color:var(--muted)}
.svc-steps .t{padding:4px 12px;border-radius:100px;border:1px solid var(--stroke);font-size:14px;line-height:1.4}
.svc-steps h3{margin:0 0 10px;font-size:36px;line-height:1.2;font-weight:500;letter-spacing:-0.03em}
.svc-steps p{margin:0;max-width:560px;font-size:16px;line-height:1.4;color:var(--muted)}

.svc-more{padding-top:80px;padding-bottom:80px;background:linear-gradient(var(--line),var(--line)) 20px 0/calc(100% - 40px) 1px no-repeat}
.svc-more h2{margin:0 0 48px;font-size:56px;line-height:1.2;font-weight:500;letter-spacing:-0.03em}
.svc-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.svc-more-grid a{position:relative;display:flex;flex-direction:column;min-height:240px;padding:28px;border:1px solid var(--line);text-decoration:none}
.svc-more-grid .n{font-size:14px;line-height:1.4;color:var(--muted)}
.svc-more-grid .name{margin-top:auto;font-size:36px;line-height:1.2;letter-spacing:-0.03em;transition:transform .5s cubic-bezier(.22,.9,.3,1)}
/* наведение — как на карточках работ: в углу плавно появляется кружок со стрелкой */
.svc-more-grid .go{position:absolute;top:20px;right:20px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--ink);opacity:0;transform:scale(.7);transition:opacity .45s ease,transform .45s cubic-bezier(.22,.9,.3,1)}
.svc-more-grid .go svg{width:20px;height:20px;transform:rotate(-45deg);fill:none;stroke:#f5f5f5;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc-more-grid .p{display:flex;justify-content:space-between;margin-top:16px;font-size:16px;line-height:1.4;color:var(--muted);transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.svc-more-grid .p i{font-style:normal;transition:opacity .3s ease}
.svc-more-grid a:hover .go,.svc-more-grid a:focus-visible .go{opacity:1;transform:none}
.svc-more-grid a:hover .name,.svc-more-grid a:focus-visible .name,.svc-more-grid a:hover .p,.svc-more-grid a:focus-visible .p{transform:translateX(10px)}
.svc-more-grid a:hover .p i{opacity:0}

@media (max-width:1199.98px){
  .svc-split{grid-template-columns:320px 1fr;gap:48px}
  .svc-hero h1,.svc-sec h2,.svc-more h2{font-size:48px}
  .svc-card dd,.svc-steps h3,.svc-more-grid .name{font-size:30px}
}
@media (max-width:809.98px){
  .svc-hero{padding-top:40px;padding-bottom:32px}
  .svc-hero h1,.svc-sec h2,.svc-more h2{font-size:40px}
  .svc-split{grid-template-columns:1fr;gap:40px;padding-bottom:64px}
  .svc-side{position:static}
  .svc-card{padding:22px}
  .svc-card dd{font-size:24px}
  .svc-lead{margin-bottom:48px;font-size:16px}
  .svc-sec h2{margin-bottom:32px}
  .svc-incl li{grid-template-columns:40px 1fr;font-size:17px;padding:18px 0}
  .svc-steps h3{font-size:24px}
  .svc-steps p{font-size:15px}
  .svc-more{padding-top:60px;padding-bottom:60px;background-position:16px 0;background-size:calc(100% - 32px) 1px}
  .svc-more h2{margin-bottom:32px}
  .svc-more-grid{grid-template-columns:1fr}
  .svc-more-grid a{min-height:180px;padding:22px}
  .svc-more-grid .name{font-size:24px}
}

/* призыв — как «Обсудим?» на главной */
.cta{padding-top:96px;padding-bottom:104px;background:linear-gradient(var(--line),var(--line)) 20px 0/calc(100% - 40px) 1px no-repeat;text-align:center}
.cta h2{margin:0;font-size:min(140px,11.5vw);line-height:1;font-weight:500;letter-spacing:-0.03em}
.cta p{max-width:520px;margin:24px auto 36px;font-size:16px;line-height:1.4;color:var(--muted)}

/* документы из подвала: политика и согласие — колонка по центру, шкала шрифтов как на сайте */
.doc.wrap{max-width:800px;padding-top:72px;padding-bottom:120px}
.doc h1{margin:0;font-size:56px;line-height:1.2;font-weight:500;letter-spacing:-0.03em;overflow-wrap:break-word}
.doc-body{margin-top:24px}
.doc-body .doc-date{margin:0 0 48px;font-size:14px;color:var(--muted)}
.doc-body h2{margin:48px 0 12px;font-size:24px;line-height:1.3;font-weight:500;letter-spacing:-0.03em}
.doc-body p,.doc-body li{margin:0 0 12px;font-size:16px;line-height:1.5;color:rgba(5,5,5,.72)}
.doc-body ul{margin:0 0 12px;padding-left:20px}
.doc-body a{text-decoration-color:rgba(5,5,5,.3);text-underline-offset:2px}
@media (max-width:1199.98px){.doc h1{font-size:48px}}
@media (max-width:809.98px){.doc.wrap{padding-top:40px;padding-bottom:80px}.doc h1{font-size:40px}.doc-body h2{margin-top:36px;font-size:20px}.doc-body p,.doc-body li{font-size:15px}}

/* подвал */
.foot{position:relative;z-index:1;width:min(1160px,100% - 40px);margin:0 auto;padding:24px 0 32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;border-top:1px solid var(--line);font-size:14px;line-height:1.4;color:var(--ink)}
.foot a{text-decoration:none;transition:opacity .3s ease}
.foot a:hover{opacity:.55}
/* телефон и ИНН, которые iOS сам превращает в ссылку, остаются обычным текстом */
a[x-apple-data-detectors]{color:inherit !important;text-decoration:none !important;font:inherit !important}

/* появление — шапка выезжает сверху, содержимое мягко проявляется и поднимается */
html.js .top{opacity:0;transform:translateY(-62px);animation:top-in 1s cubic-bezier(.3,1.25,.5,1) .7s forwards}
@keyframes top-in{to{opacity:1;transform:none}}
html.js .rv{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1;transform:none;filter:none}
body.leaving main,body.leaving .foot{opacity:0;transform:translateY(-12px);transition:opacity .35s ease,transform .35s ease}

@media (max-width:809.98px){
  .menu-run,.menu-photo{display:none}
  .menu-panel{padding:0 16px 24px}
  .m-close{margin-right:0}
  .menu-panel .m-div{margin-left:-16px;margin-right:-16px}
  .foot{align-items:center;text-align:center}
  .top{padding:0 16px}
  .logo{font-size:18px}
  .status,.city{display:none}
  .foot{flex-direction:column;width:calc(100% - 32px);padding:20px 0 28px}
  .foot a[href$="consent.html"]{order:1}
  .foot a[href$="privacy.html"]{order:2}
  .wrap{padding-left:16px;padding-right:16px}
  .cta{background-position:16px 0;background-size:calc(100% - 32px) 1px}
  .sec-head{margin-bottom:32px}
  .cta{padding-top:64px;padding-bottom:72px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html.js .top,html.js .rv{opacity:1;transform:none;filter:none}
}

/* плашка про cookie — тонкая строка внизу, согласие запоминается в браузере посетителя */
#cookie{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;justify-content:center;gap:20px;padding:10px 20px;background:#f5f5f5;border-top:1px solid var(--line);opacity:0;transform:translateY(100%);transition:opacity .4s ease,transform .5s var(--ease)}
#cookie.show{opacity:1;transform:none}
#cookie p{margin:0;font-size:13px;line-height:1.4;color:rgba(5,5,5,.6)}
#cookie p a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(5,5,5,.3)}
#cookie button{flex:none;padding:6px 16px;border:1px solid var(--stroke);border-radius:100px;background:transparent;color:var(--ink);font:500 13px/1.4 "Manrope",sans-serif;letter-spacing:-0.03em;cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease}
#cookie button:hover{background:var(--ink);border-color:var(--ink);color:#f5f5f5}
@media (max-width:809.98px){#cookie{padding:10px 14px;gap:12px;justify-content:space-between}#cookie p{font-size:12px}}

/* открытие меню: строка на фоне проявляется и уменьшается со 120 %, фото «приезжает» со 170 %,
   панель выезжает справа, пункты появляются по очереди, линии прорисовываются слева направо */
.menu.open .menu-run{animation:menu-run var(--mr-dur,40s) linear infinite,mr-in 1.5s cubic-bezier(.22,1.1,.36,1) both}
@keyframes mr-in{from{opacity:.001;scale:1.2}to{opacity:1;scale:1}}
.menu.open .menu-photo{animation:mp-in 1.5s cubic-bezier(.22,1.1,.36,1) both}
@keyframes mp-in{from{transform:translate(-50%,-50%) scale(1.7)}to{transform:translate(-50%,-50%) scale(1)}}
.menu-panel>.m-label,.m-links,.m-contacts,.m-status{opacity:.001;transform:translateX(14px);transition:opacity .3s ease,transform .3s ease}
.menu.open .menu-panel>.m-label,.menu.open .m-links{opacity:1;transform:none;transition:opacity .7s ease .5s,transform .7s cubic-bezier(.22,1.2,.36,1) .5s}
.menu.open .m-contacts{opacity:1;transform:none;transition:opacity .7s ease .6s,transform .7s cubic-bezier(.22,1.2,.36,1) .6s}
.menu.open .m-status{opacity:1;transform:none;transition:opacity .7s ease .7s,transform .7s cubic-bezier(.22,1.2,.36,1) .7s}
.m-div{position:relative;display:block;flex:none;height:1px;margin:auto 0;overflow:hidden}
.m-div::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3%;background:var(--line);transition:width .3s ease}
.menu.open .m-div::before{width:100%;transition:width 1s cubic-bezier(.85,-.02,.31,.96) .4s}
@media (prefers-reduced-motion:reduce){.menu.open .menu-photo,.menu.open .menu-run{animation:none}.menu-panel>.m-label,.m-links,.m-contacts,.m-status{opacity:1;transform:none}.m-div::before{width:100%}}

/* свой курсор: кружок, который следует за мышью; на карточках работ — подпись */
.cur{position:fixed;top:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0;border-radius:24px;background:#f5f5f5;mix-blend-mode:exclusion;pointer-events:none;opacity:0;transition:opacity .2s ease,height .3s cubic-bezier(.22,.9,.3,1),padding .3s cubic-bezier(.22,.9,.3,1);will-change:transform}
.cur.on{opacity:1}
.cur span{max-width:0;overflow:hidden;white-space:nowrap;font-size:12px;line-height:16.8px;font-weight:600;color:var(--ink);opacity:0;transition:max-width .3s cubic-bezier(.22,.9,.3,1),opacity .2s ease}
.cur.label{height:29px;padding:6px 12px}
.cur.label span{max-width:200px;opacity:1}

/* зерно на сплошных плоскостях (шапка главной, панель меню): лежит под их содержимым */
.menu-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain) 0 0/256px 256px repeat;opacity:.04;pointer-events:none;animation:grain-bg 8s steps(1) infinite}
@keyframes grain-bg{0%{background-position:-26px -51px}1.11%{background-position:-51px -102px}2.22%{background-position:-77px -154px}3.33%{background-position:-102px -205px}4.44%{background-position:-128px 0px}5.56%{background-position:-154px -51px}6.67%{background-position:-179px -102px}7.78%{background-position:-205px -154px}10%{background-position:0px 0px}11.11%{background-position:-51px -179px}12.22%{background-position:-102px -102px}13.33%{background-position:-154px -26px}14.44%{background-position:-205px -205px}15.56%{background-position:0px -128px}16.67%{background-position:-51px -51px}17.78%{background-position:-102px 26px}20%{background-position:-205px 179px}21.11%{background-position:0px 0px}22.22%{background-position:-143px 102px}23.33%{background-position:-31px -51px}24.44%{background-position:-174px -205px}25.56%{background-position:-61px -102px}26.67%{background-position:-205px 0px}27.78%{background-position:-92px -154px}30%{background-position:133px -205px}31.11%{background-position:246px -102px}32.22%{background-position:102px 0px}33.33%{background-position:41px 0px}34.44%{background-position:236px 0px}35.56%{background-position:174px 0px}36.67%{background-position:113px 0px}37.78%{background-position:51px 0px}40%{background-position:-72px 0px}41.11%{background-position:-133px 0px}42.22%{background-position:-195px 0px}43.33%{background-position:0px 0px}44.44%{background-position:-51px 179px}45.56%{background-position:-102px 102px}46.67%{background-position:-154px 26px}47.78%{background-position:-205px 205px}50%{background-position:-51px 51px}51.11%{background-position:-102px 230px}52.22%{background-position:-154px 154px}53.33%{background-position:-205px 77px}54.44%{background-position:0px 0px}55.56%{background-position:-102px 205px}56.67%{background-position:-205px 154px}57.78%{background-position:-51px 102px}60%{background-position:0px 0px}61.11%{background-position:154px 205px}62.22%{background-position:51px 154px}63.33%{background-position:205px 102px}64.44%{background-position:102px 51px}65.56%{background-position:0px 0px}66.67%{background-position:179px 77px}67.78%{background-position:102px 154px}70%{background-position:205px 51px}71.11%{background-position:128px 128px}72.22%{background-position:51px 205px}73.33%{background-position:230px 26px}74.44%{background-position:154px 102px}75.56%{background-position:77px 179px}76.67%{background-position:0px 0px}77.78%{background-position:15px 102px}78.89%{background-position:31px 205px}81.25%{background-position:61px 154px}82.22%{background-position:77px 0px}83.33%{background-position:92px 102px}84.44%{background-position:108px 205px}85.56%{background-position:123px 51px}86.67%{background-position:138px 154px}87.78%{background-position:154px 0px}88.89%{background-position:87px 128px}90%{background-position:20px 0px}91.11%{background-position:-46px 128px}92.22%{background-position:-113px 0px}93.33%{background-position:-179px 128px}94.44%{background-position:-246px 0px}95.56%{background-position:-56px 128px}96.67%{background-position:-123px 0px}97.78%{background-position:-189px 128px}98.89%{background-position:0px 0px}100%{background-position:0px 0px}}
@media (prefers-reduced-motion:reduce){.menu-panel::before{animation:none}}
/* закрытое меню не крутит зерно и бегущую строку — не нагружает прокрутку */
.menu:not(.open) .menu-panel::before,.menu:not(.open) .menu-run{animation-play-state:paused}