:root {
  --bg: #e8e8e8;
  --ink: #090909;
  --muted: #656565;
  --accent: #293fe2;
  --dark: #1e1e1e;
  --pink: #f7b7e7;
  --avatar-bg: #e6d6e1;
  --card-text: #d8d8d8;
  --radius: 28px;
  --gap: 20px;
  --maxw: 1568px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* Видимый фокус с клавиатуры */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.contacts :focus-visible { outline-color: var(--pink); }

/* Скрыто визуально, доступно скринридерам */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 28px 40px 60px; }

/* Прячем анимируемые элементы до старта GSAP (только при активном JS) */
html.anim-ready [data-anim] { opacity: 0; }
html.anim-ready [data-anim="av-girl"],
html.anim-ready [data-anim="av"] { opacity: 0; }

/* ===== NAV ===== */
.nav { position: relative; z-index: 1000; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 40px; }
.nav__links { display: flex; gap: 40px; }
.nav__links--right { justify-content: flex-end; }
.nav__links a { font-size: 19px; font-weight: 500; transition: opacity .2s; }
.nav__links a:hover { opacity: .55; }
.nav__logo img { height: 46px; width: auto; transition: transform .3s ease; }
.nav__logo:hover img { transform: rotate(-6deg) scale(1.05); }

/* ===== INTRO ===== */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: 90px; }
.intro__card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
}

/* --- Карточка имени --- */
.card-name { background: var(--dark); }
.card-name__title {
  position: absolute;
  top: 8cqw; left: 8cqw; right: 8cqw;
  color: #fff;
  font-weight: 800;
  font-size: 8.4cqw;
  line-height: .98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
}
.card-name__title .ln { display: block; }
.card-name__meta {
  position: absolute;
  top: 33cqw; left: 8cqw; right: 8cqw;
  text-align: center;
  color: var(--card-text);
}
.card-name__slash { display: block; font-size: 3.4cqw; font-weight: 500; letter-spacing: .25em; margin-bottom: 2.4cqw; }
.card-name__role { display: block; font-size: 3.05cqw; font-weight: 500; line-height: 1.32; margin-bottom: 2.6cqw; }
.card-name__companies { display: block; font-size: 3.05cqw; font-weight: 500; line-height: 1.32; }
.card-name__year {
  position: absolute;
  left: -4.4cqw; top: 64cqw;
  width: 108cqw;
  pointer-events: none;
}
.g2026 { width: 100%; height: auto; display: block; }
.g2026__p { fill: #fff; }

/* --- Карточка аватара --- */
.card-avatar { background: var(--avatar-bg); }
.av { position: absolute; display: block; }
.av--emblem { left: 5.56cqw; top: 58.1cqw; width: 37.1cqw; z-index: 1; }
.av--arr    { left: 42cqw;   top: 2.6cqw;  width: 57cqw;   z-index: 4; }
.av--girl   { left: 16.4cqw; top: 4.5cqw;  width: 69.1cqw; z-index: 3; }
.av--yoda   { left: 68.1cqw; top: 45cqw;   width: 26.4cqw; z-index: 4; }
.av--arrow  { left: 4.5cqw;  top: 9.7cqw;  width: 33cqw;   z-index: 5; }

/* Фолбэк для браузеров без container-queries: позиции в % карточки, размер шрифта в vw */
@supports not (container-type: inline-size) {
  .card-name__title { top: 8%; left: 8%; right: 8%; font-size: clamp(20px, 7.4vw, 60px); }
  .card-name__meta { top: 33%; left: 8%; right: 8%; }
  .card-name__slash { font-size: clamp(11px, 3vw, 24px); margin-bottom: 2.4%; }
  .card-name__role,
  .card-name__companies { font-size: clamp(11px, 2.7vw, 22px); margin-bottom: 2.6%; }
  .card-name__year { left: -4.4%; top: 64%; width: 108%; }
  .av--emblem { left: 5.56%; top: 58.1%; width: 37.1%; }
  .av--arr    { left: 42%;   top: 2.6%;  width: 57%; }
  .av--girl   { left: 16.4%; top: 4.5%;  width: 69.1%; }
  .av--yoda   { left: 68.1%; top: 45%;   width: 26.4%; }
  .av--arrow  { left: 4.5%;  top: 9.7%;  width: 33%; }
}

/* ===== HERO ===== */
.hero { margin-bottom: 96px; text-align: center; }
.hero__title {
  font-size: clamp(32px, 5.1vw, 88px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero__title .hl { display: block; }
.hero__title .accent { color: var(--accent); font-weight: 800; }
.hero-sticker { display: inline-block; vertical-align: middle; width: auto; }
.hero-sticker--ghost { height: 1.05em; margin: -0.1em 0.1em 0 -0.05em; }
.hero-sticker--cloud { height: 0.62em; margin: 0 0 0 0.18em; }
.hero__sub { margin: 28px auto 0; font-size: clamp(18px, 1.7vw, 28px); font-weight: 500; color: var(--muted); max-width: 780px; }

/* ===== SECTION HEAD ===== */
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 36px; flex-wrap: wrap; gap: 12px; }
.section-label { font-size: clamp(20px, 2vw, 30px); font-weight: 700; }
.section-link, .section-years { font-size: clamp(18px, 1.6vw, 26px); font-weight: 600; transition: opacity .2s; }
.section-link:hover { opacity: .55; }
.section-years { color: var(--muted); }

/* ===== WORKS ===== */
.works { margin-bottom: 110px; }
.works__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px var(--gap); }
.work__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; background: #ddd; }
.work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.work:hover .work__img img { transform: scale(1.04); }
.work__title { margin: 24px 0 12px; font-size: clamp(26px, 2.6vw, 40px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; display: flex; align-items: center; gap: 14px; }
.work__title .arrow { color: var(--accent); font-weight: 700; transition: transform .3s ease; }
.work:hover .work__title .arrow { transform: translate(4px, -4px); }
.arrow-i { display: inline-block; height: 0.7em; width: auto; flex: none; align-self: center; transition: transform .3s ease; }
.work:hover .arrow-i { transform: translateX(6px); }
.case-next__title .arrow-i { height: 0.62em; }
.case-next:hover .arrow-i { transform: translateX(8px); }
.work__desc { font-size: clamp(15px, 1.15vw, 19px); font-weight: 500; color: var(--muted); line-height: 1.4; max-width: 576px; }
.work__title a { display: inline-flex; align-items: center; gap: 14px; color: inherit; transition: opacity .2s ease; }
.work__title a:hover { opacity: .6; }
a.work__img { display: block; }

/* ===== WORKS PAGE (Работы) ===== */
.works--page { margin-bottom: 96px; }
.works--page:first-of-type { margin-top: 6px; }
.works-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 48px; }
.works-head--right { justify-content: flex-end; }
.works-back { display: inline-flex; align-items: center; transition: transform .25s ease; }
.works-back img { height: 30px; width: auto; }
.works-back:hover { transform: translateX(-7px); }
.works-label { font-size: clamp(22px, 2vw, 30px); font-weight: 700; }
.nav__links a.is-active { color: var(--accent); }

/* ===== CLIENTS ===== */
.clients { margin-bottom: 100px; }
.clients__row { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.clients__row img { height: clamp(46px, 7.4vw, 104px); width: auto; transition: transform .3s ease; }
.clients__row img:hover { transform: translateY(-6px); }

/* ===== CONTACTS (footer) ===== */
.contacts {
  background: var(--dark);
  border-radius: var(--radius);
  overflow: hidden;
  padding: clamp(28px, 3vw, 52px) clamp(20px, 3vw, 52px) 0;
}
.contacts__top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 2vw, 30px);
}
.cc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  margin: -16px -20px;
  border-radius: 20px;
  transition: background .22s ease, transform .22s ease;
}
.cc:hover { background: rgba(247, 183, 231, 0.12); transform: translateY(-2px); }
.cc__label {
  background: var(--pink);
  color: #161616;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 6px 16px;
  border-radius: 999px;
}
.cc__val { color: #fff; font-size: clamp(16px, 1.5vw, 26px); font-weight: 600; transition: color .2s ease; }
.cc:hover .cc__val { color: var(--pink); }
.contacts__graffiti {
  margin: 0 calc(-1 * clamp(20px, 3vw, 52px));
  padding-top: clamp(44px, 6vw, 96px);
  overflow: hidden;
}
.cg { position: relative; width: 96%; margin: 0 auto; }
.cg__text { display: block; width: 100%; height: auto; }
.cg__p { fill: #fff; }
.cg__st { position: absolute; display: block; }
.cg__st--mandala { left: 7.9%;  top: 14%;  width: 12.2%; z-index: 3; }
.cg__st--ghost   { left: 21.7%; top: -36%; width: 16.8%; z-index: 2; }
.cg__st--red     { left: 61.5%; top: 38%;  width: 12.1%; z-index: 3; }
.cg__st--target  { left: 80.3%; top: 39%;  width: 10.9%; z-index: 2; }

/* ===== CASE STUDY (страница продукта) ===== */
.case-hero { margin: 8px 0 40px; }
.case-hero__title { font-size: clamp(40px, 7vw, 104px); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; }
.case-hero__title .hl { display: block; }
.case-hero__title .accent { color: var(--accent); }
.case-hero__lead { margin-top: 28px; max-width: 760px; font-size: clamp(18px, 1.6vw, 26px); font-weight: 500; color: var(--muted); line-height: 1.38; }
.case-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.case-tags li { font-size: clamp(13px, 1vw, 16px); font-weight: 600; padding: 9px 18px; border: 1.5px solid #cfcfcf; border-radius: 999px; color: var(--ink); }

.case-cover { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: #d8d2da; margin-bottom: 64px; }
.case-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.case-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: 96px; }
.fact { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 2px solid var(--ink); }
.fact__k { font-size: 14px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fact__v { font-size: clamp(17px, 1.4vw, 22px); font-weight: 700; }

.case-block { display: grid; grid-template-columns: 1fr 2.2fr; gap: 40px 56px; margin-bottom: 96px; }
.case-block__label { font-size: clamp(20px, 1.8vw, 28px); font-weight: 700; align-self: start; }
.case-block__body { max-width: 760px; }
.case-block__body p { font-size: clamp(17px, 1.4vw, 24px); font-weight: 500; line-height: 1.45; color: #2a2a2a; }
.case-block__body p + p { margin-top: 22px; }

/* design-system showcase */
.ds { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 8px; }
.ds__col { background: #f1f1f1; border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.ds__title { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sw { display: flex; align-items: center; gap: 14px; }
.sw__c { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.sw__n { font-size: 15px; font-weight: 600; }
.ds__type-xl { font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.ds__type-row { font-weight: 700; font-size: 22px; }
.ds__type-mid { font-weight: 600; font-size: 18px; color: #333; }
.ds__type-sm { font-weight: 500; font-size: 15px; color: var(--muted); }
.ds-btn { border: 0; border-radius: 999px; padding: 14px 26px; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
.ds-btn:hover { transform: translateY(-2px); }
.ds-btn--primary { background: var(--accent); color: #fff; }
.ds-btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid #c9c9c9; }
.ds-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-chip { font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 999px; background: #e3e3e3; color: #444; }
.ds-chip--on { background: var(--ink); color: #fff; }
.ds-field { background: #fff; border: 1.5px solid #ddd; border-radius: 14px; padding: 14px 18px; font-size: 15px; color: var(--muted); }

.case-split { grid-column: 1 / -1; display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gap); margin-top: 8px; }
.case-split__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: #1e1e1e; }
.case-split__img img { width: 100%; height: 100%; object-fit: cover; }
.case-split__note { background: var(--accent); color: #fff; border-radius: var(--radius); padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.case-split__big { font-size: clamp(56px, 7vw, 104px); font-weight: 800; line-height: 0.9; letter-spacing: -0.02em; }
.case-split__cap { font-size: clamp(16px, 1.3vw, 20px); font-weight: 500; opacity: .92; }

.case-metrics { background: var(--dark); color: #fff; border-radius: var(--radius); padding: clamp(36px, 5vw, 72px); margin-bottom: 80px; }
.case-metrics__label { font-size: clamp(18px, 1.6vw, 26px); font-weight: 700; color: var(--pink); }
.case-metrics__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px var(--gap); margin-top: 40px; }
.metric { display: flex; flex-direction: column; gap: 12px; }
.metric__num { font-size: clamp(54px, 7vw, 104px); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; }
.metric__u { color: var(--accent); }
.metric__u--word { color: #b9b9b9; font-size: 0.34em; font-weight: 600; }
.metric__cap { font-size: clamp(15px, 1.2vw, 19px); font-weight: 500; color: #b9b9b9; max-width: 320px; }

.case-next { display: flex; flex-direction: column; gap: 10px; padding: clamp(32px, 4vw, 56px) 0; border-top: 2px solid var(--ink); margin-bottom: 40px; }
.case-next__cap { font-size: 16px; font-weight: 600; color: var(--muted); }
.case-next__title { font-size: clamp(34px, 5vw, 72px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 18px; transition: opacity .2s ease; }
.case-next:hover .case-next__title { opacity: .6; }
.case-next__title .arrow { color: var(--accent); }

/* ===== CASE STUDY v2 (image-rich) ===== */
.case2-cover { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 6px 0 56px; }
.case2-cover__card { background: var(--dark); border-radius: var(--radius); aspect-ratio: 1 / 1; padding: clamp(30px, 3.4vw, 56px); display: flex; flex-direction: column; }
.case2-cover__title { color: #fff; font-size: clamp(34px, 4.2vw, 70px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; text-transform: uppercase; display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; }
.case2-cover__title .accent { color: var(--accent); display: inline-flex; align-items: center; gap: 0 16px; white-space: nowrap; }
.case2-cover__title .arrow-i { height: 0.5em; }
.case2-cover__lead { margin-top: 24px; color: #cfcfcf; font-size: clamp(15px, 1.15vw, 20px); font-weight: 500; line-height: 1.45; }
.case2-cover__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; background: #ddd; }
.case2-cover__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case2-cover--solo { grid-template-columns: 1fr; }
.case2-cover--solo .case2-cover__card { aspect-ratio: auto; min-height: 300px; }
.case2-cover--solo .case2-cover__title { font-size: clamp(40px, 5.4vw, 92px); }
.case2-cover--solo .case2-cover__lead { max-width: 920px; font-size: clamp(17px, 1.4vw, 22px); margin-top: 28px; }

.case2-sec { display: grid; grid-template-columns: 1fr 2.2fr; gap: 30px 56px; margin-bottom: 56px; }
.case2-sec__label { font-size: clamp(20px, 1.8vw, 28px); font-weight: 700; align-self: start; }
.case2-sec__body { max-width: 840px; }
.case2-sec__body p { font-size: clamp(17px, 1.35vw, 23px); font-weight: 500; line-height: 1.5; color: #2a2a2a; }
.case2-sec__body p + p { margin-top: 22px; }
.case2-sec--cont { margin-top: -24px; }
.case2-list { list-style: none; }
.case2-list li { position: relative; padding-left: 30px; font-size: clamp(17px, 1.35vw, 23px); font-weight: 500; line-height: 1.5; color: #2a2a2a; }
.case2-list li + li { margin-top: 14px; }
.case2-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; background: var(--accent); border-radius: 50%; }
.case2-list li strong { font-weight: 800; color: var(--ink); }
.case2-callout { background: #eceeff; border-radius: var(--radius); border-left: 5px solid var(--accent); padding: clamp(28px, 3vw, 44px); margin-bottom: 56px; }
.case2-callout__label { display: block; font-size: clamp(18px, 1.6vw, 24px); font-weight: 700; margin-bottom: 18px; }
.case2-callout__label::before { content: "💡 "; }
.case2-callout__list { list-style: none; display: grid; gap: 12px; }
.case2-callout__list li { position: relative; padding-left: 28px; font-size: clamp(16px, 1.25vw, 20px); font-weight: 500; line-height: 1.45; color: #2a2a2a; }
.case2-callout__list li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }

.case2-band { border-radius: var(--radius); overflow: hidden; margin-bottom: 56px; }
.case2-band img { width: 100%; height: auto; display: block; }

.case2-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: 56px; align-items: start; }
.case2-pair__img { border-radius: var(--radius); overflow: hidden; }
.case2-pair__img img { width: 100%; height: auto; display: block; }

/* ===== COMING SOON ===== */
.soon { min-height: 52vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 0 90px; }
.soon__title { font-size: clamp(46px, 9vw, 140px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; }
.soon__title .accent { color: var(--accent); }
.soon__tag { margin-top: 26px; background: var(--accent); color: #fff; font-size: clamp(15px, 1.5vw, 21px); font-weight: 700; padding: 10px 28px; border-radius: 999px; }
.soon__note { margin-top: 24px; max-width: 460px; font-size: clamp(16px, 1.3vw, 20px); color: var(--muted); font-weight: 500; line-height: 1.45; }
.soon__back { margin-top: 28px; font-weight: 600; font-size: 17px; transition: opacity .2s ease; }
.soon__back:hover { opacity: .6; }

/* Элементы только мобильной версии — скрыты на десктопе */
.nav__burger, .nav__drop, .hero-sticker-m, .section-years--m { display: none; }

/* ===== RESPONSIVE (мобильный макет по Figma) ===== */
@media (max-width: 860px) {
  .wrap { padding: 18px 16px 40px; overflow-x: clip; }
  /* Защита от горизонтального переполнения grid/flex-элементами */
  .intro, .works__grid, .clients__row, .contacts__top { min-width: 0; }
  .intro > *, .works__grid > *, .clients__row > *, .contacts__top > * { min-width: 0; max-width: 100%; }

  /* NAV: лого + бургер, ссылки в выпадающем меню */
  .nav { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
  .nav__links { display: none; }
  .nav__logo { order: 0; }
  .nav__logo img { height: 40px; }
  .nav__logo:hover img { transform: none; }
  .nav__burger { display: flex; align-items: center; justify-content: center; order: 1; position: relative; z-index: 2; background: none; border: 0; padding: 8px; margin: -8px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .nav__burger img { width: 36px; height: auto; pointer-events: none; }
  .nav__drop {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: calc(100% + 12px); right: 0; z-index: 1;
    background: var(--dark); border-radius: 16px; padding: 12px 10px; min-width: 190px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
  }
  .nav--open .nav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__drop a { color: #fff; font-size: 18px; font-weight: 500; padding: 11px 16px; border-radius: 10px; }
  .nav__drop a:active, .nav__drop a:hover { background: rgba(255, 255, 255, .08); }

  /* INTRO: карточки 353×427, контент по центру */
  .intro { grid-template-columns: 1fr; gap: 16px; margin-bottom: 44px; }
  .intro__card { aspect-ratio: 353 / 427; }

  .card-name { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 8.4cqw 6cqw 0; }
  .card-name__title { position: static; font-size: 8.2cqw; line-height: 1.02; left: auto; right: auto; top: auto; }
  .card-name__meta { position: static; left: auto; right: auto; top: auto; margin-top: 6cqw; }
  .card-name__slash { font-size: 3.7cqw; letter-spacing: .25em; margin-bottom: 3cqw; }
  .card-name__role { font-size: 3.5cqw; margin-bottom: 3cqw; }
  .card-name__companies { font-size: 3.5cqw; }
  .card-name__year { position: absolute; left: -8cqw; right: auto; top: auto; bottom: 0; width: 116cqw; }

  .av--emblem { left: 5.7%;  top: 55.7%; width: 36.9%; }
  .av--arr    { left: 44.4%; top: 9.6%;  width: 59.2%; }
  .av--girl   { left: 16.8%; top: 11.5%; width: 68.6%; }
  .av--yoda   { left: 68.3%; top: 44.8%; width: 26.3%; }
  .av--arrow  { left: 3%;    top: 11%;   width: 31%; }

  /* HERO: по центру, стикеры сверху/снизу */
  .hero { margin-bottom: 52px; text-align: center; }
  .hero__title { width: 100%; font-size: clamp(22px, 6.6vw, 30px); line-height: 1.18; text-align: center; overflow-wrap: break-word; }
  .hero-sticker { display: none; }
  .hero-sticker-m { display: block; }
  .hero-sticker-m--ghost { width: 25%; max-width: 104px; margin: 0 auto 12px; }
  .hero-sticker-m--cloud { width: 22%; max-width: 92px; margin: 18px auto 0; }
  .hero__sub { width: 100%; text-align: center; margin: 16px auto 0; font-size: clamp(15px, 4vw, 18px); max-width: 330px; }

  /* WORKS: одна колонка, без «Смотреть все» */
  .works__grid { grid-template-columns: 1fr; gap: 40px; }
  .works { margin-bottom: 64px; }
  .section-link { display: none; }
  .work__title { font-size: clamp(24px, 7vw, 34px); }

  /* WORKS PAGE mobile */
  .works--page { margin-bottom: 52px; }
  .works-head { margin-bottom: 26px; }
  .works-back img { height: 26px; }
  .works-label { font-size: clamp(20px, 5.5vw, 26px); }

  /* CASE STUDY mobile */
  .case-hero { margin: 6px 0 28px; }
  .case-hero__title { font-size: clamp(36px, 12vw, 60px); }
  .case-hero__lead { margin-top: 20px; font-size: clamp(16px, 4.4vw, 20px); }
  .case-tags { margin-top: 22px; gap: 8px; }
  .case-cover { aspect-ratio: 4 / 3; margin-bottom: 44px; }
  .case-facts { grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-bottom: 56px; }
  .case-block { grid-template-columns: 1fr; gap: 18px; margin-bottom: 56px; }
  .ds, .case-split, .case-metrics__grid { grid-template-columns: 1fr; }
  .ds__col { padding: 24px; }
  .case-split__note { padding: 28px; }
  .case-metrics { margin-bottom: 56px; }
  .case-metrics__grid { gap: 30px; margin-top: 28px; }

  /* CASE v2 mobile */
  .case2-cover { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; }
  .case2-cover__card { aspect-ratio: auto; padding: 28px; }
  .case2-cover__title { font-size: clamp(30px, 9vw, 46px); }
  .case2-cover__lead { font-size: clamp(15px, 4vw, 18px); }
  .case2-sec { grid-template-columns: 1fr; gap: 14px; margin-bottom: 38px; }
  .case2-sec--cont { margin-top: 0; }
  .case2-sec__body p { font-size: clamp(16px, 4.4vw, 20px); }
  .case2-pair { grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }
  .case2-band { margin-bottom: 32px; }

  /* CLIENTS: вертикальный стек, годы снизу */
  .clients { margin-bottom: 56px; }
  .clients__row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .clients__row img { height: clamp(56px, 17vw, 84px); width: auto; max-width: 88%; }
  .clients__row img:hover { transform: none; }
  .section-years--d { display: none; }
  .section-years--m { display: block; margin-top: 24px; font-size: 18px; font-weight: 600; color: var(--muted); }

  /* CONTACTS: вертикально по центру */
  .contacts { padding: clamp(28px, 7vw, 40px) 20px 0; }
  .contacts__top { flex-direction: column; align-items: center; gap: 24px; margin-bottom: 8px; }
  .cc { align-items: center; text-align: center; margin: 0; padding: 8px 18px; gap: 12px; }
  .cc:hover { transform: none; background: none; }
  .cc__val { font-size: clamp(18px, 5.6vw, 24px); }
  .cg__st--mandala { display: none; }
}

@media (max-width: 420px) {
  .nav__logo img { height: 36px; }
  .hero__title { font-size: clamp(21px, 7vw, 29px); }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  html.anim-ready [data-anim] { opacity: 1 !important; }
  * { scroll-behavior: auto; }
}