/* Ipson — страничный слой поверх дизайн-системы organic.
   Токены и компоненты — в organic.css, здесь только раскладка.
   Общий для русской и английской версий. */

body { margin: 0; background: var(--color-neutral-200); }

.ds-organic a { color: var(--color-accent-700); }
.ds-organic a:hover { color: var(--color-accent-600); }

/* Кнопки-ссылки держат свой цвет во всех состояниях.
   Правило `.ds-organic a:hover` выше имеет специфичность (0,2,1) и потому
   перебивает `color` у `.ds-organic .btn-primary` (0,2,0) из organic.css,
   а собственные hover-правила кнопки задают только фон. Из-за этого при
   наведении кремовый текст подменялся тёмным акцентом поверх тёмной
   заливки: 1.41:1 вместо 5.54:1, надпись пропадала. */
.ds-organic a.btn-primary,
.ds-organic a.btn-primary:hover,
.ds-organic a.btn-primary:focus-visible,
.ds-organic a.btn-primary:active { color: var(--color-bg); }

.ds-organic a.btn-secondary,
.ds-organic a.btn-secondary:hover,
.ds-organic a.btn-secondary:focus-visible,
.ds-organic a.btn-secondary:active { color: var(--color-text); }

.sheet {
  max-width: 1240px;
  margin-inline: auto;
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
}

/* ── знак ──
   Начертание «Ipson» по обновлённым макетам Ipson Organic и Ipson EN
   от 31.07: с прописной, без точки. Caprasimo, трекинг −0.03em, без эффектов.
   Прежний вариант «ipson.» с точкой в акценте описан в Ipson Logo.dc.html —
   тот гайдлайн ещё не обновлён, см. README.md. */
.mark {
  letter-spacing: -.03em;   /* гарнитуру, вес и цвет знака задаёт palette.css */
  line-height: .95;
  text-transform: none;
}

/* ── навигация ── */
.nav {
  padding: var(--space-6) var(--space-8); flex-wrap: wrap; gap: var(--space-4);
  /* z-index держит ссылки и кнопку выше декоративного круга: круг
     заходит в полосу навигации и должен оставаться ПОД кнопкой.
     Фон намеренно не задан — иначе круг не будет виден. */
  position: relative; z-index: 3;
}
/* Знак — ссылка, поэтому его перебивает `.ds-organic .nav a` из
   дизайн-системы: там и `font-size: 14px`, и `color: inherit`, и
   специфичность (0,2,1) против (0,2,0) у `.nav-brand`. Всё оформление
   знака задаётся через `.nav a.nav-brand` — иначе не применяется вовсе.
   Тот же приём palette.css использует для .btn-primary. */
.ds-organic .nav a.nav-brand {
  font-size: 42px;          /* знак ведёт шапку; на узких экранах меньше */
  text-decoration: none;
  color: var(--brand-medblue);
}
.ds-organic .nav a.nav-brand:hover { color: var(--color-accent-2-700); }
/* Охранное поле: высота «i» слева от знака до края полосы уже даёт --space-8 */
.nav nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.lang {
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--color-divider); border-radius: 999px;
  padding: 5px 12px; text-decoration: none; color: var(--color-neutral-700);
}
.lang:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ── общие блоки секций ── */
section { padding: var(--space-8); }
.kicker { color: var(--color-accent); margin-bottom: var(--space-2); }
.lede { font-size: 17px; color: var(--color-neutral-800); max-width: 68ch; }
.narrow { max-width: 700px; }
.en {
  font-size: 14px; color: var(--color-neutral-600);
  border-left: 3px solid var(--color-accent-300); padding-left: var(--space-3);
  max-width: 62ch; margin-block: var(--space-4);
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-4); }

/* ── герой ── */
.hero {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: var(--space-8); align-items: center;
  padding: var(--space-6) var(--space-8) var(--space-8);
}
.hero h1 { font-size: clamp(34px, 5.4vw, 58px); margin-bottom: var(--space-3); line-height: 1.05; }
/* Декоративный круг привязан к самой кнопке, а не к геометрии героя:
   ширина кнопки в русской и английской версиях разная, и любая привязка
   к полосе на одном языке съезжала на переключатель языка. */
.ds-organic .nav a.btn-primary { position: relative; }
.ds-organic .nav a.btn-primary::after {
  content: ""; position: absolute; z-index: -1;
  width: 56px; height: 56px; border-radius: 50%;
  right: -12px; bottom: -13px;
  background: var(--color-accent-2-300);
  pointer-events: none;
}
.hero-fig { position: relative; margin: 0; }
.hero-fig .plate {
  position: relative; display: block;
  border-radius: calc(var(--radius-lg) * 1.15); overflow: hidden;
  width: 100%; height: auto; aspect-ratio: 720 / 560;
  object-fit: cover;
  background: var(--color-surface);   /* подложка, пока изображение грузится */
}
.hero-fig figcaption {
  position: relative;
  margin-top: var(--space-2);
  font-size: 13px; color: var(--color-neutral-700);
}

/* ── статистика ── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); padding: 0 var(--space-8) var(--space-8); }
.stats .card { padding: var(--space-4) var(--space-6); }
.stats b { display: block; font-family: var(--font-heading); font-size: 25px; line-height: 1.15; }
.stats span { display: block; font-size: 13px; color: var(--color-neutral-700); margin-top: var(--space-1); }

/* ── сетки карточек ── */
.g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); max-width: 1000px; margin-top: var(--space-6); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); max-width: 1050px; margin-top: var(--space-6); }
.g3 .card, .g2 .card { padding: var(--space-4) var(--space-6); }
.g3.flat .card { background: var(--color-neutral-100); }
.card h4 { font-size: 18px; margin-bottom: var(--space-1); }
.card p { margin: 0; }

/* ── услуги ── */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.svc .card { padding: var(--space-6); }
.svc-art { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 16px; margin-bottom: var(--space-4); background: var(--color-neutral-100); }
.svc .card-title { font-size: 20px; }
.arrow { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--color-neutral-800); flex: 1; }
.arrow li::before { content: "→ "; color: var(--color-accent); }
.price {
  font-family: var(--font-heading); font-size: 22px; margin: 0;
  padding-top: var(--space-4); border-top: 1px solid var(--color-divider);
}
.price small { display: block; font-family: var(--font-body); font-size: 13px; color: var(--color-neutral-700); margin-top: 3px; }

/* ── процесс ── */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin-top: var(--space-6); }
.steps .card { padding: var(--space-4) var(--space-6); background: var(--color-accent-100); }
.steps .n { font-family: var(--font-heading); font-size: 22px; color: var(--color-accent); line-height: 1; }
.steps h4 { font-size: 16px; margin-block: var(--space-2) var(--space-1); }
.steps p { font-size: 13px; color: var(--color-neutral-800); }

/* ── таблицы ── */
.tw { overflow-x: auto; margin-top: var(--space-6); }
.tw .table { min-width: 560px; }

/* ── работы ── */
.work { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.work .card { padding: var(--space-6); }
.work .card-title { font-size: 20px; }
.work .tag { align-self: flex-start; }
.work .card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.work .card-meta span { background: var(--color-neutral-100); border-radius: 999px; padding: 2px 10px; }

/* ── инженер ── */
.sig { font-size: 14px; color: var(--color-neutral-700); border-top: 1px solid var(--color-divider); padding-top: var(--space-3); margin-top: var(--space-4); }

/* ── FAQ ── */
.faq { display: grid; gap: var(--space-2); max-width: 1000px; margin-top: var(--space-6); }
details { background: var(--color-surface); border-radius: calc(var(--radius-lg) * 1.15); padding: var(--space-4) var(--space-6); }
summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-heading); color: var(--color-accent); font-size: 20px; line-height: 1; flex: none; }
details[open] summary::after { content: "–"; }
details p { margin: var(--space-3) 0 0; font-size: 14px; color: var(--color-neutral-800); max-width: 74ch; }

/* ── контакт ── */
.talk { background: var(--color-surface); }
.talk-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; }
.talk blockquote { margin: 0; font-family: var(--font-heading); font-size: 22px; line-height: 1.25; color: var(--color-accent-800); }

/* ── подвал ── */
footer { padding: var(--space-6) var(--space-8) var(--space-8); }
.foot { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; font-size: 13px; color: var(--color-neutral-700); border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
.foot-links { display: flex; gap: var(--space-6); flex-wrap: wrap; }

/* ── переключатель подробности на странице кейсов ──
   Радиокнопки лежат в <main> перед секциями, а правила используют соседний
   комбинатор: он работает во всех браузерах. Прежний вариант на :has()
   у части пользователей просто ничего не переключал. */
.mode { position: absolute; opacity: 0; width: 0; height: 0; }

.switch { display: inline-flex; gap: 4px; margin-top: var(--space-6); padding: 4px;
  background: var(--color-surface); border-radius: 999px; }
.switch label {
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--color-neutral-700);
  transition: background .15s, color .15s;
}
.switch label:hover { color: var(--color-accent-700); }

/* Активная кнопка */
#m-plain:checked ~ * label[for="m-plain"],
#m-tech:checked  ~ * label[for="m-tech"] {
  background: var(--color-bg); color: var(--brand-medblue);
}
/* Фокус с клавиатуры: сам input невидим, обводку получает его подпись */
#m-plain:focus-visible ~ * label[for="m-plain"],
#m-tech:focus-visible  ~ * label[for="m-tech"] {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* Собственно переключение содержимого */
#m-plain:checked ~ * .tech  { display: none; }
#m-tech:checked  ~ * .plain { display: none; }

.plain p { font-size: 15.5px; color: var(--color-neutral-800); margin: 0 0 var(--space-3); }
.plain p:last-child { margin-bottom: 0; }

/* ── страница кейсов ── */
.case-head { padding: var(--space-8) var(--space-8) var(--space-6); }
.case-list { display: grid; gap: var(--space-4); max-width: 1000px; }
.case-list .card { padding: var(--space-6); gap: var(--space-3); }
.case-list h3 { font-size: 22px; margin: 0; }
.case-list .row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* Работы описаны связным текстом, а не парами «поле — значение»:
   описание списком определений читалось как анкета, а не как рассказ. */
.case-list p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--color-neutral-800); max-width: 70ch; }
.case-list .case-stack { font-size: 13px; color: var(--color-neutral-700); }
.case-disclaimer { max-width: 68ch; color: var(--color-neutral-700); }
.gated {
  background: var(--color-accent-2-100); border-radius: calc(var(--radius-lg) * 1.15);
  padding: var(--space-6); max-width: 1000px; margin-top: var(--space-6);
}
.gated h3 { font-size: 20px; margin-bottom: var(--space-2); }
.gated p { font-size: 14px; color: var(--color-accent-2-900); margin: 0; max-width: 74ch; }

/* ── адаптив ── */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .stats, .g3, .svc { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  section, .nav, footer { padding-inline: var(--space-4); }
  .hero { padding-inline: var(--space-4); grid-template-columns: 1fr; }
  .stats { padding-inline: var(--space-4); }
  .stats, .g2, .g3, .svc, .steps, .work, .talk-grid { grid-template-columns: 1fr; }
  .nav nav { gap: var(--space-3); }
  .nav nav a:not(.btn):not(.lang) { font-size: 13px; }
  .ds-organic .nav a.nav-brand { font-size: 32px; }   /* на узкой шапке 42px теснит навигацию */
}

/* ── печать ── */
@media print {
  body { background: #fff; }
  .sheet { max-width: none; }
  .nav nav, .btn-row, .hero-fig { display: none; }
  section { break-inside: avoid; }
  details { border: 1px solid #ccc; }
  details p { display: block; }
}

/* Minimal public profile, 2026-09-26. */
.skip-link { position:absolute; left:16px; top:-100px; z-index:10; padding:12px 18px; background:var(--color-bg); }
.skip-link:focus { top:8px; }
.steps h3 { font-size:16px; margin-block:var(--space-2) var(--space-1); }
.case-list h2 { font-size:24px; margin:0; }
.case-content { padding-top:0; }
:where(a, button, summary):focus-visible { outline:2px solid var(--brand-medblue); outline-offset:4px; }