:root {
  --font:Arial, Helvetica, sans-serif;
  --font-h1:'Arial Narrow', Arial, Helvetica, sans-serif;
  --biryuza:#0097AC;
  --biryuza-mid:#4FB1C0;
  --text:#273652;
  --h1:#274652;
  --link:#4479b7;
  --line:#d0d5db;
  --line-soft:#c5cbd1;
  --grey:#f1f3f3;
  --head-link:#a8f4ff;
  --phone-lbl:#93eefb;
  --nav-sep:#63bfcc;
  --copy:#c5cacf;
  --side-head:#dee1e5;
  --side-body:#eff1f3;
}

* { margin:0; padding:0; box-sizing:border-box; }
/* запрет автоувеличения шрифтов: встроенный браузер Telegram
   иначе раздувает текст и ломает меню на две строки */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { font:14px/20px var(--font); color:var(--text); background:#fff; -webkit-font-smoothing:antialiased; }
img { border:0; }
a { color:var(--link); text-decoration:underline; }
a:hover { text-decoration:none; }

a:focus-visible, .nav a:focus-visible { outline:2px solid var(--biryuza); outline-offset:2px; border-radius:2px; }
.nav a:focus-visible { outline-color:#fff; }

.container { width:950px; margin:0 auto; padding:0 15px; }
.clear { clear:both; }
hr { border:0; height:1px; background:var(--line); margin-top:22px; }

/* ---------- шапка ---------- */
.topbar { background:var(--biryuza); color:#fff; }
.topbar .container { display:flex; flex-wrap:wrap; align-items:flex-start; gap:30px; padding-top:30px; padding-bottom:18px; }
.logo img { display:block; width:345px; max-width:100%; height:auto; }
.addr { font-size:12px; padding-top:20px; flex:1 1 200px; }
.addr a { color:var(--head-link); }
.addr a:hover { color:var(--head-link); }
.phones { padding-top:12px; }
.phones .lbl { font-size:12px; color:var(--phone-lbl); }
.phones .num { font-size:16px; font-weight:bold; }
.phones .num a { color:#fff; text-decoration:none; }

/* ---------- меню ---------- */
.nav { background:var(--biryuza); border-bottom:4px solid #fff; }
.nav ul { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; }
.nav li + li { border-left:1px solid var(--nav-sep); }
.nav a, .nav span { display:inline-block; color:#fff; text-decoration:none; font-size:18px; font-weight:500; padding:6px 22px 11px; }
.nav a:hover { background:url(pointer.png) center bottom no-repeat; }
.nav .here { background:url(pointer.png) center bottom no-repeat; }

/* ---------- главная ---------- */
.hero { background:linear-gradient(180deg, var(--biryuza-mid), #fff 92%); padding:34px 0 10px; }
h1 { font:38px/1.1 var(--font-h1); color:var(--h1); padding-bottom:23px; }
.kniga { display:block; width:100%; max-width:951px; height:auto; }

.cols { display:flex; flex-wrap:wrap; gap:24px; padding:26px 0 40px; align-items:flex-start; }
.side { width:259px; flex:0 0 auto; }
.main { flex:1 1 380px; }
.boxhead { background:var(--line); font-size:12px; font-weight:500; padding:4px 10px; }
.side .boxhead { background:var(--side-head); }
.side .boxbody { background:var(--side-body); padding:22px 27px 30px; font-size:13px; line-height:18px; }
.main .boxbody { border:1px solid var(--line); border-top:none; padding:30px 30px 30px 37px; }
.boxbody p { padding-bottom:12px; }
.boxbody a { font-size:12px; }
.thumb { display:block; width:108px; height:auto; margin-bottom:8px; border:1px solid var(--line); background:#fff; }

/* ---------- внутренние ---------- */
.inner { background:linear-gradient(180deg, var(--biryuza-mid), var(--grey) 300px); background-color:var(--grey); padding-bottom:0; }
.content { background:#fff; border-bottom:1px solid var(--line-soft); padding:40px 88px 62px 77px; min-height:400px; }
.content h1 { padding-bottom:28px; }
.content h2 { font:600 18px/1.35 var(--font); color:var(--text); padding:20px 0 8px; }
.content p { padding-bottom:12px; }
.content ul { margin:0 0 12px 20px; }
.content li { padding-bottom:6px; }
.two { display:flex; flex-wrap:wrap; gap:46px; }
.two > div { flex:1 1 320px; min-width:0; }
.signature { font-style:italic; padding-top:8px; }
.oldbook { display:block; width:414px; max-width:100%; height:auto; margin:26px 0 0 auto; }

/* услуги */
.service { padding-bottom:6px; }
.service h2 { padding-top:6px; }
.service hr { margin-top:14px; }

/* работы */
.works { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px 24px; padding-top:10px; }
.work img { display:block; width:100%; height:230px; object-fit:contain; border:1px solid var(--line); background:#fff; padding:7px; }
.work .cap { font-size:12px; line-height:16px; padding-top:8px; }
.works-empty { background:var(--side-body); padding:24px 26px; font-size:13px; }

/* контакты */
.contacts-phones { font-size:24px; line-height:32px; }
.contacts-phones a { color:var(--text); text-decoration:none; }

/* статьи и «Наша история»: разметка взята из их сайта как есть */
.article { padding-bottom:60px; }
.breadcrumb-navigation { list-style:none; margin:0 0 4px; padding:0; font-size:12px; }
.breadcrumb-navigation li { display:inline; }
.article hr { margin:10px 0; }
.article img { max-width:100%; height:auto; }

/* ---------- подвал ---------- */
.foot { padding:24px 0 30px; }
.foot ul { list-style:none; display:flex; flex-wrap:wrap; }
.foot li a, .foot li span { font-size:12px; color:var(--link); padding:0 18px 0 0; }
.foot li span { text-decoration:none; }
.copy { font-size:12px; color:var(--copy); padding-top:6px; }
.inner-foot { background:var(--grey); }