/* ===== "Услуги" — тот же язык, что About/Оборудование, namespace .geo-svc-* =====
   Double-bezel карточки, чередование фона, единственный акцент #d3e7ff,
   blur+translateY reveal. Новый namespace специально, чтобы не пересекаться
   с .geo-services-*/.geo-service-* — это отдельный блок услуг на главной. */

.geo-page-services .main-wrapper {
  background: var(--geo-paper);
  overflow-x: clip;
}

.geo-svc-section {
  position: relative;
  padding: clamp(2.75rem, 5.5vw, 5rem) 0;
  overflow: hidden;
}
.geo-svc-section.is-dark { background: var(--geo-ink); color: #fff; }
.geo-svc-section.is-light { background: var(--geo-paper); color: var(--geo-ink); }
.geo-svc-section.is-light .geo-svc-body { color: rgba(6, 22, 38, 0.55); }

.geo-svc-glow {
  position: absolute;
  width: 42rem;
  height: 42rem;
  top: -16rem;
  right: -10rem;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(211, 231, 255, 0.16), transparent 70%);
  pointer-events: none;
}

.geo-svc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--geo-accent, #d3e7ff);
  margin-bottom: 1.4rem;
}
.geo-svc-eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--geo-accent, #d3e7ff);
  flex-shrink: 0;
}
.is-light .geo-svc-eyebrow { color: rgba(6, 22, 38, 0.55); }
.is-light .geo-svc-eyebrow::before { background: rgba(6, 22, 38, 0.4); }

.geo-svc-h1 {
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.08;
  margin: 0 0 1.4rem;
  max-width: 46rem;
}
.geo-svc-h2 {
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 1.6rem;
  max-width: 40rem;
}
.geo-svc-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  max-width: 36rem;
  margin: 0 0 2.2rem;
  color: rgba(255, 255, 255, 0.78);
}
.geo-svc-body { font-size: 1.02rem; line-height: 1.62; max-width: 40rem; margin: 0 0 1.6rem; }

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.9s cubic-bezier(0.32, 0.72, 0, 1), transform 0.9s cubic-bezier(0.32, 0.72, 0, 1), filter 0.9s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ---------- buttons ---------- */
.geo-svc-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.geo-svc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.4rem 0.4rem 1.6rem;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.geo-svc-btn-primary { background: var(--geo-accent, #d3e7ff); color: var(--geo-ink); padding-top: 0.9rem; padding-bottom: 0.9rem; }
.geo-svc-btn-primary .geo-svc-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: rgba(6, 22, 38, 0.12);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.geo-svc-btn-ghost { border: 1px solid var(--geo-white-line); color: #fff; background: transparent; padding: 0.9rem 1.6rem; }
.is-light .geo-svc-btn-ghost { border-color: var(--geo-line); color: var(--geo-ink); }
.geo-svc-btn:hover { transform: scale(1.03) translateY(-2px); }
.geo-svc-btn-primary:hover .geo-svc-btn-icon { transform: translate(2px, -2px) scale(1.08); }

/* ---------- hero ---------- */
.geo-svc-hero { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; }
.geo-svc-hero-photo { color: #fff; }
.geo-svc-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 62%;
  z-index: 0;
}
.geo-svc-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(6, 22, 38, 0.92) 0%, rgba(6, 22, 38, 0.72) 38%, rgba(6, 22, 38, 0.32) 70%, rgba(6, 22, 38, 0.18) 100%),
    linear-gradient(0deg, rgba(6, 22, 38, 0.55) 0%, transparent 40%);
}
.geo-svc-hero-photo .geo-svc-glow { z-index: 0; }
.geo-svc-hero-inner { position: relative; z-index: 2; max-width: 46rem; }

/* ---------- double-bezel shell + core (карточки услуг) ---------- */
.geo-svc-shell {
  position: relative;
  padding: 0.4rem;
  border-radius: 1.6rem;
  background: rgba(127, 127, 127, 0.05);
  border: 1px solid rgba(127, 127, 127, 0.12);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.5s ease;
}
.is-dark .geo-svc-shell { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.geo-svc-shell:hover { transform: translateY(-4px); border-color: rgba(211, 231, 255, 0.4); }
.geo-svc-core {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1.8rem 1.8rem 2rem;
  border-radius: calc(1.6rem - 0.4rem);
  background: var(--geo-paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.is-dark .geo-svc-core { background: #0c2233; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.geo-svc-core h3 { margin: 0 0 0.8rem; font-size: 1.2rem; font-weight: 600; }
.geo-svc-core p { margin: 0 0 1.2rem; font-size: 0.96rem; line-height: 1.58; }
.is-light .geo-svc-core p { color: rgba(6, 22, 38, 0.6); }

.geo-svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.geo-svc-card .geo-svc-core { display: flex; flex-direction: column; height: 100%; }
.geo-svc-card .geo-svc-btn { margin-top: auto; align-self: flex-start; }

.geo-svc-list { margin: 0 0 1.4rem; padding-left: 1.1rem; }
.geo-svc-list li { margin-bottom: 0.5rem; font-size: 0.9rem; line-height: 1.5; }
.geo-svc-list li:last-child { margin-bottom: 0; }
.is-light .geo-svc-list { color: rgba(6, 22, 38, 0.6); }

/* ---------- почему сопровождение важно ---------- */
.geo-svc-reasons {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.4rem;
}
.geo-svc-reasons li { display: flex; gap: 1rem; align-items: flex-start; }
.geo-svc-reasons p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: rgba(255, 255, 255, 0.75); }
.geo-svc-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; flex-shrink: 0;
  border-radius: 0.6rem;
  background: rgba(211, 231, 255, 0.16);
  color: var(--geo-accent, #d3e7ff);
}
.geo-svc-icon svg { width: 1.3rem; height: 1.3rem; }

/* ---------- final cta ---------- */
.geo-svc-cta-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.geo-svc-cta-copy .geo-svc-h2 { color: #fff; }
.geo-svc-cta-direct { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.geo-svc-cta-direct p { margin: 0 0 0.3rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); }
.geo-svc-cta-direct a { color: #fff; text-decoration: none; font-weight: 600; }
.geo-svc-cta-direct a:hover { color: var(--geo-accent, #d3e7ff); }

.geo-svc-form-core { background: #0c2233; }
.geo-svc-form { display: flex; flex-direction: column; gap: 1rem; }
.geo-svc-form label { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.62); }
.geo-svc-form input,
.geo-svc-form textarea {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  resize: vertical;
  transition: border-color 0.3s ease;
}
.geo-svc-form input:focus,
.geo-svc-form textarea:focus { outline: none; border-color: var(--geo-accent, #d3e7ff); }
.geo-svc-form button { align-self: flex-start; margin-top: 0.3rem; }
.geo-svc-form-note { font-size: 0.74rem; color: rgba(255, 255, 255, 0.42); margin: 0; }
.geo-svc-form.is-sent .geo-svc-form-note { color: var(--geo-accent, #d3e7ff); font-size: 0.9rem; }
.geo-svc-form.is-sent label,
.geo-svc-form.is-sent button { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .geo-svc-grid { grid-template-columns: 1fr; }
  .geo-svc-reasons { grid-template-columns: 1fr; }
  .geo-svc-cta-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .geo-svc-section { padding: 3.5rem 0; }
  .geo-svc-hero { min-height: 100vh; min-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: opacity 0.3s ease; transform: none !important; filter: none !important; }
  .geo-svc-shell, .geo-svc-btn { transition: none; }
}

/* ==========================================================================
   Блок «Обучение специалистов» (#obuchenie) — перенесён со страницы
   /obuchenie.html при переходе на компактную структуру из 8 страниц.
   Намеренно другая композиция, чем у карточек услуг выше: сначала пара
   реальных фотографий учебного класса, затем две колонки требований,
   затем сетка программ и полоса результатов — чтобы не было третьей
   одинаковой карточной сетки подряд.
   ========================================================================== */

.geo-svc-lead-inline {
  max-width: 72ch;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.6;
}

.geo-svc-subhead {
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-weight: 600;
}

.geo-edu-lead-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.geo-edu-photo {
  margin: 0;
}

.geo-edu-photo-core {
  padding: 0;
  overflow: hidden;
}

.geo-edu-photo-core img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.geo-edu-photo-core figcaption {
  padding: 0.85rem 1rem 1rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(12, 34, 51, 0.72);
}

.geo-edu-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}

.geo-edu-cols .geo-svc-shell,
.geo-edu-cols .geo-svc-core {
  height: 100%;
}

.geo-edu-req h3 {
  margin: 0 0 0.7rem;
  font-size: 1.08rem;
  font-weight: 600;
}

.geo-edu-req p {
  margin: 0 0 0.6rem;
  line-height: 1.55;
}

.geo-edu-req ul {
  margin: 0 0 0.6rem;
  padding-left: 1.1rem;
  line-height: 1.55;
}

.geo-edu-req li {
  margin-bottom: 0.35rem;
}

.geo-edu-note {
  font-size: 0.88rem;
  opacity: 0.75;
}

.geo-edu-programs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}

.geo-edu-programs .geo-svc-shell,
.geo-edu-programs .geo-svc-core {
  height: 100%;
}

.geo-edu-card .geo-svc-core {
  display: flex;
  flex-direction: column;
  padding: 0 0 1.15rem;
}

.geo-edu-card-photo {
  overflow: hidden;
  margin-bottom: 1rem;
}

.geo-edu-card-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.geo-edu-card .geo-svc-icon,
.geo-edu-card h4,
.geo-edu-card p,
.geo-edu-card .geo-svc-link {
  margin-inline: 1.15rem;
}

.geo-edu-card h4 {
  margin-top: 0.6rem;
  margin-bottom: 0.45rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.geo-edu-card p {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.5;
  flex: 1;
}

.geo-svc-link {
  display: inline-block;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.geo-edu-outcome {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  align-items: stretch;
}

.geo-edu-outcome .geo-svc-shell,
.geo-edu-outcome .geo-svc-core {
  height: 100%;
}

.geo-edu-doc h4 {
  margin: 0.55rem 0 0.4rem;
  font-size: 1rem;
  font-weight: 600;
}

.geo-edu-doc p {
  margin: 0;
  line-height: 1.5;
  font-size: 0.93rem;
}

.geo-edu-safety {
  margin-top: clamp(1.25rem, 2.5vw, 1.8rem);
}

.geo-edu-safety h3 {
  margin: 0 0 0.6rem;
  font-size: 1.08rem;
  font-weight: 600;
}

.geo-edu-safety p {
  margin: 0;
  max-width: 90ch;
  line-height: 1.6;
}

.geo-svc-program-field[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .geo-edu-programs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .geo-edu-outcome {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .geo-edu-lead-grid,
  .geo-edu-cols,
  .geo-edu-programs,
  .geo-edu-outcome {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* На 320px двухколоночная сетка финального CTA не схлопывалась и форма
   выходила за правый край — форсируем одну колонку. */
@media (max-width: 700px) {
  .geo-svc-cta-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .geo-svc-form,
  .geo-svc-form label,
  .geo-svc-form input,
  .geo-svc-form select,
  .geo-svc-form textarea,
  .geo-svc-form button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   Иконки в блоке обучения
   Класс .geo-svc-icon задуман для ТЁМНОЙ секции «Почему сопровождение
   производителя важно»: цвет #d3e7ff даёт там контраст 14.5:1. Блок
   «Обучение специалистов» — светлый, и на фоне #f2f7f9 та же светло-голубая
   иконка давала контраст 1.17:1, то есть была практически невидима —
   поэтому правки самого контура ничего не меняли.
   Берём цвет, уже принятый на сайте для иконок на светлом фоне
   (.geo-equip-icon на странице «Оборудование»): rgb(10, 92, 127).
   ========================================================================== */

.geo-edu-block .geo-svc-icon {
  color: rgb(10, 92, 127);
  background-color: rgba(10, 92, 127, 0.1);
}

/* ==========================================================================
   Первый экран на телефоне
   Блок центрировался по высоте секции и вставал в 10 px под шапкой — надпись
   с хлебными крошками читалась впритык к её нижней кромке. Прижимаем к верху
   и отсчитываем отступ от фактической высоты шапки (её измеряет
   geo-adaptation.js). Заодно разводим кнопки и текст: 35 px между ними
   выглядели как случайный перенос строки, а не как отдельный блок действий.
   ========================================================================== */
@media (max-width: 767px) {
  .geo-svc-hero {
    align-items: flex-start;
    padding-top: calc(var(--geo-nav-height, 6.25rem) + 2.5rem);
    padding-bottom: 1.5rem;
  }

  /* 1.6rem не сработали: соседние вертикальные поля схлопываются, и нижний
     отступ лида (35 px) просто поглощал их. Берём заведомо больше. */
  .geo-svc-hero .geo-svc-cta-row {
    margin-top: 3.5rem;
  }
}

/* ==========================================================================
   Два дополнительных вида карточки услуги
   Раздел «Услуги» в админке даёт выбор из трёх форм. Одинаковые карточки в
   два столбца читались монотонно, поэтому к обычной карточке добавлены
   широкий блок с фотографией и блок с пронумерованными шагами. Обе формы
   занимают строку целиком — так страница получает ритм, а редактору не
   нужно думать о сетке: он выбирает вид, остальное решает вёрстка.
   ========================================================================== */

/* --- Широкий блок с фотографией --- */
.geo-svc-wide { grid-column: 1 / -1; }
.geo-svc-wide .geo-svc-core {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 3vw, 2.8rem);
  align-items: center;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
}
/* Чётные блоки разворачиваем зеркально: две одинаковые «фото справа» подряд
   выглядят как повтор, а чередование читается как продуманный ритм. */
.geo-svc-wide:nth-of-type(even) .geo-svc-wide-media { order: -1; }
.geo-svc-wide-media {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(12, 34, 51, 0.06);
}
.is-dark .geo-svc-wide-media { background: rgba(255, 255, 255, 0.06); }
.geo-svc-wide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.geo-svc-wide .geo-svc-btn { align-self: flex-start; }

/* --- Блок с шагами --- */
.geo-svc-steps { grid-column: 1 / -1; }
.geo-svc-steps .geo-svc-core { padding: clamp(1.6rem, 2.6vw, 2.4rem); }
.geo-svc-steps-list {
  list-style: none;
  margin: 1.6rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem 1.6rem;
  counter-reset: geoSvcStep;
}
.geo-svc-steps-list li {
  counter-increment: geoSvcStep;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(12, 34, 51, 0.14);
  font-size: 0.95rem;
  line-height: 1.5;
  position: relative;
}
.is-dark .geo-svc-steps-list li { border-top-color: rgba(255, 255, 255, 0.16); }
.geo-svc-steps-list li::before {
  content: "0" counter(geoSvcStep);
  position: absolute;
  top: 0.75rem;
  left: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--geo-blue, #0a5c7f);
}
.is-dark .geo-svc-steps-list li::before { color: #7cc6e8; }

@media (max-width: 860px) {
  .geo-svc-wide .geo-svc-core { grid-template-columns: 1fr; }
  /* В одну колонку фотографию поднимаем над текстом — у всех блоков одинаково.
     Иначе снимок встаёт после кнопки и отрывает призыв к действию от конца
     блока, а зеркальный порядок чётных превращается в случайную чересполосицу. */
  .geo-svc-wide .geo-svc-wide-media,
  .geo-svc-wide:nth-of-type(even) .geo-svc-wide-media { order: -1; margin-bottom: 1.4rem; }
  .geo-svc-wide-media { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Тема отдельного блока услуги
   Раньше светлым или тёмным был весь раздел, а карточки просто наследовали
   его тон. Теперь тон выбирается у каждой услуги отдельно, поэтому правила
   не могут опираться на предка (.is-light / .is-dark) — они задаются классом
   на самом блоке и специфичнее наследуемых, иначе секция их перебивала бы.
   ========================================================================== */

/* --- Тёмный блок --- */
.geo-svc-card.is-theme-dark {
  background: rgba(12, 34, 51, 0.1);
  border-color: rgba(12, 34, 51, 0.18);
}
.geo-svc-card.is-theme-dark .geo-svc-core {
  background: #0c2233;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.geo-svc-card.is-theme-dark .geo-svc-core h3 { color: #fff; }
.geo-svc-card.is-theme-dark .geo-svc-core p { color: rgba(255, 255, 255, 0.72); }
.geo-svc-card.is-theme-dark .geo-svc-list { color: rgba(255, 255, 255, 0.72); }
.geo-svc-card.is-theme-dark .geo-svc-steps-list li {
  color: rgba(255, 255, 255, 0.78);
  border-top-color: rgba(255, 255, 255, 0.18);
}
.geo-svc-card.is-theme-dark .geo-svc-steps-list li::before { color: #7cc6e8; }
.geo-svc-card.is-theme-dark .geo-svc-wide-media { background: rgba(255, 255, 255, 0.06); }

/* --- Светлый блок --- */
.geo-svc-card.is-theme-light {
  background: rgba(127, 127, 127, 0.05);
  border-color: rgba(127, 127, 127, 0.12);
}
.geo-svc-card.is-theme-light .geo-svc-core {
  background: var(--geo-paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.geo-svc-card.is-theme-light .geo-svc-core h3 { color: var(--geo-ink); }
.geo-svc-card.is-theme-light .geo-svc-core p { color: rgba(6, 22, 38, 0.6); }
.geo-svc-card.is-theme-light .geo-svc-list { color: rgba(6, 22, 38, 0.6); }
.geo-svc-card.is-theme-light .geo-svc-steps-list li {
  color: rgba(6, 22, 38, 0.72);
  border-top-color: rgba(12, 34, 51, 0.14);
}
.geo-svc-card.is-theme-light .geo-svc-steps-list li::before { color: var(--geo-blue, #0a5c7f); }
.geo-svc-card.is-theme-light .geo-svc-wide-media { background: rgba(12, 34, 51, 0.06); }