/* ═══════════════════════════════════════════════
   BRAND TOKENS — замените здесь при смене цветов
   ═══════════════════════════════════════════════ */
:root {
  --brand-1:   #0f1a0a;   /* очень тёмный (почти чёрный с коричневым)  */
  --brand-2:   #1a2510;   /* чуть светлее                              */
  --brand-3:   #243318;   /* акцентный тёмно-зелёный/коричневый        */
  --accent:    #e07800;   /* оранжевый из логотипа                     */
  --accent-lt: #f08e1a;   /* светлый оранжевый                         */
  --white:     #ffffff;
  --text:      #e8e0d0;
  --muted:     #9a8e7a;
  --border:    rgba(255,255,255,.08);
  --section-pad: 100px 0;
}

/* Шрифты — свои файлы из fonts/, без обращения к Google (скачаны с Google Fonts:
   Montserrat v31, Open Sans v44, лицензия OFL). Шрифты переменные — один файл на алфавит
   покрывает все начертания; браузер грузит только тот алфавит, что есть на странице. */
@font-face { font-family: 'Montserrat'; font-weight: 400 800; font-display: swap;
  src: url(fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-weight: 400 800; font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-weight: 400 600; font-display: swap;
  src: url(fonts/opensans-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Open Sans'; font-weight: 400 600; font-display: swap;
  src: url(fonts/opensans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* «Виды бурения» — без отступа сверху: по ссылке из меню заголовок уходил под шапку (72px).
   Запас на 24px сдвига анимации появления — до клика блок ещё не показан */
#services { scroll-margin-top: 120px; }
body {
  font-family: 'Open Sans', sans-serif;
  background: var(--brand-1);
  color: var(--text);
  line-height: 1.75;
}

/* ── LAYOUT ── */
.container { max-width: 1360px; margin: 0 auto; padding: 0 28px; }   /* было 1200 — на 1920 px оставалось много пустоты (13.10.2026) */

/* ── TYPOGRAPHY HELPERS ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 28px; height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.18;
  margin-bottom: 20px;
}
.section-lead {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 640px;
  margin-bottom: 56px;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all .25s;
}
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-lt); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(224,120,0,.35); }

/* ════════════════════════════════
   HEADER
════════════════════════════════ */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(15,26,10,.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(224,120,0,.18);
  transition: background .3s;
}
header.scrolled { background: rgba(10,18,6,.99); }
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }

/* Логотип компании */
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-svg { display: block; height: 40px; width: auto; }
/* В китайской версии — логотип с латинской надписью (кириллица партнёрам нечитаема) */
.logo-latin { display: none; }
html[lang="zh-CN"] .logo-cyr { display: none; }
html[lang="zh-CN"] .logo-latin { display: block; }

/* Переключатель языка RU / 中文 */
.lang-switch {
  display: flex; gap: 2px; flex-shrink: 0;
  margin-left: 12px; padding: 2px;
  border: 1px solid rgba(255,255,255,.15); border-radius: 6px;
}
.lang-switch[hidden] { display: none; }
.lang-switch button {
  background: none; border: 0; border-radius: 4px; cursor: pointer;
  padding: 6px 10px;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--muted);
}
.lang-switch button:hover { color: var(--white); }
.lang-switch button[aria-pressed="true"] { background: rgba(224,120,0,.18); color: var(--accent); }

/* Китайский: у Montserrat и Open Sans нет иероглифов — системные шрифты с ними */
html[lang="zh-CN"] body { font-family: 'Open Sans', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif; }
html[lang="zh-CN"] .eyebrow { letter-spacing: 1px; }

/* Desktop nav */
nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }   /* 8 пунктов — плотнее */
nav a {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 4px;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
nav a:hover { color: var(--white); background: rgba(255,255,255,.06); }
/* Раздел, который сейчас на экране (script.js) */
nav a.active:not(.nav-contact) { color: var(--white); box-shadow: inset 0 -2px 0 var(--accent); }
.nav-contact {
  margin-left: 8px;
  padding: 9px 20px;
  border-radius: 4px;
  background: var(--accent) !important;
  color: var(--white) !important;
  transition: background .2s, transform .2s !important;
}
.nav-contact:hover { background: var(--accent-lt) !important; transform: translateY(-1px); }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  background: none;
  border: 0;
}
.burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: .3s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
nav.mobile-open {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  position: fixed;
  /* у header есть backdrop-filter — для fixed-потомка он становится «рамкой», поэтому
     inset: 72px 0 0 давал меню нулевую высоту и страница просвечивала. Высота — явно */
  top: 72px; left: 0; right: 0;
  height: calc(100vh - 72px);
  height: calc(100dvh - 72px);
  background: var(--brand-1);
  padding: 32px 28px;
  gap: 4px;
  border-top: 1px solid var(--border);
  overflow-y: auto;
}
nav.mobile-open a { font-size: 17px; padding: 12px 0; width: 100%; }
nav.mobile-open .nav-contact { width: auto; margin-left: 0; margin-top: 16px; }

/* ════════════════════════════════
   HERO
════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Фоновое фото (WebP, ~80 КБ; исходник 750 КБ — в истории git) */
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('hero-bg.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* Тёмный оверлей поверх фото — сохраняет читаемость текста */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(10, 12, 6, 0.92) 0%,
      rgba(10, 12, 6, 0.75) 55%,
      rgba(10, 12, 6, 0.40) 100%
    ),
    linear-gradient(
      to top,
      rgba(10, 12, 6, 0.85) 0%,
      transparent 50%
    );
}
/* Лёгкая сетка поверх фото */
.hero-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 72px 72px;
}
/* Градиентный ореол слева — усиливает зону с текстом */
.hero-glow {
  position: absolute;
  top: 0; left: 0;
  width: 60vw; height: 100%;
  background: radial-gradient(ellipse at 20% 50%, rgba(224,120,0,.08) 0%, transparent 65%);
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%;              /* без этого flex-родитель сжимал блок по тексту и ставил по центру, а не по логотипу */
  padding-top: 72px;
  padding-bottom: 60px;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(224,120,0,.12);
  border: 1px solid rgba(224,120,0,.28);
  border-radius: 100px;
  padding: 6px 18px;
  margin-bottom: 28px;
}
.hero-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
.hero-pill-text { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 5.2vw, 64px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.08;
  max-width: 760px;
  margin-bottom: 26px;
}
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-desc {
  font-size: 18px;
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 44px;
}

.hero-kpi {
  display: flex;
  max-width: 640px;
  gap: 0;
  margin-top: 72px;
  border-top: 1px solid var(--border);
  padding-top: 40px;
  flex-wrap: wrap;
}
.kpi-item { flex: 1; min-width: 140px; padding: 0 32px 0 0; display: flex; flex-direction: column; }
.kpi-item + .kpi-item { padding-left: 32px; border-left: 1px solid var(--border); }
.kpi-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.kpi-label { font-size: 13px; color: var(--muted); margin-top: 6px; }
/* Мини-график динамики под цифрой: линия по годам, точка — последний год */
.kpi-spark { display: block; width: 120px; height: 28px; margin-top: auto; padding-top: 10px; box-sizing: content-box; overflow: visible; }   /* прижат к низу — графики на одной линии, даже если подпись в 2 строки */
.kpi-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi-spark circle { fill: var(--accent); }

/* Лента истории в «О нас»: годы над линией, точки на линии, подписи под ней */
.timeline {
  list-style: none; position: relative;
  --n: 7;                                  /* число вех — при добавлении вехи поправить */
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: 40px 0 0;
}
.timeline::before {                       /* сама линия — через центры точек */
  content: ''; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 39px;   /* от центра первой вехи до центра последней */   /* 26px год + половина 28px зоны точки − 1px */
  height: 2px; background: rgba(255,255,255,.12);
}
.timeline li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.tl-year { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--white); height: 26px; }
.tl-dot {
  width: var(--d); height: var(--d); border-radius: 50%;
  background: var(--accent); position: relative;
  margin: calc((28px - var(--d)) / 2) 0;   /* центр точки — на линии */
}
.tl-start .tl-dot { background: transparent; border: 2px solid var(--accent); }
.tl-text { font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 8px; }

/* ════════════════════════════════
   SECTION — О НАС
════════════════════════════════ */
/* ── Фоновое изображение для разделов (section-bg.webp, ~40 КБ) ──
   Видно сквозь затемнение 86–93%, поэтому сжато сильнее обычного
   Чередующиеся оверлеи создают визуальное разделение секций  */
.section-bg-dark {
  background:
    linear-gradient(rgba(10,12,6,.93), rgba(10,12,6,.93)),
    url('section-bg.webp') center / cover fixed;
}
.section-bg-mid {
  background:
    linear-gradient(rgba(10,12,6,.86), rgba(10,12,6,.86)),
    url('section-bg.webp') center / cover fixed;
}
/* Fallback для мобильных (fixed не работает в iOS) */
@media (max-width: 768px) {
  .section-bg-dark { background: var(--brand-2); }
  .section-bg-mid  { background: var(--brand-1); }
}

#about { padding: var(--section-pad); }
.about-body { font-size: 16px; color: var(--muted); line-height: 1.85; max-width: 820px; }
.about-body p + p { margin-top: 18px; }
.about-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.value-card {
  background: var(--brand-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 22px;
  transition: border-color .3s, transform .3s;
}
.value-card:hover { border-color: rgba(224,120,0,.3); transform: translateY(-3px); }
.value-title { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.value-desc { font-size: 13px; color: var(--muted); }

/* Виды бурения — карточки в стиле value-card */
.services { margin-top: 72px; }
.services-lead { font-size: 15px; color: var(--muted); margin: -12px 0 24px; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.drill-card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 14px 14px 24px;
  transition: border-color .3s, transform .3s;
}
.drill-card:hover { border-color: rgba(224,120,0,.3); transform: translateY(-3px); }
/* Схема скважины в разрезе: небо, пласты, продуктивный горизонт (72–84%) — градиентом,
   вышка и ствол — SVG поверх. Пропорция совпадает с viewBox 320×200 */
.drill-img {
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 20px;
  background: linear-gradient(to bottom,
    #2a333c 0, #1f272e 30%,
    #1d221d 30% 46%,
    #222822 46% 60%,
    #1a1f1a 60% 72%,
    #3a2a12 72% 84%,
    #1a1f1a 84% 100%);
}
.drill-img svg { display: block; width: 100%; height: 100%; }
.drill-rig { fill: none; stroke: #b9c2ca; stroke-width: 2; stroke-linejoin: round; }
.drill-well { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.drill-bit { fill: var(--accent); stroke: var(--white); stroke-width: 1.5; }

/* Ствол «прорисовывается», когда блок появился на экране (класс .visible ставит script.js),
   карточки по очереди; долото — в конце. pathLength="1" у ствола: длина = 1 для любой формы */
.services .drill-well { stroke-dasharray: 1; stroke-dashoffset: 1; }
.services .drill-bit { opacity: 0; }
.services.visible .drill-well { animation: drill-draw 1.6s ease-in-out forwards; animation-delay: calc(var(--i, 0) * .3s + .3s); }
.services.visible .drill-bit { animation: drill-bit-in .3s ease-out forwards; animation-delay: calc(var(--i, 0) * .3s + 1.9s); }
.drill-card:nth-child(2) { --i: 1; }
.drill-card:nth-child(3) { --i: 2; }
.drill-card:nth-child(4) { --i: 3; }
@keyframes drill-draw { to { stroke-dashoffset: 0; } }
@keyframes drill-bit-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.drill-bit { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .services .drill-well { stroke-dashoffset: 0; animation: none; }
  .services .drill-bit { opacity: 1; animation: none; }
}
.drill-title { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--white); margin: 0 6px 10px; }
.drill-desc { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 6px; }

/* ════════════════════════════════
   SECTION — ГЕОГРАФИЯ РАБОТ
════════════════════════════════ */
#geo { padding: var(--section-pad); }

/* ── РАСКЛАДКА: карта сверху, заказчики снизу ── */
.geo-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.geo-customers, .geo-fields {
  background: rgba(10,12,6,.5);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 32px;
}
.geo-block-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.customer-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 28px;
}
.customer-list li {
  position: relative; padding-left: 20px;
  font-size: 15px; color: var(--text); line-height: 1.5;
}
.customer-list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

/* ── КАРТА ── */
.geo-map-area { position: relative; }
.russia-map-inner {
  position: relative;
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

/* Точки месторождений */
.map-canvas { position: relative; }
.field-dots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.field-dot {
  position: absolute;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid #fff;
  box-shadow: 0 0 5px rgba(224,120,0,.9);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .15s;
}
.field-dot:hover { transform: translate(-50%, -50%) scale(1.8); z-index: 10; }
.field-dot-tip {
  position: absolute;
  bottom: 160%; left: 50%;
  transform: translateX(-50%);
  background: rgba(10,12,6,.96);
  border: 1px solid var(--accent);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.field-dot:hover .field-dot-tip { opacity: 1; }

/* Москва — крупнее и светлее месторождений, подпись видна всегда */
.city-dot {
  position: absolute;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(224,120,0,.3), 0 0 12px rgba(224,120,0,.6);
  z-index: 3;
}
/* Подпись на тёмной плашке — читается и поверх точек месторождений */
.city-dot-label {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--white); white-space: nowrap;
  background: rgba(10,12,6,.82);
  padding: 2px 7px; border-radius: 4px;
}
.city-dot-label.right { left: calc(100% + 7px); }
.city-dot-label.left { right: calc(100% + 7px); }

/* Список месторождений — отдельным блоком под картой */
.fields-list {
  list-style: none;
  column-count: 2;
  column-gap: 28px;
  font-size: 14px;
}
.fields-list li {
  break-inside: avoid;
  position: relative;
  padding: 2px 0 2px 12px;
  color: var(--text);
  line-height: 1.5;
}
.fields-list li::before {
  content: '•';
  position: absolute; left: 0;
  color: var(--accent);
}
.russia-map-img {
  width: 100%;
  height: auto;
  display: block;
  /* перекраска тёмно-синей карты под фирменный тёмный фон */
  filter: brightness(1.35) saturate(.6) hue-rotate(8deg);
}

/* Фото с объектов */
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.cap-photo {
  display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border);
}
.photo-strip img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cap-photo { aspect-ratio: 1; object-fit: cover; margin-bottom: 16px; }

/* Западная Сибирь крупно — карта и список рядом; наведение на точку или название подсвечивает пару */
.ws-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.ws-layout .fields-list li { cursor: default; transition: color .15s; }
.ws-layout .fields-list li.on { color: var(--accent); }
.ws-box { position: relative; }
.ws-map { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); background: #0d1309; }
.ws-reg { fill: #0d1309; stroke: rgba(255,255,255,.12); stroke-width: 1; }
.ws-ours { fill: #26361c; stroke: rgba(224,120,0,.7); stroke-width: 1.6; }
.ws-river { fill: none; stroke: #3f6a86; stroke-width: 1; opacity: .7; }
.ws-river.big { stroke-width: 2.2; opacity: .9; }
.ws-reglabel { font: 700 22px 'Montserrat', sans-serif; fill: rgba(255,255,255,.32); letter-spacing: 2px; text-transform: uppercase; }
.ws-town circle { fill: var(--muted); }
.ws-town text { font: 600 19px 'Open Sans', sans-serif; fill: var(--muted); }
.ws-field { fill: var(--accent); stroke: #0d1309; stroke-width: 1.5; cursor: pointer; }
.ws-field.on { r: 12px; stroke: #fff; stroke-width: 3; }
.ws-base circle { fill: var(--white); stroke: var(--accent); stroke-width: 3; }
.ws-base text { font: 700 24px 'Montserrat', sans-serif; fill: var(--white); paint-order: stroke; stroke: #0d1309; stroke-width: 4px; }
.ws-scale path { fill: none; stroke: var(--text); stroke-width: 1.5; }
.ws-scale text { font: 600 18px 'Open Sans', sans-serif; fill: var(--text); }
.ws-town, .ws-base, .ws-reglabel, .ws-scale { pointer-events: none; }
.ws-tip {
  position: absolute; pointer-events: none; white-space: nowrap;
  background: rgba(10,12,6,.96); border: 1px solid var(--accent); border-radius: 4px;
  color: #fff; font: 700 13px 'Montserrat', sans-serif; padding: 4px 9px;
}
.ws-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--muted); }
.ws-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: -1px; }
.ws-legend i.base { width: 13px; height: 13px; background: var(--white); border: 3px solid var(--accent); }

/* ════════════════════════════════
   SECTION — ОХРАНА ТРУДА И ПБ
════════════════════════════════ */
#safety { padding: var(--section-pad); }
.safety-intro { margin-bottom: 72px; }
.safety-body { font-size: 16px; color: var(--muted); line-height: 1.85; max-width: 820px; }
.safety-body p + p { margin-top: 18px; }

.safety-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 6 карточек — по две в ряд */
  gap: 24px;
}
.pillar-card {
  background: var(--brand-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 36px 28px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.pillar-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s;
}
.pillar-card:hover { border-color: rgba(224,120,0,.25); transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.25); }
.pillar-card:hover::after { transform: scaleX(1); }
/* Значок в плашке — общий для «О нас», «Охраны труда» и «Мощностей».
   Параметры линий здесь перекрывают атрибуты внутри svg. */
.pillar-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(224,120,0,.18), rgba(224,120,0,.05));
  border: 1px solid rgba(224,120,0,.25);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  transition: background .3s, border-color .3s;
}
.pillar-icon svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.value-card .pillar-icon { width: 46px; height: 46px; margin-bottom: 16px; }
.value-card .pillar-icon svg { width: 22px; height: 22px; }
.pillar-card:hover .pillar-icon,
.value-card:hover .pillar-icon,
.cap-card:hover .pillar-icon { background: rgba(224,120,0,.22); border-color: rgba(224,120,0,.45); }
.pillar-title { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.pillar-text { font-size: 14px; color: var(--muted); line-height: 1.75; }
/* Политика в области качества, экологии, здоровья и безопасности — под карточками */
.policy { margin-top: 48px; background: rgba(10,12,6,.5); border: 1px solid var(--border); border-radius: 10px; padding: 32px; }
.policy .sub-heading { font-size: 18px; line-height: 1.35; }
.policy-list { columns: 2; column-gap: 40px; }
.policy-list li { list-style: none; break-inside: avoid; position: relative; padding: 0 0 10px 18px; font-size: 14px; line-height: 1.55; color: var(--text); }
.policy-list li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }
.policy-note { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.pillar-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.pillar-list li { list-style: none; font-size: 13px; color: var(--text); padding-left: 14px; position: relative; }
.pillar-list li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }

/* ════════════════════════════════
   SECTION — ПРОИЗВОДСТВЕННЫЕ МОЩНОСТИ
════════════════════════════════ */
#capacity { padding: var(--section-pad); }
.capacity-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 72px;
}
.capacity-body { font-size: 16px; color: var(--muted); line-height: 1.85; }
.capacity-body p + p { margin-top: 18px; }

.capacity-cards {
  display: grid;
  /* пока на сайте 2 карточки (4 скрыты до уточнения) — вернуть repeat(3, 1fr) вместе с ними */
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.cap-card {
  background: var(--brand-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px 26px;
  transition: border-color .3s, transform .3s;
}
.cap-card:hover { border-color: rgba(224,120,0,.25); transform: translateY(-3px); }

.cap-name { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.cap-desc { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ── Рост по годам: два графика рядом (разный масштаб — не на одной шкале) ── */
/* Награды и благодарности — миниатюры документов с подписями, при наведении — крупно */
.awards { margin-top: 56px; }
.awards-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.award {
  display: flex; flex-direction: column;
  background: var(--brand-1); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
}
.award img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.414; object-fit: cover; object-position: top; border-radius: 4px; background: #fff;
  position: relative; transition: transform .25s ease, box-shadow .25s ease; transform-origin: center top; }
/* Предпросмотр при наведении мыши — документ увеличивается поверх соседних карточек.
   Крайние карточки растут внутрь, чтобы не уйти за край экрана. На сенсорных экранах нет */
@media (hover: hover) {
  .award:hover { position: relative; z-index: 20; }
  .award:hover img { transform: scale(2.2); box-shadow: 0 24px 60px rgba(0,0,0,.65); z-index: 1; }
  .award:first-child img { transform-origin: left top; }
  .award:last-child img { transform-origin: right top; }
}
.award-year { margin-top: 12px; font: 800 18px 'Montserrat', sans-serif; color: var(--accent); }
.award-text { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text); }
.award-org { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--muted); }

/* Оборудование на объектах — сетка фото с подписями */
.eq-gallery { margin-top: 72px; }
.eq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.eq-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.eq-grid figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.eq-group + .eq-group { margin-top: 40px; }
.eq-group-title {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.eq-gallery.filtered .eq-group-title { display: none; }   /* выбрана одна группа — её название уже на вкладке */
.eq-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 28px; }
.eq-tabs button {
  font: 600 13px 'Montserrat', sans-serif; color: var(--muted); cursor: pointer;
  background: rgba(10,12,6,.45); border: 1px solid var(--border); border-radius: 20px; padding: 8px 16px;
  transition: color .2s, border-color .2s, background .2s;
}
.eq-tabs button:hover { color: var(--white); border-color: rgba(224,120,0,.5); }
.eq-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eq-tabs button[aria-pressed="true"] { color: var(--white); background: var(--accent); border-color: var(--accent); }
.eq-tabs .n { margin-left: 8px; font-size: 11px; opacity: .7; }
.trend { margin-top: 40px; }
.sub-heading { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 700; color: var(--white); margin-bottom: 24px; }
.trend-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }   /* 2 графика (средняя длина скрыта) */
.trend-chart {
  position: relative; margin: 0;
  background: var(--brand-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 24px 16px;
}
.trend-title { display: block; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--white); }
.trend-sub { display: block; font-size: 13px; color: var(--muted); }
/* сверху место под подписи значений, слева — под деления шкалы */
.trend-plot { position: relative; height: 180px; margin: 32px 0 0 32px; }
.trend-grid { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.08); }
.trend-grid span {
  position: absolute; right: calc(100% + 8px); top: 0; transform: translateY(-50%);
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.trend-cols { position: absolute; inset: 0; display: flex; }
.trend-col { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; outline: none; border-radius: 4px; }
.trend-col:hover, .trend-col:focus-visible { background: rgba(255,255,255,.04); }
.trend-col:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
/* #dc7600 — фирменный оранжевый на шаг темнее: проходит проверку светлоты на тёмном фоне */
.trend-bar { position: relative; width: min(24px, 70%); background: #dc7600; border-radius: 4px 4px 0 0; }
/* Линейный график: точка на уровне значения + линия SVG поверх площади графика */
.trend-pt {
  position: absolute; left: 50%; width: 10px; height: 10px; margin: 0 0 -5px -5px;
  border-radius: 50%; background: #dc7600;
  box-shadow: 0 0 0 2px var(--brand-2);   /* кольцо цвета карточки — точка отделена от линии */
}
.trend-pt.partial { background: var(--brand-2); border: 2px solid #dc7600; }
.trend-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trend-line polyline { fill: none; stroke: #dc7600; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trend-line polyline.partial { stroke-dasharray: 4 4; opacity: .6; }
.trend-bar.partial { opacity: .45; }

/* ── Эффекты появления (класс shown ставит script.js, когда блок на экране) ──
   Графики: столбцы растут по очереди, линия прорисовывается слева направо */
.js .trend-bar { transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .7, .3, 1) calc(var(--i, 0) * 70ms); }
.js .trend-pt { transition: opacity .4s ease, transform .4s ease; transition-delay: calc(var(--i, 0) * 90ms + .3s); }
.js .trend-line { clip-path: inset(-8px -8px -8px -8px); transition: clip-path 1.2s ease .2s; }
.js #trend-charts:not(.shown) .trend-bar { transform: scaleY(0); }
.js #trend-charts:not(.shown) .trend-pt { opacity: 0; transform: scale(.3); }
.js #trend-charts:not(.shown) .trend-line { clip-path: inset(-8px 100% -8px -8px); }
/* Карта Западной Сибири: месторождения зажигаются волной от Нижневартовска (задержка — в script.js),
   у баз компании кольцо расходится три раза и затихает */
.ws-field { transform-box: fill-box; transform-origin: center; transition: opacity .35s ease, transform .35s ease; }
.js .ws-map:not(.shown) .ws-field { opacity: 0; transform: scale(0); }
.ws-pulse { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ws-map.shown .ws-pulse { animation: ws-pulse 2.2s ease-out 1.4s 3; }
@keyframes ws-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
/* Фото: мягкое приближение при наведении, рамка на месте */
.ph { overflow: hidden; border-radius: 8px; border: 1px solid var(--border); }
.photo-strip .ph { border-radius: 10px; }
.ph img { transition: transform .5s ease; }
.ph:hover img, figure:hover .ph img { transform: scale(1.06); }
.eq-grid figcaption { transition: color .3s; }
.eq-grid figure:hover figcaption { color: var(--text); }
.trend-val {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.trend-x { display: flex; margin: 8px 0 0 32px; }
.trend-x span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }
.trend-tip {
  position: absolute; transform: translate(-50%, -100%); z-index: 5; pointer-events: none;
  background: rgba(10,12,6,.96); border: 1px solid var(--accent); border-radius: 4px;
  padding: 5px 10px; font-size: 12px; color: var(--white); white-space: nowrap;
}
.trend-note { font-size: 12px; color: var(--muted); margin-top: 12px; }
.trend-table-scroll { overflow-x: auto; margin-top: 16px; }
.trend-table table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.trend-table th, .trend-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.trend-table th { color: var(--muted); font-weight: 600; }
.trend-table tbody th, .trend-table thead th:first-child { text-align: left; }
.trend-table tbody th { color: var(--text); }
.trend-table td { color: var(--text); }

/* ════════════════════════════════
   SECTION — КАРЬЕРА
════════════════════════════════ */
#career { padding: var(--section-pad); }
.career-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 32px; }
.career-step {
  background: var(--brand-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 20px;
  transition: border-color .3s, transform .3s;
}
.career-step:hover { border-color: rgba(224,120,0,.3); transform: translateY(-3px); }
.career-num {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px;
  color: var(--accent);
  background: rgba(224,120,0,.12);
  border: 1px solid rgba(224,120,0,.3);
  margin-bottom: 14px;
}
.career-step h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.career-step p { font-size: 13px; color: var(--muted); line-height: 1.7; }
.career-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(224,120,0,.14), rgba(224,120,0,.04));
  border: 1px solid rgba(224,120,0,.3);
  border-radius: 10px;
  padding: 28px 32px;
}
.career-cta-title { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; color: var(--white); }
.career-cta-text { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* ════════════════════════════════
   SECTION — КОНТАКТЫ
════════════════════════════════ */
#contact { padding: var(--section-pad); }
.contact-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
/* Мини-карта офиса — под блоками, на всю ширину */
.contact-map {
  grid-column: 1 / -1; position: relative; height: 360px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #16200f;
}
.contact-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-pin {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--white); box-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.map-pin::after {   /* кольцо расходится три раза, когда карта появилась */
  content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0;
}
.contact-details.visible .map-pin::after { animation: map-pin-pulse 2s ease-out .6s 3; }
@keyframes map-pin-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3); opacity: 0; } }
.map-actions { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.map-actions a {
  font: 600 12px 'Montserrat', sans-serif; color: var(--white); text-decoration: none;
  background: rgba(10,12,6,.85); border: 1px solid rgba(224,120,0,.5); border-radius: 6px; padding: 7px 12px;
  transition: background .2s, border-color .2s;
}
.map-actions a:hover, .map-actions a:focus-visible { background: var(--accent); border-color: var(--accent); }
.map-credit {
  position: absolute; right: 0; bottom: 0; font-size: 10px; color: var(--muted); text-decoration: none;
  background: rgba(10,12,6,.75); padding: 2px 6px; border-top-left-radius: 6px;
}

.contact-block {
  background: rgba(10,12,6,.45);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 22px;
  transition: border-color .25s, transform .25s;
}
.contact-block:hover { border-color: rgba(224,120,0,.35); transform: translateY(-3px); }
.contact-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.contact-val { font-size: 17px; font-weight: 600; color: var(--white); }
.contact-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.contact-val a { color: inherit; text-decoration: none; transition: color .2s; }
.contact-val a:hover { color: var(--accent); }

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
footer {
  background: #060d1a;
  border-top: 1px solid var(--border);
  padding: 52px 0 28px;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand p { font-size: 14px; color: var(--muted); margin-top: 18px; line-height: 1.75; max-width: 300px; }
.footer-col-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--white); margin-bottom: 20px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 14px; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 13px; color: var(--muted); }

/* ════════════════════════════════
   SCROLL REVEAL
════════════════════════════════ */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.js .reveal.visible { opacity: 1; transform: none; }

/* Системная настройка «уменьшить движение»: всё сразу на месте, без плавной прокрутки и мигания
   (счётчики — в script.js, схемы скважин — рядом с ними выше) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-pill-dot { animation: none; }
  .ws-pulse { display: none; }
  .contact-details.visible .map-pin::after { animation: none; }
  .ph img, .ph:hover img, figure:hover .ph img { transition: none; transform: none; }
}

/* ── Появление групп (html[data-fx] и классы in/done ставит script.js) ──
   Каскад: карточки, фото, вехи, награды — по очереди */
html[data-fx~="cascade"] :is(.about-values, .photo-strip, .awards-grid, .services-grid, .eq-grid, .customer-list, .timeline, .career-steps):not(.in) > * {
  opacity: 0; transform: translateY(32px) scale(.95); }
html[data-fx~="cascade"] .in:not(.done) > * {
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--k, 0) * 90ms); }
/* Шторка: фото и карты открываются снизу вверх */
html[data-fx~="curtain"] :is(.photo-strip, .eq-grid):not(.in) .ph,
html[data-fx~="curtain"] .awards-grid:not(.in) img,
html[data-fx~="curtain"] :is(.ws-map, .russia-map-inner, .cap-photo):not(.in) { clip-path: inset(100% 0 0 0); }
html[data-fx~="curtain"] :is(.photo-strip, .eq-grid, .awards-grid).in:not(.done) :is(.ph, img),
html[data-fx~="curtain"] :is(.ws-map, .russia-map-inner, .cap-photo).in:not(.done) {
  clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--k, 0) * 90ms + .1s); }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 1024px) {
  .trend-charts { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .career-steps { grid-template-columns: repeat(3, 1fr); }

  .customer-list { grid-template-columns: repeat(2, 1fr); }
  .capacity-intro { grid-template-columns: 1fr; gap: 44px; }
  .cap-photo { aspect-ratio: 4 / 3; object-position: center 35%; }   /* в одну колонку квадрат слишком высокий */
  .about-values { grid-template-columns: repeat(2, 1fr); }
  .safety-pillars, .capacity-cards { grid-template-columns: 1fr 1fr; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .awards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .award:nth-child(3n+1) img { transform-origin: left top; }
  .award:nth-child(3n) img { transform-origin: right top; }
  .award:last-child:not(:nth-child(3n)) img { transform-origin: center top; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
/* Логотип + 8 пунктов меню занимают ~1075px (+ полоса прокрутки): уже — меню прячется в «бургер» */
@media (max-width: 1100px) {
  nav { display: none; }
  .burger { display: flex; margin-left: 8px; }
  .lang-switch { margin-left: auto; }
}
/* С видимым переключателем языка шапке нужно ещё ~100px (всего ~1175px) */
@media (max-width: 1210px) {
  header:has(.lang-switch:not([hidden])) nav { display: none; }
  header:has(.lang-switch:not([hidden])) .burger { display: flex; margin-left: 8px; }
  header:has(.lang-switch:not([hidden])) .lang-switch { margin-left: auto; }
}
@media (max-width: 768px) {
  .safety-pillars { grid-template-columns: 1fr; }
  .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capacity-cards { grid-template-columns: 1fr 1fr; }
  .about-values { grid-template-columns: 1fr; }
  .ws-layout { grid-template-columns: 1fr; }
  .fields-list { column-count: 3; }
  .customer-list { grid-template-columns: 1fr; }
  .contact-details { grid-template-columns: 1fr; }
  .contact-map { height: 280px; }

  .trend-charts { grid-template-columns: 1fr; }
  .trend-chart { padding: 20px 16px 12px; }
  .trend-x span { font-size: 10px; }
  .hero-kpi { gap: 24px; flex-direction: column; }
  .kpi-item + .kpi-item { padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .capacity-cards { grid-template-columns: 1fr; }
  .city-dot-label { font-size: 11px; padding: 1px 5px; }
  /* место под переключатель языка рядом с «бургером» */
  .logo-svg { height: 32px; }
  .lang-switch button { padding: 5px 7px; }
}
@media (max-width: 768px) {
  .career-steps { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .timeline::before { display: none; }
  .career-cta { padding: 24px 20px; }
}
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
  .fields-list { column-count: 2; }
  .policy { padding: 24px 18px; }
  .awards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .policy-list { columns: 1; }
  .geo-fields, .geo-customers { padding: 22px 16px; }
  .ws-town text { font-size: 30px; }
  .ws-base text { font-size: 36px; }
  .ws-reglabel { font-size: 30px; }
  .ws-scale text { font-size: 28px; }
  .ws-field { r: 12px; }
  .ws-field.on { r: 18px; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}