/* ============================================================
   «О компании» (/o-company/), 10.2026 — премиальное оформление:
   тёмная шапка с фото офиса и вехами компании, направления карточками
   с иконками, подбор и проектирование — шагами, производство —
   фото-мозаикой на тёмном фоне, «что получает заказчик», регионы,
   кейсы и реквизиты карточками. Акценты — зелёные.
   ============================================================ */

/* --- общие: разделы, заголовки --- */
.oc-sec { padding: var(--section-py-base, 96px) 0; background: var(--surface-page); }
.oc-sec--muted { background: var(--surface-muted); }
.oc-head { max-width: 820px; margin: 0 0 var(--sp-10); }
.oc-head--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-6) var(--sp-12); align-items: end; max-width: none; }
.oc-kicker { display: block; margin-bottom: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--dk-tx-2f702a, var(--green-700)); }
.oc-title { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 46px); font-weight: var(--fw-bold); line-height: 1.12; letter-spacing: -0.02em; color: var(--text-primary); }
.oc-title em { font-style: normal; color: var(--dk-tx-2f702a, var(--green-700)); }
.oc-lead { max-width: 64ch; margin: var(--sp-5) 0 0; font-size: 17px; line-height: 1.65; color: var(--text-secondary); }
.oc-head--split .oc-lead { margin: 0; }
.oc-ico { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: var(--dk-bg-f1f9ee, var(--green-50)); color: var(--dk-tx-2f702a, var(--green-700)); }
.oc-ico svg { width: 26px; height: 26px; }

/* --- шапка: фото офиса под тёмным градиентом, вехи --- */
.oc-hero { position: relative; isolation: isolate; overflow: hidden; padding: var(--sp-6) 0 var(--sp-12); background: var(--surface-deep); color: #fff; }
.oc-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.oc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 22, 27, 0.97) 0%, rgba(10, 22, 27, 0.9) 38%, rgba(10, 22, 27, 0.5) 72%, rgba(10, 22, 27, 0.3) 100%),
    linear-gradient(0deg, rgba(10, 22, 27, 0.95) 0%, rgba(10, 22, 27, 0) 50%);
}
.oc-crumb { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.oc-crumb a { color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.oc-crumb a:hover { color: #fff; }
.oc-hero__text { max-width: 760px; margin-top: var(--sp-16); }
.oc-hero .oc-kicker { color: var(--green-300); }
.oc-hero h1 { margin: var(--sp-4) 0 0; font-family: var(--font-display); font-size: clamp(40px, 5.2vw, 68px); font-weight: var(--fw-bold); line-height: 1.04; letter-spacing: -0.03em; color: #fff; }
.oc-hero h1 em { font-style: normal; color: var(--green-300); }
.oc-hero__lead { max-width: 58ch; margin: var(--sp-5) 0 0; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.oc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.oc-hero a.btn--primary,
.oc-hero a.btn--primary:hover { color: var(--action-primary-fg); }
.oc-hero a.btn--secondary { border-color: var(--dk-ln-ffffff73, rgba(255, 255, 255, 0.45)); background: transparent; color: #fff; }
.oc-hero a.btn--secondary:hover { border-color: var(--dk-ln-ffffff, #fff); background: rgba(255, 255, 255, 0.08); color: #fff; }
.oc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--sp-16) 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.oc-facts > div { padding: var(--sp-6) var(--sp-6) 0 0; }
.oc-facts > div + div { padding-left: var(--sp-6); border-left: 1px solid rgba(255, 255, 255, 0.16); }
.oc-facts dt { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.oc-facts dd { margin: var(--sp-2) 0 0; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.68); }

/* --- показатели (блок stats) сразу под шапкой — белой карточкой, заходит на тёмную шапку --- */
.oc-hero:has(+ .stats) { padding-bottom: calc(var(--sp-12) + 80px); }
.oc-hero + .stats { position: relative; z-index: 1; margin-top: -80px; padding: 0; border: 0; background: linear-gradient(180deg, transparent 80px, var(--surface-muted) 80px); }
.oc-hero + .stats .stats__grid { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 20px; background: var(--surface-page); box-shadow: 0 28px 56px -30px rgba(8, 18, 22, 0.5); }
.oc-hero + .stats .stat { padding: var(--sp-7) var(--sp-6); }
.oc-hero + .stats .stat:first-child::before,
.oc-hero + .stats .stat__icon::after { display: none; }
.oc-hero + .stats .stat__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--dk-bg-f1f9ee, var(--green-50)); color: var(--dk-tx-2f702a, var(--green-700)); }
.oc-hero + .stats .stat__icon svg { width: 26px; height: 26px; }
.oc-hero + .stats .stat__label { color: var(--dk-tx-2f702a, var(--green-700)); }
.oc-hero + .stats .stat__text a { color: var(--dk-tx-2f702a, var(--green-700)); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.oc-hero + .stats + .oc-sec--muted { padding-top: var(--sp-16); }

/* --- направления каталога: карточки с иконками --- */
.oc-dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.oc-dir {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  background: var(--surface-page);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 31, 38, 0.04);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.oc-dir:hover { border-color: var(--green-500); box-shadow: 0 18px 38px -22px rgba(16, 31, 38, 0.35); transform: translateY(-2px); }
.oc-dir__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.oc-dir__go { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border-subtle); border-radius: 50%; color: var(--dk-tx-2f702a, var(--green-700)); transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.oc-dir__go svg { width: 18px; height: 18px; }
.oc-dir:hover .oc-dir__go { border-color: var(--green-600); background: var(--green-600); color: #fff; }
.oc-dir__title { margin-top: var(--sp-5); font-family: var(--font-display); font-size: 19px; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-primary); }
.oc-dir__text { margin-top: var(--sp-2); font-size: 15px; line-height: 1.55; color: var(--text-secondary); }

/* --- подбор и проектирование: шаги с линией --- */
.oc-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); margin: 0; padding: 0; list-style: none; counter-reset: oc-step; }
/* линия через кружки с номерами */
.oc-steps::before { content: ""; position: absolute; top: 27px; right: calc(25% - 46px); left: 28px; height: 2px; background: linear-gradient(90deg, var(--green-500), var(--dk-bg-bfe2b1, var(--green-200))); }
.oc-step { position: relative; display: flex; flex-direction: column; counter-increment: oc-step; }
.oc-step__num { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var(--green-500); border-radius: 50%; background: var(--surface-page); font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-bold); color: var(--dk-tx-2f702a, var(--green-700)); box-shadow: 0 0 0 8px var(--surface-page); }
.oc-step__num::before { content: counter(oc-step, decimal-leading-zero); }
.oc-step__card { flex: 1; margin-top: var(--sp-6); padding: var(--sp-6); border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface-muted); }
.oc-step__icon { width: 30px; height: 30px; color: var(--dk-tx-3c8e33, var(--green-600)); }
.oc-step__title { margin: var(--sp-4) 0 0; font-family: var(--font-display); font-size: 19px; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-primary); }
.oc-step__text { margin: var(--sp-2) 0 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* --- производство: тёмный раздел, фото-мозаика --- */
.oc-sec--dark { background: var(--surface-deep); color: #fff; }
.oc-sec--dark .oc-kicker { color: var(--green-300); }
.oc-sec--dark .oc-title { color: #fff; }
.oc-sec--dark .oc-title em { color: var(--green-300); }
.oc-sec--dark .oc-lead { color: rgba(255, 255, 255, 0.72); }
.oc-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 260px); gap: var(--sp-4); margin: 0; }
.oc-photo { position: relative; isolation: isolate; margin: 0; overflow: hidden; border-radius: 18px; background: rgba(255, 255, 255, 0.06); }
.oc-photo--main { grid-column: span 2; grid-row: span 2; }
.oc-photo picture,
.oc-photo img { display: block; width: 100%; height: 100%; }
.oc-photo img { object-fit: cover; transition: transform 700ms var(--ease-out); }
.oc-photo:hover img { transform: scale(1.04); }
.oc-photo figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: var(--sp-10) var(--sp-5) var(--sp-4); background: linear-gradient(180deg, rgba(8, 18, 22, 0) 0%, rgba(8, 18, 22, 0.88) 100%); font-family: var(--font-display); font-size: 15px; font-weight: var(--fw-semibold); line-height: 1.35; color: #fff; }
.oc-photo--main figcaption { padding: var(--sp-12) var(--sp-6) var(--sp-6); font-size: 19px; }

/* --- что получает заказчик --- */
.oc-gets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.oc-get { display: flex; flex-direction: column; padding: var(--sp-6); border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface-page); box-shadow: 0 1px 2px rgba(16, 31, 38, 0.04); }
.oc-get__title { margin: var(--sp-5) 0 0; font-family: var(--font-display); font-size: 19px; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-primary); }
.oc-get__text { margin: var(--sp-2) 0 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.oc-get__text a { color: var(--dk-tx-2f702a, var(--green-700)); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.oc-get__text a:hover { text-decoration-color: currentColor; }
/* гарантия — зелёной карточкой */
.oc-get--accent { position: relative; overflow: hidden; border: 0; background: linear-gradient(160deg, var(--green-600) 0%, var(--green-700) 55%, #1f4f1c 100%); color: #fff; box-shadow: 0 24px 48px -28px rgba(31, 79, 28, 0.6); }
.oc-get--accent .oc-ico { background: rgba(255, 255, 255, 0.14); color: #fff; }
.oc-get__big { margin-top: auto; padding-top: var(--sp-5); font-family: var(--font-display); font-size: 64px; font-weight: var(--fw-bold); line-height: 0.95; letter-spacing: -0.04em; color: #fff; }
.oc-get__big small { margin-left: 8px; font-size: 22px; font-weight: var(--fw-semibold); letter-spacing: 0; }
.oc-get--accent .oc-get__title { margin-top: var(--sp-2); color: #fff; }
.oc-get--accent .oc-get__text { color: rgba(255, 255, 255, 0.85); }

/* --- карта и заказчики: панель поверх карты --- */
.oc-geo .geo__panel { border-radius: 22px; padding: var(--sp-10); }
.oc-geo .s-eyebrow { color: var(--dk-tx-2f702a, var(--green-700)); }
.oc-geo .s-title em { color: var(--dk-tx-2f702a, var(--green-700)); }
.oc-geo .geo__regions { gap: var(--sp-2); }
.oc-geo .region-tag { border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-page); padding: var(--sp-2) var(--sp-4); }
.oc-geo .region-tag svg { color: var(--dk-tx-3c8e33, var(--green-600)); }
.oc-geo .region-tag.is-prime { border-color: var(--dk-ln-bfe2b1, var(--green-200)); background: var(--dk-bg-f1f9ee, var(--green-50)); color: var(--dk-tx-285923, var(--green-800)); }
.oc-geo .region-tag:hover { transform: none; border-color: var(--green-500); box-shadow: none; }

/* --- регионы --- */
.oc-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.oc-region { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-5); padding: var(--sp-7); border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface-page); box-shadow: 0 1px 2px rgba(16, 31, 38, 0.04); }
.oc-region .oc-ico { grid-row: span 3; }
.oc-region__num { font-family: var(--font-display); font-size: 34px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.02em; color: var(--dk-tx-2f702a, var(--green-700)); }
.oc-region__num small { margin-left: 6px; font-size: 16px; font-weight: var(--fw-semibold); letter-spacing: 0; color: var(--text-secondary); }
.oc-region__title { font-family: var(--font-display); font-size: 18px; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-primary); }
.oc-region__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.oc-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

/* --- кейсы --- */
.oc-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.oc-case { display: flex; flex-direction: column; padding: var(--sp-7); border: 1px solid var(--border-subtle); border-radius: 20px; background: var(--surface-page); box-shadow: 0 1px 2px rgba(16, 31, 38, 0.04); }
.oc-case__city { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--surface-muted); font-size: 13px; font-weight: var(--fw-medium); color: var(--text-secondary); }
.oc-case__city svg { width: 16px; height: 16px; color: var(--dk-tx-3c8e33, var(--green-600)); }
.oc-case__title { margin: var(--sp-4) 0 var(--sp-5); font-family: var(--font-display); font-size: 22px; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-primary); }
.oc-case__rows { display: grid; gap: var(--sp-4); margin: 0; }
.oc-case__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-4); }
.oc-case__row dt { font-size: 13px; font-weight: var(--fw-medium); line-height: 1.6; color: var(--text-tertiary); }
.oc-case__row dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
/* результат — зелёной плашкой */
.oc-case__row--result { margin-top: var(--sp-1); padding: var(--sp-4) var(--sp-5); border-radius: 14px; background: var(--dk-bg-f1f9ee, var(--green-50)); box-shadow: inset 3px 0 0 var(--green-500); }
.oc-case__row--result dt { color: var(--dk-tx-2f702a, var(--green-700)); }
.oc-case__row--result dd { font-weight: var(--fw-semibold); color: var(--text-primary); }

/* --- реквизиты --- */
.oc-req { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.oc-req__card { padding: var(--sp-8); border: 1px solid var(--border-subtle); border-radius: 20px; background: var(--surface-page); box-shadow: 0 1px 2px rgba(16, 31, 38, 0.04); }
.oc-req__head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); font-family: var(--font-display); font-size: 20px; font-weight: var(--fw-semibold); color: var(--text-primary); }
.oc-req__head .oc-ico { width: 44px; height: 44px; border-radius: 12px; }
.oc-req__head .oc-ico svg { width: 22px; height: 22px; }
.oc-req__list { margin: 0; }
.oc-req__list > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--sp-4); padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.oc-req__list dt { font-size: 14px; line-height: 1.5; color: var(--text-tertiary); }
.oc-req__list dd { margin: 0; font-size: 15px; font-weight: var(--fw-semibold); line-height: 1.5; color: var(--text-primary); }
.oc-req__list a { color: var(--text-primary); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 25%, transparent); text-underline-offset: 3px; }
.oc-req__list a:hover { color: var(--dk-tx-2f702a, var(--green-700)); text-decoration-color: currentColor; }

@media (max-width: 1100px) {
  .oc-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-10); }
  .oc-steps::before { display: none; }
  .oc-gets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 340px repeat(2, 220px); }
  .oc-photo--main { grid-row: auto; }
  .oc-head--split { grid-template-columns: minmax(0, 1fr); }
  .oc-req,
  .oc-cases,
  .oc-regions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .oc-sec { padding: var(--sp-12) 0; }
  .oc-head { margin-bottom: var(--sp-8); }
  .oc-hero { padding-bottom: var(--sp-10); }
  .oc-hero__text { margin-top: var(--sp-10); }
  .oc-hero__lead { font-size: 16px; }
  .oc-facts { grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-10); }
  .oc-facts > div,
  .oc-facts > div + div { padding: var(--sp-4) 0; border-left: 0; }
  .oc-facts > div + div { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .oc-dirs,
  .oc-gets,
  .oc-steps { grid-template-columns: minmax(0, 1fr); }
  .oc-steps { row-gap: var(--sp-6); }
  .oc-mosaic { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: 240px; }
  .oc-photo--main { grid-column: auto; }
  .oc-region,
  .oc-case,
  .oc-req__card { padding: var(--sp-5); }
  /* регион на телефоне: значок над текстом — текст во всю ширину */
  .oc-region { grid-template-columns: minmax(0, 1fr); }
  .oc-region .oc-ico { grid-row: auto; margin-bottom: var(--sp-2); }
  .oc-case__row,
  .oc-req__list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .oc-geo .geo__panel { padding: 0; }
}

/* поля контейнера на телефоне и метки стран в панели карты — раньше были в старых стилях страницы */
@media (max-width: 768px) { .container { padding: 0 var(--sp-5); } }
.oc-geo .geo__regions--cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
@media (max-width: 640px) { .oc-geo .geo__regions--cols2 { grid-template-columns: 1fr; } }
html[data-theme="dark"]{--dk-tx-2f702a:#7ab275;--dk-bg-f1f9ee:#151c1f;--dk-ln-ffffff73:rgba(47, 55, 58, 0.45);--dk-ln-ffffff:#2f373a;--dk-bg-bfe2b1:#1e2e17;--dk-tx-3c8e33:#64a35c;--dk-ln-bfe2b1:#3b4935;--dk-tx-285923:#90bc8a}