/* advokat32.online – оформление. Один шрифт (Manrope, свои файлы), значки Phosphor (свой файл).
   Размеры – только шаги шкалы: 12/16, 14/20, 16/24, 18/28, 20/28, 24/32, 30/36, 36/40, 48/48, 60/60.
   Отступы – только 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96. */

@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* палитра по портрету: красное дерево шкафов и стола, бежевые стены и шторы, свет лампы и окна,
     тёмно-синий костюм (заголовки), тёмно-бордовая бабочка (акцент) */
  --bg:#FAF1E4; --bg-2:#EDD9BD; --bg-3:#E0C29C; --line:#DCC09B; --line-2:#C49E72;
  --text:#24180F; --text-2:#4E3B2C; --text-3:#6E5744; --heading:#0E1828;
  --accent:#6A0F22; --accent-hi:#821630; --accent-soft:#F3DCDA; --on-accent:#FFFFFF;
  --gold:#E0A84E; --gold-hi:#EBBB6C; --on-gold:#2A1A12;
  --ink:#21160D; --ink-2:#160E08; --ink-3:#2E1F12; --ink-line:rgba(246,232,214,.16);
  --ink-text:#F7EEE5; --ink-text-2:#EBD5BE; --ink-text-3:#CDAE8E; --ink-accent:#EBB86A;
  --error:#A3261F; --live:#4CC38A;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --z-nav:50; --z-panel:40; --z-bar:45;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:24px;font-weight:400;font-feature-settings:'lnum' 1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;text-wrap:balance;color:var(--heading)}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4,.on-ink h5,.on-ink h6,.foot h2{color:var(--ink-text)}
p,li,dd{text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.on-ink :focus-visible{outline-color:var(--ink-accent)}
::selection{background:var(--accent);color:var(--on-accent)}

/* ── Значки (Phosphor, свой файл) ── */
@font-face{font-family:'Phosphor';src:url('/assets/fonts/Phosphor.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:block}
.ph{font-family:'Phosphor'!important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;display:inline-block}

/* ── Стили текста ── */
.heading-1{font-size:60px;line-height:60px;font-weight:600;letter-spacing:-0.03em}
.heading-2{font-size:48px;line-height:48px;font-weight:600;letter-spacing:-0.025em}
.heading-3{font-size:36px;line-height:40px;font-weight:600;letter-spacing:-0.02em}
.heading-4{font-size:30px;line-height:36px;font-weight:600;letter-spacing:-0.015em}
.heading-5{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.01em}
.heading-6{font-size:20px;line-height:28px;font-weight:600}
.title-1{font-size:20px;line-height:28px;font-weight:500}
.title-2{font-size:18px;line-height:28px;font-weight:500}
.title-3{font-size:16px;line-height:24px;font-weight:500}
.title-4{font-size:14px;line-height:20px;font-weight:500}
.body-1{font-size:16px;line-height:24px;font-weight:600}
.body-2{font-size:16px;line-height:24px;font-weight:500}
.body-3{font-size:16px;line-height:24px;font-weight:400}
.body-4{font-size:14px;line-height:20px;font-weight:600}
.body-5{font-size:14px;line-height:20px;font-weight:500}
.body-6{font-size:14px;line-height:20px;font-weight:400}
.button-lg{font-size:18px;line-height:28px;font-weight:600}
.button-md{font-size:16px;line-height:24px;font-weight:600}
.button-sm{font-size:14px;line-height:20px;font-weight:600}
.caption-1{font-size:14px;line-height:20px;font-weight:500}
.caption-2{font-size:14px;line-height:20px;font-weight:400}
.caption-3{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.caption-4{font-size:12px;line-height:16px;font-weight:500}
.caption-5{font-size:12px;line-height:16px;font-weight:400}
.muted{color:var(--text-3)}
.soft{color:var(--text-2)}
.on-ink .muted{color:var(--ink-text-3)}
.on-ink .soft{color:var(--ink-text-2)}
.nw{white-space:nowrap}

@media (max-width:1279px){.heading-1{font-size:48px;line-height:48px}}
@media (max-width:1023px){.heading-2{font-size:36px;line-height:40px}}
@media (max-width:767px){
  .heading-1{font-size:36px;line-height:40px}
  .heading-2{font-size:30px;line-height:36px}
  .heading-3{font-size:30px;line-height:36px}
  .heading-4{font-size:24px;line-height:32px}
}

/* ── Каркас ── */
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media (max-width:767px){.wrap{padding:0 16px}}
.section{padding:96px 0}
.section.tight{padding:64px 0}
.section.alt{background:var(--bg-2)}
@media (max-width:767px){.section{padding:64px 0}.section.tight{padding:48px 0}}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--accent);color:var(--on-accent);padding:8px 12px;border-radius:6px;transition:transform .3s var(--ease)}
.skip:focus{transform:translateY(96px)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.on-ink{background:var(--ink);color:var(--ink-text)}

.sec-head{max-width:680px;margin-bottom:48px}
.sec-head .eyebrow{margin-bottom:12px}
.sec-head p{margin-top:16px;color:var(--text-2)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent)}

/* Живой фон: холст за содержимым */
.silk-host{position:relative;overflow:hidden;isolation:isolate}
.silk-host>.silk{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.silk-host>.silk.ready{opacity:1}
/* линии почти не заходят на текст слева – видны справа, за карточкой и по краям */
.silk-host[data-silk="hero"]>.silk{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.16) 52%,#000 72%);mask-image:linear-gradient(90deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.16) 52%,#000 72%)}
@media (max-width:1023px){.silk-host[data-silk="hero"]>.silk{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.18) 48%,#000 70%);mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.18) 48%,#000 70%)}.hero-links{padding-top:32px}}

/* ── Кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-radius:6px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .5s var(--ease)}
.btn .ph{font-size:20px}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hi)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{background:var(--bg-2);border-color:var(--text-3)}
.btn-light{background:var(--gold);color:var(--on-gold)}
.btn-light:hover{background:var(--gold-hi)}
.btn-glass{background:rgba(255,248,240,.08);border-color:var(--ink-line);color:var(--ink-text)}
.btn-glass:hover{background:rgba(255,248,240,.14);border-color:rgba(226,196,154,.45)}
.btn:active{transform:scale(.98)}
.btn.lg{padding:8px 16px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;border:1px dashed var(--line-2);color:var(--text-2)}
.chip .ph{font-size:20px}
.link{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(31,78,140,.35);text-underline-offset:3px;transition:text-decoration-color .3s var(--ease)}
.link:hover{text-decoration-color:var(--accent)}
.on-ink .link{color:var(--ink-accent);text-decoration-color:rgba(226,196,154,.45)}

/* ── Шапка ── */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:var(--z-nav);width:min(1136px,calc(100% - 64px));display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px 8px 8px 12px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(15,30,60,.08);transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:32px;height:32px;flex:none}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text b{font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;transition:color .3s var(--ease)}
.brand-text span{font-size:12px;line-height:16px;color:var(--text-3);white-space:nowrap;transition:color .3s var(--ease)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:8px 12px;border-radius:6px;color:var(--text-2);transition:background-color .3s var(--ease),color .3s var(--ease)}
.nav-links a:hover{background:var(--bg-2);color:var(--text)}
.nav-links a[aria-current]{color:var(--accent);background:var(--accent-soft)}
.nav-cta{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;width:40px;height:40px;border-radius:6px;border:1px solid var(--line);background:var(--bg);cursor:pointer;position:relative;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.menu-btn:hover{background:var(--bg-2)}
.menu-btn i{position:absolute;left:11px;width:16px;height:2px;border-radius:2px;background:var(--text);transition:transform .5s var(--ease),opacity .3s var(--ease),background-color .3s var(--ease)}
.menu-btn i:nth-child(1){top:14px}
.menu-btn i:nth-child(2){top:19px}
.menu-btn i:nth-child(3){top:24px}
.menu-open .menu-btn i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .menu-btn i:nth-child(2){opacity:0}
.menu-open .menu-btn i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* шапка над тёмным разделом */
.nav.dark{background:rgba(33,22,13,.82);border-color:var(--ink-line);box-shadow:none}
.nav.dark .brand-text b{color:var(--ink-text)}
.brand-mark>rect,.brand-mark g{transition:fill .3s var(--ease),stroke .3s var(--ease)}
.nav.dark .brand-mark>rect{fill:#C9A24A}
.nav.dark .brand-mark g{fill:#0B1D3D;stroke:#0B1D3D}
.menu-open .nav.dark .brand-mark>rect{fill:#0B1D3D}
.menu-open .nav.dark .brand-mark g{fill:#C9A24A;stroke:#C9A24A}
.nav.dark .brand-text span{color:var(--ink-text-3)}
.nav.dark .nav-links a{color:var(--ink-text-2)}
.nav.dark .nav-links a:hover{background:rgba(255,248,240,.1);color:var(--ink-text)}
.nav.dark .nav-links a[aria-current]{background:rgba(226,196,154,.18);color:var(--ink-accent)}
.nav.dark .btn-primary{background:var(--gold);color:var(--on-gold)}
.nav.dark .btn-primary:hover{background:var(--gold-hi)}
.nav.dark .menu-btn{background:rgba(255,248,240,.08);border-color:var(--ink-line)}
.nav.dark .menu-btn i{background:var(--ink-text)}
.menu-open .nav.dark{background:rgba(255,255,255,.92);border-color:var(--line)}
.menu-open .nav.dark .brand-text b{color:var(--text)}
.menu-open .nav.dark .menu-btn{background:var(--bg);border-color:var(--line)}
.menu-open .nav.dark .menu-btn i{background:var(--text)}
.menu-open .nav.dark .btn-primary{background:var(--accent);color:var(--on-accent)}

.panel{position:fixed;inset:0;z-index:var(--z-panel);background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);padding:96px 16px 32px;display:flex;flex-direction:column;gap:32px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.menu-open .panel{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
.panel ul{display:flex;flex-direction:column;gap:4px}
.panel li{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i) * 60ms)}
.menu-open .panel li{opacity:1;transform:none}
.panel ul a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
.panel ul a[aria-current]{color:var(--accent)}
.panel .panel-contacts{display:flex;flex-direction:column;gap:12px}
.menu-open{overflow:hidden}

@media (max-width:1100px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav{gap:12px}
}
.cta-narrow{display:none}
@media (max-width:479px){.cta-wide{display:none}.cta-narrow{display:inline-flex}.cta-narrow .ph{font-size:16px}}

/* ── Первый экран (тёмный, живой фон) ── */
.hero{padding:136px 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:stretch;padding-bottom:64px}
.hero-grid>.card-adv{align-self:start}
.hero-main{display:flex;flex-direction:column;align-items:flex-start}
.hero-links{margin-top:auto;padding-top:40px}
.hero-links .caption-3{color:var(--ink-text-3);margin-bottom:12px}
.hero-links ul{display:flex;flex-wrap:wrap;gap:8px}
.hero-links a{display:inline-block;padding:8px 12px;border:1px solid var(--ink-line);border-radius:999px;background:rgba(255,248,240,.05);color:var(--ink-text-2);transition:border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease)}
.hero-links a:hover{border-color:var(--ink-accent);color:var(--ink-text);background:rgba(255,248,240,.1)}
.card-adv .photo-slot{aspect-ratio:1/1}
.hero .eyebrow{padding:4px 12px;border:1px solid var(--ink-line);border-radius:999px;background:rgba(255,248,240,.07);color:var(--ink-text-2);margin-bottom:24px}
.hero .eyebrow .ph{color:var(--ink-accent);font-size:16px}
.hero h1,.page-head h1,.notfound h1{background:linear-gradient(90deg,#FFFFFF,#E6CBA6);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
.hero h1{max-width:680px}
.hero-sub{max-width:680px;margin-top:24px;color:var(--ink-text-2)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:32px}
.hero-phone{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--text-2)}
.hero-phone a{color:var(--text);font-weight:600}
.on-ink .hero-phone{color:var(--ink-text-3)}
.on-ink .hero-phone a{color:var(--ink-text)}
@media (max-width:1023px){.hero-grid{grid-template-columns:1fr;gap:48px}.hero{padding-top:128px}}
@media (max-width:767px){.hero{padding-top:112px}.hero-sub{margin-top:16px}.hero-actions{margin-top:24px}.hero-grid{padding-bottom:48px}}

/* Полоса с цифрами */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink-line)}
.stat{padding:32px 24px 40px;border-left:1px solid var(--ink-line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;color:var(--ink-text)}
.stat span{display:block;margin-top:8px;color:var(--ink-text-3)}
@media (max-width:899px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:24px 16px}.stat:nth-child(odd){border-left:0;padding-left:0}.stat:nth-child(n+3){border-top:1px solid var(--ink-line)}}

/* Карточка адвоката – стекло */
.card-adv{border:1px solid var(--ink-line);border-radius:16px;background:rgba(255,248,240,.07);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden}
.live{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--ink-line);color:var(--ink-text-2)}
.dot{position:relative;width:8px;height:8px;border-radius:50%;background:#A08B7A;flex:none}
.live.open .dot{background:var(--live)}
.live.open .dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--live);animation:ring 2s var(--ease) infinite}
@keyframes ring{from{transform:scale(1);opacity:.6}to{transform:scale(2.8);opacity:0}}
.photo-slot{aspect-ratio:4/5;background:var(--bg-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-3);text-align:center;padding:24px}
.photo-slot .ph{font-size:48px;color:var(--line-2)}
.on-ink .photo-slot,.card-adv .photo-slot{background:rgba(255,248,240,.05);color:var(--ink-text-3)}
.on-ink .photo-slot .ph,.card-adv .photo-slot .ph{color:rgba(255,255,255,.2)}
.card-adv .rows{padding:24px;display:flex;flex-direction:column;gap:16px;color:var(--ink-text)}
.row{display:flex;gap:12px}
.row .ph{font-size:20px;color:var(--accent);flex:none;margin-top:2px}
.card-adv .row .ph{color:var(--ink-accent)}
.row a{font-weight:600}
.row .tag{display:inline-block;margin-left:8px;padding:0 8px;border-radius:4px;background:var(--accent-soft);color:var(--accent)}
.card-adv .row .tag{background:rgba(226,196,154,.18);color:var(--ink-accent)}
.card-adv .muted{color:var(--ink-text-3)}
@media (max-width:1023px){.card-adv{display:grid;grid-template-columns:240px minmax(0,1fr)}.card-adv .live{grid-column:1/-1}.photo-slot{aspect-ratio:auto;min-height:100%}}
@media (max-width:599px){.card-adv{display:block}.card-adv .photo-slot{aspect-ratio:16/10}}

/* ── Направления ── */
.dir-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dir{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden;transition:border-color .3s var(--ease),transform .5s var(--ease)}
.dir::before{content:'';position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(31,78,140,.08),transparent 60%);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.dir:hover{border-color:var(--accent);transform:translateY(-2px)}
.dir:hover::before{opacity:1}
.dir:active{transform:translateY(1px)}
.dir>*{position:relative}
.dir .idx{position:absolute;top:24px;right:24px;color:var(--text-3)}
.dir .ico{width:48px;height:48px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform .5s var(--ease)}
.dir:hover .ico{transform:scale(1.06) rotate(-4deg)}
.dir p{color:var(--text-2)}
.dir .more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
.dir .more .ph{transition:transform .5s var(--ease)}
.dir:hover .more .ph{transform:translateX(4px)}
@media (max-width:1023px){.dir-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.dir-grid{grid-template-columns:1fr}}

/* ── Крупная фраза ── */
.tagline{padding:96px 0}
.tagline p{max-width:960px;text-wrap:balance}
.tagline .w{color:rgba(247,238,229,.3);transition:color .6s var(--ease)}
.tagline .w.on{color:var(--ink-text)}
.tagline .note{margin-top:32px;color:var(--ink-text-2);max-width:680px}
@media (max-width:767px){.tagline{padding:64px 0}}

/* ── Шаги ── */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.step{position:relative;padding-top:24px;border-top:2px solid var(--line)}
.step::before{content:'';position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform 1.2s var(--ease) .2s}
.step.in::before,.no-js .step::before{transform:scaleX(1)}
.step:nth-child(2)::before{transition-delay:.5s}
.step:nth-child(3)::before{transition-delay:.8s}
.step .num{color:var(--accent);margin-bottom:12px}
.step h3{margin-bottom:12px}
.step p{color:var(--text-2)}
.fee{margin-top:48px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;padding:32px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.fee .ico{width:48px;height:48px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:24px}
.fee p{color:var(--text-2);margin-top:8px}
@media (max-width:899px){.steps{grid-template-columns:1fr;gap:24px}.fee{grid-template-columns:1fr;padding:24px;gap:16px}}

/* ── Об адвокате ── */
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.facts{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--text-3)}
.facts dd{margin:0;font-weight:500}
@media (max-width:899px){.about-grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:599px){.facts div{grid-template-columns:1fr;gap:4px}}

/* ── Вопросы ── */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line);max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .ph{font-size:20px;color:var(--text-3);flex:none;transition:transform .5s var(--ease)}
.faq details[open] summary .ph{transform:rotate(45deg)}
.faq details[open] .ans{animation:faq-in .5s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq .ans{padding:0 48px 24px 0;color:var(--text-2)}
@media (max-width:599px){.faq .ans{padding-right:0}.faq summary{padding:16px 0}}

/* ── Контакты и форма ── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.people{display:flex;flex-direction:column;gap:16px}
.person{position:relative;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.person.main{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.person .badge{position:absolute;top:24px;right:24px;padding:4px 8px;border-radius:4px;background:var(--accent);color:var(--on-accent)}
.person .role{color:var(--text-3)}
.person .name{margin-top:4px;padding-right:96px}
.person .tel{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--text);transition:color .3s var(--ease)}
.person .tel .ph{color:var(--accent)}
.person .tel:hover{color:var(--accent)}
.msgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.place{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.place>div{display:flex;gap:12px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.place .ph{font-size:20px;color:var(--accent);flex:none;margin-top:2px}
.place p+p{margin-top:4px}
.vcard{margin-top:4px}

.form{padding:32px;border:1px solid var(--line);border-radius:16px;background:var(--bg);display:flex;flex-direction:column;gap:16px}
.form h3{margin-bottom:4px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{color:var(--text)}
.field .hint{color:var(--text-3)}
.input{width:100%;padding:8px 12px;min-height:44px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);transition:border-color .3s var(--ease)}
.input:hover{border-color:var(--text-3)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
textarea.input{min-height:96px;resize:vertical}
.field.err .input{border-color:var(--error)}
.err-msg{display:none;color:var(--error)}
.field.err .err-msg,.check-wrap.err .err-msg{display:block}
.check-wrap .err-msg{margin-top:8px;padding-left:32px}
.check{display:flex;gap:12px;align-items:flex-start;color:var(--text-2)}
.check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.form .btn{align-self:flex-start}
.form-status{display:none;padding:16px;border-radius:8px;background:var(--bg-2);color:var(--text)}
.form-status.show{display:block;animation:faq-in .5s var(--ease)}
.form-status.ok{background:#EAF5EE;color:#1F5133}
.form-status.bad{background:#F8ECEB;color:var(--error)}
.form .btn[disabled]{opacity:.6;cursor:progress}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* QR-код с контактом */
.qr-card{display:grid;grid-template-columns:176px minmax(0,1fr);gap:24px;align-items:center;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.qr-card img{width:176px;height:176px;border-radius:8px;background:#FFFFFF;padding:8px;border:1px solid var(--line)}
.qr-card p{color:var(--text-2);margin-top:8px}
@media (max-width:1023px){.qr-card{display:none}}
/* Плитка направлений: широкие карточки */
.dir-grid{grid-auto-flow:dense}
.dir.wide{grid-column:span 2}
.dir.wide .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dir.wide .tags span{padding:4px 8px;border-radius:4px;background:var(--bg-2);color:var(--text-2)}
@media (max-width:639px){.dir.wide{grid-column:auto}}
/* Статьи */
.pub-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pub{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg);transition:border-color .3s var(--ease),transform .5s var(--ease)}
.pub:hover{border-color:var(--accent);transform:translateY(-2px)}
.pub .meta{color:var(--text-3)}
.pub p{color:var(--text-2)}
.pub .more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
@media (max-width:1023px){.pub-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.pub-list{grid-template-columns:1fr}}
.article{max-width:760px}
.article>*+*{margin-top:16px}
.article h2{margin-top:48px}
.article h3{margin-top:32px}
.article p,.article li{color:var(--text-2)}
.article ul,.article ol{display:flex;flex-direction:column;gap:8px;padding-left:24px}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article b{color:var(--text)}
.callout{display:flex;gap:12px;padding:16px 24px;border-radius:12px;background:var(--bg-2);color:var(--text)}
.callout .ph{color:var(--accent);font-size:20px;flex:none;margin-top:2px}
.callout.warn{background:#FBF4E4}
.callout.warn .ph{color:#8A5A12}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;color:var(--ink-text-3)}
.article-meta span{display:inline-flex;align-items:center;gap:8px}
.cta-box{margin-top:64px;padding:32px;border-radius:16px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cta-box p{color:var(--ink-text-2);margin-top:8px;max-width:520px}
@media (max-width:599px){.cta-box{padding:24px}}
/* Из практики */
.case-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.case-rules>div{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.case-rules .ph{font-size:24px;color:var(--accent)}
.case-rules p{color:var(--text-2)}
@media (max-width:899px){.case-rules{grid-template-columns:1fr}}
@media (max-width:1023px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:599px){.place{grid-template-columns:1fr}.form{padding:24px}.place>div,.person{padding:16px}.person .badge{top:16px;right:16px}}

/* ── Подвал ── */
.foot{background:var(--ink-2);color:var(--ink-text-3);padding:64px 0 32px}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:48px}
.foot h2{color:var(--ink-text);margin-bottom:16px}
.foot .who{color:var(--ink-text)}
.foot p+p{margin-top:8px}
.foot ul{display:flex;flex-direction:column;gap:8px}
.foot a{transition:color .3s var(--ease)}
.foot a:hover{color:var(--ink-accent)}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--ink-line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
@media (max-width:899px){.foot-grid{grid-template-columns:1fr;gap:32px}}

/* ── Внутренние страницы ── */
.page-head{padding:160px 0 64px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;color:var(--ink-text-3);margin-bottom:24px}
.crumbs a{transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--ink-accent)}
.crumbs .ph{font-size:12px;align-self:center}
.crumbs [aria-current]{color:var(--ink-text-2)}
.page-head h1{max-width:880px}
.page-head .lead{max-width:760px;margin-top:24px;color:var(--ink-text-2)}
.page-head .hero-actions{margin-top:32px}
@media (max-width:767px){.page-head{padding:112px 0 48px}.page-head .lead{margin-top:16px}}

.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
.prose>section+section{margin-top:64px}
.prose h2{margin-bottom:24px}
.ticks{display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:12px;color:var(--text-2)}
.ticks .ph{color:var(--accent);font-size:20px;flex:none;margin-top:2px}
.terms{display:flex;flex-direction:column;gap:12px}
.term{display:grid;grid-template-columns:184px minmax(0,1fr);gap:24px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.term b{color:var(--accent)}
.term p{color:var(--text-2)}
@media (max-width:599px){.term{grid-template-columns:1fr;gap:8px;padding:16px}}
.aside{position:sticky;top:96px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg);display:flex;flex-direction:column;gap:16px}
.aside .btn{justify-content:center}
.aside .photo-slot{border-radius:8px;background:var(--bg-2);color:var(--text-3)}
.aside .photo-slot .ph{color:var(--line-2)}
@media (max-width:1023px){.page-grid{grid-template-columns:1fr;gap:48px}.aside{position:static}}
.others{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.others a{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--bg);transition:border-color .3s var(--ease),transform .5s var(--ease)}
.others a:hover{border-color:var(--accent);transform:translateY(-2px)}
.others .ph{font-size:20px;color:var(--accent);flex:none}
@media (max-width:1023px){.others{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.others{grid-template-columns:1fr}}

.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.slot{aspect-ratio:3/4;border:1px dashed var(--line-2);border-radius:12px;background:var(--bg-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;color:var(--text-3)}
.slot .ph{font-size:32px;color:var(--line-2)}
@media (max-width:767px){.slots{grid-template-columns:repeat(2,minmax(0,1fr))}}

.empty{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:48px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2);max-width:760px}
.empty .ico{width:48px;height:48px;border-radius:8px;background:var(--bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:24px}
.empty p{color:var(--text-2)}
@media (max-width:599px){.empty{padding:24px}}

.doc{max-width:760px}
.doc h2{margin:48px 0 16px}
.doc p,.doc li{color:var(--text-2)}
.doc p+p{margin-top:12px}
.doc ul{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-left:24px;list-style:disc}
.draft-note{display:flex;gap:12px;padding:16px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-2);color:var(--text-2);max-width:760px;margin-bottom:32px}
.draft-note .ph{color:var(--accent);font-size:20px;flex:none;margin-top:2px}

.notfound{min-height:100svh;display:flex;align-items:center;padding:144px 0 96px}
.notfound .code{color:var(--ink-accent)}
.notfound p{margin-top:16px;color:var(--ink-text-2);max-width:560px}

/* Статьи в изданиях и карточка-ссылка */
.media-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.media{display:flex;flex-direction:column;gap:12px;padding:32px;border:1px solid var(--line);border-radius:12px;background:var(--bg);transition:border-color .3s var(--ease),transform .5s var(--ease)}
.media:hover{border-color:var(--accent);transform:translateY(-2px)}
.media .meta{color:var(--text-3)}
.media p{color:var(--text-2)}
.media .more{display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
.prose .media{padding:24px}
@media (max-width:899px){.media-list{grid-template-columns:1fr}.media{padding:24px}}
.link-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg);transition:border-color .3s var(--ease),transform .5s var(--ease)}
.link-card:hover{border-color:var(--accent);transform:translateY(-2px)}
@media (max-width:599px){.link-card{grid-template-columns:auto minmax(0,1fr);gap:16px}.link-card>.link{grid-column:1/-1}}

/* ── Нижняя панель на телефоне и «Наверх» ── */
.mbar{position:fixed;left:16px;right:16px;bottom:16px;z-index:var(--z-bar);display:none;gap:8px;padding:8px;border-radius:12px;background:rgba(22,14,8,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--ink-line);transform:translateY(calc(100% + 24px));opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.mbar.show{transform:none;opacity:1}
.mbar .btn{min-height:44px}
.mbar .grow{flex:1}
.mbar .sq{width:44px;padding:0}
.totop{position:fixed;right:24px;bottom:24px;z-index:var(--z-bar);width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);color:var(--text);font-size:20px;cursor:pointer;transform:translateY(16px);opacity:0;pointer-events:none;transition:transform .5s var(--ease),opacity .5s var(--ease),background-color .3s var(--ease)}
.totop.show{transform:none;opacity:1;pointer-events:auto}
.totop:hover{background:var(--bg)}
.totop:active{transform:scale(.96)}
@media (max-width:767px){.mbar{display:flex}.totop{display:none}.foot{padding-bottom:96px}}
.menu-open .mbar{opacity:0;pointer-events:none}

/* ── Появление при прокрутке ── */
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{transform:none;transition:opacity .7s var(--ease)}
  .panel li{transform:none}
  .tagline .w{transition:none}
  .step::before{transition:none}
  .live.open .dot::after{animation:none}
  .faq details[open] .ans,.form-status.show{animation:none}
  .btn,.dir,.others a,.dir .ico{transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
  .dir:hover,.others a:hover,.dir:hover .ico{transform:none}
  .mbar,.totop{transition:opacity .3s var(--ease)}
}

/* Портрет */
.portrait{display:block;width:100%;height:auto;object-fit:cover}
.card-adv .portrait{aspect-ratio:1/1;object-position:50% 18%}
.aside .portrait{aspect-ratio:4/5;object-position:50% 20%;border-radius:8px}
@media (max-width:1023px){.card-adv .portrait{aspect-ratio:auto;height:100%;min-height:100%}}
@media (max-width:599px){.card-adv .portrait{aspect-ratio:4/5;height:auto}}
/* латунные метки и номера */
.eyebrow.caption-3,.sec-head .eyebrow{color:var(--accent)}
.dir .idx,.step .num{color:#9C7A55}
.step::before{background:#B78F72}

/* Знак адвокатуры: одна маска, цвет задаётся фоном */
.brand-mark{display:block;width:40px;height:40px;flex:none;background:var(--heading);-webkit-mask:url('/assets/img/emblem-mask.png') center/contain no-repeat;mask:url('/assets/img/emblem-mask.png') center/contain no-repeat;transition:background-color .3s var(--ease)}
.nav.dark .brand-mark{background:var(--ink-accent)}
.menu-open .nav.dark .brand-mark{background:var(--ink-accent)}
.eyebrow-emblem{display:inline-block;width:20px;height:20px;flex:none;background:var(--ink-accent);-webkit-mask:url('/assets/img/emblem-mask.png') center/contain no-repeat;mask:url('/assets/img/emblem-mask.png') center/contain no-repeat}
.foot-emblem{display:block;width:72px;height:72px;margin-bottom:16px;opacity:.9}

/* Повышение квалификации */
.ytabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.ytab{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg);color:var(--text-2);cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.ytab span{color:var(--text-3)}
.ytab:hover{border-color:var(--accent);color:var(--accent)}
.ytab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ytab[aria-selected="true"] span{color:rgba(255,255,255,.75)}
.certs{display:grid;grid-template-columns:1fr;gap:16px}
.certs[hidden]{display:none}
.cert{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.cert-img{display:block;align-self:start;border-radius:4px;overflow:hidden;border:1px solid var(--line);transition:transform .5s var(--ease),border-color .3s var(--ease)}
.cert-img:hover{transform:translateY(-2px);border-color:var(--accent)}
.cert-img img{display:block;width:100%;height:auto}
.cert-meta{color:var(--accent);margin-bottom:8px}
.cert ul{display:flex;flex-direction:column;gap:8px;padding-left:16px;list-style:disc;color:var(--text-2)}
@media (max-width:479px){.cert{grid-template-columns:88px minmax(0,1fr);gap:12px;padding:12px}}

/* Просмотр сертификата крупно */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:64px 16px 24px;background:rgba(7,21,48,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.lightbox.open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.lightbox img{max-width:min(100%,900px);max-height:100%;width:auto;height:auto;border-radius:4px;box-shadow:0 24px 64px rgba(0,0,0,.4);transform:scale(.98);transition:transform .5s var(--ease)}
.lightbox.open img{transform:none}
.lightbox .lb-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#FFFFFF;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lightbox .lb-close:hover{background:rgba(255,255,255,.2)}

/* шапка по ширине содержимого: края совпадают с краями текста и карточек */
@media (max-width:767px){.nav{width:calc(100% - 32px)}}

/* правая колонка: блоки «Адвокат» и «Запись на консультацию» */
.aside-group{display:flex;flex-direction:column;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.aside-group .btn{justify-content:center}
.aside-label{color:var(--accent)}

/* значки */
.ph-address-book:before{content:"\e6f8"}
.ph-arrow-left:before{content:"\e058"}
.ph-arrow-right:before{content:"\e06c"}
.ph-arrow-up:before{content:"\e08e"}
.ph-arrow-up-right:before{content:"\e092"}
.ph-buildings:before{content:"\e102"}
.ph-calendar-check:before{content:"\e712"}
.ph-calendar-dots:before{content:"\e7b4"}
.ph-car-profile:before{content:"\e8cc"}
.ph-caret-right:before{content:"\e13a"}
.ph-chat-circle-text:before{content:"\e16e"}
.ph-check:before{content:"\e182"}
.ph-clock:before{content:"\e19a"}
.ph-coins:before{content:"\e78e"}
.ph-door-open:before{content:"\e7e6"}
.ph-eye-slash:before{content:"\e224"}
.ph-file-text:before{content:"\e23a"}
.ph-folder-simple-lock:before{content:"\eb5e"}
.ph-gavel:before{content:"\ea32"}
.ph-hand-heart:before{content:"\e810"}
.ph-handshake:before{content:"\e582"}
.ph-house:before{content:"\e2c2"}
.ph-identification-card:before{content:"\e2c8"}
.ph-info:before{content:"\e2ce"}
.ph-map-pin:before{content:"\e316"}
.ph-paper-plane-tilt:before{content:"\e398"}
.ph-phone:before{content:"\e3b8"}
.ph-plus:before{content:"\e3d4"}
.ph-scales:before{content:"\e750"}
.ph-seal-check:before{content:"\e606"}
.ph-shield-check:before{content:"\e40c"}
.ph-signature:before{content:"\ebac"}
.ph-siren:before{content:"\e9b8"}
.ph-steering-wheel:before{content:"\e9ac"}
.ph-telegram-logo:before{content:"\e5bc"}
.ph-user:before{content:"\e4c2"}
.ph-users-three:before{content:"\e68e"}
.ph-warning:before{content:"\e4e0"}
.ph-whatsapp-logo:before{content:"\e5d0"}