/* ПринтСтайлУфа, вариант A. Палитра, геометрия и шкала — DIRECTION.md (a). */
@font-face{font-family:Gilroy;src:url(/fonts/gilroy-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Gilroy;src:url(/fonts/gilroy-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Gilroy;src:url(/fonts/gilroy-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --base:#FFFFFF; --soft:#F5F5F5; --ink:#1A1A1A; --muted:#5B5F66; --brand:#1375F7; --brand-d:#0B5FD6; --brand-ink:#FFFFFF;
  --tint:#EEF4FE; --tint-h:#E2ECFD; --dark:#222222; --on-dark:#FFFFFF; --on-dark-muted:#B4B7BD; --line:#E5E7EB;
  --wa:#25D366; --vk:#0077FF; --sans:Gilroy,"Segoe UI",Arial,sans-serif;
  --wrap:1280px; --pad:32px; --sec:72px; --gap:20px; --top:72px; --r:8px; --dock:0px;
  --h1:clamp(28px,2.6vw + 12px,44px); --h2:clamp(24px,1.6vw + 12px,34px); --h3:22px; --lead:17px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--base);color:var(--ink);font:400 16px/1.5 var(--sans);font-variant-numeric:lining-nums}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-weight:700;line-height:1.15;font-feature-settings:"lnum"}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3)}
summary{list-style:none;cursor:pointer} summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.wrap{max-width:calc(var(--wrap) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.ic{width:18px;height:18px;flex:none}

/* кнопки: высота 52, радиус 6, не пилюли */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:6px;
  background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:19px;border:2px solid var(--brand);transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn .ic{width:22px;height:22px}
.btn--o{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--o:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* верхняя строка */
.top{background:var(--soft);font-size:13px;color:var(--ink)}
.top__in{display:flex;align-items:center;gap:28px;height:36px}
.top__pt{display:flex;align-items:center;gap:6px;white-space:nowrap}
.top__pt .ic{width:14px;height:14px;color:var(--brand)}
.top__pt a{font-weight:700}
.top__pt a:hover,.ft a:hover{color:var(--brand)}
.top__hrs{color:var(--muted);white-space:nowrap}
.top__msg{margin-left:auto;display:flex;gap:8px}
.tm{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#fff;transition:background-color .15s}
.tm .ic{width:17px;height:17px}
.tm--wa{color:var(--wa)} .tm--vk{color:var(--vk)}

/* шапка: липкая основная строка */
.hd{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.hd__in{display:flex;align-items:center;gap:32px;height:var(--top)}
.logo{display:flex;align-items:center;gap:6px;flex:none}
.logo__m{height:56px;width:auto}
.nav{display:flex;align-items:center;gap:4px;font-weight:500;font-size:17px}
.nav>a,.nav summary{display:flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:6px;transition:color .15s}
.nav>a:hover,.nav summary:hover,.nav [aria-current]{color:var(--brand)}
.chev{width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav__svc[open] .chev{transform:translateY(1px) rotate(-135deg)}
.hd__tel{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.hd__tel span{font-weight:700;font-size:22px;white-space:nowrap}
.hd__tel small{font-size:13px;color:var(--muted)}
.hd__tel:hover span{color:var(--brand)}
.dd{position:static}
.hd__write{position:relative}
.hd__write .btn{height:48px;font-size:17px}
.pop{position:absolute;right:0;top:calc(100% + 10px);width:300px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(26,26,26,.12);display:grid;gap:2px}
.msg{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:6px;font-weight:500;font-size:15px;transition:background-color .15s}
.msg:hover{background:var(--tint)}
.msg .ic{width:22px;height:22px}
.msg--wa .ic{color:var(--wa)} .msg--vk .ic{color:var(--vk)} .msg--tel .ic{color:var(--brand)}

/* мегаменю */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 32px rgba(26,26,26,.08)}
.mega__in{max-width:calc(var(--wrap) + 2*var(--pad));margin:0 auto;padding:24px var(--pad) 8px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.mega__cat{display:flex;align-items:center;gap:6px;font-weight:700;font-size:17px;margin-bottom:10px;color:var(--ink)}
.mega__cat .ic{width:16px;height:16px;color:var(--brand)}
.mega__cat:hover{color:var(--brand)}
.mega__col--suveniry ul{columns:2;column-gap:16px}
.mega li{break-inside:avoid}
.mega li a{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:6px;font-size:15px;font-weight:400;transition:background-color .15s}
.mega li a:hover{background:var(--tint)}
.mega li img{width:40px;height:40px;border-radius:6px}
.mega__all{display:flex;align-items:center;gap:6px;max-width:calc(var(--wrap) + 2*var(--pad));margin:0 auto;padding:12px var(--pad) 20px;color:var(--brand-d);font-weight:500;font-size:15px}
.mega__all .ic{width:16px;height:16px}
details[open]>.mega,details[open]>.pop,details[open]>.mnav__p{animation:drop .2s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}

/* меню телефона */
.mnav{display:none}
.mnav summary{display:grid;place-items:center;width:44px;height:44px}
.mnav summary i,.mnav summary i::before,.mnav summary i::after{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.mnav summary i::before,.mnav summary i::after{content:"";position:absolute;left:0}
.mnav summary i::before{top:-7px} .mnav summary i::after{top:7px}
.mnav[open] summary i{background:transparent}
.mnav[open] summary i::before{top:0;transform:rotate(45deg)} .mnav[open] summary i::after{top:0;transform:rotate(-45deg)}
.mnav__p{position:fixed;left:0;right:0;top:var(--top);bottom:0;overflow-y:auto;background:#fff;padding:8px 24px 96px;border-top:1px solid var(--line)}
.mnav__links{display:flex;flex-wrap:wrap;gap:4px 16px;padding:8px 0 12px;font-weight:700;font-size:16px;border-bottom:1px solid var(--line)}
.mnav__links a{padding:8px 0}
.mnav__cat{padding:14px 0;border-bottom:1px solid var(--line)}
.mnav__h{display:block;font-weight:700;font-size:17px;color:var(--brand-d);padding:4px 0}
.mnav__cat ul{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.mnav__cat li a{display:block;padding:8px 0;font-size:15px}
.mnav__tel{display:grid;gap:4px;padding-top:14px;font-weight:500}
.mnav__tel a{padding:8px 0}

/* первый экран */
.hero{background:var(--soft)}
.hero__in{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:center;padding-top:56px;padding-bottom:56px}
.hero__t{grid-column:1/7}
.hero h1{max-width:19ch}
.hero__l{margin-top:16px;font-size:20px;font-weight:500}
.hero__b{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__m{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:20px;font-size:15px;color:var(--muted)}
.hm{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink);transition:color .15s}
.hm:hover{color:var(--brand)}
.hm .ic{width:20px;height:20px}
.hm--vk .ic{color:var(--vk)} .hm--tel .ic{color:var(--brand)}
.plates{grid-column:7/13;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plates a{display:block}
.plate__ph{display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden}
.plate__ph img{width:100%;height:100%;object-fit:cover;transition:transform .15s}
.plate__n{display:block;margin-top:12px;font-weight:500;font-size:17px}
.plate__p{display:block;font-size:15px;color:var(--brand-d);font-weight:500}
.plates a:hover .plate__n{color:var(--brand)}

/* секции */
.sec{padding:var(--sec) 0}
.sec[id]{scroll-margin-top:var(--top)}
.sec--t{background:var(--soft)}
.sec__hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:32px}
.more{display:inline-flex;align-items:center;gap:6px;color:var(--brand-d);font-weight:500;font-size:17px}
.more .ic{width:16px;height:16px}
.more:hover{text-decoration:underline}
.sec h2{margin-bottom:32px} .sec__hd h2{margin:0}

/* полки и карточки */
.shelves{display:grid;grid-template-columns:repeat(5,1fr);gap:48px var(--gap)}
.shelf{grid-column:1/-1;scroll-margin-top:calc(var(--top) + 16px)}
.shelf--poligrafiya{grid-column:span 1} .shelf--prochee{grid-column:span 4}
.shelf__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:16px;min-height:28px}
.shelf h3{font-size:var(--h3)}
.shelf h3 a{transition:color .15s}
.shelf h3 a:hover{color:var(--brand)}
.shelf h3 .ic{display:inline-block;vertical-align:-2px;margin-left:8px;width:20px;height:20px;color:var(--brand)}
.shelf__n{font-size:13px;color:var(--muted);white-space:nowrap}
.shelf__d{max-width:72ch;margin:-6px 0 20px;color:var(--muted);font-size:15px}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
.shelf--prochee .grid{grid-template-columns:repeat(4,1fr)}
.shelf--poligrafiya .grid{grid-template-columns:1fr}
.card{display:flex;flex-direction:column}
.card__a{display:flex;flex-direction:column;flex:1}
.card__ph{display:block;border-radius:var(--r);background:var(--tint);overflow:hidden;transition:background-color .15s}
.card__ph img{width:100%;aspect-ratio:4/3;object-fit:contain}
.card__a:hover .card__ph{background:var(--tint-h)}
.card__a:hover .card__n{color:var(--brand)}
.card__n{margin-top:12px;font-weight:500;font-size:17px;overflow-wrap:anywhere;line-height:1.3;transition:color .15s}
.card__note{font-size:13px;color:var(--muted)}
.card__p{margin-top:2px;font-size:15px;color:var(--brand-d)}
.card__m{display:flex;gap:6px;margin-top:10px}
.cm{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;font-weight:500;transition:border-color .15s,background-color .15s}
.cm:hover{border-color:var(--brand);background:var(--tint)}
.cm .ic{width:18px;height:18px}
.cm--wa .ic{color:var(--wa)} .cm--vk .ic{color:var(--vk)}
.cm--vk span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cm--vk{width:36px;padding:0}

/* появление карточек: 250 мс, один раз, без задержек; без JS всё видно */
.js .shelf .card{opacity:0;transform:translateY(8px);transition:opacity .25s ease-out,transform .25s ease-out}
.js .shelf.in .card{opacity:1;transform:none}

/* как мы работаем: 4 шага на синей линии */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);counter-reset:s;position:relative;padding-top:44px}
.steps::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:var(--brand)}
.steps li{position:relative;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;top:-44px;left:0;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--brand);color:var(--brand-d);font-size:13px;font-weight:700;display:grid;place-items:center}
.steps h3{font-size:20px;line-height:1.25;max-width:16ch}
.steps p{margin-top:12px;color:#3D4148;font-size:16px;max-width:30ch}
.steps--c h3{font-size:17px}
.steps--c p{font-size:15px}

/* страница услуг */
.phd{padding:48px 0 24px}
.phd p{margin-top:12px;color:var(--muted);font-size:17px;max-width:60ch}
.cats{position:sticky;top:var(--top);z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.cats__in{display:flex;gap:10px;padding-top:12px;padding-bottom:12px;overflow-x:auto;scrollbar-width:none}
.cats a{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:1px solid var(--line);border-radius:6px;font-weight:500;font-size:17px;white-space:nowrap;transition:border-color .15s,background-color .15s,color .15s}
.cats a:hover{border-color:var(--brand);color:var(--brand-d);background:var(--tint)}
.cats small{font-size:13px;color:var(--muted)}
.sec--u{padding-top:40px}
.sec--u .shelf{scroll-margin-top:calc(var(--top) + 84px)}

/* точки */
.pts{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.pt{padding:28px;border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;gap:10px}
.pt p{color:#3D4148}
.pt__tel{display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;color:var(--ink)!important}
.pt__tel .ic{color:var(--brand);width:20px;height:20px}
.pt__tel a:hover{color:var(--brand)}
.pt__h{font-weight:500}
.pt__map{display:inline-flex;align-items:center;gap:6px;color:var(--brand-d);font-weight:500;margin-top:auto}
.pt__map .ic{width:16px;height:16px}
.pt__map:hover{text-decoration:underline}
.pts__on{margin-top:20px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.pts__on p{max-width:60ch;font-size:15px}
.pts__msg{display:flex;flex-wrap:wrap;gap:12px}
.pts__msg--top{margin:-8px 0 24px}
.big{display:inline-flex;align-items:center;gap:12px;height:64px;padding:0 20px 0 12px;border:1px solid var(--line);border-radius:var(--r);font-weight:700;font-size:17px;color:var(--ink);transition:border-color .15s,background-color .15s}
.big:hover{border-color:var(--brand);background:var(--tint)}
.big .ic{width:40px;height:40px}
.big--wa .ic{color:var(--wa)} .big--vk .ic{color:var(--vk)} .big--tel .ic{color:var(--brand);width:32px;height:32px;margin:4px}
.big small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.pts__on a{color:var(--ink);font-weight:500}
.pts__on a:hover{color:var(--brand)}

/* подвал */
.ft{background:var(--dark);color:var(--on-dark);padding:56px 0 calc(28px + var(--dock));font-size:15px}
.ft__in{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:32px}
.ft h4{margin-bottom:14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted)}
.ft li{margin-bottom:8px}
.ft p{color:var(--on-dark-muted)}
.ft__brand p{margin-top:16px;max-width:30ch}
.logo--ft{display:inline-flex;background:#fff;padding:8px 10px;border-radius:var(--r)}
.ft__msg{display:flex;gap:8px;margin-top:16px}
.logo--ft .logo__m{height:56px}
.ft__c p{margin-bottom:12px}
.ft__c a{color:var(--on-dark);font-weight:500}
.ft__copy{margin-top:40px;padding-top:20px;border-top:1px solid #3A3A3A;color:var(--on-dark-muted);font-size:13px}

/* липкая панель телефона */
.dock{display:none}

@media (max-width:1199px){
  .top__hrs{display:none}
  .hd__in{gap:20px}
  .hd__tel span{font-size:19px}
}
@media (max-width:1023px){
  :root{--top:64px;--pad:24px;--sec:56px;--dock:56px}
  .top,.nav,.hd__write,.hd__tel small{display:none}
  .mnav{display:block}
  .hd__in{gap:12px}
  .hd__tel{margin-left:auto}
  .hd__tel span{font-size:14px}
  .logo__m{height:44px}
  .hero__t,.plates{grid-column:1/-1}
  .plates{grid-template-columns:repeat(3,minmax(180px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .plates li{scroll-snap-align:start}
  .shelves{grid-template-columns:1fr}
  .shelf--poligrafiya,.shelf--prochee{grid-column:1/-1}
  .grid,.shelf--prochee .grid,.shelf--poligrafiya .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:1fr 1fr;row-gap:32px}
  .ft__in{grid-template-columns:1fr 1fr}
  .dock{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;height:var(--dock);background:#fff;border-top:1px solid var(--line)}
  .dk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:500}
  .dk .ic{width:22px;height:22px}
  .dk--wa .ic{color:var(--wa)} .dk--vk .ic{color:var(--vk)} .dk--tel{background:var(--brand);color:#fff}
}
@media (max-width:640px){
  :root{--sec:48px;--gap:12px}
  .hero__in{padding-top:28px;padding-bottom:32px;row-gap:28px}
  .hero__l{font-size:17px;margin-top:12px}
  .hero__b{margin-top:20px}
  .hero__b .btn{flex:1 1 100%}
  .plates{grid-template-columns:repeat(3,42%);gap:12px}
  .grid,.shelf--prochee .grid,.shelf--poligrafiya .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shelves{row-gap:36px}
  .card__n{font-size:16px}
  .cm{padding:0 8px}
  .steps{grid-template-columns:1fr;padding-top:0;padding-left:40px;row-gap:18px}
  .steps p{margin-top:6px;font-size:15px}
  .steps::before{left:11px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .steps li::before{top:0;left:-40px}
  .steps h3{font-size:18px;max-width:none}
  .pts{grid-template-columns:1fr}
  .pt{padding:20px}
  .sec__hd{flex-direction:column;gap:6px;margin-bottom:24px}
  .ft__in{grid-template-columns:1fr 1fr;row-gap:28px}
  .ft__brand,.ft__c{grid-column:1/-1}
  .big{flex:1 1 100%}
  .phd{padding:32px 0 16px}
  .cats a{height:40px;padding:0 14px;font-size:15px}
  .sec--u .shelf{scroll-margin-top:calc(var(--top) + 76px)}
}
@media (max-width:360px){
  .cm span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cm{width:44px;padding:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .shelf .card{opacity:1;transform:none}
}
.nw{white-space:nowrap}