/* =========================================================================
   Токены, сброс, модульная типографика (Modular Scale 1.25 — Major Third),
   пропорциональная шкала отступов (Правило близости), сетка, служебные классы.
   Цвета — из «соотношение цветов.svg» (графит / бирюза / светлый) и «паттерн.svg» (7 цветов полос).
   Градиентов нет нигде: только плоские цвета.
   ========================================================================= */
:root {
  /* основа: графит — большая часть сайта, светлые блоки — некоторые, бирюзовые — самые важные */
  --bg: #282828;
  --bg-2: #2F2F2F;            /* карточки и поля на графите */
  --bg-3: #363636;            /* наведение на карточках */
  --paper: #FFF8EF;           /* «белые» блоки */
  --paper-2: #F4ECE1;         /* поля и карточки на светлом */
  --ink: #282828;             /* текст на светлом */
  --teal: #438C85;            /* бирюза: логотип, главные кнопки, бирюзовые блоки */
  --teal-hover: #3A7A74;

  /* паттерн */
  --p-burgundy: #58091C;
  --p-rust: #A64E1E;
  --p-pink: #C96B84;
  --p-teal: #438C85;
  --p-indigo: #113043;
  --p-night: #131623;
  --p-sand: #C1A178;

  --fg: #FFF8EF;
  --fg-2: rgba(255, 248, 239, 0.68);
  --fg-3: rgba(255, 248, 239, 0.44);
  --line: rgba(255, 248, 239, 0.14);
  --line-2: rgba(255, 248, 239, 0.26);
  --ink-2: rgba(40, 40, 40, 0.68);
  --ink-3: rgba(40, 40, 40, 0.46);
  --line-ink: rgba(40, 40, 40, 0.14);
  --line-ink-2: rgba(40, 40, 40, 0.28);

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* =========================================================================
     1. МОДУЛЬНАЯ ШКАЛА ШРИФТОВ (Modular Scale — коэффициент 1.25, Major Third, база 16px)
     ========================================================================= */
  --fs-xs: 0.8rem;                                       /* 12.8px */
  --fs-sm: 0.889rem;                                     /* 14.2px */
  --fs-base: 1rem;                                       /* 16px */
  --fs-md: clamp(1.125rem, 1.35vw, 1.25rem);             /* 18px → 20px */
  --fs-lg: clamp(1.25rem, 1.65vw, 1.563rem);             /* 20px → 25px */
  --fs-xl: clamp(1.563rem, 2.15vw, 1.953rem);            /* 25px → 31.25px */
  --fs-2xl: clamp(1.953rem, 2.75vw, 2.441rem);           /* 31.25px → 39.06px */
  --fs-3xl: clamp(2.25rem, 3.3vw, 3.052rem);             /* 36px → 48.83px */
  --fs-4xl: clamp(2.25rem, 3.7vw, 3.45rem);              /* 36px → 55.2px: все двухстрочные заголовки секций помещаются без переноса 3-й строки */

  /* Иерархия интерлиньяжа (line-height) */
  --lh-display: 1.05;         /* H2 (.stitle), крупные цифры */
  --lh-tight: 1.15;           /* H3, заголовки модалок и баннеров */
  --lh-snug: 1.22;            /* H4, заголовки карточек (.reason__title, .way__title) */
  --lh-body: 1.5;             /* основной наборный текст */
  --lh-relaxed: 1.56;         /* длинные текстовые блоки (.stext) */

  /* =========================================================================
     2. ПРОПОРЦИОНАЛЬНАЯ ШКАЛА ОТСТУПОВ (Spacing Scale & Правило близости)
     ========================================================================= */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: clamp(20px, 1.8vw, 24px);
  --sp-6: clamp(24px, 2.3vw, 32px);
  --sp-7: clamp(36px, 3.8vw, 48px);
  --sp-8: clamp(48px, 5.2vw, 64px);
  --sp-9: clamp(60px, 6.5vw, 84px);
  --sp-10: clamp(80px, 8.5vw, 120px);

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1360px;
  --sp: var(--sp-10);
  --inset: clamp(8px, 1.4vw, 24px);
  --cut: clamp(44px, 6.4vw, 104px);
  --cutx: calc(var(--cut) * 0.3025);
  --skew: -16.82deg;
  --header-h: 84px;
  --header-h-compact: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}
@media (max-width: 1023px) { :root { --header-h: 72px; --header-h-compact: 64px; } }
@media (max-width: 767px) { :root { --header-h: 64px; --header-h-compact: 60px; } }

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); font-size: 16px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
p, li, dd, figcaption { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--teal); color: var(--fg); }
:focus-visible { outline: 2px solid var(--p-sand); outline-offset: 3px; }
.panel :focus-visible { outline-color: var(--teal); }

/* ---------- Сетка ---------- */
.container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); }

main { position: relative; z-index: 1; }
.section { position: relative; padding: var(--sp-10) 0; }

/* Светлая и бирюзовая панели */
.panel {
  position: relative;
  margin: 0 var(--inset);
  background: var(--paper);
  color: var(--ink);
  clip-path: polygon(0 0, calc(100% - var(--cutx)) 0, 100% var(--cut), 100% 100%, var(--cutx) 100%, 0 calc(100% - var(--cut)));
}
.panel--teal { background: var(--teal); color: var(--fg); }
.panel + .panel, .section + .panel, .panel + .section { margin-top: 0; }

/* ---------- Базовые классы типографики по модульной шкале ---------- */
.stitle {
  font-size: var(--fs-4xl);
  line-height: var(--lh-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.stext {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  max-width: 36em;
  text-wrap: pretty;
}
.panel .stext { color: var(--ink-2); }
.panel--teal .stext { color: var(--fg); }
.h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lead {
  font-size: var(--fs-md);
  line-height: 1.4;
}
.muted { color: var(--fg-2); }
.panel .muted { color: var(--ink-2); }
.cap {
  font-size: var(--fs-xs);
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Метка секции: «01 / О ПРОЕКТЕ» */
.slabel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-2);
}
.panel .slabel { color: var(--ink-2); }
.panel--teal .slabel { color: var(--fg); }
.slabel__num { color: var(--fg); font-variant-numeric: tabular-nums; }
.panel .slabel__num { color: var(--ink); }
.panel--teal .slabel__num { color: var(--fg); }
.slash { width: 9px; height: 15px; color: var(--teal); flex: 0 0 auto; }
.panel--teal .slash { color: var(--p-night); }

/* Заголовок секции по правилу близости */
.shead {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-6);
  row-gap: var(--sp-5);
  align-items: start;
  margin-bottom: var(--sp-7);
}
.shead__main {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}
.shead__side {
  grid-column: 8 / -1;
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  padding-top: calc(var(--fs-xs) + var(--sp-3));
}
.shead .slabel { grid-column: 1 / -1; }
.shead .stitle { grid-column: 1 / span 7; }
.shead .stext { grid-column: 8 / -1; }
.shead__main .slabel,
.shead__main .stitle,
.shead__side .stext { grid-column: auto; }

@media (max-width: 1023px) {
  .shead__main, .shead .stitle { grid-column: 1 / -1; }
  .shead__side, .shead .stext { grid-column: 1 / span 10; padding-top: 0; }
}
@media (max-width: 767px) {
  .shead__side, .shead .stext { grid-column: 1 / -1; }
}

/* Плейсхолдер текста из данных: [так] */
.tbd { color: var(--p-sand); }
.panel .tbd { color: var(--p-rust); }

/* ---------- Служебное ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 1000; padding: var(--sp-2) var(--sp-4); background: var(--paper); color: var(--ink); transition: top 0.2s; }
.skip:focus { top: 12px; }
.split-line { padding-bottom: 0.06em; margin-bottom: -0.06em; }

html.js:not(.is-ready) [data-split],
html.js:not(.is-ready) [data-reveal],
html.js:not(.is-ready) [data-stagger] > * { visibility: hidden; }
html.no-motion [data-split], html.no-motion [data-reveal], html.no-motion [data-stagger] > * { visibility: visible !important; }
html.is-locked, html.is-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}