/* ТрудДиалог. Стили строго по DESIGN-DNA.md проекта.
   Направление «На полях» с графтом «пунктир другой стороны».
   Mobile-first: базовые правила - мобильные, media queries расширяют вверх. */

/* ===== 1. Токены ===== */
:root{
  --bg:#F6F4EF;
  --bg-alt:#F1EEE7;
  --surface:#FBFAF7;
  --line:#DCD8CF;
  --line-strong:#C6C1B6;

  --ink-1:#1D2024;
  --ink-2:#454A52;
  --ink-3:#666A72;

  --accent:#2B3CC4;
  --accent-press:#1F2C9B;
  --accent-line:rgba(43,60,196,.38);
  --accent-wash:rgba(43,60,196,.07);

  --pencil:#7E838B;

  --r-ui:14px;
  --r-media:24px;

  --ease:cubic-bezier(.165,.84,.44,1);
  --t-micro:120ms; --t-state:240ms; --t-enter:620ms;

  --pad-x:20px; --col-main:640px; --col-aside:268px; --gap-cols:40px; --page:1180px;

  --fs-hero:clamp(34px,8.8vw,62px);
  --fs-h2:clamp(27px,6.4vw,42px);
  --fs-h3:clamp(20px,4.4vw,25px);
  --fs-lead:clamp(19px,4.6vw,21px);
  --fs-body:18px;
  --fs-note:16px;
  --fs-mono:15px;
  --fs-cap:15px;
}

/* ===== 2. База ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink-1);
  font:400 var(--fs-body)/1.7 "IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  overflow-x:clip;
}
img,picture,svg,video{max-width:100%;display:block}
a{color:var(--accent);text-decoration-color:var(--accent-line);text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--surface);padding:12px 18px;border-radius:var(--r-ui);z-index:100}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--page);margin:0 auto;padding-inline:var(--pad-x)}
.section{padding-block:88px}
.section--alt{background:var(--bg-alt)}

h1,h2,h3,h4{font-family:Spectral,Georgia,serif;font-weight:600;margin:0;text-wrap:balance;hyphens:none}
.h2{font-size:var(--fs-h2);line-height:1.18;letter-spacing:-.012em;margin-bottom:24px}
.h3{font-size:var(--fs-h3);line-height:1.3;margin-bottom:16px}
p{margin:0 0 20px}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);max-width:34em}
.lead--sm{font-size:var(--fs-note)}
.kicker{font-size:14px;color:var(--ink-2);margin-bottom:12px;max-width:30em}
@media (min-width:861px){.kicker{font-size:var(--fs-cap);margin-bottom:18px}}

/* ===== 3. Шапка ===== */
.topbar{position:sticky;top:0;z-index:40;background:rgba(246,244,239,.9);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.topbar__in{max-width:var(--page);margin:0 auto;padding:12px var(--pad-x);display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-1)}
.logo__mark{display:flex;color:var(--ink-1)}
.logo__text{font-family:Spectral,Georgia,serif;font-weight:600;font-size:20px;letter-spacing:-.01em}
.topnav{display:none;gap:22px;margin-left:auto;font-size:var(--fs-cap)}
.topnav a{color:var(--ink-2);text-decoration:none}
.topnav a:hover{color:var(--accent)}
.topbar__tel{margin-left:auto;font-size:var(--fs-cap);color:var(--ink-1);text-decoration:none;white-space:nowrap}

/* ===== 4. Кнопки и поля ===== */
.btn{
  display:inline-block;border-radius:var(--r-ui);padding:16px 24px;min-height:52px;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  font:500 17px/1.2 "IBM Plex Sans",sans-serif;text-decoration:none;text-align:center;
  transition:background-color var(--t-state) var(--ease);cursor:pointer;
}
.btn:hover{background:var(--accent-press)}
.btn--ghost{background:transparent;color:var(--accent);border-color:var(--accent-line)}
.btn--ghost:hover{background:var(--accent-wash)}
.btn--wide{width:100%}
.btn--sm{padding:12px 18px;min-height:44px;font-size:16px}

.field{
  width:100%;border-radius:var(--r-ui);border:1px solid var(--line-strong);background:var(--surface);
  padding:15px 16px;font:400 17px/1.5 "IBM Plex Sans",sans-serif;color:var(--ink-1);min-height:52px;
  transition:border-color var(--t-state) var(--ease);
}
.field:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
textarea.field{min-height:120px;resize:vertical}

/* ===== 5. HERO ===== */
/* на мобиле кадр не подложка, а нижняя полоса экрана: объект-герой обязан
   заглядывать в фолд, иначе первый экран превращается в текстовую страницу */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:hidden}
.hero__media{position:relative;z-index:0;height:clamp(190px,30svh,280px);order:2}
/* кадрируем так, чтобы в полосу попали САМИ листы с линиями, а не пустой стол:
   иначе внизу первого экрана остаётся безликая серая полоса */
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 96%}
/* низ кадра растворяется в фон страницы - шва не видно */
.hero__media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:120px;
  background:linear-gradient(180deg,rgba(246,244,239,0),var(--bg));
}
/* сигнатурная живость: очень медленный дрейф дневного света.
   Генеративное видео здесь заменено CSS сознательно: модели оживления
   добавляли в кадр посторонние сцены и резкие тени, а канон требует,
   чтобы двигался ТОЛЬКО свет. */
.hero__light{
  position:absolute;inset:-10%;pointer-events:none;
  background:radial-gradient(38% 30% at 30% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
  /* 54 секунды оказались незаметны за время просмотра секции: движение было,
     а видно его не было. 22 секунды - предел, при котором дрейф ещё «дорогой». */
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-6%,-3%,0) scale(1.02);opacity:.7}
  to{transform:translate3d(8%,5%,0) scale(1.14);opacity:1}
}
.hero__in{position:relative;z-index:2;order:1;width:100%;max-width:var(--page);margin:0 auto;padding:16px var(--pad-x) 18px;display:flex;align-items:center}
.hero__content{position:relative;max-width:640px}
.hero__h1{font-size:var(--fs-hero);line-height:1.1;letter-spacing:-.012em;margin-bottom:14px}
.hero__lead{font-size:clamp(19px,4.6vw,21px);line-height:1.6;color:var(--ink-2);margin-bottom:20px}
.hero__cta{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.hero__cta .btn--ghost{display:none}
.hero__note{font-size:14px;color:var(--ink-2)}
.facts{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.facts b{font-family:"IBM Plex Mono",monospace;font-weight:400;color:var(--ink-1);font-variant-numeric:tabular-nums;margin-right:8px}

/* ===== 6. Подход ===== */
.pillars{display:grid;gap:0;margin-top:12px}
.pillar{padding-block:28px;border-top:1px solid var(--line)}
.pillar h3{font-size:var(--fs-h3);margin-bottom:10px}
.pillar p{color:var(--ink-2);margin:0;max-width:38em}

/* ===== 7. Рамка «обе стороны» ===== */
.frame__media{margin:32px 0 0}
.frame__media img{width:100%;border-radius:var(--r-media)}
.microline{font-size:var(--fs-cap);color:var(--ink-2);border-left:2px solid var(--accent-line);padding-left:14px;margin-top:24px}

/* ===== 8. Документная секция и ПОЛЕ ДРУГОЙ СТОРОНЫ (сигнатурный приём) ===== */
.doc > p{max-width:34em}
.situations{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:0}
.situations li{padding:16px 0;border-top:1px solid var(--line);color:var(--ink-1);max-width:34em}
.situations li:last-child{border-bottom:1px solid var(--line)}

.aside-move{
  position:relative;
  margin:20px 0 24px 28px;
  margin-right:calc(var(--pad-x) * -1);
  padding:16px 20px 18px 18px;
  background:var(--bg-alt);
  border-left:2px dashed var(--pencil);
  border-radius:var(--r-media) 0 0 var(--r-media);
}
/* сигнатурный входной момент: линейка первой пометки дорисовывается сверху вниз */
.js .aside-move.is-drawing{border-left-color:transparent}
.js .aside-move.is-drawing::after{
  content:"";position:absolute;left:-2px;top:0;width:2px;height:0;
  background:repeating-linear-gradient(180deg,var(--pencil) 0 6px,transparent 6px 11px);
  transition:height 900ms var(--ease);
}
.js .aside-move.is-drawn::after{height:100%}
.section--alt .aside-move{background:var(--bg)}
.aside-move__label{
  font:500 13px/1 "IBM Plex Sans",sans-serif;letter-spacing:.06em;color:var(--ink-2);
  margin:0 0 10px;display:flex;gap:8px;align-items:center;
}
.aside-move__label::before{
  content:"";width:18px;height:2px;flex:none;
  background:repeating-linear-gradient(90deg,var(--pencil) 0 4px,transparent 4px 7px);
}
/* 17px, а не 16: на мобиле пометка не должна читаться как сноска мельче основного набора */
.aside-move__text{font:400 17px/1.55 "IBM Plex Sans",sans-serif;color:var(--ink-2);margin:0;max-width:52ch}
@media (min-width:861px){.aside-move__text{font-size:var(--fs-note)}}
.aside-move__src{
  font:400 var(--fs-mono)/1.5 "IBM Plex Mono",monospace;color:var(--ink-1);
  letter-spacing:.01em;margin:10px 0 0;font-variant-numeric:tabular-nums;
}
.permit{
  border-left:2px solid var(--accent-line);padding-left:16px;color:var(--ink-1);
  font-size:var(--fs-note);max-width:34em;margin-top:28px;
}
.link-arrow{font-weight:500;text-decoration:none;border-bottom:1px solid var(--accent-line);padding-bottom:2px}
.link-arrow::after{content:" →"}

/* ===== 9. Ситуации ===== */
.sitlist{list-style:none;margin:0;padding:0}
.sitlist li{padding:14px 0;border-top:1px solid var(--line);color:var(--ink-1)}
.sitlist li:last-child{border-bottom:1px solid var(--line)}

/* ===== 10. Услуги ===== */
.services{display:grid;gap:44px}
.srv{list-style:none;margin:0;padding:0}
.srv li{padding:14px 0 14px 24px;position:relative;color:var(--ink-2);border-top:1px solid var(--line)}
.srv li::before{content:"";position:absolute;left:0;top:24px;width:12px;height:1px;background:var(--ink-3)}
.srv b{color:var(--ink-1);font-weight:500}

/* ===== 11. Процесс: узловая карта ===== */
.steps{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.steps::before{content:"";position:absolute;left:3px;top:8px;bottom:8px;width:2px;background:var(--line)}
.steps__fill{position:absolute;left:3px;top:8px;width:2px;background:var(--accent);height:0}
.step{position:relative;padding-block:22px}
.step + .step{border-top:1px solid var(--line)}
.step__dot{position:absolute;left:-26px;top:30px;width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:background-color 600ms var(--ease)}
.step.is-on .step__dot{background:var(--accent)}
.step__h{font-size:var(--fs-h3);margin-bottom:8px}
.step p{color:var(--ink-2);max-width:34em}
.step__get{font-size:var(--fs-note);color:var(--ink-1)}
.step__get span{color:var(--ink-2);margin-right:6px}
.step__get span::after{content:":"}
.aside-move--step{margin-top:16px}

/* ===== 12. Почему доверяют ===== */
.trust{list-style:none;margin:0;padding:0}
.trust li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:24px 0;border-top:1px solid var(--line)}
.trust__num{font:400 30px/1 "IBM Plex Mono",monospace;color:var(--accent);font-variant-numeric:tabular-nums;min-width:64px}
.trust h3{font-size:var(--fs-h3);margin-bottom:8px}
.trust p{color:var(--ink-2);margin:0}

/* ===== 13. Основатель ===== */
.founder{display:grid;gap:28px}
.founder__fig{margin:0}
.founder__fig img{width:100%;border-radius:var(--r-media)}
.founder__fig figcaption{font-family:Spectral,Georgia,serif;font-style:italic;font-size:var(--fs-cap);color:var(--ink-2);margin-top:12px}
.founder__text p{color:var(--ink-2);max-width:34em}

/* ===== 14. Кейсы ===== */
.cases{display:grid;gap:16px;margin-bottom:40px}
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-media);padding:28px 24px;
  transition:border-color var(--t-state) var(--ease),background-color var(--t-state) var(--ease);
}
.tile:hover{border-color:var(--line-strong);background:#FFFEFC}
.tile__res{font-family:Spectral,Georgia,serif;font-weight:600;font-size:clamp(24px,5.6vw,30px);line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
.tile__how{font:400 var(--fs-mono)/1.5 "IBM Plex Mono",monospace;color:var(--ink-2);margin:0 0 18px}
.tile h4{font-size:19px;line-height:1.3;margin:0 0 10px}
.tile p{color:var(--ink-2);font-size:var(--fs-note);margin:0 0 12px}
.tile p:last-child{margin-bottom:0}
.tile__lbl{color:var(--ink-1);font-weight:500}
.tile__lbl::after{content:":";margin-right:4px}
.disclaimer{font-size:var(--fs-cap);color:var(--ink-2);max-width:44em;border-top:1px solid var(--line);padding-top:20px}

/* ===== 15. Отзывы ===== */
.rail-wrap{position:relative;margin-top:8px}
.rail-wrap::after{
  content:"";position:absolute;inset:0 0 0 auto;width:56px;pointer-events:none;
  background:linear-gradient(90deg,rgba(246,244,239,0),var(--bg));
}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--pad-x) 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rev{
  flex:0 0 84%;scroll-snap-align:start;margin:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-media);padding:24px 22px;
}
.rev p{font-size:var(--fs-note);color:var(--ink-1);margin:0 0 16px}
.rev footer{font-size:var(--fs-cap);color:var(--ink-1);font-weight:500}
.rev footer span{display:block;font-weight:400;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:13px;margin-top:4px}
.rail-nav{display:flex;gap:10px;margin-top:18px}
.rail-btn{
  width:48px;height:48px;border-radius:var(--r-ui);border:1px solid var(--line-strong);
  background:transparent;color:var(--ink-1);font-size:18px;cursor:pointer;
  transition:border-color var(--t-state) var(--ease),background-color var(--t-state) var(--ease);
}
.rail-btn:hover{border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}

/* ===== 16. FAQ ===== */
.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{
  list-style:none;cursor:pointer;padding:20px 36px 20px 0;position:relative;
  font-family:Spectral,Georgia,serif;font-weight:600;font-size:20px;line-height:1.35;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:2px;background:var(--ink-2);
  transition:transform var(--t-state) var(--ease);
}
.q summary::before{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:2px;background:var(--ink-2);
  transform:rotate(90deg);transition:opacity var(--t-state) var(--ease);
}
.q[open] summary::before{opacity:0}
.q__a{padding-bottom:22px}
.q__a p{color:var(--ink-2);margin:0;max-width:38em}

/* ===== 17. Форма ===== */
.form-wrap{max-width:660px}
.form__row{margin-bottom:18px}
.form__row label{display:block;font-size:var(--fs-cap);color:var(--ink-2);margin-bottom:8px}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;font-size:var(--fs-note);color:var(--ink-2);cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--accent)}
.honey{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form__note{font-size:var(--fs-cap);color:var(--ink-2);margin-top:14px}
.opt{color:var(--ink-3);font-size:13px}
.form__fine{font-size:14px;line-height:1.5;color:var(--ink-2);margin:-6px 0 18px 34px;max-width:34em}
.form__msg{font-size:var(--fs-note);margin-top:12px;color:var(--ink-1)}
.form__msg.is-err{color:#8A1F1F}
.form__done{border:1px solid var(--line);border-radius:var(--r-media);background:var(--surface);padding:28px 24px}
.form__done p{color:var(--ink-2);margin-bottom:14px}

/* ===== 18. Футер и липкая строка ===== */
.foot{background:var(--bg-alt);border-top:1px solid var(--line);padding-block:48px}
.foot__in{display:grid;gap:26px;font-size:var(--fs-cap)}
.foot__logo{font-family:Spectral,Georgia,serif;font-weight:600;font-size:22px;margin:0 0 4px}
.foot__sub{color:var(--ink-2);margin:0}
.foot__col p{margin:0 0 8px}
.foot__col a{color:var(--ink-1);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.foot__col a:hover{color:var(--accent);border-color:var(--accent-line)}
.foot__req{color:var(--ink-2)}

.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(246,244,239,.94);backdrop-filter:blur(8px);box-shadow:0 -1px 0 var(--line)}
.actionbar__in{max-width:var(--page);margin:0 auto;padding:10px var(--pad-x);display:flex;align-items:center;gap:14px;justify-content:space-between}
.actionbar__txt{font-size:var(--fs-cap);color:var(--ink-2)}

/* ===== 19. Появление ===== */
.js .reveal{opacity:0;transform:translateY(10px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity var(--t-enter) var(--ease),transform var(--t-enter) var(--ease)}

/* ===== 20. Планшет ===== */
@media (min-width:640px){
  .hero__cta{flex-direction:row;flex-wrap:wrap}
  .hero__cta .btn{flex:0 0 auto}
  .facts{grid-template-columns:1fr 1fr}
  .cases{grid-template-columns:1fr 1fr}
  .services{grid-template-columns:1fr 1fr;gap:40px}
  .foot__in{grid-template-columns:1fr 1fr;gap:32px}
  .rev{flex-basis:52%}
}

/* ===== 21. Десктоп ===== */
@media (min-width:861px){
  :root{--pad-x:32px}
  .section{padding-block:136px}
  .topnav{display:flex}
  .topbar__tel{margin-left:0}

  /* на десктопе кадр возвращается подложкой: в нём есть спокойная левая половина
     под текстовую колонку, а объект уходит вправо */
  .hero{min-height:92svh;display:flex;align-items:center}
  .hero__media{position:absolute;inset:0;height:auto;order:0}
  .hero__media img{object-position:70% 50%}
  .hero__media::after{height:160px}
  .hero__in{padding:0 var(--pad-x)}
  .hero__content{max-width:620px}
  .hero__content::before{
    content:"";position:absolute;inset:-8% -10% -10% -8%;z-index:-1;pointer-events:none;
    background:radial-gradient(72% 60% at 34% 48%,rgba(246,244,239,.94),rgba(246,244,239,.72) 58%,rgba(246,244,239,0) 90%);
    filter:blur(14px);
  }
  .hero__cta .btn--ghost{display:inline-block}
  .hero__lead{font-size:var(--fs-lead);line-height:1.6;margin-bottom:26px}
  .hero__note{font-size:var(--fs-cap)}
  .facts{grid-template-columns:repeat(4,auto);gap:26px;font-size:var(--fs-cap);margin-top:26px}

  .pillars{grid-template-columns:repeat(3,1fr);gap:32px}
  .pillar{border-top:1px solid var(--line)}

  .frame__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .frame__media{margin:0}

  /* документная сетка: пометка встаёт в своё поле напротив абзаца */
  .doc{display:grid;grid-template-columns:var(--col-main) var(--col-aside);column-gap:var(--gap-cols);align-items:start}
  .doc > *{grid-column:1}
  .doc > .aside-move{
    grid-column:2;margin:0 0 28px;background:transparent;border-radius:0;
    border-left:2px dashed var(--pencil);padding:2px 0 2px 20px;
  }
  .section--alt .doc > .aside-move{background:transparent}

  .sitlist{columns:2;column-gap:56px}
  .sitlist li{break-inside:avoid}

  .steps{padding-left:34px}
  .steps::before,.steps__fill{left:5px}
  .step__dot{left:-34px;width:10px;height:10px}
  .step{display:grid;grid-template-columns:var(--col-main) var(--col-aside);column-gap:var(--gap-cols);align-items:start}
  .step > *{grid-column:1}
  .step > .aside-move--step{grid-column:2;grid-row:1 / span 4;margin:0;background:transparent;border-radius:0;padding:2px 0 2px 20px}

  .trust li{grid-template-columns:96px 1fr;gap:32px}
  .trust__num{font-size:40px}

  .founder{grid-template-columns:380px 1fr;gap:56px;align-items:start}
  .cases{gap:20px}
  .rev{flex-basis:40%}
  .foot__in{grid-template-columns:1.4fr 1fr 1fr 1.2fr}
  .actionbar{display:none}
}

/* десктопная связка абзаца и его пометки: единственная интерактивность сайта */
@media (min-width:861px) and (pointer:fine){
  .doc > p:hover ~ .aside-move{border-left-color:var(--ink-2)}
  .aside-move{transition:border-left-color var(--t-micro) var(--ease)}
}

/* ===== 22. Сдержанность движения ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1!important;transform:none!important}
  .hero__light{animation:none;opacity:.85}
}

/* ===== 23. Печать ===== */
@media print{
  .topbar,.actionbar,.rail-nav,.hero__media{display:none}
  body{background:#fff}
  .aside-move{border-left:2px dashed #777;background:none}
}