/* ===== Сброс ===== */
html { scroll-behavior: smooth; }
/* прячем полосу прокрутки страницы, прокрутка колесом/тачем/клавиатурой работает */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html, body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* касание без задержки на двойной тап; подсветка нажатия - фирменным синим, видна и на светлых, и на тёмных страницах */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgb(22 111 245 / 0.18); }
:where(a) { text-decoration: none; }
[hidden] { display: none !important; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* «К содержимому» - первая клавиша Tab: мимо шапки и меню сразу к странице; видна только в фокусе */
.skip-link { position: fixed; left: 16px; top: 16px; z-index: 1000; padding: 10px 18px; border-radius: 999px; background: #1C1D20; color: #FFFFFF; font-family: 'PP Neue Montreal', 'Manrope', system-ui, sans-serif; font-size: 15px; text-decoration: none; opacity: 0; pointer-events: none; transform: translateY(-160%); transition: transform .2s, opacity .2s; }
.skip-link:focus-visible { opacity: 1; pointer-events: auto; transform: none; outline: 2px solid #166FF5; outline-offset: 3px; }
main[tabindex="-1"]:focus { outline: none; } /* фокус сюда ставит только «К содержимому» - рамка вокруг всей страницы не нужна */

/*
 * Единица макета --k: на экране 1920 это 1px, на более узком - пропорционально меньше,
 * шире 1920 не растёт. Отступы и крупные заголовки задаются как calc(N * var(--k)),
 * где N - размер из макета 1920. Мелкий текст и кнопки - с нижним порогом через max().
 */
:root { --k: min(1px, 100cqi / 1920); }
.page { container-type: inline-size; }
.wrap { position: relative; max-width: 1920px; margin: 0 auto; }

/* ===== Шторки: при загрузке (intro) и при переходе на другую страницу (nav) ===== */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #202020; will-change: transform; }
.overlay__word { display: block; height: 1.3em; font-family: 'PP Neue Montreal', 'Manrope', system-ui, sans-serif; font-weight: 300; font-size: clamp(44px, 5.2vw, 104px); line-height: 1.3; letter-spacing: -0.01em; text-align: center; white-space: nowrap; color: #FFFFFF; opacity: 0; translate: 0 40px; }

/* край шторки - дуга: эллипс чуть шире экрана, наполовину выступает за край (на 18vh), сжимается по высоте */
.overlay::before,
.overlay::after { content: ''; position: absolute; left: -10%; width: 120%; height: 36vh; border-radius: 50%; background: inherit; }
.overlay::before { bottom: calc(100% - 18vh); transform: scaleY(0); }
.overlay::after { top: calc(100% - 18vh); }

/* при загрузке: уезжает вверх, дуга снизу расправляется */
.overlay--intro { z-index: 100; transform: translateY(0); transition: transform .8s cubic-bezier(.76,0,.24,1); }
.overlay--intro::after { transition: transform 1s cubic-bezier(.76,0,.24,1); }
.overlay--intro .overlay__word { transition: opacity .3s ease, translate .8s cubic-bezier(.19,1,.22,1); }
.overlay--intro[data-state="hold"] .overlay__word,
.overlay--intro[data-state="run"] .overlay__word,
.overlay--intro[data-state="exit"] .overlay__word { opacity: 1; translate: 0 0; }
.overlay--intro[data-state="exit"] { transform: translateY(-100%); pointer-events: none; }
.overlay--intro[data-state="exit"]::after { transform: scaleY(0); }
/* пришли по меню сайта: слово с прошлой страницы стоит сразу, без проявления, и уезжает вместе со шторкой */
.overlay--intro[data-state="carry"] .overlay__word { opacity: 1; translate: 0 0; transition: none; }

/* при переходе: въезжает снизу с дугой сверху, слово выезжает и остаётся - на новой странице оно же уезжает со шторкой */
.overlay--nav { z-index: 101; transform: translateY(100%); transition: transform .62s cubic-bezier(.76,0,.24,1); }
.overlay--nav::before { transition: transform .52s cubic-bezier(.76,0,.24,1); }
/* слово проявляется к 0,6 с - к уходу на новую страницу (0,7 с, js/common.js) оно уже целиком */
.overlay--nav .overlay__word { transition: opacity .3s ease .3s, translate .6s cubic-bezier(.19,1,.22,1) .3s; }
.overlay--nav.is-cover { transform: translateY(0); }
.overlay--nav.is-cover::before { transform: scaleY(1); }
.overlay--nav.is-cover .overlay__word { opacity: 1; translate: 0 0; }

/* Страховка: шторку снимает js/common.js; если скрипт страницы так и не начал (не загрузился, ошибка), через 3 с шторка
   прячется сама. Начал - у шторки уже другой data-state, страховки нет */
.overlay--intro[data-state="wait"] { animation: overlay-safety 0s 3s forwards; }
@keyframes overlay-safety { to { visibility: hidden; } }

/* ===== Подъём контента после шторки (класс is-entering ставит скрипт в head) ===== */
@property --rise { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --about-bg { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
/* сдвиги параллакса (--px/--py) и магнита (--mx/--my) не наследуются - иначе вложенные элементы сдвигались бы дважды */
@property --px { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --py { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --mx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --my { syntax: '<length>'; inherits: false; initial-value: 0px; }
.once-in { --rise: 0px; transition: --rise 1.1s cubic-bezier(.19,1,.22,1) calc(var(--i, 0) * 0.05s); }
.is-entering .once-in { --rise: 50vh; transition: none; will-change: transform; }

/* общий сдвиг: подъём + параллакс + магнит складываются в одно свойство translate */
.once-in,
[data-speed],
[data-speed-x],
.magnetic { translate: calc(var(--px, 0px) + var(--mx, 0px)) calc(var(--py, 0px) + var(--my, 0px) + var(--rise, 0px)); }

/* ===== Шапка ===== */
.header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; padding: calc(49 * var(--k)) 0 0 calc(129 * var(--k)); }

.logo { --lk: max(0.7px, var(--k)); position: relative; flex: none; width: calc(40 * var(--lk)); height: calc(56 * var(--lk)); overflow: hidden; }
.logo img { position: absolute; left: calc(-60.72 * var(--lk)); top: calc(-44.74 * var(--lk)); width: calc(162.88 * var(--lk)); height: calc(163.38 * var(--lk)); max-width: none; }
.logo--invert img { filter: invert(1); }
/* свой знак из админки («Бренд и фото») - целиком, вписан в ту же область рамки, где стоит знак «S» из logo-safronov */
.logo img.logo__own { left: 12%; top: 8%; width: 80%; height: 80%; object-fit: contain; }

/* work и about - в своих колонках (850 и 975 в макете), contact - с 1695 */
.nav { display: grid; grid-template-columns: minmax(max-content, calc(125 * var(--k))) minmax(max-content, calc(720 * var(--k))) auto; margin-left: calc(681 * var(--k)); }
.nav-link { position: relative; justify-self: start; margin-right: 0.75em; font-weight: 300; font-size: max(16px, calc(24 * var(--k))); line-height: calc(33 / 24); white-space: nowrap; }
.nav-link:not([aria-current]) { transition: opacity .2s; }
/* наведение - только где есть мышь: на тачскрине :hover залипает после нажатия (строка бледная после «назад», кнопка остаётся залитой) */
@media (hover: hover) { .nav-link:not([aria-current]):hover { opacity: 0.6; } }
.nav-link__bracket { visibility: hidden; }
.nav-link__dot { position: absolute; left: 50%; top: calc(41em / 24); width: calc(8em / 24); height: calc(8em / 24); margin-left: calc(-4em / 24); border-radius: 50%; }

/* ===== Мелкие общие элементы ===== */
.caption { margin: 0; font-weight: 400; font-size: max(11px, calc(12 * var(--k))); line-height: calc(17 / 12); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; color: #8A8A8A; }
.copyright { margin: 0; font-weight: 400; font-size: max(14px, calc(17 * var(--k))); line-height: calc(25 / 17); white-space: nowrap; color: #FFFFFF; }
/* ссылка на политику в подвале каждой страницы (152-ФЗ: политика должна быть доступна) */
.legal-link { font-weight: 400; font-size: max(13px, calc(15 * var(--k))); line-height: 1.4; white-space: nowrap; color: rgba(255,255,255,0.55); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
@media (hover: hover) { .legal-link:hover { color: #FFFFFF; } }
.social { display: flex; gap: calc(30 * var(--k)); }
.social-link { font-weight: 400; font-size: max(14px, calc(17 * var(--k))); line-height: calc(25 / 17); white-space: nowrap; color: #FFFFFF; transition: opacity .2s; }
@media (hover: hover) { .social-link:hover { opacity: 0.6; } }

/* ===== Подвал «запустим ваш проект вместе» (главная, work, about) ===== */
/* Высота - на весь экран, но не меньше 760 в масштабе; блок по центру, сверху не ближе 40 */
.cta { --cta-h: max(calc(760 * var(--k)), 100vh); position: relative; display: flow-root; min-height: var(--cta-h); overflow: hidden; background: #1C1D20; color: #FFFFFF; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; }
/* снизу не меньше 100px: на низком экране (телефон боком) блок «Версия» иначе встаёт вплотную к кнопкам почты и телефона */
.cta__inner { position: relative; width: calc(1300 * var(--k)); margin: max(calc(40 * var(--k)), (var(--cta-h) - calc(730 * var(--k))) / 2) 0 max(calc(150 * var(--k)), 100px) calc(310 * var(--k)); }
.cta__head { position: relative; padding-top: calc(32 * var(--k)); }
.cta__avatar { position: absolute; left: 0; top: calc(60 * var(--k)); width: calc(100 * var(--k)); height: calc(100 * var(--k)); border-radius: 50%; object-fit: cover; background: #3A3B3F; }
.cta__title { margin: 0 0 0 calc(-5 * var(--k)); font-weight: 400; font-size: calc(117 * var(--k)); line-height: calc(125.2 / 117); letter-spacing: 0; text-indent: calc(140 * var(--k)); white-space: nowrap; color: #FFFFFF; }
.cta__arrow { position: absolute; right: 0; top: calc(200 * var(--k)); width: calc(22 * var(--k)); height: calc(22 * var(--k)); overflow: visible; }
.cta__line { position: relative; height: 1px; margin-top: calc(109.6 * var(--k)); background: rgba(255,255,255,0.18); }
/* круглая кнопка сидит центром на линии */
.cta__button { --btn: max(120px, calc(208 * var(--k))); position: absolute; left: calc(1092 * var(--k) - var(--btn) / 2); top: calc(var(--btn) / -2); z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--btn); height: var(--btn); border-radius: 50%; background: #166FF5; color: #FFFFFF; font-weight: 400; font-size: max(15px, calc(19 * var(--k))); line-height: 1; white-space: nowrap; transition: transform .4s cubic-bezier(.2,.8,.2,1), background-color .25s; }
@media (hover: hover) { :root:not(.fx) .cta__button:hover { transform: scale(1.04); background: #2F84FF; color: #FFFFFF; } }
/* не ближе 74px к линии - иначе на узких экранах круглая кнопка налезает на телефон */
.cta__pills { display: flex; gap: calc(10 * var(--k)); margin-top: max(calc(95 * var(--k)), 74px); }
.cta__pill { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: max(56px, calc(80 * var(--k))); padding: 0 max(24px, calc(46 * var(--k))); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); color: #FFFFFF; font-weight: 400; font-size: max(15px, calc(19 * var(--k))); line-height: 1; white-space: nowrap; transition: background-color .25s, color .25s; }
@media (hover: hover) { :root:not(.fx) .cta__pill:hover { background: #FFFFFF; color: #1C1D20; } }
.cta__bottom { position: absolute; left: 0; right: 0; bottom: calc(27 * var(--k)); box-sizing: border-box; max-width: 1920px; margin: 0 auto; padding: 0 calc(129 * var(--k)); display: flex; justify-content: space-between; align-items: flex-end; }
.cta__col { display: flex; flex-direction: column; gap: calc(15 * var(--k)); }

/* ===== Окно про cookie (js/consent.js): белая карточка слева внизу; «Принять все» и «Отклонить необязательные» одинаковые - отказаться
   так же просто, как принять; «Настроить» - ссылкой под ними, раскрывает галочки ===== */
.cookie { position: fixed; left: max(16px, calc(36 * var(--k))); bottom: max(16px, calc(36 * var(--k))); z-index: 85; box-sizing: border-box; width: min(440px, calc(100vw - 32px)); padding: 22px 24px 24px; border-radius: 22px; background: #FFFFFF; color: #1C1D20; box-shadow: 0 0 0 1px rgba(28,29,32,0.08), 0 16px 48px rgba(28,29,32,0.18); font-family: 'PP Neue Montreal', 'Manrope', system-ui, sans-serif; animation: cookie-in .5s cubic-bezier(.19,1,.22,1); }
@keyframes cookie-in { from { opacity: 0; translate: 0 16px; } }
.cookie__text { margin: 0; font-weight: 400; font-size: 15px; line-height: 1.45; }
.cookie__more { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cookie__now { margin: 10px 0 0; font-size: 13px; color: #6B6B70; }
.cookie__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.cookie__set { align-self: center; margin-top: 2px; padding: 6px 4px; border: 0; background: none; color: #1C1D20; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie__set:focus-visible { outline: 2px solid #1774FF; outline-offset: 2px; border-radius: 6px; }
.cookie__prefs { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(28,29,32,0.12); }
.cookie__prefs[hidden] { display: none; }
.cookie__actions .cookie__btn, .cookie__prefs .cookie__btn { flex: none; width: 100%; }
.cookie__row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; }
.cookie__row input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #1C1D20; cursor: pointer; }
.cookie__row input:disabled { cursor: default; opacity: .6; }
.cookie__btn { flex: 1; height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px #1C1D20; color: #1C1D20; font: inherit; font-size: 15px; cursor: pointer; transition: background-color .2s, color .2s; }
.cookie__btn:focus-visible { outline: 2px solid #1774FF; outline-offset: 3px; }
@media (hover: hover) { .cookie__btn:hover { background: #1C1D20; color: #FFFFFF; } }
@media (prefers-reduced-motion: reduce) { .cookie { animation: none; } }
/* «Cookie» в подвале - кнопка, выглядит как ссылка на политику рядом */
button.legal-link { padding: 0; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }

/* ===== Кнопка «все работы» (главная, кейс) ===== */
.all-works { display: flex; align-items: center; justify-content: center; gap: 3px; width: max(150px, calc(182 * var(--k))); height: max(56px, calc(72 * var(--k))); margin: calc(118.5 * var(--k)) auto 0; border-radius: 999px; box-shadow: inset 0 0 0 1px #E2E2E2; color: #000000; transition: box-shadow .2s; }
@media (hover: hover) { :root:not(.fx) .all-works:hover { box-shadow: inset 0 0 0 1px #000000; color: #000000; } }
.all-works__text { font-weight: 300; font-size: max(15px, calc(18 * var(--k))); line-height: 1.366; white-space: nowrap; }
.all-works__count { position: relative; top: calc(-8.5em / 11); font-weight: 200; font-size: max(10px, calc(11 * var(--k))); line-height: 1.366; white-space: nowrap; }

/* ===== Телефон (уже 768): поля 20px, размеры в px - единица --k здесь слишком мелкая ===== */
@media (max-width: 767px) {
  /* шапка по макету: только лого, крупнее десктопного; ссылок нет - меню кнопкой, она видна сразу (js/motion.js).
     Значок лого на 6px правее края блока: отступ 15px ставит его на одну линию с заголовками (20px); на всех страницах одинаково, и на главной (владелец 31.10) */
  .header { padding: 38px 15px 0; }
  .logo { --lk: 1.22px; }
  .nav { display: none; }

  .cta { --cta-h: auto; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; min-height: 100svh; }
  .cta__inner { --fs: clamp(36px, 11.5vw, 64px); width: auto; margin: 22vh 20px 64px; }
  .cta__head { padding-top: 0; }
  .cta__avatar { top: calc((var(--fs) * 1.07 - 52px) / 2); width: 52px; height: 52px; }
  .cta__title { margin: 0; font-size: var(--fs); text-indent: 64px; }
  .cta__arrow { position: static; display: block; width: 18px; height: 18px; margin: 32px 0 0 auto; }
  .cta__line { margin-top: 72px; }
  .cta__button { --btn: 120px; left: auto; right: 0; font-size: 16px; }
  .cta__pills { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 76px; }
  .cta__pill { height: 52px; padding: 0 24px; font-size: 15px; }
  .cta__bottom { position: static; flex-direction: column; align-items: flex-start; gap: 32px; margin: 0; padding: 0 20px 28px; }
  .cta__col { gap: 10px; }
  .social { flex-wrap: wrap; gap: 8px 20px; }
  .social-link, .legal-link { padding: 10px 0; margin: -10px 0; }
  button.legal-link { padding: 10px 0; }
  .cookie { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 18px 20px; }

  .all-works { margin-top: 48px; }
}