@font-face{font-family:'Sochi Serif';font-weight:400;font-style:normal;font-display:swap;src:url(serif-400.woff) format('woff')}
@font-face{font-family:'Sochi Serif';font-weight:500;font-style:normal;font-display:swap;src:url(serif-500.woff) format('woff')}
@font-face{font-family:'Sochi Serif';font-weight:600;font-style:normal;font-display:swap;src:url(serif-600.woff) format('woff')}
@font-face{font-family:'Sochi Serif';font-weight:700;font-style:normal;font-display:swap;src:url(serif-700.woff) format('woff')}
@font-face{font-family:'Sochi Serif';font-weight:900;font-style:normal;font-display:swap;src:url(serif-900.woff) format('woff')}
@font-face{font-family:'Sochi Sans';font-weight:400;font-style:normal;font-display:swap;src:url(sans-400.woff) format('woff')}
@font-face{font-family:'Sochi Sans';font-weight:500;font-style:normal;font-display:swap;src:url(sans-500.woff) format('woff')}
@font-face{font-family:'Sochi Sans';font-weight:600;font-style:normal;font-display:swap;src:url(sans-600.woff) format('woff')}
/* Кадастровый план Сочи: тёмный лист, золотые границы участков, настоящие решения судов. Один тёмный мир на весь сайт. */
:root {
  color-scheme: dark;
  --night: #06181B;
  --deep: #0A2327;
  --sea: #103338;
  --gold: #E8C27A;
  --gold-hi: #FFF3CF;
  --gold-lo: #A87A35;
  --cream: #F6EBD2;
  --mist: #C4BEA9;
  --paper: #F4EEDF;
  --ink: #14201F;
  --stamp: #C92A1A;
  --red: #E26048;
  --line: rgba(232, 194, 122, .32);
  --display: 'Sochi Serif', 'Noto Serif', Georgia, 'Times New Roman', serif;
  --ui: 'Sochi Sans', Inter, 'Helvetica Neue', Arial, sans-serif;
  --foil: linear-gradient(100deg, #E8C27A 0%, #FFF3CF 32%, #E8C27A 66%, #F6DFA6 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--night); }
/* Кресты координатной сетки, как на плане */
body { margin: 0; background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='184'%3E%3Cpath d='M87 92h10M92 87v10' stroke='%23F6EBD2' stroke-opacity='.17' fill='none'/%3E%3C/svg%3E"); color: var(--cream); font-family: var(--display); font-size: 19px; line-height: 1.62; font-weight: 400; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--gold); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; border-radius: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; line-height: 1.1; text-wrap: balance; overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.view[hidden] { display: none; }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.band { padding-block: clamp(64px, 9vw, 120px); }

.foil { width: fit-content; max-width: 100%; color: var(--gold); background: var(--foil); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.h2 { font-size: clamp(38px, 5.6vw, 76px); }
.lead { font-size: clamp(20px, 2vw, 24px); line-height: 1.46; font-weight: 500; max-width: 33em; }

/* Кнопки */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 14px 30px; border: 0; border-radius: 3px; background: linear-gradient(100deg, #C89A4C, #F2D592 42%, #FFF3CF 54%, #E2B765 78%, #B98A3E); color: #1E1305; font: 600 18px/1.2 var(--ui); text-decoration: none; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.btn:hover { color: #1E1305; transform: translateY(-2px); filter: brightness(1.06); }
.btn svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.ghost { display: inline-flex; align-items: center; min-height: 58px; padding: 12px 8px; color: var(--cream); font: 500 18px/1.2 var(--ui); text-underline-offset: .28em; }

/* Шапка */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 20px; font: 500 16px/1.25 var(--ui); }
.logo { display: inline-flex; align-items: center; gap: 11px; padding-block: 3px; color: var(--cream); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.2; }
.logo small { display: block; color: var(--mist); font: 400 14px/1.3 var(--ui); }
.emblem { width: 38px; height: 38px; flex: none; fill: var(--gold); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; }
.nav a { color: var(--cream); text-decoration: none; padding-block: 8px; }
.nav a:hover { color: var(--gold-hi); }
.nav .tel { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; color: var(--gold); font-weight: 600; font-size: 18px; white-space: nowrap; }

/* Первый экран: живая карта */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: #051519; isolation: isolate; }
#plan { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(5, 21, 25, .94) 0%, rgba(5, 21, 25, .86) max(30%, calc(50% - 240px)), rgba(5, 21, 25, .3) max(52%, calc(50% + 130px)), rgba(5, 21, 25, 0) max(66%, calc(50% + 380px))), linear-gradient(180deg, rgba(5, 21, 25, .66) 0, rgba(5, 21, 25, 0) 16%); }
.hero-body { position: relative; height: 100%; display: flex; flex-direction: column; }
.hero-main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(16px, 2.4vh, 26px); padding-bottom: clamp(60px, 9vh, 96px); }
.title { position: relative; font-size: clamp(66px, 8.6vw, 124px); line-height: .98; letter-spacing: .004em; text-transform: uppercase; }
/* Размерная линия под заголовком */
.title::after { content: ""; display: block; height: 11px; margin-top: 16px; border-left: 1px solid var(--gold); border-right: 1px solid var(--gold); background: linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat; transform-origin: 0 50%; animation: dim 1.5s cubic-bezier(.6, 0, .2, 1) .3s both; }
@keyframes dim { from { transform: scaleX(0); } to { transform: none; } }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }

/* Карточка дела на карте */
.plan-card { position: absolute; right: max(28px, env(safe-area-inset-right, 0px)); bottom: 66px; width: min(372px, 33vw); padding: 10px 18px 6px; background: rgba(5, 21, 25, .9); border: 1px solid var(--line); }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--gold); font: 500 15px/1.2 var(--ui); }
.pc-top b { font-weight: 600; color: var(--gold-hi); }
.pc-nav { display: flex; gap: 2px; margin-right: -10px; }
.pc-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 3px; background: none; cursor: pointer; }
.pc-nav button:hover { background: rgba(232, 194, 122, .14); }
.pc-nav svg { width: 24px; height: 24px; fill: var(--gold-hi); }
.pc-list { display: grid; }
.pc { grid-area: 1 / 1; display: grid; gap: 4px; justify-items: start; align-content: start; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.pc.on { opacity: 1; visibility: visible; }
.pc-t { font-weight: 700; font-size: 21px; line-height: 1.22; }
.pc .court { font-size: 16px; }

html:not(.js) .plan-card, html:not(.js) .hud { display: none; }

/* Строка масштаба и координат */
.hud { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 28px; padding: 0 max(28px, env(safe-area-inset-right, 0px)) 14px max(20px, env(safe-area-inset-left, 0px)); color: var(--mist); font: 500 14px/1.3 var(--ui); pointer-events: none; }
.scale i { display: block; width: 80px; height: 7px; border: 1px solid var(--cream); border-top: 0; transition: width .3s ease; }
.scale span { display: block; margin-top: 3px; }
.xy { white-space: pre; font-variant-numeric: tabular-nums; }
.north { width: 24px; height: 34px; margin-left: auto; overflow: visible; }
.north path { fill: var(--gold); }
.north .n2 { fill: none; stroke: var(--gold); stroke-width: 2; }
.north text { font: 600 11px var(--ui); fill: var(--cream); }

/* Карта под разделами */
.plan-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .8; }

/* Услуги: участки на плане */
.serv-band { position: relative; isolation: isolate; overflow: hidden; }
.serv-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--night), rgba(6, 24, 27, .7) 18%, rgba(6, 24, 27, .7) 82%, var(--night)); }
.serv-head { display: grid; gap: 18px; margin-bottom: clamp(30px, 4vw, 48px); }
.serv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(246, 235, 210, .55); border-left: 1px solid rgba(246, 235, 210, .55); background: rgba(5, 21, 25, .78); counter-reset: lot; }
html.js .serv a { clip-path: inset(-1px); transition: clip-path .75s cubic-bezier(.6, 0, .2, 1) calc(var(--i) * 70ms); }
html.js .serv:not(.in) a { clip-path: inset(-1px 100% -1px -1px); }
.serv a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 164px; padding: 18px 20px; overflow: hidden; border-right: 1px solid rgba(246, 235, 210, .55); border-bottom: 1px solid rgba(246, 235, 210, .55); color: var(--cream); text-decoration: none; font-weight: 600; font-size: 20px; line-height: 1.22; counter-increment: lot; }
.serv a::before { content: ":" counter(lot); position: absolute; top: 12px; right: 14px; color: var(--gold); font: 500 14px/1 var(--ui); }
.serv a::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(232, 194, 122, .2) 0 1px, transparent 1px 9px); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.serv a:hover { color: var(--gold-hi); box-shadow: inset 0 0 0 1.5px var(--gold-hi); }
.serv a:hover::after { opacity: 1; }
.serv svg { width: 40px; height: 40px; fill: var(--gold); flex: none; }

/* Часто ищут */
.chips { display: grid; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }
.chips p { color: var(--mist); font: 500 16px/1.3 var(--ui); }
.chips ul { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 3px; background: rgba(5, 22, 26, .7); color: var(--cream); font: 500 16px/1.25 var(--ui); text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.chips a:hover { border-color: var(--gold); color: var(--gold-hi); }

/* О юристе */
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 28px 72px; align-items: start; }
.about-text { display: grid; gap: 16px; min-width: 0; }

/* Решённые дела */
.cases-head { display: grid; gap: 18px; padding-bottom: clamp(26px, 4vw, 44px); }
.stack { position: relative; padding-bottom: 8vh; }
.case { position: sticky; top: clamp(10px, 4vh, 44px); margin-bottom: 26vh; background: linear-gradient(135deg, var(--sea), var(--deep) 46%, var(--night)); border-top: 1px solid var(--gold-lo); box-shadow: 0 -26px 60px rgba(0, 0, 0, .62); scroll-margin-top: 56px; }
.case:last-child { margin-bottom: 0; }
.case-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px clamp(28px, 5vw, 72px); align-items: center; min-height: min(84svh, 720px); padding-block: clamp(26px, 4vw, 52px); }
.case-text { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.case-doc { position: relative; min-width: 0; }
.tag { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 12px; border-radius: 3px; background: linear-gradient(100deg, #C89A4C, #F2D592 42%, #FFF3CF 54%, #E2B765 78%, #B98A3E); color: #1E1305; font-weight: 900; font-size: 19px; line-height: 1.2; }
.tag svg { width: 26px; height: 26px; fill: currentColor; }
.case h3, .h3 { font-size: clamp(30px, 3.5vw, 48px); color: var(--cream); }
.court { color: var(--gold); font-size: 17px; font-weight: 600; line-height: 1.34; }
.open { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--gold); font: 500 17px/1.3 var(--ui); text-decoration: underline; text-underline-offset: .24em; cursor: pointer; }
.open:hover { color: var(--gold-hi); }
.sheet-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; transform: rotate(1.2deg); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.sheet-btn:hover { transform: rotate(.3deg) translateY(-5px); }
.sheet { position: relative; display: block; overflow: hidden; background: var(--paper); box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 8px 20px rgba(0, 0, 0, .45); }
.sheet > img { width: 100%; height: auto; mix-blend-mode: multiply; }
.sheet > .oti { position: absolute; right: 3%; bottom: 5%; width: 42%; height: auto; mix-blend-mode: multiply; transform: rotate(-9deg); z-index: 2; }
.sheet > .oti.armed { opacity: 0; }
.sheet > .oti.slam { animation: slam .46s cubic-bezier(.3, 1.3, .5, 1) both; }
.sheet-btn.hit { animation: hit .4s .16s ease-out; }
@keyframes slam { 0% { opacity: 0; transform: rotate(-16deg) scale(2.8); filter: blur(5px); } 62% { opacity: 1; transform: rotate(-8deg) scale(.95); filter: blur(0); } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } }
@keyframes hit { 0% { translate: 0 0; } 28% { translate: 0 7px; } 60% { translate: 0 -2px; } 100% { translate: 0 0; } }

/* Схема к делу: лежит на документе и чертится при появлении */
.scheme { position: absolute; left: -36px; bottom: -22px; z-index: 3; width: min(50%, 252px); background: rgba(5, 21, 25, .96); border: 1px solid var(--gold-lo); box-shadow: 0 14px 32px rgba(0, 0, 0, .6); pointer-events: none; }
.scheme svg { width: 100%; height: auto; overflow: visible; }
.scheme .ln { fill: none; stroke: var(--gold-hi); stroke-width: 1.7; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(.6, 0, .2, 1) .15s; }
.scheme .l2 { stroke-width: 1; transition-delay: 1s; }
.scheme .l3 { transition-delay: .8s; }
.scheme .old { stroke: var(--red); stroke-dasharray: .03 .02; transition: opacity .6s .1s; }
.scheme .ht { fill: none; stroke: rgba(232, 194, 122, .46); stroke-width: 1; transition: opacity .7s 1.2s; }
.scheme .fl { fill: rgba(232, 194, 122, .8); transition: opacity .6s 1.3s; }
.scheme .pt { fill: #06181B; stroke: var(--gold-hi); stroke-width: 1.4; transition: opacity .3s var(--d); }
.scheme .tn { fill: var(--gold); font: 500 10.5px var(--ui); text-anchor: middle; transition: opacity .3s var(--d); }
.scheme .ta { fill: var(--gold-hi); font: 700 17px var(--display); text-anchor: middle; paint-order: stroke; stroke: #051519; stroke-width: 4px; transition: opacity .5s 1.4s; }
.scheme .bx { fill: rgba(232, 194, 122, .26); stroke: var(--gold-hi); stroke-width: 1; transition: opacity .25s var(--d); }
html.js .scheme:not(.in) .ln:not(.old) { stroke-dashoffset: 1; }
html.js .scheme:not(.in) .ht, html.js .scheme:not(.in) .fl, html.js .scheme:not(.in) .pt, html.js .scheme:not(.in) .tn, html.js .scheme:not(.in) .ta, html.js .scheme:not(.in) .bx, html.js .scheme:not(.in) .old { opacity: 0; }

/* Этапы: точки границы */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; margin-top: clamp(30px, 4vw, 48px); }
.steps::before { content: ""; position: absolute; left: 25px; right: 16%; top: 25px; height: 1.5px; background: var(--gold); transform-origin: 0 50%; transition: transform 2.2s cubic-bezier(.5, 0, .2, 1); }
html.js .steps:not(.in)::before { transform: scaleX(0); }
.step { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; transition: opacity .5s calc(var(--i) * .42s + .1s); }
html.js .steps:not(.in) .step { opacity: .16; }
.step b { display: grid; place-items: center; width: 50px; height: 50px; border: 1.5px solid var(--gold); border-radius: 50%; color: var(--gold-hi); font: 900 22px/1 var(--display); background: var(--night); }
.step h3 { font-size: 22px; font-weight: 700; line-height: 1.22; color: var(--cream); }
.step p { color: var(--mist); font-size: 17px; line-height: 1.5; }

/* Вопросы */
.faq { display: grid; gap: 0; max-width: 54em; margin-top: 26px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-weight: 600; font-size: 21px; line-height: 1.3; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; color: var(--gold); font: 400 30px/1.2 var(--ui); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 22px; color: var(--mist); max-width: 46em; }

/* Призыв */
.cta { position: relative; overflow: hidden; isolation: isolate; background: #051519; }
.cta .plan-bg { opacity: .95; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 21, 25, .86), rgba(5, 21, 25, .2) 72%); }
.cta-in { position: relative; display: grid; gap: 14px; justify-items: start; padding-block: clamp(70px, 10vw, 136px); }
.cta .h2 { font-size: clamp(42px, 6.4vw, 88px); }
.phone { display: inline-block; padding-block: 6px; color: var(--gold-hi); font-weight: 700; font-size: clamp(30px, 5vw, 52px); line-height: 1.2; text-decoration: none; user-select: all; }
.mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font: 500 clamp(18px, 2vw, 22px)/1.3 var(--ui); overflow-wrap: anywhere; }

/* Внутренние страницы */
.ph { position: relative; overflow: hidden; isolation: isolate; background: #051519; }
.ph .plan-bg { opacity: .9; }
.ph::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 21, 25, .9), rgba(5, 21, 25, .5) 52%, rgba(5, 21, 25, 0) 86%), linear-gradient(180deg, rgba(5, 21, 25, 0) 60%, var(--night) 100%); }
.ph-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; padding-block: clamp(28px, 6vw, 72px) clamp(48px, 7vw, 88px); }
.ph h1 { font-size: clamp(32px, 7vw, 84px); max-width: 100%; }
.crumbs { color: var(--mist); font: 400 15px/1.4 var(--ui); }
.crumbs a { color: var(--mist); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 72px; align-items: start; }
.col { display: grid; gap: 16px; min-width: 0; }
.checks { display: grid; gap: 0; }
.checks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-weight: 500; line-height: 1.36; }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks svg { width: 28px; height: 28px; fill: var(--gold); }
.mini { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 48px; align-items: center; padding-block: 40px; border-top: 1px solid var(--line); }
.mini .case-text { gap: 12px; }
.mini h3 { font-size: clamp(25px, 2.8vw, 36px); color: var(--cream); }
.mini .case-doc { width: 100%; max-width: 460px; justify-self: end; }

/* Подвал */
.foot { background: #041114; color: var(--mist); font-size: 16px; line-height: 1.5; border-top: 1px solid var(--line); }
.foot-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px 48px; padding-block: 48px 28px; }
.foot b { display: block; margin-bottom: 8px; color: var(--cream); font-size: 18px; }
.foot a { color: var(--mist); text-decoration: none; display: block; padding-block: 3px; }
.foot a:hover { color: var(--gold-hi); }
.stampbox { display: grid; grid-template-columns: repeat(3, auto); width: fit-content; max-width: 100%; margin: 0 0 calc(30px + env(safe-area-inset-bottom, 0px)) auto; border: 1px solid var(--line); color: var(--mist); font: 500 14px/1.3 var(--ui); }
.stampbox span { padding: 7px 14px; border-left: 1px solid var(--line); }
.stampbox span:first-child { border-left: 0; }

/* Нижняя кнопка на телефоне */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: none; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(4, 17, 20, .96); border-top: 1px solid var(--line); }
.callbar .btn { width: 100%; min-height: 52px; }

/* Меню на телефоне */
.menu-btn { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 3px; background: rgba(4, 17, 20, .62); color: var(--cream); font: 600 16px/1 var(--ui); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.mnav { position: fixed; inset: 0; z-index: 40; display: none; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: calc(10px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); background: var(--night); }
.mnav[data-open] { display: flex; animation: mnav .22s ease-out both; }
@keyframes mnav { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mnav-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.mnav-top .menu-btn { display: inline-flex; }
.mnav-main { display: grid; }
.mnav-main a { display: flex; align-items: center; min-height: 56px; border-top: 1px solid var(--line); color: var(--cream); font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.2; text-decoration: none; }
.mnav-label { padding-block: 16px 4px; border-top: 1px solid var(--line); color: var(--gold); font: 600 15px/1.3 var(--ui); }
.mnav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 14px; padding-bottom: 8px; }
.mnav-grid a { display: flex; align-items: center; min-height: 46px; color: var(--cream); font: 500 17px/1.25 var(--ui); text-decoration: none; }
.mnav-mail { margin-bottom: 10px; }
.mnav .btn { flex: none; margin-top: auto; width: 100%; }

/* Подпись под каруселью дел */
.swipe { display: none; }

/* Просмотр решения */
.lb { position: fixed; inset: 0; z-index: 30; display: none; flex-direction: column; background: #041114; }
.lb[data-open] { display: flex; }
.lb-bar { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); color: var(--cream); font: 500 16px/1.2 var(--ui); }
.lb-bar span { flex: 1; min-width: 0; white-space: nowrap; }
.lb-bar button { min-width: 48px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--sea); color: var(--cream); font: 600 16px/1 var(--ui); cursor: pointer; }
.lb-bar button:disabled { opacity: .4; cursor: default; }
.lb-view { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; background: var(--paper); }
.lb-view img { width: 100%; max-width: 980px; height: auto; margin-inline: auto; cursor: zoom-in; }
.lb-view img.zoom { width: max(760px, 100%); max-width: none; cursor: zoom-out; }
.lb-hint { position: absolute; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: fit-content; margin-inline: auto; padding: 8px 16px; border-radius: 3px; background: rgba(4, 17, 20, .88); color: var(--cream); font: 500 15px/1.3 var(--ui); text-align: center; pointer-events: none; }

/* Низкие экраны */
@media (max-height: 700px) {
  .case { position: relative; top: auto; margin-bottom: 14px; }
  .case-in { min-height: 0; }
  .plan-card { bottom: 56px; }
  .pc .court { display: none; }
}
@media (max-height: 560px) {
  .hero { height: auto; min-height: 100svh; }
  .hero-body { height: auto; min-height: 100svh; }
  .hero-main { padding-block: 4px 56px; }
  .title { font-size: clamp(44px, 7vw, 66px); }
  .title::after { margin-top: 8px; }
  .hero .lead { font-size: 18px; line-height: 1.4; }
  .plan-card, .hud { display: none; }
}

/* Появление при прокрутке там, где браузер это умеет */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sheet-btn { animation: tilt linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    @keyframes tilt { from { transform: rotate(6deg) translateY(70px) scale(.97); } to { transform: rotate(1.2deg); } }
  }
}

/* Телефон и планшет: своя раскладка, а не сжатая версия для компьютера */
@media (max-width: 860px) {
  body { font-size: 17px; line-height: 1.58; padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  a, button, summary { -webkit-tap-highlight-color: rgba(232, 194, 122, .2); }
  .band { padding-block: 48px; }
  .h2 { font-size: clamp(33px, 9.6vw, 56px); }
  .lead { font-size: 18px; line-height: 1.46; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs span { display: none; }

  .callbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .callbar .menu-btn { min-height: 52px; }
  .menu-btn { display: inline-flex; }
  .top { flex-wrap: nowrap; gap: 12px; padding-block: 14px 6px; }
  .nav a:not(.tel) { display: none; }
  .nav { flex-wrap: nowrap; gap: 14px; }
  .emblem { width: 34px; height: 34px; }
  .logo { white-space: nowrap; }

  /* Первый экран: текст сверху, карта и дело снизу */
  .hero { height: min(100vh, 900px); height: min(100svh, 900px); min-height: 600px; }
  .hero::after { background: linear-gradient(180deg, rgba(5, 21, 25, .95) 0%, rgba(5, 21, 25, .9) 42%, rgba(5, 21, 25, .35) 60%, rgba(5, 21, 25, 0) 72%); }
  .hero-main { flex: none; justify-content: flex-start; gap: 13px; padding-top: 2vh; padding-bottom: 0; }
  .title { font-size: clamp(50px, 15.4vw, 96px); }
  .title::after { margin-top: 10px; }
  .acts .call, .acts-call { display: none; }
  .hero .ghost { min-height: 48px; padding: 10px 16px; border: 1px solid var(--gold); border-radius: 3px; background: rgba(4, 16, 19, .6); color: var(--gold-hi); text-decoration: none; font-weight: 600; font-size: 17px; }
  .plan-card { left: 12px; right: 12px; bottom: 84px; width: auto; padding: 4px 12px 2px; }
  .pc-t { font-size: 17px; }
  .pc .court { display: none; }
  .pc-top { font-size: 14px; }
  .pc .open { font-size: 16px; }
  .hud { display: none; }

  /* Услуги: две колонки */
  .serv-head { margin-bottom: 22px; gap: 12px; }
  .serv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .serv a { gap: 8px; min-height: 122px; padding: 12px 6px 12px 12px; font-size: 16.5px; }
  .serv a::before { top: 10px; right: 9px; }
  .serv svg { width: 30px; height: 30px; }

  /* Подборка листается вбок */
  .chips { margin-inline: -20px; margin-top: 22px; gap: 10px; }
  .chips p { padding-inline: 20px; }
  .chips ul { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-template-rows: repeat(2, auto); gap: 8px; overflow-x: auto; padding-inline: 20px; scrollbar-width: none; }
  .chips ul::-webkit-scrollbar { display: none; }
  .chips a { font-size: 15px; padding: 8px 14px; }

  /* Решённые дела: карточки листаются вбок, следующая выглядывает справа */
  .cases-head { gap: 12px; padding-bottom: 20px; }
  .stack { display: flex; align-items: stretch; gap: 12px; padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .stack::-webkit-scrollbar { display: none; }
  .case { position: relative; top: auto; flex: 0 0 min(84vw, 420px); margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(160deg, var(--sea), var(--deep) 60%, var(--night)); box-shadow: none; scroll-snap-align: start; }
  .case:last-child { margin: 0; }
  .case-in { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0; height: 100%; min-height: 0; padding: 0; }
  .case-doc { flex: none; }
  .case .sheet { box-shadow: none; }
  .sheet-btn, .sheet-btn:hover { transform: none; animation: none; }
  .case .scheme { left: 8px; bottom: 8px; width: 46%; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
  .case-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px 8px; }
  .case-text .open { margin-top: auto; }
  .tag { padding: 5px 14px 5px 9px; font-size: 16px; }
  .tag svg { width: 22px; height: 22px; }
  .case h3, .h3 { font-size: 25px; line-height: 1.14; }
  .court { font-size: 16px; }
  .swipe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; padding-top: 10px; color: var(--mist); font: 500 15px/1.3 var(--ui); }
  .swipe b { color: var(--gold-hi); font-weight: 600; }
  .swipe a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Этапы: линия сверху вниз */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 24px; }
  .steps::before { left: 22px; right: auto; top: 22px; bottom: 64px; width: 1.5px; height: auto; transform-origin: 50% 0; }
  html.js .steps:not(.in)::before { transform: scaleY(0); }
  .step { grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; padding-bottom: 20px; }
  .step:last-child { padding-bottom: 0; }
  .step b { grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 19px; }
  .step h3 { font-size: 20px; }
  .step p { font-size: 16px; line-height: 1.46; }

  .about { gap: 14px; }
  .faq { margin-top: 16px; }
  .faq summary { padding-block: 14px; font-size: 18px; }
  .faq summary::after { top: 8px; }
  .faq p { padding-bottom: 16px; }

  .cta-in { gap: 10px; padding-block: 56px; }
  .cta .h2 { font-size: clamp(36px, 10.6vw, 60px); }
  .cta::after { background: rgba(5, 21, 25, .66); }
  .phone { display: inline-flex; align-items: center; min-height: 48px; font-size: clamp(26px, 7.4vw, 40px); }

  /* Внутренние страницы */
  .ph-in { gap: 12px; padding-block: 4px 12px; }
  .ph h1 { font-size: clamp(32px, 9.2vw, 60px); }
  .ph::after { background: linear-gradient(180deg, rgba(5, 21, 25, .82), rgba(5, 21, 25, .8) 60%, var(--night) 100%); }
  .cols { gap: 30px; }
  .col { gap: 12px; }
  .checks li { padding: 11px 0; }
  .mini { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 24px; }
  .mini .case-doc { max-width: 100%; justify-self: stretch; }
  .mini h3 { font-size: 25px; }
  .mini .scheme { left: 8px; bottom: 8px; width: 44%; }

  .foot { font-size: 15.5px; }
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 32px 18px; }
  .foot a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
  .stampbox { margin: 0 0 calc(22px + env(safe-area-inset-bottom, 0px)); }
  .stampbox span { padding: 6px 10px; }
}

/* Телефон лёжа */
@media (max-width: 860px) and (max-height: 560px) {
  .hero { height: auto; min-height: 100svh; }
  .hero-body { height: auto; min-height: 100svh; }
  .hero::after { background: linear-gradient(90deg, rgba(5, 21, 25, .94) 0%, rgba(5, 21, 25, .8) 46%, rgba(5, 21, 25, 0) 74%); }
  .hero-main { flex: 1; justify-content: center; padding-block: 4px 66px; }
  .title { font-size: clamp(40px, 6.6vw, 56px); }
  .hero .lead { font-size: 17px; line-height: 1.38; max-width: 26em; }
  .hero .ghost { min-height: 46px; padding-block: 8px; }
  .callbar { left: auto; display: flex; padding-left: 0; background: none; border-top: 0; }
  .callbar .btn { width: auto; min-height: 46px; }
  .callbar .menu-btn { min-height: 46px; }
  /* Карточка дела лёжа: документ слева, текст справа */
  .case { flex-basis: min(84vw, 660px); }
  .case-in { flex-direction: row-reverse; align-items: stretch; justify-content: flex-start; }
  .case .case-doc { flex: 0 0 44%; background: var(--paper); }
  .case-text { padding-block: 10px 6px; gap: 6px; }
  .case h3 { font-size: 22px; }
  .case-text p { font-size: 15.5px; line-height: 1.36; }
}

/* Обычный телефон: при низком экране карточка дела не влезает под текст */
@media (max-width: 860px) and (min-height: 561px) and (max-height: 739px) {
  .plan-card { display: none; }
}

@media (max-width: 560px) {
  .serv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .nav .tel { display: none; }
  .top .menu-btn { width: 46px; justify-content: center; padding: 0; }
  .top .menu-btn span { display: none; }
  .lb-bar button { padding: 0 11px; }
}
@media (max-width: 400px) {
  .serv a { padding-left: 11px; font-size: 16px; }
}
@media (max-width: 374px) {
  .logo { font-size: 19px; }
  .callbar .menu-btn { padding-inline: 10px; }
  .serv a { padding-inline: 10px 5px; font-size: 15px; }
}

/* Касание вместо мыши: подсветка не должна залипать */
@media (hover: none) {
  .btn:hover { transform: none; filter: none; }
  .serv a:hover { color: var(--cream); box-shadow: none; }
  .serv a:hover::after { opacity: 0; }
  .serv a:active { box-shadow: inset 0 0 0 1.5px var(--gold-hi); }
  .serv a:active::after { opacity: 1; }
  .chips a:active { border-color: var(--gold); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .serv:not(.in) a { clip-path: none; }
}