/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 11 2025 | 02:00:35 */
:root{
  --ink:#0e0e0e; --muted:#5f6b76; --line:#e9edf2;
  --accent:#2E7D32; --accent2:#66BB6A;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.10);
  --maxw:1120px;
  --space-xs:8px; --space-s:12px; --space-m:18px; --space-l:24px;
  --wrap-pad-y:var(--space-m);
  --hero-pad-top:0;
  --hero-pad-bottom:clamp(24px,5vw,36px);
  --grid-gap:var(--space-s);
  --services-bg: #ffffff;
  --services-bg-hover: #E8F5E9;
  --services-shadow: 0 0.25rem 0.5rem rgba(46,125,50,0.25);
  --services-border: #1B5E20;
  --services-color: #2E7D32;
}

/* Base */
html{scroll-behavior:smooth;}
html,body{
  background:
    radial-gradient(1400px 900px at 15% -10%, #fff7f0 0,#f1f6ff 40%, #ffffff 80%),
    repeating-conic-gradient(from 0deg at 40% 30%, rgba(0,0,0,.02) 0 12deg, transparent 12deg 24deg);
  background-attachment: fixed;
  color:var(--ink);
}
a{color:inherit;text-decoration:none}
.mo-card a,
.mo-card address a{
  color:var(--accent);
  text-decoration:underline;
}
.mo-card a:hover,.mo-card a:focus-visible{
  color:var(--accent2);
}
.mo-card address{
  line-height:1.5;
}

/* Layout helpers */
.mo-wrap{max-width:var(--maxw);margin:0 auto;padding:var(--wrap-pad-y) var(--space-l)}
.mo-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.mo-card:not(.mo-service):hover{box-shadow:0 12px 34px rgba(0,0,0,.14);transform:scale(1.02)}
.mo-card-pad{padding:var(--space-m)}
.mo-grid{display:grid;gap:var(--grid-gap)}
.mo-grid-3{grid-template-columns:repeat(3,1fr)}

/* Nav */
.mo-nav{position:sticky;top:0;backdrop-filter:blur(10px);background:rgba(255,255,255,.65);border-bottom:1px solid var(--line);z-index:20;display:flex;align-items:center;justify-content:space-between}
.mo-brand{display:flex;gap:var(--space-s);align-items:center}
.mo-logo{width:36px;height:36px;border-radius:10px;background:
  radial-gradient(120px 120px at 20% 20%, var(--accent2), var(--accent) 60%),
  linear-gradient(45deg, var(--accent), var(--accent2));
  box-shadow:var(--shadow);animation:mo-float 6s ease-in-out infinite}
.mo-links a{margin-left:var(--space-m);color:#39424a;opacity:.9;transition:color .2s ease,opacity .2s ease}
.mo-links a:hover,.mo-links a:focus-visible{color:var(--accent);text-decoration:underline;opacity:1}

/* Buttons */
.mo-btn{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  padding:var(--space-s) var(--space-m);
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  box-shadow:var(--shadow);
  transition:.15s transform, .2s box-shadow, .2s background-color;
}
.mo-btn:hover{
  background:var(--accent2);
  color:#fff;
  transform:translateY(-2px);
}
.mo-btn:focus-visible, .mo-pill:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent);
}

/* === Fix hero top spacing === */
.home .wp-site-blocks{padding-top:0}
.home .wp-site-blocks>*:first-child{margin-top:0}
.mo-hero{padding:var(--hero-pad-top) 0 var(--hero-pad-bottom);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.mo-hero .mo-wrap{padding-top:0}

/* === Align hero grid content vertically === */
.mo-hero .mo-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.mo-hero-content{order:1}
.mo-hero-figure{order:2;margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.mo-hero-figure img{display:block;width:100%;height:auto;object-fit:cover}
.mo-kicker{color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.mo-hero h1{line-height:1.08;margin:0 0 .3em}
.mo-lead{color:var(--muted);max-width:62ch}

/* === CTA buttons in one line === */
.mo-cta{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:16px}

/* Sections */

/* Collaboration */
.mo-collab{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;border-radius:22px;overflow:hidden}
.mo-c-text{padding:28px}
.mo-c-visual{position:relative;min-height:360px}
.mo-c-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mo-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.15))}
.mo-pill{display:inline-block;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:var(--space-xs) var(--space-s)}

/* Footer */
.mo-footer{padding:28px 0;color:#6b757f}
.mo-split{display:flex;flex-wrap:wrap;gap:14px}
.mo-split>*{flex:1 1 280px}

/* Forms & 2-cols grid */
.mo-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-m);
}

#mo-ok {
  margin-top: 10px;
  color: var(--muted);
}

/* Mission (no animations) */
.mission-section {
  --bg: #0b1114;
  --card: #0f161a;
  --text: #e8f1f3;
  --muted: #b8c6c9;
  --accent: #4dd4a2;
  --line: rgba(255,255,255,.08);

  background: radial-gradient(1200px 600px at 10% 0%, #102226 0%, var(--bg) 55%) no-repeat var(--bg);
  color: var(--text);
  padding: clamp(32px, 6vw, 80px) clamp(16px, 5vw, 64px);
}
.mission-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 40px);
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}
@media (min-width: 880px) {
  .mission-wrap { grid-template-columns: 1fr 1.2fr; }
}
.mission-figure {
  margin: 0;
  border-radius: 20px;
  overflow: hidden; /* fallback for older browsers */
  overflow: clip;
  background: linear-gradient(180deg, rgba(77,212,162,.25), transparent 60%);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.mission-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
}
.mission-content {
  background: linear-gradient(180deg, rgba(77,212,162,.06), rgba(77,212,162,.0));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 3.5vw, 36px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.mission-kicker {
  display: inline-block;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(77,212,162,.12);
  border: 1px solid rgba(77,212,162,.25);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.mission-title {
  line-height: 1.1;
  margin: 6px 0 14px;
  letter-spacing: -0.02em;
}
.mission-lead {
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 var(--space-m);
}

/* === Правка внутренних отступов списка в блоке Mission === */
.mission-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 10px 0 16px;
  list-style: none;
}
.mission-list li {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  line-height: 1.5;
  color: var(--text);
}
.mission-list li .check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: var(--accent);
  filter: drop-shadow(0 0 6px rgba(77,212,162,.25));
}

/* A11y helper */
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden;
}

/* Reveal animation */
.mo-reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
}
.mo-reveal.is-visible {
  opacity:1;
  transform:none;
}

/* === Mobile behavior === */
@media (max-width:768px){
  .mo-cta{justify-content:flex-start}
}

/* Responsive */
@media (max-width:980px){
  .mo-hero-grid,.mo-collab{grid-template-columns:1fr}
  .mo-collab{border-radius:18px}
  .mo-grid-2{grid-template-columns:1fr} /* 2-cols -> 1-col on mobile */
  .mo-hero-figure{order:1}
  .mo-hero-content{order:2}
}

/* Animations (global) */
@keyframes mo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Light theme fallback for Mission */
@media (prefers-color-scheme: light) {
  .mission-section {
    --bg: #f4faf8; --card: #ffffff; --text: #0b1a17; --muted: #425654; --accent: #1f9e77; --line: rgba(2,35,28,.12);
    background: radial-gradient(1200px 600px at 10% 0%, #e9f6f1 0%, var(--bg) 60%) no-repeat var(--bg);
  }
  .mission-figure, .mission-content, .mission-list li { box-shadow: 0 10px 24px rgba(16, 46, 39, .08); }
}
/* Размер и обрезка коллаб-изображения */
.mo-c-visual {
  position: relative;
  min-height: 360px;                 /* базовая высота на десктопе */
  aspect-ratio: 16 / 11;             /* помогает держать пропорцию при растяжке */
  overflow: hidden;
}

.mo-c-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* равномерная обрезка без искажений */
  display: block;
}

/* Текстовая колонка чтобы дышала */
.mo-c-text { padding: clamp(20px, 3vw, 32px); }

/* На мобильных делаем разумную высоту */
@media (max-width: 980px) {
  .mo-collab { grid-template-columns: 1fr; }
  .mo-c-visual {
    min-height: 240px;
    aspect-ratio: 16 / 10;
  }
}

/* === Мелкий текст, например для muted === */
.mo-muted {
  color: var(--muted);
}
/* ==== Компактные вертикальные отступы секций (адаптивно) ==== */
:root{
  /* Можно подкручивать эти 2 числа под вкус */
  --section-y-min: 28px;  /* минимум на мобильных */
  --section-y-max: 44px;  /* максимум на десктопе */
}

/* Базовый отступ для всех секций */
.mo-section{
  padding: clamp(var(--section-y-min), 6vw, var(--section-y-max)) 0;
  border-bottom: 1px solid var(--line);
}

/* Заголовки секций — меньше «воздуха» снизу */
.mo-section h2{
  margin: 0 0 var(--space-xs);
}

/* Индивидуальные твики при желании (можно удалить/оставить) */
#services.mo-section{ padding: clamp(24px, 5vw, 36px) 0; }
#contact.mo-section {
  padding: clamp(24px, 5vw, 36px) 0; /* Как у Services */
  color: #1f2937;
  transition: all 0.3s ease;
}
/* На очень больших экранах не раздуваем слишком сильно */
@media (min-width: 1400px){
  :root{
    --section-y-max: 40px;
  }
}
/* ==== Mission: компактный вариант ==== */

/* Меньше внутренних отступов у всей секции */
.mission-section{
  /* было: padding: clamp(32px, 6vw, 80px) ... */
  padding-block: clamp(16px, 4vw, 36px);
  padding-inline: clamp(12px, 4vw, 40px);
}

/* Меньше зазоров между колонками/элементами */
.mission-wrap{
  gap: clamp(12px, 2.5vw, 20px);
}

/* Титул и лид — меньше «воздуха» */
.mission-title{ margin: 4px 0 8px; }
.mission-lead{  margin: 0 0 var(--space-s); }

/* Список — компактнее */
.mission-list{ margin: 8px 0 12px; gap: 8px; }
.mission-list li{ padding: var(--space-xs) var(--space-m); }

/* Картинка: ограничим высоту и обрежем излишки, чтобы секция не растягивалась */
.mission-figure{
  max-height: 420px;       /* при необходимости уменьшай до 360px */
  overflow: hidden;        /* fallback for older browsers */
  overflow: clip;          /* скрываем лишнее */
}
.mission-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* аккуратно обрезает без искажений */
  aspect-ratio: auto;      /* снимаем принудительное 3/4 из раннего блока */
}

/* На десктопе немного смещаем пропорцию колонок, чтобы картинка была уже */
@media (min-width: 880px){
  .mission-wrap{ grid-template-columns: .9fr 1.1fr; }
}
/* Пусть все форм-контролы наследуют шрифт темы/контейнера */
input, textarea, select, button { font: inherit; }

/* 1) Крупный и стабильный заголовок секции */
#services-title{
  line-height: 1.15;
  margin: 0 0 var(--space-s);
}

/* 2) Заголовки карточек услуг */
.mo-service h2{
  margin: 0 0 6px;
}

/* Кнопка внутри h2 наследует типографику заголовка */
.mo-service h2 .service-toggle{
  font-size: 1rem;
  line-height: 1.5;
}

/* === Services — финальный CSS (без равнения высот) === */

/* Контейнер: flex вместо grid, центрирование рядов */
#services .mo-grid.mo-grid-3{
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);
  align-items: flex-start;   /* не растягивать карточки по высоте строки */
  justify-content: center;   /* центрируем ряды */
}

/* Колонки: 3 → 2 → 1 */
#services .mo-grid.mo-grid-3 > .mo-service{
  flex: 0 1 calc((100% - 2 * var(--grid-gap)) / 3);
  align-self: flex-start;
  box-sizing: border-box;
}
@media (max-width: 992px){
  #services .mo-grid.mo-grid-3 > .mo-service{ flex-basis: calc((100% - 1 * var(--grid-gap)) / 2); }
}
@media (max-width: 680px){
  #services .mo-grid.mo-grid-3 > .mo-service{ flex-basis: 100%; }
}

/* Service card interactive effect */
#services .mo-service {
  cursor: pointer;
  background-color: var(--services-bg);
  color: var(--services-color);
  padding: var(--space-l);
  border: 2px solid var(--services-border);
  border-radius: var(--radius);
  --tilt: 0deg; /* По умолчанию прямой */
  transform: rotateZ(var(--tilt));
  box-shadow: none;
  transition:
    transform .3s ease-out,
    background-color .35s,
    box-shadow .3s ease-out;
}

/* Наклоны для конкретных карточек на десктопах */
#services .mo-service:nth-of-type(1), /* Reporting RSE */
#services .mo-service:nth-of-type(4) { /* Communication */
  --tilt: -2deg;
}

#services .mo-service:nth-of-type(3), /* Stratégie RSE */
#services .mo-service:nth-of-type(5) { /* Événementiel */
  --tilt: 2deg;
}

#services .mo-service:nth-of-type(2) { /* Sensibilisation */
  --tilt: 0deg;
  transform: none;
}

/* Убираем наклоны на мобильных (≤ 680px) */
@media (max-width: 680px) {
  #services .mo-service {
    --tilt: 0deg;
    transform: none;
  }
  #services .mo-service:hover,
  #services .mo-service:focus-within,
  #services .mo-service.is-open {
    transform: scale(1.02); /* Только масштабирование */
  }
  #services .mo-service:nth-of-type(2):hover,
  #services .mo-service:nth-of-type(2):focus-within,
  #services .mo-service:nth-of-type(2).is-open {
    transform: scale(1.02); /* Только масштабирование */
  }
}

/* Эффекты при наведении/фокусе на десктопах */
@media (hover:hover) and (pointer:fine) {
  #services .mo-service:hover,
  #services .mo-service:focus-within {
    transform: scale(1.02); /* Выравниваем и масштабируем */
    background-color: var(--services-bg-hover);
    box-shadow: var(--services-shadow);
  }
  #services .mo-service:nth-of-type(2):hover,
  #services .mo-service:nth-of-type(2):focus-within {
    transform: scale(1.02); /* Только масштабирование */
  }
}

/* При открытии панели карточка выравнивается */
#services .mo-service.is-open {
  transform: scale(1.02); /* Прямое положение с масштабированием */
}
#services .mo-service:nth-of-type(2).is-open {
  transform: scale(1.02); /* Только масштабирование */
}

/* Заголовок-кнопка */
#services { --title-lh: 1.4; }
#services .mo-service h2{ margin: 0 0 6px; }

/* Панель с текстом */
#services .service-panel {
  max-height: 0;
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: max-height .3s ease, opacity .2s ease, min-height .3s ease, margin-top .2s ease;
}

#services .mo-service.is-open .service-panel {
  margin-top: var(--space-s);
  opacity: 1;
}

/* Улучшение списков внутри панели */
#services .service-panel ul {
  list-style-type: disc !important; /* Явно задаём маркеры */
  padding-left: 1.5rem; /* Отступ для маркеров */
  margin: 0 0 0.5rem 0; /* Отступы сверху/снизу */
}

#services .service-panel ul li {
  margin-bottom: 0.5rem; /* Пробел между пунктами */
  line-height: 1.4; /* Улучшаем читаемость */
  padding-left: 0.25rem; /* Отступ от маркера */
}

/* Service toggle button */
#services .mo-service .service-toggle {
  display: block;
  position: relative;
  padding: 8px 12px;
  width: 100%;
  text-align: left;
  background: var(--accent);
  border: none;
  color: #fff;
  font: inherit;
  line-height: 1.4;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease, max-height .25s ease, min-height .25s ease;
}

/* Hover & focus states */
#services .mo-service .service-toggle:hover,
#services .mo-service .service-toggle:focus-visible {
  background: var(--accent2);
  color: #fff;
  transform: translateY(-2px);
}
#services .mo-service .service-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent);
}

/* Arrow indicator */
#services .mo-service .service-toggle::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
  opacity: .9;
}
#services .mo-service.is-open .service-toggle::after {
  transform: translateY(-50%) rotate(-180deg);
}

/* Height states */
#services .mo-service:not(.is-open) .service-toggle {
  min-height: calc(2 * 1.4em + 16px);
  max-height: calc(2 * 1.4em + 16px);
}
#services .mo-service.is-open .service-toggle {
  min-height: calc(6 * 1.4em + 16px);
  max-height: calc(6 * 1.4em + 16px);
}
/* Hero: круглый аватар */
.mo-hero-figure.mod-circle{
  --ring: color-mix(in oklab, var(--accent) 45%, transparent);
  max-width: clamp(180px, 22vw, 260px);
  padding: 0;
  background: none;
  border: none;
  border-radius: 999px;
  box-shadow: 0 0 0 8px var(--ring), 0 12px 30px rgba(0,0,0,.18);
  justify-self: center;
}
.mo-hero-figure.mod-circle img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 50%;
}

@media (max-width: 980px){
  /* одна колонка и правильный порядок */
  .mo-hero .mo-hero-grid{ grid-template-columns: 1fr; justify-items: stretch; }
  .mo-hero-figure{ order: 1; }
  .mo-hero-content{ order: 2; }

  /* превращаем круг в «баннер» как в Mission */
  .mo-hero-figure.mod-circle{
    max-width: none;
    width: 100%;
    margin: 0 0 14px;
    justify-self: stretch;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    border: 1px solid var(--line);
  }
  .mo-hero-figure.mod-circle img{
    height: auto;
    aspect-ratio: 16 / 10;
    object-position: 50% 40%;
    border-radius: 20px;
  }
}

/* Contact section */
#contact {
  color: #1f2937;
  transition: all 0.3s ease;
}

.contact-container {
  padding: 0; /* Убираем отступы, чтобы .mo-wrap управлял ими */
  max-width: var(--maxw);
  margin: 0 auto;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
}

@media (min-width: 640px) {
  .contact-grid {
    grid-template-columns: 1fr 2fr;
  }
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr 3fr;
  }
}

.contact-title h2 {
  margin-bottom: var(--space-s);
}

.contact-items ul {
  list-style: none;
  padding: 0;
}

.contact-item {
  border-bottom: 1px solid #e5e7eb;
}

.contact-link {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 1rem 0;
  text-decoration: none;
  color: #1f2937;
  transition: background-color 0.3s ease;
}

@media (min-width: 640px) {
  .contact-link {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .contact-link {
    grid-template-columns: 1fr 2fr 1fr;
  }
}

.contact-value {
  color: #4b5563;
}

.contact-arrow {
  justify-self: end;
  transition: transform 0.3s ease;
}

.contact-item.email .contact-link:hover {
  background-color: #86EFAC;
}

.contact-item.linkedin .contact-link:hover {
  background-color: #BBF7D0;
}

.contact-link:hover .contact-arrow {
  transform: rotate(45deg);
}

/* Изменено: убираем добавление отступов на мобильных, чтобы соответствовать другим секциям */
@media (max-width: 640px) {
  .contact-container { padding: 0; } /* Было: padding: var(--space-m); — убрали отступы */
  .contact-link { 
    padding: var(--space-s) var(--space-m); /* Оставляем отступы для ссылок, если нужно; или убрать, если хотите компактнее */
    border-radius: var(--radius);
  }
}
/* Супер-простая верстка контактов */
.mo-contact-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #e5e7eb;
}
.mo-contact-list li{
  border-bottom:1px solid #e5e7eb;
}

.mo-contact-link{
  display:flex;
  align-items:center;
  gap:var(--space-m);
  padding:12px 0;                 /* без горизонтальных паддингов — край ровно как у .mo-wrap */
  color:#1f2937;
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
}
.mo-contact-link .label{flex:0 0 auto; font-weight:600;}
.mo-contact-link .value{flex:1 1 auto; color:#4b5563;}
.mo-contact-link .arrow{flex:0 0 auto; margin-left:auto; transition:transform .2s ease;}

.mo-contact-link:hover{ background:#f0fdf4; }        /* мягкий зелёный hover */
.mo-contact-link:hover .arrow{ transform:rotate(45deg); }

/* Фокус для клавиатуры */
.mo-contact-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent);
  border-radius:8px;
}

/* Адаптив: на узких можно чуть уплотнить вертикали */
@media (max-width:640px){
  .mo-contact-link{ padding:10px 0; }
}