:root{
  --white:#ffffff;
  --stone:#f7f5f2;
  --gray-bg:#f1ede8;
  --dark:#0b0b0c;
  --dark-2:#131314;
  --ink:#1d1d1f;
  --ink-secondary:#86868b;
  --line:#d2d2d7;
  --blue:#c8102e;
  --blue-hover:#a30d27;
  --ease:cubic-bezier(.28,.11,.32,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased;
  font-size:17px; line-height:1.47059; letter-spacing:-0.022em;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:44px;
  background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.05);transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);}
.nav.scrolled{background:rgba(255,255,255,.92);border-bottom-color:rgba(0,0,0,.12);box-shadow:0 8px 24px -16px rgba(0,0,0,.28);}
.nav-inner{max-width:1100px;margin:0 auto;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;}
.nav-logo{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);}
.brand-mark{width:37px;height:22px;flex-shrink:0;object-fit:contain;}
.nav-links{display:flex;gap:28px;}
.nav-links a{font-size:12px;font-weight:400;color:var(--ink);opacity:.85;transition:opacity .25s;}
.nav-links a:hover{opacity:1;}
.nav-right{display:flex;align-items:center;gap:16px;}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;width:22px;}
.nav-toggle span{height:1.5px;background:var(--ink);width:100%;}

.price-btn{position:relative;width:32px;height:32px;border-radius:50%;background:var(--blue);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;
  transition:transform .3s var(--ease),background .3s;}
.price-btn:hover{background:var(--blue-hover);transform:scale(1.12);}
.price-btn svg{width:15px;height:15px;position:relative;z-index:2;opacity:1;pointer-events:none;display:block;}
.price-btn-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--blue);
  animation:pulseRing 2.2s ease-out infinite;}
@keyframes pulseRing{
  0%{transform:scale(1);opacity:.5;}
  70%{transform:scale(1.22);opacity:0;}
  100%{transform:scale(1.22);opacity:0;}
}
.price-tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--ink);color:#fff;font-size:11.5px;font-weight:500;padding:6px 11px;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);}
.price-btn:hover .price-tip{opacity:1;transform:translateY(-50%) translateX(0);}

.mobile-menu{position:fixed;inset:0;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
  z-index:1200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transform:translateY(-100%);transition:transform .5s var(--ease);}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a{font-size:24px;font-weight:500;letter-spacing:-0.02em;}
.mobile-close{position:absolute;top:16px;right:22px;font-size:30px;background:none;border:0;cursor:pointer;color:var(--ink);}

/* ---------- shared ---------- */
.eyebrow{font-size:19px;font-weight:600;color:var(--ink-secondary);margin-bottom:8px;}
.section-head{max-width:1024px;margin:0 auto;padding:0 22px;}
.section-head.center{text-align:center;}
.section-head h2{font-size:clamp(32px,4.5vw,56px);font-weight:600;letter-spacing:-0.015em;}
.section-head .sub{font-size:19px;color:var(--ink-secondary);max-width:560px;margin:14px auto 0;}
.section-head.center .sub{margin-left:auto;margin-right:auto;}
.pill{display:inline-flex;align-items:center;padding:12px 22px;border-radius:980px;font-size:17px;font-weight:400;transition:background .3s,transform .3s;}
.pill-light{background:var(--white);color:var(--ink);}
.pill-light:hover{background:#f0f0f2;}
.text-link{display:inline-flex;align-items:center;gap:4px;color:var(--blue);font-size:17px;margin-right:26px;transition:color .2s;}
.text-link:hover{color:var(--blue-hover);}
.text-link span{transition:transform .25s;}
.text-link:hover span{transform:translateX(3px);}
.text-link-dark{color:#fff;}
.text-link-dark:hover{color:#e8e8ed;}

.reveal{opacity:0;filter:blur(8px);transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);}
.reveal.in{opacity:1;filter:blur(0);transform:translateY(0);}
.reveal-scale{opacity:0;transform:scale(.92);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);}
.reveal-scale.in{opacity:1;transform:scale(1);filter:blur(0);}
.reveal-left{opacity:0;transform:translateX(-56px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);}
.reveal-left.in{opacity:1;transform:translateX(0);filter:blur(0);}
.reveal-right{opacity:0;transform:translateX(56px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);}
.reveal-right.in{opacity:1;transform:translateX(0);filter:blur(0);}

/* headings: reveal word-by-word as they scroll into view */
/* запас вокруг слова (padding компенсирован margin-ом): маска появления больше не режет края букв и анимации внутри слов */
.split-title .line{display:inline-block;overflow:hidden;vertical-align:top;padding:.2em .3em .26em;margin:-.2em -.3em -.26em;}
.split-title .word{display:inline-block;transform:translateY(135%);opacity:0;
  transition:transform .45s var(--ease),opacity .4s var(--ease);}
.split-title.in .word{transform:translateY(0);opacity:1;}

/* playful detail: the о in "продукция" becomes a little pig snout once the heading is read */
.snout-o{position:relative;display:inline-block;width:.64em;height:.64em;box-sizing:border-box;
  border:.1em solid currentColor;border-radius:50%;vertical-align:-.045em;margin:0;
  transition:border-color .3s .12s;}
@keyframes snoutStretch{
  0%{width:.64em;margin:0;}
  50%{width:1.5em;margin:0 .16em;}
  100%{width:.7em;margin:0 .03em;}
}
.split-title.fx .snout-o{animation:snoutStretch .8s var(--ease) .12s forwards;border-color:var(--blue);}
.snout-o i{position:absolute;top:50%;width:.1em;height:.1em;margin-top:-.05em;border-radius:50%;
  background:currentColor;opacity:0;transform:scale(0);
  transition:transform .35s var(--ease) .5s,opacity .25s .5s,background .25s .5s;}
.snout-o i:first-child{left:23%;}
.snout-o i:last-child{right:23%;}
.split-title.fx .snout-o i{opacity:1;transform:scale(1);background:var(--blue);}

/* images: slide in from the side with a soft scale + blur */
.img-reveal-left,.img-reveal-right{opacity:0;filter:blur(10px);transform:scale(.94);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease);}
.img-reveal-left{transform:translateX(-70px) scale(.94);}
.img-reveal-right{transform:translateX(70px) scale(.94);}
.img-reveal-left.in,.img-reveal-right.in{opacity:1;filter:blur(0);transform:translateX(0) scale(1);}

/* thin progress bar that fills as the page is scrolled */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--blue);
  z-index:1100;transition:width .12s linear;}

/* nav links: underline draws in on hover */
.nav-links a{position:relative;}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--ink);
  transition:right .3s var(--ease);}
.nav-links a:hover::after{right:0;}

/* ---------- hero ---------- */
.hero{position:relative;background:linear-gradient(180deg,var(--dark-2) 0%,var(--dark) 55%);color:#fff;padding-top:128px;text-align:center;overflow:hidden;border-radius:0 0 40px 40px;}
.hero-text{position:relative;z-index:1;}
.hero-image{position:relative;z-index:1;}
.hero-text h1{font-size:clamp(56px,11vw,128px);font-weight:700;letter-spacing:-0.04em;line-height:1;}
.hero-text h1 .line{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .06em;margin:0 -.08em -.06em;}
.hero-text h1 .word{display:inline-block;transform:translateY(110%);opacity:0;animation:wordUp 1s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes wordUp{to{transform:translateY(0);opacity:1;}}
.hero-text p{font-size:clamp(19px,2.4vw,28px);line-height:1.25;color:#f5f5f7;max-width:640px;margin:20px auto 0;font-weight:500;letter-spacing:-0.02em;
  opacity:0;filter:blur(6px);transform:translateY(14px);animation:fadeUp .9s var(--ease) forwards;animation-delay:.7s;}
.hero-links{margin-top:26px;display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap;padding-bottom:44px;
  opacity:0;filter:blur(6px);transform:translateY(14px);animation:fadeUp .9s var(--ease) forwards;animation-delay:.95s;}
@keyframes fadeUp{to{opacity:1;filter:blur(0);transform:translateY(0);}}
.hero-image{width:100%;height:62vh;overflow:hidden;clip-path:inset(0 0 100% 0);animation:wipeUp 1.1s var(--ease) forwards;animation-delay:.5s;}
@keyframes wipeUp{to{clip-path:inset(0 0 0% 0);}}
.hero-image img{width:100%;height:100%;object-fit:cover;transform:scale(1.2);will-change:transform;}

/* ---------- about (sticky) ---------- */
.about{position:relative;overflow:hidden;padding:140px max(22px,calc(50% - 490px));display:grid;grid-template-columns:1fr 1fr;gap:80px;}
.about-col h2{font-size:clamp(30px,4vw,44px);font-weight:600;letter-spacing:-0.015em;margin-bottom:26px;}
.body-lg{font-size:19px;color:var(--ink-secondary);margin-bottom:18px;max-width:440px;}
.sticky-col{position:relative;}
.sticky-card{position:sticky;top:110px;border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:var(--gray-bg);}
.sticky-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.sticky-card:hover img{transform:scale(1.05);}

/* ---------- cuts diagram ---------- */
.cuts{background:var(--stone);padding:120px 0;border-radius:40px;}
.cut-grid{max-width:1024px;margin:50px auto 0;padding:0 22px;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cut-card{background:#fff;border-radius:24px;overflow:hidden;aspect-ratio:4/3;transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.cut-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,0,0,.2);}
.cut-card img{width:100%;height:100%;object-fit:cover;object-position:center;background:#fff;transition:transform .6s var(--ease);}
.cut-card:hover img{transform:scale(1.04);}

/* ---------- products ---------- */
.products{padding:120px max(22px,calc(50% - 528px));}
.segmented{position:relative;display:flex;background:var(--gray-bg);border-radius:12px;padding:4px;width:fit-content;margin:44px auto 50px;gap:2px;}
.segmented-thumb{position:absolute;top:4px;left:4px;height:calc(100% - 8px);background:#fff;border-radius:9px;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .35s var(--ease),width .35s var(--ease);}
.seg-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:9px 20px;font-size:14px;font-weight:500;color:var(--ink);opacity:.6;cursor:pointer;transition:opacity .3s;}
.seg-btn.active{opacity:1;}
.seg-icon{width:16px;height:16px;flex-shrink:0;}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;}
.pcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  opacity:0;transform:translateY(12px);transition:opacity .3s var(--ease),transform .3s var(--ease),box-shadow .3s,border-color .3s;}
.pcard.in{opacity:1;transform:translateY(0);}
@media(hover:hover){
  .pcard.in:hover{transform:translateY(-8px);border-color:#c7c7cc;box-shadow:0 28px 48px -26px rgba(0,0,0,.3);transition-duration:.45s,.45s,.45s,.45s;}
}
.pcard:hover{border-color:#bcbcc0;box-shadow:0 20px 40px -28px rgba(0,0,0,.25);}
.pcard .imgwrap{aspect-ratio:1/1;background:var(--gray-bg);display:flex;align-items:center;justify-content:center;padding:20px;}
.pcard .imgwrap img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease);}
.pcard:hover .imgwrap img{transform:scale(1.06);}
.pcard-body{padding:16px 20px 22px;}
.pcard-body h4{font-size:16px;font-weight:600;letter-spacing:-0.01em;margin-bottom:6px;}
.pcard-body p{font-size:13px;color:var(--ink-secondary);line-height:1.4;min-height:36px;}
.pcard-body .std{display:block;margin-top:10px;font-size:11px;color:#a1a1a6;}

/* ---------- documents ---------- */
.documents{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--dark-2) 0%,var(--dark) 60%);color:#fff;padding:120px 0;border-radius:40px;}
.documents .section-head{margin-bottom:44px;}
.documents .eyebrow{color:#a1a1a6;}
.doc-wall{max-width:1024px;margin:0 auto;padding:0 22px;display:flex;gap:20px;align-items:flex-start;}
.doc-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px;}
.doc-col:nth-child(even){margin-top:46px;}
.doc-card{position:relative;display:flex;flex-direction:column;background:#141414;border:1px solid #262626;
  border-radius:20px;overflow:hidden;
  opacity:0;transform:translateY(24px) scale(.96) rotate(var(--r,0deg));
  transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .35s,box-shadow .35s;}
.doc-card.in{opacity:1;transform:translateY(0) scale(1) rotate(var(--r,0deg));}
.doc-card:hover{border-color:#3f3f42;box-shadow:0 26px 50px -30px rgba(0,0,0,.65);transform:translateY(-6px) scale(1) rotate(0deg);}
.doc-card .thumb{position:relative;min-height:170px;background:#232323;padding:14px;}
.doc-card .thumb img{display:block;width:100%;height:auto;background:#fff;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .5s var(--ease);}
.doc-card:hover .thumb img{transform:scale(1.035);}
.doc-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:7px;}
.doc-name{display:flex;align-items:center;gap:9px;padding:12px 16px;font-size:13px;color:#e7e7e9;font-weight:500;flex-shrink:0;}
.doc-name i{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0;}
@media(max-width:700px){
  .doc-wall{gap:12px;padding:0 14px;}
  .doc-col{gap:12px;}
  .doc-col:nth-child(even){margin-top:30px;}
  .doc-card{border-radius:16px;}
  .doc-card .thumb{padding:10px;min-height:120px;}
  .doc-name{padding:10px 12px;font-size:12px;}
}

/* ---------- contacts ---------- */
.contacts{padding:120px max(22px,calc(50% - 490px));}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px;}
.contact-card{position:relative;background:var(--gray-bg);border-radius:22px;padding:36px 32px;overflow:hidden;
  transition:background .3s,transform .3s;}
.contact-card::before{content:'';position:absolute;top:0;left:32px;right:32px;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.contact-card:hover::before{transform:scaleX(1);}
.contact-card:hover{background:#eeeef0;transform:translateY(-4px);}
.contact-icon{width:44px;height:44px;border-radius:13px;background:rgba(200,16,46,.1);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.contact-icon svg{width:20px;height:20px;}
.contact-card h3{font-size:20px;font-weight:600;margin-bottom:10px;}
.contact-card p{font-size:14px;color:var(--ink-secondary);margin-bottom:18px;line-height:1.5;}
.contact-card .text-link{display:flex;font-size:14px;margin:0 0 8px;}
.contact-card p.contact-phone-num{font-size:14px;color:var(--ink-secondary);margin:0 0 2px!important;line-height:1.25!important;}
.contact-card .contact-phone-group{margin-bottom:16px!important;}
.contact-card .contact-phone-group .text-link{margin:0!important;min-height:unset!important;height:auto!important;line-height:1.25!important;}
.contact-card .contact-emails{margin-top:22px!important;}
.contact-card .contact-emails .text-link{margin:0 0 8px!important;}

/* ---------- footer ---------- */
.footer{position:relative;overflow:hidden;background:var(--gray-bg);padding:60px 0 26px;border-top:1px solid var(--line);border-radius:40px 40px 0 0;}
.footer-top{max-width:1024px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-bottom:26px;}
.footer-col h4{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:12px;}
.footer-col a{display:block;font-size:12px;color:var(--ink-secondary);margin-bottom:9px;}
.footer-col a:hover{text-decoration:underline;}
.footer-bottom{max-width:1024px;margin:20px auto 0;padding:16px 22px 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;font-size:12px;color:var(--ink-secondary);flex-wrap:wrap;gap:8px;}

@media(max-width:820px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .about{grid-template-columns:1fr;gap:40px;}
  .sticky-card{position:relative;top:0;}
  .cut-grid{grid-template-columns:1fr;}
  .contact-grid,.footer-top{grid-template-columns:1fr;}
  .section-head h2{font-size:34px;}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important;}}

/* editable-text helpers + admin link */
.ct{font-style:normal;}
.footer-col h4 a.footer-admin{display:inline;margin:0;font-size:12px;font-weight:600;color:var(--ink);}
.footer-col h4 a.footer-admin:hover{text-decoration:underline;}


/* =====================================================================
   Background line-art (decor/*.png) — quiet, grows from a point on scroll
   ===================================================================== */
@property --r{syntax:'<percentage>';inherits:false;initial-value:-16%;}
.about,.cuts,.products,.documents,.contacts{position:relative;isolation:isolate;}
.deco{position:absolute;z-index:-1;pointer-events:none;background:center/contain no-repeat;opacity:0;
  --r:-16%;--o:.16;--ox:50%;--oy:50%;
  -webkit-mask-image:radial-gradient(circle farthest-corner at var(--ox) var(--oy),#000 var(--r),transparent calc(var(--r) + 16%));
          mask-image:radial-gradient(circle farthest-corner at var(--ox) var(--oy),#000 var(--r),transparent calc(var(--r) + 16%));
  transition:--r 3.2s cubic-bezier(.3,.55,.35,1),opacity .6s ease;}
.deco.in{--r:100%;opacity:var(--o);}
/* white section: light grey line · grey section: a touch darker */
.deco-head{background-image:url(decor/cow-head.png);aspect-ratio:.989;width:190px;top:34px;right:max(14px,4%);--o:.06;--ox:56%;--oy:35%;}
.deco-graze{background-image:url(decor/cow-graze.png?v=3);aspect-ratio:2.828;width:min(300px,62%);right:4%;bottom:8px;--o:.17;--ox:84%;--oy:77%;}
/* one-line drawing */
.deco-pig{background-image:url(decor/pig.png);aspect-ratio:1.157;width:165px;top:112px;left:max(22px,calc(50% - 528px));--o:.17;--ox:20%;--oy:60%;}
@media(max-width:1100px){.deco-pig{width:140px;}}
@media(max-width:820px){
  .deco-pig{width:100px;top:12px;}
  .deco-head{width:120px;top:18px;}
  .deco-graze{width:min(240px,62%);}
}

/* extra playful letters in headings (see WORD_DETAIL in script.js) */
/* «части» — a knife line falls between the letters and the word is cut into two pieces for a moment */
.cw{display:inline-block;}
.cw-l,.cw-r{display:inline-block;}
.cw-k{display:inline-block;position:relative;width:0;height:1em;}
.cw-k::before{content:'';position:absolute;left:-.035em;top:-.1em;width:.07em;height:1.2em;background:var(--blue);border-radius:.05em;
  transform:rotate(12deg);opacity:0;clip-path:inset(0 0 100% 0);}
.split-title.fx .cw-k::before{animation:cwKnife .9s ease .35s both;}
.split-title.fx .cw-l{animation:cwL 1s var(--ease) .5s both;transform-origin:100% 100%;}
.split-title.fx .cw-r{animation:cwR 1s var(--ease) .5s both;transform-origin:0 100%;}
@keyframes cwKnife{0%{opacity:1;clip-path:inset(0 0 100% 0);}40%{opacity:1;clip-path:inset(0 0 0 0);}75%{opacity:1;clip-path:inset(0 0 0 0);}100%{opacity:0;clip-path:inset(0 0 0 0);}}
@keyframes cwL{0%{transform:none;}30%{transform:translate(-.09em,.01em) rotate(-3deg);}100%{transform:none;}}
@keyframes cwR{0%{transform:none;}30%{transform:translate(.09em,.01em) rotate(3deg);}100%{transform:none;}}
.cert-l{display:inline-block;}
.split-title.fx .cert-l{animation:certWave .9s var(--ease) calc(.5s + var(--i) * .08s) both;}
@keyframes certWave{0%{transform:none;color:inherit;}40%{transform:scale(1.12) rotate(-3deg);color:var(--blue);}100%{transform:none;color:inherit;}}
/* «контакты» — the а flips into @ and back */
.at-a{position:relative;display:inline-block;}
.at-a b{display:inline-block;font-weight:inherit;}
.at-a i{position:absolute;left:50%;top:54%;font-style:normal;font-size:.78em;color:var(--blue);opacity:0;transform:translate(-50%,-50%) rotateX(90deg);}
.split-title.fx .at-a b{animation:atOut 2.2s var(--ease) .45s both;}
.split-title.fx .at-a i{animation:atIn 2.2s var(--ease) .45s both;}
@keyframes atOut{0%{transform:none;opacity:1;}16%,74%{transform:rotateX(90deg);opacity:0;}92%,100%{transform:none;opacity:1;}}
@keyframes atIn{0%{transform:translate(-50%,-50%) rotateX(90deg);opacity:0;}16%,74%{transform:translate(-50%,-50%) rotateX(0);opacity:1;}92%,100%{transform:translate(-50%,-50%) rotateX(-90deg);opacity:0;}}


/* =====================================================================
   MOBILE / TABLET ADAPTATION
   Only rules inside media queries below — the desktop look is untouched.
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}

@media(max-width:820px){
  html{scroll-padding-top:56px;overflow-x:clip;}
  body{overflow-x:clip;font-size:16px;}

  /* --- nav: bigger touch targets, safe areas --- */
  .nav,.nav-inner{height:52px;}
  .nav-inner{padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));}
  .nav-logo{font-size:15px;gap:8px;}
  .brand-mark{width:40px;height:24px;}
  .nav-right{gap:8px;}
  .price-btn{width:38px;height:38px;}
  .price-btn svg{width:17px;height:17px;}
  .price-btn-ring{inset:-5px;}
  .price-tip{display:none;}
  .nav-toggle{width:44px;height:44px;align-items:center;justify-content:center;gap:6px;margin-right:-10px;}
  .nav-toggle span{width:22px;}

  /* --- full-screen menu --- */
  .mobile-menu{gap:8px;padding:0 24px;background:rgba(255,255,255,.985);}
  .mobile-menu a{font-size:28px;font-weight:600;padding:12px 24px;letter-spacing:-0.025em;text-align:center;line-height:1.2;}
  .mobile-menu a:last-of-type{margin-top:14px;font-size:17px;font-weight:500;color:#fff;background:var(--blue);border-radius:980px;padding:14px 32px;}
  .mobile-close{top:6px;right:8px;width:48px;height:48px;font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center;}
  html.menu-open,html.menu-open body{overflow:hidden;}

  /* --- shared --- */
  .eyebrow{font-size:15px;margin-bottom:6px;}
  .section-head{padding:0 20px;}
  .section-head h2{font-size:clamp(30px,8.6vw,38px);line-height:1.08;}
  .section-head .sub{font-size:16px;margin-top:12px;}
  .text-link{font-size:16px;}

  /* lighter reveals: no blur (heavy on phones), shorter travel, no horizontal overflow */
  .reveal,.reveal.in,.reveal-scale,.reveal-scale.in,.reveal-left,.reveal-left.in,.reveal-right,.reveal-right.in,
  .img-reveal-left,.img-reveal-left.in,.img-reveal-right,.img-reveal-right.in{filter:none;}
  .reveal{transform:translateY(20px);transition-duration:.7s;}
  .reveal-left,.reveal-right{transform:translateY(22px);transition-duration:.7s;}
  .reveal-left.in,.reveal-right.in{transform:translateY(0);}
  .img-reveal-left,.img-reveal-right{transform:translateY(26px) scale(.965);transition-duration:.9s;}
  .img-reveal-left.in,.img-reveal-right.in{transform:translateY(0) scale(1);}
  .hero-text p,.hero-links{filter:none;}

  /* --- hero: photo fills the screen, text sits on a dark gradient --- */
  .hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
    padding:92px 22px calc(36px + env(safe-area-inset-bottom));border-radius:0 0 30px 30px;}
  .hero-image{position:absolute;inset:0;z-index:0;height:100%;width:100%;}
  .hero-image::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(11,11,12,.78) 0%,rgba(11,11,12,.18) 30%,rgba(11,11,12,.32) 52%,rgba(11,11,12,.9) 88%,#0b0b0c 100%);}
  .hero-image img{object-position:50% 40%;}
  .hero-text{width:100%;}
  .hero-text h1{font-size:clamp(54px,17vw,84px);line-height:.98;text-shadow:0 2px 30px rgba(0,0,0,.35);}
  .hero-text p{font-size:clamp(17px,4.9vw,21px);line-height:1.3;margin-top:16px;max-width:400px;}
  .hero-links{flex-direction:column;gap:6px;margin-top:26px;padding-bottom:0;}
  .hero-links .pill{width:100%;max-width:340px;justify-content:center;padding:16px 28px;font-size:17px;font-weight:500;}
  .hero-links .text-link{margin:0;padding:12px 8px;min-height:44px;}

  /* --- about --- */
  .about{grid-template-columns:1fr;gap:34px;padding:76px 20px 84px;}
  .about-col h2{font-size:clamp(28px,8vw,34px);line-height:1.1;margin-bottom:20px;}
  .body-lg{font-size:17px;line-height:1.5;margin-bottom:16px;max-width:none;}
  .sticky-card{border-radius:24px;aspect-ratio:4/4.4;}
  .sticky-card:hover img{transform:none;}

  /* --- cuts --- */
  .cuts{padding:76px 0 84px;border-radius:30px;}
  .cut-grid{grid-template-columns:1fr;gap:16px;margin-top:34px;padding:0 16px;}
  .cut-card{border-radius:20px;}
  .cut-card img{object-fit:contain;}

  /* --- products --- */
  .products{padding:76px 16px 120px;}
  .segmented{width:100%;margin:30px 0 26px;padding:4px;border-radius:14px;}
  .segmented-thumb{border-radius:11px;}
  .seg-btn{flex:1;justify-content:center;padding:12px 4px;font-size:13.5px;gap:6px;min-height:44px;white-space:nowrap;}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .pcard{border-radius:18px;}
  .pcard .imgwrap{padding:12px;}
  .pcard-body{padding:12px 14px 16px;}
  .pcard-body h4{font-size:14.5px;line-height:1.25;margin-bottom:5px;}
  .pcard-body p{font-size:12.5px;line-height:1.38;min-height:0;}
  .pcard-body .std{font-size:11px;margin-top:8px;}

  /* --- documents --- */
  .documents{padding:76px 0 84px;border-radius:30px;}
  .documents .section-head{margin-bottom:32px;}

  /* --- contacts --- */
  .contacts{padding:76px 16px 84px;}
  .contact-grid{grid-template-columns:1fr;gap:14px;margin-top:34px;}
  .contact-card{padding:26px 24px 22px;border-radius:22px;}
  .contact-card::before{left:24px;right:24px;}
  .contact-icon{width:46px;height:46px;margin-bottom:16px;}
  .contact-card h3{font-size:21px;}
  .contact-card p{font-size:15px;margin-bottom:12px;}
  .contact-card .text-link{font-size:16px;min-height:44px;margin:0;align-items:center;}
  .contact-card p.contact-phone-num{font-size:15px;margin:0 0 2px!important;line-height:1.25!important;}
  .contact-card .contact-phone-group{margin-bottom:16px!important;}
  .contact-card .contact-phone-group .text-link{min-height:unset!important;height:auto!important;padding:0!important;font-size:15px;margin:0!important;line-height:1.25!important;}
  .contact-card .contact-emails{margin-top:22px!important;}
  .contact-card .contact-emails .text-link{min-height:36px;}
  .contact-card:hover{transform:none;}

  /* --- footer --- */
  .footer{padding:44px 0 calc(22px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;}
  .footer-top{grid-template-columns:1fr 1fr;gap:26px 18px;padding:0 22px 20px;}
  .footer-col:nth-child(2){grid-column:1 / -1;order:3;}
  .footer-col:nth-child(4){grid-column:1 / -1;order:4;margin-top:-6px;}
  .footer-col h4,.footer-col h4 a.footer-admin{font-size:13px;}
  .footer-col a{font-size:14px;padding:5px 0;margin-bottom:2px;}
  .footer-col h4 a.footer-admin{padding:6px 0;}
  .footer-bottom{flex-direction:column;gap:6px;padding:16px 22px 0;font-size:12px;}

  /* sticky-hover on touch screens */
  @media(hover:none){
    .cut-card:hover,.doc-card:hover{box-shadow:none;}
    .cut-card:hover{transform:none;}
    .cut-card:hover img,.doc-card:hover .thumb img,.pcard:hover .imgwrap img{transform:none;}
    .pcard:hover{border-color:var(--line);box-shadow:none;}
    .doc-card:hover{border-color:#262626;transform:translateY(0) scale(1) rotate(var(--r,0deg));}
    .doc-card.in:active,.pcard.in:active{transform:scale(.975);}
  }
}

/* tablets: two scheme cards side by side, 3-column products */
@media(min-width:561px) and (max-width:820px){
  .cut-grid{grid-template-columns:1fr 1fr;}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .about{grid-template-columns:1fr 1fr;gap:36px;}
  .hero{min-height:82svh;}
  .contact-grid{grid-template-columns:1fr 1fr;}
  .contact-grid .contact-card:last-child{grid-column:1 / -1;}
  .section-head h2{font-size:42px;}
}

/* narrow phones */
@media(max-width:560px){
  .seg-icon{display:none;}
  .seg-btn{padding:10px 4px;font-size:12.5px;gap:0;}
}
@media(max-width:400px){
  .seg-btn{font-size:11.5px;padding:9px 2px;letter-spacing:-0.02em;}
}
@media(max-width:350px){
  .seg-btn{font-size:10.5px;letter-spacing:-0.03em;}
}
@media(max-width:360px){
  .nav-logo{font-size:14px;}
  .product-grid{gap:10px;}
  .pcard-body h4{font-size:13.5px;}
}

/* landscape phones: don't force a full-height hero */
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){
  .hero{min-height:0;padding-top:76px;}
  .hero-image{position:relative;height:56vh;order:2;margin:24px -22px -36px;width:calc(100% + 44px);}
  .hero-image::after{background:linear-gradient(180deg,#0b0b0c 0%,transparent 40%);}
  .hero-text{order:1;}
}


/* =====================================================================
   MOBILE FIXES (round 2) — only phones / small tablets, desktop untouched
   ===================================================================== */
@media(max-width:820px){

  /* price button: the pulsing ring now stays inside the header bar */
  .price-btn-ring{inset:0;animation-name:pulseRingM;}
  @keyframes pulseRingM{
    0%{transform:scale(1);opacity:.65;}
    70%{transform:scale(1.28);opacity:0;}
    100%{transform:scale(1.28);opacity:0;}
  }

  /* hero: separate phone photo is picked in index.html via <picture>; keep it filling the screen */
  .hero-image picture{display:block;width:100%;height:100%;}

  /* «части» used to sit lower than its neighbours (the invisible knife box pushed the line down) */
  .cw-k{height:0;}
  .cw-k::before{top:-.88em;height:1.07em;}

  /* diagrams: no white strips — the card takes the height of the picture itself
     (if a part of the photo was chosen in the admin panel, it is cropped to 4:3 instead) */
  .cut-grid{align-items:start;}
  .cut-card{aspect-ratio:auto;}
  .cut-card img{width:100%;height:auto;aspect-ratio:auto 4/3;object-fit:cover;}
  .cut-card.has-pos{aspect-ratio:4/3;}
  .cut-card.has-pos img{height:100%;}

  /* background cow head: a little to the right */
  .deco-head{right:2px;}

  /* grazing cow: the ground line is drawn to the left too, as one picture with the cow
     (the extra pieces are cut from the cow picture itself, so thickness and colour match exactly) */
  .deco-graze{
    --gw:min(240px,62vw);
    --s:calc(var(--gw) / 1100);
    --ox:calc(96% - var(--gw) / 2);
    left:0;right:0;width:auto;aspect-ratio:auto;
    height:calc(var(--gw) / 2.828);
    background-size:var(--gw) 100%;
    background-position:right 4vw top 0;
  }
  .deco-graze::before,.deco-graze::after{content:'';position:absolute;top:0;bottom:0;background-repeat:no-repeat;background-size:100% 100%;}
  .deco-graze::before{background-image:url(decor/ground-col.png?v=3);
    left:calc(4vw + var(--s) * 49);
    right:calc(4vw + var(--gw) - var(--s) * 60);}
  .deco-graze::after{background-image:url(decor/ground-cap.png?v=3);
    left:calc(4vw + var(--s) * 23);width:calc(var(--s) * 27);}

  /* footer: copyright and address on one line, like on desktop */
  .footer-bottom{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:baseline;gap:10px;
    padding:16px 22px 0;font-size:clamp(10px,3vw,12px);}
  .footer-bottom span{min-width:0;}
  .footer-bottom span:last-child{text-align:right;}
}

/* about: heading centred on phones, like the other section headings */
@media(max-width:560px){
  .about-col .eyebrow,.about-col h2{text-align:center;}
}


/* =====================================================================
   FIXES (round 3)
   ===================================================================== */

/* first screen: perfectly round bottom corners.
   The rounding is not cut out of the photo (browsers draw that edge unevenly) —
   two white corner pieces are drawn over the bottom corners instead: a true quarter circle, smooth in every browser. */
.hero{--hr:40px;border-radius:0;}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:calc(var(--hr) + 1px);z-index:5;pointer-events:none;
  background:
    radial-gradient(circle at var(--hr) 0, transparent calc(var(--hr) - .7px), #fff calc(var(--hr) + .3px)) left bottom / var(--hr) calc(var(--hr) + 1px) no-repeat,
    radial-gradient(circle at 0 0, transparent calc(var(--hr) - .7px), #fff calc(var(--hr) + .3px)) right bottom / var(--hr) calc(var(--hr) + 1px) no-repeat;}
@media(max-width:820px){
  .hero{--hr:44px;border-radius:0;}
  .hero-image{border-radius:0;}

  /* cow head on the grey «Основные части туши» block: a bit smaller, higher and to the right — never touches the text */
  .deco-head{width:clamp(56px,calc(50vw - 106px),88px);top:8px;right:0;}
}

/* computer: grazing cow gets the same long ground line as on the phone — from the left edge of the screen to the right one */
@media(min-width:821px){
  .deco-graze{
    --gw:300px;
    --s:calc(var(--gw) / 1100);
    --ox:calc(100% - var(--gw) / 2);
    left:4%;right:4%;width:auto;aspect-ratio:auto;
    height:calc(var(--gw) / 2.828);
    background-size:var(--gw) 100%;
    background-position:right top;
  }
  .deco-graze::before,.deco-graze::after{content:'';position:absolute;top:0;bottom:0;background-repeat:no-repeat;background-size:100% 100%;}
  .deco-graze::before{background-image:url(decor/ground-col.png?v=3);
    left:calc(var(--s) * 26);
    right:calc(var(--gw) - var(--s) * 60);}
  .deco-graze::after{background-image:url(decor/ground-cap.png?v=3);
    left:0;width:calc(var(--s) * 27);}
}


/* =====================================================================
   FIX (round 4) — hero photo jitter on phones when scrolling.
   Phones only (<=820px); the computer version is untouched.
   The photo itself no longer moves: the things that made the browser
   re-draw it on every scroll frame are switched off.
   ===================================================================== */
@media(max-width:820px){
  /* blur of the fixed top bar over a full-screen photo was recalculated on every frame */
  .nav,.nav.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.94);}
  /* the photo is a plain static picture: same framing as before (scale 1.2), but no separate moving layer */
  .hero-image img{will-change:auto;transform:scale(1.2);}
  /* the photo's own layer is not clipped / re-composited while scrolling */
  .hero-image{contain:paint;}
}

/* фото сдвинуто в админке за рамку: за ним остаётся фон рамки (у героя и «о компании» — тёмный) */
.hero-image,.sticky-card{background-color:#000;}


/* =====================================================================
   ROUND 3 — logo, visible price button, two new heading animations
   ===================================================================== */

/* logo: the supplied vector wordmark replaces the old icon + text */
.nav-logo{font-size:0;gap:0;}
.nav-logo .brand-mark{display:none;}
.brand-logo{display:block;height:18px;width:auto;aspect-ratio:13110/1484;}

/* price button: red pill with a visible caption instead of a bare round icon */
.price-btn{width:auto;height:34px;padding:0 15px 0 12px;gap:7px;border-radius:999px;}
.price-btn:hover{transform:scale(1.05);}
.price-btn svg{width:15px;height:15px;flex-shrink:0;}
.price-label{position:relative;z-index:2;font-size:12.5px;font-weight:600;line-height:1;letter-spacing:-.005em;white-space:nowrap;}
.price-tip{display:none !important;}
.price-btn-ring{inset:0;border-radius:999px;animation-name:pricePulse;}
@keyframes pricePulse{
  0%{transform:scale(1);opacity:.55;}
  70%{transform:scale(1.1,1.25);opacity:0;}
  100%{transform:scale(1.1,1.25);opacity:0;}
}
@media(max-width:820px){
  .brand-logo{height:15px;}
  .price-btn{width:auto;height:36px;padding:0 13px 0 11px;}
  .price-btn svg{width:16px;height:16px;}
  .price-btn-ring{inset:0;animation-name:pricePulse;}
  .nav-right{gap:6px;}
}
@media(max-width:380px){
  .brand-logo{height:13px;}
  .price-btn{height:34px;padding:0 11px 0 9px;gap:5px;}
  .price-label{font-size:11.5px;}
}

/* «Качество»: на месте последней «о» красной ручкой рисуется галочка, она закручивается и превращается в обычную чёрную «о».
   Саму анимацию ведёт script.js (функция playQ); здесь — только слои: настоящая буква и поверх неё рисунок. */
.q-o{position:relative;display:inline-block;}
.q-o b{display:inline-block;font-weight:inherit;transition:opacity .3s ease;}
.q-o svg{position:absolute;left:0;top:0;overflow:visible;fill:none;pointer-events:none;opacity:0;transition:opacity .3s ease;}
.q-o path{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.q-o.run b,.q-o.run svg{transition-duration:.12s;}
.q-o.run b{opacity:0;}
.q-o.run svg{opacity:1;}
/* в конце рисунок тает, а настоящая буква проявляется — формы совпадают, шва не видно */
.q-o.done b{opacity:1;}
.q-o.done svg{opacity:0;}

/* «Карта мясных отрубов»: a red blade slices the word, the halves slide apart and meet again */
.sl{position:relative;display:inline-block;}
.sl-a{display:inline-block;clip-path:inset(-20% -10% 49% -10%);}
.sl-b{position:absolute;left:0;top:0;clip-path:inset(49% -10% -20% -10%);}
.sl-k{position:absolute;left:-.08em;right:-.08em;top:52%;height:.07em;margin-top:-.035em;background:var(--blue);border-radius:.05em;
  transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none;}
.split-title.fx .sl-k{animation:slKnife 1.2s ease .15s both;}
.split-title.fx .sl-a{animation:slA 1.2s var(--ease) .15s both;}
.split-title.fx .sl-b{animation:slB 1.2s var(--ease) .15s both;}
@keyframes slKnife{0%{transform:scaleX(0);opacity:1;}26%{transform:scaleX(1);opacity:1;}70%{transform:scaleX(1);opacity:1;}92%,100%{transform:scaleX(1);opacity:0;}}
@keyframes slA{0%,26%{transform:none;}44%,62%{transform:translate(.16em,-.08em);}88%,100%{transform:none;}}
@keyframes slB{0%,26%{transform:none;}44%,62%{transform:translate(-.16em,.08em);}88%,100%{transform:none;}}

@media(prefers-reduced-motion:reduce){
  .q-o svg{display:none;}
  .sl-k{display:none;}
}

/* ---------- watermarks placed in the admin panel ---------- */
.has-wm{isolation:isolate;}
.wm-layer{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity 1.6s ease;}
.wm-layer.in{opacity:1;}
.wm{position:absolute;display:block;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:auto;max-width:none;opacity:var(--op);transform:translate(-50%,-50%) rotate(var(--rot));user-select:none;-webkit-user-select:none;}
@media(max-width:820px){
  .wm{width:calc(var(--w)*1.7%);max-width:92%;}
  .wm.wm-m{left:calc(var(--mx)*1%);top:calc(var(--my)*1%);width:calc(var(--mw)*1%);max-width:none;opacity:var(--mop);transform:translate(-50%,-50%) rotate(var(--mrot));}
  .wm-desk{display:none;}
}
@media(min-width:821px){.wm-mob{display:none;}}

/* =====================================================================
   КОМПЬЮТЕР: первый экран = фото на весь блок, надписи и кнопки прямо на фото.
   Чёрного фона нет. Высота блока зависит от ширины окна (не раздувается на больших
   мониторах), фото заполняет блок без растягивания (object-fit:cover).
   ===================================================================== */
@media(min-width:821px){
  .hero{background:#0b0b0c;height:min(100svh,max(580px,46vw));min-height:0;padding-top:44px;display:flex;flex-direction:column;}
  .hero-image{position:absolute;inset:0;z-index:0;width:100%;height:100%;}
  .hero-image picture{display:block;width:100%;height:100%;}
  .hero-image img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;transform:none !important;will-change:auto;}
  /* затемнение, чтобы белый текст читался на любом куске фото */
  .hero-image::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(ellipse 60% 55% at 50% 50%,rgba(0,0,0,.38),transparent 100%),
      linear-gradient(180deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.22) 40%,rgba(0,0,0,.50) 100%);}
  .hero-text{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 24px;}
  .hero-text h1{font-size:clamp(58px,7.8vw,132px);text-shadow:0 2px 40px rgba(0,0,0,.45);}
  .hero-text p{font-size:clamp(20px,2.1vw,34px);max-width:820px;margin-top:20px;text-shadow:0 1px 20px rgba(0,0,0,.5);}
  .hero-links{margin-top:30px;padding-bottom:0;gap:26px;}
  .hero-links .pill{font-size:clamp(17px,1.35vw,21px);padding:clamp(13px,1vw,17px) clamp(28px,2.3vw,38px);}
  .hero-links .text-link{font-size:clamp(18px,1.45vw,22px);}
}

/* ---------- просмотр схем на весь экран (приближение) ---------- */
.cut-card.zoomable{cursor:zoom-in;position:relative;}
.cut-card.zoomable::after{content:'⤢';position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s;pointer-events:none;}
.cut-card.zoomable:hover::after,.cut-card.zoomable:focus-visible::after{opacity:1;}
@media(hover:none){.cut-card.zoomable::after{opacity:1;}}
html.lb-open,html.lb-open body{overflow:hidden;}
.lb{position:fixed;inset:0;z-index:3000;background:rgba(8,8,9,.94);color:#fff;}
.lb[hidden]{display:none;}
.lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:default;user-select:none;-webkit-user-select:none;}
.lb-stage.zoomed{cursor:grab;}
.lb-stage.zoomed:active{cursor:grabbing;}
.lb-img{max-width:94vw;max-height:84vh;width:auto;height:auto;border-radius:8px;background:#fff;box-shadow:0 10px 60px rgba(0,0,0,.5);transform-origin:center;will-change:transform;-webkit-user-drag:none;}
.lb-bar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(40,40,42,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.lb-bar button,.lb-x{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .2s;}
.lb-bar button:hover,.lb-x:hover{background:rgba(255,255,255,.16);}
.lb-cnt{min-width:46px;text-align:center;font-size:14px;color:#d2d2d7;}
.lb-sep{width:1px;height:22px;background:rgba(255,255,255,.2);margin:0 4px;}
.lb.single [data-a="prev"],.lb.single [data-a="next"],.lb.single .lb-cnt,.lb.single .lb-sep{display:none;}
.lb-x{position:absolute;top:18px;right:18px;background:rgba(40,40,42,.9);font-size:18px;}
.lb-hint{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-size:13px;color:#a1a1a6;white-space:nowrap;pointer-events:none;}
@media(max-width:820px){.lb-hint{display:none;}.lb-img{max-height:78vh;}}

/* ---------- документы: колонки всегда по центру, без «дыр» ---------- */
.doc-wall{--n:4;--g:20px;gap:var(--g);justify-content:center;}
.doc-col{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));}
@media(max-width:700px){.doc-wall{--g:12px;}}

/* корова на лугу: показывать только на компьютере / только на телефоне (настройка в админке) */
@media(max-width:820px){.deco-nomob{display:none !important;}}
@media(min-width:821px){.deco-nodesk{display:none !important;}}

/* фото, удалённое в админке */
.hide-all{display:none !important;}

/* фото, скрытые на компьютере или на телефоне (настройка в админке) */
@media(max-width:820px){.hide-mob{display:none !important;}}
@media(min-width:821px){.hide-desk{display:none !important;}}
/* документы на телефоне: 3 колонки, карточки компактнее */
@media(max-width:560px){
  .doc-wall{--g:8px;padding:0 12px;}
  .doc-col{gap:8px;}
  .doc-col:nth-child(even){margin-top:18px;}
  .doc-card{border-radius:12px;}
  .doc-card .thumb{padding:6px;min-height:80px;}
  .doc-name{padding:7px 8px;font-size:10.5px;gap:6px;}
  .doc-name i{width:5px;height:5px;}
  .doc-badge{top:6px;right:6px;font-size:8px;padding:2px 5px;}
}

/* просмотр схем: без двойного касания-приближения страницы и выделения на телефоне */
.lb,.lb *{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
.lb .lb-stage{touch-action:none;}
.lb-bar,.lb-x,.lb-hint{user-select:none;-webkit-user-select:none;}
html.lb-open,html.lb-open body{overscroll-behavior:none;}

/* «Наша продукция»: водяной знак считается от постоянной высоты раздела (см. script.js), поэтому не прыгает между вкладками */
.wm-ref .wm{top:calc(var(--y)*.01*var(--refh));}
@media(max-width:820px){.wm-ref .wm.wm-m{top:calc(var(--my)*.01*var(--refh));}}