/* tokens/palette */
:root {
  --purple-100: #edccff;
  --purple-200: #e4b2ff;
  --purple-300: #db99ff;
  --purple-400: #ca66ff;
  --purple-500: #b833ff;
  --purple-600: #a600ff;
  --purple-700: #8500cc;
  --purple-800: #420066;
  --gray-0: #ffffff;
  --gray-50: #f5f5f5;
  --gray-100: #ececec;
  --gray-150: #e2e2e2;
  --gray-200: #d9d9d9;
  --gray-300: #c6c6c6;
  --gray-400: #b3b3b3;
  --gray-500: #a0a0a0;
  --gray-600: #828282;
  --gray-700: #656565;
  --gray-800: #474747;
  --gray-900: #2a2a2a;
  --gray-950: #1b1b1b;
  --blue-50: #e5e5fd;
  --blue-100: #ccccfc;
  --blue-150: #b2b2fa;
  --blue-200: #9999f8;
  --blue-300: #6666f5;
  --blue-400: #3333f1;
  --blue-500: #0000ee;
  --blue-600: #0000be;
  --blue-700: #00008f;
  --blue-800: #00005f;
  --blue-850: #000047;
  --green-100: #d2f8cd;
  --green-150: #bbf4b4;
  --green-200: #a4f19b;
  --green-300: #77ea68;
  --green-400: #49e336;
  --green-500: #1cdc04;
  --green-600: #16b003;
  --green-700: #118402;
  --green-800: #0b5802;
  --green-850: #084201;
  --red-100: #ffcccc;
  --red-150: #ffb2b2;
  --red-200: #ff9999;
  --red-300: #ff6666;
  --red-400: #ff3333;
  --red-500: #ff0000;
  --red-600: #cc0000;
  --red-700: #990000;
  --yellow-100: #fffecc;
  --yellow-200: #fffdb2;
  --yellow-300: #fffd99;
  --yellow-400: #fffb66;
  --yellow-500: #fff900;
  --yellow-600: #ccc700;
  --yellow-700: #999500;
  --pink-100: #ffccf2;
  --pink-200: #ffb2eb;
  --pink-300: #ff99e4;
  --pink-400: #ff66d7;
  --pink-500: #ff00bc;
  --pink-600: #cc0096;
  --pink-700: #990071;
  --pink-800: #66004b;
  --pink-850: #4d0038;
}

/* tokens/colors */
:root {
  color-scheme: light dark;
  --bg-default: var(--gray-0);
  --bg-inverse: var(--gray-950);
  --bg-muted: var(--gray-50);
  --bg-blue: var(--blue-500);
  --bg-gray: var(--gray-200);
  --text-default: var(--gray-950);
  --text-static-black: var(--gray-950);
  --text-static-gray: var(--gray-300);
  --text-mark-default: var(--yellow-400);
  --text-link-default: var(--blue-500);
  --text-link-hover: var(--blue-700);
  --text-link-press: var(--blue-800);
  --text-link-inactive: var(--gray-300);
  --text-link-inverse: var(--gray-950);
  --border-default: color-mix(in srgb, var(--gray-950) 20%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-default: var(--gray-900);
    --bg-inverse: var(--gray-0);
    --bg-muted: var(--gray-800);
    --bg-blue: var(--gray-0);
    --bg-gray: var(--gray-400);
    --text-default: var(--gray-200);
    --text-static-black: var(--gray-950);
    --text-static-gray: var(--gray-700);
    --text-mark-default: var(--yellow-400);
    --text-link-default: var(--gray-0);
    --text-link-hover: var(--gray-400);
    --text-link-press: var(--gray-600);
    --text-link-inactive: var(--gray-600);
    --text-link-inverse: var(--gray-0);
    --border-default: color-mix(in srgb, var(--gray-200) 20%, transparent);
  }
}

/* tokens/sizes */
:root {
  --space-0: 0;
  --space-25: 1px;
  --space-50: 2px;
  --space-100: 4px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-600: 24px;
  --space-800: 32px;
  --space-1200: 48px;
  --space-1600: 64px;
  --space-2400: 96px;
  --space-4000: 160px;
  --space-6700: 268px;
  --title-hero-size: 76px;
  --title-hero-lh: 84px;
  --heading-large-size: 62px;
  --heading-large-lh: 68px;
  --heading-base-size: 50px;
  --heading-base-lh: 56px;
  --heading-small-size: 40px;
  --heading-small-lh: 44px;
  --heading-extra-small-size: 32px;
  --heading-extra-small-lh: 36px;
  --body-large-size: 24px;
  --body-large-lh: 32px;
  --body-base-size: 20px;
  --body-base-lh: 28px;
  --body-small-size: 18px;
  --body-small-lh: 24px;
  --body-extra-small-size: 16px;
  --body-extra-small-lh: 22px;
}

.title-hero { font-family: var(--font-base); font-size: var(--title-hero-size); line-height: var(--title-hero-lh); }
.heading-large { font-family: var(--font-base); font-size: var(--heading-large-size); line-height: var(--heading-large-lh); }
.heading-base { font-family: var(--font-base); font-size: var(--heading-base-size); line-height: var(--heading-base-lh); }
.heading-small { font-family: var(--font-base); font-size: var(--heading-small-size); line-height: var(--heading-small-lh); }
.heading-extra-small { font-family: var(--font-base); font-size: var(--heading-extra-small-size); line-height: var(--heading-extra-small-lh); }
.body-large { font-family: var(--font-base); font-size: var(--body-large-size); line-height: var(--body-large-lh); }
.body-base { font-family: var(--font-base); font-size: var(--body-base-size); line-height: var(--body-base-lh); }
.body-small { font-family: var(--font-base); font-size: var(--body-small-size); line-height: var(--body-small-lh); }
.body-extra-small { font-family: var(--font-base); font-size: var(--body-extra-small-size); line-height: var(--body-extra-small-lh); }

:root {
  --header-h: calc(0.3733 * 100vw);
  --logo-w: calc(0.6754 * 100vw);
  --logo-left: calc(0.0083 * 100vw);
  --logo-top: calc(0.0735 * 100vw);
  --intro-text-size: 24px;
  --intro-text-lh: 32px;
  --table-pt: calc(0.0427 * 100vw);
  --table-pb: calc(0.0427 * 100vw);
  --table-text-size: 18px;
  --table-text-lh: 24px;
  --footer-pt: calc(0.1707 * 100vw);
  --footer-text-size: 16px;
  --footer-text-lh: 22px;
  --footer-group-gap: 8px;
  --footer-col-w: calc(0.4667 * 100vw);
  --stamp-w: calc(0.4267 * 100vw);
  --case-title-size: 50px;
  --case-title-lh: 56px;
  --case-title-w: calc(0.9147 * 100vw);
  --case-section-pt: calc(0.0427 * 100vw);
  --case-images-gap-top: calc(0.0853 * 100vw);
  --case-head-gap: calc(0.064 * 100vw);
  --case-h2-size: 40px;
  --case-h2-lh: 44px;
  --case-text-size: 18px;
  --case-text-lh: 24px;
  --case-images-gap: 8px;
}
@media (min-width: 375px) {
  :root {
    --header-h: calc(140px + -4 * (100vw - 375px) / 369);
    --logo-w: calc(253.27px + 15.82 * (100vw - 375px) / 369);
    --logo-left: calc(3.11px + 7.79 * (100vw - 375px) / 369);
    --logo-top: calc(27.57px + 5.22 * (100vw - 375px) / 369);
    --intro-text-size: calc(24px + 8 * (100vw - 375px) / 369);
    --intro-text-lh: calc(32px + 4 * (100vw - 375px) / 369);
    --table-pt: calc(16px + 48 * (100vw - 375px) / 369);
    --table-pb: calc(16px + 32 * (100vw - 375px) / 369);
    --table-text-size: calc(18px + 2 * (100vw - 375px) / 369);
    --table-text-lh: calc(24px + 4 * (100vw - 375px) / 369);
    --footer-pt: calc(64px + 32 * (100vw - 375px) / 369);
    --footer-text-size: calc(16px + 2 * (100vw - 375px) / 369);
    --footer-text-lh: calc(22px + 2 * (100vw - 375px) / 369);
    --footer-group-gap: calc(8px + 4 * (100vw - 375px) / 369);
    --footer-col-w: calc(175px + 273 * (100vw - 375px) / 369);
    --stamp-w: calc(160px + 14 * (100vw - 375px) / 369);
    --case-title-size: calc(50px + 12 * (100vw - 375px) / 369);
    --case-title-lh: calc(56px + 12 * (100vw - 375px) / 369);
    --case-title-w: calc(343px + 369 * (100vw - 375px) / 369);
    --case-section-pt: 16px;
    --case-images-gap-top: calc(32px + 16 * (100vw - 375px) / 369);
    --case-head-gap: calc(24px + 8 * (100vw - 375px) / 369);
    --case-h2-size: calc(40px + 10 * (100vw - 375px) / 369);
    --case-h2-lh: calc(44px + 12 * (100vw - 375px) / 369);
    --case-text-size: calc(18px + 2 * (100vw - 375px) / 369);
    --case-text-lh: calc(24px + 4 * (100vw - 375px) / 369);
    --case-images-gap: calc(8px + 8 * (100vw - 375px) / 369);
  }
}
@media (min-width: 744px) {
  :root {
    --header-h: 136px;
    --logo-w: 269.09px;
    --logo-left: 10.9px;
    --logo-top: 32.79px;
    --intro-text-size: 32px;
    --intro-text-lh: 36px;
    --table-pt: calc(64px + -16 * (100vw - 744px) / 280);
    --table-pb: 48px;
    --table-text-size: 20px;
    --table-text-lh: 28px;
    --footer-pt: 96px;
    --footer-text-size: 18px;
    --footer-text-lh: 24px;
    --footer-group-gap: 12px;
    --footer-col-w: 448px;
    --stamp-w: 174px;
    --case-title-size: 62px;
    --case-title-lh: 68px;
    --case-title-w: calc(712px + 199 * (100vw - 744px) / 280);
    --case-section-pt: 16px;
    --case-images-gap-top: 48px;
    --case-head-gap: 32px;
    --case-h2-size: 50px;
    --case-h2-lh: 56px;
    --case-text-size: 20px;
    --case-text-lh: 28px;
    --case-images-gap: 16px;
  }
}
@media (min-width: 1024px) {
  :root {
    --header-h: calc(136px + 64 * (100vw - 1024px) / 416);
    --logo-w: calc(269.09px + 31.66 * (100vw - 1024px) / 416);
    --logo-left: calc(10.9px + -5.89 * (100vw - 1024px) / 416);
    --logo-top: calc(32.79px + 10.45 * (100vw - 1024px) / 416);
    --intro-text-size: calc(32px + 8 * (100vw - 1024px) / 416);
    --intro-text-lh: calc(36px + 8 * (100vw - 1024px) / 416);
    --table-pt: calc(48px + 16 * (100vw - 1024px) / 416);
    --table-pb: 48px;
    --table-text-size: calc(20px + 4 * (100vw - 1024px) / 416);
    --table-text-lh: calc(28px + 4 * (100vw - 1024px) / 416);
    --footer-pt: calc(96px + 64 * (100vw - 1024px) / 416);
    --footer-text-size: 18px;
    --footer-text-lh: 24px;
    --footer-group-gap: 12px;
    --footer-col-w: 448px;
    --stamp-w: calc(174px + 29 * (100vw - 1024px) / 416);
    --case-title-size: calc(62px + 14 * (100vw - 1024px) / 416);
    --case-title-lh: calc(68px + 16 * (100vw - 1024px) / 416);
    --case-title-w: calc(911px + 218 * (100vw - 1024px) / 416);
    --case-section-pt: calc(16px + 32 * (100vw - 1024px) / 416);
    --case-images-gap-top: 48px;
    --case-head-gap: 32px;
    --case-h2-size: 50px;
    --case-h2-lh: 56px;
    --case-text-size: calc(20px + 4 * (100vw - 1024px) / 416);
    --case-text-lh: calc(28px + 4 * (100vw - 1024px) / 416);
    --case-images-gap: 16px;
  }
}
@media (min-width: 1440px) {
  :root {
    --header-h: 200px;
    --logo-w: 300.75px;
    --logo-left: 5.01px;
    --logo-top: 43.24px;
    --intro-text-size: 40px;
    --intro-text-lh: 44px;
    --table-pt: 64px;
    --table-pb: 48px;
    --table-text-size: 24px;
    --table-text-lh: 32px;
    --footer-pt: 160px;
    --footer-text-size: 18px;
    --footer-text-lh: 24px;
    --footer-group-gap: 12px;
    --footer-col-w: 448px;
    --stamp-w: 203px;
    --case-title-size: 76px;
    --case-title-lh: 84px;
    --case-title-w: 1129px;
    --case-section-pt: 48px;
    --case-images-gap-top: 48px;
    --case-head-gap: 32px;
    --case-h2-size: 50px;
    --case-h2-lh: 56px;
    --case-text-size: 24px;
    --case-text-lh: 32px;
    --case-images-gap: 16px;
  }
}
@media (min-width: 1920px) {
  :root {
    --header-h: 200px;
    --logo-w: 300.75px;
    --logo-left: 5.01px;
    --logo-top: 43.24px;
    --intro-text-size: 40px;
    --intro-text-lh: 44px;
    --table-pt: 64px;
    --table-pb: 48px;
    --table-text-size: 24px;
    --table-text-lh: 32px;
    --footer-pt: 160px;
    --footer-text-size: 18px;
    --footer-text-lh: 24px;
    --footer-group-gap: 12px;
    --footer-col-w: 448px;
    --stamp-w: 203px;
    --case-title-size: 76px;
    --case-title-lh: 84px;
    --case-title-w: 1129px;
    --case-section-pt: 48px;
    --case-images-gap-top: 48px;
    --case-head-gap: 32px;
    --case-h2-size: 50px;
    --case-h2-lh: 56px;
    --case-text-size: 24px;
    --case-text-lh: 32px;
    --case-images-gap: 16px;
  }
}

/* settings.css */
/* Шрифт и общие переменные. Цвета, отступы и кегли — не здесь, а в src/_data/tokens.json (собираются в начало main.css) */

:root {
  /* Системный шрифт, без загрузки: Helvetica на Mac и iPhone, Arial на Windows и Android.
     Arial по ширине знаков совпадает с Helvetica (не с Helvetica Neue — та шире) — переносы строк как в макете, где Arial */
  --font-base: Helvetica, Arial, sans-serif;

  --page-max: 1920px;
  --page-px: var(--space-400);
}

/* base.css */
/* Сброс браузерных стилей и общие правила страницы: шрифт, фон, ширина */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* Шире 1920 фон тянется на всё окно, контент стоит по центру */
html {
  background: var(--bg-default);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  max-width: var(--page-max);
  margin-inline: auto;
  background: var(--bg-default);
  color: var(--text-default);
  font-family: var(--font-base);
  font-size: var(--body-base-size);
  line-height: var(--body-base-lh);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2 {
  font: inherit;
}

ul {
  list-style: none;
}

/* Текст только для экранных дикторов */
.np8__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Рамка при переходе по ссылкам клавишей Tab (при наведении мышью её нет) */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* components/link.css */
/* Ссылка (Фигма: ds_atom → link, 12:485).
   Стиль blue: default text/link/default → hover text/link/hover → press text/link/press.
   Стиль select (.Select): без подчёркивания, цвет text/link/inverse — текущий язык в подвале */
.np8__link {
  color: var(--text-link-default);
  text-decoration-line: underline;
  /* Как в Фигме: толщина 1 px, отступ 7 / 6 / 5 / 4 px при кегле 24 / 20 / 18 / 16 (≈ 0.28em), линия прерывается на выносных */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-skip-ink: auto;
  cursor: pointer;
}

@media (hover: hover) {
  .np8__link:hover {
    color: var(--text-link-hover);
  }
}

.np8__link:active {
  color: var(--text-link-press);
}

.np8__link.Select {
  color: var(--text-link-inverse);
  text-decoration: none;
  cursor: default;
}

/* components/mark.css */
/* Метка статуса проекта (Фигма: ds_atom → mark, 224:13066).
   active — жёлтый маркер, текст всегда чёрный (одинаково в обеих темах); Inactive — bg/muted, серый текст */
.np8__mark {
  display: inline-block;
  background: var(--text-mark-default);
  color: var(--text-static-black);
}

.np8__mark.Inactive {
  background: var(--bg-muted);
  color: var(--text-static-gray);
}

/* components/header.css */
/* Шапка (Фигма: header, 532:32428): desktop 200 / tablet 136 / mobile 140, логотип по положению кривых в макете */
.np8__header {
  height: var(--header-h);
  padding-inline: var(--page-px);
}

.np8__logo {
  display: block;
  width: var(--logo-w);
  margin-left: var(--logo-left);
  padding-top: var(--logo-top);
  color: var(--text-default);
}

.np8__logo svg {
  width: 100%;
  height: auto;
}

/* components/intro.css */
/* Вступление на главной (Фигма: about в 727:28978). Heading Small с 1440, Heading XS на планшете, Body Large на телефоне */
.np8__intro {
  padding: 0 var(--page-px) var(--space-800);
}

.np8__intro-text {
  max-width: 1324px;
  font-size: var(--intro-text-size);
  line-height: var(--intro-text-lh);
}

/* components/projects.css */
/* Таблица проектов (Фигма: table, 224:13137; строка — line table, 224:12889).
   До 1440 — строка столбиком (название, метка, описание), с 1440 — колонки по 448, с 1920 — плюс «Задачи» 238 */
.np8__projects {
  padding: var(--table-pt) var(--page-px) var(--table-pb);
  font-size: var(--table-text-size);
  line-height: var(--table-text-lh);
}

/* В Фигме обводка внутри блока — линия входит в высоту строки, поэтому нижний отступ на 1 px меньше */
.np8__projects-head {
  display: flex;
  padding-bottom: calc(var(--space-200) - 1px);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-static-gray);
}

.np8__project {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  padding: var(--space-400) 0 calc(var(--space-800) - 1px);
  border-bottom: 1px solid var(--border-default);
}

/* Строка-ссылка на кейс: кликабельна целиком (растянутая ссылка), выглядит как обычный текст */
.np8__project:has(.np8__project-link) {
  position: relative;
}

.np8__project-link {
  color: inherit;
  text-decoration: none;
}

.np8__project-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* У ячеек line table справа 8 на всех ширинах (Space/200) */
.np8__projects-cell {
  padding-right: var(--space-200);
}

.np8__projects-cell.Title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-100);
}

/* Колонки «Описание»/«Подробности» видны с 1440 (.Desktop), «Задачи» — с 1920 (.Wide) */
.np8__projects-cell.Desktop,
.np8__projects-cell.Wide {
  display: none;
}

@media (min-width: 1440px) {
  .np8__projects-head,
  .np8__project {
    display: grid;
    grid-template-columns: 448px 1fr 1fr;
    gap: var(--space-800);
  }

  .np8__projects-cell.Desktop {
    display: block;
  }
}

@media (min-width: 1920px) {
  .np8__projects-head,
  .np8__project {
    grid-template-columns: 448px 238px 1fr 1fr;
  }

  .np8__projects-cell.Wide {
    display: block;
  }
}

/* Наведение на строку: остальные строки серые, жёлтый маркер остаётся, текст в нём тоже сереет */
@media (hover: hover) {
  .np8__projects-list:has(.np8__project:hover) .np8__project:not(:hover),
  .np8__projects-list:has(.np8__project:hover) .np8__project:not(:hover) .np8__mark {
    color: var(--text-static-gray);
  }
}

/* components/case.css */
/* Страница кейса (Фигма: newproject8.site/cleaning, 741:44249 и др.).
   Заголовок капсом и жирным (в Фигме Bold поверх стиля, как и у заголовков секций): Title Hero с 1440, Heading Large на планшете, Heading Base на телефоне.
   Секции: отступ сверху 48 с 1440 (16 уже), снизу 32, у последней 96; текст → картинки 48 (на телефоне 32) */
.np8__case-hero {
  padding: var(--space-400) var(--page-px);
}

.np8__case-title {
  max-width: var(--case-title-w);
  font-size: var(--case-title-size);
  line-height: var(--case-title-lh);
  font-weight: 700;
  text-transform: uppercase;
  /* «Клининговой» шире экрана на телефоне — в слове мягкие переносы (­), срабатывают только там, где слово не влезает */
  hyphens: manual;
}

.np8__case-section {
  display: flex;
  flex-direction: column;
  gap: var(--case-images-gap-top);
  padding: var(--case-section-pt) var(--page-px) var(--space-800);
}

.np8__case-section.First {
  padding-top: var(--space-400);
}

.np8__case-section.Last {
  padding-bottom: var(--space-2400);
}

.np8__case-head {
  display: flex;
  flex-direction: column;
  gap: var(--case-head-gap);
}

.np8__case-h2 {
  font-size: var(--case-h2-size);
  line-height: var(--case-h2-lh);
  font-weight: 700;
}

.np8__case-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  font-size: var(--case-text-size);
  line-height: var(--case-text-lh);
}

.np8__case-images {
  display: flex;
  flex-direction: column;
  gap: var(--case-images-gap);
}

.np8__case-picture img {
  width: 100%;
  max-width: 1280px;
  height: auto;
}

/* components/footer.css */
/* Подвал (Фигма: footer, 153:11028). Колонки 448 и 480 через 32 с 1024, уже — одна под другой через 32.
   Группы строк через 12 (на телефоне 8). Штамп прижат к правому нижнему углу */
.np8__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-200);
  padding: var(--footer-pt) var(--page-px) var(--space-800);
  font-size: var(--footer-text-size);
  line-height: var(--footer-text-lh);
}

.np8__footer-cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-800);
}

.np8__footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--footer-group-gap);
  width: var(--footer-col-w);
}

/* Строка из нескольких ссылок; может быть шире колонки (на телефоне колонка 175) */
.np8__footer-row {
  display: flex;
  width: max-content;
  gap: var(--space-100);
}

.np8__footer-row.Lang {
  gap: var(--space-200);
}

/* Столбик ссылок: строки вплотную */
.np8__footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Штамп — ссылка на главную */
.np8__stamp {
  display: block;
  flex: none;
  width: var(--stamp-w);
  color: var(--text-default);
  text-decoration: none;
}

.np8__stamp svg {
  width: 100%;
  height: auto;
}

/* Мобильный вариант подвала (Фигма: footer size=mobile): «Стать клиентом» → «Резюме» и RU → EN через 4 */
@media (max-width: 743.98px) {
  .np8__footer-links.Pair,
  .np8__footer-row.Lang {
    gap: var(--space-100);
  }
}

/* С 1024 колонки в ряд, вторая — 480 */
@media (min-width: 1024px) {
  .np8__footer-cols {
    flex-direction: row;
  }

  .np8__footer-col + .np8__footer-col {
    width: 480px;
  }
}