/* perehvat.online — стили по брендбуку BrainHub v1.0 (сентябрь 2026).
   Правила: белый фон, оранжевого ≤ 3 %, акценты рамкой 1,5 px / чертой сверху / оранжевой точкой,
   без градиентов, теней, скруглений и эмодзи; Raleway (заголовки) + Golos Text (текст) + IBM Plex Mono (служебный слой);
   сетка 1120 / 12 / 24 / 56; отступы только 8 / 16 / 24 / 40 / 64 / 100; одна оранжевая кнопка на экран. */

:root{
  --paper:#FFFFFF; --ink:#171410; --orange:#FF7400; --orange-text:#C25200;
  --ochre:#8C6A1C; --indigo:#3F4E96; --pine:#0E6E63; --night:#12100D; --chalk:#F5F2EE;
  --line:rgba(23,20,16,.18); --line-soft:rgba(23,20,16,.08); --muted:rgba(23,20,16,.72);
  --f-h:"Raleway","Helvetica Neue",Arial,sans-serif;
  --f-t:"Golos Text","Helvetica Neue",Arial,sans-serif;
  --f-m:"IBM Plex Mono",Consolas,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:100px;
  --container:1120px; --gutter:24px; --margin:56px;
  color-scheme:light;
}
@media (max-width:1024px){ :root{ --margin:40px } }
@media (max-width:760px){ :root{ --margin:20px } }

/* ---------- база ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper) }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{ margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.65 var(--f-t); -webkit-font-smoothing:antialiased; overflow-x:hidden }
@media (max-width:760px){ body{ font-size:16px } }
img,svg,video{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration-color:rgba(23,20,16,.35); text-underline-offset:.16em; transition:color .16s var(--ease), text-decoration-color .16s var(--ease) }
a:hover{ text-decoration-color:var(--orange) }
h1,h2,h3,h4{ margin:0; font-family:var(--f-h); text-wrap:balance }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
button,input,textarea{ font:inherit; color:inherit }
strong,b{ font-weight:600 }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px }
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.container{ width:100%; max-width:calc(var(--container) + 2 * var(--margin)); margin-inline:auto; padding-inline:var(--margin) }

/* ---------- типографика ---------- */
.h1{ font-weight:800; text-transform:uppercase; font-size:clamp(2rem, 1.15rem + 3.1vw, 4rem); line-height:.95; letter-spacing:-.02em }
.h2{ font-weight:700; font-size:clamp(1.75rem, 1.25rem + 1.7vw, 2.75rem); line-height:1.05; letter-spacing:-.01em; max-width:30ch }
.h3{ font-weight:600; font-size:clamp(1.375rem, 1.25rem + .45vw, 1.625rem); line-height:1.25 }
.h4{ font-weight:600; font-size:1.25rem; line-height:1.3 }
.lead{ font-size:clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); line-height:1.5; max-width:64ch }
.text{ max-width:68ch }
.mono,.kicker,.cap{ font:500 12px/1.7 var(--f-m); letter-spacing:.12em; text-transform:uppercase }
.kicker{ color:var(--orange-text); margin-bottom:var(--s2) }
.cap{ color:var(--muted) }
.muted{ color:var(--muted) }
.nowrap{ white-space:nowrap }
.mt1{ margin-top:var(--s1) } .mt2{ margin-top:var(--s2) } .mt3{ margin-top:var(--s3) } .mt4{ margin-top:var(--s4) } .mt5{ margin-top:var(--s5) }
.mb2{ margin-bottom:var(--s2) } .mb3{ margin-bottom:var(--s3) } .mb4{ margin-bottom:var(--s4) }

/* ---------- секции и сетка ---------- */
.sec{ padding-block:var(--s5); border-top:1px solid var(--line) }
.sec--first{ border-top:0 }
.sec--tight{ padding-block:var(--s4) }
@media (max-width:760px){ .sec{ padding-block:var(--s4) } }
.sec__head{ margin-bottom:var(--s4) }
.sec__head .lead{ margin-top:var(--s2) }
.cols{ display:grid; gap:var(--s3) var(--gutter) }
.cols--2{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.cols--3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.cols--4{ grid-template-columns:repeat(4, minmax(0,1fr)) }
.split{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s4) var(--gutter); align-items:start }
.split--center{ align-items:center }
@media (max-width:1024px){ .cols--4,.cols--3{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:760px){ .cols--2,.cols--3,.cols--4,.split{ grid-template-columns:minmax(0,1fr) } }

/* миллиметровка под первым экраном: модуль 16, жирная линия каждые 80, графит 6 % и 16 % */
.sec--hero{ position:relative; border-top:0; padding-block:var(--s5) }
.sec--hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(23,20,16,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(23,20,16,.14) 1px, transparent 1px),
                   linear-gradient(rgba(23,20,16,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(23,20,16,.05) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px, 16px 16px, 16px 16px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 46%); mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 46%) }
.sec--hero > .container{ position:relative; z-index:1 }
.hero__lead{ margin-top:var(--s3) }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); margin-top:var(--s4) }
.chips span{ font:500 12px/1.7 var(--f-m); letter-spacing:.12em; text-transform:uppercase; position:relative; padding-left:14px }
.chips span::before{ content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; background:var(--orange) }
.crumbs{ display:flex; flex-wrap:wrap; gap:var(--s2); padding-top:var(--s3); font:500 12px/1.7 var(--f-m); letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.crumbs a{ text-decoration:none } .crumbs a:hover{ color:var(--orange-text) }
.crumbs li + li::before{ content:"/"; margin-right:var(--s2) }

/* ---------- шапка ---------- */
.header{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line) }
.header__in{ display:flex; align-items:center; gap:var(--s3); min-height:72px }
.logo{ display:block; flex:none }
.logo img{ height:26px; width:auto }
.nav{ display:flex; align-items:center; gap:20px; margin-left:auto }
.nav a{ font-weight:500; font-size:15px; text-decoration:none; padding:4px 0; border-bottom:1.5px solid transparent; white-space:nowrap; transition:border-color .16s var(--ease) }
.nav a:hover,.nav a[aria-current="page"]{ border-bottom-color:var(--orange) }
.nav .btn{ margin-left:4px; border-bottom:1.5px solid var(--ink) }
.nav .btn:hover{ border-bottom-color:var(--ink) }
.header__phone{ font:700 15px/1 var(--f-h); text-decoration:none; white-space:nowrap }
.burger{ display:none; margin-left:auto; width:44px; height:44px; padding:0; border:1.5px solid var(--ink); background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px }
.burger i{ display:block; width:20px; height:1.5px; background:var(--ink) }
@media (max-width:1200px){
  .nav{ display:none }
  .burger{ display:inline-flex }
  .header.is-open .nav{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2); position:absolute; left:0; right:0; top:100%; padding:var(--s3) var(--margin) var(--s4); background:var(--paper); border-bottom:1px solid var(--line) }
  .header.is-open .nav a{ font-size:17px }
  .header.is-open .nav .btn{ margin:var(--s1) 0 0; font-size:16px }
  .header__phone--top{ margin-left:auto }
  .burger{ margin-left:0 }
}
@media (max-width:480px){ .header__phone--top{ display:none } }
@media (min-width:1201px){ .nav .header__phone--menu{ display:none } }

/* ---------- кнопки ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 var(--s3); border:1.5px solid var(--orange); background:var(--orange); color:var(--ink); font:700 16px/1.2 var(--f-h); letter-spacing:.01em; text-decoration:none; text-align:center; cursor:pointer; border-radius:0; -webkit-appearance:none; appearance:none; transition:background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease) }
.btn:hover{ background:#F06C00; border-color:#F06C00 }
.btn--ghost{ background:transparent; border-color:var(--ink) }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.btn--ink{ background:var(--ink); border-color:var(--ink); color:var(--chalk) }
.btn--ink:hover{ background:#000; border-color:#000 }
.btn--sm{ min-height:44px; padding:0 var(--s2); font-size:15px }
.btn--block{ width:100% }
.btn[disabled],.btn.is-busy{ opacity:.6; cursor:default }
.msgbtns{ display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2) }
.msgbtn{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 var(--s2); border:1.5px solid var(--ink); font:700 15px/1 var(--f-h); text-decoration:none; transition:color .16s var(--ease), border-color .16s var(--ease) }
.msgbtn::before{ content:""; width:8px; height:8px; background:var(--orange); flex:none }
.msgbtn:hover{ color:var(--orange-text); border-color:var(--orange-text) }

/* ---------- форма ---------- */
.form{ position:relative; border:1.5px solid var(--ink); padding:var(--s3); background:var(--paper) }
.form__title{ font:600 20px/1.3 var(--f-h); margin-bottom:var(--s2) }
.field{ display:block; margin-bottom:var(--s3) }
.field > span{ display:block; font:500 12px/1.7 var(--f-m); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:2px }
.field input{ display:block; width:100%; height:48px; padding:0; border:0; border-bottom:1.5px solid var(--ink); border-radius:0; background:transparent; font-size:17px; outline:none; -webkit-appearance:none; appearance:none; transition:border-color .16s var(--ease) }
.field input::placeholder{ color:rgba(23,20,16,.4) }
.field input:focus{ border-bottom-color:var(--orange) }
.field.is-error input{ border-bottom-color:var(--orange-text) }
.field__err{ display:none; margin-top:6px; font-size:16px; line-height:1.45; color:var(--orange-text) }
.field.is-error .field__err{ display:block }
.form .btn{ width:100%; margin-top:var(--s1) }
.form__fine{ margin-top:var(--s2); font-size:16px; line-height:1.5; color:var(--muted) }
.form__msg{ margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--line); font-size:16px; line-height:1.5 }
.form__msg .msgbtns{ margin-top:var(--s1) }
.form__status{ display:none; margin-top:var(--s2); font-size:16px; line-height:1.5; color:var(--orange-text) }
.form.is-error .form__status{ display:block }
.form .nojs{ margin-top:var(--s2); font-size:16px; color:var(--orange-text) }
.hp{ position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; opacity:0 }

/* ---------- гарантии в первом экране ---------- */
.guar{ display:grid; gap:var(--s2); margin-top:var(--s3) }
.guar li{ display:grid; grid-template-columns:32px 1fr; gap:var(--s2); align-items:start; font:600 clamp(1.0625rem, 1rem + .35vw, 1.25rem)/1.35 var(--f-t) }
.guar li i{ font:500 12px/1.9 var(--f-m); font-style:normal; letter-spacing:.12em; color:var(--orange-text) }
.guar__cap{ margin-top:var(--s4) }

/* ---------- карточки ---------- */
.card{ border:1.5px solid var(--ink); padding:var(--s3); display:grid; gap:var(--s1); align-content:start }
.card--line{ border:0; border-top:1.5px solid var(--ink); padding:var(--s2) 0 0 }
.card--dash{ border-style:dashed }
.card--key{ border-color:var(--orange) }
.card p{ color:var(--muted) }
.card .bul{ margin-top:var(--s1) }
.bridge{ border-left:1.5px solid var(--orange); padding-left:var(--s3); font:600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.4 var(--f-t); max-width:60ch }

/* ---------- списки ---------- */
.bul{ display:grid; gap:var(--s1) }
.bul li{ position:relative; padding-left:20px }
.bul li::before{ content:""; position:absolute; left:0; top:.7em; width:7px; height:7px; background:var(--orange) }
.bul--ink li::before{ background:var(--ink) }
.bul--dash li::before{ background:transparent; border:1.5px dashed var(--ink); width:9px; height:9px; top:.6em }

/* ---------- цифры ---------- */
.num{ font:800 clamp(2.5rem, 1.9rem + 2.8vw, 4.5rem)/1 var(--f-h); letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.num--dot::after{ content:""; display:inline-block; width:.16em; height:.16em; background:var(--orange); margin-left:.06em }
.stat{ border-top:1.5px solid var(--ink); padding-top:var(--s2) }
.stat .num{ font-size:clamp(2rem, 1.5rem + 2.1vw, 3.5rem); line-height:1.05; text-wrap:balance }
.stat small{ display:block; margin-top:var(--s1); font-size:16px; line-height:1.5; color:var(--muted) }
.big3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s3) var(--gutter); margin-top:var(--s3) }
.big3 b{ display:block; font:800 clamp(3.5rem, 2.5rem + 5vw, 7rem)/.95 var(--f-h); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.big3 span{ display:block; margin-top:var(--s1); font-size:16px; line-height:1.5; color:var(--muted); max-width:26ch }
@media (max-width:760px){ .big3{ grid-template-columns:minmax(0,1fr) } }
.price{ border-top:1.5px solid var(--ink); padding-top:var(--s2) }
.price .num{ display:block } .price .cap{ margin-top:var(--s1) } .price p{ margin-top:var(--s2); color:var(--muted) }

/* ---------- шаги ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--s3) var(--gutter); counter-reset:s }
.steps--4{ grid-template-columns:repeat(4, minmax(0,1fr)) }
.steps li{ counter-increment:s; border-top:1.5px solid var(--ink); padding-top:var(--s2) }
.steps li::before{ content:counter(s, decimal-leading-zero); display:block; font:500 12px/1.7 var(--f-m); letter-spacing:.12em; color:var(--orange-text); margin-bottom:var(--s1) }
.steps b{ display:block; font:600 19px/1.3 var(--f-h); margin-bottom:6px }
.steps p{ color:var(--muted) }
@media (max-width:1024px){ .steps--4{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:760px){ .steps--4{ grid-template-columns:minmax(0,1fr) } }
.timeline{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s3) var(--gutter); counter-reset:t; margin-top:var(--s4) }
.timeline div{ counter-increment:t; border-top:1.5px solid var(--ink); padding-top:var(--s2) }
.timeline div::before{ content:counter(t, decimal-leading-zero); display:block; font:500 12px/1.7 var(--f-m); letter-spacing:.12em; color:var(--orange-text); margin-bottom:var(--s1) }
.timeline b{ display:block; font:600 19px/1.3 var(--f-h); margin-bottom:6px }
.timeline p{ color:var(--muted) }
@media (max-width:1024px){ .timeline{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:760px){ .timeline{ grid-template-columns:minmax(0,1fr) } }

/* ---------- таблицы: только горизонтальные линии ---------- */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:var(--s3) }
.table{ width:100%; border-collapse:collapse; min-width:640px }
.table th{ text-align:left; font:500 12px/1.7 var(--f-m); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:0 var(--s2) var(--s1) 0; border-bottom:1.5px solid var(--ink); vertical-align:bottom }
.table td{ padding:var(--s2) var(--s2) var(--s2) 0; border-bottom:1px solid var(--line); vertical-align:top; font-size:16px; line-height:1.5 }
.table td:first-child{ font-weight:600 }
.table th.hl{ color:var(--orange-text) }
.table td.hl{ font-weight:600 }
.table td.r,.table th.r{ text-align:right; font-variant-numeric:tabular-nums }
.table--compact{ min-width:0; max-width:560px }

/* ---------- FAQ ---------- */
.faq{ max-width:840px }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--s3); padding:var(--s2) 0; font:600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.3 var(--f-h) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font:500 24px/1 var(--f-m); color:var(--orange-text); flex:none; margin-top:2px }
.faq details[open] summary::after{ content:"–" }
.faq details > div{ padding:0 0 var(--s3); max-width:70ch; color:var(--muted) }
.faq details > div a{ color:var(--orange-text) }

/* ---------- чек-лист ---------- */
.check{ display:grid; gap:var(--s2); max-width:760px }
.check label{ display:grid; grid-template-columns:24px 1fr; gap:var(--s2); align-items:start; cursor:pointer }
.check input{ appearance:none; -webkit-appearance:none; width:24px; height:24px; margin:3px 0 0; border:1.5px solid var(--ink); border-radius:0; background:var(--paper); cursor:pointer }
.check input:checked{ background:var(--orange); border-color:var(--orange) }
.check__res{ margin-top:var(--s3); font-weight:600; max-width:60ch }

/* ---------- портфолио лидов ---------- */
.pf-chips{ display:flex; flex-wrap:wrap; gap:var(--s1); margin:var(--s3) 0 }
.pf-chip{ min-height:40px; padding:0 14px; border:1.5px solid var(--ink); background:transparent; font:600 15px/1 var(--f-t); cursor:pointer; border-radius:0; transition:background-color .16s var(--ease), color .16s var(--ease) }
.pf-chip:hover{ color:var(--orange-text); border-color:var(--orange-text) }
.pf-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.pf-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gutter) }
.pf{ border:1px solid var(--line); padding:var(--s3); display:grid; gap:var(--s1); align-content:start }
.pf[hidden]{ display:none }
.pf__top{ display:flex; justify-content:space-between; gap:var(--s2); align-items:baseline }
.pf__name{ font:600 19px/1.3 var(--f-h) }
.pf__niche{ font:500 12px/1.7 var(--f-m); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:right }
.pf__q{ font-size:16px; line-height:1.55 }
.pf__c{ display:flex; gap:8px; align-items:center; font:500 12px/1.7 var(--f-m); letter-spacing:.06em }
.pf__c::before{ content:""; width:6px; height:6px; background:var(--orange); flex:none }
.pf__rec{ font:400 12px/1.7 var(--f-m); letter-spacing:.06em; color:var(--muted) }
.pf-more{ margin-top:var(--s3); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:center }
@media (max-width:1024px){ .pf-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:760px){ .pf-grid{ grid-template-columns:minmax(0,1fr) } }

/* ---------- калькулятор ---------- */
.calc{ border:1.5px solid var(--ink); padding:var(--s3); margin-top:var(--s3) }
.calc__row{ display:flex; justify-content:space-between; gap:var(--s2); align-items:baseline }
.calc__row b{ font:800 28px/1 var(--f-h); font-variant-numeric:tabular-nums }
.calc input[type=range]{ width:100%; margin:var(--s2) 0; accent-color:var(--orange); height:24px; cursor:pointer }
.calc__out{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s3) var(--gutter); margin-top:var(--s2) }
.calc__out b{ display:block; font:800 clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem)/1 var(--f-h); letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.calc__out small{ display:block; margin-top:6px; font-size:16px; line-height:1.45; color:var(--muted) }
.calc__note{ margin-top:var(--s2); font-size:16px; color:var(--muted) }
@media (max-width:760px){ .calc__out{ grid-template-columns:minmax(0,1fr) } }

/* ---------- кейсы, отзывы, услуги ---------- */
.case{ border-top:1.5px solid var(--ink); padding-top:var(--s2); display:grid; gap:var(--s2); align-content:start }
.case__sub{ color:var(--muted) }
.case__nums{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s2) var(--s2) }
.case__nums b{ display:block; font:700 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.15 var(--f-h); letter-spacing:-.01em; font-variant-numeric:tabular-nums }
.case__nums span{ display:block; margin-top:2px; font-size:16px; line-height:1.4; color:var(--muted) }
.case__p{ color:var(--muted) }
.quote{ border-top:1.5px solid var(--ink); padding-top:var(--s2); display:grid; gap:var(--s2); align-content:start }
.quote p{ font-size:16px; line-height:1.6 }
.quote footer{ font-weight:600; font-size:16px }
.quote footer span{ display:block; font:500 12px/1.7 var(--f-m); letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.svc{ border:1.5px solid var(--ink); padding:var(--s3); display:grid; gap:var(--s2); align-content:start }
.svc .kicker{ margin:0 }
.svc p{ color:var(--muted) }
.svc__meta{ display:grid; gap:4px; font:500 12px/1.7 var(--f-m); letter-spacing:.08em; text-transform:uppercase }
.svc .btn{ justify-self:start; margin-top:var(--s1) }
.author{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--s4) var(--gutter); align-items:center }
.author img{ width:100%; aspect-ratio:4/5; object-fit:cover }
.author ul{ display:grid; gap:var(--s1); margin-top:var(--s3) }
.author blockquote{ margin:var(--s3) 0 0; padding-left:var(--s3); border-left:1.5px solid var(--orange); font:600 19px/1.45 var(--f-t); max-width:56ch }
@media (max-width:760px){ .author{ grid-template-columns:minmax(0,1fr) } .author img{ max-width:360px } }
.magnet{ border:1.5px solid var(--ink); padding:var(--s4); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s3) var(--s4); align-items:center }
.magnet .h2{ max-width:none }
.magnet .lead{ margin-top:var(--s2) }
.magnet__fine{ margin-top:var(--s2); font-size:16px; color:var(--muted) }
@media (max-width:1024px){ .magnet{ grid-template-columns:minmax(0,1fr); padding:var(--s3) } }
.fork .card--key .h4{ position:relative; padding-left:18px }
.fork .card--key .h4::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; background:var(--orange) }
.photo{ width:100%; aspect-ratio:3/2; object-fit:cover }

/* ---------- подвал (тёмная тема разрешена для подвала) ---------- */
.footer{ background:var(--night); color:var(--chalk); padding-block:var(--s5) var(--s4) }
.footer a{ color:inherit; text-decoration-color:rgba(245,242,238,.35) }
.footer a:hover{ text-decoration-color:var(--orange) }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--s4) var(--gutter) }
.footer .cap{ color:rgba(245,242,238,.6); margin-bottom:var(--s2) }
.footer ul{ display:grid; gap:var(--s1) }
.footer p{ color:rgba(245,242,238,.8); max-width:36ch }
.footer .logo img{ height:24px }
.footer__phone{ font:700 22px/1.2 var(--f-h); text-decoration:none; display:inline-block; margin-top:var(--s2) }
.footer__bottom{ margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid rgba(245,242,238,.18); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); font-size:16px; color:rgba(245,242,238,.7) }
@media (max-width:1024px){ .footer__grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:760px){ .footer__grid{ grid-template-columns:minmax(0,1fr) } body{ padding-bottom:72px } }

/* ---------- мобильная панель действий ---------- */
.mbar{ display:none }
@media (max-width:760px){
  .mbar{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s1); position:fixed; left:0; right:0; bottom:0; z-index:40; padding:var(--s1) var(--margin) calc(var(--s1) + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line) }
  .mbar .btn{ min-height:48px; padding:0 var(--s2); font-size:15px }
}

/* ---------- появление блоков: +18 px снизу, 700 мс, один раз ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.is-in{ opacity:1; transform:none }
.no-js .reveal{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* ---------- служебные страницы ---------- */
.prose{ max-width:72ch }
.prose h2{ font:700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--f-h); margin:var(--s4) 0 var(--s2) }
.prose h3{ font:600 1.25rem/1.3 var(--f-h); margin:var(--s3) 0 var(--s1) }
.prose p,.prose li{ margin-bottom:var(--s2) }
.prose ul,.prose ol{ padding-left:22px; margin-bottom:var(--s2) }
.prose ul{ list-style:square } .prose ol{ list-style:decimal }
.prose a{ color:var(--orange-text) }
@media print{ .header,.footer,.mbar,.form{ display:none } }