/* Molti home: hero + first-visit intro, pinned horizontal «Производство», image-expand «Что мы изготавливаем». */

/* ---- hero ---- */
.hx .hero-photo img{object-position:50% 62%}
.hx .hx-facts{display:flex;flex-wrap:wrap;gap:6px 0;max-width:none}
.hx .hx-facts li{font-size:15px;color:#ffffffd9}
.hx .hx-facts li:not(:last-child):after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:#ffffff80;margin:0 16px;vertical-align:middle}
.hx-cap{position:absolute;z-index:2;right:var(--gutter);top:calc(var(--header) + 28px);color:#fffc;font-size:14px;text-decoration:none;border-bottom:1px solid #ffffff4d;padding-bottom:3px;transition:color .25s,border-color .25s}
.hx-cap:hover{color:#fff;border-color:#fff}
.hx-js .hx [data-hx-title]{visibility:hidden}
.hx [data-hx-title] .hx-line{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
@media (max-width:700px){
  .hx .hero-photo img{object-position:50% 70%}
  .hx .hx-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
  .hx .hx-facts li{font-size:13px;line-height:1.35}
  .hx .hx-facts li:not(:last-child):after{display:none}
  .hx .hero-in{padding-bottom:92px}
  .hx-cap{top:auto;bottom:auto;top:calc(var(--header) + 16px);font-size:13px}
}

/* intro (first visit only; html.hx-intro is set in <head>) */
.hxi{display:none}
.hx-intro .hxi{display:grid;place-items:center;position:fixed;inset:0;z-index:1000;background:var(--ink);color:var(--paper);pointer-events:none}
.hx-intro{overflow:hidden}
.hxi-word{display:flex;align-items:center;font:300 clamp(96px,21vw,340px)/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.hxi-l{display:inline-block;overflow:hidden;padding:0 .02em .08em}
.hxi-l .c{display:inline-block;transform:translateY(118%);animation:hxi-up 1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i) * 60ms + 120ms)}
@keyframes hxi-up{to{transform:none}}
.hxi-box{display:block;width:0;height:.62em;overflow:hidden;position:relative;margin:0 .04em;align-self:center;transform:translateY(.02em)}
.hxi-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;visibility:hidden}
.hxi-box .hxi-f{object-position:50% 55%}
@media (max-width:700px){.hxi-box img{object-position:50% 70%}}

/* ---- «Что мы изготавливаем» image expand ---- */
.mk{background:var(--ink);color:var(--paper);padding-top:clamp(88px,10vw,160px)}
.mk-title{font:300 clamp(46px,7vw,128px)/.95 var(--display);letter-spacing:-.015em;margin:0 0 clamp(40px,5vw,72px);max-width:14ch}
.mk-title em{font-style:italic;color:var(--mute-on-ink)}
.mk-list{list-style:none;margin:0;padding:0}
.mk-link{display:block;position:relative;color:var(--paper);text-decoration:none}
.mk-media{position:relative;overflow:hidden;background:var(--ink-2)}
.mk-media img{width:100%;height:100%;object-fit:cover;display:block}
.mk-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 35%,#000000a6 100%);pointer-events:none}
.mk-copy{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) clamp(28px,5vh,64px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:12px 40px;z-index:1}
.mk-num{grid-column:1/-1;color:#ffffffb3;font-size:14px;font-variant-numeric:tabular-nums}
.mk-h{grid-column:1/3;font:300 clamp(52px,8.6vw,164px)/.92 var(--display);letter-spacing:-.02em;margin:0}
.mk-h .mk-c{display:inline-block}
.mk-h .mk-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.mk-p{grid-column:1/3;margin:0;max-width:46ch;color:#ffffffd1;font-size:clamp(15px,1.1vw,18px);line-height:1.5}
.mk-go{grid-column:3;grid-row:2/4;align-self:end;white-space:nowrap;border-bottom:1px solid #ffffff66;padding-bottom:4px;font-size:15px}
/* static / phone layout: stacked full-width pictures */
.mk:not(.is-pinned) .mk-item{padding:0 var(--gutter) 16px}
.mk:not(.is-pinned) .mk-media{aspect-ratio:4/5;max-height:88svh;width:100%}
.mk:not(.is-pinned) .mk-copy{padding:0 calc(var(--gutter) + 20px) 28px;grid-template-columns:1fr}
.mk:not(.is-pinned) .mk-h{font-size:clamp(40px,11vw,72px);grid-column:1}
.mk:not(.is-pinned) .mk-p{grid-column:1;font-size:15px}
.mk:not(.is-pinned) .mk-go{grid-column:1;grid-row:auto;justify-self:start}
@media (min-width:901px){.mk:not(.is-pinned) .mk-media{aspect-ratio:16/9}}
/* pinned stage (desktop with motion) */
.mk.is-pinned .mk-stage{height:100svh;position:relative;overflow:hidden}
.mk.is-pinned .mk-list{position:absolute;inset:0}
.mk.is-pinned .mk-item{position:absolute;inset:0}
.mk.is-pinned .mk-link{position:absolute;inset:0}
.mk.is-pinned .mk-media{position:absolute;inset:0;will-change:clip-path}
.mk.is-pinned .mk-media img{will-change:transform}
.mk.is-pinned .mk-item:not(.is-on) .mk-link{pointer-events:none}

/* ---- sticky on touch screens too (CSS sticky only: the browser moves the cards, no script per frame) ---- */
@media (hover:none) and (prefers-reduced-motion:no-preference),(pointer:coarse) and (prefers-reduced-motion:no-preference){
  .production-stack .stacking-cards .stacking-slot{position:sticky;top:calc(var(--header) + 12px);height:auto;margin-block:0 22px}
  .production-stack .stacking-cards .stacking-slot:nth-child(2){top:calc(var(--header) + 26px)}
  .production-stack .stacking-cards .stacking-slot:nth-child(3){top:calc(var(--header) + 40px)}
  .production-stack .stacking-cards .stacking-card{box-shadow:0 -14px 36px #00000038}
}
@media (max-width:900px){
  .mk:not(.is-pinned) .mk-item{position:sticky;top:var(--header);height:calc(100svh - var(--header));padding:0;overflow:hidden;background:var(--ink)}
  .mk:not(.is-pinned) .mk-link{height:100%}
  .mk:not(.is-pinned) .mk-media{aspect-ratio:auto;max-height:none;height:100%;transform-origin:50% 0}
  .mk:not(.is-pinned) .mk-copy{padding:0 var(--gutter) 32px}
  .mk:not(.is-pinned) .mk-media img{will-change:transform}
}