/* Собирается автоматически: python3 tools/build.py.
   Первая часть файла — копия <style> из index.html, дальше идёт
   tools/pages.css. Руками не правьте: при следующей сборке правки
   затрутся. Меняйте стили на главной или в tools/pages.css. */

/* Эти стили при сборке копируются в assets/css/site.css и становятся общими
   для всех внутренних страниц. Дизайн правится здесь, потом обязательно
   python3 tools/build.py — иначе главная и остальные страницы разъедутся. */
:root{
  --bg:        #FBF9F5;
  --cream:     #F3EDE2;
  --cream-2:   #EDE4D4;
  --white:     #FFFFFF;
  --gold:      #A98A4C;
  --gold-dark: #8C7038;
  --gold-soft: #D9C69B;
  --ink:       #2B2723;
  --ink-soft:  #554C42;
  --muted:     #7C7065;
  --line:      #E5DBC9;
  --dark:      #302A25;
  --star:      #E3A02C;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;

  --shadow-s: 0 1px 2px rgba(43,39,35,.06), 0 2px 6px rgba(43,39,35,.04);
  --shadow-gold:   0 2px 6px -3px rgba(70,52,22,.35), 0 10px 24px -12px rgba(70,52,22,.55);
  --shadow-gold-h: 0 3px 8px -4px rgba(70,52,22,.38), 0 16px 32px -16px rgba(70,52,22,.60);
  --shadow-m: 0 4px 12px rgba(43,39,35,.07), 0 12px 32px rgba(43,39,35,.07);
  --shadow-l: 0 10px 28px rgba(43,39,35,.10), 0 30px 60px rgba(43,39,35,.10);

  --wrap: 1240px;
  --hdr-h: 84px;
  --hdr-gap: clamp(16px,1.9vw,26px);
  --hero-measure: 492px;
  --sp-sec: clamp(40px,4.8vw,60px);
  --case-gap: clamp(18px,2vw,24px);

  --f-display: 'Lora', Georgia, 'Times New Roman', serif;
  --f-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
body{overflow-x:clip}
button{font:inherit;color:inherit}
a{color:inherit}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

html{scroll-behavior:smooth}
section[id],footer[id]{scroll-margin-top:calc(var(--hdr-h) + 12px)}

.wrap{
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right))
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--dark);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-s) 0
}
.skip:focus{left:0}

.h-sec{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(24px,3.4vw,36px);
  line-height:1.2;
  letter-spacing:.01em;
  margin:0;
  text-align:center;
}
.sec-head{display:flex;align-items:center;gap:24px;justify-content:center;margin-bottom:32px}
.sec-head{margin-top:-0.26em;font-size:clamp(24px,3.4vw,36px)}
.sec-head::before,.sec-head::after{
  content:"";height:1px;flex:1 1 auto;max-width:150px;
  background:linear-gradient(90deg,transparent,var(--gold-soft))
}
.sec-head::after{background:linear-gradient(90deg,var(--gold-soft),transparent)}
.sec-sub{text-align:center;color:var(--muted);margin:-20px 0 32px;font-size:15px}

.section{padding:var(--sp-sec) 0}
.section > .wrap > :first-child:not(.sec-head){margin-top:0}
.section > .wrap > :last-child{margin-bottom:0}
.section--cream{background:var(--cream)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-sizing:border-box;
  min-height:48px;height:48px;padding:0 24px;margin:0;
  border:1px solid transparent;border-radius:var(--r-s);
  font-family:inherit;line-height:1;
  -webkit-appearance:none;appearance:none;
  text-align:center;white-space:nowrap;
  background-origin:border-box;background-repeat:no-repeat;
  font-weight:600;font-size:15px;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:linear-gradient(180deg,#BB9C58 0%,var(--gold) 46%,var(--gold-dark) 100%);
  color:#fff;
  box-shadow:var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.28)
}
.btn--primary:hover{
  background:linear-gradient(180deg,#C4A462 0%,#AE8F4E 46%,#7E6330 100%);
  box-shadow:var(--shadow-gold-h), inset 0 1px 0 rgba(255,255,255,.32);
  transform:translateY(-1px)
}
.btn--primary:active{transform:translateY(1px);box-shadow:0 1px 3px -2px rgba(70,52,22,.30), inset 0 1px 3px rgba(84,63,22,.25)}
.btn--ghost{background:var(--white);border-color:var(--gold);color:var(--gold-dark);box-shadow:var(--shadow-s)}
.btn--ghost:hover{background:rgba(169,138,76,.08);box-shadow:var(--shadow-m);transform:translateY(-1px)}
.btn--sm{min-height:40px;height:40px;padding:0 20px;font-size:14px}
.btn--light{background:var(--white);border-color:var(--line);color:var(--ink)}
.btn--light:hover{border-color:var(--gold-soft)}
.btn--block{width:100%}

.ic{width:22px;height:22px;flex:0 0 auto;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic--sm{width:18px;height:18px}
.ic--lg{width:28px;height:28px}

.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(251,249,245,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s, background-color .25s;
}
.hdr.is-stuck{box-shadow:0 4px 20px rgba(43,39,35,.08);background:rgba(251,249,245,.97)}
.hdr__in{
  min-height:var(--hdr-h);
  display:flex;align-items:center;gap:var(--hdr-gap);
  /* Вся строка шапки сдвинута на 10px влево по просьбе заказчика.
     Через position/left, а не через отступы обёртки: так сдвигаются
     разом все элементы и ничего не растягивается. Сдвиг снимается там,
     где шапка превращается в логотип с бургером, — см. ниже. */
  position:relative;left:-10px;
}
.hdr__in > *{flex:0 0 auto}
.hdr__in > .btn{margin-left:0}
.hdr__sep{
  align-self:stretch;width:1px;margin:18px 0;
  background:var(--line);
}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.logo__mark{
  width:42px;height:46px;flex:0 0 auto;
  display:grid;place-items:center;
  background:linear-gradient(165deg,#B99A5C,#8C7038);
  border-radius:5px 5px 16px 16px;
  color:#fff;
}
.logo__fig{width:auto;height:36px;display:block}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__name{font-family:var(--f-display);font-size:23px;font-weight:600;letter-spacing:.14em}
.logo__tag{font-size:9.5px;letter-spacing:.22em;color:var(--gold-dark);text-transform:uppercase;margin-top:4px;font-weight:600}

.hdr__years{line-height:1.1}
.hdr__years b{display:block;font-family:var(--f-display);font-size:17px;font-weight:600;line-height:1.1;margin-bottom:1px}
.hdr__years span{font-size:11.5px;color:var(--muted)}

.nav{display:flex;align-items:center;gap:clamp(8px,1.4vw,24px);margin-left:auto}
.nav__link{
  position:relative;text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-soft);
  padding:8px 2px;background:none;border:0;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;transition:color .18s
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.22,.68,.24,1)
}
.nav__link:hover,.nav__link.is-active{color:var(--ink)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}

.has-drop{position:relative}
.drop{
  position:absolute;top:calc(100% + 14px);left:-16px;
  min-width:262px;padding:8px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-l);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.has-drop.is-open .drop{opacity:1;visibility:visible;transform:none}
.has-drop.is-open .nav__link svg{transform:rotate(180deg)}
.nav__link[aria-expanded]{cursor:pointer}
.drop a{
  display:block;padding:10px 12px;border-radius:var(--r-s);
  font-size:14.5px;text-decoration:none;color:var(--ink-soft);transition:background-color .15s,color .15s
}
.drop a:hover{background:var(--cream);color:var(--ink)}

.hdr__phone{display:flex;align-items:center;gap:10px;--ph-ic:27px}
.hdr__phone .ic{
  width:var(--ph-ic);height:var(--ph-ic);
  margin-left:calc(14px - var(--ph-ic)/2 - var(--hdr-gap)/2);
  margin-right:calc(4px + var(--hdr-gap)/2 - var(--ph-ic)/2);
  stroke:var(--gold-dark);stroke-width:1.6}
.hdr__phone .tels{display:flex;flex-direction:column;line-height:1.25}
.hdr__phone a{text-decoration:none;font-size:16px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.hdr__phone a:hover{color:var(--gold-dark)}
.hdr__phone .hours{font-size:11.5px;line-height:1.2;color:var(--muted);margin-top:4px}

.burger{
  display:none;margin-left:auto;width:46px;height:46px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer
}
.burger i{display:block;width:20px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

.mnav{
  display:none;border-top:1px solid var(--line);background:var(--white);
  padding:16px 0 12px
}
.mnav.is-open{display:block}
.mnav{
  max-height:calc(100dvh - var(--hdr-h));
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain
}
.mnav a.mnav__i{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--line);
  text-decoration:none;font-weight:500;font-size:16px
}
.mnav a.mnav__i svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:2}

.mnav a.mnav__i.is-active{color:var(--gold-dark)}
.mnav__i--btn{width:100%;background:none;border:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.mnav__i--btn svg{transition:transform .25s}
.mnav__i--btn[aria-expanded="true"] svg{transform:rotate(90deg)}
.mnav__sub{display:none;padding:6px 0 10px}
.mnav__sub.is-open{display:block}
.mnav__sub a{display:flex;align-items:center;gap:10px;padding:11px 0 11px 14px;
  text-decoration:none;font-size:15px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.mnav__sub a:last-child{border-bottom:0}
.mnav__sub a::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--gold-soft)}
.mnav__sub a:hover{color:var(--ink)}
.mnav__foot{margin-top:20px;display:grid;gap:12px}
.mnav__foot a.tel{font-size:19px;font-weight:700;text-decoration:none}
.mnav__foot .hint{font-size:13px;color:var(--muted)}

.hero{position:relative;overflow:hidden;background:var(--cream)}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 10%, rgba(255,255,255,.75), transparent 60%),
    linear-gradient(105deg,var(--cream) 0%, var(--cream) 38%, var(--cream-2) 100%);
}
.hero__art{
  position:absolute;top:0;right:0;height:100%;width:min(56%,760px);
  opacity:.95;
}
.hero__art svg{height:100%;width:100%}
.hero__art img{height:100%;width:100%;object-fit:cover;object-position:center 30%}
.hero__art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--cream) 0%, rgba(243,237,226,.75) 22%, rgba(243,237,226,0) 62%)
}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:clamp(24px,3vw,48px);
  padding-top:var(--sp-sec);padding-bottom:var(--sp-sec);align-items:stretch}
.hero__in > .book{margin-top:-3px;align-self:start}
.hero__col{display:flex;flex-direction:column;min-width:0}

.hero h1{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(30px,4.6vw,52px);line-height:1.08;margin:0;letter-spacing:.005em
}
.hero h1 .q{display:block;letter-spacing:.03em;text-transform:uppercase;font-size:clamp(30px,4.9vw,56px)}
.hero__lead{
  font-family:var(--f-display);font-size:clamp(18px,2.1vw,25px);color:var(--gold-dark);
  margin:10px 0 0;font-weight:500;line-height:1.3
}
.hero__txt{margin:clamp(16px,1.8vw,20px) 0 0;max-width:var(--hero-measure);color:var(--ink-soft);font-size:clamp(15px,1.4vw,17px)}
.hero__cta{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:clamp(24px,2.8vw,32px);
  max-width:var(--hero-measure)
}
.hero__cta .btn{flex:1 1 0;min-width:200px;max-width:none}
.hero__col > .hero__cta{margin:auto 0;padding:clamp(24px,2.8vw,32px) 0}

.usp{
  margin-top:clamp(24px,3vw,36px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-m);
  display:grid;grid-template-columns:repeat(6,1fr);
}
.hero__col > .usp{margin-top:0}
@media (min-width:1025px){
  .usp__i{height:114px;padding-top:14px;padding-bottom:14px;gap:6px}
}
@media (min-width:1180px){
  .usp__i{height:100px}
  .usp__i b{white-space:nowrap}
}
@media (max-width:1080px){
  .usp__i{overflow-wrap:anywhere}
}
.usp__i{
  padding:14px 10px;text-align:center;
  display:grid;grid-template-rows:auto 1fr;justify-items:center;gap:8px;
  border-right:1px solid var(--line);font-size:12.5px;line-height:1.35;color:var(--ink-soft)
}
.usp__i > span{align-self:center;text-wrap:balance}
.usp__i:last-child{border-right:0}
.usp__i b{display:block;color:var(--ink);font-weight:600}

.book{
  --book-pad:24px;--book-gap:18px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-l);padding:var(--book-pad) var(--book-pad) var(--book-gap);position:relative
}
.book.is-flash{animation:flash 2s cubic-bezier(.3,0,.3,1)}
@keyframes flash{
  0%{box-shadow:var(--shadow-l)}
  8%,60%{box-shadow:0 0 0 4px rgba(169,138,76,.30),var(--shadow-l)}
  100%{box-shadow:0 0 0 4px rgba(169,138,76,0),var(--shadow-l)}
}
.book__t{font-family:var(--f-display);font-size:22px;line-height:1.25;font-weight:600;text-align:center;margin:0}
.book__s{text-align:center;font-size:13.5px;line-height:1.35;color:var(--gold-dark);margin:4px 0 24px;font-weight:500}
.book__who{display:flex;align-items:center;gap:16px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.avatar{
  width:64px;height:64px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  background:linear-gradient(160deg,var(--cream-2),#DCCFB4);border:1px solid var(--line)
}
.avatar svg,.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.book__who b{display:block;font-size:16px;font-weight:600}
.book__who span{font-size:13px;color:var(--muted)}
.field{margin-bottom:12px}
.field input,.field select{
  width:100%;min-height:46px;padding:12px 14px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-s);
  font:inherit;font-size:16px;color:var(--ink);
  transition:border-color .18s, background-color .18s, box-shadow .18s
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C7065' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px
}
.field input::placeholder{color:#9C9186}
.field select:invalid{color:#9C9186}

.sel{position:relative}
.sel.is-open{z-index:30}
.sel > input{
  appearance:none;cursor:pointer;caret-color:transparent;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C7065' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
  text-overflow:ellipsis
}
.sel > input::selection{background:transparent}
.sel.is-open > input{
  border-color:var(--gold);background-color:var(--white);
  box-shadow:0 0 0 3px rgba(169,138,76,.14);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C7038' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>")
}
.sel__menu{
  position:fixed;left:0;top:0;margin:0;padding:6px;z-index:90;
  list-style:none;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-s);
  box-shadow:0 14px 34px rgba(43,39,35,.14),0 2px 6px rgba(43,39,35,.06);
  max-height:min(280px,52vh);overflow-y:auto;-webkit-overflow-scrolling:touch;
  animation:selIn .16s ease-out
}
@keyframes selIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sel__opt{
  padding:11px 14px 11px 34px;border-radius:8px;position:relative;
  font-size:15.5px;line-height:1.3;color:var(--ink-soft);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background-color .14s,color .14s
}
.sel__opt.is-active{background:var(--cream);color:var(--ink)}
.sel__opt[aria-selected="true"]{color:var(--gold-dark);font-weight:600}
.sel__opt[aria-selected="true"]::before{
  content:"";position:absolute;left:13px;top:50%;width:9px;height:5px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(-45deg)
}
@media (hover:hover){.sel__opt:hover{background:var(--cream);color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.sel__menu{animation:none}}
.field .err{border-color:#B4544A !important;box-shadow:0 0 0 3px rgba(180,84,74,.13) !important}
.field__msg{display:none;margin:6px 2px 0;font-size:12px;color:#A24A41}
.field input:focus,.field select:focus{
  border-color:var(--gold);background-color:var(--white);box-shadow:0 0 0 3px rgba(169,138,76,.14);outline:none
}
.field input:user-invalid{border-color:#B4544A}
.book__submit{position:relative;margin-top:16px}
.book__submit .btn--primary{margin-top:0}
.send-err{
  position:absolute;inset:0;margin:0;padding:6px 12px;
  display:none;align-items:center;justify-content:center;
  background:rgba(180,84,74,.08);border:1px solid rgba(180,84,74,.3);border-radius:var(--r-s);
  font-size:12.5px;line-height:1.32;color:#8E3A32;text-align:center
}
.send-err a{color:#8E3A32;font-weight:700;white-space:nowrap}
.book__form.is-failed .btn--primary{visibility:hidden}
.book__form.is-failed .send-err{display:flex}
.btn[disabled]{opacity:.65;cursor:default;transform:none}
.consent{display:flex;align-items:center;justify-content:center;gap:8px;margin:var(--book-gap) 0 0;transform:translateY(-2px);font-size:11.5px;color:var(--muted);text-align:center}
.consent .ic{width:13px;height:13px;stroke:var(--muted)}
.consent a{color:var(--gold-dark)}
.book__ok{
  display:none;text-align:center;padding:0 8px
}
.book__ok .tick{
  width:56px;height:56px;margin:0 auto 14px;border-radius:50%;
  background:rgba(169,138,76,.12);display:grid;place-items:center
}
.book__ok .tick svg{width:28px;height:28px;stroke:var(--gold-dark);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.book__ok b{display:block;font-family:var(--f-display);font-weight:400;font-size:20px;margin-bottom:6px}
.book__ok p{margin:0;color:var(--muted);font-size:14px;align-self:end}
.book__ok .book__ok-mid{align-self:center}
.book.is-sent{display:flex;flex-direction:column}
.book.is-sent .book__form{display:none}
.book.is-sent .book__ok{display:grid;grid-template-rows:1fr auto;gap:20px;flex:1 1 auto;min-height:0}
.book.is-sent .book__who{display:none}

.about__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
.about__grid p{color:var(--ink-soft);margin:0 0 16px;font-size:clamp(15px,1.35vw,16.5px)}
.about__grid p:last-child{margin-bottom:0}
.about__grid .about__lead{font-size:clamp(16px,1.5vw,18px);line-height:1.5}
.about__lead b{color:var(--ink)}
.about__h3{
  margin:26px 0 12px;font-family:var(--f-display);font-size:clamp(18px,1.7vw,21px);
  font-weight:600;color:var(--ink);line-height:1.25
}
.about__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.about__list li{
  display:flex;align-items:flex-start;gap:10px;
  color:var(--muted);font-weight:400;font-size:clamp(15px,1.35vw,16.5px);line-height:1.5
}
.about__list .ic{margin-top:3px;stroke:var(--gold);stroke-width:2.2}
.about__list b{color:var(--ink);font-weight:700}
.about__quote{
  border-left:3px solid var(--gold-soft);padding:6px 0 6px 20px;margin:34px 0 0;
  font-family:var(--f-display);font-size:19px;color:var(--ink);line-height:1.45
}
.about__quote b{font-weight:600}
.about__quote i{font-style:italic;color:var(--ink-soft)}
.about__facts{margin-top:24px;display:grid;gap:12px}
.about__fact{
  display:flex;align-items:center;gap:12px;
  font-size:clamp(15px,1.35vw,16.5px);color:var(--ink-soft);line-height:1.4
}
.about__fact .ic{stroke:var(--gold-dark);flex:0 0 auto}
.about__fact b{color:var(--ink);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stat{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:20px;
  box-shadow:var(--shadow-s)
}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(26px,3vw,34px);line-height:1;color:var(--gold-dark)}
.stat span{display:block;margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.35}
.stat.is-flash{animation:flashCard 2s cubic-bezier(.3,0,.3,1)}
@keyframes flashCard{
  0%{box-shadow:var(--shadow-s)}
  8%,60%{box-shadow:0 0 0 4px rgba(169,138,76,.30),var(--shadow-s)}
  100%{box-shadow:0 0 0 4px rgba(169,138,76,0),var(--shadow-s)}
}
@media (prefers-reduced-motion:reduce){.stat.is-flash{animation:none}}

.svc{position:relative}
.svc__grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-s);overflow:hidden
}
.svc__tile{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  flex:1 1 19.9%;
  padding:22px 12px;min-height:132px;
  background:var(--white);border:0;box-shadow:0 0 0 1px var(--line);
  font-size:12.5px;line-height:1.3;font-weight:500;text-align:center;color:var(--ink-soft);
  cursor:pointer;transition:opacity .34s ease
}
.svc__tile{text-decoration:none}
.svc__tile .ic{stroke:var(--gold)}
.svc__tile.is-open{opacity:0}

.svc__pop{
  position:absolute;z-index:8;pointer-events:none;overflow:hidden;
  background:var(--white);border:1px solid var(--gold);border-radius:var(--r-m);
  box-shadow:0 24px 48px -12px rgba(58,45,25,.30), 0 4px 14px rgba(58,45,25,.10);
  padding:20px 18px;text-align:center;
  opacity:0;
  --e:cubic-bezier(.16,.74,.22,1);
  --d:.44s;
  transition:opacity .3s ease,
             left var(--d) var(--e), top var(--d) var(--e),
             width var(--d) var(--e), height var(--d) var(--e),
             box-shadow calc(var(--d) * .9) ease-out;
  will-change:left,top,width,height
}
.svc__pop.is-open{opacity:1}
.svc__pop-in{display:block;position:relative;left:50%;transform:translateX(-50%)}
.svc__pop:not(.is-grown){box-shadow:0 0 0 rgba(58,45,25,0)}
.svc__pop-body{display:block;opacity:0;transform:translateY(6px);
  transition:opacity .24s ease .06s, transform .3s var(--e) .06s}
.svc__pop.is-grown .svc__pop-body{transform:none}
.svc__pop.is-grown .svc__pop-body{opacity:1}
.svc__pop .ic--lg{stroke:var(--gold)}
.svc__pop-name{display:block;margin-top:10px;font-family:var(--f-display);font-size:17px;font-weight:600;color:var(--ink)}
.svc__pop-desc{
  display:block;text-align:left;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.5;color:var(--ink-soft)
}
.svc__list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px;text-align:left}
.svc__list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink)}
.svc__list .ic{width:15px;height:15px;margin-top:3px;stroke:var(--gold);stroke-width:2.2;flex:0 0 auto}
.svc__hint{text-align:center;color:var(--muted);font-size:14px;margin:-20px 0 28px}

@media (prefers-reduced-motion:reduce){
  .svc__pop{--d:.01s;transition:opacity .2s ease}
  .svc__pop-body{transform:none;transition:opacity .2s ease}
}

.svc__acc{display:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-s)}
.svc__acc-i{border-bottom:1px solid var(--line)}
.svc__acc-i:last-child{border-bottom:0}
.svc__acc-btn{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:16px;background:var(--white);border:0;cursor:pointer;text-align:left;
  font-size:15px;font-weight:500
}
.svc__acc-btn .ic{stroke:var(--gold)}
.svc__acc-btn .chev{margin-left:auto;width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:2;transition:transform .25s}
.svc__acc-i.is-open .svc__acc-btn{background:var(--cream)}
.svc__acc-i.is-open .chev{transform:rotate(90deg)}
.svc__acc-body{display:none;padding:18px 16px}
.svc__acc-i.is-open .svc__acc-body{display:block}
.svc__acc-body p{margin:0 0 14px;font-size:14px;color:var(--ink-soft)}
.svc__acc-body > :last-child{margin-bottom:0}

.rev{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.rev__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-s);padding:20px 22px 18px;display:flex;flex-direction:column
}
.rev__card.is-flash{animation:flashCard 2s cubic-bezier(.3,0,.3,1)}
@media (prefers-reduced-motion:reduce){.rev__card.is-flash{animation:none}}
.rev__top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.rev__logo{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
.rev__logo--ya{background:#FFFFFF;border:1px solid var(--line)}
.rev__logo--gis{background:transparent;overflow:hidden}
.rev__logo svg,.rev__logo img{width:22px;height:22px;object-fit:contain}
.rev__logo--gis svg,.rev__logo--gis img{width:36px;height:36px}
.rev__src{
  display:flex;align-items:center;min-height:36px;
  font-weight:600;font-size:15px;line-height:1.2;align-self:center
}
.rev__score{margin-left:auto;display:flex;align-items:center;min-height:36px;gap:10px}
.stars{display:inline-flex;gap:2px}
.stars svg{width:15px;height:15px;fill:var(--star)}
.rev__body{
  padding:18px 0 0;flex:0 0 auto;
  height:clamp(112px,11.5vw,132px);
  display:flex;flex-direction:column;min-height:0
}
.rev__q{
  margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);
  flex:1 1 auto;min-height:0;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5
}
.rev__body{position:relative}
.rev__q.is-full{
  display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-right:16px;scrollbar-width:none;-ms-overflow-style:none
}
.rev__q.is-full::-webkit-scrollbar{width:0;height:0}
.rev__sb{
  position:absolute;right:0;top:18px;bottom:0;width:5px;
  border-radius:3px;background:var(--line);
  opacity:0;visibility:hidden;transition:opacity .22s ease
}
.rev__sb.is-on{opacity:1;visibility:visible}
.rev__sb i{
  position:absolute;left:0;right:0;top:0;display:block;
  border-radius:3px;background:var(--gold);min-height:22px
}
.rev__morerow{flex:0 0 auto;height:24px;display:flex;align-items:center}
.rev__morerow.is-off{display:none}
.rev__more{
  padding:0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--gold-dark);
  border-bottom:1px solid var(--gold-soft)
}
.rev__more[hidden]{display:none}
.rev__more:hover{border-color:var(--gold-dark)}
.rev__meta{
  flex:0 0 auto;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap
}
.rev__name{font-size:14px;font-weight:600;color:var(--ink)}
.rev__date{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;color:var(--muted)}
.rev__date .stars svg{width:13px;height:13px}
.rev__nav{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding-top:12px}
.rev__nav .dots{margin-right:auto;display:flex;gap:6px}
.rev__nav .dots i{width:6px;height:6px;border-radius:50%;background:var(--line);display:block;transition:background-color .2s,width .2s}
.rev__nav .dots i.on{background:var(--gold);width:16px;border-radius:3px}
.arw{
  width:44px;height:44px;border-radius:50%;background:var(--white);border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;transition:border-color .18s,background-color .18s
}
.arw:hover{border-color:var(--gold);background:var(--cream)}
.arw svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rev__all{text-align:center;margin:28px 0 0;font-size:14.5px}
.rev__all a{color:var(--gold-dark);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold-soft)}
.rev__all a:hover{border-color:var(--gold-dark)}

.cases{position:relative}
.cases__vp{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  margin:0 -6px;padding:6px;scroll-padding-left:6px;scroll-padding-right:6px
}
.cases__vp::-webkit-scrollbar{display:none}
.cases__track{display:flex;gap:var(--case-gap);align-items:flex-start}
.case{
  flex:0 0 calc((100% - var(--case-gap) * 2) / 3);
  min-width:0;scroll-snap-align:start;display:flex;flex-direction:column
}
.case__ph{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16 / 9;border-radius:var(--r-m);
  border:1px solid var(--line);box-shadow:var(--shadow-s);
  text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  background:var(--cream-2)
}
.case__ph img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.68,.24,1)
}
.case.is-open .case__ph img{transform:scale(1.035)}
.case__dim{
  position:absolute;inset:0;background:rgba(26,22,18,.44);
  opacity:0;transition:opacity .44s ease
}
.case.is-open .case__dim{opacity:1}
.case__ov{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(13px,1.35vw,18px);
  background:linear-gradient(180deg,
    rgba(24,20,16,0) 34%, rgba(24,20,16,.5) 64%, rgba(24,20,16,.88) 100%)
}
.case__t{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;max-height:calc(3 * 1.34em);
  margin:0;color:#fff;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(14.5px,1.12vw,17px);line-height:1.34;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:max-height .44s cubic-bezier(.22,.68,.24,1)
}
.case.is-open .case__t,.case.is-closing .case__t{-webkit-line-clamp:24}
.case.is-open .case__t{max-height:var(--case-full,22em)}
.case__hint{

  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;
  max-height:0;opacity:0;margin-top:0;
  color:#F2E7CD;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  transition:max-height .44s cubic-bezier(.22,.68,.24,1),
             margin-top .44s cubic-bezier(.22,.68,.24,1),
             opacity .26s ease .08s
}
.case.is-open .case__hint{max-height:1.8em;opacity:1;margin-top:10px}
.case__meta{
  padding-top:12px;display:flex;align-items:baseline;gap:10px 12px;flex-wrap:wrap
}
.case__author{font-size:13.5px;font-weight:600;color:var(--ink)}
.case__date{margin-left:auto;font-size:12px;color:var(--muted)}
.case__nav{display:flex;align-items:center;gap:8px;padding-top:clamp(14px,1.6vw,18px)}
.case__nav[hidden]{display:none}
.case__nav .dots{margin-right:auto;display:flex;gap:6px}
.case__nav .dots i{
  width:6px;height:6px;border-radius:50%;background:var(--line);display:block;
  transition:background-color .2s,width .2s
}
.case__nav .dots i.on{background:var(--gold);width:16px;border-radius:3px}
.arw[disabled]{opacity:.38;cursor:default}
.arw[disabled]:hover{border-color:var(--line);background:var(--white)}
.cases__all{text-align:center;margin:clamp(18px,2.2vw,26px) 0 0}
.cases__all .btn{min-width:min(272px,100%);padding:0 36px}
.case--more .case__ph{
  display:grid;place-items:center;text-align:center;
  padding:clamp(16px,2vw,26px);border-color:var(--gold-soft);
  background:linear-gradient(158deg,#F7F2E7 0%,#EBE1CD 58%,#DED1B6 100%)
}
.case--more .case__ph:hover{border-color:var(--gold);box-shadow:var(--shadow-m)}
.case__more{display:flex;flex-direction:column;align-items:center;gap:12px}
/* height задаём явно: у <svg> нет своего viewBox, форма приходит из спрайта
   через <use>, и height:auto растягивает элемент до дефолтных 150px —
   тогда содержимое карточки не влезает в фото 16/9 и нижняя строка
   уезжает за край. */
.case__more .ic{
  width:clamp(26px,2.6vw,32px);height:clamp(26px,2.6vw,32px);
  stroke:var(--gold-dark);stroke-width:1.4
}
.case__more-t{
  font-family:var(--f-display);font-weight:600;line-height:1.28;color:var(--ink);
  font-size:clamp(15.5px,1.25vw,18.5px);max-width:15em
}
.case__more-s{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--gold-dark)
}
.case__more-s svg{
  width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.22,.68,.24,1)
}
.case--more .case__ph:hover .case__more-s svg{transform:translateX(4px)}
.case__ph.is-flash{animation:caseFlash 2s cubic-bezier(.3,0,.3,1)}
@keyframes caseFlash{
  0%{box-shadow:var(--shadow-s)}
  8%,60%{box-shadow:0 0 0 4px rgba(169,138,76,.34),var(--shadow-s)}
  100%{box-shadow:0 0 0 4px rgba(169,138,76,0),var(--shadow-s)}
}
@media (hover:none){
  .case__hint{max-height:1.8em;opacity:1;margin-top:9px}
}
@media (prefers-reduced-motion:reduce){
  .case__ph.is-flash{animation:none}
  .case__t,.case__hint,.case__dim,.case__ph img{transition:none}
}
#cases .sec-head{margin-bottom:clamp(36px,4.2vw,52px)}

.foot{background:var(--dark);color:#EDE7DE}
.foot__in{
  display:flex;align-items:flex-start;gap:clamp(28px,3.4vw,56px);flex-wrap:wrap;
  padding-top:clamp(22px,2.5vw,30px);padding-bottom:clamp(22px,2.5vw,30px)
}
.foot__i{display:flex;gap:14px;align-items:flex-start;min-height:44px;border-radius:12px}
.foot__i{outline:1px solid transparent;outline-offset:10px}
.foot__i.is-lit{animation:footLit 2s ease both}
.foot__i.is-lit:nth-of-type(2){animation-delay:.06s}
.foot__i.is-lit:nth-of-type(3){animation-delay:.12s}
.foot__i.is-lit .ic{animation:footLitIc 2s ease both;animation-delay:inherit}
@keyframes footLit{
  0%{outline-color:rgba(201,169,110,0);outline-offset:4px}
  8%,60%{outline-color:rgba(201,169,110,.55);outline-offset:10px}
  100%{outline-color:rgba(201,169,110,0);outline-offset:14px}
}
@keyframes footLitIc{
  0%,100%{stroke:var(--gold-soft)}
  8%,60%{stroke:#F0DFB8}
}
@media (prefers-reduced-motion:reduce){
  .foot__i.is-lit,.foot__i.is-lit .ic{animation:none}
}
.foot__i > span{display:block}
.foot__i .ic{stroke:var(--gold-soft);margin-top:1px}
.foot__i b{display:block;font-weight:500;font-size:15px;line-height:1.45}
.foot__i > span{display:block;margin-top:0}
.foot__i span span{display:block;font-size:12.5px;color:#B5AA9C;margin-top:5px}
.foot__i a{text-decoration:none}
.foot__tels{display:flex;flex-direction:column;gap:5px}
.foot__tels a b,.mnav__foot a.tel{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.foot__i a:hover b{color:#fff;text-decoration:underline}
.foot__cta{margin-left:auto;align-self:center}
.foot__legal{
  border-top:1px solid rgba(255,255,255,.1);padding-top:20px;padding-bottom:20px;
  display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;
  font-size:12px;color:#9C9184
}
.foot__legal a{color:#9C9184;text-decoration:none}
.foot__legal a:hover{color:#EDE7DE}

@media (max-width:1200px){
  .svc__tile{flex-basis:24.9%}
}
@media (max-width:1180px){
  .hdr__years,.hdr__sep:not(.hdr__sep--nav){display:none}
  :root{--hdr-gap:16px}
  .nav{gap:10px}
  .nav__link{font-size:14.5px}
  .hdr__phone a{font-size:15px}
  .hdr__phone{--ph-ic:24px}
  .hero__in{grid-template-columns:minmax(0,1fr) 352px}
}
@media (max-width:1024px){
  :root{--hdr-h:74px;--hdr-gap:14px}
  .nav,.hdr__phone,.hdr__sep{display:none}
  .burger{display:flex;margin-left:0}
  /* В бургер-раскладке композиции из семи элементов нет, а край шапки
     должен совпадать с краем страницы: сдвиг убираем. */
  .hdr__in{left:0}
  .hdr__in > .btn{margin-left:auto}
  .hero__in{grid-template-columns:1fr}
  .hero__art{width:min(62%,520px);opacity:.5}
  .hero__art::after{background:linear-gradient(90deg,var(--cream) 0%, rgba(243,237,226,.55) 40%, rgba(243,237,226,0) 85%)}
  .hero__txt{max-width:var(--hero-measure)}
  .hero__col > .usp{margin-top:clamp(24px,3vw,36px)}
  .hero__in > .book{margin-top:0}
  .hero h1{margin-top:-0.2em}
  .hero__col > .hero__cta{margin:0;padding:clamp(24px,2.8vw,32px) 0 0}
  .book{order:2}
  .usp{order:3;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .usp__i{scroll-snap-align:start}
  .about__grid{grid-template-columns:1fr;gap:32px}
  .svc__tile{flex-basis:33.2%}
  .case{flex:0 0 calc((100% - var(--case-gap)) / 2)}
  .foot__cta{margin-left:0;width:100%}
  .foot__cta .btn{width:100%}
}
@media (max-width:767px){
  .rev{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc__grid,.svc__pop,.svc__hint{display:none !important}
  .svc__acc{display:block}
  .hero__art{width:70%;opacity:.26}
  .hero__art::after{
    background:
      linear-gradient(180deg, rgba(243,237,226,.94) 0%, rgba(243,237,226,.55) 45%, rgba(243,237,226,.15) 100%),
      linear-gradient(90deg, rgba(243,237,226,.9) 0%, rgba(243,237,226,.3) 60%, rgba(243,237,226,0) 100%)
  }
  .hero__cta{flex-direction:column}
  .hero__cta .btn{flex:1 1 auto;width:100%;max-width:none;min-width:0}
  .usp{
    grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow-x:visible;scroll-snap-type:none
  }
  .usp__i{padding:18px 12px;min-width:0;overflow-wrap:anywhere}
  .usp__i:nth-child(2n){border-right:0}
  .usp__i:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .foot__in{gap:20px}
  .foot__i{width:100%}
  .case{flex:0 0 86%}
  .case__t{font-size:15.5px}
  .case__hint{font-size:12px}
  .case--more .case__ph{padding:18px 14px}
}
@media (max-width:560px){
  .hdr__in > .btn{display:none}
  .burger{margin-left:auto}
  .case{flex:0 0 88%}
  .case__meta{flex-direction:column;align-items:flex-start;gap:3px;padding-top:10px}
  .case__date{margin-left:0}
  .case__nav{padding-top:14px}
  .cases__all .btn{width:100%;min-width:0}
}
@media (max-width:520px){
  .logo__name{font-size:20px}
  .logo__mark{width:38px;height:42px}
  .logo__fig{height:32px}
  .h-sec{font-size:23px}
  .sec-head{gap:12px}
  .book{--book-pad:20px;--book-gap:16px;padding:var(--book-pad) 16px var(--book-gap)}
}
@media (max-width:400px){
  .case{flex:0 0 100%}
  .case__t{font-size:15px}
  .stats{grid-template-columns:1fr}
  .usp__i{padding:16px 10px}
  .stat{padding:16px}
  .btn{padding:12px 18px;height:auto;min-height:48px;white-space:normal;line-height:1.25}
  .btn--sm{padding:8px 16px;height:auto;min-height:40px}
  .sec-head{gap:12px}
}


/* ТРЕБОВАНИЕ ЗАКАЗЧИКА: рендер главной при ширине до 1536px включительно
   меняться не должен. Всё увеличение под широкие мониторы живёт только в
   блоках (min-width:1600px) и (min-width:2200px) ниже — ни одно правило
   отсюда не может примениться при <= 1536px. После правок сверяйте
   вычисленные стили на 1536 и 1599 пикселях: они должны совпадать. */
@media (min-width:1600px){
  :root{
    --wrap:        clamp(1240px, 77.5vw, 1400px);
    --hdr-h:       clamp(84px, 5.25vw, 96px);
    --hdr-gap:     clamp(26px, 1.625vw, 34px);
    --hero-measure:clamp(492px, 30.75vw, 560px);
    --sp-sec:      clamp(60px, 3.75vw, 76px);
    --case-gap:    clamp(24px, 1.5vw, 30px);
  }

  body{font-size:clamp(16px, 1vw, 17px)}


  .h-sec{font-size:clamp(36px, 2.25vw, 42px)}
  .sec-head{font-size:clamp(36px, 2.25vw, 42px);gap:clamp(24px, 1.5vw, 30px);margin-bottom:clamp(32px, 2vw, 40px)}
  .sec-head::before,.sec-head::after{max-width:clamp(150px, 9.375vw, 180px)}
  .sec-sub{font-size:clamp(15px, .9375vw, 16.5px)}


  .btn{
    min-height:clamp(48px, 3vw, 56px);height:clamp(48px, 3vw, 56px);
    padding:0 clamp(24px, 1.5vw, 28px);
    font-size:clamp(15px, .9375vw, 16.5px)
  }
  .btn--sm{
    min-height:clamp(40px, 2.5vw, 46px);height:clamp(40px, 2.5vw, 46px);
    padding:0 clamp(20px, 1.25vw, 24px);
    font-size:clamp(14px, .875vw, 15.5px)
  }
  .ic{width:clamp(22px, 1.375vw, 25px);height:clamp(22px, 1.375vw, 25px)}
  .ic--sm{width:clamp(18px, 1.125vw, 20px);height:clamp(18px, 1.125vw, 20px)}
  .ic--lg{width:clamp(28px, 1.75vw, 32px);height:clamp(28px, 1.75vw, 32px)}


  .logo__mark{width:clamp(42px, 2.625vw, 47px);height:clamp(46px, 2.875vw, 51px)}
  .logo__fig{height:clamp(36px, 2.25vw, 40px)}
  .logo__name{font-size:clamp(23px, 1.4375vw, 26px)}
  .logo__tag{font-size:clamp(9.5px, .594vw, 10.5px)}
  .hdr__years b{font-size:clamp(17px, 1.0625vw, 19px)}
  .hdr__years span{font-size:clamp(11.5px, .719vw, 12.5px)}
  .nav__link{font-size:clamp(15px, .9375vw, 16.5px)}
  .hdr__phone{--ph-ic:clamp(27px, 1.6875vw, 30px)}
  .hdr__phone a{font-size:clamp(16px, 1vw, 17.5px)}
  .hdr__phone .hours{font-size:clamp(11.5px, .719vw, 12.5px)}
  .drop{min-width:clamp(262px, 16.375vw, 290px)}
  .drop a{padding:clamp(10px, .625vw, 12px) clamp(12px, .75vw, 14px);font-size:clamp(14.5px, .906vw, 16px)}


  .hero__in{grid-template-columns:minmax(0,1fr) clamp(392px, 24.5vw, 440px)}
  .hero h1{font-size:clamp(52px, 3.25vw, 60px)}
  .hero h1 .q{font-size:clamp(56px, 3.5vw, 64px)}
  .hero__lead{font-size:clamp(25px, 1.5625vw, 29px)}
  .hero__txt{font-size:clamp(17px, 1.0625vw, 19px)}
  .hero__cta{margin-top:clamp(32px, 2vw, 38px)}


  .usp__i{
    height:auto;
    min-height:clamp(100px, 6.25vw, 116px);
    padding:clamp(14px, .875vw, 18px) 10px;
    font-size:clamp(12.5px, .781vw, 14px)
  }


  .book{--book-pad:clamp(24px, 1.5vw, 30px);--book-gap:clamp(18px, 1.125vw, 22px)}
  .book__t{font-size:clamp(22px, 1.375vw, 25px)}
  .book__s{font-size:clamp(13.5px, .844vw, 15px)}
  .avatar{width:clamp(64px, 4vw, 72px);height:clamp(64px, 4vw, 72px)}
  .book__who b{font-size:clamp(16px, 1vw, 17.5px)}
  .book__who span{font-size:clamp(13px, .813vw, 14.5px)}
  .field{margin-bottom:clamp(12px, .75vw, 15px)}
  .field input,.field select{
    min-height:clamp(46px, 2.875vw, 54px);
    font-size:clamp(16px, 1vw, 17.5px)
  }
  .sel__opt{font-size:clamp(15.5px, .969vw, 17px)}
  .book__submit{margin-top:clamp(16px, 1vw, 20px)}
  .consent{font-size:clamp(11.5px, .719vw, 12.5px)}

  .consent .ic{
    width:clamp(13px, .813vw, 14.5px);height:clamp(13px, .813vw, 14.5px);
    align-self:flex-start;
    margin-top:calc((1.55em - clamp(13px, .813vw, 14.5px)) / 2)
  }
  .book__ok b{font-size:clamp(20px, 1.25vw, 23px)}
  .book__ok p{font-size:clamp(14px, .875vw, 15.5px)}


  .about__grid{gap:clamp(56px, 3.5vw, 68px)}
  .about__grid p{font-size:clamp(16.5px, 1.031vw, 18px)}
  .about__grid .about__lead{font-size:clamp(18px, 1.125vw, 20px)}
  .about__h3{font-size:clamp(21px, 1.313vw, 24px)}
  .about__list li{font-size:clamp(16.5px, 1.031vw, 18px)}
  .about__quote{font-size:clamp(19px, 1.188vw, 22px)}
  .about__fact{font-size:clamp(16.5px, 1.031vw, 18px)}
  .stats{gap:clamp(16px, 1vw, 20px)}
  .stat{padding:clamp(20px, 1.25vw, 24px)}
  .stat b{font-size:clamp(34px, 2.125vw, 40px)}
  .stat span{font-size:clamp(13.5px, .844vw, 15px)}


  .svc__tile{
    min-height:clamp(132px, 8.25vw, 152px);
    padding:clamp(22px, 1.375vw, 26px) clamp(12px, .75vw, 16px);
    font-size:clamp(12.5px, .781vw, 14px)
  }
  .svc__pop{padding:clamp(20px, 1.25vw, 24px) clamp(18px, 1.125vw, 22px)}
  .svc__pop-name{font-size:clamp(17px, 1.063vw, 19px)}
  .svc__pop-desc{font-size:clamp(13.5px, .844vw, 15px)}
  .svc__list li{font-size:clamp(13.5px, .844vw, 15px)}
  .svc__hint{font-size:clamp(14px, .875vw, 15.5px)}
  .svc__list .ic{width:clamp(15px, .938vw, 16.5px);height:clamp(15px, .938vw, 16.5px)}


  .rev{gap:clamp(24px, 1.5vw, 30px)}
  .rev__card{padding:clamp(20px, 1.25vw, 24px) clamp(22px, 1.375vw, 26px) clamp(18px, 1.125vw, 22px)}
  .rev__logo{width:clamp(36px, 2.25vw, 40px);height:clamp(36px, 2.25vw, 40px)}
  .rev__logo svg,.rev__logo img{width:clamp(22px, 1.375vw, 25px);height:clamp(22px, 1.375vw, 25px)}
  .rev__logo--gis svg,.rev__logo--gis img{width:clamp(36px, 2.25vw, 40px);height:clamp(36px, 2.25vw, 40px)}
  .rev__src{min-height:clamp(36px, 2.25vw, 40px);font-size:clamp(15px, .938vw, 16.5px)}
  .rev__score{min-height:clamp(36px, 2.25vw, 40px)}
  .stars svg{width:clamp(15px, .938vw, 16.5px);height:clamp(15px, .938vw, 16.5px)}
  .rev__body{height:clamp(132px, 8.25vw, 152px)}
  .rev__q{font-size:clamp(14.5px, .906vw, 16px)}
  .rev__more{font-size:clamp(13.5px, .844vw, 15px)}
  .rev__name{font-size:clamp(14px, .875vw, 15.5px)}
  .rev__date{font-size:clamp(12px, .75vw, 13px)}
  .rev__date .stars svg{width:clamp(13px, .813vw, 14.5px);height:clamp(13px, .813vw, 14.5px)}
  .rev__all{font-size:clamp(14.5px, .906vw, 16px)}
  .arw{width:clamp(44px, 2.75vw, 50px);height:clamp(44px, 2.75vw, 50px)}
  .arw svg{width:clamp(16px, 1vw, 18px);height:clamp(16px, 1vw, 18px)}


  #cases .sec-head{margin-bottom:clamp(52px, 3.25vw, 62px)}
  .case__t{font-size:clamp(17px, 1.063vw, 19px)}
  .case__hint{font-size:clamp(12.5px, .781vw, 14px)}
  .case__author{font-size:clamp(13.5px, .844vw, 15px)}
  .case__date{font-size:clamp(12px, .75vw, 13px)}
  .case__more-t{font-size:clamp(18.5px, 1.156vw, 21px)}
  .case__more-s{font-size:clamp(13.5px, .844vw, 15px)}
  .case__more .ic{width:clamp(32px, 2vw, 37px);height:clamp(32px, 2vw, 37px)}


  .foot__in{
    gap:clamp(54.4px, 3.4vw, 68px);
    padding-top:clamp(30px, 1.875vw, 36px);padding-bottom:clamp(30px, 1.875vw, 36px)
  }
  .foot__i b{font-size:clamp(15px, .938vw, 16.5px)}
  .foot__i span span{font-size:clamp(12.5px, .781vw, 13.5px)}
  .foot__legal{font-size:clamp(12px, .75vw, 13px)}
}

@media (min-width:2200px){
  :root{
    --wrap:   clamp(1400px, 63.64vw, 1520px);
    --hdr-h:  clamp(96px, 4.364vw, 104px);
    --sp-sec: clamp(76px, 3.455vw, 88px);
  }
  body{font-size:clamp(17px, .773vw, 18px)}
  .h-sec,.sec-head{font-size:clamp(42px, 1.909vw, 46px)}
  .hero h1{font-size:clamp(60px, 2.727vw, 66px)}
  .hero h1 .q{font-size:clamp(64px, 2.909vw, 70px)}
  .hero__lead{font-size:clamp(29px, 1.318vw, 32px)}
  .hero__txt{font-size:clamp(19px, .864vw, 20.5px)}
  .hero__art{width:min(56%, clamp(760px, 34.5vw, 920px))}
  .btn{
    min-height:clamp(56px, 2.545vw, 60px);height:clamp(56px, 2.545vw, 60px);
    font-size:clamp(16.5px, .75vw, 17.5px)
  }
  .field input,.field select{min-height:clamp(54px, 2.455vw, 58px)}
  .about__grid p,.about__list li,.about__fact{font-size:clamp(18px, .818vw, 19px)}
  .stat b{font-size:clamp(40px, 1.818vw, 44px)}
  .rev__q{font-size:clamp(16px, .727vw, 17px)}
}

/* Собственные стили внутренних страниц. Дописываются в конец
   assets/css/site.css при сборке (python3 tools/build.py); первая часть
   того файла — копия <style> с главной. Правьте здесь, не в site.css.

   Правила для /dela/ ограничены классом .page-dela на <body>: имена
   .case__*, .foot__*, .logo__* живут и на других страницах, и без этого
   ограничения они протекут на главную и на страницы услуг. */



.has-drop:hover .drop,
.has-drop:focus-within .drop{opacity:0;visibility:hidden;transform:translateY(-6px)}
.has-drop:hover .nav__link svg{transform:none}
.has-drop.is-open .drop{opacity:1;visibility:visible;transform:none}
.has-drop.is-open .nav__link svg{transform:rotate(180deg)}
.nav__link[aria-expanded]{cursor:pointer}


.mnav__i--btn{width:100%;background:none;border:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.mnav__i--btn svg{transition:transform .25s}
.mnav__i--btn[aria-expanded="true"] svg{transform:rotate(90deg)}
.mnav__sub{display:none;padding:6px 0 10px}
.mnav__sub.is-open{display:block}
.mnav__sub a{
  display:flex;align-items:center;gap:10px;
  padding:11px 0 11px 14px;text-decoration:none;
  font-size:15px;color:var(--ink-soft);
  border-bottom:1px solid var(--line)
}
.mnav__sub a:last-child{border-bottom:0}
.mnav__sub a::before{
  content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--gold-soft)
}
.mnav__sub a:hover{color:var(--ink)}


.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  padding-top:18px;font-size:13px;color:var(--muted)
}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--gold-dark);border-bottom-color:var(--gold-soft)}
.crumbs svg{width:12px;height:12px;stroke:var(--gold-soft);fill:none;stroke-width:2;flex:0 0 auto}
.crumbs span[aria-current]{color:var(--ink-soft)}


.phead{padding-top:clamp(20px,2.4vw,30px);padding-bottom:clamp(24px,2.8vw,36px)}
/* Без лида под заголовком (/o-nas/, /kontakty/) следом идёт сразу секция, и
   поле в 36px выходило втрое больше, чем на /uslugi/, где под заголовком
   стоит лид. Заказчик попросил одинаково на /uslugi/, /o-nas/, /otzyvy/,
   /kontakty/ и /dela/: сначала взяли 14 по мере /uslugi/, 22 сентября 2026
   подняли все пять на 10 — до 24. Число одно и то же во всех пяти местах и
   на любой ширине, менять только вместе: здесь, у .phead__lead и у
   .page-dela .head. */
.phead:not(:has(.phead__lead)){padding-bottom:24px}
.phead__top{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.phead__ic{
  width:56px;height:56px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-s)
}
.phead__ic .ic{width:28px;height:28px}
/* Заголовок страницы направления живёт не в .phead, а в сетке .pgrid--svc
   (см. build.py), поэтому селектор перечисляет оба места: без второго H1
   остался бы с браузерным шрифтом и полями. */
.phead h1,
.pgrid--svc h1{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(26px,3.6vw,38px);line-height:1.2;letter-spacing:.01em
}
/* На странице направления заголовок длинный («Семейный юрист в Омске:
   развод, раздел имущества, алименты») и в 38px забирал весь первый экран.
   Сбавлен до меры заголовка страницы дела — просьба заказчика
   16 сентября 2026. Нижние границы clamp равны верхним у предыдущего
   диапазона, поэтому на 1536 и 1600 кегль совпадает. */
.pgrid--svc h1{font-size:clamp(24px,3.2vw,34px)}
.phead__lead{
  margin:24px 0 0;max-width:68ch;
  color:var(--ink-soft);font-size:clamp(16px,1.5vw,18px);line-height:1.5
}
.phead__lead b{color:var(--ink)}


.prose{max-width:72ch}
.prose p{margin:0 0 16px;color:var(--ink-soft);font-size:clamp(15px,1.35vw,16.5px);line-height:1.62}
.prose p:last-child{margin-bottom:0}
.prose h2{
  margin:34px 0 14px;font-family:var(--f-display);font-weight:600;
  font-size:clamp(20px,2vw,24px);line-height:1.25;color:var(--ink)
}
.prose h3{
  margin:26px 0 12px;font-family:var(--f-display);font-size:clamp(18px,1.7vw,21px);
  font-weight:600;color:var(--ink);line-height:1.25
}
.prose > :first-child{margin-top:0}
.prose b{color:var(--ink)}
/* Перечни в политике конфиденциальности (раньше - «- пункт;<br>» одной
   строкой в <p>, отчего абзацы читались вразнобой: то на всю меру, то куском
   в одну строку). Список того же кегля и цвета, что обычный текст - только
   с отступом и маркером, - и все пункты укладываются в одну ширину колонки. */
.prose ul{margin:0 0 16px;padding-left:22px;color:var(--ink-soft);font-size:clamp(15px,1.35vw,16.5px);line-height:1.62}
.prose ul li{margin:0 0 6px}
.prose ul li:last-child{margin-bottom:0}
.prose ul:last-child{margin-bottom:0}


.pgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:start}
.pgrid__aside{display:grid;gap:16px;position:sticky;top:calc(var(--hdr-h) + 16px)}

/* На /o-nas/ ячейки и панель записи едут по странице вместе и
   останавливаются, когда низ панели дойдёт до низа карты. Липкой делаем
   обёртку .aside-stick, а не саму колонку: колонка растянута на всю высоту
   строки, и липкость на ней не сработала бы. Единственная строка грида
   забирает всю высоту — это дорожка, по которой едет обёртка;
   align-self:start не даёт ей растянуться на всю дорожку. Карта — последняя
   в тексте, поэтому её нижний отступ снимаем, иначе панель уедет на 4px ниже. */
.pgrid__aside:has(.aside-stick){
  position:static;align-self:stretch;grid-template-rows:1fr
}
.aside-stick{
  display:grid;gap:16px;align-self:start;
  position:sticky;top:calc(var(--hdr-h) + 16px)
}
.prose > .map:last-child{margin-bottom:0}

/* Лид под заголовком не должен вылезать за колонку с содержимым, которая идёт
   ниже. Ширина повторяет левую колонку .pgrid: (ширина обёртки минус зазор)
   умножить на 1.15/2. Предел 790px — во что упирается .prose со своими 72ch
   на самом крупном шрифте, иначе на широких мониторах лид обгонял бы карточки.
   Правило берёт только страницы с двухколоночной раскладкой: на /uslugi/ и
   /otzyvy/ ниже идут сетки во всю ширину, там лид сужать не надо. */
/* Цифры в ячейках «О нас» — золотые, но темнее общего --gold-dark.
   Правило живёт здесь, а не в стилях главной: там те же ячейки остаются
   прежними, её рендер трогать нельзя. */
.stat b{color:#7A6031}

.phead:has(+ .section .pgrid) .phead__lead{
  max-width:min(calc((100% - clamp(24px,4vw,56px)) * .575), 790px)
}


.panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  padding:clamp(20px,2vw,26px);box-shadow:var(--shadow-s)
}
.panel__t{
  margin:0 0 14px;font-family:var(--f-display);font-weight:600;
  font-size:19px;line-height:1.3;color:var(--ink)
}
.panel .btn{margin-top:4px}
.panel__note{margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.panel__tel{
  display:flex;flex-direction:column;gap:4px;margin:0 0 14px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1
}
.panel__tel a{font-size:19px;font-weight:700;text-decoration:none}
.panel__tel a:hover{color:var(--gold-dark)}
.panel__tel span{font-size:13px;color:var(--muted);font-weight:400}


.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{
  display:flex;align-items:flex-start;gap:10px;
  color:var(--muted);font-size:clamp(15px,1.35vw,16.5px);line-height:1.5
}
.ticks .ic{margin-top:3px;stroke:var(--gold);stroke-width:2.2;width:18px;height:18px;flex:0 0 auto}
.ticks b{color:var(--ink);font-weight:700}


/* Нумерованные шаги «Как мы работаем?»: у последовательности номера читаются
   лучше галочек — сразу видно, что за чем идёт. */
.steps{
  --step-gap:22px;
  list-style:none;margin:0;padding:0;display:grid;
  gap:var(--step-gap);counter-reset:step
}
/* Отступ под заголовком. У абзаца между кромкой блока и буквами есть просвет
   от интерлиньяжа — около половины кегля, — а у шага сразу начинается
   закрашенный кружок, и при одинаковом margin шаги выглядели прижатыми к
   заголовку. Добавляем ровно этот просвет: .5em при 16px даёт 8px, и на глаз
   получается как у «Кто ведёт дела?». Именно padding: соседние margin
   схлопываются, и margin-top меньше 14px у заголовка ничего бы не изменил. */
.prose h2 + .steps{padding-top:.5em}
.steps li{
  counter-increment:step;position:relative;
  display:flex;align-items:flex-start;gap:12px;
  color:var(--muted);font-size:clamp(15px,1.35vw,16.5px);line-height:1.5
}
.steps li::before{
  content:counter(step);flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--cream);color:var(--gold-dark);
  font-family:var(--f-display);font-weight:700;font-size:13.5px;line-height:1
}
/* Черта от кружка к кружку — шаги читаются как один путь, а не как четыре
   отдельных пункта. Линия абсолютная, поэтому не становится третьим элементом
   флексбокса; тянется от нижней кромки кружка в промежуток до следующего,
   отступив по 4px с обоих концов. Длина считается от --step-gap, чтобы не
   разъезжаться при правке промежутка. */
.steps li:not(:last-child)::after{
  content:"";position:absolute;left:12px;top:29px;
  bottom:calc(3px - var(--step-gap));
  width:2px;border-radius:1px;background:var(--gold-soft)
}
.steps b{color:var(--ink);font-weight:700}
.ticks span{display:block}


.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
/* Ровно три колонки: у блока «Ещё не решили» три карточки, и на широком
   экране auto-fill растягивает сетку на четыре, оставляя пустую ячейку. */
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Два-три дела в ряду на странице дела: auto-fit схлопывает пустые колонки,
   и карточки растягиваются на всю ширину вместо того, чтобы жаться слева. */
.cards--fit{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media (max-width:860px){.cards--3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
.card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  padding:22px 20px;box-shadow:var(--shadow-s);
  text-decoration:none;color:inherit;
  transition:border-color .18s, box-shadow .18s, transform .12s
}
.card:hover{border-color:var(--gold-soft);box-shadow:var(--shadow-m);transform:translateY(-1px)}
.card .ic{stroke:var(--gold)}
.card__t{
  font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.3;color:var(--ink)
}
.card__d{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0}
.card__go{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--gold-dark)
}
.card__go svg{
  width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.22,.68,.24,1)
}
.card:hover .card__go svg{transform:translateX(4px)}


.cta{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-m);padding:clamp(24px,2.8vw,34px);
  display:flex;align-items:center;gap:clamp(20px,2.6vw,32px);flex-wrap:wrap
}
.cta__txt{flex:1 1 320px;min-width:0}
.cta__t{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(20px,2.2vw,26px);line-height:1.25
}
.cta__s{margin:8px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5}
.cta__act{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-left:auto}
/* .sec-head поднят на -0.26em оптической компенсацией, поэтому поле под
   карточкой CTA выходит меньше поля над ней. Подтягиваем карточку вверх ровно
   на ту же величину — сверху и снизу становится одинаково. Правило работает
   только там, где следом идёт секция без верхнего отступа и с заголовком:
   на /otzyvy/ и /uslugi/ дальше обычный текст, и поля там равны и так, а на
   страницах услуг и /o-nas/ следующая секция со своим отступом сверху. */
.section:has(+ .section--tight .sec-head) .cta{
  margin-top:calc(-0.26 * clamp(24px, 3.4vw, 36px) - clamp(6px, .8vw, 11px))
}


.casehead{padding-top:clamp(18px,2.2vw,26px);padding-bottom:16px}
.casehead h1{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(24px,3.2vw,34px);line-height:1.22;letter-spacing:.01em;
  overflow-wrap:break-word
}
/* Подпись автора, дата и направление стоят слева от снимка, первой строкой
   вровень с его верхней кромкой. Поле под группой — 22px до текста дела;
   когда направление есть, оно идёт сразу под автором. */
.casemeta{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
  margin:0 0 22px;font-size:13.5px
}
.casemeta:has(+ .caseservice){margin-bottom:8px}
.casemeta time{color:var(--muted);font-size:12.5px}
.casemeta .tag{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--gold-dark);font-weight:600;text-decoration:none
}
.casemeta .tag:hover{border-bottom:1px solid var(--gold-soft)}
.casemeta .tag svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.casephoto{
  margin:22px 0 0;overflow:hidden;border-radius:var(--r-m);
  border:1px solid var(--line);box-shadow:var(--shadow-s);
  aspect-ratio:16 / 9;background:var(--cream-2)
}
.casephoto img{width:100%;height:100%;object-fit:cover}
/* Заглушки «дело без фотографии» больше нет: с 22 сентября 2026 бот не даёт
   опубликовать дело без снимка, а у дела без него блок просто не выводится
   и текст идёт во всю ширину. */
/* Длинные строки без пробелов (доверитель прислал ссылку, номер дела одним
   куском) браузер не может разорвать: строка не влезает рядом со снимком,
   и весь абзац целиком уезжает под него — обтекание пропадает. Разрешаем
   перенос внутри слова, оно наследуется всем содержимым дела. */
.casebody{overflow-wrap:break-word}
/* Снимок дела — в правом верхнем углу текста, строки его обтекают и ниже
   снимка идут во всю ширину. float, а не сетка: только он даёт обтекание с
   переходом на полную ширину. Ширина в процентах от текстовой колонки, но не
   больше 520px — иначе на широком мониторе снимок забирает половину экрана.
   clear в конце блока не даёт снимку вылезти под следующую секцию, когда
   текста мало. */
/* Текст дела идёт во всю ширину обёртки, а не в колонке .prose на 72ch:
   снимок прижат к правому краю страницы, и строки должны доходить до него, а
   ниже снимка — до правого края. Просьба заказчика 16 сентября 2026. */
.page-delo .casebody{max-width:none}
/* Верхнее поле 1px, а не 0: у подписи автора слева есть просвет от
   интерлиньяжа, и с нулём кромка снимка вставала выше строки букв.
   Нижнего поля нет совсем: оно продлевает обтекание ниже самой картинки,
   и строка, которая уже помещалась под снимком, оставалась урезанной
   (заказчик, 22 сентября 2026). Просвет до строки под снимком даёт сам
   интерлиньяж. Заодно поле от снимка до карточки CTA стало те же 40px,
   что и от текста. */
.casebody > .casephoto{
  float:right;width:min(44%, 520px);
  margin:1px 0 0 clamp(20px, 2.4vw, 32px)
}
.casebody::after{content:"";display:block;clear:both}
@media (max-width:767px){
  /* На телефоне колонка и так узкая: обтекание съедало бы строку до
     двух-трёх слов. Снимок во всю ширину, над текстом. */
  .casebody > .casephoto{float:none;width:100%;margin:0 0 20px}
  /* Обтекать нечего, и по разметке снимок стоит перед подписью автора —
     на телефоне это увело бы подпись под фотографию. Раскладываем колонкой
     и поднимаем подпись с направлением обратно под заголовок: порядок
     остаётся тот, к которому привыкли, — заголовок, автор, снимок, текст. */
  .casebody{display:flex;flex-direction:column}
  .casebody > .casemeta{order:-2}
  .casebody > .caseservice{order:-1}
}
.caseback{margin-top:clamp(28px,3vw,38px)}


.section--tight{padding-top:0}
.stack{display:grid;gap:clamp(24px,2.8vw,36px)}

@media (max-width:1024px){
  .pgrid{grid-template-columns:1fr;gap:32px}
  .aside-stick{position:static}
  .phead:has(+ .section .pgrid) .phead__lead{max-width:68ch}
  .pgrid__aside{position:static}
}
@media (max-width:767px){
  .cards{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:stretch}
  /* В колонке flex-basis у .cta__txt считается по высоте, и 320px из базовой
     раскладки превращались в пустое поле под текстом. */
  .cta__txt{flex:0 0 auto}
  .cta__act{margin-left:0}
  .cta__act .btn{width:100%}
  /* Правая колонка на телефоне не нужна ни на /kontakty/, ни на /o-nas/:
     телефоны, режим работы и кнопка звонка уже есть в шапке и в блоке
     «Разберём вашу ситуацию бесплатно», а в столбик колонка только удлиняет
     страницу. На /o-nas/ вместе с панелью записи уходят и ячейки с цифрами
     («20+», «9», «Бесплатно», «100%») — так попросил заказчик. Правило висит на
     модификаторе колонки, а не на самой панели: на планшете (768–1024px)
     колонка остаётся и встаёт под текстом. */
  .pgrid__aside--contact,
  .pgrid__aside--about{display:none}
  .phead__top{gap:12px}
  .phead__ic{width:48px;height:48px}
  .phead__ic .ic{width:24px;height:24px}
}
@media (max-width:520px){
  .phead h1{font-size:23px}
  .pgrid--svc h1{font-size:21px}
  .casehead h1{font-size:22px}
}


/* Отбивка лида на /otzyvy/ была своя (28px вместо 14), чтобы совпасть с
   «Контактами», где под заголовком сразу шли карточки. 16 сентября 2026
   заказчик попросил одно поле под заголовком на всех страницах — то, что
   на /uslugi/. Класс .phead--airy остался в разметке, но ничего не меняет;
   правило снято. */
/* Одна мера строки на всю страницу — как на /o-nas/ и /kontakty/, где весь
   текст идёт одним .prose. Лид набран крупнее текста, поэтому в знаках меры
   разные, а в пикселях одинаковые: ширину задаёт общая переменная, и абзацы
   вверху и внизу страницы начинаются и кончаются на одной вертикали при любой
   ширине окна (в ch так не выходит — кегли лида и текста упираются в потолки
   clamp в разных точках, и колонки разъезжались).
   Само число выбрано заказчиком 16 сентября 2026: общие 72ch (≈726px на 1440)
   он счёл слишком узкими рядом с лентами карточек — «то вся ширина, то
   посередине». Взяли ≈90 знаков (957px), это 59.85 кегля страницы: до
   карточек остаётся небольшой перепад, а строка ещё читается. Во всю обёртку
   не растягиваем — там вышло бы 106–119 знаков в строке. Значения на широких
   экранах повторяют clamp кегля страницы (16→17px с 1600, 17→18px с 2200).
   Правило общее для /otzyvy/ (.page-otzyvy) и хаба услуг (.page-uslugi). */
.page-otzyvy,
.page-uslugi,
.page-dela{--measure:957px}
@media (min-width:1600px){
  .page-otzyvy,
  .page-uslugi,
  .page-dela{--measure:clamp(957px, 59.85vw, 1017px)}
}
@media (min-width:2200px){
  .page-otzyvy,
  .page-uslugi,
  .page-dela{--measure:clamp(1017px, 46.3vw, 1077px)}
}
.page-otzyvy .prose,
.page-uslugi .prose,
.page-dela .prose,
.page-otzyvy .phead__lead,
.page-uslugi .phead__lead{max-width:var(--measure)}

/* Лента отзывов идёт сразу под лидом, и заказчик просил читать их как один
   блок. Общее поле .phead (29–36px, с 1600 до 43) отрывало карточки от
   абзаца, поэтому на /otzyvy/ оно ужато до 12px. Ещё 6px добавляет
   padding-top у .revs__vp — место под тень карточек, — так что от букв
   последней строки лида до рамки карточки остаётся ~19px: меньше, чем 24px
   между заголовком и лидом, и лента визуально прилипает к тексту.
   22 сентября 2026 пробовали ужать до 4px (≈11px до карточки) — заказчик
   посмотрел и вернулся к 12px, так что это значение выбрано, а не случайно.
   Селектор с .page-otzyvy весит больше базового .phead и перебивает его на
   любой ширине (медиазапрос веса не добавляет), поэтому прибавку для широких
   экранов пишем отдельным правилом. Нижняя граница clamp равна базовым 12 —
   на 1536 и 1600 поле совпадает. */
.page-otzyvy .phead{padding-bottom:12px}
@media (min-width:1600px){
  .page-otzyvy .phead{padding-bottom:clamp(12px, .75vw, 14px)}
}

/* Поле под лентой отзывов: 44 вместо общих 60. Заголовок ниже — .sec-head,
   он поднят оптической компенсацией, и до его букв выходит 33.6px — ровно
   столько же, сколько между блоками на /o-nas/ и /kontakty/ (там это
   margin-top:34px у .prose h2, до букв 33.5). */
.section--tight:has(+ #casesMini){padding-bottom:42px}

/* Поля вокруг CTA на /otzyvy/ ужаты по просьбе заказчика: 60 сверху и снизу
   выглядели разреженно между сеткой дел и коротким текстом. Селектор цепляется
   за id секции дел — он есть только на этой странице, остальных не касается.
   Второе правило — про саму секцию CTA, она идёт сразу за делами. */
#casesMini{padding-bottom:40px}
#casesMini + .section{padding-bottom:40px}
/* Последняя секция страницы — «Как оставить отзыв?»: до подвала общие 60,
   как на /o-nas/ и /kontakty/ (было 50). */
#casesMini + .section + .section{padding-bottom:60px}
/* Лента отзывов: три карточки в окне, остальные листаются — механика та же,
   что у ленты дел на главной (нативная горизонтальная прокрутка со снапом,
   стрелки и точки сверху скриптом). Карточки одного размера получаются сами:
   ширина задана долей окна, высота — растяжкой флексбокса. */
.revs{position:relative;--revs-gap:18px}
.revs__vp{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  margin:0 -6px;padding:6px;scroll-padding-left:6px;scroll-padding-right:6px
}
.revs__vp::-webkit-scrollbar{display:none}
.revs__track{display:flex;gap:var(--revs-gap);align-items:stretch}

/* Строка под лентой: точки слева, ссылка по центру, стрелки справа — всё на
   одной высоте. Сетка 1fr auto 1fr держит ссылку строго по центру, даже когда
   точек и стрелок нет (лента влезла целиком). На узком экране ссылка уходит
   на свою строку, иначе она не помещается между точками и стрелками. */
/* 12px плюс 6px нижнего поля прокручиваемой обёртки дают 18px от кромки
   карточек до строки. На главной от карточки до ссылки 28px, здесь заказчик
   попросил на 10px плотнее. */
.revs__foot{
  margin:12px 0 0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px
}
/* Точки те же, что в ленте дел, но их стили в index.html прибиты к .case__nav,
   поэтому здесь повторяем: без этого <i> остаются пустыми и точек не видно. */
/* Колонки закреплены явно: когда точки и стрелки спрятаны (лента влезла
   целиком), без этого ссылка съезжала в первую колонку и переставала быть
   по центру. */
.revs__foot .dots{grid-column:1;justify-self:start;display:flex;gap:6px}
.revs__foot .dots i{
  width:6px;height:6px;border-radius:50%;background:var(--line);display:block;
  transition:background-color .2s,width .2s
}
.revs__foot .dots i.on{background:var(--gold);width:16px;border-radius:3px}
.revs__foot .rev__all{grid-column:2;margin:0}
.revs__arws{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.revs__foot [hidden]{display:none}
@media (max-width:640px){
  .revs__foot{grid-template-columns:auto auto;justify-content:space-between}
  .revs__foot .rev__all{grid-column:1 / -1;grid-row:2;text-align:center}
  .revs__arws{grid-column:2;grid-row:1}
  .revs__foot .dots{grid-column:1;grid-row:1}
}
.revitem{
  flex:0 0 calc((100% - var(--revs-gap) * 2) / 3);
  min-width:0;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:10px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  padding:22px 24px;box-shadow:var(--shadow-s)
}
@media (max-width:1024px){.revitem{flex-basis:calc((100% - var(--revs-gap)) / 2)}}
@media (max-width:640px){.revitem{flex-basis:100%}}
/* Шапка карточки повторяет карточку отзыва на главной: значок сервиса, его
   название, оценка справа. Значок берём оттуда же — класс .rev__logo живёт в
   стилях главной и доступен на всех страницах. */
.revitem__top{
  display:flex;align-items:center;gap:10px;
  padding-bottom:12px;border-bottom:1px solid var(--line)
}
.revitem__src{font-size:13.5px;color:var(--ink-soft);font-weight:600;white-space:nowrap}
.revitem__top .stars{margin-left:auto}
/* Подрезка только при html.js: без скрипта кнопки «Читать отзыв целиком»
   не будет, и текст должен остаться видимым целиком. */
.revitem__q{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
/* Высота ровно в четыре строки (line-height 1.6), а не «сколько получится»:
   так карточки совпадают и в соседних колонках, и в разных блоках — сетки
   у «Яндекс Карт» и «2ГИС» разные и друг о друге не знают. В em, чтобы
   высота росла вместе с кеглем на широких мониторах. Было шесть строк —
   заказчик попросил карточку ниже; остальное читается по кнопке «Читать
   отзыв целиком», она и появляется теперь чаще. */
.js .revitem__q{
  flex:0 0 auto;height:6.4em;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4
}
/* Раскрытый отзыв прокручивается внутри той же рамки. Системную полосу
   прячем: в macOS она проявляется только на время прокрутки и потом пропадает,
   а нужен постоянный указатель. Рисуем свой — как в карточке на главной. */
.js .revitem__q.is-full{
  display:block;overflow-y:auto;padding-right:16px;
  scrollbar-width:none;-ms-overflow-style:none
}
.js .revitem__q.is-full::-webkit-scrollbar{width:0;height:0}
.revitem__body{position:relative;flex:0 0 auto}
.revitem__sb{
  position:absolute;right:0;top:2px;bottom:2px;width:5px;
  border-radius:3px;background:var(--line);
  opacity:0;visibility:hidden;transition:opacity .22s ease
}
.revitem__sb.is-on{opacity:1;visibility:visible}
.revitem__sb i{
  position:absolute;left:0;right:0;top:0;display:block;
  border-radius:3px;background:var(--gold);min-height:22px
}
/* Строка под текстом занимает место всегда, даже когда кнопки нет:
   иначе карточка с кнопкой была бы выше соседней ровно на её высоту. */
.revitem__morerow{flex:0 0 auto;height:22px;display:flex;align-items:center}
.revitem__more{
  align-self:flex-start;padding:0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--gold-dark);
  border-bottom:1px solid var(--gold-soft)
}
.revitem__more[hidden]{display:none}
.revitem__more:hover{border-color:var(--gold-dark)}
.revitem__m{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)
}
.revitem__m b{color:var(--ink);font-size:14.5px}


/* Дела на /otzyvy/ — такая же лента, как у отзывов выше: и карточка (.case),
   и обёртка (.cases/.cases__vp/.cases__track), и подвал (.revs__foot) взяты
   готовыми, поэтому здесь только ссылка посередине подвала. */
/* Ссылка под лентой дел: серая и подчёркнутая, без вида кнопки — она уводит
   со страницы, спорить за внимание с CTA ей не надо. Отступ сверху даёт
   .revs__foot, поэтому своего margin у неё нет. */
/* Лента дел идёт сразу за лентой отзывов, поэтому шаг и число карточек в
   окне у них общие — карточки встают в те же колонки. Класса .revs на
   обёртке дел нет, так что --revs-gap здесь задаём сами, а брейкпоинты
   повторяют отзывы, а не ленту дел с главной (там на узком экране нарочно
   выглядывает край следующей карточки). */
/* Три направления, которые ведёт главный юрист, выделены в сетке на
   /uslugi/: та же карточка, только рамка золотая и фон кремовый — приём взят
   у плашки «Узнать больше о нашей работе» в ленте дел, чтобы не заводить на
   сайте ещё один вид подсветки. Тень чуть плотнее, поэтому карточка читается
   первой, но в общий ритм сетки укладывается. */
.card--pick{
  border-color:var(--gold-soft);
  background:linear-gradient(158deg,#FBF8F1 0%,#F3ECDD 62%,#EDE3CE 100%);
  box-shadow:var(--shadow-m)
}
.card--pick:hover{border-color:var(--gold)}

/* Лента дел на /uslugi/ идёт под сеткой направлений, поэтому шаг у них
   общий (у .cards он 20px, у ленты по умолчанию 18): карточки дел встают
   ровно в те же три колонки, что карточки направлений. */
/* Ритм страницы взят с /o-nas/ и /kontakty/: там все блоки идут одним
   потоком внутри .prose, и до следующего заголовка всегда 34px (margin-top
   у .prose h2), а 60px остаются только в самом низу — перед подвалом.
   На /uslugi/ блоки разнесены по секциям, потому что сетка и лента дел шире
   текстовой колонки, поэтому те же 34px задаём секциям. Перед карточкой CTA
   40px — столько же выходит на «Контактах» (60px минус оптическая
   компенсация под заголовком, 39.6). */
.page-uslugi .section--tight{padding-bottom:34px}
.page-uslugi .section--tight:has(.cta){padding-bottom:60px}
/* Под лентой дел идёт сразу карточка CTA, и поле до неё то же, что на
   «Контактах» и на /otzyvy/ — 40, а не 34, как между блоками текста. */
.page-uslugi #casesUsl{padding-bottom:40px}

/* Страница направления. Ритм тот же, что на /uslugi/: 34 между блоками, 40
   перед карточкой CTA, 60 у последней секции перед подвалом. Двухколоночная
   часть (текст и панели) идёт первой секцией, дальше во всю ширину лента дел,
   вопросы, CTA и «Другие направления». */
/* Шапка направления живёт внутри той же сетки, что текст и панели (класс
   .pgrid--svc, разметка в build.py): заголовок с иконкой занимает обе
   колонки, лид открывает левую, панели справа начинаются с ним на одной
   строке — так просил заказчик. Верхнее поле от крошек до заголовка раньше
   давал .phead, теперь его держит секция. */
.page-usluga .svchead{padding-top:clamp(20px,2.4vw,30px)}
.pgrid--svc{row-gap:16px}
.pgrid--svc > .phead__top{grid-column:1 / -1;margin-bottom:0}
/* min-width:0 — колонка грида по умолчанию не уже своего содержимого; без
   него любой широкий блок внутри (лента, таблица) растянул бы её. */
.pgrid--svc > .stack{grid-column:1;min-width:0}
.pgrid--svc > .pgrid__aside{grid-column:2}
/* Шаг внутри колонки — общий ритм страниц: до букв заголовка 33.5, как на
   /o-nas/ и /kontakty/ (у .stack по умолчанию 36). */
.pgrid--svc > .stack{gap:34px}
/* Лид — первая строка колонки, его собственный верхний отступ сложился бы
   с row-gap: до правки те же 16px давало схлопывание соседних margin. */
.pgrid--svc > .stack > .phead__lead{margin-top:0}
@media (max-width:1024px){
  /* В одну колонку: без сброса grid-column:2 у панелей завёлся бы второй,
     неявный столбец. Отступ до них держим прежним (16 от row-gap + 16),
     чтобы он совпал с общими 32px у .pgrid на этой ширине. */
  .pgrid--svc > .pgrid__aside{grid-column:auto;margin-top:16px}
}
/* На телефоне окна записи на странице направления нет — так же, как на
   /o-nas/ и /kontakty/: телефоны и кнопка заявки уже есть в шапке и в
   карточке «Разберём вашу ситуацию бесплатно». «Направление включает»
   остаётся: это содержимое страницы, а не контакты. */
@media (max-width:767px){
  .page-usluga .panel--book{display:none}
}

/* Политика конфиденциальности заканчивается обычным текстом - ни карточек,
   ни CTA после неё нет, как у остальных страниц. Общие 60px рассчитаны на
   переход к цветному блоку перед подвалом; без него это пустое кремовое поле
   выглядит отдельной полосой. Сужено до 40 - как отступ под лентой отзывов
   (.section--tight:has(+ #casesMini)) и вокруг блока с делами на /otzyvy/,
   тот же порядок цифр для «после текста, перед подвалом». */
.page-privacy .section--tight{padding-bottom:40px}

.page-usluga .section--tight{padding-bottom:34px}
/* Секция перед карточкой CTA сохраняет общий отступ секции: карточка поднята
   на оптическую компенсацию под заголовком ниже (правило .section:has(+
   .section--tight .sec-head) .cta), и на глаз от вопросов до карточки
   остаётся те же ~40, что на «Контактах» и /uslugi/. Поставить здесь 40
   значило бы вычесть компенсацию дважды. */
.page-usluga .section--tight:has(.faq){padding-bottom:var(--sp-sec)}
.page-usluga .section--tight:has(.cta){padding-bottom:60px}
/* «Другие направления» закрывают страницу: до подвала общие 60. */
.page-usluga .section--tight:has(.cards){padding-bottom:60px}

/* Вопросы по направлению. Раскрывашка на родном <details>: работает без
   скрипта и переживает любое расхождение разметки и site.js в кэше. Рамка
   и тень те же, что у .card и .panel, — ещё одного вида карточки на сайте
   не заводим. */
/* Ширина — во всю обёртку, как у ленты дел и карточек направлений рядом.
   Вариант «по ширине текстовой колонки» заказчик смотрел 16 сентября 2026 и
   вернулся к этому. */
.faq{display:grid;gap:10px;margin-top:24px}
.faq__i{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-s);transition:border-color .18s, box-shadow .18s
}
.faq__i[open]{border-color:var(--gold-soft);box-shadow:var(--shadow-m)}
.faq__q{
  display:flex;align-items:flex-start;gap:16px;cursor:pointer;
  padding:18px 22px;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(16px,1.5vw,18px);line-height:1.4;color:var(--ink);
  -webkit-tap-highlight-color:transparent
}
/* Родной треугольник убираем в обоих движках: list-style снимает его в
   Firefox, ::-webkit-details-marker — в Safari. */
.faq__q{list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--gold-dark)}
.faq__i[open] .faq__q{padding-bottom:10px}
.faq__q svg{
  width:16px;height:16px;flex:0 0 auto;margin-left:auto;margin-top:.2em;
  stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s cubic-bezier(.22,.68,.24,1)
}
.faq__i[open] .faq__q svg{transform:rotate(90deg)}
.faq__a{
  padding:0 22px 20px;
  color:var(--ink-soft);font-size:clamp(15px,1.35vw,16.5px);line-height:1.62
}
/* Стрелка и текст ответа начинаются на одной вертикали с вопросом: отступ
   справа оставляем под стрелку, чтобы строка не подлезала под неё. */
.faq__a{padding-right:calc(22px + 16px + 16px)}
.faq__a p{margin:0 0 12px}
.faq__a p:last-child{margin-bottom:0}
@media (max-width:560px){
  .faq__q{padding:16px 18px;gap:12px}
  .faq__i[open] .faq__q{padding-bottom:9px}
  .faq__a{padding:0 18px 18px}
}
@media (prefers-reduced-motion:reduce){
  .faq__i,.faq__q svg{transition:none}
}

/* Заголовок стоит над рядом карточек, а не над абзацем: 14px, как до текста,
   здесь мало. 24 — середина между текстовым ритмом и 32px, с которыми лента
   дел стоит под заголовком на /otzyvy/ (там заголовок крупнее). Нижнее поле
   заголовка (14px) с этим отступом схлопывается, поэтому в сумме ровно 24. */
#casesUsl .prose + .cases,
#casesSvc .prose + .cases{margin-top:24px}

/* Заголовок ленты дел выровнен по левой кромке: на этой странице всё идёт
   слева — и заголовок страницы с лидом, и «Как оставить отзыв?» внизу.
   Черта слева от заголовка была нужна только для симметрии центрованного
   варианта, поэтому убрана; правая осталась и доводит взгляд до ленты. */
#casesMini .sec-head{justify-content:flex-start}
#casesMini .sec-head::before{display:none}
#casesMini .h-sec{text-align:left}

/* Геометрия ленты общая для обеих страниц: на /uslugi/ заказчик попросил
   «точно такой же» список, как на /otzyvy/ — тот же шаг, столько же карточек
   в окне и та же строка под лентой (точки слева, ссылка по центру, стрелки
   справа). Шаг 18px на 1.3px расходится с сеткой направлений выше (у неё
   20px), это осознанный размен в пользу одинаковых лент. */
#casesMini .cases,
#casesUsl .cases,
#casesSvc .cases{--revs-gap:18px;--case-gap:var(--revs-gap)}
@media (max-width:1024px){
  #casesMini .case,
  #casesUsl .case,
  #casesSvc .case{flex:0 0 calc((100% - var(--case-gap)) / 2)}
}
@media (max-width:640px){
  #casesMini .cases,
  #casesUsl .cases,
  #casesSvc .cases{--revs-gap:16px}
  #casesMini .case,
  #casesUsl .case,
  #casesSvc .case{flex:0 0 100%}
}
@media (min-width:1600px){
  #casesMini .cases,
  #casesUsl .cases,
  #casesSvc .cases{--revs-gap:clamp(18px, 1.125vw, 24px)}
}
.casesall{text-align:center;font-size:14.5px}
.casesall a{
  color:var(--muted);text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:3px;
  font-weight:400;border-bottom:0
}
.casesall a:hover{color:var(--ink);text-decoration-color:var(--gold-soft)}


/* grid-auto-rows:1fr равняет высоту всех карточек, а не только соседей по ряду;
   .contactitem__note прижата к низу через margin-top:auto — иначе карточки
   с примечанием разной длины выглядят рваными. */
.contactgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;
  gap:16px;margin-bottom:32px
}
.contactitem{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  padding:20px 22px;box-shadow:var(--shadow-s);
  transition:border-color .18s, box-shadow .18s
}
.contactitem:hover{border-color:var(--gold-soft);box-shadow:var(--shadow-m)}
/* Бокс иконки один для всех — 28px. В символах спрайта рисунок занимает
   около 76% высоты вьюбокса, а в document.png — все 100%, поэтому маске
   задан тот же процент: иначе растровая иконка выглядит заметно крупнее
   соседних. */
.contactitem .ic{width:28px;height:28px;flex:0 0 auto;stroke:var(--gold);fill:none;stroke-width:1.7;margin-top:0}
/* Иконка «Заявка с сайта» — растровая (assets/icons/document.png), а не из
   спрайта. Красим её маской, иначе чёрный PNG выбивался бы из ряда золотых
   иконок: цвет берётся из фона, а форма — из альфа-канала картинки. */
/* Растровые иконки: форма берётся из альфа-канала PNG, цвет — из фона.
   76% — доля, которую занимает рисунок в символах спрайта; во всех этих
   файлах он растянут на все 100% холста, и без поправки они выглядели бы
   заметно крупнее соседних. */
.ic--png{
  display:block;background-color:var(--gold);stroke:none;
  -webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:76%;
  mask-position:center;mask-repeat:no-repeat;mask-size:76%
}
.ic--doc{
  -webkit-mask-image:url("/assets/icons/document.png");
  mask-image:url("/assets/icons/document.png")
}
.ic--scales{
  -webkit-mask-image:url("/assets/icons/equality.png");
  mask-image:url("/assets/icons/equality.png")
}
.ic--medal{
  -webkit-mask-image:url("/assets/icons/medal.png");
  mask-image:url("/assets/icons/medal.png")
}
.ic--users{
  -webkit-mask-image:url("/assets/icons/users.png");
  mask-image:url("/assets/icons/users.png")
}
.ic--basket{
  -webkit-mask-image:url("/assets/icons/shopping-basket.png");
  mask-image:url("/assets/icons/shopping-basket.png")
}
.ic--house{
  -webkit-mask-image:url("/assets/icons/house-chimney.png");
  mask-image:url("/assets/icons/house-chimney.png")
}
.ic--map{
  -webkit-mask-image:url("/assets/icons/map.png");
  mask-image:url("/assets/icons/map.png")
}
.ic--card{
  -webkit-mask-image:url("/assets/icons/credit-card.png");
  mask-image:url("/assets/icons/credit-card.png")
}
.ic--compliance{
  -webkit-mask-image:url("/assets/icons/compliance-document.png");
  mask-image:url("/assets/icons/compliance-document.png")
}
.ic--star{
  -webkit-mask-image:url("/assets/icons/circle-star.png");
  mask-image:url("/assets/icons/circle-star.png")
}

/* Кнопка «На главную» в подвале: шире обычной, чтобы не терялась
   в тёмной полосе рядом с тремя колонками контактов. */
.foot__cta .btn{min-width:220px}
@media (max-width:1024px){.foot__cta .btn{min-width:0}}
.contactitem > span{
  display:flex;flex-direction:column;min-width:0;flex:1 1 auto;
  font-size:15px;line-height:1.5;color:var(--ink)
}
.contactitem b{
  display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 7px
}
.contactitem__v{display:block}
.contactitem a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold-soft)}
.contactitem a:hover{color:var(--gold-dark)}
.contactitem__note{
  display:block;margin-top:auto;padding-top:10px;
  font-size:13px;line-height:1.45;color:var(--muted)
}
/* tabular-nums держит цифры одной ширины: без него два номера одной длины
   визуально разъезжаются. */
.contactitem__tel{
  display:flex;flex-direction:column;gap:2px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1
}
.contactitem__tel a{align-self:flex-start}


/* Карта живёт внутри .prose, поэтому её ширину задаёт текстовая колонка.
   Нижний margin 4px: он схлопывается с 34px у следующего .prose h2, и
   отступ после карты остаётся таким же, как между остальными разделами. */
.map{
  position:relative;margin:20px 0 4px;border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--shadow-s);background:var(--cream);
  aspect-ratio:16/10
}
.map iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:560px){.map{aspect-ratio:4/3}}


/* Панель записи стоит в одном ряду с карточками контактов и тянется на всю
   их высоту: без этого её нижний край не совпадал с нижним краем сетки. */
/* Расширенный вариант панели записи: две кнопки и примечание. Стоит на
   /kontakty/ и /o-nas/. На /kontakty/ она должна заканчиваться на одной линии
   с сеткой карточек — высоту там проставляет assets/js/site.js. Раньше здесь
   стояло подобранное число, но оно ломалось при каждой правке текста.
   Без JS и на /o-nas/ панель просто по содержимому. */
.panel--contact{display:flex;flex-direction:column}
.panel--contact .btn--primary{margin-top:auto}
.panel--contact .btn--quiet{margin-top:10px}

/* Приглушённая кнопка: серее и тише основной, чтобы не спорить с ней за
   внимание. Тон нейтральный, а не кремовый, — иначе она сливается с панелью.
   Тень та же, что у основной кнопки: размеры у них и так одинаковые, но без
   тени приглушённая выглядит мельче. */
.btn--quiet{
  background:#EEECE8;border-color:#DEDAD3;color:#6E6862;
  font-weight:600;box-shadow:var(--shadow-s)
}
.btn--quiet:hover{background:#E7E4DF;border-color:#D2CDC5;color:var(--ink)}
.btn--quiet:active{transform:translateY(1px)}
@media (max-width:640px){
  .revs{--revs-gap:16px}
  .revitem{padding:18px 20px}
  .contactgrid{grid-template-columns:1fr;grid-auto-rows:auto}
}


@media (min-width:1600px){
  .cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .crumbs{font-size:clamp(13px, .813vw, 14.5px)}
  .phead h1{font-size:clamp(38px, 2.375vw, 44px)}
  .pgrid--svc h1{font-size:clamp(34px, 2.125vw, 39px)}
  .phead__lead{font-size:clamp(18px, 1.125vw, 20px)}
  .phead__ic{width:clamp(56px, 3.5vw, 64px);height:clamp(56px, 3.5vw, 64px)}
  .phead__ic .ic{width:clamp(28px, 1.75vw, 32px);height:clamp(28px, 1.75vw, 32px)}
  .prose p{font-size:clamp(16.5px, 1.031vw, 18px)}
  .prose h2{font-size:clamp(24px, 1.5vw, 27px)}
  .prose h3{font-size:clamp(21px, 1.313vw, 24px)}
  .ticks li{font-size:clamp(16.5px, 1.031vw, 18px)}
  .ticks .ic{width:clamp(18px, 1.125vw, 20px);height:clamp(18px, 1.125vw, 20px)}
  .panel{padding:clamp(26px, 1.625vw, 32px)}
  .panel__t{font-size:clamp(19px, 1.188vw, 22px)}
  .panel__tel a{font-size:clamp(19px, 1.188vw, 22px)}
  .cards{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(20px, 1.25vw, 26px)}
  .card__t{font-size:clamp(17px, 1.063vw, 19px)}
  .card__d{font-size:clamp(13.5px, .844vw, 15px)}
  .cta__t{font-size:clamp(26px, 1.625vw, 30px)}
  .cta__s{font-size:clamp(14.5px, .906vw, 16px)}
  .casehead h1{font-size:clamp(34px, 2.125vw, 39px)}
  .casemeta{font-size:clamp(13.5px, .844vw, 15px)}
  .revs{--revs-gap:clamp(18px, 1.125vw, 24px)}
  .revitem__q{font-size:clamp(16px, 1vw, 17.5px)}
  .contactitem > span{font-size:clamp(15.5px, .969vw, 17px)}
  .crumbs svg{width:clamp(12px, .75vw, 13.5px);height:clamp(12px, .75vw, 13.5px)}
  .phead__top{gap:clamp(16px, 1vw, 20px)}
  .pgrid__aside{gap:clamp(16px, 1vw, 20px)}
  .panel__note{font-size:clamp(13px, .813vw, 14.5px)}
  .panel__tel{gap:clamp(4px, .25vw, 6px)}
  .panel__tel span{font-size:clamp(13px, .813vw, 14.5px)}
  .ticks{gap:clamp(12px, .75vw, 15px)}
  .steps{--step-gap:clamp(22px, 1.375vw, 26px)}
  .steps li{font-size:clamp(16.5px, 1.031vw, 18px)}
  .steps li::before{width:clamp(26px, 1.625vw, 30px);height:clamp(26px, 1.625vw, 30px);font-size:clamp(13.5px, .844vw, 15px)}
  .card{padding:clamp(22px, 1.375vw, 27px) clamp(20px, 1.25vw, 25px);gap:clamp(10px, .625vw, 12px)}
  .card__go{font-size:clamp(13.5px, .844vw, 15px);gap:clamp(8px, .5vw, 10px)}
  .card__go svg{width:clamp(15px, .938vw, 17px);height:clamp(15px, .938vw, 17px)}
  .cta{padding:clamp(34px, 2.125vw, 40px);gap:clamp(32px, 2vw, 40px)}
  .cta__act{gap:clamp(12px, .75vw, 16px)}
  .casemeta time,
  .casemeta__author{font-size:clamp(12.5px, .781vw, 14px)}
  .casemeta .tag svg{width:clamp(14px, .875vw, 16px);height:clamp(14px, .875vw, 16px)}
  .revitem{padding:clamp(22px, 1.375vw, 28px) clamp(24px, 1.5vw, 30px);gap:clamp(12px, .75vw, 15px)}
  .revitem__top{gap:clamp(10px, .625vw, 13px)}
  .revitem__src{font-size:clamp(12px, .75vw, 13.5px)}
  .revitem__m{font-size:clamp(13px, .813vw, 14.5px);gap:clamp(10px, .625vw, 13px)}
  .revitem__m b{font-size:clamp(14.5px, .906vw, 16px)}
  .revitem__src{font-size:clamp(13.5px, .844vw, 15px)}
  .revitem__more{font-size:clamp(13.5px, .844vw, 15px)}
  .casesall{font-size:clamp(14.5px, .906vw, 16px)}
  .faq{gap:clamp(10px, .625vw, 12px);margin-top:clamp(24px, 1.5vw, 30px)}
  .faq__q{
    padding:clamp(18px, 1.125vw, 22px) clamp(22px, 1.375vw, 28px);
    font-size:clamp(18px, 1.125vw, 20px);gap:clamp(16px, 1vw, 20px)
  }
  .faq__i[open] .faq__q{padding-bottom:clamp(10px, .625vw, 12px)}
  .faq__q svg{width:clamp(16px, 1vw, 18px);height:clamp(16px, 1vw, 18px)}
  .faq__a{
    font-size:clamp(16.5px, 1.031vw, 18px);
    padding:0 calc(clamp(22px, 1.375vw, 28px) * 2 + clamp(16px, 1vw, 18px)) clamp(20px, 1.25vw, 25px) clamp(22px, 1.375vw, 28px)
  }
  .contactgrid{gap:clamp(16px, 1vw, 22px);margin-bottom:clamp(32px, 2vw, 42px)}
  .contactitem{
    padding:clamp(20px, 1.25vw, 26px) clamp(22px, 1.375vw, 28px);
    gap:clamp(14px, .875vw, 18px)
  }
  .contactitem .ic{width:clamp(28px, 1.75vw, 33px);height:clamp(28px, 1.75vw, 33px)}
  .contactitem b{font-size:clamp(12px, .75vw, 13.5px)}
  .contactitem__note{font-size:clamp(13px, .813vw, 14.5px)}
  .contactitem__tel{gap:clamp(2px, .125vw, 4px)}

  /* Отступы, которые упирались в потолок clamp задолго до 1600px и потому
     на широких мониторах оставались прежними, пока текст и карточки росли.
     На главной их ровесники (.about__grid, .section, .book) прибавляют те же
     +20% — здесь повторяем этот шаг, чтобы страницы масштабировались
     одинаково. */
  .crumbs{
    padding-top:clamp(18px, 1.125vw, 22px);
    gap:clamp(6px, .375vw, 7px) clamp(10px, .625vw, 12px)
  }
  .phead{padding-top:clamp(30px, 1.875vw, 36px);padding-bottom:clamp(36px, 2.25vw, 43px)}
  .page-usluga .svchead{padding-top:clamp(30px, 1.875vw, 36px)}
  .pgrid--svc{row-gap:clamp(16px, 1vw, 20px)}
  .phead__top{margin-bottom:clamp(16px, 1vw, 20px)}
  .pgrid{gap:clamp(56px, 3.5vw, 68px)}
  /* Ширина лида повторяет левую колонку .pgrid, поэтому зазор в формуле
     должен совпадать с новым значением выше. */
  .phead:has(+ .section .pgrid) .phead__lead{
    max-width:min(calc((100% - clamp(56px, 3.5vw, 68px)) * .575), 790px)
  }
  .aside-stick{gap:clamp(16px, 1vw, 20px)}
  .panel__t{margin-bottom:clamp(14px, .875vw, 17px)}
  .panel__note{margin-top:clamp(12px, .75vw, 15px)}
  .map{margin-top:clamp(20px, 1.25vw, 24px)}
  .steps li{gap:clamp(12px, .75vw, 15px)}
  .stack{gap:clamp(36px, 2.25vw, 43px)}
  .casehead{padding-bottom:clamp(16px, 1vw, 19px)}
}
@media (min-width:2200px){
  .cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .phead h1{font-size:clamp(44px, 2vw, 48px)}
  .pgrid--svc h1{font-size:clamp(39px, 1.773vw, 43px)}
  .phead__lead{font-size:clamp(20px, .909vw, 21.5px)}
  .prose p,.ticks li{font-size:clamp(18px, .818vw, 19px)}
  .prose h2{font-size:clamp(27px, 1.227vw, 29px)}
  .prose h3{font-size:clamp(24px, 1.091vw, 26px)}
  .casehead h1{font-size:clamp(39px, 1.773vw, 42px)}
  .crumbs{font-size:clamp(14.5px, .659vw, 15.5px)}
  .panel__t,.panel__tel a{font-size:clamp(22px, 1vw, 24px)}
  .panel__note,.panel__tel span,.contactitem__note{font-size:clamp(14.5px, .659vw, 15.5px)}
  .cards{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
  .card__t{font-size:clamp(19px, .864vw, 20.5px)}
  .card__d,.card__go{font-size:clamp(15px, .682vw, 16px)}
  .cta__t{font-size:clamp(30px, 1.364vw, 33px)}
  .cta__s{font-size:clamp(16px, .727vw, 17px)}
  .contactitem > span{font-size:clamp(17px, .773vw, 18px)}
  .contactitem b{font-size:clamp(13.5px, .614vw, 14.5px)}
  .revitem__q{font-size:clamp(17.5px, .795vw, 18.5px)}
  .faq__q{font-size:clamp(20px, .909vw, 21.5px)}
  .faq__a{font-size:clamp(18px, .818vw, 19px)}
  .revitem__m b{font-size:clamp(16px, .727vw, 17px)}
}


/* Страница отдельного дела (класс на <body> ставит
   includes/partials/case.html). Ритм тот же, что на остальных страницах:
   34 между блоками, 40 перед карточкой CTA, 60 у последней секции. Поле
   под самой карточкой CTA 16 сентября 2026 сначала ужали до 20px (под
   карточками «Читать дело»), но следом под неё встал заголовок «Другие дела
   этого направления» — и заказчик попросил вернуть общие 34. Отдельного
   правила у неё теперь нет, работает строка выше. */
.page-delo .section--tight{padding-bottom:34px}
.page-delo .section--tight:has(+ .section--tight .cta){padding-bottom:40px}
.page-delo .section--tight:last-of-type{padding-bottom:60px}

/* Чипсы направлений на /dela/. Не фильтр, а навигация: уводят на страницу
   услуги. Вид взят у приглушённой кнопки (.btn--quiet) — на странице уже
   есть такая в карточке CTA, ещё одного вида плашек не заводим. */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px;padding-bottom:clamp(18px,2vw,26px)}
.chip{
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;
  background:var(--white);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;line-height:1.2;color:var(--ink-soft);
  text-decoration:none;box-shadow:var(--shadow-s);
  transition:border-color .18s, color .18s, box-shadow .18s;
  -webkit-tap-highlight-color:transparent
}
.chip:hover{border-color:var(--gold-soft);color:var(--gold-dark);box-shadow:var(--shadow-m)}
/* Скрипт подменяет чипсы-ссылки кнопками-фильтрами: у <button> не
   наследуются шрифт и выравнивание, задаём явно. */
button.chip{font-family:inherit;text-align:left;cursor:pointer}
/* Выбранное направление — залитый чипс, а не тот же вид, что при наведении:
   на телефоне наведения нет вовсе, а на мониторе «навёл» и «включено»
   должны различаться. Заливка та же, что у основной кнопки. */
.chip.is-on{
  background:linear-gradient(180deg,#BB9C58 0%,var(--gold) 46%,var(--gold-dark) 100%);
  border-color:var(--gold-dark);color:#fff;
  box-shadow:var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.28)
}
.chip.is-on:hover{color:#fff;border-color:var(--gold-dark)}
.chip__n{
  margin-left:7px;padding:1px 6px;border-radius:999px;
  background:var(--cream-2);color:var(--muted);
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums
}
.chip.is-on .chip__n{background:rgba(255,255,255,.22);color:#fff}
@media (max-width:640px){
  .chip{padding:7px 12px;font-size:12.5px}
  /* На телефоне девять чипсов занимали семь строк и отодвигали список дел
     почти на экран вниз. Кладём их в одну прокручиваемую строку — как ленты
     карточек на других страницах; края уводим под кромку экрана, чтобы было
     видно, что строка продолжается. */
  .chips{
    gap:7px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:calc(max(20px, env(safe-area-inset-left)) * -1);
    margin-right:calc(max(20px, env(safe-area-inset-right)) * -1);
    padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right))
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
}
@media (min-width:1600px){
  .chip{padding:clamp(8px, .5vw, 10px) clamp(14px, .875vw, 17px);font-size:clamp(13.5px, .844vw, 15px)}
  .chips{gap:clamp(8px, .5vw, 10px)}
}

/* Строка «Направление: …» под текстом дела. */
/* Строка «Направление: …». Ни иконки, ни подчёркивания у названия —
   просьба заказчика 16 сентября 2026. Обычный абзац, а не flex: с flex
   между «Направление:» и ссылкой стоял gap в 8px вместо пробела. */
/* Строка «Направление: …» — в одну стилистику с подписью автора и датой
   над ней: один серый, один кегль, без жирного и без подчёркивания
   (заказчик, 22 сентября 2026). Название направления осталось ссылкой на
   страницу направления и золотеет при наведении. */
/* Селектор с потомком, а не просто .caseservice: строка лежит внутри
   .casebody.prose, и правило .prose p (0,1,1) перебивало одиночный класс —
   строка шла кеглем основного текста. */
.casebody > .caseservice{
  margin:0 0 14px;
  font-size:12.5px;color:var(--muted)
}
.casebody > .caseservice a{color:inherit;text-decoration:none}
.casebody > .caseservice a:hover{color:var(--gold-dark)}
@media (min-width:1600px){
  .casebody > .caseservice{font-size:clamp(12.5px, .781vw, 14px)}
}
/* Автор дела вёл на «О нас» и был набран жирным с подчёркиванием. С
   22 сентября 2026 это обычная подпись в одну стилистику с датой рядом —
   просьба заказчика. */
.casemeta__author{color:var(--muted);font-size:12.5px}


.page-dela .head{padding-top:clamp(18px,2.2vw,28px);padding-bottom:24px}
.page-dela .head h1{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(26px,3.6vw,38px);line-height:1.2;letter-spacing:.01em
}
.page-dela .head p{margin:10px 0 0;color:var(--muted);font-size:14.5px}
/* Под сеткой дел теперь идут «Не нашли похожего дела?» и карточка CTA,
   поэтому поле под списком такое же, как между блоками на других страницах
   (34 до букв заголовка, как на /o-nas/), а не «до подвала», как раньше.
   Дальше по странице: 40 перед карточкой CTA и 60 от неё до подвала. */
.page-dela .list{padding-bottom:34px}
/* Перед карточкой CTA поле ужато по просьбе заказчика: 40 между коротким
   текстом и карточкой смотрелись разреженно (было как на «Контактах»). */
.page-dela .section--tight{padding-bottom:24px}
.page-dela .section--tight:has(.cta){padding-bottom:60px}
.page-dela .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.2vw,28px)}
.page-dela .empty{color:var(--muted);font-size:15px;margin:0}


.page-dela .case{scroll-margin-top:calc(var(--hdr-h) + 16px)}

.page-dela .foot__tels a b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

@media (max-width:1024px){
  .page-dela .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .page-dela .grid{grid-template-columns:1fr;gap:22px}
  .page-dela .case__ph{aspect-ratio:16 / 10}
  .page-dela .foot__legal{gap:8px}
}
@media (max-width:560px){
  .page-dela .head{padding-top:18px}
  .page-dela .head p{font-size:13.5px}
  .page-dela .list{padding-bottom:40px}
  .page-dela .case__t{font-size:15.5px}
  .page-dela .case__hint{font-size:12px}
  .page-dela .foot__legal{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .page-dela .head h1{font-size:23px}
  .page-dela .case__ph{aspect-ratio:3 / 2}
}

@media (min-width:561px) and (max-width:767px){
  .page-dela .case__t{font-size:clamp(14.5px,1.12vw,17px)}
  .page-dela .case__hint{font-size:12.5px}
}
@media (max-width:400px){
  body.page-dela{--hdr-gap:10px}
  .page-dela .logo__name{font-size:18px}
  .page-dela .logo__tag{font-size:8.5px;letter-spacing:.18em}
  .page-dela .logo__mark{width:34px;height:38px}
  .page-dela .logo__fig{height:29px}
  .page-dela .grid{gap:18px}
  .page-dela .btn--sm{padding:8px 14px;font-size:13.5px}
  .page-dela .case__t{font-size:15px}
}
@media (max-width:359px){
  body.page-dela{--hdr-gap:8px}
  .page-dela .logo{gap:9px}
  .page-dela .logo__name{font-size:16px;letter-spacing:.1em}
  .page-dela .logo__tag{font-size:7.5px;letter-spacing:.14em}
  .page-dela .logo__mark{width:30px;height:34px}
  .page-dela .logo__fig{height:26px}
  .page-dela .btn--sm{padding:8px 12px;font-size:13px}
}
@media (min-width:1600px){
  .page-dela .head{padding-top:clamp(28px, 1.75vw, 34px)}
  .page-dela .head h1{font-size:clamp(38px, 2.375vw, 44px)}
  .page-dela .head p{font-size:clamp(14.5px, .906vw, 16px)}
  .page-dela .grid{gap:clamp(28px, 1.75vw, 34px)}
  .page-dela .empty{font-size:clamp(15px, .938vw, 16.5px)}
}
@media (min-width:2200px){
  .page-dela .head h1{font-size:clamp(44px, 2vw, 48px)}
}


/* Появление блоков при прокрутке. Состояние до показа задаётся только при
   html.js — без скрипта содержимое остаётся видимым, а не пропадает совсем.
   Наблюдатель живёт в assets/js/site.js. Главной это не касается: класса .rv
   в index.html нет. */
.js .rv{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.22,.68,.24,1), transform .5s cubic-bezier(.22,.68,.24,1)
}
.js .rv.is-in{opacity:1;transform:none}
.js .rv[data-rv-i="1"]{transition-delay:.06s}
.js .rv[data-rv-i="2"]{transition-delay:.12s}
.js .rv[data-rv-i="3"]{transition-delay:.18s}

.crumbs a,.card,.contactitem,.revitem{-webkit-tap-highlight-color:transparent}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv.is-in{opacity:1;transform:none;transition:none}
  .card,.card:hover,.contactitem,.contactitem:hover{transition:none}
  .card:hover{transform:none}
  .card__go svg,.card:hover .card__go svg{transition:none;transform:none}
}