:root{
  --bg:#FFFFFF; --cell:#FDFBF7; --cell-hover:#F7EEDC; --line:#E4D9C4;
  --ink:#1F1A17; --muted:#79695A;
  --red:#A50100; --red-hover:#870000; --gold:#C9A227;
  --display:'Oswald',sans-serif; --body:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;transition:background-color .25s ease,color .25s ease}
body,header,.cell,.bento,footer,.form input,.form select,.btn-line,.burger,.tag,.svc .tag{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;font-weight:700}
h1{font-size:clamp(44px,4.5vw,64px);line-height:1.02}
h2{font-size:36px;line-height:1.05}
h3{font-size:19px;line-height:1.15;font-weight:600}
.wrap{max-width:100%;margin:0 auto;padding:0 48px}
.kicker{font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.gold-note{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.gold-note::before{content:"";width:8px;height:8px;background:var(--gold);flex:none}

/* бенто: единственный разрешённый способ общих границ */
.bento{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.bento>*{min-width:0}
.bento--seamtop{border-top:none}
.cell{background:var(--cell);padding:32px;transition:background .2s}
.cell:hover{background:var(--cell-hover)}
.cell--static:hover{background:var(--cell)}
.cell--compact{padding:24px}
.cell--big{padding:48px}
.cell-flex{display:flex;flex-direction:column}
.cell-flex .bottom{margin-top:auto;padding-top:16px}
.num{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--red)}

/* фото-ячейки */
.photo-cell{position:relative;padding:0;overflow:hidden;min-height:280px;display:block}
.photo-cell img,.photo-cell video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:grayscale(.85) contrast(1.05);transition:filter .4s}
a.photo-cell:hover img,a.photo-cell:hover video{filter:grayscale(0) contrast(1.02)}
a.photo-cell.photo-cell--static:hover img,a.photo-cell.photo-cell--static:hover video{filter:grayscale(.85) contrast(1.05)}
/* страницы, где вообще все фото должны оставаться без окрашивания при наведении */
body.no-tint .wcard:hover .shot img,body.no-tint a.photo-cell:hover img,body.no-tint a.photo-cell:hover video,body.no-tint .dir:hover .dir-shot img,body.no-tint .doc-cell:hover img{filter:grayscale(.85) contrast(1.05);transform:none}

/* модальное окно заявки */
.cta-dialog{position:fixed;inset:0;margin:auto;border:none;padding:0;background:var(--cell);width:min(480px,92vw);max-height:88vh;overflow:auto}
.cta-dialog::backdrop{background:rgba(8,8,9,.72)}
.cta-dialog .cta-form{padding:32px;position:relative}
.cta-dialog-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;z-index:2}
.cta-dialog-close:hover{background:var(--ink);color:var(--bg)}
/* на телефоне — шторка снизу по высоте контента: 100vh давал полупустой экран и прыгал под адресной строкой Safari */
@media(max-width:560px){.cta-dialog{width:100vw;height:auto;max-height:88dvh;inset:auto 0 0 0;margin:0}.cta-dialog .cta-form{padding:24px 20px 28px}}

/* лайтбокс для сканов документов */
.lightbox-dialog{position:fixed;inset:0;margin:auto;border:none;padding:0;background:transparent;max-width:94vw;max-height:94vh;width:fit-content;height:fit-content}
.lightbox-dialog::backdrop{background:rgba(8,8,9,.92)}
.lightbox-dialog img{display:block;max-width:94vw;max-height:94vh;object-fit:contain;cursor:zoom-out}
.mirror{transform:scaleX(-1)}
.photo-cap{position:absolute;left:0;bottom:0;background:var(--cell);border-top:1px solid var(--line);border-right:1px solid var(--line);padding:12px 16px;font-size:13px;color:var(--muted);z-index:2}
.photo-cap b{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:14px;color:var(--ink);letter-spacing:.04em}

/* плейсхолдер по правилам §5 */
.ph{border:1px dashed #C9BCA3;background:repeating-linear-gradient(45deg,transparent 0 12px,#F2EADA 12px 24px);display:grid;place-items:center;min-height:280px;padding:24px;transition:border-color .25s ease}
.ph span{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.8}

/* кнопки: паддинг 16×28 зафиксирован §6 дизайн-правил (28 — намеренно вне шкалы 8) */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:16px 28px;cursor:pointer;border:none;transition:background .2s,color .2s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hover)}
.btn-line{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--bg)}

/* прогресс + шапка */
#progress{position:fixed;top:0;left:0;height:3px;background:var(--red);width:0;z-index:99}
header{position:sticky;top:0;z-index:50;background:var(--cell);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;height:92px;gap:32px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.06em;text-transform:uppercase}
.logo-mark{width:42px;flex:none;display:grid;place-items:center}
.logo-mark img{width:100%;height:auto;display:block}
.logo small{display:block;margin-top:4px;font-family:var(--body);font-weight:600;font-size:8.5px;letter-spacing:.14em;color:var(--muted);white-space:nowrap;line-height:1.4}
.logo>span:last-child{line-height:1.05}
.nav-links{display:flex;gap:24px;font-size:14.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-left:auto}
.nav-links a{padding:8px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;color:var(--ink)}
.nav-links a:hover{border-color:var(--red);color:var(--red)}
.nav-phone{font-weight:700;font-size:19px;white-space:nowrap;text-align:right}
.nav-phone span{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.nav-phone-icon{display:none}
@media(max-width:1280px){.nav-links{display:none}}

/* герой: видео на весь экран */
.hero-video{position:relative;overflow:hidden;min-height:max(560px,calc(100vh - 92px));display:flex;align-items:center;border-bottom:1px solid var(--line)}
.hero-video-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.85) contrast(1.05)}
.hero-video-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,9,.85) 0%,rgba(8,8,9,.5) 48%,rgba(8,8,9,.14) 78%)}
.hero-video-inner{position:relative;z-index:2;width:100%;padding-top:64px;padding-bottom:64px}
.hero-video-inner .kicker{margin-bottom:8px;display:block}
.hero-video-inner h1{margin-bottom:12px;color:#F5F3EE}
.hero-video-inner h1 em{font-style:normal;color:var(--red)}
.hero-video-inner .hero-sub{color:#C7CCD3}
.hero-video-inner .btn-line{border-color:#F5F3EE;color:#F5F3EE}
.hero-video-inner .btn-line:hover{background:#F5F3EE;color:#101114}
.hero-video-inner .hero-badges{color:#9BA3AD}
.hero-video-inner .crumbs{color:#B9C0C7}
.hero-video.hero-video--page{min-height:640px;align-items:flex-start}
.hero-video--page .hero-video-inner{padding-top:48px;padding-bottom:48px}
.hero-video--page .hero-video-inner h1{font-size:clamp(38px,4vw,56px)}
.hero-video--page .hero-video-inner .hero-sub{font-size:19px;max-width:640px}
.hero-sub{color:var(--muted);font-size:19px;line-height:1.55;max-width:600px;margin-bottom:32px}
.cta-row{display:flex;gap:16px;flex-wrap:wrap}

/* десктоп: видео на весь экран под шапкой (92px) */
@media(min-width:1021px){
  .hero-video-inner h1{font-size:clamp(48px,5vw,76px)}
  .hero-video-inner .hero-sub{font-size:21px;max-width:640px}
}
/* на невысоких окнах (реальный браузер с панелями, не голый vh) герой компактнее */
@media(min-width:1021px) and (max-height:920px){
  /* высоту НЕ обнуляем: это видео-полотно, схлопнутый кадр читается как баг.
     На низких окнах ужимаем только типографику и внутренние отступы. */
  .hero-video{min-height:calc(100vh - 92px)}
  .hero-video-inner{padding-top:24px;padding-bottom:24px}
  .hero-video-inner h1{font-size:clamp(30px,3.6vw,44px);margin-bottom:8px}
  .hero-video-inner .hero-sub{font-size:15px;line-height:1.4;margin-bottom:16px}
  .cta-row{gap:12px}
  .cta-row .btn{padding:12px 24px}
  .stat{padding:12px 16px}
  .stat b{font-size:26px;margin-bottom:4px}
  .stat>span{font-size:11px}
}
@media(max-width:1020px){
  /* боковые поля по ступеням: 48 (десктоп) → 32 (планшет) → 20 (мобайл ≤700) */
  .wrap{padding:0 32px}
  .f-grid{grid-template-columns:1fr 1fr;gap:32px}
  .hero-video{min-height:560px}
  .hero-video-inner{padding-top:48px;padding-bottom:48px}
}

/* статы под героем */
.stat{padding:24px}
.stat b{font-family:var(--display);font-weight:700;font-size:44px;line-height:1;display:block;margin-bottom:8px;color:var(--red)}
.stat b i{font-style:normal;color:var(--red);font-size:18px;vertical-align:baseline}
.stat b span{font-size:inherit;color:inherit;font-family:inherit}
.stat>span{font-size:12.5px;color:var(--muted)}

/* секции-полотна: между полотнами 96px (§3). Дублируется инлайном в HTML — инлайн можно убрать */
.canvas{margin-bottom:0}
.canvas + .canvas{margin-top:96px}
.sec-cell h2{margin-bottom:12px}
.sec-cell .kicker{display:block;margin-bottom:8px}
.sec-cell p{color:var(--muted);max-width:560px}

/* направления */
.dir-shot{position:relative;aspect-ratio:4/3;overflow:hidden;margin:-32px -32px 24px;background:var(--cell-hover)}
.dir-shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:grayscale(.85) contrast(1.05);transition:filter .4s}
.dir:hover .dir-shot img{filter:grayscale(0) contrast(1.02)}
.dir-shot.ph{display:grid;place-items:center;padding:24px}
.dir h3{margin:8px 0 12px}
.dir p{font-size:13px;color:var(--muted)}
.dir .price{font-family:var(--display);font-weight:700;font-size:24px}
.dir .price small{font-family:var(--body);font-weight:400;font-size:12px;color:var(--muted)}
.dir .go{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--red)}

/* услуги охраны */
.svc{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:start}
.svc>div{min-width:0}
.svc h3{margin-bottom:12px}
.svc p{font-size:13px;color:var(--muted)}
.svc .tag{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);padding:8px 12px;white-space:nowrap}
@media(max-width:560px){
  .svc{grid-template-columns:44px 1fr}
  .svc .tag{grid-column:2;justify-self:start}
}

/* тир */
.pr-cell .nm{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.05em;margin-bottom:12px}
.pr-cell .pr{font-family:var(--display);font-weight:700;font-size:30px}
.pr-cell p{font-size:13px;color:var(--muted);margin-top:12px}

/* тикер */
.ticker-band{background:var(--red);color:#fff;overflow:hidden;padding:12px 0;border:1px solid var(--line);border-top:none}
.ticker{display:flex;gap:48px;white-space:nowrap;font-family:var(--display);text-transform:uppercase;font-weight:600;letter-spacing:.1em;font-size:15px;animation:tick 34s linear infinite;width:max-content}
.ticker span::after{content:"//";margin-left:48px;opacity:.45}
@keyframes tick{to{transform:translateX(-50%)}}

/* таблица УЦ */
.trow{display:grid;grid-template-columns:1.2fr 1.6fr .6fr;gap:16px;align-items:baseline}
.trow.head{background:var(--cell-hover);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.trow .prog{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.03em}
.trow .who{font-size:13px;color:var(--muted)}
.trow .cost{font-family:var(--display);font-weight:700;font-size:17px;text-align:right;white-space:nowrap}
@media(max-width:760px){.trow{grid-template-columns:1fr}.trow .cost{text-align:left}.trow.head{display:none}}

/* полиграф */
.poly-big{font-family:var(--display);font-weight:700;font-size:clamp(56px,5.5vw,84px);line-height:1;color:var(--red)}
.poly-big small{font-size:24px;color:var(--ink)}
.list{list-style:none;display:flex;flex-direction:column;gap:16px}
.list li{padding-left:16px;position:relative;font-size:14px}
.list li a{color:var(--red);border-bottom:1px solid transparent;transition:border-color .2s}
.list li a:hover{border-bottom-color:var(--red)}
.list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--red)}

/* контакты */
.c-cell b{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.c-cell .v{font-family:var(--display);font-weight:600;font-size:20px;text-transform:uppercase;letter-spacing:.02em}
.c-cell span{font-size:13px;color:var(--muted);display:block;margin-top:4px}
.form input,.form select{width:100%;padding:16px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;margin-bottom:16px;outline:none;transition:border-color .2s;appearance:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-row input{margin-bottom:0}
@media(max-width:560px){.form-row{grid-template-columns:1fr;gap:0}}
.form input:focus,.form select:focus{border-color:var(--red)}
.form input::placeholder{color:#A6987F}
.form select{padding-right:40px;background-repeat:no-repeat;background-position:right 16px center;background-size:12px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%2379695A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form select:invalid{color:#A6987F}
.form select option{color:var(--ink)}
.form .btn{width:100%}
.form small{display:block;text-align:center;color:var(--muted);font-size:11px;margin-top:12px}

/* футер */
footer{border-top:1px solid var(--line);padding:48px 0;font-size:15px;color:var(--muted)}
/* футер: три колонки одной сеткой — заголовки на одной линии, ширины не пляшут по контенту */
.f-grid{display:grid;grid-template-columns:1.4fr 1.1fr 1fr;gap:48px;margin-bottom:40px}
.f-links{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.f-addr{margin-top:16px}
.f-col b{color:var(--ink);font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:14px;letter-spacing:.08em;display:block;margin-bottom:16px}
.f-col div{margin-bottom:8px}
.f-col a:hover{color:var(--ink)}
.f-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}

/* сетки-раскладки */
.span2{grid-column:span 2}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-hero-sec{grid-template-columns:1.2fr .8fr}
/* блок «Нам доверяют»: грамотам нужно больше ширины, иначе документ не читается */
.bento--gram{grid-template-columns:.95fr 1.05fr}
.g-split{grid-template-columns:1fr 1fr}
@media(max-width:1020px){.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:1fr}.g-hero-sec,.g-split{grid-template-columns:1fr}.span2{grid-column:auto}}
@media(max-width:560px){.g-4{grid-template-columns:1fr}.g-2{grid-template-columns:1fr}}

/* reveal: только fade (§6) */
.rv{opacity:0;transition:opacity .5s ease}
.rv.on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transition:none}
  .ticker{animation:none}
  html{scroll-behavior:auto}
}

/* ── внутренние страницы ── */
.nav-links a.active{border-color:var(--red);color:var(--ink)}
/* шапка страницы: 48 сверху (воздух после хедера), 32 снизу — заголовок ближе
   к своему контенту, чем к соседнему полотну (§3, закон близости) */
.page-hero{padding:48px 0 32px;max-width:760px}
.page-hero .kicker{margin-bottom:8px;display:block}
.page-hero h1{font-size:clamp(38px,4vw,56px);margin-bottom:12px}
.page-hero .hero-sub{margin-bottom:0}
.page-hero .cta-row{margin-top:32px}

/* карточка арсенала/техники: фото сверху, текст снизу */
.wcard{padding:0;display:flex;flex-direction:column}
.wcard .shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cell-hover)}
.wcard .shot.ph{min-height:0}
.wcard .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.85) contrast(1.05);transition:filter .4s}
.wcard:hover .shot img{filter:grayscale(0) contrast(1.02)}
/* паддинг текстовой части = паддинг обычной ячейки (32), как в .dir на главной */
.wcard .body{padding:32px;display:flex;flex-direction:column;flex:1;border-top:1px solid var(--line)}
.wcard .num{margin-bottom:8px}
.wcard h3{margin-bottom:12px;font-size:17px}
.wcard p{font-size:13px;color:var(--muted)}
.wcard .meta{margin-top:auto;padding-top:16px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}

/* грамоты и дипломы */
.doc-cell{padding:0;overflow:hidden;position:relative;aspect-ratio:3/4;display:block;background:var(--cell-hover)}
.doc-cell img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.doc-cell:hover img{transform:scale(1.04)}

/* горизонтальная лента дипломов и грамот */
.doc-scroll{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.doc-scroll .doc-cell{flex:0 0 200px;scroll-snap-align:start}
@media(max-width:560px){.doc-scroll .doc-cell{flex:0 0 150px}}

/* логотипы клиентов */
.client-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)}
.client-cell{flex:1 1 140px;background:#fff;display:flex;align-items:center;justify-content:center;padding:20px;min-height:96px}
.client-cell img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.client-cell:hover img{filter:grayscale(0);opacity:1}

/* карусель лицензий */
.lic-wrap{position:relative}
.lic-scroll{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.lic-card{flex:0 0 calc(25% - .75px);display:flex;flex-direction:column;scroll-snap-align:start;background:var(--cell)}
.lic-card .shot{position:relative;aspect-ratio:3/4;overflow:hidden;background:#fff;display:block}
.lic-card .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px;filter:none}
.lic-card .body{padding:20px;border-top:1px solid var(--line);flex:1}
.lic-card h3{font-size:14px;margin-bottom:6px}
.lic-card p{font-size:12px;color:var(--muted)}
.lic-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.lic-arrow{width:44px;height:44px;border:1px solid var(--line);background:var(--cell);color:var(--ink);font-size:20px;cursor:pointer;transition:background .2s,color .2s}
.lic-arrow:hover{background:var(--ink);color:var(--bg)}
@media(max-width:900px){.lic-card{flex:0 0 calc(50% - .5px)}}
@media(max-width:560px){.lic-card{flex:0 0 84%}}

/* текстовый блок из старого сайта */
.prose{max-width:720px}
.prose p{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--ink)}

/* лента добрых дел */
.deed{display:grid;grid-template-columns:1fr;gap:0}
.deed .body{padding:32px}

/* ── мобайл ≤700: единая левая кромка — 20px от края экрана у всего текста ── */
@media(max-width:700px){
  .wrap{padding:0}
  header .nav{padding:0 20px;gap:12px}
  .logo small{display:none}
  .logo>span:last-child{line-height:1}
  /* телефон в шапке заменяется на иконку-кнопку — тексту номера тесно рядом с логотипом
     и бургером, а сжатие соседних flex-элементов сплющивало логотип (не трогать высоту
     логотипа тут, это отдельный .logo--original ниже) */
  .nav-phone{font-size:13px;margin-left:auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--line);flex:none}
  .nav-phone-icon{display:block;color:var(--ink)}
  .nav-phone span{display:none}
  .cell,.cell--big,.cell--compact{padding:20px}
  .wcard .body,.deed .body{padding:20px}
  /* ячейка-карточка с фото остаётся без паддинга (фото в край): правило обязано идти
     ПОСЛЕ .cell{padding:20px} — иначе мобильное правило перебивает .wcard{padding:0} */
  .cell.wcard{padding:0}
  .page-hero,.hero-video-inner{padding-left:20px;padding-right:20px}
  /* section-head (кикер+h2 перед сеткой) — единственное место, где его забыли добавить
     в общий список отступов при .wrap{padding:0}, из-за чего текст лип к краю экрана */
  .section-head{padding-left:20px;padding-right:20px}
  .page-hero{padding-top:32px;padding-bottom:24px}
  .bento{border-left:none;border-right:none}
  .ticker-band{border-left:none;border-right:none}
  /* плашка-подпись примыкает к краю экрана — горизонтальный паддинг держит текст на общих 20px */
  .photo-cap{border-right:1px solid var(--line);padding:12px 20px}
  /* .wrap на телефоне без паддинга, поэтому блокам футера он возвращается поимённо — логотип забыли, и он висел в край экрана */
  footer .f-logo,footer .f-grid,footer .f-bottom{padding-left:20px;padding-right:20px}
  .f-grid{grid-template-columns:1fr;gap:32px}
  .sec-cell p,.prose{max-width:none}
}
.trow--2{grid-template-columns:1fr auto}
@media(max-width:760px){.trow--2{grid-template-columns:1fr}}

/* ── конверсионные фиксы 24.07 ── */
.stat b{white-space:nowrap}
.stat b a{color:inherit}

/* переключатель темы */

/* бургер-меню. gap:5px — геометрия иконки (3 полосы по 2px = 16px), а не отступ вёрстки;
   значение связано с translateY(7px) в состоянии .open — менять только парой */
.burger{display:none;background:none;border:1px solid var(--line);width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1280px){
  .burger{display:flex}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:92px;left:0;right:0;flex-direction:column;gap:0;background:var(--cell);border-bottom:1px solid var(--line);padding:8px 20px 16px;margin:0;z-index:60}
  .nav-links.open a{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
  .nav-links.open a:last-child{border-bottom:none}
  .nav-phone{margin-left:16px}
}

/* CTA-полоса в конце продуктовых страниц */
.cta-band{background:var(--red);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:48px;flex-wrap:wrap}
.cta-band h2{font-size:28px}
.cta-band p{color:rgba(255,255,255,.85);font-size:14px;margin-top:4px}
.cta-band .btns{display:flex;gap:16px;flex-wrap:wrap}
.cta-band .btn-white{border:1px solid #fff;color:#fff}
.cta-band .btn-white:hover{background:#fff;color:var(--red)}
.cta-band .btn-solid{background:#fff;color:var(--red)}
.cta-band .btn-solid:hover{background:var(--ink);color:#fff}
@media(max-width:700px){.cta-band{padding:24px 20px}}

/* шаги покупки */
.steps{counter-reset:s}
.steps .cell{position:relative}
.steps .cell::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:700;font-size:32px;color:var(--red);display:block;margin-bottom:8px}
footer{margin-top:96px}

/* открывающая заставка */
#intro{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:transform .7s cubic-bezier(.22,1,.36,1)}
#intro.out{transform:translateY(-100%)}
#intro .intro-mark{width:72px;opacity:0;transform:scale(.6) rotate(-8deg);animation:introMark .7s cubic-bezier(.22,1,.36,1) .1s forwards}
#intro .intro-mark img{width:100%;height:auto;display:block}
#intro .intro-name{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(14px);animation:introText .6s cubic-bezier(.22,1,.36,1) .5s forwards}
#intro .intro-tag{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);opacity:0;transform:translateY(10px);animation:introText .6s cubic-bezier(.22,1,.36,1) .65s forwards}
#intro .intro-bar{width:170px;height:2px;background:var(--line);margin-top:8px;overflow:hidden}
#intro .intro-bar span{display:block;height:100%;width:0;background:var(--red);animation:introBar 1.3s cubic-bezier(.65,0,.35,1) .3s forwards}
@keyframes introMark{to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes introText{to{opacity:1;transform:translateY(0)}}
@keyframes introBar{to{width:100%}}
@media(prefers-reduced-motion:reduce){#intro{display:none}}

/* ── мобильная шапка после редизайна 25.07 (лого 42px + тумблер темы не влезали в 390) ── */
@media(max-width:700px){
  /* поле 20px = левая кромка контента; ужимаются лого/иконки, но не отступ от края */
  header .nav{padding:0 20px;gap:8px}
  .logo{font-size:18px;gap:8px}
  .logo-mark{width:32px}
  .nav-phone{font-size:12.5px}
  .burger{width:40px;height:40px;flex:none}
  /* dir-shot: вынос фото за ячейку под мобильный паддинг 20 */
  .dir-shot{margin:-20px -20px 16px}
}
/* тизер грамот на главной */
/* тизер грамот — ячейка бенто: полоса на всю высоту соседнего текстового блока,
   поэтому плитки тянутся по высоте, а не живут своей пропорцией 3:4 (иначе снизу дыра) */
.gram-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);height:100%}
.gram-teaser .doc-cell{aspect-ratio:auto;height:100%;min-height:240px;background:var(--cell-hover)}
/* тизер: грамота показывается целиком — узкая ячейка иначе срезала бы поля и края документа */
.gram-teaser img{object-fit:contain;padding:8px}
/* грамот три: в двух колонках четвёртая ячейка оставалась пустой дырой — держим их одним рядом */
@media(max-width:560px){.gram-teaser{grid-template-columns:repeat(3,1fr)}.gram-teaser .doc-cell{min-height:200px}}
.gram-teaser .doc-cell{min-width:0}
.gram-teaser img{width:100%;height:100%;min-width:0}
/* мобильные заголовки: длинные слова («благодарственных») не должны распирать сетку */
h1,h2,h3{overflow-wrap:break-word}
@media(max-width:560px){h2{font-size:27px}}
/* узкие телефоны ≤380: шапка ещё компактнее — ужимаем лого и иконки,
   но поля (20px) и зазоры (8px) остаются общими с остальным мобайлом */
@media(max-width:380px){
  .logo{font-size:16px}
  .logo-mark{width:28px}
  .nav-phone{font-size:11.5px}
  .burger{width:36px;height:36px}
}

/* бейджи героя и лого футера (правки 26.07) */
.hero-badges{display:flex;gap:8px 24px;flex-wrap:wrap;margin-top:32px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-badges span{display:flex;align-items:center;gap:8px}
.hero-badges span::before{content:"";width:6px;height:6px;background:var(--red);flex:none}
.f-logo{display:flex;align-items:center;gap:12px;margin-bottom:24px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.f-logo small{display:block;font-family:var(--body);font-weight:500;font-size:10px;letter-spacing:.12em;color:var(--muted)}

/* схема пультовой охраны */
.scheme-cell{position:relative}
.scheme-cell svg{color:var(--red);margin-bottom:16px}
.scheme-cell h3{margin-bottom:12px;font-size:16px}
.scheme-cell p{font-size:13px;color:var(--muted)}
.scheme-cell::after{content:"→";position:absolute;top:24px;right:16px;font-family:var(--display);font-weight:700;font-size:20px;color:var(--red);opacity:.55}
.scheme-cell:last-child::after{content:""}
@media(max-width:1020px){.scheme-cell::after{content:"↓";top:auto;bottom:16px;right:16px}}
/* хлебные крошки */
.crumbs{font-size:11.5px;color:var(--muted);margin-bottom:16px;display:flex;gap:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.crumbs a:hover{color:var(--red)}
.crumbs span{opacity:.5}

/* ===== мобильные правки 12.08 ===== */
/* скрим героя: слева-направо он гасит фото только на широком экране, на телефоне текст уезжает на светлую часть кадра */
@media(max-width:760px){
.hero-video-scrim{background:linear-gradient(180deg,rgba(8,8,9,.74) 0%,rgba(8,8,9,.56) 42%,rgba(8,8,9,.86) 100%)}
.hero-badges,.hero-video-inner .hero-badges{font-size:12.5px;color:#B9C0C7}
.hero-video-inner .kicker{font-size:12.5px;letter-spacing:.12em}
.crumbs,.hero-video-inner .crumbs{font-size:12.5px;color:#CBD1D7}
}
/* по телефонам и почте звонят с мобилы — палец должен попадать (44px по HIG) */
@media(max-width:700px){
a[href^="tel:"],a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
.nav-phone{min-height:auto}
.f-links a{display:flex;align-items:center;min-height:44px}
.f-col div{margin-bottom:0}
}
/* карта на телефоне ловила скролл пальцем вместо страницы; маршрут открывается кнопкой выше */
@media(max-width:760px){.cell>iframe{pointer-events:none}}
/* «Контакты» с телефона открывают, чтобы позвонить: сначала номера, потом карта, форма последней */
@media(max-width:760px){
.contacts-flow{display:flex;flex-direction:column}
.contacts-flow>.g-split{order:-1;border-top:1px solid var(--line)}
.contacts-flow>.g-split>div:last-child{order:-1}
}

/* оригинальный логотип «Одиссей» (цветной знак со старого сайта) */
.logo--original{display:flex;align-items:center;flex:none}
.logo--original img{height:46px;width:auto;display:block}
@media(max-width:700px){.logo--original img{height:38px}}
@media(max-width:380px){.logo--original img{height:32px}}

/* герой «О нас»: снимок ландшафтный, лицо стоит высоко в кадре — при cover+height:100%
   вертикальный object-position не работает (кадр всегда впритык по высоте, крутить нечего),
   поэтому даём картинке запас по высоте и сдвигаем его вверх, чтобы лицо ушло из-под текста */
@media(max-width:700px){
  .hero-onas .hero-video-media{height:148%;top:-29%}
}
/* оригинальный логотип на заставке загрузки (эмблема по центру) */
.intro-mark--original{margin-bottom:24px}
.intro-mark--original img{width:auto;height:170px;display:block;margin:0 auto}
/* оригинальный логотип в подвале */
.f-logo--original img{height:52px;width:auto;display:block}

/* ===== Команда (карточки сотрудников на «Контактах») ===== */
/* 6 в ряд — 12 сотрудников укладываются в 2 ровных ряда, карточка компактнее */
.team-grid{grid-template-columns:repeat(6,1fr)}
.team-card{padding:0;display:flex;flex-direction:column;background:var(--cell)}
.team-photo{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cell-hover)}
.team-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(.9) contrast(1.03);transition:filter .4s}
.team-card:hover .team-photo img{filter:grayscale(0) contrast(1.02)}
.team-body{padding:14px;display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line)}
.team-name{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:.02em;line-height:1.2}
.team-role{font-size:12px;color:var(--muted);line-height:1.3}
.team-phone{margin-top:6px;font-weight:700;font-size:14px;color:var(--ink)}
.team-phone:hover{color:var(--red)}
@media(max-width:1200px){.team-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1020px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.team-grid{grid-template-columns:repeat(2,1fr)}.team-phone{min-height:auto}}
@media(max-width:380px){.team-grid{grid-template-columns:1fr 1fr}.team-body{padding:14px}.team-name{font-size:13px}}
.section-head{margin-bottom:32px}
.section-head .kicker{display:block;margin-bottom:8px}

/* ===== Полоса графика работы тира (акцент: заказчик просил, чтобы её видели все) ===== */
.hours-band{background:var(--red);color:#fff;border:1px solid var(--line);border-top:none;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hb-label{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px}
.hb-main{display:block}
.hb-days,.hb-time{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.1;letter-spacing:.01em}
.hb-days{display:inline}
.hb-time{display:inline;margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.4)}
.hb-side{text-align:right;display:flex;flex-direction:column;gap:6px}
.hb-note{font-size:14px;color:rgba(255,255,255,.88)}
.hb-phone{font-family:var(--display);font-weight:700;font-size:22px;color:#fff;white-space:nowrap}
.hb-phone:hover{color:#fff;text-decoration:underline}
@media(max-width:820px){
  .hours-band{padding:24px 20px;flex-direction:column;align-items:flex-start;gap:16px}
  .hb-days,.hb-time{font-size:24px}
  .hb-time{display:block;margin-left:0;padding-left:0;border-left:none;margin-top:2px}
  .hb-side{text-align:left;align-items:flex-start}
}

/* карточка арсенала без фото — пока заказчик не передал кадр */
.wcard .shot--soon{display:flex;align-items:center;justify-content:center;background:var(--cell-hover);background-image:repeating-linear-gradient(-45deg,transparent,transparent 9px,rgba(0,0,0,.035) 9px,rgba(0,0,0,.035) 18px)}
.wcard .shot--soon span{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ===== Документы и материалы (учебный центр) ===== */
.doc-head{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:.14em;color:var(--muted);background:var(--cell-hover)}
.doc-row{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;background:var(--cell);color:var(--ink);transition:background .2s}
.doc-row:hover{background:var(--cell-hover)}
.doc-row:hover .doc-name{color:var(--red)}
.doc-ext{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;color:#fff;background:var(--red);padding:5px 0;text-align:center}
.doc-name{font-size:15px;line-height:1.35}
.doc-size{font-size:12px;color:var(--muted);white-space:nowrap}
/* ===== Материалы и документы: группы раскрываются по клику ===== */
.doc-group{border:1px solid var(--line);border-top:none}
.doc-group summary{display:grid;grid-template-columns:1fr auto 14px;gap:14px;align-items:center;cursor:pointer;list-style:none}
.doc-group summary::-webkit-details-marker{display:none}
.doc-group summary::marker{content:''}
.doc-group summary:hover{background:var(--line)}
.doc-count{font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}
.doc-chev{color:var(--muted);transition:transform .25s ease}
.doc-group[open] .doc-chev{transform:rotate(180deg)}
/* список внутри группы: свои границы не нужны — рамку держит .doc-group */
.doc-group .doc-list{border:none;border-top:1px solid var(--line)}
@media(prefers-reduced-motion:no-preference){
  .doc-group[open] .doc-list{animation:docReveal .22s ease-out}
}
@keyframes docReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:560px){
  .doc-group summary{gap:10px}
  .doc-count{display:none}
}

@media(max-width:560px){
  .doc-row{grid-template-columns:52px 1fr;gap:12px}
  .doc-size{grid-column:2;font-size:11px}
  .doc-name{font-size:14px}
}

/* ===== Мобильная доводка (17.08) ===== */
@media(max-width:700px){
  /* межсекционный воздух: 96px на телефоне превращает страницу в бесконечную ленту.
     Отступы заданы инлайново в шаблонах — перебиваем адресно по атрибуту */
  section[style*="margin-top:96px"],div[style*="margin-top:96px"]{margin-top:56px!important}
  .canvas + .canvas{margin-top:56px}
}
@media(max-width:560px){
  /* каталоги карточек (арсенал тира, техника музея, добрые дела) — по две в ряд:
     в одну колонку страница тира вырастала до ~37 000 px */
  .bento:has(> .wcard),.bento:has(> .deed){grid-template-columns:1fr 1fr}
  .wcard h3{font-size:14px;margin-bottom:8px}
  .wcard p{font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .wcard .num{font-size:10px}
  .wcard .meta{font-size:11px;padding-top:12px}
}
@media(max-width:380px){
  .wcard .body,.deed .body{padding:14px}
  .wcard h3{font-size:13px}
}

/* ===================================================================
   Раздел «Сведения об образовательной организации» (сайт учебного центра)
   =================================================================== */

/* плитки подразделов */
.uc-index{--r:0}
.uc-tile{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--cell)}
.uc-tile:hover{background:var(--cell-hover)}
.uc-tile:hover .uc-tile-name{color:var(--red)}
.uc-tile-name{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:14px;letter-spacing:.02em;line-height:1.25}
.uc-tile-go{color:var(--muted);font-size:18px;flex:none}

/* строка «подпись → значение»: подпись слева, данные справа */
.uc-row{display:grid;grid-template-columns:minmax(220px,34%) 1fr;gap:20px;padding:14px 0;border-top:1px solid var(--line)}
.uc-row:first-child{border-top:none;padding-top:0}
.uc-row-l{font-size:13.5px;color:var(--muted);line-height:1.45}
.uc-row-v{font-size:15px;line-height:1.55}
.uc-row-v a{color:var(--red);text-decoration:underline;text-underline-offset:2px}

/* карточки внутри таблиц (органы управления, программы, педагоги) */
.uc-unit-name,.uc-prog-name,.uc-person-fio{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.02em;line-height:1.25;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--red)}
.uc-prog-name{text-transform:none;font-size:16px}

/* ссылки на документы */
.uc-docs{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.uc-docs--grid{display:grid;grid-template-columns:1fr 1fr}
.uc-doc{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--cell);font-size:14.5px;line-height:1.4;transition:background .2s}
.uc-doc:hover{background:var(--cell-hover);color:var(--red)}
.uc-doc-i{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.08em;color:#fff;background:var(--red);padding:4px 8px;flex:none}

/* хлебные крошки */
.crumbs{font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--red)}

.uc-content h2{margin:28px 0 12px}
.uc-content p{margin-bottom:12px}

@media(max-width:900px){
  .uc-docs--grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  /* на телефоне подпись встаёт над значением — в две колонки текст не читается */
  .uc-row{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .uc-row-l{font-size:12.5px}
  .uc-row-v{font-size:14.5px}
  .uc-index{grid-template-columns:1fr}
  .uc-tile-name{font-size:13px}
}