/* Owner corrections from Исправлять.zip. Source vector dimensions are retained. */
.background{background-size:cover}
.glass{border-radius:32px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.button,.project-counter{border-radius:16px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.home-image,.home-thumbs img,.preview{border-radius:32px}

/* Figma foreignObject blur must be a DOM surface, outside an SVG <img>. */
.brand-lockup{position:relative;aspect-ratio:1090/300}
.brand-caption{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;z-index:2}
.brand-surface{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.brand-caption-surface{position:absolute;left:27.5229%;top:40.6667%;width:72.4771%;height:59.3333%;border-radius:0 7.59494% 7.59494% 0/0 33.7079% 33.7079% 0;background:linear-gradient(90deg,rgb(33 37 41/.01) 7.6582%,rgb(33 37 41/.9) 21.0633%)}
.brand-mark{position:absolute;left:0;top:0;width:27.5229%;height:100%;padding:0;background:radial-gradient(circle at center,rgb(33 37 41/.01) 40%,#212529 60%);border-radius:50% 50% 0 50%;z-index:3;transition:transform 160ms var(--ease),filter 160ms var(--ease);transform-origin:center;pointer-events:auto}
.brand-mark img{width:100%;height:100%;max-width:none;pointer-events:none}
@media(hover:hover) and (pointer:fine){.brand-mark:hover{transform:scale(1.06);filter:brightness(1.05)}}
.brand-mark:active{transform:scale(.94)}
.hero-brand{position:absolute;height:auto;aspect-ratio:1090/300}

/* Compact header: Group 84.svg, 681×200, a 125.4568 px circular mark. */
.project-header{position:absolute;left:calc(20px * var(--scale));top:0;width:calc(681px * var(--scale));z-index:20;pointer-events:none}
.brand-compact{width:100%;aspect-ratio:681/200}
.brand-compact .brand-caption-surface{left:14.792%;top:18.79445%;width:85.1689%;height:62%;border-radius:3.44828%/16.129%;background:linear-gradient(90deg,rgb(33 37 41/.01) 10.2543%,rgb(33 37 41/.9) 28.2034%)}
.brand-compact .brand-mark{left:5.41418%;top:18.4353%;width:18.4224%;height:62.7284%;border-radius:50%}

/* All cards share a full-height native scroll viewport; controls float above it. */
.project-scroll{position:absolute;inset:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;padding:calc(220px * var(--scale)) calc(60px * var(--scale)) calc(200px * var(--scale));display:flex;flex-direction:column;align-items:center;gap:calc(60px * var(--scale));overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--green) transparent;scroll-behavior:smooth}
.project-frame{position:relative;flex:none;width:calc(1800px * var(--scale));height:calc(800px * var(--scale))}
.project-card{position:absolute;left:0;top:0;width:1800px;height:800px;grid-template-rows:minmax(0,600px) minmax(0,140px);transform:scale(var(--scale));transform-origin:top left}
.case-logo{border-radius:0;background:transparent;box-shadow:none;object-fit:contain}
.gallery{grid-template-columns:218px minmax(0,1fr)}
.thumbnails{padding:12px 22px 12px 12px;gap:18px}
.thumbnail{overflow:visible;box-shadow:none;border-radius:32px;outline:0 solid transparent;outline-offset:0}
.thumbnail img{border-radius:inherit}
.thumbnail[aria-current=true]{box-shadow:none;outline:5px solid var(--green)}
.footer{z-index:30}
.footer::before{content:'';position:absolute;inset:auto 0 0;height:calc(200px * var(--scale));background:linear-gradient(transparent,rgb(21 22 24/.8));opacity:0;transition:opacity 350ms var(--ease);pointer-events:none}
.footer.project-active::before{opacity:1}
.navigation{top:1025px;height:130px}
.tabs{display:grid;grid-template-columns:repeat(3,272px);height:130px;gap:20px;align-items:center;justify-items:center}
.tab,.tab:nth-child(2){width:272px;height:100px;font-size:36px;border-radius:32px;margin-inline:0;--button-color:#212529;transition:--button-color 300ms var(--ease),width 300ms var(--ease),height 300ms var(--ease),margin 300ms var(--ease),background-color 300ms var(--ease),transform 190ms var(--ease),filter 190ms var(--ease)}
.tab.active{width:292px;height:130px;margin-inline:-10px;border-radius:32px;--button-color:#738336}
.project-navigation{top:40px}
.project-navigation .button{border-radius:16px}
.contact-link{min-width:0;padding:10px;border-radius:32px}
.contact-link img{width:54px;height:54px;object-fit:contain;flex:none}
@media(min-width:961px){.home-hero .hero-brand{top:493px}}

@media(max-width:960px){
 .background{background-image:url('./assets/background-mobile.png');background-size:cover}
 .glass{border-radius:10.4px}
 .button,.project-counter{border-radius:10.4px}
 .home-image,.home-thumbs img,.preview{border-radius:10.4px}
 .hero-brand{height:auto}
 .project-header{left:0;top:0;width:min(60vw,420px)}
 .project-scroll{inset:0;width:100%;height:100%;padding:calc(min(60vw,420px) * 200 / 681 + 8px) 7px 150px;gap:20px;align-items:stretch}
 .project-frame{width:100%;height:auto;position:relative}
 .project-card{position:relative;inset:auto;width:100%;height:auto;transform:none}
 .gallery,.details .gallery{height:calc(60vw + 14px)}
 .thumbnails{height:calc(12vw + 14px);padding:7px;gap:9px;flex:none}
 .thumbnail{border-radius:10.4px;width:12vw;height:10vw;min-height:0}
 .thumbnail[aria-current=true]{outline-width:3px}
 .footer::before,.footer.project-active::before{height:170px;background:linear-gradient(transparent,rgb(21 22 24/.8))}
 .navigation{top:auto;bottom:max(20px,env(safe-area-inset-bottom));height:calc(130px * var(--nav-scale));left:0;right:0}
 .tabs{grid-template-columns:repeat(3,calc(272px * var(--nav-scale)));height:100%;gap:calc(20px * var(--nav-scale))}
 .tab,.tab:nth-child(2){width:calc(272px * var(--nav-scale));min-width:0;height:calc(100px * var(--nav-scale));font-size:calc(36px * var(--nav-scale));padding:0;border-radius:calc(32px * var(--nav-scale))}
 .tab.active{width:calc(292px * var(--nav-scale));height:calc(130px * var(--nav-scale));margin-inline:calc(-10px * var(--nav-scale));border-radius:calc(32px * var(--nav-scale))}
 .project-navigation{top:auto;bottom:calc(130px * var(--nav-scale) + 16px);left:0;right:0;gap:6px}
 .project-navigation .button{border-radius:7px}
 .project-card:not(.details) .case-summary{grid-template-rows:auto auto}
 .project-card:not(.details) .case-name,.project-card:not(.details) .case-description{align-self:start}
 .contact-link{padding:7px 9px;border-radius:10.4px}
 .contact-link img{width:18px;height:18px}
}
@media(min-width:600px) and (max-width:960px) and (orientation:portrait){.contact-link img{width:26px;height:26px}}
@media(max-width:960px) and (orientation:landscape){
 .home-hero,.contacts-hero{height:calc(100% - 120px)}
 .home-project{height:calc(100% - 130px)}
 .project-header{width:235px}
 .project-scroll{padding-top:77px}
 .gallery,.details .gallery{height:350px}
 .thumbnails{height:77px}
 .thumbnail{width:66px;height:50px}
}
@media(prefers-reduced-motion:reduce){.footer::before,.brand-mark{transition-duration:1ms}.project-scroll{scroll-behavior:auto}}

/* Balanced physical control sizes, independent of the reference canvas scale. */
:root{--layout-gutter:clamp(16px,3vw,48px);--footer-space:100px;--tab-width:176px;--nav-gap:20px}
.background{background-color:#151618;background-image:linear-gradient(rgb(21 22 24/.5),rgb(21 22 24/.5)),url('./assets/background.webp');background-size:100% 100%,cover;background-position:center;background-repeat:no-repeat}
.footer-stage{inset:0;width:100%;height:100%;transform:none}
.navigation{top:auto;bottom:max(20px,env(safe-area-inset-bottom));right:var(--layout-gutter);left:auto;height:56px}
.tabs{grid-template-columns:repeat(3,var(--tab-width));gap:var(--nav-gap);height:56px}
.tab,.tab:nth-child(2){width:var(--tab-width);height:48px;min-height:48px;padding:0 12px;font-size:18px;border-radius:18px;margin:0}
.tab.active{width:calc(var(--tab-width) + 8px);height:56px;margin-inline:-4px;border-radius:18px}
.project-navigation{top:6px;bottom:auto;left:auto;right:0;gap:12px}
.project-navigation .button{width:44px;height:44px;min-height:44px;border-radius:14px}
.project-navigation svg{width:22px;height:22px}
.project-counter{height:44px;min-height:44px;min-width:64px;font-size:16px;border-radius:14px}
.footer.project-active .tabs{transform:translateX(calc(-1 * var(--project-nav-width,176px) - 20px))}
.footer::before{height:170px}
.project-scroll{height:100%;bottom:0;padding-bottom:170px;scroll-padding-bottom:24px}

#home .stage,#contacts .stage{inset:0;width:100%;height:100%;transform:none}
.home-hero,.contacts-hero{left:var(--layout-gutter);top:24px;bottom:var(--footer-space);width:calc(50% - var(--layout-gutter) - 16px);height:auto}
.contacts-hero{left:auto;right:var(--layout-gutter)}
.portrait{left:6%;top:0;width:88%;height:100%;object-fit:contain;object-position:center bottom}
.home-hero .hero-brand,.contacts-hero .hero-brand{top:auto;bottom:0;left:0;width:100%;height:auto}
.home-project{left:auto;right:var(--layout-gutter);top:24px;bottom:var(--footer-space);width:calc(50% - var(--layout-gutter) - 16px);height:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.home-gallery{height:auto;flex:1;min-height:0;grid-template-columns:clamp(72px,7vw,120px) minmax(0,1fr);gap:12px}
.home-thumbs{gap:12px}
.home-thumbs img{width:100%;height:clamp(68px,7vw,110px);border-radius:18px}
.home-image{border-radius:18px}
.home-copy{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:0;overflow:visible}
.home-title{grid-column:1 / 3;font-size:clamp(22px,2vw,36px);margin:0}
.home-description{grid-column:1;font-size:clamp(12px,1vw,16px);line-height:1.4;padding:0;min-width:0}
.home-more{position:static;grid-column:2;align-self:end;width:132px;height:48px;min-height:48px;font-size:14px;border-radius:16px}
.contact-links{left:var(--layout-gutter);top:50%;width:calc(50% - var(--layout-gutter) - 32px);max-width:520px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;transform:translateY(-50%)}
.contact-link{width:100%;height:56px;min-height:56px;padding:12px;gap:10px;font-size:16px;border-radius:18px}
.contact-link img{width:26px;height:26px}
.typing-bubble{left:var(--layout-gutter);top:calc(50% - 230px);width:240px;height:120px;border-radius:80px 60px 60px 0;gap:18px}
.typing-bubble i{width:18px;height:18px}

@media(min-width:961px){
 #contacts{--contact-row-bottom:calc(var(--footer-space) + (50vw - var(--layout-gutter) - 16px) * 150 / 1090 - 64px)}
 .contact-links{top:auto;bottom:var(--contact-row-bottom);transform:none}
 .typing-bubble{top:auto;bottom:calc(var(--contact-row-bottom) + 152px)}
 .project-card .case-more{width:calc(144px / var(--scale));height:calc(48px / var(--scale));min-height:calc(48px / var(--scale));font-size:calc(14px / var(--scale));border-radius:calc(16px / var(--scale))}
 .project-card:not(.details) .case-summary{grid-template-columns:142px minmax(0,1fr) calc(144px / var(--scale))}
 .project-card .image-controls .button{width:calc(48px / var(--scale));height:calc(44px / var(--scale));min-height:calc(44px / var(--scale));padding:0;border-radius:calc(14px / var(--scale))}
 .project-card .image-controls svg{width:calc(22px / var(--scale));height:calc(22px / var(--scale))}
 .project-card .case-back{min-height:calc(44px / var(--scale));font-size:calc(14px / var(--scale));padding:calc(10px / var(--scale)) calc(16px / var(--scale))}
 .case-description{font-size:calc(clamp(12px,1vw,16px) / var(--scale))}
}
@media(max-width:960px){
 :root{--layout-gutter:16px;--footer-space:100px;--nav-gap:14px;--tab-width:min(160px,calc((100vw - 2 * var(--layout-gutter) - 2 * var(--nav-gap) - 8px) / 3))}
 .background{background-image:url('./assets/background-mobile.png');background-size:cover}
 .navigation{left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));height:56px;justify-content:center}
 .tab,.tab:nth-child(2){height:48px;min-height:48px;width:var(--tab-width);font-size:clamp(12px,3.4vw,16px);padding:0 4px;border-radius:16px}
 .tab.active{width:calc(var(--tab-width) + 8px);height:56px;margin-inline:-4px;border-radius:16px}
 .project-navigation{top:auto;bottom:68px;left:0;right:0;gap:12px}
 .project-navigation .button,.project-counter{height:44px;min-height:44px;border-radius:14px}
 .project-navigation .button{width:44px}
 .project-counter{min-width:64px;font-size:16px}
 .project-scroll{height:100%;padding-bottom:170px}
 #home .stage,#contacts .stage{height:calc(100% - var(--footer-space));display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:16px;padding:16px var(--layout-gutter);overflow-y:auto}
 .home-hero,.contacts-hero{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:min(72vw,42dvh);flex:none}
 .portrait{left:6%;top:0;width:88%;height:100%}
 .home-project{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:auto;min-height:188px;padding:10px;display:grid;grid-template-columns:minmax(0,.45fr) minmax(0,.55fr);gap:10px;flex:none}
 .home-gallery{position:relative;display:block;height:100%;min-width:0;min-height:166px}
 .home-image{position:absolute;inset:0;width:100%;height:100%}
 .home-thumbs{display:none}
 .home-copy{display:flex;flex-direction:column;gap:8px;min-width:0;padding:0 8px 0 0}
 .home-title{font-size:clamp(17px,4vw,26px);overflow-wrap:anywhere}
 .home-description{font-size:clamp(11px,2.6vw,14px);line-height:1.35}
 .home-more{margin-top:auto;align-self:flex-end;width:116px;height:44px;min-height:44px;font-size:12px;border-radius:14px;flex:none}
 .contact-links{position:relative;left:auto;top:auto;width:100%;max-width:520px;transform:none;gap:12px;flex:none}
 .contact-link{height:48px;min-height:48px;padding:10px;gap:8px;font-size:clamp(12px,3.25vw,16px);border-radius:16px}
 .contact-link img{width:20px;height:20px}
 .contact-link[data-contact=email],.contact-link[data-contact=instagram]{order:initial}
 .image-controls .button{width:44px;height:44px;min-height:44px;border-radius:14px}
 .image-controls svg{width:22px;height:22px}
 .image-counter{font-size:11px;padding:7px}
 .case-summary{grid-template-columns:48px minmax(0,1fr);gap:6px 10px;padding-bottom:0}
 .case-logo{width:48px;height:48px}
 .case-description{grid-column:2;grid-row:2;font-size:11px;line-height:1.4;padding:0}
 .case-more{position:static;grid-column:2;grid-row:3;justify-self:end;width:116px;height:44px;min-height:44px;margin-top:6px;font-size:12px;border-radius:14px}
 .details .case-back{height:44px;min-height:44px;font-size:12px;padding:10px 16px}
}
@media(max-width:600px){:root{--layout-gutter:12px}}
@media(max-width:960px) and (orientation:landscape){
 .background{background-image:linear-gradient(rgb(21 22 24/.5),rgb(21 22 24/.5)),url('./assets/background.webp');background-size:100% 100%,cover}
 #home .stage,#contacts .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;gap:24px;padding-top:16px}
 .home-hero,.contacts-hero,.home-project{height:100%;min-height:0}
 .home-project{display:flex;gap:8px;padding:10px}
 .home-gallery{flex:1;height:auto;min-height:0}
 .home-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
 .home-title{font-size:18px;grid-column:1 / 3}
 .home-description{font-size:10px}
 .home-more{width:106px;margin:0;align-self:end;font-size:12px}
 .contacts-hero{grid-column:2;grid-row:1}
 .contact-links{grid-column:1;grid-row:1;align-self:end;gap:12px;margin-bottom:calc((100vw - 2 * var(--layout-gutter) - 24px) * 75 / 1090 - 54px)}
 .contact-link{font-size:12px}
}