/* welawart-rebuild.css — ОБЩИЙ каркас ребилда (токены + шапка + подвал + базовые элементы).
 *
 * Грузится на КАЖДОЙ ребилд-странице (услуга, кейс, о-компании, ленты, статьи, юр-страницы, главная).
 * Хедер/подвал здесь — в ОДНОМ месте → единый вид на всём сайте, правка одной строкой.
 * Текучая вёрстка: mobile-first + один брейк 980px (≤979 бургер, ≥980 инлайн-меню). 320→1920, без
 * абсолютных пиксельных координат каркаса. Палитра/шрифт — родные ARTLAW. Раскладку конкретного
 * типа страницы добавляет его собственный файл (welawart-service.css, welawart-case.css и т.д.).
 */

@font-face{font-family:'TTCommons';src:url('../fonts/TT_Commons_Pro_Regular.woff2') format('woff2'),url('../fonts/TT_Commons_Pro_Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'TTCommons';src:url('../fonts/TT_Commons_Pro_Medium.woff2') format('woff2'),url('../fonts/TT_Commons_Pro_Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}

:root{--cream:#fffff4;--dark:#201e1e;--bordo:#790e2c;--line:rgba(32,30,30,.12);}

*,*::before,*::after{box-sizing:border-box;}
html,body.rb-body{margin:0;padding:0;}
body.rb-body{
  font-family:'TTCommons','TT Commons Pro',-apple-system,Arial,sans-serif;
  color:var(--dark);background:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.rb-body img{max-width:100%;height:auto;display:block;}
.rb-body a{color:inherit;text-decoration:none;}
/* визуально скрытый текст для скринридеров (напр. h1 главной) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* видимый фокус для клавиатуры (ссылки перекрашены/без подчёркивания → нужен явный индикатор) */
.rb-body a:focus-visible,.rb-btn:focus-visible,.rb-burger:focus-visible,.rb-body summary:focus-visible{outline:2px solid var(--bordo);outline-offset:3px;border-radius:2px;}

/* ===================== ШАПКА (адаптивная: бургер ≤979, инлайн-меню ≥980) ===================== */
.rb-hdr{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 16px;background:var(--cream);border-bottom:1px solid var(--line);
}
.rb-hdr__logo{display:inline-flex;align-items:center;gap:7px;height:100%;}
.rb-hdr__logo img{height:22px;width:auto;}
.rb-hdr__nav{display:none;}
.rb-burger{
  width:44px;height:44px;margin-right:-10px;padding:11px 9px;display:inline-flex;flex-direction:column;
  justify-content:space-between;background:transparent;border:0;cursor:pointer;
}
.rb-burger span{display:block;height:2px;width:100%;background:var(--dark);border-radius:2px;transition:transform .25s,opacity .2s;}
.rb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.rb-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.rb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
.rb-menu{
  display:none;flex-direction:column;position:sticky;top:56px;z-index:59;background:var(--cream);
  border-bottom:1px solid var(--line);padding:6px 20px 14px;
}
.rb-menu.is-open{display:flex;}
.rb-menu a{display:block;padding:13px 0;font-size:17px;line-height:1.2;border-bottom:1px solid rgba(32,30,30,.07);}
/* EDITS4-3: «Связаться с нами» в мобильном меню — залитая бордовая кнопка с белым текстом. */
.rb-menu a:last-child{margin-top:10px;padding:13px 16px;border-bottom:0;border-radius:2px;text-align:center;background:var(--bordo);color:#fff;}

/* ===================== БАЗОВЫЕ ЭЛЕМЕНТЫ (back-ссылка, кнопка) ===================== */
.rb-back{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
  color:var(--bordo);font-size:15px;font-weight:500;
}
.rb-back__arr{font-size:1.1em;line-height:1;}
.rb-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 28px;
  background:var(--bordo);color:#fff;font-size:16px;font-weight:500;border-radius:2px;  /* EDITS4-4: текст кнопок на бордо — чисто белый */
}
.rb-btn:hover{color:#fff;}
/* EDITS4-4: общее правило .rb-body a{color:inherit} (выше) перебивает одноклассовые .rb-btn/.case__more/
 * .rb-card__dl и красит их текст в тёмный. Задаём белый достаточной специфичностью (0,2,0) > (0,1,1),
 * чтобы ВСЕ ссылки-кнопки на бордо были с чисто белым текстом #fff. */
.rb-body .rb-btn,.rb-body .case__more,.rb-body .case__more-h,.rb-body .case__more-l,.rb-body .rb-card__dl{color:#fff;}
.rb-btn:active{opacity:.9;}

/* ===================== ПОДВАЛ (контакты + соцсети + знак ARTLAW) ===================== */
.rb-foot{margin-top:34px;padding:30px 20px 44px;background:var(--cream);border-top:1px solid var(--line);}
.rb-foot .wl-m__foot{display:block;}
.rb-foot .wl-m__foot-wm{display:flex;align-items:baseline;gap:8px;margin-bottom:20px;}
.rb-foot .wl-m__foot-wm img{height:22px;width:auto;}
/* EDITS4-1: блок контактов компактнее — меньше шрифт и вертикальный запас; кликабельные строки
 * (тел./почта) сохраняют вменяемую тач-цель (~40px), некликабельный адрес — без неё. */
.rb-foot .wl-m__contacts{display:flex;flex-direction:column;gap:0;margin-bottom:12px;}
.rb-foot .wl-m__contact{display:inline-flex;align-items:center;min-height:40px;font-size:16px;line-height:1.25;color:var(--dark);}
.rb-foot .wl-m__contact--addr{min-height:auto;padding-top:4px;}
.rb-foot .wl-social{display:flex;flex-direction:column;gap:2px;}
.rb-foot .wl-social a,.rb-foot .wl-social span{display:flex;align-items:center;font-size:16px;line-height:1.3;color:var(--dark);}
.rb-foot .wl-social a{min-height:44px;}  /* тач-цель для кликабельных соцссылок */

/* ===================== ДЕСКТОП ≥980 ===================== */
@media (min-width:980px){
  .rb-hdr{height:64px;padding:0 40px;}
  .rb-hdr__logo img{height:26px;}
  .rb-burger{display:none;}
  .rb-menu{display:none !important;}
  .rb-hdr__nav{display:flex;align-items:center;gap:34px;}
  .rb-hdr__nav a{font-size:15px;font-weight:500;letter-spacing:.02em;}
  .rb-hdr__nav a:hover{color:var(--bordo);}
  /* EDITS4-3: «Связаться с нами» в шапке — залитая бордовая кнопка с белым текстом (как остальные CTA).
   * Селектор .rb-hdr__nav .rb-hdr__cta перебивает и обычный цвет ссылки, и :hover (бордо). */
  .rb-hdr__nav .rb-hdr__cta{background:var(--bordo);color:#fff;padding:8px 16px;border-radius:2px;line-height:1.1;}
  .rb-hdr__nav .rb-hdr__cta:hover{color:#fff;opacity:.92;}

  .rb-foot{margin-top:0;padding:40px;}
  .rb-foot .wl-m__foot{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap;}
  .rb-foot .wl-m__foot-wm{order:3;margin:0;}
  .rb-foot .wl-m__contacts{margin:0;}
  .rb-foot .wl-m__contact{min-height:32px;}  /* EDITS4-1: на десктопе тач-цель не нужна — строки ещё компактнее */
}

/* ===================== ОБЩИЙ СПЛИТ-БЛОК (.rb-split) =====================
 * ОДИН компонент на типы услуга / кейс / о-компании (в Tilda это клоны одного блока):
 * тёмная панель слева (печать/портрет + знак ART/LAW) + контент справа в сетке «лейбл | текст».
 * Мобайл — одноколоночный поток (панель скрыта). Значения сняты с оригинала @1440. */
.rb-split{display:block;}
.rb-split__aside{display:none;}                    /* тёмную панель/печать/знак на мобайле не тащим */
.rb-split__content{padding:24px 20px 8px;}
.rb-split__eyebrow{margin:6px 0 8px;font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--bordo);}
.rb-split__title{margin:0 0 22px;font-size:25px;line-height:1.14;font-weight:500;color:var(--dark);}
.rb-split__row{margin:0 0 26px;}
.rb-split__label{margin:0 0 10px;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--bordo);}
.rb-split__body{font-size:16px;line-height:1.55;color:var(--dark);}
.rb-split__body p{margin:0 0 14px;}
.rb-split__body p:last-child{margin-bottom:0;}
.rb-split__list{margin:0;padding:0;list-style:none;}
.rb-split__list li{position:relative;padding-left:18px;margin:0 0 10px;font-size:16px;line-height:1.5;}
.rb-split__list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--bordo);}
.rb-split__list li:last-child{margin-bottom:0;}
.rb-split__price{margin:18px 0 0;font-size:16px;line-height:1.5;color:var(--dark);}
.rb-split__cta-row{margin:30px 0 8px;}
/* EDITS4-2: под-страницы без подвала на мобайле обрываются сразу после контента — даём низу воздух. */
@media (max-width:979px){.rb-nofoot .rb-split__content{padding-bottom:44px;}}

@media (min-width:980px){
  .rb-split{position:relative;display:grid;grid-template-columns:51% 49%;min-height:calc(100vh - 64px);}
  /* тёмная панель слева */
  .rb-split__aside{display:block;position:relative;background:var(--dark);overflow:hidden;}
  .rb-split__stamp{position:absolute;left:42%;top:90px;width:190px;}
  .rb-split__stamp img{width:100%;}
  .rb-split__sign{position:absolute;left:32px;bottom:90px;width:min(540px,74%);}
  .rb-split__sign img{width:100%;filter:brightness(0) invert(1);}  /* знак ART/LAW кремовым на тёмной панели */
  /* EDITS4-2c: на под-страницах без подвала (.rb-nofoot — услуга/кейс/лента/статья) тёмная панель
   * тянется до низа страницы, поэтому знак закрепляем ВНИЗУ ЭКРАНА (position:fixed), как .home-fixlogo
   * на главной: остаётся виден при прокрутке. Ширина 38vw держит его в левой тёмной колонке (≈51%),
   * не наезжая на светлый контент справа. На страницах С подвалом (о-компании/policy/consent) знак
   * остаётся absolute внизу панели — иначе он перекрыл бы кремовый подвал внизу. */
  .rb-nofoot .rb-split__sign{position:fixed;left:32px;bottom:40px;width:min(540px,38vw);z-index:1;}
  /* «Назад» — кремовый, поверх тёмной панели, слева сверху */
  .rb-split .rb-back{position:absolute;left:40px;top:30px;z-index:5;color:var(--cream);font-size:15px;}
  .rb-split .rb-back:hover{opacity:.7;}
  /* контент справа. min-width:0 — грид-элемент может сжаться уже своего содержимого, иначе широкая
     таблица/pre/картинка раздули бы колонку и сломали пропорцию сплита (контент обрезался бы body). */
  .rb-split__content{padding:56px 40px 80px 56px;max-width:760px;min-width:0;}
  .rb-split__eyebrow{margin:0 0 14px;font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--dark);}
  .rb-split__title{margin:0 0 40px;font-size:24px;line-height:1.16;font-weight:400;}
  /* трек тела — minmax(0,354px): на узких десктопах (980–1180) сжимается, не вылезая за правую
   * колонку сплита (иначе overflow-x:hidden обрезал бы текст «Об услуге/Что входит/О кейсе»). */
  .rb-split__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,354px);column-gap:48px;align-items:start;margin:0 0 30px;}
  .rb-split__label{grid-column:1;margin:2px 0 0;font-size:14px;font-weight:500;letter-spacing:normal;text-transform:uppercase;color:var(--dark);}
  .rb-split__body{grid-column:2;font-size:16px;line-height:1.32;}
  .rb-split__body p{margin:0 0 12px;}
  .rb-split__list li{font-size:16px;line-height:1.3;margin-bottom:8px;}
  .rb-split__list li::before{background:var(--dark);}
  .rb-split__price{color:var(--dark);}
  .rb-split__cta-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,354px);column-gap:48px;margin:0 0 8px;}
  .rb-split__cta-row .rb-btn{grid-column:2;}
}
@media (min-width:1500px){
  .rb-split{grid-template-columns:1fr minmax(680px,720px);}
}

/* =======================================================================================
 * MOBILE_STYLE (≤768) — общие мобильные доработки на ВСЕХ ребилд-страницах.
 * Десктоп (≥769, в т.ч. 1440) и планшет (769–979) НЕ затронуты: всё в @media (max-width:768px).
 * ======================================================================================= */
@media (max-width:768px){
  /* п.3 КНОПКИ/CTA крупнее, во всю ширину, тач-цель ≥48px (бордо+белый — уже из .rb-btn). */
  .rb-btn{width:100%;min-height:54px;padding:15px 24px;font-size:17px;gap:9px;letter-spacing:.01em;}
  .rb-split__cta-row .rb-btn,.rb-list__cta .rb-btn,.art__cta .rb-btn,.home-hero__cta{width:100%;}
  /* стрелка кнопки — лёгкая микроанимация (transform → без сдвига вёрстки/CLS) */
  .rb-btn__arr{display:inline-block;transition:transform .25s ease;}
  .rb-btn:hover .rb-btn__arr,.rb-btn:active .rb-btn__arr{transform:translateX(4px);}
  /* «Назад» — крупнее тач-цель */
  .rb-back{min-height:48px;font-size:16px;}

  /* п.4 ПОЯВЛЕНИЯ ПРИ СКРОЛЛЕ. Прячем стартово ТОЛЬКО при html.janim (есть IntersectionObserver и НЕ
   * включён reduced-motion — класс ставит синхронный скрипт в <head>). Без JS/при reduced-motion класса
   * нет → контент виден сразу. Анимируем opacity/transform → нет reflow, CLS = 0. .is-in ставит IO. */
  html.janim .home-svc__card,
  html.janim .home #m-cases .rb-card,
  html.janim .home-bordo__panel,
  html.janim .rb-list .rb-card,
  html.janim .rb-split__row,
  html.janim .home-form__box{
    opacity:0;transform:translateY(14px);
    transition:opacity .55s ease-out,transform .55s ease-out;
  }
  html.janim .home-svc__card.is-in,
  html.janim .home #m-cases .rb-card.is-in,
  html.janim .home-bordo__panel.is-in,
  html.janim .rb-list .rb-card.is-in,
  html.janim .rb-split__row.is-in,
  html.janim .home-form__box.is-in{opacity:1;transform:none;}
}
/* Подстраховка: при reduced-motion ничего не прячем, даже если janim как-то выставлен. */
@media (max-width:768px) and (prefers-reduced-motion:reduce){
  html.janim .home-svc__card,html.janim .home #m-cases .rb-card,html.janim .home-bordo__panel,
  html.janim .rb-list .rb-card,html.janim .rb-split__row,html.janim .home-form__box{
    opacity:1 !important;transform:none !important;transition:none !important;}
}