/* Исходник стилей. Число с буквой u — пиксель макета 1440×900; сборка (build.py) заменяет его на calc(var(--u)*N). */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
:root{--u:calc(100vw/1440);--hh:max(100svh,calc(var(--u)*600));--k:calc(var(--hh) - calc(var(--u)*900))}
body{--bg:#fff;--fg:#111;--mut:#666;--hair:#dcdcdc;--soft:#f4f4f2;--fd:"Inter";--hw:700;--hc:uppercase;--hl:-.05em;--rad:0px;--btn:999px;--acc:#111;--maxw:none;
  background:var(--bg);color:var(--fg);font-family:"Golos Text",system-ui,sans-serif;line-height:1.45;overflow-x:clip;-webkit-font-smoothing:antialiased}
body.dark{--bg:#000;--fg:#fff;--mut:#9c9c9c;--hair:#2b2b2b;--soft:#151515;--acc:#fff}
body.narrow{--maxw:920px}
body.t1{--fd:"Geist Mono";--hw:500;--hl:0em;--rad:24px;--btn:20px;--soft:#eee}
body.t2{--fd:"Inter Tight";--hw:700;--hl:-.02em;--acc:#fc5102;--soft:#eee}
body.t3{--fd:"Onest";--hw:400;--hc:lowercase;--hl:-.035em;--rad:16px;--btn:20px;--soft:#e6eaeb}
body.t4{--fd:"Sofia Sans Condensed";--hw:700;--hl:-.025em;--btn:0px;--soft:#f1f1f1}
body.t5{--fd:"Inter Tight";--hw:800;--hl:-.02em}
body.t6{--fd:"Inter";--hw:800;--hl:-.025em;--rad:8px}
body.t7{--fd:"Inter Tight";--hw:600;--hl:-.025em}
body.t8{--fd:"Noto Serif Display";--hw:200;--hc:none;--hl:-.03em;--btn:0px}
body.t9{--fd:"Great Vibes";--hw:400;--hc:none;--hl:0em;--btn:999px;--soft:#f5f4f1}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.v{display:none}.v.on{display:block}
.fit{display:inline-block;white-space:nowrap;line-height:.82;padding-right:.06em}
.scr{font-family:"Great Vibes",cursive;font-weight:400;line-height:1;white-space:nowrap}
@keyframes fade{from{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes up{from{transform:translateY(105%)}}
@keyframes rise{from{transform:translateY(calc(var(--u)*40));opacity:0}}
@keyframes zoom{from{scale:1.07}}

.sw{position:fixed;z-index:80;left:50%;bottom:6px;transform:translateX(-50%);display:flex;gap:3px;padding:4px;border-radius:999px;background:rgba(20,20,20,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:.55;transition:opacity .25s}
.sw:hover,.sw:focus-within{opacity:1}
.sw button{width:28px;height:28px;border-radius:50%;color:#fff;font:600 12px "Golos Text",sans-serif;transition:background .2s,color .2s}
.sw button:hover{background:rgba(255,255,255,.18)}
.sw button[aria-pressed=true]{background:#fff;color:#111}
.swname{position:fixed;z-index:80;left:50%;bottom:48px;transform:translateX(-50%);background:rgba(20,20,20,.88);color:#fff;font-size:12px;padding:6px 12px;border-radius:999px;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.swname.show{opacity:1}

.v .hero{position:relative;height:var(--hh);overflow:hidden}
.v .hero img{max-width:none}

/* ───── 1 · рамка и док ───── */
.m .hero{background:#fff}
.m .frame{position:absolute;inset:calc(var(--u)*8);border-radius:calc(var(--u)*156);background:#e9e9e9;overflow:hidden}
.m .frame>img{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);animation:fade 1.4s both}
.m h1{position:absolute;left:calc(var(--u)*88);top:calc(50% - calc(var(--u)*78));font:500 calc(var(--u)*98)/calc(var(--u)*107.8) "Geist Mono",monospace;letter-spacing:calc(var(--u)*-1);text-transform:uppercase}
.m h1 i{display:inline-block;font-style:normal;opacity:0;animation:tick .01s forwards}
@keyframes tick{to{opacity:1}}
.m .sub{position:absolute;left:calc(var(--u)*88);top:calc(50% + calc(var(--u)*34));font:500 calc(var(--u)*18)/calc(var(--u)*28) "Geist Mono",monospace;letter-spacing:0;text-transform:uppercase}
.m .txt{position:absolute;left:calc(var(--u)*1004);top:calc(50% - calc(var(--u)*58));width:calc(var(--u)*320);font:400 calc(var(--u)*14)/1.45 "Inter",sans-serif;color:#666}
.m .dock{position:absolute;left:calc(var(--u)*392);bottom:calc(var(--u)*27);width:calc(var(--u)*624);height:calc(var(--u)*90);padding:calc(var(--u)*12);display:flex;align-items:center;gap:calc(var(--u)*30);border-radius:calc(var(--u)*28);background:rgba(99,99,99,.24);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:500 calc(var(--u)*12)/1 "Geist Mono",monospace;text-transform:uppercase;color:#fff;animation:rise 1s .5s cubic-bezier(.2,.7,.1,1) both}
.m .dock img{width:calc(var(--u)*100);height:calc(var(--u)*66);border-radius:calc(var(--u)*16);object-fit:cover;object-position:60% 22%;margin-right:calc(var(--u)*36)}
.m .dock a{transition:opacity .2s}
.m .dock a:hover{opacity:.6}
.m .dock .go{margin-left:auto;width:calc(var(--u)*129);height:calc(var(--u)*65);border-radius:calc(var(--u)*20);background:#fff;color:#111;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*10)}
.m .dock .go:hover{opacity:1}
.m .dock .go i{font-style:normal;transition:transform .4s cubic-bezier(.3,.8,.2,1)}
.m .dock .go:hover i{transform:rotate(180deg)}

/* ───── 2 · слово по буквам ───── */
.o .hero{background:#eee;font-family:"Inter",sans-serif;font-variation-settings:"opsz" 32}
.o .ph{position:absolute;left:calc(var(--u)*600);bottom:0;height:100%;width:auto;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent);animation:fade 1.4s both}
.o header{position:absolute;left:calc(var(--u)*60);right:calc(var(--u)*60);top:calc(var(--u)*16);height:calc(var(--u)*43);display:flex;align-items:center}
.o .logo{font:700 calc(var(--u)*20)/1 "Inter Tight",sans-serif;letter-spacing:-.03em;text-transform:uppercase}
.o header nav{margin-left:auto;display:flex;gap:calc(var(--u)*44);font-size:calc(var(--u)*16);font-weight:500}
.o header nav a{transition:opacity .2s}
.o header nav:hover a:not(:hover){opacity:.4}
.o sup{font:500 calc(var(--u)*12)/1 "Geist Mono",monospace;letter-spacing:calc(var(--u)*.6);margin-left:calc(var(--u)*5);vertical-align:top;opacity:.6}
.o .pill{margin-left:calc(var(--u)*40);height:calc(var(--u)*43);padding:0 calc(var(--u)*22);display:grid;place-items:center;border-radius:calc(var(--u)*1000);background:#fff;font-size:calc(var(--u)*15);font-weight:500;transition:background .3s,color .3s}
.o .pill:hover{background:#111;color:#fff}
.o h1{position:absolute;left:calc(var(--u)*60);bottom:calc(var(--u)*44);font:700 calc(var(--u)*82)/calc(var(--u)*88) "Inter Tight",sans-serif;letter-spacing:calc(var(--u)*-1.2);text-transform:uppercase}
.o h1>span{display:block;height:calc(var(--u)*88);white-space:nowrap}
.o h1>.word{overflow:hidden;height:calc(calc(var(--u)*88) + .22em);margin-top:-.22em;padding-top:.22em}
.o .word i{display:inline-block;font-style:normal;opacity:0;transform:translateY(105%);will-change:transform;animation:oin .55s cubic-bezier(.22,1,.36,1) forwards}
.o .word.out i{animation:oout .44s cubic-bezier(.64,0,.78,0) forwards}
@keyframes oin{to{opacity:1;transform:none}}
@keyframes oout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-105%)}}
.o .star{display:inline-block;width:calc(var(--u)*58);height:calc(var(--u)*58);margin-left:calc(var(--u)*16);vertical-align:calc(var(--u)*-3);color:#fc5102;animation:spin 8s linear infinite}
.o .star svg{display:block;width:100%;height:100%}
.o .txt{position:absolute;left:calc(var(--u)*1040);bottom:calc(var(--u)*48);width:calc(var(--u)*340);font-size:calc(var(--u)*20);font-weight:600;letter-spacing:-.02em;line-height:calc(var(--u)*26)}

/* ───── 3 · фото в рамке ───── */
.s .hero{background:#d3d8da;font-family:"Onest",sans-serif}
.s .frame{position:absolute;inset:calc(var(--u)*16);border-radius:calc(var(--u)*16);overflow:hidden;color:#fff}
.s .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:zoom 2.4s cubic-bezier(.2,.7,.1,1) both}
.s .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.28),rgba(0,0,0,.05) 35%,rgba(0,0,0,.5))}
.s .frame>*:not(.bg){z-index:1}
.s header{position:absolute;left:calc(var(--u)*30);right:calc(var(--u)*24);top:calc(var(--u)*16);height:calc(var(--u)*38);display:flex;align-items:center;font-size:calc(var(--u)*14)}
.s .logo i{display:block;width:calc(var(--u)*30);height:calc(var(--u)*18);background:linear-gradient(#fff,#fff) 0 0/calc(var(--u)*14) calc(var(--u)*14) no-repeat,linear-gradient(#fff,#fff) calc(var(--u)*14) calc(var(--u)*9)/calc(var(--u)*12) calc(var(--u)*9) no-repeat,linear-gradient(#fff,#fff) calc(var(--u)*26) calc(var(--u)*9)/calc(var(--u)*4) calc(var(--u)*9) no-repeat}
.s header nav{display:flex;align-items:center;gap:calc(var(--u)*36);margin-left:calc(var(--u)*50)}
.s header .r{margin-left:auto}
.s .pill{background:#f4f4f4;color:#111;border-radius:calc(var(--u)*20);padding:calc(var(--u)*9) calc(var(--u)*24);transition:background .3s,color .3s}
.s .pill:hover{background:#111;color:#fff}
.s .card,.s .shot{position:absolute;top:calc(calc(var(--u)*164) + var(--k)*.3);width:calc(var(--u)*222);height:calc(var(--u)*255);border-radius:calc(var(--u)*8);background:rgba(255,255,255,.14);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.s .card{left:calc(var(--u)*914);padding:calc(var(--u)*16);animation:rise 1s .5s cubic-bezier(.2,.7,.1,1) both}
.s .card i{display:block;width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:calc(var(--u)*2);background:#fff;opacity:.6;margin-bottom:calc(var(--u)*22)}
.s .card b{display:block;font-size:calc(var(--u)*18);font-weight:400;line-height:calc(var(--u)*25);margin-bottom:calc(var(--u)*8)}
.s .card p{font-size:calc(var(--u)*14);line-height:calc(var(--u)*21);opacity:.8}
.s .shot{left:calc(var(--u)*1146);padding:calc(var(--u)*8);animation:rise 1s .6s cubic-bezier(.2,.7,.1,1) both}
.s .shot img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--u)*4)}
.s h1{position:absolute;left:calc(var(--u)*44);bottom:calc(var(--u)*128);font-size:calc(var(--u)*240);font-weight:400;letter-spacing:calc(var(--u)*-6);line-height:calc(var(--u)*192);animation:sin 1.6s cubic-bezier(.2,.7,.1,1) both}
@keyframes sin{from{opacity:0;filter:blur(18px);transform:translateY(calc(var(--u)*20))}}
.s h1 small{font-size:calc(var(--u)*40);font-weight:300;letter-spacing:calc(var(--u)*-1);margin-left:calc(var(--u)*34)}
.s .txt{position:absolute;left:calc(var(--u)*48);bottom:calc(var(--u)*48);width:calc(var(--u)*540);font-size:calc(var(--u)*18);line-height:calc(var(--u)*27)}

/* ───── 4 · фото поверх заголовка (вписывается в экран целиком) ───── */
.l{--u:min(calc(100vw/1440),calc(100svh/900));background:#f7f7f7}
.l .hero{width:calc(var(--u)*1440);height:calc(var(--u)*900);margin:0 auto;background:#f7f7f7;color:#101010}
.l .logo{position:absolute;left:calc(var(--u)*56);top:calc(var(--u)*28);font:700 calc(var(--u)*30)/calc(var(--u)*21) "Sofia Sans Condensed",sans-serif;letter-spacing:calc(var(--u)*-.6);text-transform:uppercase}
.l nav{position:absolute;left:calc(var(--u)*334);top:calc(var(--u)*40);display:flex;gap:calc(var(--u)*86);font:400 calc(var(--u)*14)/1 "Geist Mono",monospace;text-transform:uppercase}
.l nav a:hover{background:#101010;color:#f7f7f7}
.l .cta{position:absolute;left:calc(var(--u)*1251);top:calc(var(--u)*38);width:calc(var(--u)*133);display:flex;justify-content:space-between;font:400 calc(var(--u)*18)/calc(var(--u)*17.82) "Geist Mono",monospace;text-transform:uppercase;border-bottom:1.5px solid #101010;padding-bottom:calc(var(--u)*5)}
.l .cta i{font-style:normal;transition:transform .3s}
.l .cta:hover i{transform:translate(calc(var(--u)*3),calc(var(--u)*-3))}
.l .yr{position:absolute;left:calc(var(--u)*66);top:calc(var(--u)*136);font:700 calc(var(--u)*13)/1 "Sofia Sans Condensed",sans-serif}
.l h1{position:absolute;left:calc(var(--u)*52);width:calc(var(--u)*900);top:calc(var(--u)*128);font:700 calc(var(--u)*100)/1 "Sofia Sans Condensed",sans-serif;letter-spacing:-.058em;text-transform:uppercase;word-spacing:-.1em}
.l h1 i{display:inline-block;font-style:normal;animation:drop .9s cubic-bezier(.2,.7,.1,1) both}
@keyframes drop{from{transform:translateY(-60%);opacity:0}}
.l .say{position:absolute;left:calc(var(--u)*1004);top:calc(var(--u)*150);width:calc(var(--u)*380);font:700 calc(var(--u)*50)/.94 "Sofia Sans Condensed",sans-serif;letter-spacing:calc(var(--u)*-1);text-transform:uppercase}
.l .sp{position:absolute;left:calc(var(--u)*1001);top:calc(var(--u)*338);width:calc(var(--u)*400);font:700 calc(var(--u)*15)/calc(var(--u)*14.85) "Sofia Sans Condensed",sans-serif;letter-spacing:calc(var(--u)*15);text-transform:uppercase;text-align:right;white-space:nowrap}
.l .panel{position:absolute;left:calc(var(--u)*446);top:calc(var(--u)*400);width:calc(var(--u)*548);height:calc(var(--u)*300);background:#efefef}
.l ul{position:absolute;left:calc(var(--u)*446);top:calc(var(--u)*566);list-style:none;font:700 calc(var(--u)*27)/calc(var(--u)*34) "Sofia Sans Condensed",sans-serif;letter-spacing:0;text-transform:uppercase;z-index:2}
.l .img{position:absolute;left:calc(var(--u)*648);top:calc(var(--u)*318);width:calc(var(--u)*322);height:calc(var(--u)*362);overflow:hidden;animation:lclip 1.2s .3s cubic-bezier(.2,.7,.1,1) both}
@keyframes lclip{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
.l .img img{width:100%;height:100%;object-fit:cover;object-position:55% 20%;filter:grayscale(1)}
.l .cap{position:absolute;left:calc(var(--u)*551);top:calc(var(--u)*736);width:calc(var(--u)*338);font:300 calc(var(--u)*14)/calc(var(--u)*19.3) "Geist Mono",monospace;text-transform:uppercase;text-align:center}
.l .rw{position:absolute;left:calc(var(--u)*1151);top:calc(var(--u)*820);width:calc(var(--u)*233);display:flex;flex-direction:column;gap:calc(var(--u)*4)}
.l .rw span{font:300 calc(var(--u)*18)/calc(var(--u)*17.82) "Geist Mono",monospace;text-transform:uppercase}
.l .rw b{font:700 calc(var(--u)*45)/calc(var(--u)*44.55) "Sofia Sans Condensed",sans-serif;letter-spacing:calc(var(--u)*-.9);text-transform:uppercase}

/* ───── 5 · тёмный: портрет, имя и каллиграфия ───── */
.x .hero{background:#000;color:#fff}
.x .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%;filter:grayscale(1) brightness(.6) contrast(1.08);animation:zoom 2.6s cubic-bezier(.2,.7,.1,1) both}
.x header{position:absolute;left:calc(var(--u)*28);right:calc(var(--u)*28);top:calc(var(--u)*22);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.x .logo{font:800 calc(var(--u)*22)/1 "Inter Tight",sans-serif;letter-spacing:-.06em}
.x header span{font:500 calc(var(--u)*12)/1 "Geist Mono",monospace;text-transform:uppercase}
.x .bur{justify-self:end;width:calc(var(--u)*44);height:calc(var(--u)*44);background:#fff;display:grid;place-items:center;transition:background .3s}
.x .bur i{width:calc(var(--u)*18);height:calc(var(--u)*7);border-top:1.5px solid #000;border-bottom:1.5px solid #000}
.x .bur:hover{background:#f3e7d6}
.x .txt{position:absolute;left:calc(var(--u)*880);right:calc(var(--u)*40);bottom:calc(var(--u)*330);font:500 calc(var(--u)*13)/1.6 "Geist Mono",monospace;text-transform:uppercase;animation:fade 1.2s .8s both}
.x h1{position:absolute;left:calc(var(--u)*24);bottom:0;overflow:hidden;padding:.06em .1em .04em 0;font:800 calc(var(--u)*262)/.84 "Inter Tight",sans-serif;letter-spacing:-.045em;text-transform:uppercase}
.x h1 span{display:block;animation:up 1.2s .15s cubic-bezier(.2,.7,.1,1) both}
.x .scr{position:absolute;left:calc(var(--u)*470);bottom:calc(var(--u)*150);font-size:calc(var(--u)*170);color:#f3e7d6;transform:rotate(-7deg);animation:fade 1.4s 1s both}
.x .go{position:absolute;left:calc(var(--u)*880);bottom:calc(var(--u)*262);border:1px solid #fff;border-radius:999px;padding:calc(var(--u)*13) calc(var(--u)*22);font:500 calc(var(--u)*14)/1 "Inter",sans-serif;transition:background .3s,color .3s}
.x .go:hover{background:#fff;color:#000}

/* ───── 6 · тёмный: имя и три кадра ───── */
.z .hero{background:#000;color:#fff;font-family:"Inter",sans-serif;height:calc(var(--u)*1040)}
.z nav{position:absolute;left:calc(var(--u)*28);right:calc(var(--u)*28);top:calc(var(--u)*24);display:flex;justify-content:space-between;font-size:calc(var(--u)*13);font-weight:500;text-transform:uppercase}
.z nav a{transition:opacity .2s}
.z nav:hover a:not(:hover){opacity:.4}
.z h1{position:absolute;left:calc(var(--u)*28);right:calc(var(--u)*28);top:calc(var(--u)*56);overflow:hidden;padding:.04em 0 .05em;font-weight:800;font-variation-settings:"opsz" 32;letter-spacing:-.08em}
.z h1 .fit{animation:up 1.2s cubic-bezier(.2,.7,.1,1) both}
.z .cap{position:absolute;left:calc(var(--u)*28);right:calc(var(--u)*28);top:calc(var(--u)*352);display:flex;justify-content:space-between;font-size:calc(var(--u)*14);color:#a3a3a3}
.z .row{position:absolute;left:calc(var(--u)*28);right:calc(var(--u)*28);top:calc(var(--u)*392);height:calc(var(--u)*602);display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*16)}
.z .row img{width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:calc(var(--u)*8);filter:grayscale(1) contrast(1.05);animation:rise 1.1s cubic-bezier(.2,.7,.1,1) both;transition:filter .5s}
.z .row img:nth-child(2){animation-delay:.12s}
.z .row img:nth-child(3){animation-delay:.24s}

/* ───── 7 · тёмный: заявление и видео ───── */
.e .hero{background:#000;color:#fff;font-family:"Inter",sans-serif;display:flex;flex-direction:column;padding:calc(var(--u)*24) calc(var(--u)*30) 0}
.e header{display:flex;justify-content:space-between;font-size:calc(var(--u)*13);font-weight:500;text-transform:uppercase}
.e .logo{font-weight:800;font-size:calc(var(--u)*15)}
.e header nav{display:flex;gap:calc(var(--u)*108)}
.e h1{margin-top:calc(var(--u)*92);font:600 calc(var(--u)*104)/.96 "Inter Tight",sans-serif;letter-spacing:-.05em;text-transform:uppercase;max-width:calc(var(--u)*1340)}
.e h1 b{font-weight:inherit;display:inline-block;opacity:0;animation:tick .01s forwards}
.e .ast{display:inline-block;font-style:normal;font-size:.8em;animation:spin 10s linear infinite}
.e .row{display:flex;justify-content:space-between;margin-top:calc(var(--u)*28);font-size:calc(var(--u)*13);text-transform:uppercase}
.e .vid{flex:1;min-height:calc(var(--u)*180);margin:calc(var(--u)*40) calc(var(--u)*-30) 0;overflow:hidden}
.e .vid video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}

/* ───── 8 · узкая колонка с каллиграфией ───── */
.c .hero{height:auto;min-height:var(--hh);max-width:760px;margin:0 auto;padding:26px 20px 70px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:visible}
.c nav{display:flex;align-items:center;gap:34px;font-size:14px}
.c nav a:not(.mk){background:linear-gradient(#111,#111) 0 100%/0 1px no-repeat;transition:background-size .35s;padding-bottom:3px}
.c nav a:not(.mk):hover{background-size:100% 1px}
.c .mk{width:50px;height:50px;border:1px solid #111;border-radius:50%;display:grid;place-items:center;font:400 17px/1 "Forum",serif;margin:0 14px;transition:background .3s,color .3s}
.c .mk:hover{background:#111;color:#fff}
.c .who{margin-top:9svh;font:400 12px/1 "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#666}
.c h1{position:relative;margin-top:44px;font:200 clamp(88px,14vw,188px)/.9 "Noto Serif Display",serif;letter-spacing:-.055em}
.c h1 i{display:inline-block;font-style:normal;animation:cin 1.5s cubic-bezier(.2,.7,.1,1) both}
@keyframes cin{from{opacity:0;filter:blur(14px);transform:translateY(.06em)}}
.c .scr{position:absolute;left:-4%;top:-.42em;font-size:.62em;letter-spacing:0;color:#8a6f55;transform:rotate(-8deg);animation:fade 1.4s 1s both}
.c .ph{width:230px;aspect-ratio:3/4;margin-top:40px;border-radius:999px 999px 0 0;overflow:hidden;animation:rise 1.2s .4s cubic-bezier(.2,.7,.1,1) both}
.c .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.c .lead{margin-top:30px;font:300 26px/1.2 "Noto Serif Display",serif;letter-spacing:-.01em;max-width:18ch}
.c .lnk{margin-top:26px;font-size:15px;font-weight:500;border-bottom:1px solid #111;padding-bottom:4px;transition:letter-spacing .3s}
.c .lnk:hover{letter-spacing:.04em}

/* ───── 9 · каллиграфия: фамилия от руки поверх фото, остальное мелким гротеском ───── */
.g .hero{background:#fff;color:#111;font-family:"Inter",sans-serif}
.g header{position:absolute;left:calc(var(--u)*40);right:calc(var(--u)*40);top:calc(var(--u)*26);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:calc(var(--u)*13);font-weight:500;z-index:3}
.g header nav{display:flex;gap:calc(var(--u)*38)}
.g header nav a{transition:opacity .2s}
.g header nav:hover a:not(:hover){opacity:.4}
.g .cta{justify-self:end;border:1px solid #111;border-radius:999px;padding:calc(var(--u)*10) calc(var(--u)*20);transition:background .3s,color .3s}
.g .cta:hover{background:#111;color:#fff}
.g .ph{position:absolute;left:calc(var(--u)*900);top:calc(var(--u)*96);bottom:calc(var(--u)*56);width:calc(var(--u)*480);overflow:hidden;animation:gclip 1.4s cubic-bezier(.2,.7,.1,1) both}
@keyframes gclip{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.g .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:zoom 2.6s cubic-bezier(.2,.7,.1,1) both}
.g h1{position:absolute;left:calc(var(--u)*10);top:calc(50% - calc(var(--u)*270));z-index:2;padding:.2em .3em .1em .1em;font:400 calc(var(--u)*292)/1 "Great Vibes",cursive;white-space:nowrap;-webkit-mask-image:linear-gradient(to right,#000 0 50%,transparent 50% 100%);-webkit-mask-size:200% 100%;mask-image:linear-gradient(to right,#000 0 50%,transparent 50% 100%);mask-size:200% 100%;animation:gwrite 2.4s .3s cubic-bezier(.4,.1,.2,1) both}
@keyframes gwrite{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.g .who{position:absolute;left:calc(var(--u)*64);bottom:calc(var(--u)*150);font-size:calc(var(--u)*12);font-weight:600;letter-spacing:.14em;text-transform:uppercase;animation:fade 1.2s 1.6s both}
.g .txt{position:absolute;left:calc(var(--u)*64);bottom:calc(var(--u)*62);width:calc(var(--u)*400);font-size:calc(var(--u)*22);font-weight:500;letter-spacing:-.03em;line-height:1.18;animation:fade 1.2s 1.8s both}
.g .yr{position:absolute;right:calc(var(--u)*16);bottom:calc(var(--u)*56);font-size:calc(var(--u)*12);font-weight:600;letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl}

/* ═════════ Блоки ниже первого экрана ═════════ */
.rest{background:var(--bg);color:var(--fg);padding:0 32px}
.sec{max-width:var(--maxw);margin:0 auto;padding:130px 0;border-top:1px solid var(--hair)}
.sec header{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:end;margin-bottom:52px}
.sec h2{font-family:var(--fd),serif;font-weight:var(--hw);text-transform:var(--hc);letter-spacing:var(--hl);font-size:clamp(44px,7.6vw,124px);line-height:.92;overflow:hidden;padding:.16em .14em .26em 0;margin:-.16em 0 -.18em}
.narrow .sec h2{font-size:clamp(44px,6vw,84px)}
.sec h2 span{display:block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.7,.1,1)}
.sec h2.in span{transform:none}
.sec header p{max-width:40ch;font-size:16px;color:var(--mut);padding-bottom:8px}
[data-f]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1)}
[data-f].in{opacity:1;transform:none}
[data-clip]{overflow:hidden;clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.2,.7,.1,1)}
[data-clip] img{transform:scale(1.16);transition:transform 1.6s cubic-bezier(.2,.7,.1,1)}
[data-clip].in{clip-path:inset(0)}
[data-clip].in img{transform:none}

.intro{border-top:0;padding:150px 0 110px;display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:end}
.intro .sub{font-size:clamp(17px,1.45vw,22px);line-height:1.42;max-width:36ch;color:var(--mut);padding-bottom:.5em}
.quote blockquote{max-width:24ch}
/* жирным шрифтам — чуть легче и свободнее, чтобы длинная фраза читалась */
.t2 .intro .slogan,.t2 .quote blockquote,.t5 .intro .slogan,.t5 .quote blockquote,.t6 .intro .slogan,.t6 .quote blockquote{font-weight:600;letter-spacing:-.03em;line-height:1.06}
.intro .slogan,.quote blockquote{font-family:var(--fd),serif;font-weight:var(--hw);letter-spacing:calc(var(--hl)*.6);font-size:clamp(30px,4.7vw,76px);line-height:1.04;max-width:20ch}
.narrow .intro .slogan,.narrow .quote blockquote{font-size:clamp(28px,3.6vw,50px)}
[data-scrub] b{font-weight:inherit;opacity:.16;transition:opacity .25s}
[data-scrub] b.on{opacity:1}

.film{border-top:0;padding:0 0 130px;max-width:none}
.film-box{position:relative;margin:0 auto;width:100%;max-width:calc(var(--maxw) + 0px);transform:scale(calc(.64 + .36*var(--p,0)));will-change:transform;border-radius:calc(28px*(1 - var(--p,0)) + var(--rad)*var(--p,0));overflow:hidden;aspect-ratio:16/9;background:var(--soft)}
.film-box video{width:100%;height:100%;object-fit:cover}
.film-cap{position:absolute;left:22px;bottom:18px;display:flex;flex-direction:column;color:#fff;font-size:13px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.film-cap b{font-size:18px;font-weight:600}

.srv{position:relative}
.srv ul{list-style:none}
.srv li{display:grid;grid-template-columns:1.6fr 1fr;gap:8px 32px;align-items:start;padding:26px 0;border-top:1px solid var(--fg)}
.srv li b{grid-row:1/3}
.srv li span,.srv li i{grid-column:2}
.srv li:last-child{border-bottom:1px solid var(--fg)}
.srv b{font-family:var(--fd),serif;font-weight:var(--hw);text-transform:var(--hc);letter-spacing:var(--hl);font-size:clamp(26px,3.6vw,58px);line-height:1}
.srv li span{font-size:15px;color:var(--mut);max-width:44ch}
.srv li i{font-style:normal;font-size:13px;white-space:nowrap}
.sec h2,.srv b,.intro .slogan,.quote blockquote{word-spacing:.06em}
.peek{display:none;position:fixed;z-index:30;left:0;top:0;width:230px;aspect-ratio:3/4;object-fit:cover;pointer-events:none;opacity:0;transform:translate(-50%,-56%) scale(.86) rotate(-3deg);transition:opacity .3s,transform .45s cubic-bezier(.2,.7,.1,1)}
.peek.on{opacity:1;transform:translate(-50%,-56%) scale(1) rotate(-3deg)}

.works{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.works figure{will-change:transform}
.works [data-clip]{border-radius:var(--rad)}
.works img{width:100%;aspect-ratio:3/4;object-fit:cover}
.works figcaption{display:flex;justify-content:space-between;gap:12px;padding:10px 0 26px;font-size:14px}
.works figcaption b{font-weight:600}
.works figcaption span{color:var(--mut);text-align:right}

.steps ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;padding-top:26px}
.steps ol::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s cubic-bezier(.2,.7,.1,1)}
.steps ol.in::before{transform:none}
.steps li{display:flex;flex-direction:column;gap:12px}
.steps i{font:400 13px/1 "Geist Mono",monospace;font-style:normal;color:var(--mut)}
.steps b{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:38px}
.steps li span{font-size:15px;color:var(--mut);max-width:28ch}

.about{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.about-ph{position:sticky;top:32px}
.about-ph [data-clip]{border-radius:var(--rad)}
.about-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.about-tx h2{margin-bottom:34px}
.about-tx .big{font-size:clamp(20px,2vw,30px);line-height:1.25;letter-spacing:-.015em;max-width:30ch;margin-bottom:22px}
.about-tx p{font-size:16px;color:var(--mut);max-width:46ch}
.about-tx .big{color:var(--fg)}
.about dl{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px;border-top:1px solid var(--fg);padding-top:20px}
.about dd{font-family:var(--fd),serif;font-weight:var(--hw);letter-spacing:var(--hl);font-size:clamp(40px,5vw,84px);line-height:1;font-variant-numeric:tabular-nums}
.about dt{font-size:13px;color:var(--mut);margin-bottom:10px}

.team ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.team li{background:var(--soft);border-radius:var(--rad);padding:22px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.team b{font-size:18px;font-weight:600;letter-spacing:-.01em}
.team li span{font-size:14px;color:var(--mut)}

.quote cite{display:block;margin-top:30px;font-style:normal;font-size:14px;color:var(--mut)}

.form{display:grid;grid-template-columns:1.6fr 1fr;gap:0 56px}
.form header{grid-column:1/-1}
.form form{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;align-content:start}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mut)}
.form .full{grid-column:1/-1}
.form input,.form textarea{font:inherit;font-size:18px;color:var(--fg);border:0;border-bottom:1px solid var(--fg);border-radius:0;background:none;padding:8px 0;resize:vertical}
.form input::placeholder{color:var(--mut);opacity:.6}
.form input:focus,.form textarea:focus{outline:0;border-bottom-width:2px;padding-bottom:7px}
.form button{justify-self:start;background:var(--acc);color:var(--bg);border-radius:var(--btn);padding:17px 30px;font-size:15px;font-weight:500;transition:opacity .2s}
.t2 .form button{color:#fff}
.form button:hover{opacity:.82}
.form .note{align-self:center;font-size:13px;color:var(--mut)}
.form .note.ok{color:#2f9a5f}
.form aside{display:flex;flex-direction:column;gap:14px}
.form aside a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--fg);padding:10px 0;font-size:22px;font-weight:500;letter-spacing:-.02em;transition:padding-left .3s}
.form aside a:hover{padding-left:10px}
.form aside a span{font-size:14px;font-weight:400;color:var(--mut);letter-spacing:0}
.form aside p{font-size:14px;margin-top:8px}
.form aside small{font-size:11px;color:var(--mut);line-height:1.35}

.foot{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--hair);padding:22px 0 18px;overflow:hidden}
.foot-top{display:flex;justify-content:space-between;gap:20px;font-size:13px;color:var(--mut)}
.foot-top a{color:var(--fg)}
.foot-name{margin-top:40px;font-family:var(--fd),serif;font-weight:var(--hw);letter-spacing:var(--hl);transform:translateY(calc(42%*(1 - var(--p,0))));will-change:transform}
.foot-name .fit{line-height:.86}



/* ═════════ Вау-блоки ═════════ */
.works-pin{display:contents}
/* видео сквозь буквы: надпись растёт при прокрутке, пока видео не займёт весь экран */
.wow{display:none;order:2;position:relative;height:280vh;width:100vw;align-self:center}
.wow-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:#000}
.wow-pin video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wow-mask{position:absolute;inset:-1px;display:grid;place-items:center;background:#fff;color:#000;mix-blend-mode:screen;opacity:var(--mo,1);transform-origin:var(--ox,50%) 50%;transform:scale(var(--s,1))}
.dark .wow-mask{background:#000;color:#fff;mix-blend-mode:multiply}
.wow-mask span{font:800 21vw/1 "Inter Tight",sans-serif;letter-spacing:-.03em;white-space:nowrap}
.wow-cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;font-size:13px;color:var(--fg);mix-blend-mode:difference;opacity:calc(1 - var(--z,0)*6)}
.t2 .wow,.t5 .wow,.t6 .wow,.t9 .wow{display:block}
.t2 .film,.t5 .film,.t6 .film,.t9 .film{display:none}
.t2 .wow,.t5 .wow{order:4}.t6 .wow{order:3}.t9 .wow{order:5}
/* манифест: три фразы из цифр клиента, каждая проявляется по словам */
.mani{display:none;order:5;border-top:0;padding:120px 0}
.mani p{font-family:var(--fd),serif;font-weight:var(--hw);text-transform:var(--hc);letter-spacing:calc(var(--hl)*.7);font-size:clamp(30px,5.2vw,84px);line-height:1.06;max-width:18ch;word-spacing:.06em}
.mani p+p{margin-top:.5em;margin-left:16%}
.mani p+p+p{margin-left:32%}
.t1 .mani,.t3 .mani,.t4 .mani,.t7 .mani,.t8 .mani{display:block}
.t1 .mani p,.t8 .mani p{margin-left:auto;margin-right:auto;text-align:center}
.t1 .mani p{font-family:"Inter",sans-serif;font-weight:500;letter-spacing:-.04em}
.t7 .mani p{font-size:clamp(34px,6.4vw,104px);max-width:none}
.t4 .sec.mani{display:block;padding-left:calc(30% + 32px)}
/* день по минутам: большое время слева меняется, пока справа листаются моменты дня */
.day{display:none;order:5}
.t4 .day,.t8 .day,.t9 .day,.t3 .day{display:block}
.t4 .sec.steps,.t8 .steps,.t9 .steps,.t3 .steps{display:none}
.t4 .day{display:grid}
.day-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.day-clock{position:sticky;top:34vh;font-family:"Inter Tight",sans-serif;font-weight:600;font-size:clamp(72px,12.5vw,210px);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.t8 .day-clock{font-family:"Noto Serif Display",serif;font-weight:200}
.t3 .day-clock{font-family:"Onest",sans-serif;font-weight:400;letter-spacing:-.06em}
.t4 .day-clock{font-family:"Sofia Sans Condensed",sans-serif;font-weight:700}
.day ol{list-style:none}
.day li{display:grid;grid-template-columns:70px 1fr;gap:6px 18px;padding:34px 0;border-top:1px solid var(--hair);opacity:.28;transition:opacity .45s}
.day li.cur{opacity:1}
.day li i{font:400 13px/1.9 "Geist Mono",monospace;font-style:normal;grid-row:1/3;color:var(--mut)}
.day li b{font-size:clamp(22px,2.2vw,32px);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.day li span{font-size:15px;color:var(--mut);max-width:44ch}
.t8 .day-grid{grid-template-columns:1fr;justify-items:center;gap:20px}
.t8 .day-clock{position:sticky;top:12vh;background:var(--bg);width:100%;text-align:center;padding:10px 0 20px;z-index:2}
.t8 .day li{grid-template-columns:1fr;justify-items:center}
.t8 .day li i{grid-row:auto}
/* ═════════ Разная подача блоков под каждый вариант ═════════ */
/* 1, 3 — горизонтальная лента, листается вбок */
.t1 .works-pin,.t3 .works-pin{display:block;height:260vh}
.t1 .works,.t3 .works{position:sticky;top:16vh;display:flex;gap:14px;width:max-content;will-change:transform;transform:translateX(var(--x,0px))}
.t1 .works figure,.t3 .works figure{flex:0 0 auto;width:30vw}
.t1 #works,.t3 #works{overflow:clip}
.t1 .works img{aspect-ratio:1/1}
.t1 .sec{border-top:0}
.t1 .team li,.t1 .srv li{border-radius:24px}
.t1 .srv li,.t3 .srv li{position:sticky;background:#fff;border:1px solid var(--hair);padding:34px 30px;margin-bottom:14px;min-height:190px}
.t3 .srv li{border-radius:16px}
.t1 .srv li:nth-child(1),.t3 .srv li:nth-child(1){top:96px}
.t1 .srv li:nth-child(2),.t3 .srv li:nth-child(2){top:120px}
.t1 .srv li:nth-child(3),.t3 .srv li:nth-child(3){top:144px}
.t1 .srv li:last-child,.t3 .srv li:last-child{border:1px solid var(--hair)}
.t1 .srv li:last-child{border:0}
/* 2 — крупно, по два в ряд, подпись сверху */
.t2 .works{grid-template-columns:1fr 1fr;gap:24px 20px}
.t2 .works img{aspect-ratio:4/3}
.t2 .works figure{display:flex;flex-direction:column-reverse}
.t2 .works figcaption{padding:0 0 10px;font-size:16px;text-transform:uppercase;font-weight:600}
/* 4 — список строк с маленькими кадрами, как оглавление */
.t4 .works{grid-template-columns:1fr;gap:0}
.t4 .works figure{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;border-top:1px solid var(--fg);padding:14px 0}
.t4 .works figure:last-child{border-bottom:1px solid var(--fg)}
.t4 .works img{aspect-ratio:1/1;filter:grayscale(1)}
.t4 .works figcaption{padding:0;align-items:baseline}
.t4 .works figcaption b{font:700 clamp(30px,4.4vw,68px)/1 "Sofia Sans Condensed",sans-serif;letter-spacing:-.05em;text-transform:uppercase}
.t4 .works figcaption span{font:300 13px/1.4 "Geist Mono",monospace;text-transform:uppercase}
/* 5, 7 — тёмные: два больших кадра, остальные мельче */
.t5 .works,.t7 .works{grid-template-columns:repeat(12,1fr);gap:16px}
.t5 .works figure,.t7 .works figure{grid-column:span 3}
.t5 .works figure:nth-child(-n+2),.t7 .works figure:nth-child(-n+2){grid-column:span 6}
.t5 .works figure:nth-child(-n+2) img,.t7 .works figure:nth-child(-n+2) img{aspect-ratio:4/3}
.t5 .works img,.t7 .works img{filter:grayscale(1);transition:filter .5s}
.t5 .works figure:hover img,.t7 .works figure:hover img{filter:none}
.t7 .sec header{grid-template-columns:1fr}
.t7 .sec h2{font-size:clamp(56px,11vw,180px)}
/* 6 — тёмный: высокие кадры вплотную, подпись поверх */
.t6 .works{gap:16px}
.t6 .works figure{position:relative}
.t6 .works img{aspect-ratio:2/3}
.t6 .works figcaption{position:absolute;left:14px;right:14px;bottom:12px;padding:0;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.t6 .works figcaption span{color:#ddd}
/* 8, 9 — антиква: две колонки со сдвигом, заголовки по центру */
.t8 .works{grid-template-columns:1fr 1fr;gap:20px 40px}
.t8 .works figure:nth-child(even){margin-top:120px}
.t8 .works img{aspect-ratio:4/5}
.t8 .works figcaption{flex-direction:column;align-items:center;gap:2px;text-align:center}
.t8 .works figcaption b{font:300 26px/1.1 "Noto Serif Display",serif}
.t8 .sec header{grid-template-columns:1fr;justify-items:center;text-align:center}
.t8 .intro .slogan,.t8 .quote blockquote{margin-left:auto;margin-right:auto;text-align:center}
@media (max-width:760px){
  .t2 .works,.t8 .works,.t9 .works{grid-template-columns:1fr}
  .t8 .works figure:nth-child(even){margin-top:0}
  .t5 .works figure,.t7 .works figure{grid-column:span 6}
  .t5 .works figure:nth-child(-n+2),.t7 .works figure:nth-child(-n+2){grid-column:span 12}
}

/* ═════════ Своя система у каждого варианта: сетка, порядок блоков, анимации при прокрутке ═════════ */
.rest{display:flex;flex-direction:column}
.sec,.foot{width:100%}
.intro{order:1}.film{order:2}.srv{order:3}#works{order:4}.steps{order:5}.about{order:6}.team{order:7}.quote{order:8}.form{order:9}.foot{order:10}

/* 1 · скруглённые панели вплотную, всё по центру; элементы «всплывают» с увеличением */
.t1 .rest{padding:0 8px;gap:8px}
.t1 .sec{background:var(--soft);border-radius:56px;padding:96px 56px}
.t1 .sec header{grid-template-columns:1fr;justify-items:center;text-align:center}
.t1 .intro .slogan,.t1 .quote blockquote{margin:0 auto;text-align:center;font-family:"Inter",sans-serif;font-weight:500;letter-spacing:-.04em;line-height:1.08;max-width:22ch;text-wrap:balance}
.t1 .quote cite{text-align:center}
.t1 .film{background:none;padding:0}
.t1 .film-box{width:100%;border-radius:56px}
.t1 .srv{order:2}.t1 #works{order:3}.t1 .film{order:4}.t1 .about{order:5}.t1 .steps{order:6}
.t1 .team li{background:#fff}
.t1 [data-f]:not(.in){transform:scale(.92)}
.t1 [data-clip]:not(.in){clip-path:inset(14% round 40px)}
.t1 .sec h2{overflow:visible}
.t1 .sec h2 span{transition:transform 1s cubic-bezier(.2,.7,.1,1),opacity 1s}
.t1 .sec h2:not(.in) span{transform:scale(.92);opacity:0}

/* 2 · широкие поля, жирные линии сверху; всё поднимается снизу, как буквы в заголовке */
.t2 .rest{padding:0 60px}
.t2 .sec{border-top:3px solid var(--fg);padding:36px 0 120px}
.t2 .intro{border-top:0;padding-top:140px}
.t2 #works{order:2}.t2 .srv{order:3}.t2 .film{order:4;border-top:0}
.t2 .sec h2 span::after{content:"✳";color:#fc5102;font-size:.5em;margin-left:.18em;vertical-align:.5em}
.t2 [data-f]:not(.in){transform:translateY(48px)}
.t2 [data-clip]:not(.in){clip-path:inset(100% 0 0 0)}
.t2 [data-clip]{transition-duration:.9s}

/* 3 · серый фон, светлые карточки со скруглением; всё проявляется из размытия */
.t3{--bg:#d3d8da}
.t3 .rest{padding:0 16px;gap:16px}
.t3 .sec{background:#eef1f2;border:0;border-radius:16px;padding:88px 44px}
.t3 .film{order:1;background:none;padding:0}
.t3 .film-box{border-radius:16px}
.t3 .intro{order:2}.t3 #works{order:3}.t3 .srv{order:4}.t3 .about{order:5}.t3 .steps{order:6}
.t3 .team li{background:#fff}
.t3 [data-f]{transition:opacity 1.2s,filter 1.2s}
.t3 [data-f]:not(.in){transform:none;filter:blur(14px)}
.t3 .sec h2{overflow:visible}
.t3 .sec h2 span{transition:opacity 1.4s,filter 1.4s}
.t3 .sec h2:not(.in) span{transform:none;opacity:0;filter:blur(18px)}
.t3 [data-clip]{clip-path:none;transition:opacity 1.4s,filter 1.4s}
.t3 [data-clip]:not(.in){opacity:0;filter:blur(20px)}

/* 4 · две колонки: заголовок слева и липнет, содержимое справа; всё «падает» сверху */
.t4{--bg:#f7f7f7}
.t4 .sec{display:grid;grid-template-columns:30% 1fr;gap:0 32px;align-items:start;border-top:1.5px solid var(--fg);padding:28px 0 120px}
.t4 .sec header{display:block;position:sticky;top:24px;margin:0}
.t4 .sec header p{margin-top:16px;font:300 13px/1.5 "Geist Mono",monospace;text-transform:uppercase}
.t4 .sec h2{font-size:clamp(34px,4.6vw,72px)}
.t4 .intro,.t4 .film,.t4 .quote{display:block;padding-left:calc(30% + 32px)}
.t4 .intro{border-top:0}
.t4 .about{grid-template-columns:30% 1fr}
.t4 .about-ph{position:sticky;top:24px}
.t4 .form header{grid-column:auto}
.t4 .form form{grid-template-columns:1fr 1fr}
.t4 .form aside{grid-column:2;margin-top:48px}
.t4 #works{order:2}.t4 .srv{order:3}.t4 .steps{order:4}.t4 .film{order:5}
.t4 .film-box{width:100%;border-radius:0}
.t4 .steps ol{grid-template-columns:1fr 1fr}
.t4 [data-f]:not(.in){transform:translateY(-28px)}
.t4 .sec h2:not(.in) span{transform:translateY(-105%)}
.t4 [data-clip]:not(.in){clip-path:inset(100% 0 0 0)}

/* 5 · тёмный, крупно: сначала Алена, заголовки справа; фото проявляются из затемнения с наездом */
.t5 .sec header{grid-template-columns:1fr 1.6fr}
.t5 .sec header h2{order:2;text-align:right}
.t5 .sec header p{font:500 12px/1.6 "Geist Mono",monospace;text-transform:uppercase}
.t5 .srv li{grid-template-columns:1fr 1.6fr}
.t5 .srv li b{grid-column:2;grid-row:1/3;text-align:right}
.t5 .srv li span,.t5 .srv li i{grid-column:1}
.t5 .intro{grid-template-columns:1fr 1.6fr}
.t5 .intro .slogan{order:2;justify-self:end;text-align:right}
.t5 .about{order:2}.t5 #works{order:3}.t5 .film{order:4}.t5 .srv{order:5}.t5 .steps{order:6}
.t5 [data-clip]{clip-path:none}
.t5 [data-clip] img{transition:transform 2s cubic-bezier(.2,.7,.1,1),filter 1.6s}
.t5 [data-clip]:not(.in) img{transform:scale(1.35);filter:brightness(0)}
.t5 [data-f]{transition-duration:1.2s}

/* 6 · тёмный, строгая сетка в три колонки, галерея сразу после экрана; всё выезжает сбоку шторкой */
.t6 .rest{padding:0 28px}
.t6 .sec header{grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.t6 .sec header h2{grid-column:span 2;font-size:clamp(40px,6vw,96px)}
.t6 #works{order:1;border-top:0}.t6 .intro{order:2;border-top:1px solid var(--hair)}.t6 .film{order:3}
.t6 .steps ol{grid-template-columns:repeat(4,1fr)}
.t6 .srv li{grid-template-columns:repeat(3,1fr);gap:8px 16px}
.t6 .srv li b{grid-column:1/3}
.t6 .srv li span,.t6 .srv li i{grid-column:3}
.t6 .intro{grid-template-columns:repeat(3,1fr);gap:16px}
.t6 .intro .slogan{grid-column:1/3}
.t6 .form{grid-template-columns:2fr 1fr;gap:0 16px}
.t6 .team ul{grid-template-columns:repeat(4,1fr)}
.t6 .film-box{width:100%;border-radius:8px}
.t6 [data-f]:not(.in){transform:translateX(-36px)}
.t6 .sec h2:not(.in) span{transform:translateX(-103%)}
.t6 [data-clip]:not(.in){clip-path:inset(0 100% 0 0)}

/* 7 · тёмный, гигантский текст капсом, без рамок и отдельного видео (оно в первом экране); только плавное проявление */
.t7 .rest{padding:0 30px}
.t7 .sec{border-top:0;padding:110px 0}
.t7 .film{display:none}
.t7 .sec header p,.t7 .srv li span,.t7 .steps li span,.t7 .team li span{text-transform:uppercase;font-size:12px;letter-spacing:.02em}
.t7 .intro .slogan{text-transform:uppercase;max-width:none;font-size:clamp(34px,6.4vw,104px);line-height:1.06}
.t7 .quote blockquote{max-width:26ch;font-size:clamp(28px,4vw,60px);line-height:1.14;font-weight:500;letter-spacing:-.025em}
.t7 #works{order:2}.t7 .srv{order:3}.t7 .about{order:4}
.t7 [data-f]{transition:opacity 1.6s}
.t7 [data-f]:not(.in){transform:none}
.t7 .sec h2 span{transition:opacity 1.6s}
.t7 .sec h2:not(.in) span{transform:none;opacity:0}
.t7 [data-clip]{clip-path:none;transition:opacity 1.8s}
.t7 [data-clip]:not(.in){opacity:0}
.t7 [data-clip] img{transform:none}

/* 8 · узкая колонка 920px по центру, много воздуха; медленное проявление, фото чуть «отъезжают» */
.t8 .sec{padding:150px 0;border-top:0;text-align:center}
.t8 .srv li{grid-template-columns:1fr;justify-items:center;gap:8px;padding:34px 0;border-color:var(--hair)}
.t8 .srv li b{grid-row:auto}
.t8 .srv li span,.t8 .srv li i{grid-column:auto}
.t8 .srv li:last-child{border-color:var(--hair)}
.t8 .steps ol{grid-template-columns:1fr 1fr;row-gap:56px}
.t8 .steps li{align-items:center}
.t8 .steps ol::before{display:none}
.t8 .about{grid-template-columns:1fr;justify-items:center}
.t8 .about dl{width:100%}
.t8 .about dd,.t8 .about dt{text-align:center}
.t8 .about-ph{position:static;width:300px}
.t8 .about-ph [data-clip]{border-radius:999px 999px 0 0}
.t8 .about-tx .big,.t8 .about-tx p{margin-left:auto;margin-right:auto}
.t8 .team ul{grid-template-columns:1fr 1fr}
.t8 .team li{background:none;border:1px solid var(--hair);align-items:center}
.t8 .form{grid-template-columns:1fr;text-align:left}
.t8 .form header{text-align:center}
.t8 .form aside{margin-top:48px}
.t8 .film-box{width:100%;border-radius:0}
.t8 .about{order:2}.t8 .srv{order:3}.t8 #works{order:4}.t8 .film{order:5}
.t8 [data-f]{transition:opacity 1.8s}
.t8 [data-f]:not(.in){transform:none}
.t8 .sec h2 span{transition:opacity 2s,filter 2s}
.t8 .sec h2:not(.in) span{transform:none;opacity:0;filter:blur(10px)}
.t8 [data-clip]{clip-path:none;transition:opacity 1.8s}
.t8 [data-clip]:not(.in){opacity:0}
.t8 [data-clip]:not(.in) img{transform:scale(1.08)}

/* 9 · каллиграфия только в заголовках, всё остальное — спокойный гротеск; заголовки «пишутся» слева направо */
.t9{--maxw:1240px}
.t9 .sec{border-top:0;padding:120px 0}
.t9 .sec h2{font-size:clamp(70px,10vw,170px);line-height:1;overflow:visible;padding:0;margin:0 0 0 -.04em}
.t9 .sec h2 span{padding:.22em .16em .2em .04em;margin:-.22em 0 -.1em}
.t9 .sec h2 span{-webkit-mask-image:linear-gradient(to right,#000 0 50%,transparent 50% 100%);-webkit-mask-size:200% 100%;mask-image:linear-gradient(to right,#000 0 50%,transparent 50% 100%);mask-size:200% 100%;transition:-webkit-mask-position 1.8s cubic-bezier(.4,.1,.2,1),mask-position 1.8s cubic-bezier(.4,.1,.2,1)}
.t9 .sec h2:not(.in) span{transform:none;-webkit-mask-position:100% 0;mask-position:100% 0}
.t9 .intro .slogan,.t9 .quote blockquote,.t9 .srv b,.t9 .about dd{font-family:"Inter",sans-serif;font-weight:500;letter-spacing:-.045em}
.t9 .foot-name{font-family:"Inter",sans-serif;font-weight:700;letter-spacing:-.07em}
.t9 .about{order:2}.t9 #works{order:3}.t9 .srv{order:4}.t9 .film{order:5}
.t9 .film-box{width:100%;border-radius:0}
.t9 .works{grid-template-columns:1.4fr 1fr 1fr}
.t9 .works figure:nth-child(1),.t9 .works figure:nth-child(4){grid-row:span 1}
.t9 .works img{aspect-ratio:4/5}
.t9 [data-f]{transition-duration:1.2s}
.t9 [data-f]:not(.in){transform:translateY(18px)}
.t9 [data-clip]{transition-duration:1.4s}

/* вступление: в центрированных вариантах — одной колонкой */
.t1 .intro,.t8 .intro,.t7 .intro{grid-template-columns:1fr}
.t1 .intro .sub,.t8 .intro .sub{margin:0 auto;text-align:center}
.t4 .intro .sub{margin-top:26px}
.t7 .intro .sub{margin-left:auto;max-width:40ch}

/* ═════════ Правки после аудита ═════════ */
/* линии — только между строками списков и в полях формы; рамок у карточек нет */
.sec,.foot,.t2 .sec,.t4 .sec,.t6 .intro{border-top:0}
.t2 .sec{padding:110px 0}
.t2 .intro{padding-top:140px}
.t4 .sec{padding:0 0 130px}
.srv li,.srv li:last-child{border-top:0;border-bottom:0}
.srv li+li,.srv li+li:last-child{border-top:1px solid var(--hair)}
.t1 .srv li,.t3 .srv li,.t1 .srv li:last-child,.t3 .srv li:last-child{border:0}
.t4 .works figure,.t4 .works figure:last-child{border-top:0;border-bottom:0}
.t4 .works figure+figure,.t4 .works figure+figure:last-child{border-top:1px solid var(--hair)}
.day li{border-top:0}
.day li+li{border-top:1px solid var(--hair)}
.about dl{border-top:0;padding-top:0}
.form aside a{border-bottom-color:var(--hair)}
.t8 .team li{border:0;padding:8px 0;min-height:0}
/* шрифт блоков — тот же, что в первом экране */
body{--fb:"Golos Text"}
body.t1,body.t2,body.t4,body.t5,body.t6,body.t7,body.t9{--fb:"Inter"}
body.t3{--fb:"Onest"}
.rest{font-family:var(--fb),system-ui,sans-serif}
/* заголовки блоков не крупнее заголовка первого экрана */
.t1 .sec h2{font-size:clamp(32px,4.4vw,64px)}
.t2 .sec h2{font-size:clamp(36px,5vw,76px)}
.t7 .sec h2{font-size:clamp(40px,6.4vw,96px)}
.t1 .sec h2,.t8 .sec h2{padding-left:.14em}
/* слоган уже стоит в первом экране — ниже не повторяем */
.t4 .intro .slogan,.t8 .intro .slogan,.t9 .intro .slogan{display:none}
.t9 .intro{grid-template-columns:1fr}
.t9 .intro .sub,.t4 .intro .sub,.t8 .intro .sub{font-size:clamp(20px,2vw,30px);line-height:1.3;color:var(--fg);max-width:34ch}
.t4 .intro .sub{margin-top:0}
.sec h2,.intro .slogan,.quote blockquote,.mani p{text-wrap:balance}
.quote blockquote{max-width:30ch;font-size:clamp(26px,3.4vw,54px);line-height:1.12}
/* 1 — всё по центру, включая строки услуг и форму; читаемый док */
.t1 .srv li{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px}
.t1 .srv li b{grid-row:auto}
.t1 .srv li span,.t1 .srv li i{grid-column:auto}
.t1 .form{grid-template-columns:1fr;max-width:680px;margin-left:auto;margin-right:auto}
.t1 .form aside{margin-top:44px}
.m .dock{background:rgba(255,255,255,.72);color:#111}
.m .dock .go{background:#111;color:#fff}
/* 3 — текст поверх фото читается */
.s .frame::after{background:linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,.1) 30%,rgba(0,0,0,.72))}
.s .card,.s .shot{background:rgba(0,0,0,.34)}
.s .card p{opacity:1}
.t3 [data-clip]{transition:opacity 1.2s}
.t3 [data-clip]:not(.in){opacity:0;filter:none}
/* 4 — блоки той же ширины, что и первый экран */
body.t4{--u:min(calc(100vw/1440),calc(100svh/900))}
.t4 .rest{width:100%;max-width:calc(var(--u)*1440);margin:0 auto;padding:0 calc(var(--u)*56)}
.l .yr{top:calc(var(--u)*108)}
.l .sp{top:calc(var(--u)*356)}
/* 5 — текст и кнопка не на лице */
.x .bg{object-position:50% 32%;filter:grayscale(1) brightness(.5) contrast(1.08)}
.x .txt{left:calc(var(--u)*28);right:auto;width:calc(var(--u)*420);top:calc(var(--u)*96);bottom:auto}
.x .go{left:calc(var(--u)*28);top:calc(var(--u)*176);bottom:auto}
.x .scr{left:calc(var(--u)*44);bottom:calc(var(--u)*232);font-size:calc(var(--u)*150)}
.t5 [data-clip] img{filter:grayscale(1) brightness(1)}
.t5 [data-clip]:not(.in) img{filter:grayscale(1) brightness(0)}
/* чёрно-белые фото там, где первый экран чёрно-белый */
.t4 .about-ph img,.t5 .about-ph img,.t6 .works img,.t6 .about-ph img,.t7 .about-ph img,.t9 .about-ph img{filter:grayscale(1)}
.t2 .works img{aspect-ratio:4/5}
.t5 .works figure:nth-child(-n+2) img,.t7 .works figure:nth-child(-n+2) img{aspect-ratio:4/5}
/* контраст */
.t2 .form button{color:#111}
.form input::placeholder{opacity:1}
.form .note.ok{color:#1f7a48}
.dark .form .note.ok{color:#5fd08f}
/* без пересчёта вёрстки при наведении и прокрутке */
.t1 .film-box,.t4 .film-box,.t6 .film-box,.t8 .film-box,.t9 .film-box{transform:none}
.c .lnk:hover{letter-spacing:0;opacity:.55}
.wow-mask{will-change:transform}
/* смена варианта: всё мгновенно возвращается в исходное состояние */
.reset *,.reset *::before,.reset *::after{transition:none!important}
/* карточки услуг наезжают друг на друга — тонкая рамка здесь по делу: показывает край верхней карточки */
.t1 .srv li,.t3 .srv li,.t1 .srv li:last-child,.t3 .srv li:last-child,.t1 .srv li+li,.t3 .srv li+li{border:1px solid var(--hair)}
.t1 .srv li:nth-child(1),.t3 .srv li:nth-child(1){z-index:1}
.t1 .srv li:nth-child(2),.t3 .srv li:nth-child(2){z-index:2}
.t1 .srv li:nth-child(3),.t3 .srv li:nth-child(3){z-index:3}
/* плавность: размытие оставляем только на заголовках, крупные блоки проявляются прозрачностью */
.t3 [data-f]{transition:opacity 1.2s}
.t3 [data-f]:not(.in){filter:none}
.form aside a{transition:opacity .3s}
.form aside a:hover{padding-left:0;opacity:.6}
/* 6 — подпись лежит на фото, под ней мягкое затемнение, чтобы текст читался на любом снимке */
.t6 .works [data-clip]{position:relative}
.t6 .works [data-clip]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));pointer-events:none}
.t6 .works figcaption{z-index:1}
.c .lead{max-width:24ch}
/* 8 — первый экран целиком помещается в высоту окна */
@media (min-width:761px){
  .c .hero{padding-top:22px;padding-bottom:64px}
  .c .who{margin-top:4svh}
  .c h1{margin-top:3.4svh;font-size:clamp(88px,min(14vw,21svh),188px)}
  .c .ph{width:auto;height:min(307px,30svh);margin-top:3.6svh;flex:none}
  .c .lead{margin-top:3svh;max-width:24ch}
  .c .lnk{margin-top:2.4svh}
}

@media (max-width:760px){
  .t2 .rest{padding:0 16px}
  .t1 .sec{padding:64px 20px;border-radius:32px}
  .t3 .sec{padding:60px 18px}
  .t4 .sec,.t4 .about{grid-template-columns:1fr}
  .t4 .sec header,.t4 .about-ph{position:static}
  .t4 .intro,.t4 .film,.t4 .quote{padding-left:0}
  .t4 .form aside{grid-column:auto}
  .t6 .sec header{grid-template-columns:1fr}.t6 .sec header h2{grid-column:auto}
}
@media (max-width:760px){
  .rest{padding:0 16px}
  .sec{padding:76px 0}
  .sec header,.form,.about{grid-template-columns:1fr}
  .works{grid-template-columns:1fr 1fr}
  .team ul,.steps ol{grid-template-columns:1fr 1fr}
  .srv li,.t6 .srv li{grid-template-columns:1fr}
  .srv li b,.t6 .srv li b,.t5 .srv li b{grid-row:auto;grid-column:auto;text-align:left}
  .t5 .srv li{grid-template-columns:1fr}.t5 .srv li span,.t5 .srv li i{grid-column:auto}
  .t5 .intro .slogan{order:0;justify-self:start;text-align:left}
  .srv li span,.srv li i,.t6 .srv li span,.t6 .srv li i{grid-column:auto}
  .t6 .intro{grid-template-columns:1fr}.t6 .intro .slogan{grid-column:auto}
  .form form{grid-template-columns:1fr}
  .form aside{margin-top:40px}
  .about-ph{position:static}
  .film-box{width:100%;border-radius:var(--rad)}
  .c nav{gap:14px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  [data-clip]{clip-path:none}[data-clip] img{transform:none}
  .sec h2 span{transform:none}
  [data-scrub] b{opacity:1}
  [data-f]{opacity:1;transform:none}
}

/* ═════════ Телефон: первые экраны пересобраны под узкий экран. Здесь u — пиксель макета 390px ═════════ */
@media (max-width:760px){
  :root{--u:calc(100vw/390);--hh:max(100svh,calc(var(--u)*640))}
  /* 1 */
  .m .frame{inset:calc(var(--u)*6);border-radius:calc(var(--u)*40)}
  .m .frame>img{height:74%}
  .m h1{left:calc(var(--u)*24);top:calc(var(--u)*86);font-size:calc(var(--u)*64);line-height:1;letter-spacing:calc(var(--u)*-.6)}
  .m .sub{left:calc(var(--u)*24);top:calc(var(--u)*156);font-size:calc(var(--u)*12);letter-spacing:0}
  .m .txt{display:none}
  .m .dock{left:calc(var(--u)*10);right:calc(var(--u)*10);width:auto;bottom:calc(var(--u)*52);height:calc(var(--u)*60);padding:calc(var(--u)*8);gap:calc(var(--u)*14);border-radius:calc(var(--u)*20);font-size:calc(var(--u)*10)}
  .m .dock img{width:calc(var(--u)*52);height:calc(var(--u)*44);border-radius:calc(var(--u)*12);margin-right:calc(var(--u)*4)}
  .m .dock .go{width:calc(var(--u)*104);height:calc(var(--u)*44);border-radius:calc(var(--u)*14)}
  /* 2 */
  .o header{left:calc(var(--u)*20);right:calc(var(--u)*20);top:calc(var(--u)*14);height:calc(var(--u)*36)}
  .o header nav{display:none}
  .o .logo{font-size:calc(var(--u)*15)}
  .o .pill{margin-left:auto;height:calc(var(--u)*36);padding:0 calc(var(--u)*16);font-size:calc(var(--u)*13)}
  .o .ph{left:50%;transform:translateX(-50%);top:calc(var(--u)*56);bottom:auto;height:56%}
  .o h1{left:calc(var(--u)*20);bottom:calc(var(--u)*150);font-size:calc(var(--u)*56);line-height:calc(var(--u)*60);letter-spacing:calc(var(--u)*-.8)}
  .o h1>span{height:calc(var(--u)*60)}
  .o h1>.word{height:calc(calc(var(--u)*60) + .22em)}
  .o .star{width:calc(var(--u)*42);height:calc(var(--u)*42);margin-left:calc(var(--u)*10);vertical-align:calc(var(--u)*-2)}
  .o .txt{left:calc(var(--u)*20);right:calc(var(--u)*20);bottom:calc(var(--u)*56);width:auto;font-size:calc(var(--u)*16);line-height:calc(var(--u)*21)}
  .o .star{width:calc(var(--u)*38);height:calc(var(--u)*38)}
  /* 3 */
  .s .frame{inset:calc(var(--u)*8)}
  .s header{left:calc(var(--u)*16);right:calc(var(--u)*12);top:calc(var(--u)*12)}
  .s header nav:not(.r),.s header .r a:not(.pill){display:none}
  .s .card,.s .shot{top:calc(var(--u)*70);height:calc(var(--u)*150)}
  .s .card{left:calc(var(--u)*14);width:calc(var(--u)*190);padding:calc(var(--u)*12)}
  .s .card i{margin-bottom:calc(var(--u)*10)}
  .s .card b{font-size:calc(var(--u)*14);line-height:calc(var(--u)*18);margin-bottom:calc(var(--u)*6)}
  .s .card p{font-size:calc(var(--u)*10.5);line-height:calc(var(--u)*14)}
  .s .shot{left:calc(var(--u)*212);width:calc(var(--u)*148);padding:calc(var(--u)*6)}
  .s h1{left:calc(var(--u)*14);bottom:calc(var(--u)*176);font-size:calc(var(--u)*104);line-height:calc(var(--u)*86);letter-spacing:calc(var(--u)*-3)}
  .s h1 small{display:block;font-size:calc(var(--u)*22);line-height:calc(var(--u)*26);letter-spacing:calc(var(--u)*-.4);margin:0 0 0 calc(var(--u)*4)}
  .s .txt{left:calc(var(--u)*16);right:calc(var(--u)*16);bottom:calc(var(--u)*56);width:auto;font-size:calc(var(--u)*15);line-height:calc(var(--u)*21)}
  /* 4 */
  .l{--u:calc(100vw/390)}
  .l .hero{width:100%;height:calc(var(--u)*900)}
  .l .logo{left:calc(var(--u)*20);top:calc(var(--u)*18);font-size:calc(var(--u)*22);line-height:calc(var(--u)*16);letter-spacing:calc(var(--u)*-.4)}
  .l nav,.l .yr{display:none}
  .l .cta{left:auto;right:calc(var(--u)*20);top:calc(var(--u)*20);width:calc(var(--u)*112);font-size:calc(var(--u)*14)}
  .l h1{left:calc(var(--u)*18);width:calc(var(--u)*354);top:calc(var(--u)*70)}
  .l .say{left:calc(var(--u)*20);top:calc(var(--u)*206);width:calc(var(--u)*330);font-size:calc(var(--u)*34);letter-spacing:calc(var(--u)*-.7)}
  .l .sp{left:calc(var(--u)*20);top:calc(var(--u)*350);width:auto;text-align:left;font-size:calc(var(--u)*11);letter-spacing:calc(var(--u)*8)}
  .l .panel{left:calc(var(--u)*20);top:calc(var(--u)*384);width:calc(var(--u)*350);height:calc(var(--u)*330)}
  .l .img{left:calc(var(--u)*150);top:calc(var(--u)*372);width:calc(var(--u)*204);height:calc(var(--u)*256)}
  .l ul{left:calc(var(--u)*34);top:calc(var(--u)*612);font-size:calc(var(--u)*22);line-height:calc(var(--u)*28)}
  .l .cap{left:calc(var(--u)*20);top:calc(var(--u)*738);width:calc(var(--u)*350);font-size:calc(var(--u)*11);line-height:calc(var(--u)*16)}
  .l .rw{left:calc(var(--u)*20);top:calc(var(--u)*820)}
  .l .rw span{font-size:calc(var(--u)*13)}.l .rw b{font-size:calc(var(--u)*32);line-height:calc(var(--u)*32);letter-spacing:calc(var(--u)*-.6)}
  /* 5 */
  .x header{left:calc(var(--u)*16);right:calc(var(--u)*16);top:calc(var(--u)*16);grid-template-columns:1fr auto}
  .x header span{display:none}
  .x .logo{font-size:calc(var(--u)*20)}
  .x .bur{width:calc(var(--u)*40);height:calc(var(--u)*40)}
  .x .txt{left:calc(var(--u)*16);right:calc(var(--u)*16);top:calc(var(--u)*78);bottom:auto;font-size:calc(var(--u)*11)}
  .x .go{left:calc(var(--u)*16);top:calc(var(--u)*158);bottom:auto;padding:calc(var(--u)*10) calc(var(--u)*16);font-size:calc(var(--u)*13)}
  .x h1{left:calc(var(--u)*10);bottom:calc(var(--u)*44);font-size:calc(var(--u)*84)}
  .x .scr{left:calc(var(--u)*22);bottom:calc(var(--u)*100);font-size:calc(var(--u)*84)}
  /* 6 */
  .z .hero{height:calc(var(--u)*470)}
  .z nav{left:calc(var(--u)*16);right:calc(var(--u)*16);top:calc(var(--u)*16);font-size:calc(var(--u)*10)}
  .z h1{left:calc(var(--u)*16);right:calc(var(--u)*16);top:calc(var(--u)*46)}
  .z .cap{left:calc(var(--u)*16);right:calc(var(--u)*16);top:calc(var(--u)*148);flex-direction:column;gap:calc(var(--u)*2);font-size:calc(var(--u)*12)}
  .z .row{left:calc(var(--u)*16);right:calc(var(--u)*16);top:calc(var(--u)*200);height:calc(var(--u)*238);grid-template-columns:1fr 1fr;gap:calc(var(--u)*8)}
  .z .row img:nth-child(3){display:none}
  /* 7 */
  .e .hero{padding:calc(var(--u)*16) calc(var(--u)*16) 0}
  .e header nav{display:none}
  .e h1{margin-top:calc(var(--u)*64);font-size:calc(var(--u)*46);line-height:1}
  .e .row{margin-top:calc(var(--u)*20);font-size:calc(var(--u)*10)}
  .e .row span:nth-child(2){display:none}
  .e .vid{margin:calc(var(--u)*24) calc(var(--u)*-16) 0;min-height:calc(var(--u)*260)}
  /* 9 */
  .g header{left:calc(var(--u)*16);right:calc(var(--u)*16);top:calc(var(--u)*16);grid-template-columns:1fr auto;font-size:calc(var(--u)*12)}
  .g header nav,.g .yr{display:none}
  .g .cta{padding:calc(var(--u)*8) calc(var(--u)*14)}
  .g .who{left:calc(var(--u)*16);top:calc(var(--u)*78);bottom:auto;font-size:calc(var(--u)*10)}
  .g .txt{left:calc(var(--u)*16);top:calc(var(--u)*100);bottom:auto;width:calc(var(--u)*320);font-size:calc(var(--u)*18)}
  .g h1{left:0;top:calc(var(--u)*160);font-size:calc(var(--u)*108);padding:.2em .12em .1em .04em}
  .g .ph{left:calc(var(--u)*16);right:calc(var(--u)*16);width:auto;top:calc(var(--u)*330);bottom:calc(var(--u)*56)}
  /* блоки ниже первого экрана на телефоне */
  .t1 .works-pin,.t3 .works-pin{height:auto}
  .t1 .works,.t3 .works{position:static;width:auto;transform:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .t1 .works figure,.t3 .works figure{width:70vw;scroll-snap-align:start}
  .t1 .srv li,.t3 .srv li{position:static;min-height:0}
  .wow{height:220vh}
  .mani p+p,.mani p+p+p{margin-left:0}
  .t4 .sec.mani{padding-left:0}
  .wow-mask span{font-size:19vw}
  .day-grid{grid-template-columns:1fr;gap:10px}
  .day-clock{top:0;background:var(--bg);padding:12px 0;z-index:2;font-size:84px}
  .t4 .day{display:block}
  .t1 .rest{overflow:hidden}
  .t1 .works,.t3 .works{margin:0 -20px;padding:0 20px 10px}
  .t3 .works{margin:0 -18px;padding:0 18px 10px}
  .t4 .sec{display:block}
  .t4 .sec header{margin-bottom:28px}
  .t4 .form form{grid-template-columns:1fr}
  .t4 .form aside{margin-top:40px}
  .t4 .steps ol,.t6 .steps ol,.t6 .team ul,.t8 .steps ol,.t8 .team ul{grid-template-columns:1fr 1fr}
  .t9 .works{grid-template-columns:1fr 1fr}
  .t9 .sec h2{font-size:64px}
  .intro{grid-template-columns:1fr}
  .intro .slogan,.quote blockquote{max-width:none}
  .about dl{grid-template-columns:1fr;gap:26px}
  .foot-top{flex-wrap:wrap}
  .t5 .sec header,.t5 .intro,.t6 .form{grid-template-columns:1fr}
  .t5 .sec header h2{order:0;text-align:left}
  .t7 .sec h2{font-size:42px}
  .sec h2{overflow-wrap:anywhere}
  .t2 .sec,.t4 .sec{padding:24px 0 72px}
  .t7 .sec,.t8 .sec,.t9 .sec{padding:72px 0}
  .t6 .rest,.t7 .rest{padding:0 16px}
  .film-box{transform:none}
  body.t4{--u:calc(100vw/390)}
  .t4 .rest{max-width:none;padding:0 16px}
  .x .txt{width:auto}
  .s .card,.s .shot{display:none}
  .t1 .form aside{margin-top:40px}
  .t1 .srv li b{text-align:center}
  /* 6 — в две узкие колонки подпись не помещается на фото: ставим её под снимок */
  .t6 .works [data-clip]::after{display:none}
  .t6 .works figcaption{position:static;display:block;padding:8px 0 0;color:var(--fg);text-shadow:none}
  .t6 .works figcaption span{display:block;color:var(--mut);margin-top:2px;text-align:left}
  /* 5 — кнопка встаёт в верхнюю строку рядом с меню, а не на лицо */
  .x .go{top:calc(var(--u)*16);left:auto;right:calc(var(--u)*68);height:calc(var(--u)*40);padding:0 calc(var(--u)*14);display:grid;place-items:center;font-size:calc(var(--u)*12)}
}