@font-face{font-family:Inter;src:url('fonts/inter-cyrillic-wght-normal-DqGufNeO.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-052F,U+2DE0-2DFF,U+A640-A69F}@font-face{font-family:Inter;src:url('fonts/inter-latin-wght-normal-Dx4kXJAl.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2190-21FF}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;overflow-anchor:none}body{background:rgb(235,100,55);color:#080704;font-family:Inter,Arial,sans-serif;touch-action:none}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}a{color:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #fff4d7;outline-offset:5px}#stage{position:absolute;width:1600px;height:900px;overflow:hidden;transform-origin:0 0}#hold,#loop,#transition{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}#loop,#transition{display:none}#grain{position:absolute;inset:-20px;pointer-events:none;background:url('media/grain.png') repeat;opacity:.055;mix-blend-mode:soft-light;animation:grain 1s steps(1,end) infinite}@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-12px,8px)}20%{transform:translate(10px,-15px)}30%{transform:translate(-8px,-8px)}40%{transform:translate(6px,12px)}50%{transform:translate(-15px,2px)}60%{transform:translate(9px,-6px)}70%{transform:translate(-3px,14px)}80%{transform:translate(13px,3px)}90%{transform:translate(-10px,-12px)}}
header{position:absolute;top:43px;left:70px;right:50px;display:flex;justify-content:space-between;align-items:center;z-index:5}.brand{padding:0;width:180px;height:46px}.brand img{width:100%;height:100%}nav{display:flex;gap:34px}nav button{font-size:20px;font-weight:600;padding:4px}.scene{position:absolute;inset:0;transition:opacity 360ms linear;touch-action:none}.scene[hidden]{display:none!important}h1,h2{font-weight:850;letter-spacing:0;line-height:.96;margin:0}h1{position:absolute;top:255px;left:65px;font-size:140px}h2{font-size:112px}.hero p{position:absolute;top:545px;left:70px;font-size:28px;line-height:1.4;margin:0}.hero p span{display:block}.mobile{display:none}.ellipsis{font-family:Inter,Arial,sans-serif;letter-spacing:0}.dot{position:absolute;left:1060px;top:602px;width:190px;height:180px;border-radius:50%;color:#fff9e9;font-size:25px;font-weight:700;line-height:1.1;padding:0;overflow:hidden}.possibilities h2{position:absolute;left:65px;top:146px}.sentences{position:absolute;top:380px;left:70px;width:835px;display:grid;gap:16px}.sentences button{border:2px solid #a63e1f;border-radius:999px;height:85px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:0 40px;font-size:36px;font-weight:700;letter-spacing:0;box-shadow:inset 2px 3px 3px #ffae75,inset -2px -3px 2px #c34b26}.sentences span{font-size:38px;border:1px solid;border-radius:50%;width:54px;height:54px;text-align:center;font-weight:400;flex:none}.ceramic,.chips button,#contacts>a,#contacts>button{color:#fff9e9;background:linear-gradient(174deg,#77716b 0,#272321 5%,#080706 14%,#060504 65%,#160b05 91%,#442516 100%);border:3px solid #292320;box-shadow:inset 0 3px 2px #aaa39b,inset 0 -5px 4px #000,0 6px 10px #9c371e66}
.works h2{position:absolute;left:65px;top:133px;font-size:90px}#work-panels{position:absolute;inset:0;pointer-events:none}.work{position:absolute;inset:0;display:block;text-decoration:none;pointer-events:none}.screen{position:absolute;left:0;top:0;display:block;background:#080808;transform-origin:0 0;pointer-events:auto}.screen video{width:100%;height:100%;object-fit:fill;display:block;background:#080808}.work-label{position:absolute;color:#fff9e9;text-align:center;line-height:1.15;font-size:27px;font-weight:650;border-radius:18px;padding:9px 12px;pointer-events:auto}.work-label small{display:block;font-weight:400;font-size:16px;margin-top:5px;white-space:nowrap}.work:nth-child(1) .work-label{top:636px;left:170px;width:250px}.work:nth-child(2) .work-label{top:633px;left:617px;width:230px}.work:nth-child(3) .work-label{top:619px;left:1010px;width:212px}.works .dot{left:1343px;top:573px;width:132px;height:128px;font-size:18px}#other-works{position:absolute;left:65px;top:745px;display:flex;align-items:center;gap:16px;font-size:18px}#other-works::before{content:'Ще роботи:';font-weight:600}#other-works a{text-decoration:none}#other-works a+a::before{content:'·';margin-right:16px}
.brief .echo{position:absolute;top:118px;left:70px;font-size:52px;line-height:.85;font-weight:800;letter-spacing:0;opacity:.5;margin:0}.brief-content{position:absolute;top:278px;left:65px;width:950px}.brief h2{font-size:108px;letter-spacing:0;margin-bottom:26px;white-space:nowrap}form{font-size:21px}textarea{display:block;resize:none;width:100%;border-radius:80px;padding:40px 52px;font-size:36px;line-height:1.2;height:145px}textarea::placeholder,#reply::placeholder{color:#fff9e9;opacity:1}.chips{display:flex;justify-content:space-between;gap:16px;margin:24px 0 18px}.chips button{font-size:20px;border-radius:999px;padding:16px 22px;white-space:nowrap}.reply-row{display:flex;gap:18px;width:100%}#reply{width:calc(100% - 265px);min-width:0;border-radius:999px;padding:18px 34px;font-size:24px;height:70px}#submit{width:247px;font-size:25px;border-radius:999px;height:70px;flex:none}#form-status{font-size:18px;line-height:1.2;margin:9px 0 0;min-height:22px}.field-error{display:block;font-size:17px;color:#300b02;font-weight:600;padding:4px 25px}.field-error:empty{display:none}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}input,textarea{touch-action:pan-y}
#contacts{position:absolute;bottom:53px;left:70px;display:flex;gap:22px;z-index:5}#contacts>a,#contacts>button{height:90px;min-width:280px;border-radius:999px;display:flex;text-align:left;text-decoration:none;gap:20px;align-items:center;padding:12px 28px}#contacts svg{width:46px;height:46px;flex:none}#contacts strong{display:block;font-size:23px;font-weight:600}#contacts small{display:block;font-size:19px;white-space:nowrap}#rail{position:fixed;right:14px;top:50%;display:grid;gap:13px;z-index:10}#rail button{width:9px;height:9px;padding:0;border:1px solid #33170c;border-radius:50%}#rail button[aria-current=true]{background:#221008}#progress{display:none}#notice{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);background:#110b07;color:#fff5dc;border-radius:20px;padding:12px 22px;z-index:30;font-size:14px;display:none;max-width:calc(100% - 32px)}
/* All overlays use the same contained plate, including on short phone viewports. */
body.phone header{top:74px;left:48px;right:48px}body.phone .brand{width:238px;height:58px}body.phone nav{gap:34px}body.phone nav button{font-size:30px}body.phone .approach{display:none}body.phone h1{top:250px;left:48px;font-size:106px}body.phone .hero p{top:480px;left:50px;font-size:40px;line-height:1.23}body.phone .hero p span{display:none}body.phone .mobile{display:block}body.phone .dot{left:274px;top:1207px;width:205px;height:203px;font-size:28px}body.phone .possibilities h2{left:48px;top:195px;font-size:88px;letter-spacing:0}body.phone .sentences{left:48px;top:397px;width:640px;gap:16px}body.phone .sentences button{height:80px;font-size:33px;padding:0 30px}body.phone .sentences span{width:50px;height:50px;font-size:34px}body.phone .works h2{left:48px;top:175px;font-size:82px;width:650px}body.phone .work-label{font-size:25px;border-radius:17px;padding:6px 10px}body.phone .work-label small{font-size:16px;margin-top:3px}body.phone .work:nth-child(1) .work-label{top:639px;left:133px;width:225px}body.phone .work:nth-child(2) .work-label{top:1023px;left:133px;width:225px}body.phone .work:nth-child(3) .work-label{top:1367px;left:133px;width:225px}body.phone .works .dot{left:506px;top:1100px;width:115px;height:114px;font-size:0}body.phone #other-works{left:46px;top:1453px;gap:10px;font-size:17px;white-space:nowrap}body.phone #other-works a+a::before{margin-right:10px}body.phone .brief .echo{top:170px;left:48px;font-size:52px}body.phone .brief-content{left:48px;top:738px;width:640px}body.phone .brief h2{font-size:99px;line-height:.9;letter-spacing:0;margin-bottom:38px;white-space:normal}body.phone textarea{height:134px;font-size:39px;padding:38px 42px}body.phone .chips{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin:26px 0}body.phone .chips button{font-size:24px;padding:18px 16px;height:74px}body.phone .reply-row{gap:12px}body.phone #reply{width:415px;height:70px;font-size:20px;padding:18px 24px}body.phone #submit{width:213px;height:70px;font-size:24px}body.phone #form-status{font-size:18px;line-height:1.2;margin:15px 5px 0}body.phone .field-error{font-size:20px;padding:3px 20px}body.phone #contacts{bottom:54px;left:50px;gap:24px}body.phone #contacts>a,body.phone #contacts>button{width:304px;min-width:0;height:88px;padding:12px 24px;gap:18px}body.phone #contacts strong{font-size:25px}body.phone #contacts small{font-size:21px}body.phone #contacts svg{width:46px;height:46px}body.phone #rail{display:none}
/* Glass reactions: transform/opacity/filter only; sheen stays beneath the text. */
button,a,.screen,.work-label{transition:transform 160ms ease,filter 160ms ease,opacity 160ms ease}button:not(.dot),#contacts>a,.work-label{isolation:isolate;overflow:hidden}button:not(.brand)::after,#contacts>a::after,.work-label::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(110deg,transparent 25%,#fff5 48%,transparent 70%);transform:translateX(-120%);opacity:0;transition:transform 200ms ease,opacity 200ms ease;z-index:-1}.ceramic:not(.work-label),.chips button,#contacts>a,#contacts>button,.sentences button,nav button{position:relative}#submit{position:relative}@media(hover:hover){button:hover,#contacts>a:hover,.work:hover .work-label{filter:brightness(1.12);transform:translateY(-2px)}.dot:hover{transform:scale(.97)}button:hover::after,#contacts>a:hover::after,.work:hover .work-label::after{transform:translateX(100%);opacity:.7}.screen:hover{filter:brightness(1.05)}#other-works a:hover{filter:brightness(1.4);text-decoration:underline}}button:active,#contacts>a:active,.work:active .work-label{transform:translateY(2px) scale(.98);filter:brightness(.9)}.dot:active{transform:scale(.94)}button:disabled{cursor:wait;filter:brightness(.7)}
@media(prefers-reduced-motion:reduce){*,*::after{transition:none!important;animation:none!important}#grain{display:none}button:hover,button:active,a:hover,a:active,.work:hover .work-label,.work:active .work-label{transform:none!important}button:hover::after,a:hover::after{opacity:0!important}}

/* Leave the quiet work row above the contacts, and fit both plaque lines. */
#other-works{top:733px}#stage[data-current="2"] #contacts{bottom:40px}
.work-label small{font-size:15px;letter-spacing:0}
body.phone #other-works{top:1448px;font-size:16px;gap:6px}
body.phone #other-works a+a::before{margin-right:6px}
body.phone #stage[data-current="2"] #contacts{bottom:34px}
body.phone .work-label small{font-size:14px;letter-spacing:0}
body.phone #reply{font-size:18px;padding:18px 20px}

.screen{inset:0;background:none;pointer-events:none}.screen video{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:auto}

#work-media{position:fixed;z-index:3;display:none;pointer-events:none}.screen-link{position:absolute;inset:0;pointer-events:none}.screen-link:focus-visible{outline:none}.screen-link:focus-visible video{outline:3px solid #fff4d7;outline-offset:3px}

/* Project the video itself; no flattening/clipping ancestor. */
.screen{inset:0;overflow:visible;background:none;pointer-events:none;transform:none}
.screen video{position:absolute;left:0;top:0;width:720px;height:450px;transform-origin:0 0;object-fit:fill;pointer-events:auto}

#work-media{transition:opacity 360ms linear}

/* Validation belongs to its field, not to extra rows that displace the composition. */
#brief-form{position:relative}.field-error{position:absolute;padding:0;color:#ffb58a;pointer-events:none}
#idea-error{left:52px;top:112px}#reply-error{left:34px;top:298px;font-size:14px}
body.phone #idea-error{left:42px;top:102px;font-size:17px;padding:0}
body.phone #reply-error{left:24px;top:400px;font-size:13px;padding:0}
body.phone #stage:not([data-current="0"]) .approach{display:inline-block}
body.phone #stage:not([data-current="0"]) nav{gap:24px}
body.phone #stage:not([data-current="0"]) nav button{font-size:25px}
body.phone #stage[data-current="3"] .brand{width:180px}

/* Extend the plate lighting beyond the common contained frame. */
#plate-fields{position:fixed;inset:0;pointer-events:none}
#plate-fields>div{position:absolute;background-size:100% 100%;background-repeat:no-repeat}

.screen{inset:auto;left:0;top:0;transform-origin:0 0;filter:opacity(.999);isolation:isolate;pointer-events:auto}
.screen video{position:absolute;inset:0;width:100%;height:100%;transform:none}

.screen-raster{position:absolute;left:0;top:0;pointer-events:none}
/* Zero tracking keeps Cyrillic open; retain the mockup's two-line measures. */
body.phone h1{font-size:94px;width:650px;white-space:nowrap;line-height:1.08}
body.phone .brief h2{font-size:88px;line-height:1.02}
body.phone .sentences button{font-size:30px;white-space:nowrap}
.screen:has(.screen-raster){filter:none;isolation:auto}
/* Only the empty plate rim merges into its blurred extension. */
#stage{--rim:linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent)}
body.phone #stage{--rim:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}
#hold,#loop,#transition{mask-image:var(--rim);-webkit-mask-image:var(--rim)}
body:not(.phone) .brief h2{font-size:94px;line-height:104px}
/* One ellipsis glyph, optically compact rather than three spaced full stops. */
.ellipsis{display:inline-block;width:.72em;transform:scaleX(.72);transform-origin:left center}