/* Общие части всех страниц копии chtotonetak.com: меню, призыв, подвал, лента «ещё работы».
   Значения сняты с оригинала на Тильде 14.10.2026.
   Стили изолированы: стили Тильды на страницах кейсов меняют box-sizing у всех элементов. */
:root{
  --yellow:#ffb401;
  --blue:#0666ff;
  --mont:"Montserrat Alternates",Arial,sans-serif;
  --didact:"Didact Gothic",Arial,sans-serif;
}
body{-webkit-font-smoothing:antialiased;overflow-x:hidden}
.menu,.menu *,.mmenu,.mmenu *,.cta,.cta *,.sfoot,.sfoot *,.morew,.morew *{box-sizing:border-box;margin:0;padding:0}
.menu a,.mmenu a,.cta a,.sfoot a,.morew a{text-decoration:none;color:inherit}

/* абсолютные блоки (меню) */
.zb{position:relative;overflow:hidden}
.zb .el{position:absolute;display:block}
.zb .gnome{background:url(../img/gnome.gif) center/cover no-repeat}
.zb button{border:0;-webkit-appearance:none;appearance:none;padding:0;font:inherit;background:none}
.zb .btn{display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap}

/* меню для компьютера: появляется после 500px прокрутки */
.menu{position:fixed;top:0;left:0;width:100%;height:60px;z-index:9998;overflow:visible;transform:translateY(-100%)}
.menu.pinned{transform:translateY(0)}
.menu .bar{background:#fff;border:3px solid #000;border-radius:0 0 25px 25px}
.menu .item{background:#fff;border-radius:30px;font-family:var(--didact);font-weight:500;color:#000;line-height:1}
.menu .go{background:var(--blue);color:#fff;border-radius:14px;font-family:var(--mont);font-weight:400;line-height:1}

/* меню для телефона: появляется после 800px прокрутки */
.mmenu{position:fixed;top:0;left:0;width:100%;height:40px;z-index:9998;overflow:visible;transform:translateY(-100%);display:none}
.mmenu.pinned{transform:translateY(0)}
.mmenu .panel{background:#fff;border:3px solid #000;border-radius:25px}
.mmenu .item{background:#fff;border-radius:30px;font-family:var(--didact);font-weight:500;color:#000;cursor:pointer;line-height:1}
.mmenu .close{color:#f9809d}
.mmenu .slide{transition:transform .5s ease-in}
.mmenu .panel.slide{transition-timing-function:linear}
.mmenu.open .slide{transform:translateY(590px)}
@media (max-width:479px){ .menu{display:none} .mmenu{display:block} }

/* ---------- Призыв ---------- */
.cta{background:#fff;text-align:center;padding:194px 0 130px;font-family:var(--mont);color:#000}
.cta .wrap{width:1200px;margin:0 auto;padding:0 20px}
.cta h2{font-size:42px;line-height:1.23;font-weight:600}
.cta .row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:40px}
.btn-blue{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-family:var(--mont);font-weight:400;border-radius:18px}
.cta .btn-blue{height:53px;padding:0 29px;font-size:18px}

/* ---------- Подвал ---------- */
.sfoot{background:#141414;color:#fff;text-align:center;padding:135px 0;font-family:var(--mont)}
.sfoot .wrap{width:800px;margin:0 auto;padding:0 20px}
.sfoot .wiz{display:block;width:55px;height:55px;margin:0 auto}
.sfoot h2{font-size:26px;line-height:1.23;font-weight:600;margin-top:41px;padding-bottom:40px}
.pills{display:flex;flex-wrap:wrap;justify-content:center;column-gap:10px;row-gap:9px;padding:0 5px}
.pills a{display:inline-flex;align-items:center;height:34px;padding:0 18px;background:#fff;color:#000;font-size:12px;font-weight:400;border-radius:30px;line-height:1}
.pills a.on{background:#393939;color:#fff}
.copy{margin-top:49px;font-size:14px;line-height:1.55;font-weight:300;color:#d6d6d6;opacity:.5}

/* ---------- «Коли понравилось, вот еще работы» (T1004 Тильды) ---------- */
.morew{background:#111;color:#fff;padding:135px 0;font-family:var(--mont)}
.morew .wrap{width:1200px;margin:0 auto;position:relative}
.morew h2{font-size:42px;line-height:1.23;font-weight:600;text-align:center;margin:0 20px 90px}
.morew .track{overflow:hidden;margin:0 0 0 0}
.morew .rail{display:flex;transition:transform .5s ease}
.morew .post{flex:0 0 300px;padding:0 20px;display:block}
.morew .post .pic{display:block;width:260px;aspect-ratio:1.3;background:center/cover no-repeat}
.morew .post .t{display:block;margin-top:20px;font-size:16px;line-height:1.35;font-weight:600;color:#fff}
.morew .arr{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.morew .arr svg{width:10px;height:18px}
.morew .arr.l{left:-90px}
.morew .arr.r{right:-90px}
.morew .arr[disabled]{display:none}
.morew .stage{position:relative}

@media (max-width:1200px){
  .cta{padding-bottom:129px}
  .cta .wrap{width:960px;padding:0 10px}
  .cta .btn-blue{height:50px;font-size:16px}
  .sfoot .wrap{width:660px}
  .sfoot h2{font-size:24px}
  .morew .wrap{width:960px}
  .morew h2{font-size:38px;margin:0 10px 90px}
}
@media (max-width:959px){
  .cta .wrap{width:auto;max-width:640px;padding:0 20px}
  .sfoot .wrap{width:auto;max-width:640px}
  .morew .wrap{width:auto}
  .morew h2{margin:0 20px 45px}
}
@media (max-width:639px){
  .cta{padding:164px 0 100px}
  .cta h2{font-size:22px}
  .cta .row{margin-top:41px}
  .cta .btn-blue{height:40px;padding:0 25px;font-size:14px}
  .sfoot{padding:90px 0}
  .sfoot h2{font-size:22px}
  .pills{row-gap:10px}
  .pills a{height:30px;padding:0 16px}
  .copy{line-height:1.45}
  .morew{padding:90px 0}
  .morew h2{font-size:30px}
}

/* лента «ещё работы» по ширинам: 960–1200 карточки 220, ниже 960 — листается пальцем */
.morew .scrollicon{display:none}
.morew .track{scrollbar-width:none}
.morew .track::-webkit-scrollbar{display:none}
@media (max-width:1200px){
  .morew .stage{padding:0 40px}
  .morew .post{flex-basis:220px;padding:0 10px}
  .morew .post .pic{width:200px}
  .morew .post .t{font-size:14px;margin-top:19px}
  .morew .arr.l{left:-2px}
  .morew .arr.r{right:-2px}
}
@media (max-width:959px){
  .morew .stage{padding:0}
  .morew .arr{display:none!important}
  .morew .track{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .morew .rail{transform:none!important;padding-left:20px;width:max-content}
  .morew .post{flex-basis:292px;padding:0 26px 0 6px}
  .morew .post .pic{width:260px}
  .morew .post .t{font-size:14px;margin-top:20px}
  .morew .scrollicon{display:flex;justify-content:flex-end;padding:0 20px;margin-bottom:23px;mix-blend-mode:lighten}
  .morew h2{max-width:600px;margin:0 auto 45px}
}
@media (max-width:639px){
  .morew h2{margin:0 20px 45px}
  .morew .rail{padding:0 15px}
  .morew .post{flex-basis:auto;padding:0 5px}
  .morew .post .pic{width:85vw}
  .morew .post .t{font-size:12px;margin-top:20px}
  .morew .scrollicon{margin-bottom:11px}
}

/* форма брифа: выбор способа связи (вместо виджета Тильды) */
.cm .cm-types{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.cm .cm-t{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid transparent;border-radius:6px;background:none;cursor:pointer;font-family:var(--mont);font-size:12px;color:#000}
.cm .cm-t.on{border-color:#000}
.cm .cm-i{display:inline-block;width:14px;height:14px;border-radius:50%}
.cm .cm-phone{background:#000}.cm .cm-telegram{background:#2aabee}.cm .cm-whatsapp{background:#25d366}.cm .cm-vk{background:#0077ff}
.cm .cm-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid #000}
.cm .cm-flag{font-size:12px;white-space:nowrap}
.cm .cm-in{border:0!important;flex:1}

/* Стили Тильды красят все ссылки внутри #allrecords в оранжевый — возвращаем цвета наших блоков */
#allrecords .sfoot .pills a,#allrecords .sfoot .pills a:visited{color:#000;background:#fff}
#allrecords .sfoot .pills a.on{color:#fff;background:#393939}
#allrecords .cta a.btn-blue,#allrecords .cta a.btn-blue:visited{color:#fff}
#allrecords .morew a,#allrecords .morew a:visited{color:#fff}

/* Следующий проект — один полноэкранный экран вместо подвала, карусели и формы (16.10.2026) */
.nextcase{position:relative;display:block;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#111;color:#fff;text-decoration:none!important;isolation:isolate}
.nextcase img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s cubic-bezier(.16,1,.3,1),filter 1s;filter:brightness(.55)}
.nextcase:hover img,.nextcase:focus-visible img{transform:scale(1);filter:brightness(.7)}
.nextcase::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.65) 100%);z-index:1}
.nextcase .in{position:absolute;z-index:2;left:clamp(20px,5vw,80px);right:clamp(20px,5vw,80px);bottom:clamp(40px,9vh,100px);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;font-family:"Montserrat Alternates",Arial,sans-serif}
.nextcase .lbl{display:block;font-size:clamp(15px,1.2vw,18px);font-weight:500;opacity:.75;margin-bottom:clamp(12px,2vh,22px)}
.nextcase .ttl{display:block;font-size:clamp(44px,8vw,140px);font-weight:600;line-height:.95;letter-spacing:-.03em}
.nextcase .dsc{display:block;max-width:36ch;margin-top:clamp(14px,2.4vh,24px);font-size:clamp(16px,1.3vw,20px);line-height:1.4;opacity:.85}
.nextcase .go{flex:none;width:clamp(64px,7vw,104px);height:clamp(64px,7vw,104px);border:1.5px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center;transition:background .4s,border-color .4s,transform .6s cubic-bezier(.16,1,.3,1)}
.nextcase .go svg{width:38%;height:auto;stroke:#fff;fill:none;stroke-width:1.6;transition:stroke .4s}
.nextcase:hover .go{background:#fff;border-color:#fff;transform:translateX(6px)}
.nextcase:hover .go svg{stroke:#000}
.nextcase:focus-visible{outline:3px solid #fff;outline-offset:-6px}
@media (max-width:640px){.nextcase .in{flex-direction:column;align-items:flex-start}.nextcase .go{width:60px;height:60px}}
@media (prefers-reduced-motion:reduce){.nextcase img,.nextcase .go{transition:none}}
#allrecords .nextcase,#allrecords .nextcase *{color:#fff!important;text-decoration:none!important}
#allrecords .nextcase .go svg{stroke:#fff}
#allrecords .nextcase:hover .go svg{stroke:#000}

/* логотип агентства в шапке (16.10.2026): основная версия из брендбука, вектор */
.menu .logo{display:flex;align-items:center;color:#000;transition:opacity .2s;transform:translateY(-2px)}
.menu .logo svg{display:block;height:100%;width:auto}
.menu .logo:hover{opacity:.7}
#allrecords .menu .logo{color:#000!important}
@media (max-width:959px){.menu .logo{display:none}}

/* пункты меню: строчные буквы визуально садились ниже логотипа и кнопки — поднимаем на ту же оптическую линию */
.menu .item{padding-bottom:5px}
/* название Gorodetz — фирменным шрифтом бренда (Cygre): у Montserrat Alternates своя форма буквы z */
@font-face{font-family:"Cygre";src:url(fonts/gorodetz/Cygre-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
.gz-name{font-family:"Cygre","Montserrat Alternates",sans-serif;font-weight:600;letter-spacing:-.005em}