/* =========================================================
   Тема «Аппба». Стиль «Реклама как искусство»:
   бумага, чёрная краска, фиолетовая полоса, пометки маркером.
   Разделы ниже совпадают с модулями template-parts/modules/*.php
   ========================================================= */

/* ---------- Шрифты: локально ---------- */
@font-face { font-family: "Sofia Sans Extra Condensed"; src: url("../fonts/sofia-sans-extra-condensed-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Sofia Sans Extra Condensed"; src: url("../fonts/sofia-sans-extra-condensed-latin-wght-normal.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sofia Sans"; src: url("../fonts/sofia-sans-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Sofia Sans"; src: url("../fonts/sofia-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Токены ---------- */
:root {
  --paper: #ece7df;       /* бумага */
  --paper-2: #dfd8cc;     /* бумага потемнее — наклейки, карточки */
  --ink: #161514;         /* типографская краска */
  --ink-soft: #57524c;    /* второстепенный текст на бумаге */
  --coal: #1d1f21;        /* тёмные развороты */
  --ash: #a3a39f;         /* второстепенный текст на тёмном */
  --violet: #6f4bff;      /* единственный акцент */
  --violet-hi: #b5a4ff;   /* акцент для текста на тёмном */
  --rule: rgba(22, 21, 20, .16);
  --rule-dark: rgba(236, 231, 223, .14);

  --f-display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --f-text: "Sofia Sans", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 3.4vw, 56px);
  --wrap: 1440px;
  --shadow: 6px 6px 0 var(--ink);
  --ease: cubic-bezier(.22, .8, .16, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.5 var(--f-text);
  font-feature-settings: "kern", "lnum";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* бумажное зерно поверх всего */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, figure, blockquote { margin: 0; font-weight: inherit; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
::selection { background: var(--violet); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--violet); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.blk { padding-block: clamp(96px, 11vw, 170px); }
.blk--dark { background: var(--coal); color: var(--paper); }
.blk--violet { background: var(--violet); color: var(--ink); }

.display {
  font-family: var(--f-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.01em; line-height: .84;
}
.h2 { font: 900 clamp(52px, 7.4vw, 128px)/.84 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; }
.lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; max-width: 34em; }
.muted { color: var(--ink-soft); }
.blk--dark .muted { color: var(--ash); }

/* ---------- Кнопки: кнопка-плашка с жёсткой тенью ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 0 12px 0 26px;
  font: 700 19px/1 var(--f-text); text-decoration: none; cursor: pointer;
  border: 2px solid var(--ink); background: var(--violet); color: #fff;
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.btn__ico { display: grid; place-items: center; width: 38px; height: 38px; background: var(--ink); color: var(--paper); transition: transform .35s var(--ease-out); }
.btn__ico svg { width: 18px; height: 18px; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.btn:hover .btn__ico { transform: translate(3px, -3px) rotate(-8deg); }
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper .btn__ico { background: var(--violet); color: #fff; }
.blk--dark .btn { border-color: var(--paper); box-shadow: 6px 6px 0 var(--paper); }
.blk--dark .btn:hover { box-shadow: 8px 8px 0 var(--paper); }
.link {
  font: 700 19px/1 var(--f-text); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  padding-bottom: 4px; transition: background-size .35s var(--ease);
}
.link:hover { background-size: 0 2px; background-position: 100% 100%; }

/* ---------- Пометки маркером (рисуются при появлении) ---------- */
.scribble { position: absolute; pointer-events: none; overflow: visible; }
.scribble path { fill: none; stroke: var(--violet); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 1.3s var(--ease-out) .2s; }
.is-drawn .scribble path, .scribble.is-drawn path { stroke-dashoffset: 0; }

/* =========================================================
   ШАПКА — плашка
   ========================================================= */
.site-head {
  position: fixed; z-index: 60; top: 14px; left: var(--gutter); right: var(--gutter);
  height: 62px; display: flex; align-items: center; gap: 28px;
  padding: 0 8px 0 18px;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transform: translateY(0); transition: transform .45s var(--ease);
}
.site-head.is-hidden { transform: translateY(-120px); }
.logo { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.logo__mark { font: 900 32px/.8 var(--f-display); text-transform: uppercase; }
.logo__sub { font: 600 13px/1 var(--f-text); color: var(--ink-soft); }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { font: 600 16px/1 var(--f-text); text-decoration: none; padding: 8px 0; background: linear-gradient(var(--violet), var(--violet)) 0 100% / 0 3px no-repeat; transition: background-size .3s var(--ease); }
.nav a:hover { background-size: 100% 3px; }
.site-head__phone { font: 700 16px/1 var(--f-text); text-decoration: none; white-space: nowrap; }
.site-head__cta { min-height: 44px; padding: 0 18px; font-size: 16px; box-shadow: none; border-width: 0; }
.site-head__cta:hover { box-shadow: none; transform: none; background: var(--ink); }
.burger { display: none; }

/* =========================================================
   1. ПЕРВЫЙ ЭКРАН — плакат
   ========================================================= */
.hero { position: relative; isolation: isolate; min-height: max(100svh, 720px); padding: 0; overflow: clip; }
.hero__copy { position: relative; z-index: 4; width: min(560px, 42vw); margin-left: var(--gutter); padding-top: clamp(120px, 17svh, 170px); }
.hero__kicker { display: inline-block; padding: 7px 12px; font: 700 15px/1 var(--f-text); background: var(--ink); color: var(--paper); transform: rotate(-2deg); }
.hero__claim { margin-top: 26px; font: 900 clamp(54px, 5.6vw, 96px)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.hero__claim .line { display: block; overflow: clip; padding: .1em 0 .02em; margin-top: -.12em; }
.hero__claim .line > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease-out); }
.hero__claim .line:nth-child(2) > span { transition-delay: .08s; }
.hero__claim .line:nth-child(3) > span { transition-delay: .16s; }
.is-loaded .hero__claim .line > span { transform: none; }
.hero__claim .strike-word { position: relative; display: inline-block; }
.hero__claim .scribble { left: -4%; top: 38%; width: 108%; height: 40%; }
.hero__lede { margin-top: 26px; font-size: 19px; line-height: 1.45; max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; margin-top: 34px; }

.hero__visual { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* фиолетовая полоса с именем */
.hero__band {
  --bh: clamp(120px, 19vh, 186px);
  position: absolute; z-index: 1; left: -15%; width: 130%;
  top: calc(var(--band-y, 74%) - var(--bh) / 2); height: var(--bh);
  background: var(--violet);
  transform: rotate(-11deg); transform-origin: 67% 50%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s var(--ease-out) .15s;
  display: flex; align-items: center; overflow: hidden;
}
.is-loaded .hero__band { clip-path: inset(0 0 0 0); }
.hero__band-track { display: flex; white-space: nowrap; transform: translateX(var(--drift, 0px)); will-change: transform; }
.hero__band-track span { padding-right: .35em; font: 900 clamp(96px, 15vh, 160px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--paper); }
.hero__band-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 2px var(--paper); }

.hero__photo {
  position: absolute; z-index: 2; bottom: 0; right: clamp(0px, 7vw, 140px);
  height: min(90svh, 900px); width: auto; aspect-ratio: 986 / 1142;
  mix-blend-mode: multiply;
  transform: translateY(6%); opacity: 0;
  transition: transform 1.4s var(--ease-out) .25s, opacity .8s ease .25s;
}
.is-loaded .hero__photo { transform: translateY(var(--photo-y, 0px)); opacity: 1; }

/* вращающийся штамп */
.stamp { position: absolute; z-index: 3; width: clamp(130px, 11vw, 176px); aspect-ratio: 1; }
.hero .stamp { right: clamp(16px, 4vw, 70px); top: clamp(110px, 16svh, 160px); }
.stamp svg { width: 100%; height: 100%; animation: spin 22s linear infinite; }
.stamp text { font: 800 15.5px var(--f-display); letter-spacing: .14em; text-transform: uppercase; fill: var(--ink); }
.stamp__core { position: absolute; inset: 31%; display: grid; place-items: center; background: var(--violet); color: #fff; border-radius: 50%; font: 900 30px/1 var(--f-display); border: 2px solid var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* подпись-визитка в углу */
.hero__caption { position: absolute; z-index: 4; left: var(--gutter); bottom: 28px; display: flex; gap: 10px; align-items: center; font: 600 14px/1.3 var(--f-text); color: var(--ink-soft); }
.hero__caption b { color: var(--ink); }

/* =========================================================
   2. ЛЕНТА РАБОТОДАТЕЛЕЙ
   ========================================================= */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; padding: 22px 0; border-block: 2px solid var(--ink); }
.ticker__row { display: flex; width: max-content; animation: ticker 38s linear infinite; animation-direction: var(--dir, normal); }
.ticker__row ul { display: flex; align-items: center; }
.ticker__row li { display: flex; align-items: center; gap: 34px; padding-right: 34px; font: 900 clamp(46px, 5.4vw, 86px)/1 var(--f-display); text-transform: uppercase; white-space: nowrap; }
.ticker__row li::after { content: ""; width: .32em; height: .32em; background: var(--violet); transform: rotate(45deg); }
.ticker__row li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--paper); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* =========================================================
   3. ЦИФРЫ — наклейки
   ========================================================= */
.proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5vw; align-items: start; }
.proof__head { position: sticky; top: 120px; }
.proof__head .lead { margin-top: 28px; }
.proof__quote { margin-top: 36px; padding-left: 20px; border-left: 4px solid var(--violet); font: 800 30px/1.02 var(--f-display); text-transform: uppercase; }
.proof__quote cite { display: block; margin-top: 10px; font: 600 14px/1 var(--f-text); text-transform: none; font-style: normal; color: var(--ink-soft); }
.stickers { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; padding-top: 10px; }
.sticker {
  position: relative; padding: 26px 26px 28px;
  background: var(--paper-2); border: 2px solid var(--ink); box-shadow: var(--shadow);
  transform: rotate(var(--r, 0deg)) translate(var(--dx, 0px), var(--dy, 0px));
  transition: box-shadow .25s var(--ease);
  touch-action: none; user-select: none;
}
.sticker[data-drag] { cursor: grab; }
.sticker.is-dragging { cursor: grabbing; box-shadow: 12px 12px 0 var(--ink); z-index: 5; transition: none; }
.sticker--violet { background: var(--violet); color: #fff; }
.sticker--violet .sticker__label { color: rgba(255, 255, 255, .82); }
.sticker--ink { background: var(--ink); color: var(--paper); }
.sticker--ink .sticker__label { color: var(--ash); }
.sticker--ink .scribble path, .sticker--violet .scribble path { stroke: var(--paper); }
.stickers .sticker:nth-child(even) { --dy: 28px; }
.sticker__num { display: block; font: 900 clamp(64px, 6.4vw, 108px)/.84 var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.sticker__label { display: block; margin-top: 12px; font-size: 16px; line-height: 1.3; color: var(--ink-soft); max-width: 18em; }
.sticker__src { display: block; margin-top: 14px; font: 700 13px/1 var(--f-text); text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.sticker .scribble { left: -6%; top: -14%; width: 112%; height: 128%; }
.sticker .scribble path { stroke: var(--ink); stroke-width: 4; }
.stickers__hint { grid-column: 1 / -1; font-size: 14px; color: var(--ink-soft); }

/* =========================================================
   4. ОПЫТ — строки работодателей
   ========================================================= */
.career__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: clamp(40px, 5vw, 72px); }
.career__head .lead { max-width: 28em; }
.jobs { border-top: 2px solid var(--paper); }
.job { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) minmax(0, 2fr); gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--rule-dark); isolation: isolate; }
.job::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; background: var(--violet); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--ease); }
.job:hover::before { transform: scaleY(1); }
.job__org { font: 900 clamp(48px, 6vw, 104px)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; transition: transform .45s var(--ease); }
.job:hover .job__org { transform: translateX(14px); }
.job__role { font: 700 18px/1.3 var(--f-text); }
.job__role span { display: block; margin-top: 6px; font-weight: 400; font-size: 16px; color: var(--ash); transition: color .3s; }
.job:hover .job__role span { color: rgba(255, 255, 255, .85); }
.job__year { font: 900 40px/1 var(--f-display); text-align: right; }
.job__facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: -8px; }
.job__facts li { padding: 7px 12px; font-size: 15px; border: 1px solid var(--rule-dark); }
.job:hover .job__facts li { border-color: rgba(255, 255, 255, .5); }
.career__edu { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.career__edu div { padding-top: 16px; border-top: 1px solid var(--rule-dark); }
.career__edu b { display: block; font: 900 30px/1 var(--f-display); text-transform: uppercase; }
.career__edu span { display: block; margin-top: 6px; font-size: 15px; color: var(--ash); }

/* =========================================================
   5. КЕЙСЫ — стопка карточек
   ========================================================= */
.cases__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: clamp(48px, 6vw, 90px); }
.stack { display: grid; gap: clamp(28px, 4vw, 60px); }
.card {
  position: sticky; top: calc(100px + var(--i, 0) * 14px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: min(76vh, 660px);
  background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow);
  transform-origin: 50% 0; transform: scale(var(--s, 1));
}
.card:nth-child(even) { background: var(--paper-2); }
.card__text { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 48px); }
.card__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.card__meta span { padding: 6px 10px; font: 700 13px/1 var(--f-text); text-transform: uppercase; letter-spacing: .04em; border: 2px solid var(--ink); }
.card__meta span:first-child { background: var(--ink); color: var(--paper); }
.card__title { margin-top: 24px; font: 900 clamp(38px, 3.6vw, 64px)/.88 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.card__desc { margin-top: 18px; font-size: 17px; color: var(--ink-soft); max-width: 32em; }
.card__nums { margin: auto 0 0; padding-top: 26px; display: flex; flex-wrap: wrap; gap: 18px 36px; }
.card__nums div { display: flex; flex-direction: column-reverse; }
.card__nums dd { margin: 0; font: 900 clamp(46px, 4.4vw, 76px)/.86 var(--f-display); white-space: nowrap; }
.card__nums dt { margin-top: 6px; font-size: 14px; line-height: 1.25; color: var(--ink-soft); max-width: 12em; }
.card__nums div:first-child dd { color: var(--violet); }
.card__media { position: relative; overflow: hidden; border-left: 2px solid var(--ink); background: var(--ink); }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.card__media--contain { background: var(--paper-2); display: grid; place-items: center; padding: clamp(20px, 3vw, 44px); }
.card__media--contain img { width: auto; height: auto; max-height: 100%; object-fit: contain; border: 2px solid var(--ink); box-shadow: var(--shadow); }
.card__media--type { background: var(--violet); color: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3vw, 48px); }
.card__media--type .display { font-size: clamp(140px, 17vw, 300px); }
.card__media--type p { margin-top: 14px; max-width: 22em; font-weight: 600; }

.card__media--ink { background: var(--ink); color: var(--paper); }
.card__media--ink .display { color: transparent; -webkit-text-stroke: 2px var(--violet-hi); }
.card__media--charts { background: #fff; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(18px, 2.4vw, 36px); }
.card__media--charts figure { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #fff; }
.card__media--charts img { width: 100%; height: auto; object-fit: contain; }
.card__media--charts figcaption { padding: 8px 12px; font: 700 14px/1.2 var(--f-text); border-top: 2px solid var(--ink); background: var(--paper); }

/* =========================================================
   6. ГАЛЕРЕЯ РАБОТ — ряды на скролле
   ========================================================= */
.works { overflow: hidden; }
.works__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: clamp(40px, 5vw, 70px); }
.works__row { display: flex; gap: 26px; width: max-content; padding: 14px 0; transform: translateX(var(--shift, 0px)); will-change: transform; }
.works__row + .works__row { margin-top: 18px; }
.shot--photo img { aspect-ratio: 4 / 3; object-position: center 30%; filter: grayscale(1) contrast(1.08); transition: filter .5s var(--ease); }
.shot--photo:hover img { filter: none; }
.shot { flex: none; width: clamp(260px, 27vw, 420px); margin: 0; background: var(--paper); border: 2px solid var(--paper); box-shadow: 6px 6px 0 var(--violet); transform: rotate(var(--r, 0deg)); }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.shot figcaption { padding: 10px 12px; font: 700 14px/1.2 var(--f-text); color: var(--ink); background: var(--paper); border-top: 2px solid var(--ink); }

/* =========================================================
   7. УСЛУГИ
   ========================================================= */
.services { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 5vw; align-items: start; }
.services__head { position: sticky; top: 120px; }
.services__head .lead { margin-top: 26px; }
.svc-group + .svc-group { margin-top: 46px; }
.svc-group__title { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font: 700 15px/1 var(--f-text); color: var(--ink-soft); }
.svc-group__title::before { content: ""; width: 12px; height: 12px; background: var(--violet); }
.svc { border-bottom: 2px solid var(--ink); }
.svc-group .svc:first-of-type { border-top: 2px solid var(--ink); }
.svc summary {
  position: relative; list-style: none; cursor: pointer; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0;
  font: 900 clamp(32px, 3vw, 52px)/.9 var(--f-display); text-transform: uppercase;
  transition: color .3s, padding .4s var(--ease);
}
.svc summary::-webkit-details-marker { display: none; }
.svc summary::before { content: ""; position: absolute; inset: 0 -12px; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.svc summary:hover { color: var(--paper); padding-left: 14px; }
.svc summary:hover::before { transform: scaleX(1); }
.svc summary::after {
  content: ""; flex: none; width: 26px; height: 26px;
  background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat, linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat;
  transition: transform .4s var(--ease);
}
.svc[open] summary::after { transform: rotate(135deg); }
.svc[open] summary { color: var(--violet); }
.svc[open] summary:hover { color: var(--paper); }
.svc__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 28px; padding: 6px 0 28px; }
.svc__body > p { font-size: 18px; font-weight: 600; }
.svc__body ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.svc__body li { font-size: 15px; line-height: 1.35; color: var(--ink-soft); }
.svc__body li b { display: block; color: var(--ink); font-size: 16px; }

/* =========================================================
   8. ФОРМАТЫ И ЦЕНЫ — билеты
   ========================================================= */
.prices { padding-top: 0; }
.prices__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: clamp(44px, 5vw, 76px); }
.prices__head .lead { max-width: 28em; }
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.ticket {
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px 28px 32px;
  background: var(--paper-2); border: 2px solid var(--ink); box-shadow: var(--shadow);
}
/* вырезы, как у билета */
.ticket::before, .ticket::after { content: ""; position: absolute; top: 96px; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.ticket::before { left: -15px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -15px; clip-path: inset(0 50% 0 0); }
.ticket__name { font: 900 38px/.9 var(--f-display); text-transform: uppercase; padding-bottom: 26px; border-bottom: 2px dashed var(--ink); }
.ticket__price { display: flex; align-items: baseline; gap: 8px; font: 900 clamp(60px, 5.6vw, 96px)/.85 var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.ticket__price span { font: 700 18px/1 var(--f-text); letter-spacing: 0; }
.ticket__text { color: var(--ink-soft); font-size: 17px; }
.ticket .link { margin-top: auto; align-self: flex-start; font-size: 17px; }
.ticket--uv { background: var(--violet); color: #fff; }
.ticket--uv .ticket__name { border-color: #fff; }
.ticket--uv .ticket__text { color: rgba(255, 255, 255, .86); }

/* =========================================================
   9. МАНИФЕСТ — фиолетовый разворот
   ========================================================= */
.manifesto { position: relative; overflow: hidden; }
.manifesto__line { font: 900 clamp(60px, 9.4vw, 172px)/.84 var(--f-display); text-transform: uppercase; letter-spacing: -.012em; }
.manifesto__line--b { margin: .12em 0 0 12vw; color: var(--paper); transform: rotate(-3deg); transform-origin: 0 100%; }
.manifesto__word { position: relative; display: inline-block; }
.manifesto__word .scribble { left: -6%; top: 20%; width: 112%; height: 70%; }
.manifesto__word .scribble path { stroke: var(--ink); stroke-width: 9; }
.manifesto__foot { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: clamp(40px, 6vw, 90px); }
.manifesto__foot p { max-width: 26em; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; font-weight: 600; }
.manifesto__foot .stamp { position: relative; }
.manifesto__foot .stamp text { fill: var(--ink); }
.manifesto__foot .stamp__core { background: var(--ink); }

/* =========================================================
   9. ВЫСТУПЛЕНИЯ И ПРЕССА — вырезки
   ========================================================= */
.press__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: clamp(40px, 5vw, 72px); }
.clip {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 290px; padding: 30px 24px 26px;
  background: #f6f2ea; border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--rule), 10px 14px 0 -4px rgba(22, 21, 20, .1);
  transform: rotate(var(--r, 0deg)); transition: transform .4s var(--ease);
}
.clip.is-in:hover { transform: rotate(0deg) translateY(-6px); transition-delay: 0s; }
.clip::before { content: ""; position: absolute; top: -14px; left: 50%; width: 92px; height: 28px; transform: translateX(-50%) rotate(-3deg); background: rgba(111, 75, 255, .55); }
.clip__src { font: 900 30px/.9 var(--f-display); text-transform: uppercase; }
.clip__date { font: 700 13px/1 var(--f-text); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.clip__text { font-size: 16px; line-height: 1.4; }
.clip__text q { font-weight: 700; }
.clip__kind { margin-top: auto; font: 700 14px/1 var(--f-text); color: var(--violet); }

/* =========================================================
   10. ЗАЯВКА
   ========================================================= */
.contact__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 6vw; align-items: start; }
.contact__title { font: 900 clamp(64px, 9vw, 160px)/.82 var(--f-display); text-transform: uppercase; letter-spacing: -.012em; }
.contact__title em { font-style: normal; color: var(--violet-hi); }
.contact__photo { position: relative; margin-top: 40px; max-width: 560px; transform: rotate(-1.5deg); }
.contact__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 30%; border: 2px solid var(--paper); box-shadow: 10px 10px 0 var(--violet); }
.contact__photo::before { content: ""; position: absolute; z-index: 1; top: -14px; left: 40px; width: 110px; height: 28px; transform: rotate(-4deg); background: rgba(236, 231, 223, .55); }
.contact__photo figcaption { margin-top: 18px; font-size: 15px; font-style: italic; color: var(--ash); max-width: 34em; }
.contact__steps { margin-top: 40px; display: grid; gap: 14px; counter-reset: st; }
.contact__steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: baseline; font-size: 17px; color: var(--ash); }
.contact__steps li::before { counter-increment: st; content: counter(st); font: 900 34px/1 var(--f-display); color: var(--paper); }
.contact__steps b { color: var(--paper); }
.contact__direct { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px 34px; }
.contact__direct a { font: 800 26px/1.1 var(--f-text); text-decoration: none; }
.contact__direct a:hover { color: var(--violet-hi); }

.form { display: grid; gap: 22px; padding: clamp(22px, 2.6vw, 38px); background: var(--paper); color: var(--ink); border: 2px solid var(--paper); box-shadow: 10px 10px 0 var(--violet); }
.form__title { font: 900 36px/.9 var(--f-display); text-transform: uppercase; }
.field { display: grid; gap: 6px; }
.field span, .chips legend { font: 700 14px/1.2 var(--f-text); color: var(--ink-soft); }
.field input { width: 100%; height: 54px; padding: 0 14px; background: #fff; border: 2px solid var(--ink); border-radius: 0; color: var(--ink); font: 500 19px/1 var(--f-text); transition: box-shadow .2s; }
.field input:focus { outline: none; box-shadow: 4px 4px 0 var(--violet); }
.field input:user-invalid { border-color: #c4271a; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { padding: 0; margin-bottom: 10px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chips span { display: inline-block; padding: 9px 13px; font: 600 15px/1 var(--f-text); border: 2px solid var(--ink); background: #fff; transition: background-color .2s, color .2s, transform .2s var(--ease); }
.chips label:hover span { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.chips input:checked + span { background: var(--violet); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--ink-soft); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--violet); }
.form .btn { width: 100%; justify-content: space-between; }
.form__status { min-height: 1.4em; font: 600 15px/1.4 var(--f-text); }
.form__status.is-ok { color: var(--violet); }
.form__status.is-err { color: #b3261e; }

/* ---------- Подвал ---------- */
.site-foot { background: var(--coal); color: var(--paper); padding: 40px 0 28px; overflow: hidden; }
.site-foot__mark { font: 900 clamp(120px, 26vw, 460px)/.78 var(--f-display); text-transform: uppercase; letter-spacing: -.015em; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px rgba(236, 231, 223, .3); }
.site-foot__row { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; font-size: 14px; color: var(--ash); }

/* ---------- Появление: наклейку «шлёпают» на бумагу ---------- */
.reveal { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(var(--r, 0deg) + 7deg)) scale(1.14); transition: opacity .25s ease, transform .55s cubic-bezier(.3, 1.45, .5, 1); }
.reveal.is-in { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r, 0deg)) scale(1); }
.stickers .reveal:nth-child(2), .press__grid .reveal:nth-child(2) { transition-delay: .08s; }
.stickers .reveal:nth-child(3), .press__grid .reveal:nth-child(3) { transition-delay: .16s; }
.stickers .reveal:nth-child(4), .press__grid .reveal:nth-child(4) { transition-delay: .24s; }
.stickers .reveal:nth-child(5) { transition-delay: .32s; }
.stickers .reveal:nth-child(6) { transition-delay: .4s; }
.sticker.is-in.is-dragging, .sticker.is-in.was-dragged { transition: box-shadow .25s var(--ease); transition-delay: 0s; }

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 1180px) {
  .site-head__phone { display: none; }
  .nav { gap: 18px; }
  .press__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 30px; }
}

@media (max-width: 1023px) {
  .hero { min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
  .hero__copy { width: auto; margin: 0; padding: 26px var(--gutter) 56px; }
  .hero__visual { position: relative; order: -1; height: min(100vw, 700px); margin-top: 78px; }
  .hero__photo { right: 50%; transform: translate(50%, 6%); height: 100%; }
  .is-loaded .hero__photo { transform: translate(50%, 0); }
  .hero__band { --band-y: 62%; --bh: clamp(84px, 15vw, 150px); transform-origin: 50% 50%; }
  .hero__band-track span { font-size: clamp(70px, 12vw, 120px); }
  .hero .stamp { top: 4%; right: auto; left: 4vw; }
  .hero__caption { position: static; padding: 18px var(--gutter) 24px; background: var(--paper); border-top: 2px solid var(--ink); }

  .proof, .services, .contact__inner { grid-template-columns: 1fr; gap: 48px; }
  .proof__head, .services__head { position: static; }
  .job { grid-template-columns: 1fr auto; }
  .job__role { grid-column: 1 / -1; grid-row: 2; }
  .job__year { grid-column: 2; grid-row: 1; }
  .career__edu { grid-template-columns: 1fr; gap: 18px; }
  .card { position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; transform: none; }
  .card__media { order: -1; height: min(62vw, 420px); border-left: 0; border-bottom: 2px solid var(--ink); }
  .card__media--type { height: auto; min-height: 260px; }
  .svc__body { grid-template-columns: 1fr; }
  .card__media--charts { height: auto; }
  .tickets { grid-template-columns: 1fr; max-width: 560px; gap: 34px; }
  .prices__head { display: block; }
  .prices__head .lead { margin-top: 18px; }
}

@media (max-width: 860px) {
  .site-head { height: 56px; top: 10px; }
  .nav {
    position: fixed; top: 74px; left: var(--gutter); right: var(--gutter); z-index: 59;
    flex-direction: column; gap: 0; margin: 0; padding: 14px 20px 22px;
    background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: transform .4s var(--ease), opacity .3s, visibility 0s .4s;
  }
  .nav a { font: 900 42px/1.2 var(--f-display); text-transform: uppercase; background: none; }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .site-head__cta { margin-left: auto; }
  .burger { display: grid; place-content: center; gap: 7px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
  .burger span { width: 26px; height: 3px; background: var(--ink); transition: transform .35s var(--ease); }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { transform: translateY(-5px) rotate(-45deg); }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .logo__sub, .hide-sm { display: none; }
  .site-head__cta { padding: 0 14px; font-size: 15px; }
  .hero__claim { font-size: clamp(50px, 15vw, 70px); }
  .hero__lede { font-size: 17px; }
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .stamp { width: 112px; }
  .stamp text { font-size: 17px; }
  .stickers { grid-template-columns: 1fr; gap: 26px; padding-inline: 6px; }
  .sticker .scribble { left: -3%; width: 106%; }
  .sticker { --dx: 0px !important; --dy: 0px !important; }
  .cases__head, .career__head, .works__head { display: block; }
  .cases__head .lead, .career__head .lead, .works__head .lead { margin-top: 18px; }
  .job__org { font-size: 54px; }
  .svc__body ul { grid-template-columns: 1fr; }
  .press__grid { grid-template-columns: 1fr; }
  .manifesto__line--b { margin-left: 4vw; }
  .manifesto__foot { flex-direction: column; align-items: start; }
  .form__row { grid-template-columns: 1fr; }
  .site-foot__row { flex-direction: column; }
}

/* ---------- Меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: rotate(var(--r, 0deg)); }
  .hero__claim .line > span, .hero__photo { transform: none; opacity: 1; }
  .hero__band { clip-path: none; }
  .scribble path { stroke-dashoffset: 0; }
}


/* =========================================================
   ВНУТРЕННИЕ СТРАНИЦЫ (тема WordPress)
   ========================================================= */
.blk--tight { padding-block: clamp(48px, 6vw, 96px); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* шапка внутренней страницы */
.page-hero { padding: clamp(130px, 16vw, 200px) 0 clamp(24px, 3vw, 40px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font: 600 14px/1.3 var(--f-text); color: var(--ink-soft); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--violet); }
.page-hero .card__meta { margin-bottom: 22px; }
.page-hero__title { font: 900 clamp(48px, 7vw, 120px)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; max-width: 16ch; text-wrap: balance; }
.page-hero__lead { margin-top: 26px; }

/* карточки кейсов вне стопки на главной */
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--violet); }
.card__more { margin-top: 22px; align-self: flex-start; font-size: 16px; }
.stack--static .card, .card--static { position: relative; top: auto; transform: none; }
.card__nums--big dd { font-size: clamp(56px, 6vw, 104px); }
.card--static .card__text { justify-content: center; }
.card--static .card__nums { margin: 0; padding-top: 0; border-top: 0; flex-direction: column; gap: 28px; }
.case-sum { margin-bottom: clamp(20px, 3vw, 40px); }
.cases__more { margin-top: clamp(40px, 5vw, 70px); }

/* фильтр по направлениям */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.filter a { padding: 9px 14px; font: 700 15px/1 var(--f-text); text-decoration: none; border: 2px solid var(--ink); transition: background-color .2s, color .2s; }
.filter a:hover, .filter a[aria-current] { background: var(--ink); color: var(--paper); }

/* постраничная навигация */
.pager { margin-top: 48px; }
.pager .nav-links { display: flex; gap: 8px; }
.pager .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; font: 800 22px/1 var(--f-display); text-decoration: none; border: 2px solid var(--ink); }
.pager .page-numbers.current, .pager a.page-numbers:hover { background: var(--ink); color: var(--paper); }

/* текст из редактора */
.entry { max-width: 760px; font-size: 19px; line-height: 1.6; }
.entry > * + * { margin-top: 1em; }
.entry h2 { margin-top: 1.6em; font: 900 clamp(34px, 3.4vw, 52px)/.92 var(--f-display); text-transform: uppercase; }
.entry h3 { margin-top: 1.4em; font: 800 clamp(26px, 2.4vw, 36px)/1 var(--f-display); text-transform: uppercase; }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry ul { list-style: square; }
.entry ol { list-style: decimal; }
.entry li + li { margin-top: .4em; }
.entry li::marker { color: var(--violet); font-weight: 800; }
.entry a { color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.entry blockquote { padding-left: 22px; border-left: 4px solid var(--violet); font: 800 clamp(26px, 2.4vw, 34px)/1.1 var(--f-display); text-transform: uppercase; }
.entry img { border: 2px solid var(--ink); box-shadow: var(--shadow); }
.entry figure { margin: 2em 0; }
.entry figcaption { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
.blk--dark .entry a { color: var(--violet-hi); }
.text-block__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5vw; align-items: start; }
.article__cover { margin-bottom: 40px; max-width: 1000px; }
.article__cover img { width: 100%; border: 2px solid var(--ink); box-shadow: var(--shadow); }

/* что входит в услугу */
.includes { margin-bottom: clamp(20px, 3vw, 40px); }
.includes__title { font: 700 15px/1 var(--f-text); color: var(--ink-soft); margin-bottom: 14px; }
.includes__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ink); border: 2px solid var(--ink); counter-reset: inc; }
.includes__list li { padding: 26px 22px 28px; background: var(--paper); counter-increment: inc; }
.includes__list li::before { content: counter(inc); display: block; margin-bottom: 18px; font: 900 64px/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px var(--violet); }
.includes__list b { display: block; font: 900 28px/.95 var(--f-display); text-transform: uppercase; }
.includes__list span { display: block; margin-top: 8px; font-size: 16px; color: var(--ink-soft); }
.svc__more { margin-top: 14px; }
.services--page .svc-group .svc:first-of-type { border-top: 2px solid var(--ink); }

/* блог */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 30px; }
.post-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--ink); box-shadow: var(--shadow); background: var(--paper-2); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.04); }
.post-card__ph { display: grid; place-items: center; height: 100%; font: 900 120px/1 var(--f-display); color: var(--violet); }
.post-card__date { margin-top: 18px; font: 700 13px/1 var(--f-text); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.post-card__title { margin-top: 10px; font: 900 32px/.92 var(--f-display); text-transform: uppercase; }
.post-card__title a { text-decoration: none; }
.post-card__title a:hover { color: var(--violet); }
.post-card__text { margin-top: 10px; font-size: 16px; color: var(--ink-soft); }

/* призыв */
.cta__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5vw; align-items: end; }
.cta__title { font: 900 clamp(52px, 7vw, 120px)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.cta__side { display: grid; gap: 28px; justify-items: start; }
.blk--violet .btn--paper { border-color: var(--ink); }

/* 404 */
.not-found { padding-top: clamp(140px, 16vw, 200px); }
.not-found__code { font-size: clamp(160px, 26vw, 420px); color: var(--violet); }
.not-found .lead { margin-top: 20px; }
.not-found__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; margin-top: 34px; }

/* подсказка администратору */
.admin-hint { margin-top: 30px; padding: 20px 24px; border: 2px dashed var(--violet); background: #fff; font-size: 17px; }

.site-foot__nav ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-foot__nav a, .site-foot__row a { text-decoration: none; }
.site-foot__nav a:hover, .site-foot__row a:hover { color: var(--paper); }
.contact__direct a[href^="mailto"] { font-size: 22px; }

@media (max-width: 1023px) {
  .text-block__inner, .cta__inner { grid-template-columns: 1fr; gap: 28px; }
  .includes__list { grid-template-columns: 1fr 1fr; }
  .posts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .includes__list, .posts { grid-template-columns: 1fr; }
  .entry { font-size: 17px; }
}

/* Панель WordPress у вошедшего администратора не должна перекрывать шапку */
.admin-bar .site-head { top: calc(32px + 14px); }
@media (max-width: 782px) {
  .admin-bar .site-head { top: calc(46px + 10px); }
  .admin-bar .nav { top: calc(46px + 74px); }
}