.hf{position:relative;margin-top:calc(-1 * var(--hf-hdr, 70px))}.hf-box{display:grid;grid-template-columns:1fr 1fr;--hf-h:max(760px,100svh);min-height:var(--hf-h);padding-top:var(--hf-hdr,70px);background:var(--plate);overflow:hidden;--kadr-do:url(/hero/dom-bez-okon.webp);--kadr-posle:url(/hero/dom-s-oknami.webp);--kadr-yakor:left center}@media (max-width:920px){.hf-box{--kadr-do:url(/hero/vert-bez-okon.webp);--kadr-posle:url(/hero/vert-s-oknami.webp);--kadr-yakor:center top}}:root[data-theme=dark] .hf-box{--kadr-do:url(/hero/dark-bez-okon.webp);--kadr-posle:url(/hero/dark-s-oknami.webp)}@media (max-width:920px){:root[data-theme=dark] .hf-box{--kadr-do:url(/hero/vert-dark-bez-okon.webp);--kadr-posle:url(/hero/vert-dark-s-oknami.webp)}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .hf-box{--kadr-do:url(/hero/dark-bez-okon.webp);--kadr-posle:url(/hero/dark-s-oknami.webp)}}@media (prefers-color-scheme:dark) and (max-width:920px){:root:not([data-theme=light]) .hf-box{--kadr-do:url(/hero/vert-dark-bez-okon.webp);--kadr-posle:url(/hero/vert-dark-s-oknami.webp)}}.hf-kadr{grid-area:1/1;position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;background-position:var(--kadr-yakor);transition:opacity 1.4s var(--ease,ease)}.hf-kadr--do{background-image:var(--kadr-do)}.hf-kadr--posle{background-image:var(--kadr-posle);opacity:0}.hf-kadr--posle.on{opacity:1}.hf-rastvor{position:absolute;inset:auto 0 0 0;height:clamp(80px,14vh,200px);background:linear-gradient(to bottom,transparent 0,color-mix(in srgb,var(--ground) 22%,transparent) 42%,color-mix(in srgb,var(--ground) 72%,transparent) 74%,var(--ground) 100%);pointer-events:none}.hf-text{position:relative;z-index:1;grid-column:2;place-self:center;width:min(62ch,88%);display:grid;gap:clamp(20px,2.6vw,34px)}.hf-text .hero2-h{margin:0}.hf .hcz{background:var(--ground)}@media (max-width:920px){.hf .hcz-ph{min-height:1.5em;white-space:nowrap;overflow:hidden}.hf-box{grid-template-columns:1fr;align-items:end;padding-top:0;background:var(--ground)}.hf-text{grid-column:1;place-self:end stretch;width:auto;margin:0 22px calc(var(--hf-h) - 100svh + 118px);align-self:end;gap:28px}}.hf-nav{position:absolute;left:50%;bottom:calc(var(--hf-h) - 100svh + clamp(18px, 3.2vh, 32px));transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:10px}.hf-nav .ico{width:46px;height:46px;color:#fff}.hf-nav .ico:hover{color:#fff}.hf-nav .ico svg{width:20px;height:20px}.hf-nav-bars{display:flex;align-items:center;gap:8px;padding:0 6px}.hf-bar{padding:12px 0;border:0;background:transparent;cursor:pointer;display:block;line-height:0}.hf-bar-track{display:block;width:6px;height:6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 46%,transparent);overflow:hidden;transition:width .55s var(--ease),background .35s var(--ease)}.hf-bar:hover .hf-bar-track{background:color-mix(in srgb,var(--ink) 70%,transparent)}.hf-bar.on .hf-bar-track{width:clamp(48px,16vw,88px);background:color-mix(in srgb,var(--ink) 30%,transparent)}.hf-bar.on{cursor:default}.hf-bar-fill{display:block;height:100%;width:0;border-radius:inherit;background:#fff;animation:hf-progress 8s linear forwards}@keyframes hf-progress{to{width:100%}}@media (prefers-reduced-motion:reduce){.hf-bar-track{transition:none}.hf-bar-fill{animation:none;width:100%}}.hf-kadr--scena{background-position:left 35%;background-size:auto calc(var(--hf-z, 1) * 100%)}@media (min-width:1014px) and (min-aspect-ratio:4/3){.hf-kadr--scena{background-size:calc(var(--hf-z, 1) * 100%) auto}}.hf-box--video{background:var(--ground)}.hf-video{grid-area:1/1;position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:left center;object-position:left center}.hf-kadr--poster{background-image:url(/hero/petlya-poster.webp);background-repeat:no-repeat;background-size:cover;background-position:0;opacity:1}@media (max-width:920px){.hf-kadr--poster{background-image:url(/hero/petlya-poster-vert.webp);background-position:top}.hf-video{-o-object-position:center top;object-position:center top}.hf-kadr,.hf-video{inset:0;height:100%}.hf-video{-o-object-position:center top;object-position:center top}}@media (min-width:921px){.hf-box{padding-right:calc(max(0px, (100% - var(--maxw)) / 2) + clamp(22px, 5vw, 88px))}.hf-text{justify-self:end;align-self:center}}