/* =========================================================
   Rassvet.digital · Креатив — концепция 2 «Пиксельный рассвет»
   Шрифты и цвета — фирменные (Suisse Intl + Garamond Italic,
   чёрный / светлый / жёлтый #FFF705). Текстура — упорядоченный
   дизеринг (Bayer 8×8) и пиксельная сетка вместо плёночного зерна.
   ========================================================= */

@font-face { font-family: "Suisse Intl"; font-weight: 300; font-display: swap;
  src: local("Suisse Intl Light"), local("SuisseIntl-Light"), url("../fonts/SuisseIntl-Light.otf") format("opentype"); }
@font-face { font-family: "Suisse Intl"; font-weight: 400; font-display: swap;
  src: local("Suisse Intl Regular"), local("SuisseIntl-Regular"), url("../fonts/SuisseIntl-Regular.otf") format("opentype"); }
@font-face { font-family: "Suisse Intl"; font-weight: 450; font-display: swap;
  src: local("Suisse Intl Book"), local("SuisseIntl-Book"), url("../fonts/SuisseIntl-Book.otf") format("opentype"); }
@font-face { font-family: "Suisse Intl"; font-weight: 500; font-display: swap;
  src: local("Suisse Intl Medium"), local("SuisseIntl-Medium"), url("../fonts/SuisseIntl-Medium.otf") format("opentype"); }
@font-face { font-family: "SB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: local("SB Garamond Italic"), local("SBGaramond-Italic"), local("Garamond Premier Pro Italic"), local("GaramondPremrPro-It"),
       url("../fonts/GaramondPremierPro-Italic.ttf") format("truetype"); }

:root {
  --ink: #0b0b0b;
  --paper: #f2f2f0;
  --white: #ffffff;
  --y: #fff705;
  --mute-l: rgba(11, 11, 11, .55);
  --mute-d: rgba(255, 255, 255, .55);
  --line-l: rgba(11, 11, 11, .16);
  --line-d: rgba(255, 255, 255, .17);

  --sans: "Suisse Intl", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --serif: "SB Garamond", "Garamond Premier Pro", "EB Garamond", Garamond, "Times New Roman", serif;

  --pad: clamp(10px, .8vw, 14px);   /* узкие поля по краям */
  --gap: 10px;
  --hdr: 56px;
  --n: 4px;                          /* «пиксельный» срез угла */

  --ease: cubic-bezier(.7, 0, .2, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); scrollbar-color: var(--y) var(--ink); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.is-booting { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: normal; }
::selection { background: var(--y); color: var(--ink); }
:focus-visible { outline: 2px dashed var(--y); outline-offset: 3px; }
[data-theme="light"] :focus-visible, .cases :focus-visible { outline-color: var(--ink); }

/* дизеринг-текстура поверх всего: статичная 1-битная «бумага», без анимации */
.tex { position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .045; background-size: 128px 128px; image-rendering: pixelated; }

/* ---------- типографика ---------- */
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; }
.y { color: var(--y); }
.mono { font-family: var(--sans); font-weight: 500; font-size: 10.5px; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; }
.body { font-size: 13px; line-height: 1.5; max-width: 40ch; }
.label { display: flex; align-items: center; gap: 8px; }
.lbl-star { width: 11px; height: 11px; fill: currentColor; flex: none; }
[data-theme="dark"] .lbl-star, .panel .lbl-star { fill: var(--y); }
.h2 { font-weight: 400; font-size: clamp(46px, 8.6vw, 178px); line-height: .84; letter-spacing: -.068em; }
.h2 .serif { letter-spacing: -.035em; padding-right: .04em; }
.hl { display: block; white-space: nowrap; }

/* «пиксельные» углы — ступенька вместо скругления */
.btn, .chip, .seg, .m, .ev__tag, .ev__merge, .cur__tag, .dock__in, .need span, .cc__award, .seal__c {
  clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)), 0 var(--n), var(--n) var(--n));
}

/* ---------- кнопки: ступенчатая заливка ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; isolation: isolate; overflow: hidden; transition: color .2s steps(2); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill, var(--ink)); clip-path: inset(0 100% 0 0); transition: clip-path .42s steps(7); }
.btn:hover::before, .btn:focus-visible::before { clip-path: inset(0 0 0 0); }
.btn--y { background: var(--y); color: var(--ink); --fill: var(--ink); }
.btn--y:hover, .btn--y:focus-visible { color: var(--y); }
.btn--line { box-shadow: inset 0 0 0 1px currentColor; --fill: var(--y); }
.btn--line:hover, .btn--line:focus-visible { color: var(--ink); }
.btn--big { height: 60px; padding: 0 26px; font-size: 17px; --n: 6px; }
.arr { display: inline-block; transition: transform .4s steps(4); }
a:hover .arr, button:hover .arr { transform: translateX(4px); }

/* ссылки: подчёркивание превращается в жёлтый блок ступеньками */
.lnk { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 500; padding: 2px 0; background: linear-gradient(var(--y), var(--y)) 0 100% / 0 100% no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .4s steps(6), color .2s; }
.lnk:hover, .lnk:focus-visible { background-size: 100% 100%, 100% 1px; color: var(--ink); }

/* =========================================================
   ПЕРЕХОД И ПРЕЛОАДЕР
   ========================================================= */
.veil { position: fixed; inset: 0; z-index: 290; background: var(--y); visibility: hidden; pointer-events: none; }
.veil.is-on { visibility: visible; }

.boot { position: fixed; inset: 0; z-index: 280; background: var(--ink); color: var(--white); display: grid; grid-template-rows: auto 1fr auto; padding: var(--pad); animation: bootSafety 0s 7s forwards; }
@keyframes bootSafety { to { visibility: hidden; } }
.boot__sky { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.boot__top, .boot__bottom { position: relative; display: flex; justify-content: space-between; align-items: baseline; }
.boot__bottom { grid-row: 3; }
.boot .logo { font-size: 20px; }
.boot__word { font-size: clamp(30px, 4.4vw, 76px); line-height: 1; color: var(--white); background: var(--ink); padding: .04em .14em .1em .02em; }
.boot__pct { font-variant-numeric: tabular-nums; font-size: 12px; background: var(--ink); padding: 5px 7px 4px; }
html.no-js .boot { display: none; }

/* =========================================================
   КУРСОР-✶
   ========================================================= */
.cur { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.js body, html.js a, html.js button, html.js label, html.js .strip { cursor: none; }
  html.js input, html.js textarea { cursor: text; }
  .cur { display: flex; align-items: center; gap: 8px; position: fixed; left: 0; top: 0; z-index: 260; pointer-events: none; will-change: transform; }
  .cur__star { width: 18px; height: 18px; margin: -9px 0 0 -9px; fill: var(--white); mix-blend-mode: difference; transition: transform .35s steps(4), opacity .2s; }
  .cur__tag { font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--ink); background: var(--y); padding: 6px 9px 5px; margin-top: -9px; white-space: nowrap; transform: scaleX(0); transform-origin: left; transition: transform .3s steps(5); --n: 3px; }
  .cur.is-link .cur__star { transform: scale(1.7) rotate(30deg); }
  .cur.is-tag .cur__star { transform: scale(1.25) rotate(60deg); fill: var(--y); mix-blend-mode: normal; }
  .cur.is-tag .cur__tag { transform: scaleX(1); }
  .cur.is-hide .cur__star { opacity: 0; }
  .cur.is-off { opacity: 0; }
}

/* =========================================================
   ШАПКА И ДОК
   ========================================================= */
.hdr { position: fixed; z-index: 120; top: 0; left: 0; right: 0; height: var(--hdr); padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--white); transition: color .3s steps(3); pointer-events: none; }
.hdr > * { pointer-events: auto; }
.hdr[data-theme="light"] { color: var(--ink); }
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(242, 242, 240, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity .3s steps(3); }
.hdr[data-theme="dark"]::before { background: rgba(11, 11, 11, .86); }
.hdr.is-solid::before { opacity: 1; }
.logo { font-size: 21px; letter-spacing: -.035em; display: inline-flex; align-items: baseline; justify-self: start; white-space: nowrap; }
.logo i { font-family: var(--serif); font-style: italic; letter-spacing: -.01em; font-size: 1.04em; padding-right: .02em; }
.logo__unit { margin-left: 9px; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: var(--y); color: var(--ink); padding: 3px 7px 2px; transform: translateY(-3px); }
.hdr__clock { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.hdr__clock svg { width: 11px; height: 11px; fill: var(--y); }
.hdr[data-theme="light"] .hdr__clock svg { fill: currentColor; }
.hdr__phase { opacity: .55; }
.hdr .btn { justify-self: end; }

.dock { position: fixed; z-index: 118; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translate(-50%, 140%); transition: transform .5s steps(6); max-width: calc(100vw - 2 * var(--pad)); }
.dock.is-on { transform: translate(-50%, 0); }
.dock__in { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--ink); color: var(--white); --n: 5px; overflow-x: auto; scrollbar-width: none; }
.dock__in::-webkit-scrollbar { display: none; }
.dock a { position: relative; z-index: 1; flex: none; height: 32px; display: inline-flex; align-items: center; padding: 0 11px; font-size: 12px; font-weight: 450; letter-spacing: -.01em; color: var(--mute-d); transition: color .25s steps(2); white-space: nowrap; }
.dock a:hover { color: var(--white); }
.dock a.is-on { color: var(--ink); }
.dock__cta { box-shadow: inset 0 0 0 1px var(--line-d); margin-left: 4px; }
.dock__ind { position: absolute; z-index: 0; left: 0; top: 4px; height: 32px; width: 60px; background: var(--y); transition: transform .45s steps(7), width .45s steps(7); }

/* =========================================================
   01–02. ИСТОРИЯ: ✶ ИЗ ПИКСЕЛЕЙ
   ========================================================= */
.story { position: relative; background: var(--ink); color: var(--white); }
.story__stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; z-index: 0; }
.story__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story__fallback { position: absolute; display: none; right: 8vw; top: 18vh; width: min(52vh, 40vw); fill: var(--y); }
html.no-webgl .story__fallback { display: block; }
.story__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11,11,11,.82) 0%, rgba(11,11,11,.4) 32%, rgba(11,11,11,0) 52%); opacity: 0; transition: opacity .6s; }
.story.is-steps .story__shade { opacity: 1; }

.hud { position: absolute; right: var(--pad); bottom: calc(var(--pad) + 62px); display: grid; gap: 6px; opacity: 0; transition: opacity .4s steps(4); }
.story.is-steps .hud { opacity: 1; }
.hud li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: baseline; font-size: 12px; color: var(--mute-d); transition: color .3s steps(2); }
.hud b { font-weight: 500; font-size: 10.5px; letter-spacing: .06em; }
.hud li.is-on { color: var(--white); }
.hud li.is-on b { color: var(--y); }
.hud__bar { grid-column: 2; display: block; height: 4px; width: 104px; margin-top: 4px; position: relative; background-image: linear-gradient(90deg, rgba(255,255,255,.2) 0 9px, transparent 9px 13px); background-size: 13px 4px; }
.hud__bar::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--y) 0 9px, transparent 9px 13px); background-size: 13px 4px; clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.hud__cap { position: absolute; right: var(--pad); top: calc(var(--hdr) + 6px); color: var(--mute-d); opacity: 0; transition: opacity .4s steps(4); text-align: right; }
.hud__cap.is-on { opacity: 1; }

.chan span { position: absolute; left: 0; top: 0; font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--ink); background: var(--y); padding: 5px 8px 4px; opacity: 0; transform: translate(-50%, -50%); white-space: nowrap; will-change: transform, opacity; }

.ch { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; }

/* первый экран */
.ch--hero { display: flex; flex-direction: column; padding: calc(var(--hdr) + 10px) var(--pad) var(--pad); }
.hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.hero__intro { display: grid; gap: 16px; max-width: 360px; }
.hero__eyebrow { color: var(--mute-d); }
.hero__lead { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.82); }
.seal { position: relative; width: clamp(118px, 10.5vw, 168px); aspect-ratio: 1; flex: none; display: grid; place-items: center; }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--white); will-change: transform; }
.seal__ring text { font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.seal__c { display: grid; place-items: center; width: 50%; aspect-ratio: 1; background: var(--y); color: var(--ink); --n: 6px; line-height: 1; transition: transform .4s steps(4); }
.seal__c b { font-weight: 400; font-size: clamp(26px, 2.4vw, 40px); letter-spacing: -.06em; margin-top: 4px; }
.seal__c span { font-size: 9px; font-weight: 500; letter-spacing: .1em; margin-top: -10px; }
.seal:hover .seal__c { transform: rotate(90deg); }
.hero__mid { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: clamp(10px, 1.4vw, 22px); }
.hero__hint { display: inline-flex; align-items: center; gap: 10px; color: var(--mute-d); }
.hero__key { display: inline-grid; place-items: center; width: 22px; height: 22px; box-shadow: inset 0 0 0 1px var(--line-d); color: var(--y); animation: keyBob 1.6s steps(4) infinite; }
@keyframes keyBob { 50% { transform: translateY(3px); } }
.hero__facts { display: flex; gap: clamp(16px, 2.4vw, 44px); }
.hero__facts li { display: grid; gap: 4px; }
.hero__facts b { font-weight: 400; font-size: clamp(26px, 2.6vw, 46px); line-height: .9; letter-spacing: -.055em; }
.hero__facts span { font-size: 11px; line-height: 1.3; color: var(--mute-d); }
.hero__title { font-weight: 400; font-size: clamp(50px, 10vw, 220px); line-height: .82; letter-spacing: -.072em; margin-bottom: -.06em; }
.hero__title .serif { letter-spacing: -.035em; padding-right: .04em; }

/* шаги */
.ch--step { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-content: center; padding: calc(var(--hdr) + 30px) var(--pad) 110px; }
.step { grid-column: 1 / span 6; display: grid; gap: 18px; justify-items: start; }
.step__n { color: var(--mute-d); }
.step__n b { color: var(--y); font-weight: 500; }
.step__verb { font-weight: 400; font-size: clamp(54px, 7vw, 150px); line-height: .82; letter-spacing: -.072em; white-space: nowrap; }
.step__lead { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.85); max-width: 42ch; }
.step__big { font-weight: 400; color: var(--y); }
.step__svc { display: flex; flex-wrap: wrap; gap: 6px; }
.step__svc li { font-size: 12px; padding: 6px 10px 5px; box-shadow: inset 0 0 0 1px var(--line-d); color: rgba(255,255,255,.8); }
.step__ex { display: grid; gap: 6px; max-width: 46ch; padding-top: 14px; border-top: 1px solid var(--line-d); width: 100%; }
.step__ex .mono { color: var(--mute-d); }
.step__ex .serif { font-size: clamp(18px, 1.5vw, 24px); line-height: 1.15; }
.step__by { font-size: 12px; font-weight: 500; color: var(--y); }
.step__ex:hover .serif { background: linear-gradient(var(--y), var(--y)) 0 90% / 100% 2px no-repeat; }

/* без анимаций */
html.no-webgl .story__shade { opacity: 1; }

/* =========================================================
   03. ЦИФРЫ — РАССВЕТ
   ========================================================= */
.dawn { position: relative; height: 260vh; background: var(--ink); color: var(--white); }
.dawn__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--hdr) + 16px) var(--pad) calc(var(--pad) + 70px); }
.dawn__sky { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* текст «вырезан» из дизеринга: инвертируется относительно пикселей под ним */
.dawn__head, .dawn__nums { position: relative; color: var(--white); mix-blend-mode: difference; }
.dawn__head .label { margin-bottom: 18px; opacity: .75; }
.dawn__head .lbl-star { fill: var(--white); }
.dawn__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.dawn__nums li { border-top: 1px solid var(--white); padding-top: 12px; display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 8px; min-width: 0; }
.dawn__nums b { font-weight: 400; font-size: clamp(54px, 7.2vw, 150px); line-height: .8; letter-spacing: -.07em; white-space: nowrap; }
.dawn__u { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.6vw, 52px); line-height: 1; padding-bottom: .1em; }
.dawn__nums p { grid-column: 1 / -1; margin-top: 12px; font-size: 12px; max-width: 26ch; opacity: .8; }

/* одометр */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo__c { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.odo__s { display: block; transform: translateY(0); transition: transform 1.9s var(--out); transition-delay: var(--d, 0s); }
.odo__s i { display: block; height: 1em; font-style: normal; }
.odo__x { display: inline-block; line-height: 1; height: 1em; }

/* =========================================================
   ОБЩЕЕ ДЛЯ СВЕТЛЫХ СЕКЦИЙ
   ========================================================= */
.sh { display: grid; gap: 18px; margin-bottom: clamp(26px, 3.4vw, 56px); }
.sh .label { color: var(--mute-l); }
.sh--split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.sh--split > div:first-child { grid-column: 1 / span 8; display: grid; gap: 18px; }
.team .h2 { font-size: clamp(44px, 6.6vw, 140px); }
.team .sh--split > div:first-child { grid-column: 1 / span 9; }
.team .sh__aside { grid-column: 10 / span 3; }
.sh__aside { grid-column: 9 / span 4; display: grid; gap: 16px; justify-items: start; padding-bottom: .6vw; }
.sh__aside.body, .sh__aside .body { color: var(--mute-l); }
[data-theme="dark"] .sh .label, .panel .sh .label { color: var(--mute-d); }
.panel .sh__aside.body { color: var(--mute-d); }

/* =========================================================
   04. ФЛАГМАНЫ — СТОПКА
   ========================================================= */
.flag { position: relative; z-index: 2; background: var(--paper); padding: clamp(70px, 8vw, 140px) var(--pad) clamp(30px, 4vw, 60px); }
.flag__stack { display: grid; gap: 0; }
.fcard { position: sticky; top: calc(var(--hdr) + 6px); height: calc(100vh - var(--hdr) - 76px); height: calc(100svh - var(--hdr) - 76px); min-height: 520px; margin-bottom: 14vh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: var(--gap); background: var(--ink); color: var(--white); overflow: hidden; transform-origin: 50% 0; }
.fcard:last-child { margin-bottom: 0; }
.fcard--y { background: var(--y); color: var(--ink); }
.fcard__media { grid-column: 1 / span 7; position: relative; overflow: hidden; background: #1a1a1a; }
.fcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.fcard__media img.is-on { visibility: visible; }
.fcard__media .mono { position: absolute; z-index: 2; left: 10px; bottom: 10px; background: var(--ink); color: var(--white); padding: 5px 8px 4px; }
.fcard__dots { position: absolute; z-index: 2; right: 10px; bottom: 12px; display: flex; gap: 4px; }
.fcard__dots i { width: 8px; height: 8px; background: rgba(255,255,255,.35); }
.fcard__dots i.is-on { background: var(--y); }
.fcard__info { grid-column: 8 / span 5; display: flex; flex-direction: column; padding: 8px 6px 6px 8px; }
.fcard__meta { display: flex; justify-content: space-between; gap: 10px; opacity: .6; }
.fcard__title { margin-top: clamp(14px, 2vw, 34px); font-weight: 400; font-size: clamp(30px, 3.4vw, 64px); line-height: .9; letter-spacing: -.055em; }
.fcard__line { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.5vw, 26px); line-height: 1.12; opacity: .8; max-width: 30ch; }
.fcard__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.fcard__tags li { font-size: 11px; padding: 5px 8px 4px; box-shadow: inset 0 0 0 1px currentColor; opacity: .7; }
.fcard__nums { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.fcard__nums li { border-top: 1px solid currentColor; padding-top: 10px; display: grid; gap: 6px; align-content: start; }
.fcard__nums li { border-color: rgba(255,255,255,.25); }
.fcard--y .fcard__nums li { border-color: rgba(11,11,11,.3); }
.fcard__nums b { font-weight: 400; font-size: clamp(40px, 4.6vw, 92px); line-height: .82; letter-spacing: -.065em; color: var(--y); white-space: nowrap; }
.fcard--y .fcard__nums b { color: var(--ink); }
.fcard__nums span { font-size: 12px; opacity: .65; max-width: 24ch; }
.fcard__foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fcard__award { font-size: 12px; font-weight: 500; }
.fcard--y .btn--y { background: var(--ink); color: var(--y); --fill: var(--white); }
.fcard--y .btn--y:hover { color: var(--ink); }
.fcard__shade { position: absolute; inset: 0; z-index: 5; background: var(--paper); pointer-events: none; visibility: hidden; }

/* =========================================================
   05. ВСЕ КЕЙСЫ
   ========================================================= */
.cases { position: relative; z-index: 2; background: var(--paper); padding: clamp(70px, 8vw, 140px) var(--pad) clamp(60px, 7vw, 120px); }
.cases__count { font-family: var(--serif); font-style: italic; font-size: .22em; letter-spacing: 0; vertical-align: top; margin-left: .1em; position: relative; top: .3em; }
.cases__count::before { content: "("; } .cases__count::after { content: ")"; }

.filters { position: sticky; top: var(--hdr); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px var(--pad); margin: 0 calc(var(--pad) * -1) 0; background: rgba(242, 242, 240, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-l); }
.seg { position: relative; display: inline-flex; padding: 3px; background: rgba(11,11,11,.08); }
.seg button { position: relative; z-index: 1; height: 30px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--mute-l); transition: color .25s steps(2); white-space: nowrap; }
.seg button.is-on { color: var(--y); }
.seg__ind { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; background: var(--ink); transition: transform .4s steps(6), width .4s steps(6); }
.seg--sm button { height: 28px; padding: 0 10px; font-size: 11.5px; }
.seg--icons button { width: 32px; padding: 0; display: grid; place-items: center; }
.seg--icons svg { width: 13px; height: 13px; fill: currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { position: relative; height: 32px; padding: 0 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; isolation: isolate; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-l); --n: 3px; transition: color .2s steps(2); }
.chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--y); clip-path: inset(0 100% 0 0); transition: clip-path .32s steps(5); }
.chip:hover::before { clip-path: inset(0 0 0 0); }
.chip sup { font-size: 9.5px; font-weight: 500; letter-spacing: .04em; top: -.5em; position: relative; vertical-align: baseline; }
.chip.is-on { background: var(--ink); color: var(--y); box-shadow: none; }
.chip.is-on::before { display: none; }
.chip[disabled] { opacity: .3; cursor: default; }
.filters__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* сетка: «контактный лист» с волосяными линиями */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1px; background: var(--line-l); border-bottom: 1px solid var(--line-l); margin: 0 calc(var(--pad) * -1); padding: 0; }
.cc { position: relative; background: var(--paper); min-width: 0; }
.cc[hidden] { display: none; }
.cc__a { display: flex; flex-direction: column; height: 100%; padding: var(--pad); gap: 10px; }
.cc__top { display: flex; justify-content: space-between; gap: 8px; color: var(--mute-l); }
.cc__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.cc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc__dith { image-rendering: pixelated; }
.cc__award { position: absolute; z-index: 2; left: 8px; top: 8px; font-size: 10.5px; font-weight: 500; background: var(--ink); color: var(--y); padding: 5px 8px 4px; --n: 3px; }
.cc__body { display: grid; gap: 6px; }
.cc__client { font-size: 12px; font-weight: 500; }
.cc__title { font-weight: 400; font-size: clamp(19px, 1.55vw, 28px); line-height: 1.02; letter-spacing: -.045em; max-width: 24ch; }
.cc__title span { background: linear-gradient(var(--y), var(--y)) 0 90% / 0 40% no-repeat; transition: background-size .45s steps(6); }
.cc__line { display: none; font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.3vw, 22px); line-height: 1.15; color: var(--mute-l); max-width: 36ch; }
.cc__reach { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line-l); }
.cc__reach b { font-weight: 400; font-size: clamp(30px, 2.8vw, 54px); line-height: .85; letter-spacing: -.065em; white-space: nowrap; }
.cc__reach span { font-size: 11px; color: var(--mute-l); text-align: right; max-width: 15ch; line-height: 1.25; }
.cc--big { grid-column: span 2; grid-row: span 2; }
.cc--big .cc__media { aspect-ratio: auto; flex: 1; min-height: 300px; }
.cc--big .cc__title { font-size: clamp(26px, 2.6vw, 48px); }
.cc--big .cc__line { display: block; }
.cc--big .cc__reach b { font-size: clamp(44px, 5vw, 100px); }
.cc--more { display: grid; }
.cc--more a { display: flex; flex-direction: column; justify-content: space-between; padding: var(--pad); background: var(--y); min-height: 100%; }
.cc--more b { font-weight: 400; font-size: clamp(26px, 2.4vw, 44px); line-height: .92; letter-spacing: -.055em; }
.cc--more .serif { letter-spacing: -.02em; }
.cc--more svg { width: 54px; height: 54px; fill: var(--ink); transition: transform .5s steps(6); }
.cc--more a:hover svg { transform: rotate(120deg); }

@media (hover: hover) and (pointer: fine) {
  .cc__img { -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 var(--r, 0px), transparent calc(var(--r, 0px) + .5px)); mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 var(--r, 0px), transparent calc(var(--r, 0px) + .5px)); }
  .cc:hover .cc__title span { background-size: 100% 40%; }
}
@media not all and (hover: hover) { .cc__dith { display: none; } }

/* вид «список» */
.grid[data-view="list"] { grid-template-columns: 1fr; }
.grid[data-view="list"] .cc { grid-column: auto; grid-row: auto; }
.grid[data-view="list"] .cc__a { display: grid; grid-template-columns: 34px 74px minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(130px, auto); align-items: center; gap: 14px; padding: 8px var(--pad); position: relative; isolation: isolate; }
.grid[data-view="list"] .cc__a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--y); clip-path: inset(0 100% 0 0); transition: clip-path .35s steps(8); }
.grid[data-view="list"] .cc:hover .cc__a::before { clip-path: inset(0 0 0 0); }
.grid[data-view="list"] .cc__top { display: contents; }
.grid[data-view="list"] .cc__top > :first-child { grid-column: 1; grid-row: 1; }
.grid[data-view="list"] .cc__top > :nth-child(2) { grid-column: 5; grid-row: 1; }
.grid[data-view="list"] .cc__top > :nth-child(3) { display: none; }
.grid[data-view="list"] .cc__media { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; width: 74px; min-height: 0; flex: none; }
.grid[data-view="list"] .cc__img { display: none; }
.grid[data-view="list"] .cc__dith { display: block; }
.grid[data-view="list"] .cc__award { display: none; }
.grid[data-view="list"] .cc__body { display: contents; }
.grid[data-view="list"] .cc__client { grid-column: 3; grid-row: 1; font-size: 14px; }
.grid[data-view="list"] .cc__title { grid-column: 4; grid-row: 1; font-size: clamp(18px, 1.6vw, 28px); }
.grid[data-view="list"] .cc__title span { background: none; }
.grid[data-view="list"] .cc__line { display: none; }
.grid[data-view="list"] .cc__reach { grid-column: 6; grid-row: 1; border: 0; padding: 0; margin: 0; flex-direction: column; align-items: flex-end; gap: 2px; }
.grid[data-view="list"] .cc__reach b { font-size: clamp(24px, 2vw, 36px); }
.grid[data-view="list"] .cc--more { display: none; }
.grid__empty { padding: 40px 0; color: var(--mute-l); }

/* =========================================================
   06. НАГРАДЫ — ТАБЛО
   ========================================================= */
.awards { position: relative; z-index: 2; background: var(--paper); padding: 0 var(--pad) var(--pad); }
.panel { position: relative; background: var(--ink); color: var(--white); padding: clamp(50px, 6vw, 110px) var(--pad) clamp(30px, 3vw, 50px); overflow: hidden; }
.panel .h2 { color: var(--white); }
.tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-bottom: clamp(30px, 4vw, 70px); }
.tally li { border-top: 1px solid var(--line-d); padding-top: 12px; display: grid; gap: 8px; }
.tally b { font-weight: 400; font-size: clamp(50px, 7.4vw, 150px); line-height: .82; letter-spacing: -.07em; white-space: nowrap; }
.tally li:nth-child(-n+2) b { color: var(--y); }
.tally li > span { font-size: 12px; color: var(--mute-d); }
.odo--mark { background: linear-gradient(var(--y), var(--y)) 0 100% / 100% 0 no-repeat; color: var(--white); transition: background-size .6s steps(6) .8s, color .2s steps(1) 1.1s; padding: 0 .04em; }
.odo--mark.is-in { background-size: 100% 100%; color: var(--ink); }

.board { border-top: 1px solid var(--y); }
.board__head { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, .7fr); gap: 14px; padding: 10px 0; color: var(--mute-d); border-bottom: 1px solid var(--line-d); }
.brow { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, .7fr); gap: 14px; align-items: center; padding: clamp(12px, 1.3vw, 20px) 0; border-bottom: 1px solid var(--line-d); position: relative; isolation: isolate; transform-origin: 50% 0; }
.brow::before { content: ""; position: absolute; inset: 0 calc(var(--pad) * -1); z-index: -1; background: var(--y); clip-path: inset(0 100% 0 0); transition: clip-path .35s steps(8); }
.brow:hover::before { clip-path: inset(0 0 0 0); }
.brow:hover { color: var(--ink); }
.brow__n { color: var(--mute-d); }
.brow:hover .brow__n { color: var(--ink); }
.brow__fest { font-size: clamp(26px, 3vw, 58px); letter-spacing: -.055em; line-height: .95; white-space: nowrap; }
.brow__cat { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.75); max-width: 56ch; }
.brow:hover .brow__cat { color: var(--ink); }
.brow__med { display: flex; flex-wrap: wrap; gap: 4px; }
.m { font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .03em; padding: 5px 8px 4px; box-shadow: inset 0 0 0 1px var(--line-d); white-space: nowrap; --n: 3px; }
.m--gp { background: var(--y); color: var(--ink); box-shadow: none; }
.m--au { box-shadow: inset 0 0 0 1px var(--y); color: var(--y); }
.m--br { opacity: .6; }
.brow:hover .m { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.brow:hover .m--gp { background: var(--ink); color: var(--y); }
.brow__case { font-size: clamp(18px, 1.5vw, 26px); text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.brow__thumb { width: 0; height: 44px; object-fit: cover; image-rendering: pixelated; transition: width .35s steps(6); flex: none; }
.brow:hover .brow__thumb { width: 60px; }
.ratings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(30px, 4vw, 60px); }
.ratings li { border-top: 1px solid var(--line-d); padding-top: 10px; display: grid; gap: 6px; align-content: start; }
.ratings b { font-weight: 400; font-size: clamp(22px, 2.2vw, 40px); letter-spacing: -.05em; line-height: .95; }
.ratings span { font-size: 11.5px; color: var(--mute-d); max-width: 22ch; }

/* =========================================================
   07. КЛИЕНТЫ
   ========================================================= */
.clients { position: relative; z-index: 2; background: var(--paper); padding: clamp(70px, 8vw, 140px) var(--pad) clamp(50px, 6vw, 100px); }
.cgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line-l); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-l); margin: 0 calc(var(--pad) * -1); }
.cgrid li { background: var(--paper); }
.cl { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: clamp(120px, 11vw, 190px); padding: var(--pad); isolation: isolate; overflow: hidden; }
.cl__fill { position: absolute; inset: 0; z-index: -1; background: var(--y); visibility: hidden; }
.cl__top { display: flex; justify-content: space-between; color: var(--mute-l); }
.cl__name { font-size: clamp(24px, 2.4vw, 46px); letter-spacing: -.055em; line-height: .95; }
.cl__name.serif { letter-spacing: -.03em; }
.cl__meta { color: var(--mute-l); min-height: 1.3em; }
.cl:hover .cl__top, .cl:hover .cl__meta { color: var(--ink); }
.cl__arr { opacity: 0; transition: opacity .2s steps(2); }
a.cl:hover .cl__arr { opacity: 1; }

/* =========================================================
   08. CREATIVE + EVENTS
   ========================================================= */
.events { position: relative; z-index: 2; background: var(--paper); padding: 0 0 clamp(60px, 7vw, 120px); }
.ev__pin { height: 250vh; position: relative; }
.ev__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: calc(var(--hdr) + 20px) var(--pad) calc(var(--pad) + 60px); overflow: hidden; }
.ev__head { grid-column: 1 / span 4; display: grid; gap: 20px; align-content: start; position: relative; z-index: 2; }
.ev__head .h2 { font-size: clamp(44px, 5.4vw, 112px); }
.ev__head .label { color: var(--mute-l); }
.ev__head .body { color: var(--mute-l); }
.ev__stage { grid-column: 5 / span 8; position: relative; }
.ev__cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.ev__tag { position: absolute; left: 0; top: 0; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 7px 10px 6px; transform: translate(-50%, -50%); will-change: transform; white-space: nowrap; }
.ev__tag--c { background: var(--ink); color: var(--white); }
.ev__tag--e { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ev__merge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 4px; justify-items: center; text-align: center; background: var(--ink); color: var(--y); padding: 14px 18px 12px; --n: 6px; visibility: hidden; }
.ev__merge b { font-weight: 400; font-size: clamp(26px, 2.8vw, 52px); letter-spacing: -.055em; line-height: .95; }
.ev__merge span { font-size: 12px; color: var(--white); }

.strip { display: flex; gap: var(--gap); overflow-x: auto; padding: 0 var(--pad) 6px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.strip::-webkit-scrollbar { display: none; }
.strip.is-drag { scroll-snap-type: none; }
.strip.is-drag a { pointer-events: none; }
.ecard { flex: none; width: clamp(260px, 27vw, 460px); scroll-snap-align: start; display: grid; gap: 8px; align-content: start; user-select: none; }
.ecard__img { aspect-ratio: 4 / 5; overflow: hidden; background: #ddd; position: relative; }
.ecard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--out); }
.ecard:hover .ecard__img img { transform: scale(1.05); }
.ecard__n { color: var(--mute-l); margin-top: 4px; }
.ecard__t { font-weight: 400; font-size: clamp(24px, 2.2vw, 40px); line-height: .95; letter-spacing: -.055em; max-width: 14ch; }
.ecard__s { font-size: 12px; color: var(--mute-l); }
.ecard__s b { color: var(--ink); font-weight: 500; }
.ecard--go { background: var(--y); padding: var(--pad); display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; align-self: start; }
.ecard--go svg { width: 60px; height: 60px; fill: var(--ink); transition: transform .6s steps(6); }
.ecard--go:hover svg { transform: rotate(180deg); }
.ecard--go .ecard__t { font-size: clamp(40px, 4vw, 76px); }

/* =========================================================
   09. КОМАНДА
   ========================================================= */
.team { position: relative; z-index: 2; background: var(--paper); padding: clamp(70px, 8vw, 140px) var(--pad) clamp(60px, 7vw, 120px); }
.tband { position: relative; height: min(78vh, 52vw); overflow: hidden; background: var(--ink); margin: 0 calc(var(--pad) * -1); }
.tband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tband__d { image-rendering: pixelated; }
.tband__p { -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 var(--r, 0px), transparent calc(var(--r, 0px) + .5px)); mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 var(--r, 0px), transparent calc(var(--r, 0px) + .5px)); }
.tband figcaption { position: absolute; left: var(--pad); bottom: var(--pad); background: var(--ink); color: var(--white); padding: 5px 8px 4px; }
.crew { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line-l); margin: 1px calc(var(--pad) * -1) 0; border-bottom: 1px solid var(--line-l); }
.mate { background: var(--paper); padding: var(--pad); display: grid; gap: 6px; align-content: start; }
.mate__pic { width: 100%; aspect-ratio: 4 / 5; image-rendering: pixelated; display: block; margin-bottom: 6px; background: var(--paper); }
img.mate__pic { image-rendering: auto; object-fit: cover; }
.mate__n { color: var(--mute-l); }
.mate__role { font-size: clamp(19px, 1.5vw, 26px); line-height: 1; letter-spacing: -.045em; min-height: 2em; }
.mate__name { font-size: 13px; font-weight: 500; }
.mate__name.is-tbd { color: var(--mute-l); }
.mate__name.is-tbd::after { content: " · уточнить"; font-weight: 400; font-size: 11px; }
.mate__does { font-size: 12px; color: var(--mute-l); line-height: 1.4; max-width: 26ch; }

.tq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(50px, 7vw, 120px); }
.tq__t { grid-column: 1 / -1; font-size: clamp(32px, 4.8vw, 100px); line-height: .98; letter-spacing: -.045em; }
.mk { background: linear-gradient(var(--y), var(--y)) 0 88% / 0 82% no-repeat; color: inherit; padding: 0 .04em; transition: background-size 1s steps(10); }
.mk.is-on { background-size: 100% 82%; }
.tq__by { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-top: clamp(20px, 2.4vw, 36px); }
.tq__name { font-size: 18px; letter-spacing: -.03em; }
.tq__by .mono { color: var(--mute-l); }

/* =========================================================
   10. ЗАЯВКА
   ========================================================= */
.contact { position: relative; z-index: 2; background: var(--paper); padding: 0 var(--pad) var(--pad); }
.panel--night { padding-top: clamp(60px, 7vw, 120px); transition: color .4s steps(4); }
.contact__sky { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.contact__in { position: relative; }
.contact__in > .label { color: var(--mute-d); }
.contact__title { margin: 18px 0 clamp(30px, 4vw, 70px); font-weight: 400; font-size: clamp(64px, 15vw, 320px); line-height: .8; letter-spacing: -.075em; }
.contact__title .serif { letter-spacing: -.04em; padding-right: .05em; }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.form { grid-column: 1 / span 7; display: grid; gap: 24px; }
.form .mono b { color: var(--y); font-weight: 500; margin-right: 6px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.field { display: grid; gap: 6px; }
.field .mono { color: var(--mute-d); }
.field input, .field textarea { font: inherit; font-size: clamp(20px, 1.8vw, 30px); letter-spacing: -.03em; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid var(--line-d); padding: 6px 0 10px; border-radius: 0; resize: none; transition: border-color .2s steps(2); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--y); }
.field.is-bad input { border-color: #f95d51; }
.need { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.need legend { color: var(--mute-d); margin-bottom: 10px; padding: 0; }
.need label { position: relative; }
.need input { position: absolute; opacity: 0; pointer-events: none; }
.need span { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; box-shadow: inset 0 0 0 1px var(--line-d); font-size: 14px; --n: 4px; transition: background .2s steps(2), color .2s steps(2); }
.need label:hover span { box-shadow: inset 0 0 0 1px var(--white); }
.need input:checked + span { background: var(--y); color: var(--ink); box-shadow: none; }
.need input:checked + span::before { content: "✶ "; white-space: pre; }
.need input:focus-visible + span { outline: 2px dashed var(--y); outline-offset: 2px; }
.form .btn { justify-self: start; margin-top: 6px; }
.direct { grid-column: 9 / span 4; display: grid; gap: 10px; align-content: start; justify-items: start; border-top: 1px solid var(--line-d); padding-top: 14px; }
.direct__h { color: var(--mute-d); margin-bottom: 10px; }
.direct__name { font-size: clamp(28px, 2.6vw, 46px); letter-spacing: -.05em; line-height: .95; }
.direct__role { color: var(--y); margin-bottom: 10px; }
.direct__mail { font-size: 15px; }
.direct__small { margin-top: 16px; font-size: 12px; color: var(--mute-d); line-height: 1.6; }
.direct__small a { color: var(--white); border-bottom: 1px solid var(--line-d); }
.contact__ok { display: grid; gap: 18px; justify-items: start; max-width: 720px; padding: 10px 0 30px; }
.contact__okT { font-size: clamp(48px, 7vw, 140px); letter-spacing: -.065em; line-height: .86; }
.contact__ok .body { font-size: 15px; max-width: 52ch; }
.panel--night.is-day { color: var(--ink); }
.panel--night.is-day .contact__in > .label, .panel--night.is-day .contact__ok .body { color: var(--mute-l); }
.panel--night.is-day .y { color: var(--ink); }
.panel--night.is-day .lbl-star { fill: var(--ink); }
.panel--night.is-day .contact__grid { display: none; }
.panel--night.is-day .lnk:hover { color: var(--ink); }

/* =========================================================
   ПОДВАЛ
   ========================================================= */
.foot { position: relative; z-index: 2; background: var(--ink); color: var(--white); padding: clamp(30px, 4vw, 60px) var(--pad) 74px; overflow: hidden; }
.foot__mark { display: inline-block; font-size: 18vw; line-height: .8; letter-spacing: -.075em; white-space: nowrap; color: var(--y); padding-bottom: .04em; }
.foot__mark i { font-family: var(--serif); font-style: italic; letter-spacing: -.035em; padding-right: .02em; }
.foot__mark.is-dith { color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: repeat-x; image-rendering: pixelated; }
.foot__row { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 16px; margin-top: 14px; border-top: 1px solid var(--line-d); color: var(--mute-d); }
.foot__row a:hover { color: var(--y); }
.foot__sun { color: var(--white); }
.foot__sun b { color: var(--y); font-weight: 500; }
.foot__top { margin-left: auto; color: var(--white); }

/* =========================================================
   ПОЯВЛЕНИЯ
   ========================================================= */
.js .dz { opacity: 0; }
.js .dz.is-in { opacity: 1; }

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ratings { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .fcard__media { grid-column: 1 / span 6; } .fcard__info { grid-column: 7 / span 6; }
  .step { grid-column: 1 / span 6; }
  .brow, .board__head { grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1.5fr); }
  .brow__case, .board__head > :last-child { display: none; }
}
@media (max-width: 900px) {
  .hdr__clock { display: none; }
  .hdr { grid-template-columns: 1fr auto; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh--split > div:first-child, .sh__aside, .team .sh--split > div:first-child, .team .sh__aside { grid-column: 1 / -1; }
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .ev__head { grid-column: 1 / -1; }
  .ev__stage { grid-column: 1 / -1; min-height: 46vh; }
  .ev__sticky { grid-template-rows: auto 1fr; }
  .contact__grid > * { grid-column: 1 / -1 !important; }
  .direct { margin-top: 30px; }
  .fcard { grid-template-rows: minmax(0, 1fr) auto; }
  .fcard__media, .fcard__info { grid-column: 1 / -1; }
  .fcard__media { min-height: 0; }
  .fcard__title { margin-top: 8px; }
  .fcard__line { display: none; }
  .fcard__nums { margin-top: 14px; }
}
@media (max-width: 760px) {
  :root { --hdr: 52px; }
  .logo { font-size: 18px; }
  .logo__unit { display: none; }
  .hdr .btn { height: 34px; padding: 0 12px; font-size: 12px; }
  .hero__top { flex-direction: column-reverse; }
  .seal { width: 96px; align-self: flex-end; margin-top: -6px; }
  .hero__intro { max-width: none; }
  .hero__lead { font-size: 13px; }
  .hero__mid { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__facts { width: 100%; justify-content: space-between; }
  .ch--step { padding-top: calc(var(--hdr) + 40vh); padding-bottom: 90px; align-content: end; }
  .step { grid-column: 1 / -1; }
  .story__shade { background: linear-gradient(180deg, rgba(11,11,11,0) 18%, rgba(11,11,11,.86) 52%, rgba(11,11,11,.95) 100%); }
  .hud { display: none; }
  .hud__cap { display: none; }
  .step__ex { display: none; }
  .dawn { height: 220vh; }
  .dawn__nums { grid-template-columns: 1fr; gap: 14px; }
  .dawn__nums li { padding-top: 8px; }
  .dawn__nums b { font-size: 17vw; }
  .dawn__nums p { margin-top: 6px; }
  .fcard { height: calc(100svh - var(--hdr) - 70px); min-height: 0; }
  .fcard__nums b { font-size: 11vw; }
  .fcard__title { font-size: 28px; }
  .filters { position: relative; top: 0; }
  .filters__tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); width: calc(100% + 2 * var(--pad)); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .grid { grid-template-columns: 1fr; }
  .cc--big { grid-column: auto; grid-row: auto; }
  .cc--big .cc__media { aspect-ratio: 4 / 3; flex: none; min-height: 0; }
  .grid[data-view="list"] .cc__a { grid-template-columns: 52px minmax(0, 1fr) auto; row-gap: 2px; }
  .grid[data-view="list"] .cc__top > :first-child, .grid[data-view="list"] .cc__top > :nth-child(2) { display: none; }
  .grid[data-view="list"] .cc__media { grid-column: 1; grid-row: 1 / span 2; width: 52px; }
  .grid[data-view="list"] .cc__client { grid-column: 2; grid-row: 1; font-size: 12px; }
  .grid[data-view="list"] .cc__title { grid-column: 2; grid-row: 2; font-size: 18px; }
  .grid[data-view="list"] .cc__reach { grid-column: 3; grid-row: 1 / span 2; }
  .grid[data-view="list"] .cc__reach span { display: none; }
  .board__head { display: none; }
  .brow { grid-template-columns: 26px minmax(0, 1fr); row-gap: 8px; }
  .brow__cat, .brow__med { grid-column: 2; }
  .ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl { height: 112px; }
  .cl__name { font-size: 24px; }
  .ev__pin { height: 200vh; }
  .ev__head .body { display: none; }
  .ecard { width: 78vw; }
  .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tband { height: 70vw; }
  .form__row { grid-template-columns: 1fr; }
  .foot__top { margin-left: 0; }
  .dock a { padding: 0 9px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .dz { opacity: 1; }
  .dawn { height: auto; }
  .dawn__sticky { position: relative; height: auto; min-height: 100vh; }
  .ev__pin { height: auto; }
  .ev__sticky { position: relative; height: auto; min-height: 100vh; }
}