/* orgprint.ru в стиле orgprint.spb.ru (28.10.2026). Подключается после app.min.css темы (src/op.php, версия OP_VERSION).
   1) шапка, подвал, окно «Заказать звонок», согласие на cookie — цвета, шрифт и кнопки как на orgprint.spb.ru;
   2) новая главная — блоки .opr-* (src/views/sections/op-home.twig).
   Голубой — #006ea8, при наведении #005a8a; тёмный текст — #0b1f35; карточки — #f4f8fb с полосой сверху. */

:root {
	--color-main: #0b1f35;
	--color-main-light: #5f6b76;
	--color-main-light-2: #f4f8fb;
	--color-secondary: #006ea8;
	--color-secondary-dark: #005a8a;
	--opr-blue: #006ea8;
	--opr-blue-hover: #005a8a;
	--opr-text: #0b1f35;
	--opr-grey: #5f6b76;
	--opr-soft: #f4f8fb;
	--opr-line: #d5e3ee;
}

/* шрифт — как на orgprint.spb.ru (там Segoe UI; здесь — системный, без загрузки файлов шрифта) */
body,
button,
input,
textarea,
select,
body .cookie-consent {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
	color: var(--opr-text);
}

/* цвета темы (в app.min.css записаны прямо в классах) */
.color-main { color: var(--opr-text); }
.bg-main { background: var(--opr-text); }
.color-main-light { color: var(--opr-grey); }
.bg-main-light-2 { background: var(--opr-soft); }
.color-secondary { color: var(--opr-blue); }
.bg-secondary { background: var(--opr-blue); }
.hover-bg-secondary:hover { background: var(--opr-blue-hover); }
.hover-color-main:hover { color: var(--opr-blue); }
.hover-color-main-light:hover { color: var(--opr-blue); }

/* ---------- шапка ---------- */
.header_bottom {
	background: #fff;
	box-shadow: 0 1px 0 #e6edf3;
}
.header a[href^="tel:"].text-xl {
	color: var(--opr-blue);
	font-weight: 600;
}
.header a[href^="tel:"].text-xl:hover {
	color: var(--opr-blue-hover);
}
.header [data-modal="callback"],
.footer [data-modal="callback"] {
	padding: 12px 22px;
	border-radius: 2px;
	font-size: 15px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #fff;
	text-align: center;
}
@media (max-width: 600px) {
	.header [data-modal="callback"] {
		padding: 9px 12px;
		font-size: 13px;
	}
}

/* ---------- окно «Заказать звонок» ---------- */
.modal__box {
	border-radius: 6px;
}
.modal .review__title {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 500;
	text-transform: uppercase;
}
.modal input.rounded-2xl {
	border-radius: 4px;
	border-color: #c9d6e2;
}
.modal input.rounded-2xl:focus {
	border-color: var(--opr-blue);
}
.modal button.review__btn {
	border-radius: 2px;
	text-transform: uppercase;
	font-size: 16px;
}

/* ---------- подвал ---------- */
.footer .bg-dark {
	background: #323232;
}
.footer .color-main-light {
	color: #b9c2cb;
}

/* ---------- согласие на cookie (стили — в footer.twig) ---------- */
body .cookie-consent {
	border-radius: 6px;
	box-shadow: 0 6px 30px rgba(11, 31, 53, .18);
	color: var(--opr-text);
	font-size: 15px;
}
body .cookie-consent-button {
	background: var(--opr-blue);
	border-radius: 2px;
	text-transform: uppercase;
}
body .cookie-consent-button:hover {
	background: var(--opr-blue-hover);
	opacity: 1;
}

/* ---------- общие элементы главной ---------- */
.opr-sec {
	padding: 64px 0;
}
.opr-sec--soft {
	background: var(--opr-soft);
}
.opr-h2 {
	margin: 0 0 30px;
	font-size: 33px;
	line-height: 1.25;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--opr-text);
}
.opr-btn {
	display: inline-block;
	padding: 13px 26px;
	border: 2px solid var(--opr-blue);
	border-radius: 2px;
	background: var(--opr-blue);
	color: #fff;
	font-size: 16px;
	line-height: 1.25;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s;
}
.opr-btn:hover {
	background: var(--opr-blue-hover);
	border-color: var(--opr-blue-hover);
	color: #fff;
}
.opr-btn--line {
	background: transparent;
	color: var(--opr-blue);
}
.opr-btn--line:hover {
	background: var(--opr-blue);
	border-color: var(--opr-blue);
	color: #fff;
}

/* ---------- первый экран ---------- */
.opr-hero {
	position: relative;
	overflow: hidden;
	padding: 70px 0 80px;
	background: #eef2f5;
}
.opr-hero__hex {
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
}
.opr-hero__hex--1 { background-image: url(img/hex-1.webp?v=2026-10-28); }
.opr-hero__hex--2 { background-image: url(img/hex-2.webp?v=2026-10-28); }
.opr-hero__in {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 30px;
	align-items: center;
}
.opr-hero__box {
	padding: 34px 36px 30px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 10px 40px rgba(11, 31, 53, .08);
}
.opr-hero__h1 {
	margin: 0 0 16px;
	font-size: 40px;
	line-height: 1.18;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--opr-text);
}
.opr-hero__h1 span {
	display: block;
	font-weight: 600;
	color: var(--opr-blue);
}
/* тире — для поисковиков и чтения с экрана, на экране не видно */
.opr-hero__h1 i {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.opr-hero__lead {
	margin: 0 0 24px;
	font-size: 18px;
	line-height: 1.5;
}
.opr-hero__btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
}
.opr-hero__tel {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--opr-blue);
	white-space: nowrap;
}
.opr-hero__tel:hover {
	color: var(--opr-blue-hover);
}
.opr-hero__note {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--opr-grey);
}
.opr-hero__logo {
	justify-self: center;
	width: 100%;
	max-width: 461px;
}

/* ---------- направления ---------- */
.opr-dirs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}
.opr-dir {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-top: 4px solid var(--opr-blue);
	border-radius: 6px;
	background: var(--opr-soft);
	color: var(--opr-text);
	text-decoration: none;
	transition: box-shadow .2s;
}
.opr-dir:hover {
	box-shadow: 0 10px 30px rgba(11, 31, 53, .12);
}
.opr-dir__img {
	width: 100%;
	aspect-ratio: 1200 / 640;
	object-fit: cover;
}
.opr-dir__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 26px 26px;
}
.opr-dir__title {
	margin-bottom: 14px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}
.opr-dir:hover .opr-dir__title {
	color: var(--opr-blue);
}
.opr-dir__list {
	display: block;
	margin-bottom: 22px;
}
.opr-dir__list span {
	position: relative;
	display: block;
	margin-top: 8px;
	padding-left: 18px;
	font-size: 16px;
	line-height: 1.45;
}
.opr-dir__list span::before {
	content: "";
	position: absolute;
	top: .55em;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--opr-blue);
}
.opr-dir .opr-btn {
	margin-top: auto;
}
.opr-dir:hover .opr-btn--line {
	background: var(--opr-blue);
	color: #fff;
}

/* ---------- IT-инфраструктура под ключ ---------- */
.opr-lead {
	max-width: 880px;
	margin: -14px 0 30px;
	font-size: 17px;
	line-height: 1.5;
}
.opr-h3 {
	margin: 48px 0 18px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--opr-text);
}
.opr-it {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.opr-it__item {
	padding: 24px 24px 22px;
	border-top: 4px solid var(--opr-blue);
	border-radius: 6px;
	background: #fff;
}
.opr-it__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
}
.opr-it__title {
	margin-bottom: 8px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}
.opr-it__item p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}
.opr-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: opr-step;
}
.opr-step {
	position: relative;
	padding: 20px 22px 20px;
	border-radius: 6px;
	background: #fff;
	counter-increment: opr-step;
	font-size: 15px;
	line-height: 1.45;
}
.opr-step::before {
	content: "0" counter(opr-step);
	display: block;
	margin-bottom: 6px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: var(--opr-blue);
}
.opr-step b {
	display: block;
	margin-bottom: 4px;
	font-size: 17px;
	text-transform: uppercase;
}
.opr-gov {
	margin-top: 30px;
	padding: 22px 26px;
	border-left: 4px solid var(--opr-blue);
	border-radius: 6px;
	background: #fff;
}
.opr-gov__title {
	margin-bottom: 6px;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--opr-blue);
}
.opr-gov p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

/* ---------- проекты ---------- */
.opr-cases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.opr-case {
	display: flex;
	flex-direction: column;
	padding: 24px 24px 22px;
	border-top: 4px solid var(--opr-blue);
	border-radius: 6px;
	background: var(--opr-soft);
}
.opr-case__tag {
	align-self: flex-start;
	margin-bottom: 10px;
	padding: 3px 10px;
	border-radius: 2px;
	background: var(--opr-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.opr-case__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--opr-text);
}
.opr-case__who {
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--opr-grey);
}
.opr-case p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.5;
}
.opr-case__res {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: auto 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--opr-line);
	list-style: none;
}
.opr-case__res li {
	font-size: 13px;
	line-height: 1.35;
	color: var(--opr-grey);
}
.opr-case__res b {
	display: block;
	margin-bottom: 2px;
	font-size: 22px;
	line-height: 1.15;
	white-space: nowrap;
	color: var(--opr-blue);
}

.opr-case--cta {
	justify-content: center;
	align-items: flex-start;
	border-top-color: var(--opr-line);
	background: #eef2f5 url(img/hex-2.webp?v=2026-10-28) center / cover no-repeat;
}
.opr-case--cta .opr-btn {
	margin-top: 8px;
}

/* MAX в шапке и подвале — вместо WhatsApp */
.opr-max {
	margin-left: 6px;
}
.opr-max img {
	display: block;
}

/* ---------- о компании: этапы ---------- */
.opr-tl {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.opr-tl__item {
	padding: 22px 22px 20px;
	border-top: 4px solid var(--opr-line);
	border-radius: 6px;
	background: var(--opr-soft);
}
/* на голубоватом фоне секции — белые карточки */
.opr-sec--soft .opr-tl__item,
.opr-sec--soft .opr-card {
	background: #fff;
}
.opr-sec--facts {
	padding: 44px 0;
}
.opr-tl__item--now {
	border-top-color: var(--opr-blue);
}
.opr-tl__icon {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	margin-bottom: 12px;
}
.opr-tl__year {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--opr-blue);
}
.opr-tl__name {
	margin-top: 2px;
	font-weight: 700;
	text-transform: uppercase;
}
.opr-tl__list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.opr-tl__list li {
	position: relative;
	margin-top: 6px;
	padding-left: 16px;
	font-size: 15px;
	line-height: 1.45;
}
.opr-tl__list li::before {
	content: "";
	position: absolute;
	top: .55em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--opr-blue);
}

/* ---------- факты ---------- */
.opr-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.opr-fact {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 15px;
	line-height: 1.4;
}
.opr-fact img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}
.opr-fact b {
	display: block;
	margin-bottom: 2px;
	font-size: 18px;
	line-height: 1.25;
	text-transform: uppercase;
}

/* ---------- команда ---------- */
.opr-team {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 30px;
}
.opr-team .opr-h2 {
	margin: 0;
}
.opr-team__small {
	margin-bottom: 12px;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--opr-blue);
}
.opr-team__text p {
	margin: 0 0 14px;
	font-size: 17px;
	line-height: 1.55;
}

/* ---------- контакты ---------- */
.opr-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}
.opr-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 26px 24px 24px;
	border-top: 4px solid var(--opr-line);
	border-radius: 6px;
	background: var(--opr-soft);
}
.opr-card--main {
	border-top-color: var(--opr-blue);
}
.opr-card__icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	object-fit: contain;
}
.opr-card__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}
.opr-card__big {
	margin: 10px 0 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--opr-blue);
	overflow-wrap: anywhere;
}
.opr-card__big--mail {
	font-size: 22px;
}
.opr-card__big:hover {
	color: var(--opr-blue-hover);
	text-decoration: underline;
}
.opr-card__addr {
	margin: 10px 0 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}
.opr-card p {
	margin: 8px 0 18px;
	font-size: 15px;
	line-height: 1.45;
}
.opr-card .opr-btn {
	margin-top: auto;
}

/* ---------- планшет ---------- */
@media (max-width: 991px) {
	.opr-hero__h1 {
		font-size: 32px;
	}
	.opr-tl,
	.opr-facts,
	.opr-it,
	.opr-steps,
	.opr-cases {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.opr-cards {
		grid-template-columns: minmax(0, 1fr);
	}
	.opr-team {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* ---------- телефон ---------- */
@media (max-width: 767px) {
	.opr-sec {
		padding: 44px 0;
	}
	.opr-h2 {
		margin-bottom: 22px;
		font-size: 26px;
	}
	.opr-hero {
		padding: 30px 0 36px;
	}
	.opr-hero__in {
		grid-template-columns: minmax(0, 1fr);
	}
	.opr-hero__logo {
		display: none;
	}
	.opr-hero__box {
		padding: 24px 20px 22px;
	}
	.opr-hero__h1 {
		font-size: 26px;
	}
	.opr-hero__lead {
		font-size: 16px;
	}
	.opr-dirs,
	.opr-it,
	.opr-cases {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
	.opr-case {
		padding: 20px 18px 18px;
	}
	.opr-case__title {
		font-size: 18px;
	}
	.opr-it {
		gap: 14px;
	}
	/* на телефоне — компактнее: значок и номер шага слева от заголовка */
	.opr-it__item {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 12px;
		align-items: center;
		padding: 18px 18px 18px;
	}
	.opr-it__icon {
		width: 40px;
		height: 40px;
		margin: 0;
	}
	.opr-it__title {
		margin: 0;
		font-size: 17px;
	}
	.opr-it__item p {
		grid-column: 1 / -1;
		margin-top: 10px;
	}
	.opr-steps {
		gap: 12px;
	}
	.opr-step {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 12px;
		align-items: baseline;
		padding: 16px 18px;
	}
	.opr-step::before {
		margin: 0;
		font-size: 24px;
	}
	.opr-step span {
		grid-column: 2;
	}
	.opr-lead {
		margin-top: -8px;
		font-size: 16px;
	}
	.opr-h3 {
		margin-top: 36px;
		font-size: 19px;
	}
	.opr-gov {
		padding: 18px 18px;
	}
	.opr-dir__body {
		padding: 20px 18px 22px;
	}
	.opr-dir__title {
		font-size: 19px;
	}
	.opr-card__big {
		font-size: 23px;
	}
	/* этапы на телефоне — компактнее: значок слева от года */
	.opr-tl {
		gap: 14px;
	}
	.opr-tl__item {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 14px;
		padding: 16px 16px 16px;
	}
	.opr-tl__icon {
		grid-row: span 3;
		width: 48px;
		height: 48px;
		margin: 0;
	}
	.opr-tl__year {
		font-size: 21px;
	}
	.opr-tl__list {
		margin-top: 6px;
	}
}
@media (max-width: 480px) {
	.opr-tl,
	.opr-facts,
	.opr-steps {
		grid-template-columns: minmax(0, 1fr);
	}
	.opr-hero__btns .opr-btn,
	.opr-dir .opr-btn,
	.opr-card .opr-btn {
		width: 100%;
	}
	.opr-hero__tel {
		font-size: 22px;
	}
	/* итоги проектов: на 320 px «99,95 %» не помещалось в треть карточки */
	.opr-case__res {
		gap: 8px;
	}
	.opr-case__res b {
		font-size: 18px;
	}
	.opr-case__res li {
		font-size: 12px;
	}
}

/* ---------- «Каталог» и поиск по каталогу orgprint.spb.ru (30.10.2026) ----------
   Разметка — header.twig (на месте «Время работы / Адрес офиса», они — строкой под поиском, как на orgprint.spb.ru 28.10);
   строка и подсказки — header-search.css, shop-printer.css и shop-printer.js с orgprint.spb.ru (подключает src/op.php, стили —
   до этого файла), здесь — цвета сайта и место в шапке. На телефоне и планшете поиск — строкой под логотипом. */
.op-sw { --color-theme: var(--opr-blue); --color-theme-hover-bg: var(--opr-blue-hover); --op-text-blue: var(--opr-blue); flex: 1 1 auto; min-width: 0; max-width: 640px; margin: 0 6px; }
.op-sw .op-hs__row { height: 44px; border-radius: 4px; }
.op-sw .op-hs-cat { height: 44px; padding: 0 16px 0 14px; border-radius: 4px; font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.op-sw .op-hs__input { font-size: 15px; color: var(--opr-text); }
.op-sw .op-hs__list { z-index: 80; }
@media (min-width: 992px) {
	.header_bottom .container > .flex { gap: 22px; }
	.op-sw .op-hs__list { width: max(100%, 540px); } /* подсказки шире поля */
}
.op-sw__info { margin-top: 5px; font-size: 12.5px; line-height: 1.3; color: var(--opr-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1280px) {
	.op-sw .op-hs-cat { width: 44px; padding: 0; justify-content: center; }
	.op-sw .op-hs-cat span { display: none; }
}
@media (max-width: 991px) {
	.header_bottom .container > .flex { flex-wrap: wrap; row-gap: 8px; }
	.op-sw { order: 10; flex: 1 1 100%; max-width: none; margin: 0 0 4px; }
	.op-sw__info { display: none; }
	.op-sw .op-hs__row, .op-sw .op-hs-cat { height: 42px; }
	.op-sw .op-hs-cat { width: 42px; }
}

/* ---------- направления: три карточки (с 30.10.2026 — «Интернет-магазин») ---------- */
@media (min-width: 1101px) {
	.opr-dirs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
	.opr-dir__body { padding: 22px 22px 24px; }
	.opr-dir__title { font-size: 20px; }
	.opr-dir__list span { font-size: 15px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
	.opr-dir:nth-child(3) { grid-column: 1 / -1; flex-direction: row; }
	.opr-dir:nth-child(3) .opr-dir__img { width: 50%; aspect-ratio: auto; }
}