/* ═══════════════════════════════════════════════════════════
   FERZON — «Экспедиция»
   Тёмный графит, оранжевый акцент, монохромный маскот.
   Шрифты системные, внешних файлов нет.
   ═══════════════════════════════════════════════════════════ */

/* ───── 1. ТОКЕНЫ ───── */
:root{
  --bg:#121417;
  --panel:#1A1E24;
  --panel-2:#22272F;
  --graphite:#24384D;
  --orange:#F7931E;
  --orange-hot:#FFB259;
  --orange-deep:#C2620A;
  --steel:#9AA4B2;
  --steel-dim:#868F9D;
  --white:#F2F4F7;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.045);

  --display:"Avenir Next","Futura","Century Gothic","Segoe UI",system-ui,sans-serif;
  --text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --radius:16px;
  --radius-s:10px;
  --pad:clamp(16px,4vw,60px);
  --maxw:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ───── 2. БАЗА ───── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--white);
  font:400 16px/1.65 var(--text);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure,dl{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--orange);color:#0B0D10}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);width:100%}
section{position:relative;padding-block:clamp(64px,8vw,132px)}

/* Пепел и искры идут фоном по всему сайту. Холст закреплён во вьюпорте
   и лежит под содержимым, поэтому фоны секций сделаны полупрозрачными. */
.embers{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.hdr,main,.ftr{position:relative;z-index:1}

.skip{
  position:fixed;top:-100px;left:16px;z-index:200;background:var(--orange);
  color:#0B0D10;padding:12px 20px;font-weight:700;border-radius:var(--radius-s);
  transition:top .2s;
}
.skip:focus{top:16px}

/* зерно */
body::after{
  content:"";position:fixed;inset:0;z-index:150;pointer-events:none;
  opacity:.04;mix-blend-mode:overlay;filter:grayscale(1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───── 3. ТИПОГРАФИКА ───── */
.eyebrow{
  display:flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel);margin-bottom:clamp(14px,1.6vw,22px);
}
.eyebrow i{color:var(--orange);font-style:normal;letter-spacing:0;font-weight:700}

.shead{
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.6vw,68px);line-height:1.02;letter-spacing:-.02em;
  margin-bottom:clamp(20px,2.6vw,36px);
}
.ssub{
  color:var(--steel);max-width:58ch;
  font-size:clamp(15px,1.2vw,18px);
  margin-bottom:clamp(30px,4vw,58px);
}

/* заливка текстурой внутри букв: чистый металл + бегущий блик,
   цвет блика — самый светлый тон той же оранжевой гаммы, белого нет */
.tex{color:var(--orange)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tex{
    color:transparent;
    background-image:
      linear-gradient(100deg,
        rgba(255,217,166,0) 38%,rgba(255,217,166,.55) 47%,
        #FFE3BC 50%,rgba(255,217,166,.55) 53%,rgba(255,217,166,0) 62%),
      radial-gradient(60% 130% at 18% -10%,#FFD9A6 0%,transparent 58%),
      radial-gradient(55% 120% at 86% 110%,var(--orange-deep) 0%,transparent 62%),
      linear-gradient(100deg,var(--orange) 0%,var(--orange-hot) 30%,#E27F0D 54%,#FFCC8E 74%,var(--orange) 100%);
    background-size:230% 100%,auto,auto,auto;
    /* исходное положение — блик уведён за букву, чтобы при
       отключённой анимации заливка оставалась ровной */
    background-position:-70% 0,0 0,0 0,0 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:tex-sheen 7s linear infinite;
  }
  @keyframes tex-sheen{
    0%{background-position:170% 0,0 0,0 0,0 0}
    100%{background-position:-70% 0,0 0,0 0,0 0}
  }
}

/* ───── 4. КНОПКИ ───── */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:999px;cursor:pointer;
  font-size:15px;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;transition:.3s var(--ease);
  text-align:center;
}
.pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;flex:none}
.pill--solid{background:var(--orange);color:#15100A;border-color:var(--orange)}
.pill--solid:hover{background:var(--orange-hot);border-color:var(--orange-hot);transform:translateY(-2px)}
.pill--ghost{border-color:var(--line);color:var(--white)}
.pill--ghost:hover{border-color:var(--orange);color:var(--orange)}
.pill--wide{width:100%}

/* круглая кнопка с вращающейся надписью */
.rbtn{
  position:relative;width:132px;height:132px;flex:none;
  display:grid;place-items:center;
}
.rbtn__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.rbtn__ring text{
  font-family:var(--text);font-size:9.2px;font-weight:700;
  letter-spacing:.19em;fill:var(--steel);text-transform:uppercase;
}
@keyframes spin{to{transform:rotate(360deg)}}
.rbtn__core{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:var(--orange);color:#15100A;transition:.35s var(--ease);
}
.rbtn__core svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.rbtn:hover .rbtn__core{background:var(--orange-hot);transform:scale(1.08)}
.rbtn:hover .rbtn__ring text{fill:var(--orange)}

/* ───── 5. ПРЕЛОАДЕР ───── */
.preloader{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  display:grid;place-content:center;gap:22px;justify-items:center;
  transition:opacity .6s var(--ease),visibility .6s;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__mark{
  width:clamp(84px,16vw,116px);height:auto;
  animation:badge-breathe 2.2s ease-in-out infinite;
}
@keyframes badge-breathe{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 18px rgba(247,147,30,.18))}
  50%{transform:scale(1.04);filter:drop-shadow(0 0 30px rgba(247,147,30,.4))}
}
.preloader__bar{width:170px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0;background:var(--orange)}

/* ───── 6. ХЕДЕР ───── */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:120;padding-block:14px;
  transition:background .35s,backdrop-filter .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:rgba(18,20,23,.78);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hdr__in{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);
}
.logo{display:flex;align-items:center;gap:10px;flex:none;position:relative;z-index:2}
.logo__fz{
  width:46px;height:auto;flex:none;border-radius:9px;
  transition:filter .35s var(--ease);
}
.logo:hover .logo__fz{filter:drop-shadow(0 0 14px rgba(247,147,30,.45))}
.logo__name{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.06em}

.nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,30px);margin-left:auto}
.nav a{
  font-size:14px;color:var(--steel);padding:8px 2px;position:relative;transition:color .25s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.nav a:hover,.nav a.is-active{color:var(--white)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1);transform-origin:left}

.nav__drop{position:relative;display:flex;align-items:center}
/* мостик, чтобы список не закрывался при движении курсора вниз */
.nav__drop::before{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:16px}

/* «Услуги» подсвечиваются так же, как остальные пункты — и когда курсор
   на самой ссылке, и когда он уже ушёл в раскрытый список */
.nav__drop:hover .nav__top,
.nav__drop:focus-within .nav__top{color:var(--white)}
.nav__drop:hover .nav__top::after,
.nav__drop:focus-within .nav__top::after{transform:scaleX(1);transform-origin:left}

.nav__menu{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:286px;padding:8px;border-radius:16px;
  background:rgba(20,23,28,.97);backdrop-filter:blur(16px);
  border:1px solid var(--line);
  box-shadow:0 26px 64px rgba(0,0,0,.6),0 0 0 1px rgba(247,147,30,.06);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
}
.nav__drop:hover .nav__menu,
.nav__drop:focus-within .nav__menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav__menu a{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:11px;
  font-size:14px;color:#C6CDD6;white-space:nowrap;
  transition:background .2s,color .2s,padding-left .25s var(--ease);
}
.nav__menu a::after{display:none}
.nav__menu a i{
  font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--orange);opacity:.7;min-width:20px;
}
.nav__menu a:hover{background:rgba(247,147,30,.1);color:var(--white);padding-left:18px}
.nav__menu a:hover i{opacity:1}

.hdr__cta{
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;
  font-size:14px;font-weight:600;white-space:nowrap;transition:.3s var(--ease);
}
.hdr__cta:hover{border-color:var(--orange);color:var(--orange)}

.burger{
  display:none;width:42px;height:42px;background:none;border:1px solid var(--line);
  border-radius:11px;padding:0;cursor:pointer;flex:none;
  position:relative;z-index:2;margin-left:auto;
}
.burger i{display:block;width:18px;height:1.5px;background:var(--white);margin:4px auto;transition:.3s var(--ease)}
.burger[aria-expanded="true"] i:first-child{transform:translateY(2.75px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-2.75px) rotate(-45deg)}

/* ───── 7. ХИРО ───── */
.hero{
  min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(96px,12vh,150px) clamp(40px,6vh,80px);
  overflow:hidden;isolation:isolate;
}
.sparks{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.hero__horizon{
  /* Купол начинаем ниже шапки: иначе на широких экранах его дуга
     наезжает на меню и телефон в хедере. */
  position:absolute;left:50%;top:clamp(84px,10vh,124px);width:150vw;height:110vw;
  transform:translateX(-50%);border-radius:50% 50% 0 0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 0%,rgba(247,147,30,.07),transparent 70%),
    linear-gradient(180deg,rgba(25,29,36,.82) 0%,rgba(21,24,29,.66) 42%,transparent 80%);
  box-shadow:0 -1px 0 rgba(247,147,30,.20);
}
.hero__glow{
  position:absolute;right:6%;top:18%;width:min(720px,68vw);aspect-ratio:1;
  border-radius:50%;z-index:-2;pointer-events:none;
  background:radial-gradient(circle,rgba(247,147,30,.20) 0%,rgba(247,147,30,.06) 42%,transparent 68%);
  filter:blur(10px);
}

.hero__in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,4vw,64px);align-items:center;
}
.hero__title{margin-bottom:clamp(18px,2.4vw,30px)}
.hero__title .tex{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(48px,8.4vw,124px);line-height:.94;letter-spacing:-.035em;
}
.hero__sub{
  display:block;margin-top:14px;
  font-family:var(--display);font-weight:600;
  font-size:clamp(19px,2.2vw,32px);line-height:1.16;letter-spacing:-.01em;
  color:var(--white);
}
.hero__lead{
  color:var(--steel);max-width:52ch;font-size:clamp(14.5px,1.15vw,17px);
  margin-bottom:clamp(24px,3vw,40px);
}
.hero__acts{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap}

.hero__fig{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center}
/* Аура: фон у кадра вырезан, поэтому свечение рисуем сами —
   фигура стоит в собственном оранжевом ореоле, а не на подложке. */
.hero__fig::before{
  content:"";position:absolute;inset:-16% -20% 6% -20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 44% 50% at 52% 46%,rgba(247,147,30,.22) 0%,rgba(247,147,30,.08) 40%,transparent 70%),
    radial-gradient(ellipse 30% 36% at 52% 42%,rgba(255,178,89,.18) 0%,transparent 62%);
  filter:blur(6px);
  animation:aura 7s ease-in-out infinite;
}
@keyframes aura{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}
/* Фигура и аппарат качаются вместе: иначе маскот «отрывается» от платформы.
   Обёртка сжимается по картинке, поэтому аппарат считает свой размер от неё,
   а не от колонки — важно на узких экранах, где у картинки задана высота. */
.hero__rig{
  position:relative;display:inline-block;max-width:100%;line-height:0;
  margin-bottom:var(--deck-drop);
  animation:hover-float 9s ease-in-out infinite;
}
/* высоту ограничиваем: вместе с аппаратом композиция должна помещаться в экран */
.hero__fig img{position:relative;z-index:2;display:block;
  width:auto;max-width:100%;height:auto;max-height:58svh;margin-inline:auto}
@keyframes hover-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ── Аппарат под ногами ── */
.hero__fig{--deck-w:150%;--deck-drop:26%}
.deck{
  position:absolute;left:50%;bottom:0;z-index:1;pointer-events:none;
  width:var(--deck-w);aspect-ratio:1;transform:translate(-50%,50%);
}
.deck svg{display:block;width:100%;height:100%;overflow:visible}
.deck .spin{transform-origin:400px 400px;animation:deck-spin 48s linear infinite}
@keyframes deck-spin{to{rotate:360deg}}

.deck .bolt{fill:#0E1217;stroke:rgba(200,214,232,.30);stroke-width:1.8}
.deck .bolt-hi{fill:rgba(214,226,240,.28)}
.deck .vent{fill:#080B0E;stroke:rgba(200,214,232,.16);stroke-width:1.2}
.deck .pit{fill:#080A0D;opacity:.9}
.deck .pit-lip{fill:none;stroke:rgba(200,214,232,.26);stroke-width:1.8}
/* фактура металла */
.deck .grain{mix-blend-mode:overlay;opacity:.85}
.deck .scratch{mix-blend-mode:soft-light;opacity:.7}
/* Свет в щелях между ступенями. Четыре группы со сдвигом по времени:
   пока одни трещины разгораются, другие остывают. */
.deck .lit{
  fill:none;stroke:var(--orange);stroke-width:19;stroke-linecap:round;
  filter:drop-shadow(0 0 12px rgba(247,147,30,.95));
  animation:deck-cool 5.5s ease-in-out infinite;
}
.deck .g0{animation-delay:0s}
.deck .g1{animation-delay:-1.5s;stroke:var(--orange-deep)}
.deck .g2{animation-delay:-2.9s;stroke:var(--orange-hot)}
.deck .g3{animation-delay:-4.2s}
@keyframes deck-cool{0%,100%{opacity:.14}45%{opacity:1}72%{opacity:.45}}
/* жар собран по ободу, ступица притушена */
.deck .rimlight{filter:drop-shadow(0 0 20px rgba(247,147,30,.55))}
.deck .core{opacity:.25}
.deck .core-ring{fill:none;stroke:rgba(154,164,178,.35);stroke-width:5}

.hero__cap{
  position:relative;z-index:3;margin-top:clamp(10px,1.4vw,18px);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
  text-shadow:0 1px 12px rgba(9,11,14,.95),0 0 3px rgba(9,11,14,.9);
}
.hero__cap i{color:var(--orange);font-style:normal;font-weight:700}

/* ───── 8. КАРТА МИССИЙ ───── */
.slash{border-block:1px solid var(--line);padding-block:clamp(28px,4vw,54px);background:rgba(16,18,22,.66)}
.slash__list{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  font-family:var(--display);font-weight:800;
  font-size:clamp(21px,3.2vw,50px);line-height:1.14;letter-spacing:-.02em;
  text-transform:uppercase;
}
.slash__list a{transition:color .3s var(--ease);position:relative}
.slash__list a:hover{color:var(--orange)}
.slash__list sup{
  font-size:.36em;color:var(--orange);margin-left:.18em;vertical-align:super;
  font-weight:700;letter-spacing:.04em;
}
.slash__list b{color:var(--steel-dim);font-weight:400}

/* ───── 9. МИССИИ ───── */
.mgrid{
  --g:clamp(12px,1.4vw,22px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);
}
.m{
  flex:1 1 calc((100% - var(--g) * 2) / 3);
  max-width:calc((100% - var(--g) * 2) / 3);
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;position:relative;isolation:isolate;
  transition:border-color .4s var(--ease),transform .5s var(--ease);
}
.m:hover{border-color:rgba(247,147,30,.5);transform:translateY(-4px)}
.m::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(120% 70% at 50% 0%,rgba(247,147,30,.14),transparent 62%);
  transition:opacity .45s var(--ease);
}
.m:hover::after{opacity:1}

.m__media{position:relative;aspect-ratio:2/3;overflow:hidden;background:#0A0B0D}
.m__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform .8s var(--ease),filter .5s;
  filter:contrast(1.08) brightness(1.02);
}
.m:hover .m__media img{filter:contrast(1.08) brightness(1.12)}
.m:hover .m__media img{transform:scale(1.045)}
.m__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(26,30,36,.92) 100%);
}

.m__body{position:relative;padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:9px;flex:1}
.m__num{
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-weight:700;
}
.m__name{
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(18px,1.7vw,27px);line-height:1.1;
}
.m__desc{color:var(--steel);font-size:14.5px;max-width:56ch}
.m__icon{
  position:absolute;right:clamp(14px,1.6vw,22px);top:0;transform:translateY(-58%);
  width:clamp(58px,5vw,74px);height:auto;border-radius:50%;
  background:#14171B;
  box-shadow:
    0 0 0 1px rgba(247,147,30,.38),
    0 0 26px rgba(247,147,30,.20),
    0 10px 26px rgba(0,0,0,.6);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.m:hover .m__icon{box-shadow:0 0 0 1px rgba(247,147,30,.7),0 0 34px rgba(247,147,30,.34),0 10px 26px rgba(0,0,0,.6)}
/* Иконки векторные и строго выровнены по сетке. Поворот на наведении
   читался бы как перекос, поэтому оставлено только увеличение. */
.m:hover .m__icon{transform:translateY(-58%) scale(1.06)}
.m__go{
  margin-top:auto;padding-top:12px;font-size:13px;font-weight:600;color:var(--steel-dim);
  transition:color .3s,letter-spacing .3s var(--ease);
}
.m:hover .m__go{color:var(--orange);letter-spacing:.02em}

/* ───── 10. ЗАЧЕМ ЭКСПЕДИЦИЯ ───── */
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px)}
.why__card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2vw,30px);transition:border-color .4s var(--ease),background .4s;
}
.why__card:hover{border-color:rgba(247,147,30,.4);background:var(--panel-2)}
.why__n{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(247,147,30,.12);color:var(--orange);
  font-family:var(--display);font-weight:800;font-size:14px;margin-bottom:16px;
}
/* На главной это h3 внутри секции, на странице «О производстве» — h2:
   там у блока нет своего заголовка выше. Вид один и тот же. */
.why__card h3,.why__card h2{
  font-family:var(--display);font-weight:800;font-size:clamp(16px,1.4vw,21px);
  line-height:1.16;margin-bottom:9px;
}
.why__card p{color:var(--steel);font-size:14.5px}

/* ───── 11. МАРШРУТ ───── */
.route__body{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:clamp(24px,3.4vw,56px);align-items:center}
.route__line{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:clamp(14px,1.6vw,24px);border-top:1px solid var(--line);
}
.rstep{position:relative;padding-top:24px}
.rstep::before{
  content:"";position:absolute;left:0;top:-4px;width:8px;height:8px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 4px rgba(247,147,30,.16);
}
.rstep__n{
  display:block;font-family:var(--display);font-weight:800;font-size:13px;
  letter-spacing:.14em;color:var(--orange);margin-bottom:8px;
}
.rstep h3{font-family:var(--display);font-weight:800;font-size:clamp(16px,1.3vw,20px);margin-bottom:8px}
.rstep p{color:var(--steel);font-size:14px}

.route__fig{position:relative;justify-self:end;max-width:240px}
.route__fig img{
  width:100%;height:auto;
  filter:contrast(1.1) brightness(1.08);
  -webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 46%,#000 34%,rgba(0,0,0,.7) 62%,transparent 88%);
          mask-image:radial-gradient(ellipse 70% 72% at 50% 46%,#000 34%,rgba(0,0,0,.7) 62%,transparent 88%);
}
.route__fig figcaption{
  display:flex;align-items:center;gap:8px;margin-top:-6px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dim);
}
.route__fig figcaption i{color:var(--orange);font-style:normal;font-weight:700}

/* ───── 12. МАТЕРИАЛЫ ───── */
.mats__list{border-top:1px solid var(--line);max-width:1080px}
.mats__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(16px,1.7vw,24px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease),background .3s;
}
.mats__list li:hover{padding-left:14px;background:rgba(247,147,30,.04)}
.mats__list span{
  font-family:var(--display);font-weight:800;font-size:clamp(17px,1.7vw,26px);letter-spacing:-.01em;
}
.mats__list b{font-weight:400;color:var(--steel);font-size:14.5px}
.mats__note{margin-top:22px;color:var(--steel-dim);font-size:14.5px;max-width:62ch}

/* ───── 13. ЖУРНАЛ ЭКСПЕДИЦИИ: карусель с подглядыванием ─────
   Три фиксированных .jcar__slot (см. index.html и carousel() в main.js).
   Роль слота — это только его ширина; при переключении она анимируется,
   и за счёт обычного flex-реflow активный слот «наезжает» влево, а слот-
   превью «въезжает» справа — без transform и без переклад��и DOM-узлов.
   Высота задана явно на БАЗОВОМ правиле .jcar__slot (не только на
   is-active): слот, что уходит в is-hidden, своё старое содержимое не
   перерисовывает (оно просто уезжает за край при width:0 — см. goTo() в
   main.js), и без явной высоты именно на каждой роли контейнер мог бы
   «поплыть» на высоту этого чужого контента через flex-stretch. Явная
   высота + overflow:hidden гарантируют, что карточка и превью-сосед
   всегда одного размера, каким бы ни было содержимое любого слота. */
.jrnl[hidden]{display:none}

.jcar{position:relative}

.jcar__track{display:flex;overflow:hidden;touch-action:pan-y}
.jcar__slot{
  flex:0 0 auto;width:0;height:clamp(360px,52vh,560px);overflow:hidden;position:relative;
  opacity:1;
  transition:width .5s var(--ease),margin .5s var(--ease),opacity .35s var(--ease);
}
.jcar--notransition .jcar__slot{transition:opacity .35s var(--ease)}
.jcar__slot--fade{opacity:0}

.jcar__slot.is-active,
.jcar__slot.is-peek{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
}
.jcar__slot.is-active{
  width:66%;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(16px,2vw,32px);align-items:center;
  padding:clamp(16px,1.8vw,28px);
}
.jcar__slot.is-peek{
  width:32%;margin-left:clamp(10px,1.6vw,22px);cursor:pointer;
  transition:width .5s var(--ease),margin .5s var(--ease),border-color .3s var(--ease),opacity .35s var(--ease);
}
.jcar__slot.is-peek:hover{border-color:rgba(247,147,30,.5)}
.jcar__slot.is-hidden{width:0;margin:0}

.jcar__num{
  position:absolute;top:clamp(12px,1.4vw,18px);right:clamp(14px,1.6vw,22px);z-index:2;
  font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.6vw,36px);line-height:1;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(247,147,30,.4);
  pointer-events:none;
}

.jcar__media{display:flex;flex-direction:column;gap:10px;min-width:0;height:100%}

/* Фото докадрировано под фиксированное соотношение сторон ещё при
   подготовке (prepare-images.py), поэтому object-fit:cover заполняет
   бокс целиком без пустых полей — и сам бокс, и заливка внутри него
   одинаковы у любого кейса. Полный некадрированный кадр остаётся
   доступен в лайтбоксе по клику. */
.jcar__shot{
  display:block;width:100%;padding:0;border:0;cursor:pointer;background:#0B0D10;
  border-radius:var(--radius-s);overflow:hidden;
  flex:1 1 auto;min-height:0;
}
.jcar__shot img{width:100%;height:100%;object-fit:cover;display:block}
.jcar__shot--none{
  flex:1 1 auto;min-height:0;border-radius:var(--radius-s);
  background:
    repeating-linear-gradient(112deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px),
    radial-gradient(ellipse 60% 60% at 50% 40%,#20242B,#0E1013 72%);
}

/* Не переносим на вторую строку: число фото в кейсе не должно менять
   высоту ряда миниатюр и, следовательно, высоту всей карточки. */
.jcar__thumbs{display:flex;gap:7px;flex:0 0 auto;flex-wrap:nowrap;overflow-x:auto}
.jcar__thumb{
  width:46px;flex:0 0 auto;aspect-ratio:1;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#0B0D10;
  transition:border-color .25s var(--ease),opacity .25s;
  opacity:.55;
}
.jcar__thumb img{width:100%;height:100%;object-fit:cover}
.jcar__thumb:hover{opacity:.85;border-color:rgba(247,147,30,.5)}
.jcar__thumb.is-on{opacity:1;border-color:var(--orange)}

.jcar__body{
  display:flex;flex-direction:column;gap:9px;min-width:0;height:100%;overflow:hidden;
  padding-right:clamp(28px,3.2vw,48px);
}
.jcar__missions{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);font-weight:700;
}
.jcar__title{
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(18px,1.9vw,28px);line-height:1.08;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.jcar__desc{
  color:var(--steel);font-size:clamp(13.5px,1vw,15.5px);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.jcar__specs{
  display:flex;flex-wrap:wrap;gap:8px 22px;
  margin-top:2px;padding-top:12px;border-top:1px solid var(--line);
}
.jcar__specs dt{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dim);
  margin-bottom:2px;
}
.jcar__specs dd{margin:0;font-size:14px;font-weight:600}

/* превью следующего кейса: только обложка + название поверх затемнения */
.jcar__peek{position:relative;height:100%}
.jcar__peek img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.42) saturate(.9);transition:filter .35s var(--ease);
}
.jcar__slot.is-peek:hover .jcar__peek img{filter:brightness(.56) saturate(1)}
.jcar__peek--none{
  background:
    repeating-linear-gradient(112deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px),
    radial-gradient(ellipse 60% 60% at 50% 40%,#20242B,#0E1013 72%);
}
.jcar__peekTitle{
  position:absolute;left:0;right:0;bottom:0;padding:16px 14px;
  background:linear-gradient(180deg,transparent,rgba(10,12,15,.92) 78%);
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(12.5px,1.15vw,15.5px);line-height:1.15;letter-spacing:-.005em;color:var(--white);
}

.jcar__arrow{
  position:absolute;top:0;bottom:52px;margin:auto 0;z-index:5;
  width:46px;height:46px;border-radius:50%;
  background:rgba(18,20,23,.72);border:1px solid var(--line);color:var(--white);
  display:grid;place-items:center;cursor:pointer;transition:.3s var(--ease);
}
.jcar__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.jcar__arrow:hover{background:var(--orange);border-color:var(--orange);color:#15100A}
.jcar__arrow--prev{left:clamp(-10px,-1.6vw,-6px)}
.jcar__arrow--next{right:clamp(-10px,-1.6vw,-6px)}

.jcar__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:clamp(14px,1.8vw,22px);
}
.jcar__dots{display:flex;gap:8px;align-items:center}
.jcar__dot{
  width:8px;height:8px;padding:0;border-radius:50%;
  background:var(--line);border:0;cursor:pointer;transition:.3s var(--ease);
}
.jcar__dot:hover{background:rgba(247,147,30,.5)}
.jcar__dot.is-on{background:var(--orange);width:22px;border-radius:5px}
.jcar__count{
  font-size:12.5px;letter-spacing:.08em;color:var(--steel-dim);
  font-variant-numeric:tabular-nums;
}

/* ───── 14. FAQ ───── */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__q{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:clamp(18px,1.9vw,26px) 52px clamp(18px,1.9vw,26px) 0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(16px,1.5vw,24px);line-height:1.3;letter-spacing:-.01em;
  position:relative;transition:color .3s;
}
.acc__q:hover{color:var(--orange)}
.acc__q::before,.acc__q::after{
  content:"";position:absolute;top:50%;background:var(--orange);
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.acc__q::before{right:10px;width:16px;height:2px;margin-top:-1px;border-radius:2px}
.acc__q::after{right:17px;width:2px;height:16px;margin-top:-8px;border-radius:2px}
.acc__q[aria-expanded="true"]::after{transform:rotate(90deg);opacity:0}
/* Раскрытие ответа: строка грида едет с 0fr до 1fr, высоту считает сам
   браузер. Раньше её замерял JS и проставлял в пикселях — из-за этого
   ответ обрезался, если содержимое менялось или менялась ширина окна
   (приходилось перемерять на resize). Обрезку берёт на себя вложенный
   div: у него overflow:hidden, а min-height:0 разрешает ему сжаться. */
.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc__item:has(.acc__q[aria-expanded="true"]) .acc__a{grid-template-rows:1fr}
.acc__a > div{overflow:hidden;min-height:0}
.acc__a p{color:var(--steel);max-width:74ch;padding-bottom:24px;font-size:15px}

/* ───── 15. СВЯЗЬ ───── */
.cta{overflow:hidden;isolation:isolate}
.cta__glow{
  position:absolute;left:50%;top:-10%;width:120vw;height:60vh;transform:translateX(-50%);
  background:radial-gradient(ellipse 46% 60% at 50% 0%,rgba(247,147,30,.13),transparent 70%);
  z-index:-1;pointer-events:none;
}
.cta__in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.4vw,80px);align-items:start}
.cta__title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(34px,5vw,78px);line-height:.98;letter-spacing:-.03em;
}
.cta__lead{color:var(--steel);margin-top:18px;max-width:44ch;font-size:clamp(14.5px,1.15vw,17px)}
.cta__contacts{margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--line)}
.cta__contacts li{
  display:flex;gap:18px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.cta__contacts span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim)}
.cta__contacts a,.cta__contacts b{
  font-weight:600;font-size:clamp(15px,1.2vw,19px);text-align:right;transition:color .25s;
}
.cta__contacts a:hover{color:var(--orange)}

.form{
  display:flex;flex-direction:column;gap:17px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2.4vw,38px);
}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim)}
/* Подсказка «— если удобнее письмом» в подписи необязательного поля:
   тем же кеглем, но без капса и тише основной подписи. */
.field label i{font-style:normal;text-transform:none;letter-spacing:normal;opacity:.72}
.field input,.field select,.field textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:13px 14px;font-size:16px;transition:border-color .3s;resize:vertical;
}
.field select{
  cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F7931E' stroke-width='1.7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field select option{background:#14171B;color:var(--white)}
.field input::placeholder,.field textarea::placeholder{color:#4A525C}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--orange)}
.field.is-bad input{border-color:#E2564B}
.field__err{color:#E2564B;font-size:12.5px;display:none}
.field.is-bad .field__err{display:block}
.form__note{color:var(--steel-dim);font-size:12px;line-height:1.5}

/* Согласие на обработку персональных данных: отдельная галочка, заранее
   не проставленная. Без неё форма не отправляется. */
/* .consent — это тоже label внутри .field, поэтому гасим капс и разрядку,
   которые заданы для подписей полей. */
.field .consent{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  text-transform:none;letter-spacing:normal;
}
.consent input{
  flex:none;width:19px;height:19px;margin-top:1px;accent-color:var(--orange);cursor:pointer;
}
.consent span{
  font-size:12.5px;line-height:1.5;color:var(--steel-dim);
  text-transform:none;letter-spacing:normal;
}
.consent a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--orange)}
.field--consent.is-bad .consent input{outline:2px solid #E2564B;outline-offset:2px}
.form__ok{
  color:var(--orange);border:1px solid var(--orange);border-radius:var(--radius-s);
  padding:13px 16px;font-size:14px;text-align:center;
}
.form__ok[hidden]{display:none}

/* Заявка не ушла: сообщение с прямыми контактами вместо ложного «принято». */
.form__bad{
  color:#FF9B9B;border:1px solid rgba(255,90,90,.55);border-radius:var(--radius-s);
  padding:13px 16px;font-size:14px;text-align:center;line-height:1.5;
}
.form__bad a{color:#FFC9C9;text-decoration:underline}
.form__bad[hidden]{display:none}

/* Поле-ловушка для спам-роботов: людям не показывается, но и не display:none —
   иначе робот поймёт, что его не надо заполнять. */
.field--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ───── 15.1. БАННЕР АНАЛИТИКИ ─────
   Полоса внизу экрана. Сайт не перекрывает: читать и листать можно,
   не отвечая на вопрос, — просто счётчик тогда не запустится. */
.cbar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:rgba(18,20,23,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:clamp(14px,2vw,20px) var(--pad);
}
.cbar[hidden]{display:none}
.cbar__in{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
}
.cbar__text{flex:1;min-width:0;font-size:13.5px;line-height:1.55;color:var(--steel)}
.cbar__text b{color:var(--white);font-weight:600}
.cbar__text a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}
.cbar__text a:hover{color:var(--orange)}
.cbar__acts{display:flex;gap:10px;flex:none}
.cbtn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;cursor:pointer;white-space:nowrap;
  font:600 14px/1 var(--text);border:1px solid transparent;
  transition:.3s var(--ease);
}
.cbtn--yes{background:var(--orange);color:#15100A;border-color:var(--orange)}
.cbtn--yes:hover{background:var(--orange-hot);border-color:var(--orange-hot)}
.cbtn--no{background:transparent;color:var(--steel);border-color:var(--line)}
.cbtn--no:hover{color:var(--white);border-color:var(--steel-dim)}
@media (max-width:820px){
  .cbar__in{flex-direction:column;align-items:stretch;gap:14px}
  .cbar__acts{flex-direction:column-reverse}
  .cbtn{width:100%;padding:14px 22px}
}

/* ───── 16. ФУТЕР ─────
   Подвал — это конец страницы, а не отдельная страница. Поэтому он
   собран плотно: четыре колонки ссылок, порода с подписью и одна
   служебная зона снизу, где живут реквизиты и юридические ссылки. */
.ftr{border-top:1px solid var(--line);padding-top:clamp(28px,3vw,40px);overflow:hidden}
.ftr__top{display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr;gap:clamp(18px,2.2vw,34px)}
.ftr__col{display:flex;flex-direction:column;gap:6px}
.ftr__cap{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim);margin-bottom:3px}
.ftr__col a,.ftr__col b{font-weight:400;color:#C6CDD6;font-size:14.5px;line-height:1.4;transition:color .25s}
.ftr__col a:hover{color:var(--orange)}
/* Семь услуг в один столбец растягивают подвал вдвое — пускаем их в два. */
.ftr__col--wide{display:block;columns:2;column-gap:clamp(14px,1.6vw,24px)}
.ftr__col--wide .ftr__cap{display:block;column-span:all}
.ftr__col--wide a{display:block;margin-bottom:7px;break-inside:avoid}

/* Порода неизвестной планеты: три гряды, тёплое зарево из разломов
   и светящиеся трещины спящего вулкана. Всё на CSS, картинок нет. */
.crust{
  position:relative;height:clamp(80px,7.2vw,102px);margin-top:clamp(18px,2vw,28px);
  overflow:hidden;isolation:isolate;
}
.crust__glow{
  position:absolute;left:50%;bottom:-42%;width:130%;height:130%;
  transform:translateX(-50%);z-index:0;
  background:radial-gradient(ellipse 44% 50% at 50% 100%,
    rgba(247,147,30,.30) 0%,rgba(247,147,30,.10) 38%,transparent 70%);
  filter:blur(10px);
  animation:crust-breathe 9s ease-in-out infinite;
}
@keyframes crust-breathe{0%,100%{opacity:.75}50%{opacity:1}}

.crust__ridge{position:absolute;left:-4%;right:-4%;bottom:0;z-index:1}
.crust__ridge--far{
  height:74%;background:#1D2128;
  clip-path:polygon(0 62%,8% 44%,16% 58%,27% 26%,36% 50%,48% 20%,59% 46%,70% 28%,81% 52%,91% 36%,100% 58%,100% 100%,0 100%);
}
.crust__ridge--mid{
  height:54%;background:#171A20;
  clip-path:polygon(0 70%,9% 48%,18% 64%,29% 36%,40% 60%,52% 32%,63% 58%,74% 38%,85% 62%,94% 44%,100% 66%,100% 100%,0 100%);
}
.crust__ridge--near{
  height:34%;background:var(--bg);
  clip-path:polygon(0 76%,11% 54%,22% 70%,34% 46%,46% 68%,58% 42%,70% 66%,82% 48%,92% 70%,100% 54%,100% 100%,0 100%);
}

/* Трещины: тонкие светящиеся разломы, из которых и идут искры */
.crust__crack{
  position:absolute;bottom:0;z-index:2;width:2px;transform-origin:bottom center;
  background:linear-gradient(0deg,
    rgba(255,190,110,.95) 0%,rgba(247,147,30,.7) 34%,rgba(247,147,30,.18) 68%,transparent 100%);
  filter:blur(1.2px);
  animation:crack-pulse 5s ease-in-out infinite;
}
.crust__crack::after{
  content:"";position:absolute;left:50%;bottom:-6px;width:78px;height:34px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 60% at 50% 100%,rgba(255,170,70,.55),transparent 72%);
  filter:blur(5px);
}
.crust__crack--1{left:23%;height:36%;transform:rotate(-7deg);animation-delay:0s}
.crust__crack--2{left:52%;height:52%;transform:rotate(4deg);animation-delay:1.6s}
.crust__crack--3{left:77%;height:30%;transform:rotate(-3deg);animation-delay:3.1s}
@keyframes crack-pulse{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

/* Подпись поверх породы */
.ftr__sign{
  position:relative;z-index:3;margin-top:clamp(-58px,-5vw,-40px);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding-inline:var(--pad);text-align:center;
}
.ftr__badge{
  width:clamp(58px,5.4vw,76px);height:auto;display:block;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));
}
.ftr__claim{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(14px,1.3vw,18px);letter-spacing:.02em;
}
.ftr__place{color:var(--steel-dim);font-size:12.5px;letter-spacing:.04em}

/* Служебная зона: реквизиты, юридические ссылки и копирайт одним блоком. */
.ftr__bot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px clamp(18px,2.4vw,40px);
  margin-top:clamp(16px,1.8vw,26px);padding-block:clamp(12px,1.4vw,18px);
  border-top:1px solid var(--line);color:var(--steel-dim);font-size:12.5px;
}
.ftr__req{display:flex;flex-wrap:wrap;gap:4px 14px}
.ftr__req b{font-weight:400}
.ftr__req i{font-style:normal;color:rgba(255,255,255,.18)}
.ftr__links{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:flex-end}
.ftr__links a{transition:color .25s}
.ftr__links a:hover{color:var(--orange)}
.ftr__copy{grid-column:1/-1;color:rgba(154,164,178,.62)}

@media (max-width:860px){
  .ftr__top{grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,26px) clamp(18px,3vw,30px)}
  .ftr__col--wide{grid-column:1/-1}
  /* На узком экране длинные списки идут в два столбца — иначе подвал
     вытягивается на полтора экрана. */
  .ftr__col--split{grid-column:1/-1;display:block;columns:2;column-gap:clamp(14px,3vw,24px)}
  .ftr__col--split .ftr__cap{display:block;column-span:all}
  .ftr__col--split a{display:block;margin-bottom:6px;break-inside:avoid}
  .ftr__bot{grid-template-columns:1fr}
  .ftr__links{justify-content:flex-start}
}
@media (max-width:360px){
  .ftr__top{grid-template-columns:1fr}
  .ftr__col--wide{columns:2}
}

/* ───── 17. БРИФ МИССИИ ───── */
.lb{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:var(--pad)}
.lb[hidden]{display:none}
.lb__bd{position:absolute;inset:0;background:rgba(10,12,15,.9);backdrop-filter:blur(6px);animation:fade .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb__box{
  position:relative;width:min(980px,100%);max-height:88svh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  display:grid;grid-template-columns:.88fr 1.12fr;animation:pop .4s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.lb__media{background:#0E1013;overflow:hidden;display:grid;place-items:center}
.lb__media img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.lb__info{padding:clamp(22px,2.6vw,42px);display:flex;flex-direction:column;gap:14px}
.lb__num{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-weight:700}
.lb__title{font-family:var(--display);font-weight:800;font-size:clamp(23px,2.6vw,40px);line-height:1.02;letter-spacing:-.02em}
.lb__brief{color:var(--steel);font-size:15px}
.lb__acts{display:flex;flex-wrap:wrap;gap:10px}
.lb__acts .pill{flex:0 1 auto}
#lbStudy[hidden]{display:none}
.lb__nav{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px}
.lb__arrow{
  width:44px;height:44px;border-radius:50%;background:none;border:1px solid var(--line);
  cursor:pointer;font-size:17px;transition:.3s var(--ease);
}
.lb__arrow:hover{background:var(--orange);border-color:var(--orange);color:#15100A}
.lb__count{color:var(--steel-dim);font-size:13px;letter-spacing:.08em}
.lb__x{
  position:absolute;right:12px;top:12px;z-index:3;width:40px;height:40px;border-radius:50%;
  background:rgba(18,20,23,.72);border:1px solid var(--line);cursor:pointer;
  font-size:22px;line-height:1;transition:.3s var(--ease);
}
.lb__x:hover{background:var(--orange);border-color:var(--orange);color:#15100A}

/* ───── 17а. ГАЛЕРЕЯ ФОТО КЕЙСА ─────
   Полноэкранный просмотр по клику на фото в карусели: полный
   некадрированный кадр (*-full.webp) целиком, без кадрирования, —
   в отличие от .lb__media с cover, фото заказчиков резать нельзя.

   Раскладка — колонка на всю высоту окна: сцена забирает свободную
   высоту (min-height:0, иначе она распирается картинкой), подвал со
   счётчиком и миниатюрами всегда идёт под ней. Поэтому кадр любой
   пропорции вписывается в остаток экрана, а управление не может
   уехать за нижнюю кромку. Боковые поля шириной с кнопку —
   коридоры для стрелок и крестика, чтобы они не ложились на фото.
   Высота в dvh: на телефоне адресная строка не срезает низ. */
.pgal{
  --pgal-btn:48px;                                     /* диаметр круглых кнопок */
  --pgal-gap:clamp(6px,1vw,14px);                      /* зазор кнопки от края */
  --pgal-side:calc(var(--pgal-btn) + clamp(8px,2vw,30px));  /* коридор под кнопки */
  --pgal-edge:clamp(12px,2.2vh,26px);                  /* поле сверху и снизу */
  position:fixed;inset:0;z-index:190;
  height:100vh;height:100dvh;
  box-sizing:border-box;overscroll-behavior:contain;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.4vh,16px);
  padding:
    calc(var(--pgal-edge) + env(safe-area-inset-top))
    calc(var(--pgal-side) + env(safe-area-inset-right))
    calc(var(--pgal-edge) + env(safe-area-inset-bottom))
    calc(var(--pgal-side) + env(safe-area-inset-left));
}
.pgal[hidden]{display:none}
.pgal__bd{position:absolute;inset:0;background:rgba(6,7,9,.93);backdrop-filter:blur(6px);animation:fade .3s}
.pgal__stage{
  position:relative;z-index:1;
  flex:1 1 auto;min-height:0;
  width:100%;max-width:1100px;
  display:flex;align-items:center;justify-content:center;
  animation:pop .4s var(--ease);
}
/* Панель надета на саму фотографию, а не на сцену: при width/height:auto
   кадр сохраняет натуральный размер (мелкие не растягиваются), а
   max-width/max-height вписывают его в свободную область — рамка
   обнимает кадр любой пропорции, пустой коробки вокруг не остаётся. */
.pgal__stage img{
  width:auto;height:auto;max-width:100%;max-height:100%;
  padding:clamp(8px,1.4vw,18px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  display:block;
}
/* пока кадр грузится, у картинки нет своего размера — держим панели
   скромный минимум, чтобы она не мигала крошечным квадратом */
.pgal__stage.is-loading img{min-width:min(280px,60vw);min-height:min(200px,40vh)}
.pgal__x{
  position:absolute;z-index:3;
  top:calc(env(safe-area-inset-top) + var(--pgal-edge));
  right:calc(env(safe-area-inset-right) + var(--pgal-gap));
  width:var(--pgal-btn);height:var(--pgal-btn);border-radius:50%;
  background:rgba(18,20,23,.72);border:1px solid var(--line);cursor:pointer;color:var(--white);
  font-size:22px;line-height:1;transition:.3s var(--ease);
}
.pgal__x:hover{background:var(--orange);border-color:var(--orange);color:#15100A}
.pgal__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:var(--pgal-btn);height:var(--pgal-btn);border-radius:50%;font-size:19px;
  background:rgba(18,20,23,.72);border:1px solid var(--line);color:var(--white);
  display:grid;place-items:center;cursor:pointer;transition:.3s var(--ease);
}
.pgal__arrow:hover{background:var(--orange);border-color:var(--orange);color:#15100A}
.pgal__arrow--prev{left:calc(env(safe-area-inset-left) + var(--pgal-gap))}
.pgal__arrow--next{right:calc(env(safe-area-inset-right) + var(--pgal-gap))}
.pgal__foot{
  position:relative;z-index:2;flex:0 0 auto;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.pgal__count{color:var(--steel-dim);font-size:13px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.pgal__thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:100%}
.pgal__thumb{
  width:52px;aspect-ratio:1;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0B0D10;
  opacity:.55;transition:opacity .25s,border-color .25s var(--ease);
}
.pgal__thumb img{width:100%;height:100%;object-fit:cover}
.pgal__thumb:hover{opacity:.85;border-color:rgba(247,147,30,.5)}
.pgal__thumb.is-on{opacity:1;border-color:var(--orange)}

/* ───── 18. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ───── */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ───── 19. АДАПТИВ ───── */
@media (max-width:1150px){
  .hero__in{grid-template-columns:1fr;gap:clamp(24px,5vw,48px)}
  .hero__fig{max-width:400px;margin-inline:auto;order:-1}
  /* высоту ограничиваем, иначе заголовок уходит под сгиб */
  .hero__fig img{max-height:40svh;width:auto;margin-inline:auto}
  .hero__rig{animation:none}
  .mgrid{grid-template-columns:repeat(4,1fr)}
    .why__grid{grid-template-columns:repeat(2,1fr)}
  .route__body{grid-template-columns:1fr}
  .route__fig{max-width:250px;margin-inline:auto;justify-self:center}
}

@media (max-width:900px){
  .nav{
    position:fixed;inset:0 0 auto;top:0;padding:92px var(--pad) 34px;
    background:var(--bg);flex-direction:column;gap:0;margin:0;
    transform:translateY(-102%);transition:transform .5s var(--ease);
    border-bottom:1px solid var(--line);
  }
  .nav.is-open{transform:none}
  .nav a{
    font-family:var(--display);font-weight:800;font-size:24px;color:var(--white);
    padding-block:15px;border-bottom:1px solid var(--line);
  }
  .nav a::after{display:none}

  .nav__drop{position:static}
  .nav__drop::before{display:none}
  .nav__top::after{display:none}
  .nav__menu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;padding:6px 0 14px;margin:0;
    background:none;backdrop-filter:none;border:0;box-shadow:none;
    border-bottom:1px solid var(--line);
  }
  .nav__menu a{
    font-family:var(--text);font-weight:400;font-size:15px;
    padding:9px 0 9px 14px;border:0;color:var(--steel);
  }
  .nav__menu a:hover{background:none;padding-left:18px}

  .burger{display:block}
  .hdr__cta{display:none}
  .hdr.is-stuck{background:rgba(18,20,23,.96);backdrop-filter:none}

  .cta__in{grid-template-columns:1fr}
  .lb__box{grid-template-columns:1fr;max-height:86svh}
  .lb__media{aspect-ratio:16/10}

  /* Только на узком экране фото и текст встают друг под другом:
     карточке нужно больше высоты, чем бок о бок. Строки грида —
     номер и текст по контенту, фото забирает остаток (minmax(0,1fr)),
     поэтому под миниатюрами не остаётся пустоты.
     До 900px карточка сохраняет обычный вид: большой кадр слева,
     описание справа. */
  .jcar__slot{height:clamp(560px,78vh,700px)}
  .jcar__slot.is-active{
    width:72%;
    grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;
  }
  .jcar__slot.is-peek{width:25%;margin-left:12px}
  .jcar__body{padding-right:0;height:auto}
  .jcar__num{
    position:static;order:-1;margin-bottom:-6px;
    -webkit-text-stroke-color:rgba(247,147,30,.5);font-size:26px;
  }
  .jcar__shot,.jcar__shot--none{flex:1 1 auto;min-height:clamp(190px,32vh,300px)}
  .pgal{--pgal-btn:42px}
  .pgal__thumb{width:44px}
}

@media (max-width:640px){
  .m{flex-basis:100%;max-width:100%}
  .m__media{aspect-ratio:3/4}
  .why__grid{grid-template-columns:1fr}
  .hero__fig{max-width:270px;--deck-w:140%;--deck-drop:24%}
  .hero__fig img{max-height:34svh}
  .hero__acts{gap:16px}
  .rbtn{width:112px;height:112px}
  .rbtn__core{width:56px;height:56px}
  .cta__contacts li{flex-direction:column;gap:4px;align-items:flex-start}
  .cta__contacts a,.cta__contacts b{text-align:left}
  .mats__list li{flex-direction:column;gap:4px}
  .mats__list li:hover{padding-left:0}

  /* Пропорция сужается до тонкой полосы-подсказки, а не пропадает —
     свайп становится основным способом переключения на телефоне. */
  .jcar__slot.is-active{width:80%}
  .jcar__slot.is-peek{width:16%;margin-left:8px}
  .jcar__peekTitle{display:none}
  .jcar__shot,.jcar__shot--none{flex:1 1 auto;min-height:clamp(170px,30vh,240px)}
  .jcar__title{font-size:clamp(17px,4.4vw,22px)}

  /* стрелкам некуда деться сбоку от узкой фотографии, не перекрывая
     текст, — переезжают вниз, на высоту точек и счётчика */
  .jcar__arrow{
    top:auto;bottom:0;width:34px;height:34px;
  }
  .jcar__arrow--prev{left:0}
  .jcar__arrow--next{right:0}
  .jcar__foot{padding-inline:44px;justify-content:center;gap:16px}

  /* На телефоне ширина дороже высоты: стрелки уезжают вниз, к
     миниатюрам, боковые коридоры больше не нужны, и кадр получает
     почти всю ширину экрана. Сверху остаётся полоса под крестик. */
  .pgal{
    --pgal-btn:38px;
    --pgal-side:clamp(10px,3vw,18px);
    padding-top:calc(var(--pgal-btn) + var(--pgal-edge) + env(safe-area-inset-top));
  }
  .pgal__arrow{
    top:auto;transform:none;font-size:16px;
    bottom:calc(env(safe-area-inset-bottom) + var(--pgal-edge));
  }
  .pgal__x{font-size:19px}
  .pgal__foot{padding-inline:calc(var(--pgal-btn) + 12px)}
  .pgal__thumb{width:38px}
}

/* Низкое окно — обычно телефон в альбомной ориентации. Подвал и поля
   ужимаются, чтобы на кадр осталась основная часть высоты. */
@media (max-height:520px){
  .pgal{--pgal-edge:10px;--pgal-btn:36px;gap:8px}
  .pgal__foot{gap:6px}
  .pgal__count{font-size:12px}
  .pgal__thumb{width:32px}
}

/* ───── 20. УМЕНЬШЕНИЕ ДВИЖЕНИЯ ───── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .sparks{display:none}
  .rbtn__ring{animation:none}
  .hero__fig::before{animation:none;opacity:.9}
  /* аппарат не крутится и не мигает, но свет в щелях остаётся виден */
  .hero__rig,.deck .spin{animation:none}
  .deck .lit{animation:none;opacity:.8}
  .embers{display:none}
  .crust__glow,.crust__crack{animation:none;opacity:.85}
}

/* ═══════════════════════════════════════════════════════════
   22. СТРАНИЦЫ МИССИЙ
   Отдельная страница на каждую услугу: missions/*.html
   ═══════════════════════════════════════════════════════════ */

.mhero{
  padding-block:clamp(110px,13vh,170px) clamp(40px,5vw,72px);
  overflow:hidden;isolation:isolate;background:var(--bg);
}
.mhero__glow{
  position:absolute;right:4%;top:6%;width:min(640px,62vw);aspect-ratio:1;
  border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(247,147,30,.17) 0%,rgba(247,147,30,.05) 44%,transparent 70%);
  filter:blur(8px);
}
.mhero__in{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(20px,4vw,64px);align-items:center;
}
.mhero .eyebrow{flex-wrap:wrap;gap:8px 14px}
.mhero__back{
  color:var(--steel-dim);border-bottom:1px solid transparent;transition:.25s var(--ease);
}
.mhero__back:hover{color:var(--orange);border-bottom-color:var(--orange)}
.mhero__back::before{content:"← "}
.mhero__title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(34px,5.6vw,86px);line-height:.98;letter-spacing:-.03em;
  margin-bottom:clamp(14px,1.8vw,24px);
}
.mhero__lead{
  color:var(--steel);max-width:52ch;font-size:clamp(15px,1.2vw,18px);
  margin-bottom:clamp(22px,2.6vw,36px);
}
.mhero__acts{display:flex;flex-wrap:wrap;gap:12px}

.mhero__fig{position:relative;isolation:isolate}
.mhero__fig::before{
  content:"";position:absolute;inset:-10% -12%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 58% 60% at 52% 48%,
    #090B0E 0%,rgba(9,11,14,.9) 42%,rgba(9,11,14,.45) 66%,transparent 82%);
}
.mhero__fig img{
  position:relative;z-index:1;width:100%;height:auto;
  max-height:62vh;width:auto;margin-inline:auto;
  filter:contrast(1.05) brightness(1.04);
  -webkit-mask-image:radial-gradient(ellipse 66% 70% at 52% 47%,#000 40%,rgba(0,0,0,.72) 66%,transparent 90%);
          mask-image:radial-gradient(ellipse 66% 70% at 52% 47%,#000 40%,rgba(0,0,0,.72) 66%,transparent 90%);
}
.mhero__fig .mhero__icon{
  position:absolute;left:7%;bottom:17%;z-index:2;
  width:clamp(60px,6vw,86px);height:auto;max-height:none;margin:0;border-radius:50%;background:#14171B;
  /* Иконка лежит внутри .mhero__fig и иначе забирает себе оформление,
     написанное для кадра маскота: подтяжку контраста и мягкую растушёвку
     краёв со смещённым центром. Фотографии это идёт, векторному бейджу —
     нет: край круга размывается неровно. Гасим оба свойства. */
  filter:none;
  -webkit-mask-image:none;
          mask-image:none;
  box-shadow:0 0 0 1px rgba(247,147,30,.38),0 0 26px rgba(247,147,30,.2),0 10px 26px rgba(0,0,0,.6);
}

/* ───── подробное описание ───── */
.mdetail{padding-block:clamp(48px,6vw,92px)}
.mdetail__in{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(28px,4vw,64px);align-items:start;
}
.mdetail__body h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(21px,2.2vw,32px);line-height:1.1;letter-spacing:-.015em;
  margin:clamp(28px,3vw,44px) 0 clamp(12px,1.2vw,18px);
}
.mdetail__body h2:first-child{margin-top:0}
.mdetail__body p{color:#C6CDD6;max-width:68ch;font-size:clamp(15px,1.15vw,17px)}
.mdetail__body p + p{margin-top:.9em}
/* Вопрос в блоке «Частые вопросы»: мельче раздела, но заметнее обычного текста. */
.mdetail__body h3,.stext__body h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(16px,1.4vw,19px);line-height:1.25;letter-spacing:-.01em;
  color:var(--white);margin:clamp(18px,2vw,28px) 0 8px;max-width:68ch;
}

.mdetail__steps{counter-reset:st;margin-top:14px;display:flex;flex-direction:column;gap:12px}
.mdetail__steps li{
  counter-increment:st;position:relative;padding-left:46px;
  color:#C6CDD6;font-size:clamp(15px,1.15vw,17px);max-width:66ch;
}
.mdetail__steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:-1px;
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:rgba(247,147,30,.12);color:var(--orange);
  font-family:var(--display);font-weight:800;font-size:12px;
}

/* Подсказка автору текста. На готовой странице таких абзацев быть не должно. */
.mdetail__todo{
  color:var(--steel-dim) !important;font-style:italic;
  border-left:2px solid rgba(247,147,30,.45);padding-left:14px;margin-top:14px;
}
.mdetail__todo::before{
  content:"Заполнить";display:block;margin-bottom:4px;
  font-style:normal;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
}

.mdetail__side{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}
.mcard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:10px;
}
.mcard__cap{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim)}
.mcard p{color:#C6CDD6;font-size:15px}
.mcard a:not(.pill){transition:color .25s}
.mcard a:not(.pill):hover{color:var(--orange)}
.mcard__dim{color:var(--steel-dim) !important;font-size:14px !important}
.mcard .pill{margin-top:4px}

/* ───── переход между миссиями ───── */
.mnav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(16,18,22,.66)}
.mnav__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(14px,2vw,32px);padding-block:clamp(20px,2.4vw,32px);
}
.mnav__link{display:flex;flex-direction:column;gap:4px;transition:.3s var(--ease)}
.mnav__link span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim)}
.mnav__link b{
  font-family:var(--display);font-weight:800;font-size:clamp(15px,1.5vw,22px);
  line-height:1.1;letter-spacing:-.01em;
}
.mnav__link--next{text-align:right}
.mnav__link--prev b::before{content:"← "}
.mnav__link--next b::after{content:" →"}
.mnav__link:hover b{color:var(--orange)}
.mnav__all{
  font-size:13px;color:var(--steel);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;
  transition:.3s var(--ease);
}
.mnav__all:hover{border-color:var(--orange);color:var(--orange)}

@media (max-width:1150px){
  .mhero__in{grid-template-columns:1fr;gap:clamp(20px,4vw,40px)}
  .mhero__fig{max-width:400px;margin-inline:auto;order:-1}
  .mhero__fig img{max-height:44svh;width:auto;margin-inline:auto}
  .mhero__fig .mhero__icon{left:2%;bottom:12%}
  .mdetail__in{grid-template-columns:1fr}
  .mdetail__side{position:static;flex-direction:row;flex-wrap:wrap}
  .mcard{flex:1 1 280px}
}

@media (max-width:640px){
  .crust{height:clamp(120px,32vw,170px)}
  .ftr__sign{margin-top:-54px}
  .mhero__fig{max-width:270px}
  .mhero__fig img{max-height:38svh}
  .mnav__in{grid-template-columns:1fr;gap:18px}
  .mnav__link--next{text-align:left}
  .mnav__link--empty{display:none}
  .mnav__all{justify-self:start}
}

/* ═══════════════════════════════════════════════════════════
   СТРАНИЦЫ РАЗДЕЛОВ
   Первый экран (.shero), текстовые блоки (.stext) и витрина
   услуг (.ulist). Собираются скриптом _source/scripts/build-pages.py.
   ═══════════════════════════════════════════════════════════ */

.shero{
  padding-block:clamp(104px,12vh,150px) clamp(30px,3.6vw,52px);
  overflow:hidden;isolation:isolate;background:var(--bg);
}
.shero__glow{
  position:absolute;left:2%;top:2%;width:min(560px,58vw);aspect-ratio:1;
  border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(247,147,30,.14) 0%,rgba(247,147,30,.04) 46%,transparent 70%);
  filter:blur(10px);
}
.shero__title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.8vw,68px);line-height:1;letter-spacing:-.03em;
  margin-bottom:clamp(12px,1.6vw,20px);
}
.shero__lead{color:var(--steel);max-width:62ch;font-size:clamp(15px,1.2vw,18px)}

/* ───── текстовый блок раздела ───── */
.stext{padding-block:clamp(36px,4.6vw,76px)}
.stext__in{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(28px,4vw,64px);align-items:start;
}
.stext__body h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(21px,2.2vw,32px);line-height:1.1;letter-spacing:-.015em;
  margin:clamp(28px,3vw,44px) 0 clamp(12px,1.2vw,18px);
}
.stext__body h2:first-child{margin-top:0}
.stext__body p{color:#C6CDD6;max-width:68ch;font-size:clamp(15px,1.15vw,17px)}
.stext__body p + p{margin-top:.9em}
.stext__body a:not(.pill){color:var(--orange);transition:color .25s var(--ease)}
.stext__body a:not(.pill):hover{color:var(--orange-hot)}
/* Документы без боковой колонки: политика, реквизиты. */
.stext__body--wide{grid-column:1/-1;max-width:82ch}

.stext__facts{margin-top:16px;border-top:1px solid var(--line);max-width:820px}
.stext__facts li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);
}
.stext__facts b{
  font-family:var(--display);font-weight:700;font-size:clamp(15px,1.3vw,18px);
  letter-spacing:-.01em;
}
.stext__facts b a{color:inherit}
.stext__facts b a:hover{color:var(--orange)}
.stext__facts span{color:var(--steel);font-size:14.5px}

.stext__side{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}

/* ───── витрина услуг ───── */
.ulist{padding-block:clamp(24px,3vw,48px) clamp(40px,5vw,80px)}
.ulist__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(12px,1.4vw,20px);
}
.ucard{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2vw,28px);transition:.35s var(--ease);isolation:isolate;
}
.ucard:hover{border-color:rgba(247,147,30,.42);transform:translateY(-3px)}
.ucard__n{
  font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.14em;
  color:var(--orange);
}
.ucard__icon{
  position:absolute;right:clamp(14px,1.6vw,22px);top:clamp(14px,1.6vw,22px);
  width:clamp(40px,3.4vw,54px);height:auto;border-radius:50%;background:#14171B;
  opacity:.92;
  box-shadow:0 0 0 1px rgba(247,147,30,.28);
  transition:.35s var(--ease);
}
.ucard:hover .ucard__icon{opacity:1;box-shadow:0 0 0 1px rgba(247,147,30,.5),0 0 20px rgba(247,147,30,.18)}
.ucard h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.7vw,23px);line-height:1.12;letter-spacing:-.015em;
  padding-right:clamp(46px,4vw,64px);
}
.ucard p{color:var(--steel);font-size:14.5px;flex:1}
.ucard__go{
  margin-top:4px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-dim);transition:color .3s var(--ease);
}
.ucard__go::after{content:" →"}
.ucard:hover .ucard__go{color:var(--orange)}
.ulist__note{margin-top:clamp(20px,2.4vw,32px);color:var(--steel-dim);font-size:14.5px;max-width:70ch}
.ulist__note a{color:var(--orange)}

/* Пункт «Все услуги» в выпадающем меню шапки. */
.nav__menu-all{
  border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:10px;
  color:var(--white) !important;
}

@media (max-width:1150px){
  .stext__in{grid-template-columns:1fr}
  .stext__side{position:static;flex-direction:row;flex-wrap:wrap}
  .stext__side .mcard{flex:1 1 280px}
}

/* Переход с главной в раздел: короткая строка после блока-анонса. */
.smore{margin-top:clamp(20px,2.4vw,34px)}
.smore a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);border-bottom:1px solid rgba(255,255,255,.14);
  padding-bottom:4px;transition:.3s var(--ease);
}
.smore a::after{content:"→";color:var(--orange);transition:transform .3s var(--ease)}
.smore a:hover{color:var(--orange);border-bottom-color:var(--orange)}
.smore a:hover::after{transform:translateX(4px)}

/* ═══════════════════════════════════════════════════════════
   23. ВНУТРЕННИЕ СТРАНИЦЫ: ОБЩИЙ ЯЗЫК

   Набор примитивов, из которых собираются разделы. Язык взят
   с главной — графит, оранжевый акцент, крупная типографика,
   нумерация, тонкие линии, — но звучит тише: внутренние страницы
   читают, а не рассматривают.

   Плотность задаётся модификатором первого экрана и тем, какие
   примитивы страница вообще использует:
     .phero            средняя  — разделы про производство и работы
     .phero--calm      спокойная — материалы, вопросы, контакты
     .phero--minimal   минимальная — юридические документы

   Старые .shero и .stext не трогаем: на них пока живут остальные
   разделы, и они уйдут по мере перевода страниц.
   ═══════════════════════════════════════════════════════════ */

/* ───── хлебные крошки ───── */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel-dim);margin-bottom:clamp(16px,1.8vw,24px);
}
.crumbs a{transition:color .25s var(--ease)}
.crumbs a:hover{color:var(--orange)}
/* Разделитель — тот же слэш, что делит услуги в «Карте миссий» на главной. */
.crumbs i{font-style:normal;color:rgba(255,255,255,.2)}
.crumbs b{font-weight:400;color:var(--steel)}

/* ───── первый экран раздела ───── */
.phero{
  padding-block:clamp(96px,11.5vh,146px) clamp(26px,3.2vw,46px);
  overflow:hidden;isolation:isolate;background:var(--bg);
}
.phero__glow{
  position:absolute;left:-4%;top:-6%;width:min(620px,62vw);aspect-ratio:1;
  border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(247,147,30,.15) 0%,rgba(247,147,30,.04) 46%,transparent 70%);
  filter:blur(10px);
}
.phero__title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(31px,4.9vw,70px);line-height:1;letter-spacing:-.03em;
  margin-bottom:clamp(14px,1.7vw,22px);
}
.phero__lead{color:var(--steel);max-width:60ch;font-size:clamp(15px,1.25vw,19px)}

/* Спокойный уровень: та же композиция, тише масштаб и свет. */
.phero--calm{padding-block:clamp(92px,10.5vh,132px) clamp(22px,2.8vw,40px)}
.phero--calm .phero__title{font-size:clamp(29px,4.1vw,56px)}
.phero--calm .phero__glow{opacity:.6}

/* Минимальный уровень: документ. Ни свечения, ни бегущего блика по буквам —
   на юридическом тексте это шум. Остаётся типографика и одна оранжевая черта. */
.phero--minimal{padding-block:clamp(88px,10vh,120px) clamp(18px,2.2vw,30px)}
.phero--minimal .phero__title{
  font-size:clamp(26px,3.2vw,42px);line-height:1.06;color:var(--white);
  max-width:22ch;
}
.phero--minimal .phero__lead{max-width:66ch;font-size:clamp(15px,1.1vw,17px)}

/* ───── линейка: разделитель с насечками ─────
   Кромка чертёжной линейки: волосяная линия, короткие насечки под ней
   и оранжевый отрезок в начале. Держит индустриальный характер там,
   где карточка была бы лишней. */
.rule{position:relative;height:12px;border-top:1px solid var(--line)}
.rule::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 26px);
}
.rule::after{content:"";position:absolute;left:0;top:-1px;width:54px;height:2px;background:var(--orange)}
.rule--tight{margin-block:clamp(20px,2.6vw,36px)}

/* ───── заголовок секции ─────
   Ритм главной: надзаголовок → заголовок → подзаголовок. */
.head{margin-bottom:clamp(20px,2.6vw,38px)}
.head .eyebrow{margin-bottom:clamp(10px,1vw,14px)}
.head h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(24px,3.1vw,46px);line-height:1.04;letter-spacing:-.025em;
}
.head p{color:var(--steel);max-width:58ch;margin-top:clamp(10px,1.2vw,16px);
  font-size:clamp(15px,1.15vw,17px)}


/* ───── преимущества: инженерная разметка вместо карточек ─────
   Четыре самостоятельных тезиса. Панелей и рамок нет: фон страницы
   открыт, а границу задаёт линия сверху с оранжевой насечкой и
   мелкими делениями — как у размерной линии на чертеже. Номер здесь
   главный элемент: крупный, контурный, тем же приёмом, что номера
   кейсов в журнале на главной. */
.adv{
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:clamp(18px,2.6vw,48px);row-gap:clamp(22px,2.6vw,36px);
}
.adv__item{position:relative;padding-top:clamp(16px,1.8vw,24px);border-top:1px solid var(--line)}
.adv__item::before{
  content:"";position:absolute;left:0;top:-1px;width:26px;height:2px;background:var(--orange);
}
.adv__item::after{
  content:"";position:absolute;left:26px;right:0;top:-1px;height:5px;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 22px);
}
.adv__n{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(247,147,30,.55);
  margin-bottom:clamp(10px,1.2vw,18px);
}
.adv h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(16px,1.5vw,22px);line-height:1.14;letter-spacing:-.015em;
  margin-bottom:9px;min-height:2.28em;
}
@media (max-width:520px){.adv h2{min-height:0}}
.adv p{color:var(--steel);font-size:14.5px;max-width:36ch}

@media (max-width:900px){.adv{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.adv{grid-template-columns:1fr}}

/* ───── спецификация ─────
   Факты о площадке: значение крупно, пояснение под ним. Не карточки —
   строки таблицы с оранжевой насечкой на линии. */
.spec{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  column-gap:clamp(20px,3vw,54px);
}
/* Больше трёх колонок не даём: строки становятся короче подписи,
   а последний ряд разваливается на одинокую ячейку. */
@media (min-width:1000px){.spec{grid-template-columns:repeat(3,1fr)}}
.spec li{position:relative;padding:clamp(16px,1.9vw,24px) 0;border-top:1px solid var(--line)}
.spec li::before{
  content:"";position:absolute;left:0;top:-1px;width:22px;height:2px;
  background:var(--orange);opacity:.75;
}
.spec b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.75vw,24px);line-height:1.12;letter-spacing:-.015em;
  margin-bottom:7px;
}
.spec span{color:var(--steel);font-size:14.5px;display:block;max-width:34ch}

/* ───── текстовые секции ─────
   Нумерация 01, 02, 03 — та же система, что у миссий и преимуществ
   на главной. Она же даёт странице скелет вместо сплошного полотна. */
.eds{counter-reset:ed;position:relative;--ed-gutter:clamp(46px,5vw,74px)}
/* Вертикальная направляющая вдоль колонки с номерами: страница получает
   ось, вдоль которой идут секции, а верхние линии секций ложатся на неё
   делениями. Ничего не сообщает — только держит ритм. */
.eds--rail::before{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line-2);
  left:calc(var(--ed-gutter) - clamp(12px,1.4vw,20px));
}
.ed{
  counter-increment:ed;
  display:grid;grid-template-columns:var(--ed-gutter) minmax(0,1fr);
  padding-block:clamp(24px,3vw,44px);border-top:1px solid var(--line-2);
}
.eds > .ed:first-child{border-top:0;padding-top:clamp(18px,2.2vw,30px)}
.ed::before{
  content:counter(ed,decimal-leading-zero);
  font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.12em;
  color:var(--orange);padding-top:.45em;
}
.ed h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(20px,2.3vw,32px);line-height:1.08;letter-spacing:-.02em;
  margin-bottom:clamp(12px,1.3vw,18px);max-width:24ch;
}
.ed h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(16px,1.4vw,19px);line-height:1.25;
  margin:clamp(18px,2vw,26px) 0 8px;
}
.ed p{color:#C6CDD6;max-width:66ch;font-size:clamp(15px,1.15vw,17px)}
.ed p + p{margin-top:.9em}
.ed__lead{
  color:#D3D9E1 !important;font-size:clamp(15.5px,1.2vw,18.5px) !important;
  line-height:1.5;max-width:56ch !important;
}
/* Одна секция на странице идёт шире остальных — чтобы полотно текста
   не шло единой колонкой от начала до конца. */
.ed--wide p{max-width:78ch}
.ed--wide .ed__lead{max-width:74ch !important}
.ed a:not(.pill){color:var(--orange);transition:color .25s var(--ease)}
.ed a:not(.pill):hover{color:var(--orange-hot)}
.ed .spec,.ed .facts,.ed .swatches{margin-top:clamp(16px,2vw,26px)}

/* ───── перечень фактов строками ─────
   То же, что .stext__facts на старых страницах, но без рамки сверху:
   линии рисует сам список. */
.facts{max-width:820px}
/* Две колонки, а не разлёт по краям: подписи начинаются на одной линии
   и строка читается как строка таблицы, а не как две разные мысли. */
.facts li{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:baseline;gap:4px 24px;padding:13px 0;border-bottom:1px solid var(--line);
}
@media (max-width:640px){.facts li{grid-template-columns:1fr}}
.facts li:first-child{border-top:1px solid var(--line)}
.facts b{font-family:var(--display);font-weight:700;font-size:clamp(15px,1.3vw,18px);letter-spacing:-.01em}
.facts span{color:var(--steel);font-size:14.5px}


/* ───── шаги маршрута услуги ─────
   Нумерованный маршрут строками: номер в поле слева, шаг справа,
   разделены волосяной линией. Ни рамок, ни плашек — та же логика,
   что у спецификации и текстовых секций. */
.steps{counter-reset:st2}
.steps li{
  counter-increment:st2;
  display:grid;grid-template-columns:clamp(36px,3.8vw,54px) minmax(0,1fr);
  padding:clamp(13px,1.5vw,19px) 0;border-top:1px solid var(--line-2);
  color:#C6CDD6;font-size:clamp(15px,1.15vw,17px);
}
.steps li:first-child{border-top-color:var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line-2)}
.steps li::before{
  content:counter(st2,decimal-leading-zero);
  font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.12em;
  color:var(--orange);padding-top:.32em;
}

/* ───── работы по услуге ─────
   Кейс — самостоятельный объект, поэтому карточка здесь уместна.
   Но панели у неё нет: карточка это кадр, подпись и название. */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(14px,2vw,28px)}
.wcard{display:flex;flex-direction:column;gap:10px}
.wcard__shot{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius-s);background:#0B0D10;
}
.wcard__shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.wcard__shot::after{
  content:"";position:absolute;inset:0;border:1px solid var(--line);
  border-radius:inherit;transition:border-color .3s var(--ease);
}
.wcard:hover .wcard__shot img{transform:scale(1.045)}
.wcard:hover .wcard__shot::after{border-color:rgba(247,147,30,.45)}
.wcard__miss{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);font-weight:700;
}
.wcard__title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(15px,1.4vw,19px);line-height:1.14;letter-spacing:-.015em;
  transition:color .3s var(--ease);
}
.wcard:hover .wcard__title{color:var(--orange)}

/* Аккордеон вопросов внутри текстовой секции: у него уже есть свои стили,
   здесь только снимаем внешний отступ секции. */
.ed .acc{margin-top:clamp(14px,1.8vw,22px)}
.ed .turn{margin-top:clamp(20px,2.4vw,32px)}

/* ───── короткое утверждение ─────
   Один раз на страницу: мысль, ради которой раздел написан. */
.state{border-left:2px solid var(--orange);padding-left:clamp(16px,2vw,26px);margin-block:clamp(18px,2.2vw,30px)}
.state p{
  font-family:var(--display);font-weight:700;
  font-size:clamp(18px,2vw,27px);line-height:1.2;letter-spacing:-.015em;
  color:var(--white);max-width:32ch;
}

/* ───── схематичные фактуры покрытия ─────
   Не фотография и не образец цвета: графическая схема поверхности
   в графите. Показывает характер фактуры, не обещает конкретный оттенок. */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:clamp(12px,1.6vw,20px)}
.swatch{display:flex;flex-direction:column;gap:9px}
.swatch i{
  display:block;height:clamp(76px,8vw,104px);border-radius:var(--radius-s);
  border:1px solid var(--line);background:#2A3038;position:relative;overflow:hidden;
}
.swatch--gloss i{
  background:
    linear-gradient(104deg,transparent 34%,rgba(255,255,255,.42) 47%,rgba(255,255,255,.06) 56%,transparent 68%),
    linear-gradient(160deg,#454E59,#20252C 70%);
}
.swatch--matte i{background:linear-gradient(160deg,#3A424C,#252A31 70%)}
.swatch--shagreen i{
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.10) 0 1px,transparent 1.4px),
    radial-gradient(circle at 70% 65%,rgba(0,0,0,.35) 0 1.2px,transparent 1.6px),
    linear-gradient(160deg,#3C444E,#242931 70%);
  background-size:7px 7px,9px 9px,auto;
}
.swatch--moire i{
  background:
    repeating-linear-gradient(58deg,rgba(255,255,255,.07) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(122deg,rgba(0,0,0,.28) 0 1px,transparent 1px 6px),
    linear-gradient(160deg,#3B434D,#232830 70%);
}
.swatch b{font-family:var(--display);font-weight:700;font-size:15.5px}
.swatch span{color:var(--steel);font-size:13.5px}

/* ───── поворот к действию ─────
   Локальный призыв внутри страницы: строка и кнопка между двумя линиями.
   Панели и рамки не нужны — блок и так читается как отдельный шаг. */
.turn{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,32px);padding-block:clamp(22px,2.6vw,36px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.turn__text{max-width:62ch}
.turn__text b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.8vw,25px);line-height:1.1;letter-spacing:-.02em;margin-bottom:6px;
}
.turn__text span{color:var(--steel);font-size:15px}
.turn__text span a{color:var(--orange)}

/* ───── куда идти дальше ─────
   Вместо боковой колонки со ссылками: строка переходов внизу страницы.
   Линия сверху загорается оранжевым — так же, как рамка карточки на главной. */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));column-gap:clamp(18px,2.4vw,40px)}
.rel a{
  display:flex;flex-direction:column;gap:7px;padding-block:clamp(16px,1.9vw,24px);
  border-top:1px solid var(--line);transition:border-color .3s var(--ease);
}
.rel a span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dim)}
.rel a b{
  font-family:var(--display);font-weight:800;font-size:clamp(16px,1.6vw,22px);
  line-height:1.1;letter-spacing:-.015em;transition:color .3s var(--ease);
}
.rel a b::after{content:" →";color:var(--orange);opacity:0;transition:opacity .3s var(--ease)}
.rel a:hover{border-top-color:var(--orange)}
.rel a:hover b{color:var(--orange)}
.rel a:hover b::after{opacity:1}

/* ───── юридический документ ─────
   Задача одна: чтобы это можно было прочитать. Ширина строки, ритм,
   оглавление. Ни маскота, ни промо-блоков, ни движения. */
.doc{padding-block:clamp(26px,3.2vw,44px) clamp(36px,4.4vw,64px)}
.doc__in{max-width:74ch}
.doc__meta{
  display:flex;flex-wrap:wrap;gap:6px 26px;
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-dim);
}
.doc__meta b{font-weight:600;color:var(--steel);letter-spacing:.08em}

.doc__toc{margin-top:clamp(22px,2.6vw,34px);counter-reset:toc}
.doc__toc-cap{
  display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-dim);margin-bottom:10px;
}
.doc__toc li{counter-increment:toc;border-bottom:1px solid var(--line-2)}
.doc__toc li:first-child{border-top:1px solid var(--line-2)}
.doc__toc a{
  display:flex;gap:12px;padding:9px 0;color:var(--steel);
  font-size:15px;transition:color .25s var(--ease);
}
.doc__toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.1em;
  color:var(--orange);opacity:.75;padding-top:.32em;flex:none;
}
.doc__toc a:hover{color:var(--orange)}

.doc__body{margin-top:clamp(26px,3.2vw,42px)}
.doc__body h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(19px,1.9vw,26px);line-height:1.14;letter-spacing:-.015em;
  margin:clamp(30px,3.4vw,48px) 0 clamp(10px,1.1vw,15px);
  scroll-margin-top:96px;padding-top:clamp(14px,1.6vw,22px);border-top:1px solid var(--line-2);
}
.doc__body h2:first-child{margin-top:0;border-top:0;padding-top:0}
.doc__body p{color:#C6CDD6;font-size:clamp(15.5px,1.1vw,16.5px);line-height:1.72;max-width:72ch}
.doc__body p + p{margin-top:.85em}
.doc__body a{color:var(--orange);transition:color .25s var(--ease)}
.doc__body a:hover{color:var(--orange-hot)}
.doc__body .facts{margin-top:14px}
.doc__body .facts li{padding:11px 0}

/* ───── адаптив общего языка ───── */
@media (max-width:900px){
  .eds--rail::before{display:none}
  .ed{grid-template-columns:1fr;gap:0}
  .ed::before{display:block;padding-top:0;margin-bottom:10px}
  .ed h2{max-width:none}
}
@media (max-width:640px){
  .spec{grid-template-columns:1fr}
  .turn{align-items:flex-start}
  .turn .pill{width:100%}
  .doc__meta{flex-direction:column;gap:4px}
}

/* Содержательная секция внутренней страницы: воздуха меньше, чем на главной,
   потому что блоков в разделе больше и они идут подряд. */
.isect{padding-block:clamp(28px,3.6vw,58px)}
.isect .mats__list{max-width:1000px}
.isect--tight{padding-block:clamp(20px,2.4vw,36px)}
.isect--last{padding-block:clamp(18px,2.2vw,32px) clamp(40px,5vw,80px)}
.doc__lead{
  color:var(--steel);font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.66;
  max-width:70ch;margin-top:clamp(18px,2.2vw,28px);
}

/* ───── журнал работ ─────
   Сетка карточек вместо карусели: работы видно все сразу, а не по одной.
   Панели у карточки нет — кадр, подпись миссий, название. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,2.4vw,32px)}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--steel);
  font-size:13.5px;transition:.3s var(--ease);
}
.chip i{font-style:normal;font-size:11px;color:var(--steel-dim);letter-spacing:.06em}
.chip:hover{border-color:rgba(247,147,30,.45);color:var(--white)}
.chip.is-on{border-color:var(--orange);color:var(--orange)}
.chip.is-on i{color:var(--orange)}

.jrn{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(18px,2.4vw,36px)}
.jrn__none,.jrn__empty{color:var(--steel-dim);font-size:15px;margin-top:8px}

.jcase{display:flex;flex-direction:column;gap:12px;scroll-margin-top:96px}
.jcase[hidden]{display:none}
.jcase__shot{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-s);background:#0B0D10;
}
.jcase__shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.jcase__shot::after{
  content:"";position:absolute;inset:0;border:1px solid var(--line);
  border-radius:inherit;transition:border-color .3s var(--ease);
}
.jcase:hover .jcase__shot img{transform:scale(1.045)}
.jcase:hover .jcase__shot::after{border-color:rgba(247,147,30,.45)}
.jcase__count{
  position:absolute;left:10px;bottom:10px;
  padding:4px 10px;border-radius:999px;background:rgba(9,11,14,.78);
  font-size:11.5px;letter-spacing:.08em;color:var(--steel);
}
.jcase__body{display:flex;flex-direction:column;gap:8px}
.jcase__miss{display:flex;flex-wrap:wrap;gap:4px 14px}
.jcase__miss a{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);font-weight:700;transition:color .25s var(--ease);
}
.jcase__miss a:hover{color:var(--orange-hot)}
.jcase__title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(16px,1.5vw,21px);line-height:1.14;letter-spacing:-.015em;
}
.jcase__desc{color:var(--steel);font-size:14.5px}
.jcase__specs{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:2px;padding-top:10px;border-top:1px solid var(--line)}
.jcase__specs dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dim);margin-bottom:2px}
.jcase__specs dd{margin:0;font-size:14px;font-weight:600}

/* Подробности раскрываются на месте: строка грида едет с 0fr до 1fr,
   тем же приёмом, что ответы в аккордеоне. */
.jcase__more{
  align-self:flex-start;margin-top:2px;padding:0;border:0;background:none;cursor:pointer;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-dim);
  transition:color .25s var(--ease);
}
.jcase__more::after{content:" +";color:var(--orange)}
.jcase__more:hover{color:var(--orange)}
.jcase__more[aria-expanded="true"]::after{content:" –"}
.jcase__detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.jcase__detail > div{overflow:hidden}
.jcase__more[aria-expanded="true"] + .jcase__detail{grid-template-rows:1fr}
.jcase__detail h4{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-dim);margin:14px 0 5px;
}
.jcase__detail p{color:#C6CDD6;font-size:14.5px}

/* Работа, на которую пришли по прямой ссылке. */
.jcase.is-target .jcase__shot::after{border-color:var(--orange)}

/* Шаг с собственным названием: номер слева, название и пояснение справа.
   Обе части кладём во вторую колонку — иначе пояснение станет третьей
   ячейкой сетки и уедет под номер. */
.steps--wide li{grid-template-columns:clamp(36px,3.8vw,54px) minmax(0,1fr)}
.steps--wide b,.steps--wide span{grid-column:2}
.steps--wide b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(15px,1.4vw,19px);line-height:1.14;letter-spacing:-.015em;
  margin-bottom:4px;color:var(--white);
}
.steps--wide span{display:block;max-width:64ch}

/* ───── текст и кадр рядом ─────
   Композиция «изображение + содержание»: список или текст слева,
   кадр справа. На узком экране кадр уходит вниз и уменьшается. */
.fig-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(20px,3vw,56px);align-items:center}
.fig-row__fig{position:relative;isolation:isolate}
.fig-row__fig::before{
  content:"";position:absolute;inset:-8% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 56% 58% at 52% 48%,
    #0A0D11 0%,rgba(10,13,17,.88) 44%,rgba(10,13,17,.4) 68%,transparent 84%);
}
.fig-row__fig img{
  position:relative;z-index:1;width:auto;max-width:100%;max-height:clamp(280px,42vh,460px);
  margin-inline:auto;filter:contrast(1.04) brightness(1.03);
  -webkit-mask-image:radial-gradient(ellipse 64% 68% at 52% 47%,#000 42%,rgba(0,0,0,.7) 66%,transparent 90%);
          mask-image:radial-gradient(ellipse 64% 68% at 52% 47%,#000 42%,rgba(0,0,0,.7) 66%,transparent 90%);
}
.fig-row__fig figcaption{
  position:relative;z-index:1;display:flex;gap:8px;justify-content:center;margin-top:6px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim);
}
.fig-row__fig figcaption i{color:var(--orange);font-style:normal;letter-spacing:0;font-weight:700}
@media (max-width:900px){
  .fig-row{grid-template-columns:1fr}
  .fig-row__fig{max-width:320px;margin-inline:auto;order:-1}
}

/* ───── схема маршрута изделия ─────
   Путь изделия по площадке: размерная линия с делениями, станции
   с контурными номерами и оранжевыми насечками, пунктирный контур
   «одна площадка» вокруг всего. Ни одной цифры, кроме номеров услуг.
   Разметка — обычный нумерованный список, поэтому без стилей
   последовательность остаётся читаемой. */
.rmap{position:relative}

.rmap__ends{display:flex;justify-content:space-between;gap:16px;margin-bottom:clamp(16px,1.8vw,24px)}
.rmap__end{display:flex;flex-direction:column;gap:5px;max-width:26ch}
.rmap__end span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim)}
.rmap__end b{font-family:var(--display);font-weight:800;font-size:clamp(15px,1.4vw,19px);line-height:1.15}
.rmap__end--out{text-align:right;align-items:flex-end}

/* контур площадки: всё, что внутри, происходит в одном месте */
.rmap__yard{
  position:relative;border:1px dashed rgba(255,255,255,.14);border-radius:var(--radius);
  padding:clamp(26px,3vw,40px) clamp(16px,2vw,28px) clamp(18px,2vw,26px);
}
.rmap__cap{
  position:absolute;top:-9px;left:clamp(16px,2vw,28px);padding:0 10px;background:var(--bg);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
}

/* размерная линия с делениями — она же верхняя граница ряда станций */
.rmap__row{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.4vw,22px);border-top:1px solid var(--line);
}
.rmap__row::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 24px);
}

.rstn{position:relative;display:flex;flex-direction:column;gap:7px;padding-top:clamp(14px,1.6vw,20px)}
.rstn::before{content:"";position:absolute;left:0;top:-1px;width:20px;height:2px;background:var(--orange);opacity:.8}
.rstn a{display:block;color:inherit}
.rstn__n{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.4vw,34px);line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(247,147,30,.55);
}
.rstn__name{
  display:block;margin-top:4px;font-family:var(--display);font-weight:800;
  font-size:clamp(13.5px,1.2vw,17px);line-height:1.14;letter-spacing:-.015em;
  transition:color .25s var(--ease);
}
.rstn__note{display:block;color:var(--steel);font-size:13px;max-width:24ch}
.rstn a:hover .rstn__name{color:var(--orange)}

/* стрелка перехода между станциями */
.rstn + .rstn::after{
  content:"";position:absolute;left:calc(-1 * clamp(10px,1.4vw,22px) / 2 - 3px);top:-8px;
  width:6px;height:6px;border-top:1px solid rgba(247,147,30,.6);border-right:1px solid rgba(247,147,30,.6);
  transform:rotate(45deg);
}

.rmap__note{margin-top:clamp(14px,1.6vw,22px);color:var(--steel-dim);font-size:13.5px;max-width:76ch}

@media (max-width:900px){.rmap__row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .rmap__ends{flex-direction:column;gap:14px}
  .rmap__end--out{text-align:left;align-items:flex-start}
  .rmap__row{grid-template-columns:1fr;gap:0;border-top:0}
  .rmap__row::before{display:none}
  .rstn{padding:clamp(13px,3vw,18px) 0 clamp(13px,3vw,18px) 46px;border-top:1px solid var(--line-2)}
  .rstn:first-child{border-top:0}
  .rstn::before{width:2px;height:100%;top:0;left:16px;opacity:.35}
  .rstn__n{position:absolute;left:0;top:clamp(13px,3vw,18px);font-size:20px}
  .rstn + .rstn::after{display:none}
}