/* =============================================================================
   СЕМЕЙСТВО ITF — светлая стилистика по образцу kazakhmys.kz
   Канонический слой. Копируется в каждый сайт как css/family.css БЕЗ ИЗМЕНЕНИЙ.
   Единственное, что задаёт сайт, — три переменные акцента в своём css (ниже :root).

   Замеры референса: /Users/alimzan/Desktop/ClaudeCode/KAZAKHMYS-REF.md
   Три сознательных отличия от референса, все — в пользу читаемости:
     · приглушённый текст #666B6D вместо #898D8E (у референса 2.89:1 — не читается)
     · акценты затемнены до ≥4.5:1 (медь референса #C69461 даёт 2.31:1)
     · интерлиньяж прозы 1.55 вместо 1.4 (у нас длинные русские абзацы)
   ============================================================================= */

:root{
  /* ── нейтрали: общие для всех шести сайтов ── */
  --sand:#F5EDE0;          /* песочный лист */
  --sand-2:#EEE6DE;        /* вложенная плашка на песке */
  --sand-3:#FBF8F3;        /* тёплый почти-белый */
  --white:#FFFFFF;         /* белый лист */
  --ink:#24282A;           /* заголовки       12.80:1 на песке */
  --ink-2:#101314;         /* максимальный текст */
  --muted:#666B6D;         /* подписи, мета    4.65:1 на песке */
  --line:rgba(36,40,42,.12);
  --line-2:rgba(36,40,42,.22);
  --line-w:rgba(255,255,255,.28);   /* линии поверх фотографии */

  /* ── акцент: ПЕРЕОПРЕДЕЛЯЕТСЯ КАЖДЫМ САЙТОМ ── */
  --accent:#8C6219;
  --accent-h:#734E0F;
  --accent-soft:rgba(140,98,25,.10);

  /* ── типографика ── */
  --font:"Open Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --fs-h1:clamp(32px,5.4vw,72px);
  --fs-h2:clamp(24px,3.4vw,48px);
  --fs-h3:clamp(19px,1.7vw,26px);
  --fs-lead:clamp(17px,1.5vw,22px);
  --fs-body:clamp(16px,1.15vw,18px);
  --fs-sm:15px;
  --fs-xs:13px;
  --lh-h:1.16;
  --lh-lead:1.42;
  --lh-body:1.55;
  --ls-h:-0.02em;

  /* ── раскладка ── */
  --wrap:1320px;
  --pad:clamp(20px,4.2vw,60px);
  --sec-pt:clamp(48px,5.5vw,80px);
  --sec-pb:clamp(72px,12.5vw,180px);
  --gap:clamp(16px,1.9vw,28px);

  /* ── форма ── */
  --r-sheet:clamp(28px,5.5vw,80px);   /* наезжающий лист секции */
  --r-card:24px;
  --r-btn:16px;
  --r-sm:12px;

  /* ── тени: тёплые, без чёрного ── */
  --sh-sheet:0 -2px 12px rgba(60,33,2,.12);
  --sh-card:0 8px 52px rgba(60,33,2,.10);
  --sh-card-h:0 14px 60px rgba(60,33,2,.16);
  --sh-modal:0 30px 90px rgba(60,33,2,.22);
  --scrim:rgba(36,40,42,.55);          /* подложка модального окна */

  /* ── состояния: один смысл — один цвет на все шесть сайтов ──
     До этого ошибка формы была окрашена в #B3261E, #A32017 и #C0362C
     на разных сайтах. Оба значения проверены: 5.60 и 5.45 на песке. */
  --danger:#B3271E;
  --ok:#1B6E2E;

  /* ── z-index: имена, а не случайные числа ── */
  --z-raise:3;        /* мелкий подъём внутри блока (кнопка закрытия в окне) */
  --z-subnav:40;      /* липкое подменю раздела, ниже шапки */
  --z-drawer:55;      /* мобильная шторка, выезжает под шапкой */
  --z-sticky:60;      /* шапка сайта */
  --z-scrim:80;       /* затемнение под модальным окном */
  --z-modal:90;       /* само окно */
  --z-toast:100;      /* уведомление */
  --z-progress:120;   /* полоса прочитанного, поверх всего */

  /* ── движение ── */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-col:.25s ease-in-out;
  --t-move:.3s var(--ease);
  --t-slow:.5s var(--ease);            /* смена кадра, раскрытие фото */
}

/* ─────────────────────────── база ─────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink-2);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4{
  margin:0;
  color:var(--ink);
  font-weight:700;
  line-height:var(--lh-h);
  letter-spacing:var(--ls-h);
  text-wrap:balance;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-0.01em}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* проза: ограничить строку, иначе на 1320px читать невозможно */
.prose{max-width:72ch}
.prose p{margin-bottom:1.05em}

/* ───────────────────── листы секций ─────────────────────
   Приём референса: каждая секция — лист, наезжающий на предыдущий
   скруглённым верхом. Цвета чередуются белый ↔ песок. */

.sheet{
  position:relative;
  z-index:1;
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding-top:var(--sec-pt);
  padding-bottom:var(--sec-pb);
  margin-top:calc(var(--r-sheet) * -1);
  box-shadow:var(--sh-sheet);
}
.sheet--white{background:var(--white)}
.sheet--sand {background:var(--sand)}
/* первый лист после героя не должен получать отрицательный отступ дважды */
.sheet--first{margin-top:calc(var(--r-sheet) * -1)}
/* лист без наезда — когда сверху ничего нет */
.sheet--flat{margin-top:0;border-radius:0;box-shadow:none}
/* последний лист перед футером: подрезать нижний отступ */
.sheet--tight{padding-bottom:var(--sec-pt)}

.sec__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap);margin-bottom:clamp(24px,3vw,48px);flex-wrap:wrap;
}
.sec__head h2{margin:0}

/* ─────────────────────────── кнопки ───────────────────────────
   Обводная пилюля со стрелкой. Заливается акцентом на ховере. */

.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:48px;padding:13px 22px;
  border:1px solid var(--accent);border-radius:var(--r-btn);
  background:transparent;color:var(--accent);
  font:700 14px/1 var(--font);text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;
  transition:color var(--t-col),background-color var(--t-col),border-color var(--t-col);
}
.btn::after{content:"→";font-size:17px;line-height:1;transition:transform var(--t-move)}
.btn:hover{background:var(--accent);color:#fff}
.btn:hover::after{transform:translateX(4px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:var(--accent-h);border-color:var(--accent-h)}

.btn--ink{border-color:var(--ink);color:var(--ink)}
.btn--ink:hover{background:var(--ink);color:#fff}

/* поверх фотографии */
.btn--on-photo{border-color:rgba(255,255,255,.75);color:#fff}
.btn--on-photo:hover{background:#fff;color:var(--ink);border-color:#fff}

.btn--plain::after{content:none}

/* круглая стрелка карусели */
.rnd{
  width:44px;height:44px;flex:0 0 44px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--accent);border-radius:50%;
  background:transparent;color:var(--accent);cursor:pointer;
  font-size:17px;line-height:1;
  transition:color var(--t-col),background-color var(--t-col);
}
.rnd:hover{background:var(--accent);color:#fff}
.rnd[disabled]{opacity:.35;cursor:default}
.rnd:disabled:hover{background:transparent;color:var(--accent)}

/* ─────────────────────── фото-герой ───────────────────────
   Настоящая фотография во всю ширину, белый заголовок слева-внизу.
   Затемнение — снизу и слева, чтобы фото оставалось светлым сверху. */

.phero{
  position:relative;
  min-height:clamp(460px,78svh,860px);
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.phero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.phero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(16,19,20,.72) 0%,rgba(16,19,20,.34) 38%,rgba(16,19,20,0) 68%),
    linear-gradient(to right,rgba(16,19,20,.52) 0%,rgba(16,19,20,0) 56%);
}
.phero__in{position:relative;width:100%;padding-bottom:clamp(48px,7vw,110px)}
/* Подложка под сам текст. Общего затемнения мало: на репортажной съёмке
   попадаются выбитые в белизну пятна (софиты, небо), и белый заголовок на них
   опускается до 1.6:1. Эта полоса привязана к текстовому блоку, а не ко всему
   кадру, — верх фотографии остаётся живым. */
.phero__in::before{
  content:"";position:absolute;left:0;right:0;bottom:0;top:-8%;z-index:0;
  background:linear-gradient(to top,
    rgba(16,19,20,.80) 0%,rgba(16,19,20,.66) 55%,rgba(16,19,20,.34) 88%,rgba(16,19,20,0) 100%);
  pointer-events:none;
}
.phero__in>*{position:relative;z-index:1}
.phero__kick{
  display:inline-block;margin-bottom:18px;
  color:#fff;font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  padding:8px 16px;border:1px solid var(--line-w);border-radius:999px;
  backdrop-filter:blur(3px);
}
.phero h1{color:#fff;max-width:17ch}
.phero__sub{
  color:rgba(255,255,255,.94);max-width:56ch;
  font-size:var(--fs-lead);line-height:var(--lh-lead);
  margin:clamp(16px,2vw,26px) 0 clamp(24px,3vw,36px);
}
.phero__cta{display:flex;flex-wrap:wrap;gap:12px}

/* герой без фотографии — тёплый песочный, тот же ритм */
.thero{
  background:linear-gradient(180deg,var(--sand-3) 0%,var(--sand) 100%);
  padding-top:clamp(64px,9vw,150px);padding-bottom:clamp(56px,8vw,120px);
}
.thero h1{max-width:18ch}
.thero__sub{
  color:var(--muted);max-width:60ch;
  font-size:var(--fs-lead);line-height:var(--lh-lead);
  margin:clamp(16px,2vw,26px) 0 clamp(24px,3vw,36px);
}

/* ───────────────────── шапка страницы (внутренние) ───────────────────── */

.phead{background:var(--sand);padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(40px,6vw,96px)}
.crumbs{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:var(--fs-sm);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none;transition:color var(--t-col)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.55}
.phead__lead{
  max-width:66ch;margin-top:clamp(14px,1.8vw,22px);
  font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600;color:var(--ink);
}

/* ─────────────────────── плитки-цифры ───────────────────────
   Фактурная фотография как фон, поверх — крупное белое число. */

.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap)}
.fig{
  position:relative;overflow:hidden;
  border-radius:var(--r-card);
  min-height:clamp(190px,17vw,230px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,2.2vw,30px);
  background:var(--accent);
  isolation:isolate;
}
.fig__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .6s var(--ease);
}
/* затемнение прижато книзу: число и подпись всегда на тёмном, верх фото остаётся живым */
.fig::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(16,19,20,.74) 0%,rgba(16,19,20,.52) 46%,rgba(16,19,20,.20) 100%);
}
.fig:hover .fig__img{transform:scale(1.05)}
.fig__n{
  color:#fff;font-weight:700;letter-spacing:-0.03em;line-height:1;
  font-size:clamp(34px,4.2vw,56px);
  font-variant-numeric:tabular-nums;
}
.fig__rule{width:56px;height:2px;background:rgba(255,255,255,.85);margin:18px 0 14px}
.fig__l{color:#fff;font-size:var(--fs-sm);line-height:1.35;max-width:24ch}

/* ─────────────────────────── карточки ─────────────────────────── */

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--gap)}

.card{
  display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:transform var(--t-move),box-shadow var(--t-move),border-color var(--t-col);
  /* Заголовок карточки должен считаться от ширины САМОЙ карточки, а не от окна:
     на 1440px --fs-h3 даёт 24.5px, а колонка бывает 328px — русские слова
     («профессиональные», «цифровизация») встают по одному в строку. */
  container-type:inline-size;
}
.sheet--white .card{background:var(--sand-3)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-card);border-color:transparent}
.card__ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sand-2)}
.card__ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card__ph img{transform:scale(1.04)}
.card__b{padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:10px;flex:1}
.card__d{color:var(--muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.card__t{
  font-size:clamp(17px,5.3cqi,24px);   /* от ширины карточки; см. container-type у .card. 5.3cqi подобран так, чтобы в узкую колонку вставало 3 русских слова в строку, а не 1 */
  font-weight:700;color:var(--ink);line-height:1.28;letter-spacing:-0.01em;
  text-wrap:balance;overflow-wrap:break-word;
}
@supports not (font-size:1cqi){ .card__t{font-size:var(--fs-h3)} }
.card__p{color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.card__more{margin-top:auto;padding-top:6px;color:var(--accent);font-weight:700;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em}

/* Сетка новостей как у референса: ряд 1 — крупная карточка (2 колонки) + одна обычная,
   ряд 2 — три обычные. Фиксированные три колонки, иначе auto-fit рвёт ряды. */
.cards--news{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.cards--news .card--lead{grid-column:span 2}

.card--lead{flex-direction:row;align-items:stretch}
.card--lead .card__ph{flex:0 0 46%;aspect-ratio:auto;min-height:100%}
.card--lead .card__b{justify-content:center;padding:clamp(22px,2.6vw,38px);gap:12px}
.card--lead .card__t{font-size:clamp(20px,1.85vw,27px);text-wrap:balance}
.card--lead .card__p{font-size:var(--fs-sm)}

@media (max-width:1080px){
  .cards--news{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards--news .card--lead{grid-column:span 2}
}
@media (max-width:760px){
  .cards--news{grid-template-columns:1fr}
  .cards--news .card--lead{grid-column:span 1}
  .card--lead{flex-direction:column}
  .card--lead .card__ph{flex:none;aspect-ratio:16/10;min-height:0}
}

/* ──────────────────────── строки-реестры ────────────────────────
   Для списков членов, документов, филиалов — там, где карточки лишние. */

.ledger{border-top:1px solid var(--line)}
.lrow{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(12px,1.6vw,22px);
  padding:16px 4px;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:background-color var(--t-col),padding-left var(--t-move);
}
a.lrow:hover{background:var(--accent-soft);padding-left:14px}
.lrow b{font-weight:600;color:var(--ink);line-height:1.35}
.lrow .meta{color:var(--muted);font-size:var(--fs-sm);text-align:right}
.tag{
  display:inline-block;padding:5px 11px;border-radius:999px;
  background:var(--accent-soft);
  /* Текст — тёмная ступень акцента, а не сам акцент: на собственной подложке
     чипа акцент теряет контраст (у ГПСК 4.12:1, у КазГМИ 4.06:1 при норме 4.5).
     С --accent-h худший случай в семействе — 5.29:1. */
  color:var(--accent-h);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;
  min-width:52px;text-align:center;   /* PDF и DOC разной ширины — иначе строки реестра не выравниваются */
}
@media (max-width:640px){
  .lrow{grid-template-columns:auto 1fr;row-gap:6px}
  .lrow .meta{grid-column:1/-1;text-align:left}
}

/* ─────────────────────── таймлайн истории ─────────────────────── */

.tl{display:grid;grid-template-columns:minmax(0,46%) 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.tl__ph{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;background:var(--sand-2)}
.tl__ph img{width:100%;height:100%;object-fit:cover}
.tl__y{font-size:clamp(56px,8vw,110px);font-weight:700;line-height:.9;letter-spacing:-0.04em;color:var(--ink)}
.tl__t{margin:16px 0 10px;font-weight:700;color:var(--ink)}
.tl__p{color:var(--muted);max-width:56ch}
.tlnav{display:flex;align-items:center;gap:10px;margin-top:clamp(26px,3vw,44px);overflow-x:auto;padding-bottom:10px}
.tlnav button{
  border:0;background:transparent;cursor:pointer;padding:6px 2px;
  color:var(--muted);font:700 14px/1 var(--font);font-variant-numeric:tabular-nums;
  border-bottom:2px solid transparent;transition:color var(--t-col),border-color var(--t-col);
}
.tlnav button:hover{color:var(--ink)}
.tlnav button[aria-current="true"]{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:820px){ .tl{grid-template-columns:1fr} }

/* ────────────────────────── галерея ────────────────────────── */

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap)}
.gal__i{
  border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;
  background:var(--sand-2);border:0;padding:0;cursor:pointer;
}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal__i:hover img{transform:scale(1.05)}

/* ──────────────────────── шапка сайта ──────────────────────── */

.hdr{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--sand);
  transition:background-color var(--t-col),box-shadow var(--t-col);
}
.hdr--float{background:transparent}
.hdr--stuck{background:rgba(245,237,224,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,2vw,34px);min-height:88px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{height:40px;width:auto;object-fit:contain}
.brand b{font-size:20px;font-weight:700;letter-spacing:-0.01em;line-height:1}
.brand small{display:block;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;margin-top:4px}
.nav{display:flex;gap:clamp(12px,1.6vw,26px);margin-left:auto}
.nav a{
  text-decoration:none;color:var(--ink);font-size:var(--fs-sm);font-weight:600;
  padding:6px 0;border-bottom:2px solid transparent;
  transition:color var(--t-col),border-color var(--t-col);white-space:nowrap;
}
.nav a:hover{color:var(--accent)}
.nav a.on{color:var(--accent);border-bottom-color:var(--accent)}
.nav-more{position:relative;display:flex;align-items:center}
.nav-more>button{border:0;background:none;color:var(--ink);cursor:pointer;font:600 var(--fs-sm)/1 var(--font);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--t-col),border-color var(--t-col)}
.nav-more>button::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--t-move)}
.nav-more:hover>button,.nav-more:focus-within>button,.nav-more--on>button{color:var(--accent);border-bottom-color:var(--accent)}
.nav-more:hover>button::after,.nav-more:focus-within>button::after{transform:rotate(225deg);margin-bottom:-1px}
.nav-more__menu{position:absolute;top:calc(100% + 14px);right:-14px;z-index:4;display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:0 18px;width:min(540px,calc(100vw - 40px));padding:14px 18px;background:var(--sand);border:1px solid var(--line);box-shadow:0 18px 40px rgba(26,38,52,.14);opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity var(--t-col),transform var(--t-move),visibility var(--t-col)}
.nav-more__menu::before{content:"";position:absolute;top:-7px;right:23px;width:12px;height:12px;background:var(--sand);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.nav-more:hover .nav-more__menu,.nav-more:focus-within .nav-more__menu{opacity:1;visibility:visible;transform:none}
.nav-more__menu a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.hdr__r{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav+.hdr__r{margin-left:clamp(12px,2vw,28px)}
.hdr-search{width:42px;height:42px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:color var(--t-col),border-color var(--t-col),background-color var(--t-col)}
.hdr-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hdr-search:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.hdr-search:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.lang{display:flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.lang button{
  border:0;background:transparent;cursor:pointer;
  padding:8px 13px;font:700 12px/1 var(--font);color:var(--muted);
  transition:color var(--t-col),background-color var(--t-col);
}
.lang button:hover{color:var(--ink)}
.lang button.on{background:var(--accent);color:#fff}

.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;
  background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.burger span{display:block;width:17px;height:2px;background:var(--ink);transition:transform var(--t-move),opacity var(--t-col)}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:88px 0 auto;z-index:var(--z-drawer);
  background:var(--sand);border-bottom:1px solid var(--line);
  padding:12px var(--pad) 26px;
  display:none;flex-direction:column;gap:2px;
  max-height:calc(100svh - 88px);overflow-y:auto;
}
.drawer.on{display:flex}
.drawer a{
  text-decoration:none;color:var(--ink);font-size:17px;font-weight:600;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.drawer-more{border-bottom:1px solid var(--line)}
.drawer-more summary{list-style:none;cursor:pointer;color:var(--ink);font-size:17px;font-weight:600;padding:14px 0}
.drawer-more summary::-webkit-details-marker{display:none}
.drawer-more summary::after{content:"+";float:right;color:var(--accent);font-size:22px;font-weight:400;line-height:1}
.drawer-more[open] summary::after{content:"−"}
.drawer-more a{font-size:15px;padding:11px 0 11px 16px}
.drawer .btn{margin-top:18px;justify-content:space-between}

@media (max-width:1080px){
  .nav{display:none}
  .burger{display:inline-flex}
}
@media (max-width:520px){
  /* подпись под логотипом переносится в две строки и раздувает шапку */
  .brand small{display:none}
  .hdr__in{min-height:72px}
  .drawer{inset-block-start:72px;max-height:calc(100svh - 72px)}
}

/* ── тач-цели на телефоне ──
   Переключатель языков давал 36×28, ссылка-бренд 106×36 — меньше 44×44.
   На мыши 28px хватает, поэтому правило только для узких экранов. */
@media (max-width:1080px){
  .lang button{min-height:44px;min-width:44px;padding:8px 12px}
  .hdr-search{width:44px;height:44px}
  .brand{min-height:44px}
  .tlnav button{min-height:44px;padding:6px 8px}
}

/* ── читаемость мелкого текста на телефоне ──
   --fs-sm обслуживает не только подписи, но и абзацы карточек и .note:
   15px для основного текста на 375px мало. */
@media (max-width:640px){
  :root{--fs-sm:16px;--fs-xs:13.5px}
}

/* ──────────────────────── подвал ──────────────────────── */

.foot{
  background:var(--sand);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  margin-top:calc(var(--r-sheet) * -1);
  position:relative;z-index:1;
  padding-top:clamp(44px,6vw,88px);
  box-shadow:var(--sh-sheet);
}
.foot__top{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(24px,3vw,52px);
  padding-bottom:clamp(32px,4vw,60px);
}
.foot__b b{display:block;font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-0.01em}
.foot__b p{color:var(--muted);font-size:var(--fs-sm);margin-top:12px;max-width:38ch}
.foot__col{display:flex;flex-direction:column;gap:9px}
.foot__h{
  color:var(--ink);font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;margin:0 0 6px;
}
.foot__col a,.foot__col p{
  color:var(--muted);font-size:var(--fs-sm);text-decoration:none;margin:0;
  transition:color var(--t-col);
}
.foot__col a:hover{color:var(--accent)}
.foot__bot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 0 26px;border-top:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-xs);
}

/* ─────────────────────── появление при скролле ───────────────────────
   Контент виден по умолчанию; .reveal только смягчает вход.
   Если JS не отработал — .reveal:not(.in) всё равно останется видимым
   благодаря фолбэку ниже. */

.reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  /* ПРЕДОХРАНИТЕЛЬ. Если наблюдатель не сработал — упал скрипт, отключён JS,
     страница отрисована без выполнения кода — содержимое обязано появиться само.
     Иначе секция уезжает в прод пустой, и по геометрии это не ловится. */
  animation:reveal-failsafe 0s linear 5s forwards;
}
@keyframes reveal-failsafe{to{opacity:1;transform:none}}
.reveal.in{opacity:1;transform:none;animation:none}
/* Правило на html:not(.js) намеренно НЕ используется: три сайта прописывают
   class="js" прямо в разметке, поэтому оно ничего не гарантирует и лишь
   отключает анимацию у тех двух, где класса нет. Гарантию даёт предохранитель выше. */
@media (scripting:none){ .reveal{opacity:1;transform:none;animation:none} }

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

/* ─────────────────────── мобильная карусель ───────────────────────
   Плитки-цифры и карточки на узком экране едут вбок, как у референса. */

@media (max-width:640px){
  .figs--swipe{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    scrollbar-width:none;
  }
  .figs--swipe::-webkit-scrollbar{display:none}
  .figs--swipe>.fig{flex:0 0 82%;scroll-snap-align:start}
}

/* ─────────────────────── мелочи ─────────────────────── */

.kick{
  display:inline-block;color:var(--accent);
  font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px;
}
.note{color:var(--muted);font-size:var(--fs-sm);max-width:70ch}
hr{border:0;border-top:1px solid var(--line);margin:clamp(28px,4vw,56px) 0}

::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}