@font-face{font-family:Disp;src:url(../fonts/disp.woff2) format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193}
@font-face{font-family:Disp;src:url(../fonts/disp-ext.woff2) format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:Body;src:url(../fonts/body.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193}
@font-face{font-family:Body;src:url(../fonts/body-ext.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
:root{--bg:#000;--ink:#f4f1ea;--dim:rgba(244,241,234,.78);--line:rgba(244,241,234,.16);--acc:#ff7a2f;--gut:clamp(16px,3vw,44px);color-scheme:dark}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--bg);color:var(--ink);font:400 17px/1.5 Body,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
img,video{display:block}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:2px}
.eyebrow{font:500 13px/1 Body;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
main,.foot{position:relative;z-index:1}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1s}
#gl.on{opacity:1}

/* загрузка */
.loader{display:none}
.js .loader{position:fixed;inset:0;z-index:50;background:#000;display:flex;align-items:flex-end;justify-content:space-between;padding:var(--gut);font-family:Disp;font-weight:800;line-height:.8}
.loader-n{font-size:clamp(70px,14vw,220px);font-variant-numeric:tabular-nums;font-stretch:75%}
.loader-q{font-size:clamp(30px,5vw,70px);color:var(--acc)}

/* шапка */
.nav{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px var(--gut);color:#fff}
.nav:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:130%;background:linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.55) 58%,transparent);pointer-events:none}
.logo{font:800 22px/1 Disp;letter-spacing:-.008em}
.logo b{color:var(--acc)}
.logo b{font-weight:800}
.nav nav{display:flex;gap:clamp(14px,2.2vw,32px);font-size:15px}
.nav nav a{position:relative;padding:6px 0}
.nav nav a:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.nav nav a:hover:after{transform:scaleX(1);transform-origin:left}

/* первый экран */
.hero{position:relative;height:340vh;background:#000}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-mask{position:absolute;inset:0;background:#000;mix-blend-mode:multiply;display:flex;align-items:center;justify-content:center;overflow:hidden}
.word{font:800 min(34vw,60vh)/.8 Disp;font-stretch:75%;letter-spacing:-.008em;color:#fff;white-space:nowrap;transform-origin:50% 50%;display:block;padding-right:.04em}
.word-ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}
.word-ghost .word{color:rgba(244,241,234,.17)}
.floats{position:absolute;inset:0;pointer-events:none}
.float{position:absolute;width:clamp(74px,11vw,190px);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.f0{left:3%;top:9%}.f1{left:24%;top:7%;width:clamp(58px,7vw,120px)}.f2{left:44%;top:6%;width:clamp(60px,8vw,130px)}.f3{left:66%;top:9%}.f4{right:3%;top:11%;width:clamp(62px,8vw,140px)}
.f5{left:6%;top:66%;width:clamp(62px,9vw,150px)}.f6{left:28%;top:72%;width:clamp(66px,9vw,150px)}.f7{left:48%;top:68%;width:clamp(44px,5vw,84px)}.f8{left:60%;top:71%;width:clamp(62px,8vw,130px)}.f9{right:17%;top:63%;width:clamp(66px,10vw,170px)}.f10{right:2%;top:68%;width:clamp(50px,7vw,110px)}.f11{right:30%;top:30%;display:none}
.hero-line{position:absolute;left:var(--gut);bottom:calc(var(--gut) + 2px);font:600 clamp(20px,2.2vw,34px)/1.06 Disp;letter-spacing:-.02em}
.hero-line span{display:block}
.hero-kicker{position:absolute;right:var(--gut);bottom:calc(var(--gut) + 2px);text-align:right;font-size:14px;line-height:1.35;color:var(--dim)}
.hero-scroll{position:absolute;left:50%;bottom:var(--gut);transform:translateX(-50%);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-scroll i{width:1px;height:34px;background:linear-gradient(var(--ink),transparent);animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.reel-caption{position:absolute;left:var(--gut);bottom:var(--gut);font:700 clamp(38px,6.6vw,110px)/.95 Disp;font-stretch:80%;letter-spacing:-.012em;opacity:0;text-shadow:0 2px 40px rgba(0,0,0,.45)}

/* заявление */
.manifesto{padding:clamp(100px,20vh,240px) var(--gut);background:linear-gradient(#000,transparent 60%)}
.big{font:600 clamp(34px,6.1vw,104px)/1.02 Disp;font-stretch:88%;letter-spacing:-.015em;max-width:17em}
.big .w{display:inline-block;margin-right:.22em}
.js .big .w{opacity:.14}

/* бренды */
.brands{position:relative;overflow:hidden}
.track{display:flex;flex-direction:column;padding:0 var(--gut);gap:clamp(40px,8vh,90px)}
.brands-intro h2{font:800 clamp(64px,13vw,210px)/.86 Disp;font-stretch:75%;letter-spacing:-.01em;margin-top:18px}
.hint{display:none}
.brand{display:grid;gap:18px;position:relative}
.brand-meta{display:flex;justify-content:space-between;font-size:14px;color:var(--dim);padding-bottom:12px;border-bottom:1px solid var(--line)}
.brand-meta i{font-style:normal;opacity:.7}
.brand-name{font:800 clamp(52px,14vw,76px)/.92 Disp;font-stretch:75%;letter-spacing:-.008em;margin-top:18px}
.brand-name b{color:var(--acc);font-weight:800}
.brand-line{font:600 clamp(22px,5.4vw,30px)/1.1 Disp;letter-spacing:-.02em;margin-top:14px}
.brand-desc{color:var(--dim);margin-top:12px;max-width:34em}
.brand-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:20px}
.visit{display:inline-flex;align-items:center;gap:10px;background:var(--acc);color:#0a0a0a;font-weight:600;padding:12px 18px;border-radius:99px;transition:transform .3s}
.visit svg,.row-url svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.visit svg{transition:transform .3s}
.visit:hover svg{transform:translate(2px,-2px)}
.fact{font-size:14px;color:var(--dim)}
.brand-media{position:relative}
.frame{aspect-ratio:4/5;overflow:hidden;border-radius:14px;background:#111;position:relative}
.frame video{width:100%;height:100%;object-fit:cover}
.obj{position:absolute;right:-6px;bottom:-22px;width:46%;height:auto;filter:drop-shadow(0 22px 34px rgba(0,0,0,.6));pointer-events:none}

/* цифры */
.numbers{padding:clamp(70px,14vh,150px) 0;overflow:hidden}
.mq{display:flex;white-space:nowrap;font:700 clamp(40px,8vw,130px)/1.1 Disp;font-stretch:75%;letter-spacing:-.008em}
.mq div{display:flex;align-items:center;will-change:transform}
.mq i{display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--acc);margin:0 .4em;flex:none}
.mq-b{color:transparent;-webkit-text-stroke:1px rgba(244,241,234,.55)}

/* принципы */
.principles{padding:0 var(--gut) clamp(80px,14vh,170px)}
.principles ol{display:grid;grid-template-columns:repeat(4,1fr);margin-top:26px;border-top:1px solid var(--line)}
.principles li{padding:24px 24px 28px 0;border-right:1px solid var(--line);padding-left:24px}
.principles li:first-child{padding-left:0}
.principles li:last-child{border-right:0}
.principles span{color:var(--acc);font-size:14px}
.principles h3{font:700 clamp(25px,2.5vw,38px)/1.02 Disp;font-stretch:85%;letter-spacing:-.02em;margin:42px 0 12px}
.principles p{color:var(--dim);font-size:16px}

/* список */
.all{padding:0 var(--gut) clamp(90px,16vh,190px);position:relative}
.rows{margin-top:26px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:44px 1.5fr 1fr auto;align-items:baseline;gap:14px;padding:clamp(11px,1.5vw,20px) 0;border-bottom:1px solid var(--line);position:relative;isolation:isolate;overflow:hidden}
.row-n{color:var(--dim);font-size:14px}
.row-name{font:700 clamp(30px,5vw,80px)/1 Disp;font-stretch:78%;letter-spacing:-.008em}
.row-name b{font-weight:700;color:var(--acc)}
.row-tag,.row-url{color:var(--dim);font-size:15px}
.row-url{display:inline-flex;gap:6px;align-items:center}
.row-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .45s,transform .9s cubic-bezier(.2,.7,.2,1)}
.row:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.36) 45%,rgba(0,0,0,.62));opacity:0;transition:opacity .45s;pointer-events:none}
.row.on .row-bg{opacity:1;transform:none}
.row.on:before{opacity:1}
.row.on .row-name{text-shadow:0 2px 24px rgba(0,0,0,.65)}
.row.on .row-n,.row.on .row-tag,.row.on .row-url{color:var(--ink)}

/* подвал */
.foot{padding:clamp(70px,12vh,130px) var(--gut) 0;overflow:hidden;background:linear-gradient(transparent,#000 22%)}
.mail{display:block;font:800 clamp(38px,10.4vw,178px)/1 Disp;font-stretch:75%;letter-spacing:-.006em;margin-top:18px;transition:color .3s;overflow-wrap:anywhere}
.mail:hover{color:var(--acc)}
.foot-sub{font-size:clamp(18px,1.6vw,23px);color:var(--dim);margin-top:16px;max-width:30em}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(44px,8vh,90px);border-top:1px solid var(--line);padding-top:20px;font-size:15px}
.foot-cols h4{font:500 13px/1 Body;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.foot-word{font:800 39.5vw/1 Disp;font-stretch:75%;letter-spacing:-.008em;margin:clamp(30px,6vh,70px) calc(var(--gut)*-1) -.04em;text-align:center;white-space:nowrap}
.foot-word b{color:var(--acc);font-weight:800}

/* компьютер: горизонтальная галерея */
@media (min-width:900px) and (min-height:560px){
 .has-h .brands{height:100vh}
 .has-h .track{flex-direction:row;height:100vh;width:max-content;padding:0;gap:0;align-items:center}
 .has-h .brands-intro{width:52vw;padding:0 var(--gut);flex:none}
 .has-h .hint{display:block;margin-top:24px;color:var(--dim)}
 .has-h .brand{width:84vw;flex:none;height:100vh;grid-template-columns:1fr auto;gap:clamp(30px,5vw,90px);align-items:center;padding:0 clamp(30px,5vw,90px) 0 var(--gut)}
 .has-h .brand-name{font-size:clamp(70px,10.2vw,190px);margin-top:clamp(18px,4vh,44px)}
 .has-h .brand-line{font-size:clamp(24px,2.5vw,42px);margin-top:18px}
 .has-h .brand-desc{font-size:18px}
 .has-h .brand-foot{margin-top:28px}
 .has-h .frame{height:min(74vh,720px)}
 .has-h .obj{width:58%;right:auto;left:-29%;bottom:6%}
 .has-h .brand-text{min-width:0}
}
@media (max-width:899px){
 .principles ol{grid-template-columns:1fr 1fr}
 .principles li,.principles li:first-child{padding:20px 16px 22px 0;border-right:0;border-bottom:1px solid var(--line)}
 .principles h3{margin:20px 0 8px}
 .brand-media{max-width:520px}
}
@media (max-width:700px){
 .nav nav a:nth-child(3){display:none}
 .word{font-size:39vw}
 .float{width:25vw}.f7{width:12vw}
 .f0{left:4%;top:13%}.f1{left:41%;top:15%;width:18vw}.f3{right:5%;left:auto;top:14%}.f5{left:5%;top:65%}.f6{left:37%;top:69%}.f9{right:5%;top:64%}
 .f2,.f4,.f7,.f8,.f10{display:none}
 .hero-kicker{display:none}.hero-scroll{left:auto;right:var(--gut);transform:none}
 .hero-line{font-size:24px}
 .row{grid-template-columns:30px 1fr auto}.row-tag{display:none}.row-url{font-size:0;gap:0}.row-url svg{width:22px;height:22px}
 .foot-cols{grid-template-columns:1fr}
 .principles ol{grid-template-columns:1fr}
 .mq{font-size:48px}
}
@media (min-width:701px){
 .rows{display:grid;grid-template-columns:repeat(3,1fr);margin:26px calc(var(--gut)*-1) 0}
 .rows li{display:flex;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
 .rows li:nth-child(3n){border-right:0}
 .row{width:100%;border-bottom:0;grid-template-columns:1fr auto;grid-template-areas:"n tag" "name name" "url url";align-items:center;gap:clamp(12px,1.6vw,22px) 12px;padding:clamp(20px,2.2vw,32px) var(--gut)}
 .row-n{grid-area:n}.row-tag{grid-area:tag;text-align:right}.row-url{grid-area:url}
 .row-name{grid-area:name;font-size:clamp(34px,4.3vw,76px)}
}
@media (min-width:701px) and (max-width:899px){
 .rows{grid-template-columns:repeat(2,1fr)}
 .rows li:nth-child(n){border-right:1px solid var(--line)}
 .rows li:nth-child(2n){border-right:0}
}
@media (max-height:500px){
 .f5,.f6,.f7,.f8,.f9,.f10{display:none}.hero-kicker,.hero-scroll{display:none}
}
@media (prefers-reduced-motion:reduce){
 .hero{height:100vh}.hero-scroll i{animation:none}
 .js .big .w{opacity:1}
 .reel-mask{mix-blend-mode:normal;background:rgba(0,0,0,.45)}
 .word-ghost{display:none}
}