/*
	Theme Name: BeVisible
	Author: BeVisible
	Description: Сайт bevisible.social. Дизайн каждой страницы - в css/pages/{ключ}.css (перенесён со старого PHP-сайта), шапка - css/header.css.
*/

/* ---------- WordPress on top of the old design ---------- */

/* Fixed nav under the admin bar for logged-in users */
.admin-bar nav#site_nav {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar nav#site_nav {
		top: 46px;
	}
}

/* Block wrappers must not change the old layout */
.wp-block-group {
	box-sizing: border-box;
}

/* Pages without their own design (posts, 404) */
.bv-plain {
	padding: 140px 0 80px;
	min-height: 60vh;
}

.bv-plain p {
	margin: 0 0 1em;
	line-height: 1.6;
}

/* ---------- Case pages (/realtormax/ ...): «було / стало», landing.css underneath ---------- */

/* Case sections are short (2-3 blocks): the home page 96px reads as holes here */
.bv-case .lp-section {
	padding-top: 64px;
	padding-bottom: 64px;
}

.bv-case .lp-hero {
	padding-top: 140px;
	padding-bottom: 32px;
}

/* «Було і стало» follows the hero buttons directly: no double gap between them */
.bv-case #bulo-stalo {
	padding-top: 40px;
}

.bv-case-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 28px;
	align-items: stretch;
}

/* Equal heights; content top-aligned so tag, screen/video and lists sit on the same lines */
.bv-case-card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
}

.bv-case-tag {
	align-self: flex-start;
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--line);
	color: var(--ink);
	margin-bottom: 18px;
}

.bv-case-card.is-after .bv-case-tag {
	background: var(--blue);
	color: #fff;
}

.bv-case-card video {
	width: 100%;
	max-width: 340px;
	margin: 0 auto 22px;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: 16px;
	background: #2a2a30;
}

/* «Було» as a WhatsApp chat (client's messages come in on the left) */
.bv-case-msg.is-wa {
	background: #efeae2;
	color: #111b21;
	padding: 0 14px 18px;
	justify-content: flex-end;
	overflow: hidden;
}

.bv-case-msg.is-wa .bv-case-msg-head {
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	margin: 0 -14px auto;
	padding: 12px 14px;
	background: #008069;
	color: #fff;
	font-size: 14px;
}

.bv-case-msg.is-wa .bv-case-msg-head em {
	display: block;
	font-style: normal;
	font-size: 12px;
	color: #d7f0ea;
}

.bv-wa-ava {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: #dfe5e7;
	color: #54656f;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bv-wa-date {
	align-self: center;
	margin: 8px 0 2px;
	padding: 4px 10px;
	border-radius: 8px;
	background: #fff;
	font-size: 12px;
	color: #54656f;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.bv-case-msg.is-wa p {
	align-self: flex-start;
	max-width: 88%;
	background: #fff;
	color: #111b21;
	border-radius: 4px 12px 12px 12px;
	padding: 8px 10px 6px;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

/* Chat body: opens on the latest messages like a real chat (the files the client sent are the last thing,
   they must be visible), the start of a long conversation is reachable by scrolling up.
   column-reverse with the rows written newest first (wa_chat in case_craft.py) = scroll starts at the bottom. */
.bv-wa-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column-reverse;
	gap: 6px;
	overflow-y: auto;
	margin: 0 -8px;
	padding: 10px 8px 0;
	scrollbar-width: thin;
	font-size: 14px;
	line-height: 1.4;
}

/* stronger than .lp-section p + p of landing.css */
.bv-case-msg .bv-wa-body > * {
	margin-top: 0;
	margin-bottom: 0;
}

.bv-wa-time {
	float: right;
	margin: 6px 0 -4px 10px;
	font-size: 11px;
	font-style: normal;
	line-height: 1.2;
	color: #667781;
}

/* A long message folded to 4 lines, WhatsApp style (the files above must stay in the chat window) */
.bv-wa-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bv-wa-readmore {
	font-size: 13px;
	font-weight: 600;
	color: #027eb5;
}

/* What the client sent: small square previews inside the chat (a video frame with ▶ and its length, photos shrunk) */
.bv-wa-album {
	position: relative;
	align-self: flex-start;
	width: 54%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	padding: 3px;
	background: #fff;
	border-radius: 4px 12px 12px 12px;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.bv-wa-album.is-single {
	grid-template-columns: 1fr;
	width: 56%;
}

.bv-wa-album .bv-wa-time {
	position: absolute;
	right: 9px;
	bottom: 7px;
	margin: 0;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.bv-wa-th {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	background: #dfe5e7;
}

.bv-wa-th img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bv-wa-th.is-video::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
}

.bv-wa-th.is-video::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -8px 0 0 -4px;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}

.bv-wa-th.has-more::before,
.bv-wa-th.has-more::after {
	display: none;
}

.bv-wa-th b {
	position: absolute;
	left: 6px;
	bottom: 5px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.bv-wa-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(11, 20, 26, 0.5);
	color: #fff;
	font-size: 24px;
	font-weight: 700;
}

.bv-wa-doc {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 88%;
	padding: 8px 10px;
	background: #fff;
	border-radius: 4px 12px 12px 12px;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
	font-size: 14px;
}

.bv-wa-doc span {
	flex: none;
	padding: 6px 7px;
	border-radius: 4px;
	background: #e53935;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.bv-wa-doc .bv-wa-time {
	align-self: flex-end;
	margin: 0 0 -2px auto;
}

/* The client answered by phone (/floristcartoon/): a call line in the chat, not a message bubble */
.bv-case-msg.is-wa p.bv-wa-call {
	background: #e7f6f1;
	border-left: 3px solid #008069;
}

.bv-wa-call b {
	display: block;
	font-size: 12px;
	color: #008069;
	margin-bottom: 2px;
}

.bv-wa-call b::before {
	content: "\260E\FE0E  ";
}

/* Our own message in the «Було» chat (/recruitmentsparta/: we offered the format), right side like WhatsApp */
.bv-case-msg.is-wa p.bv-wa-out {
	align-self: flex-end;
	background: #d9fdd3;
	border-radius: 12px 4px 12px 12px;
}

/* One line under the chat: what exactly came in */
.bv-case-sent {
	max-width: 340px;
	margin: -8px auto 18px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.bv-case-card ul {
	list-style: none;
	margin: 0;
}

.bv-case-card li {
	position: relative;
	padding-left: 26px;
	margin-top: 8px;
	font-size: 16px;
}

.bv-case-card li::before {
	content: "–";
	position: absolute;
	left: 4px;
	color: var(--muted);
}

.bv-case-card.is-after li::before {
	content: "✓";
	color: var(--blue);
	font-weight: 700;
}

.bv-case-card details {
	margin-top: 18px;
	font-size: 15px;
}

.bv-case-card summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--blue);
}

.bv-case-card details p {
	margin-top: 10px;
	white-space: pre-line;
	color: var(--muted);
}

/* «Було» without video: the client's message as a chat bubble (/mortgagepekh/) */
.bv-case-msg {
	width: 100%;
	max-width: 340px;
	aspect-ratio: 9 / 16;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	margin: 0 auto 22px;
	background: #1f2a38;
	border-radius: 18px;
	padding: 18px;
	color: #e9eef5;
	font-size: 15px;
	line-height: 1.5;
}

.bv-case-msg-head {
	display: flex;
	justify-content: space-between;
	margin-bottom: auto;
	font-size: 12px;
	color: #8fa3b8;
}

.bv-case-msg p {
	background: #2b5278;
	border-radius: 14px 14px 4px 14px;
	padding: 12px 14px;
	margin: 0;
}

.bv-case-msg-time {
	display: block;
	text-align: right;
	font-size: 11px;
	color: #8fa3b8;
	margin-top: 6px;
}

.bv-case-steps {
	list-style: none;
	counter-reset: step;
	margin: 24px 0 0;
	display: grid;
	gap: 18px;
}

.bv-case-steps li {
	counter-increment: step;
	position: relative;
	padding: 22px 24px 22px 76px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.bv-case-steps li::before {
	content: counter(step);
	position: absolute;
	left: 22px;
	top: 20px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--blue-soft);
	color: var(--blue);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bv-case-steps strong {
	display: block;
	color: var(--ink);
	margin-bottom: 4px;
}

/* «Чому цей ролик працює» and «Що ми зробили» share one background: no doubled gap between them */
.bv-case .bv-case-why + .bv-case-how,
.bv-case .lp-white + .lp-white {
	padding-top: 8px;
}

/* «Чому цей ролик працює»: three craft cards (hook / story / call to action) */
.bv-case-craft {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 28px;
	align-items: stretch;
}

.bv-craft-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
}

.bv-craft-kicker {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 10px;
}

.bv-craft-card h3 {
	font-size: 21px;
	line-height: 1.3;
	color: var(--ink);
	margin: 0 0 14px;
}

.bv-craft-card p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
	margin: 0 0 12px;
}

.bv-craft-quote {
	margin: 0 0 14px;
	padding: 12px 16px;
	border-left: 3px solid var(--cta);
	background: var(--paper);
	border-radius: 0 12px 12px 0;
	font-style: italic;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.5;
}

.bv-craft-types {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}

.bv-craft-types span {
	font-size: 12.5px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--paper);
	color: var(--muted);
	border: 1px solid var(--line);
}

.bv-craft-types span.is-on {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.bv-craft-arc {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	counter-reset: arc;
}

.bv-craft-arc li {
	counter-increment: arc;
	position: relative;
	padding: 0 0 10px 34px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--text);
}

.bv-craft-arc li::before {
	content: counter(arc);
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--blue-soft);
	color: var(--blue);
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bv-craft-arc li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 10.5px;
	top: 25px;
	bottom: 2px;
	width: 1px;
	background: var(--line);
}

.bv-craft-arc strong {
	color: var(--ink);
}

/* «Як ми перевіряли тренди» (/floristtrend/): search / dropped trend / chosen trend, same grid as the craft cards */
.bv-case .bv-case-why + .bv-case-why {
	padding-top: 8px;
}

.bv-trend-no {
	background: var(--paper);
}

.bv-trend-no .bv-craft-kicker {
	color: var(--muted);
}

.bv-trend-no h3 {
	text-decoration: line-through;
	text-decoration-color: var(--muted);
}

.bv-trend-yes {
	border: 2px solid var(--blue);
}

.bv-trend-note {
	max-width: 760px;
	margin: 22px auto 0;
	text-align: center;
	font-size: 15px;
	color: var(--muted);
}

/* «Як ми зробили мультик» (/floristcartoon/): steps with the client's «yes» between them, text left, what she saw right */
.bv-proc {
	display: grid;
	gap: 26px;
	margin-top: 28px;
}

.bv-proc-step {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 36px;
	align-items: center;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
}

.bv-proc-step h3 {
	font-size: 23px;
	line-height: 1.3;
	color: var(--ink);
	margin: 0 0 12px;
}

.bv-proc-step p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
	margin: 0 0 12px;
}

.bv-proc-step .bv-proc-ok {
	margin: 16px 0 0;
	padding: 10px 14px;
	border-radius: 12px;
	background: #e7f6f1;
	color: #0b5e4f;
	font-weight: 600;
}

.bv-proc-ok::before {
	content: "\2713  ";
	font-weight: 800;
}

.bv-proc-media figure {
	margin: 0;
}

.bv-proc-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.bv-proc-media figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--muted);
	text-align: center;
}

.bv-proc-script {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 20px 22px;
}

.bv-proc-script strong {
	display: block;
	color: var(--ink);
	margin-bottom: 10px;
}

.bv-proc-script ol {
	margin: 0;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text);
}

.bv-proc-script li + li {
	margin-top: 4px;
}

@media (max-width: 860px) {
	.bv-proc-step {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 22px 18px;
	}
}

/* One bundle -> several reels (Tychkov): players side by side */
.bv-case-trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 28px;
}

.bv-case-trio figure {
	margin: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
}

.bv-case-trio video {
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: 14px;
	background: #2a2a30;
	display: block;
}

.bv-case-trio figcaption {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text);
}

.bv-case-trio figcaption strong {
	display: block;
	color: var(--ink);
	margin-bottom: 2px;
}

/* Long video -> Shorts (/longs-to-shorts/): «Було» = his YouTube video (click-to-load, js/case-video.js), «Стало» = grid of Shorts */
.bv-case-stack {
	display: grid;
	gap: 28px;
	margin-top: 28px;
}

.bv-case-long-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 28px;
	align-items: start;
}

.bv-yt {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #111;
}

.bv-yt img,
.bv-yt iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.bv-yt-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 76px;
	height: 54px;
	margin: -27px 0 0 -38px;
	border-radius: 14px;
	background: #ff0033;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease;
}

.bv-yt-play::after {
	content: "";
	position: absolute;
	left: 31px;
	top: 16px;
	border-style: solid;
	border-width: 11px 0 11px 19px;
	border-color: transparent transparent transparent #fff;
}

.bv-yt:hover .bv-yt-play {
	transform: scale(1.08);
}

.bv-yt-title {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text);
}

.bv-yt-title strong {
	display: block;
	color: var(--ink);
}

.bv-yt-note {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--text);
	opacity: 0.75;
}

.bv-case-long ul {
	margin-top: 0;
}

.bv-case-craft.is-two {
	grid-template-columns: repeat(2, 1fr);
}

.bv-case-shorts-card h3 {
	margin: 0 0 14px;
}

.bv-case-cols {
	columns: 2;
	column-gap: 32px;
}

.bv-case-cols li {
	break-inside: avoid;
}

/* 10 Shorts: 5 in a row on desktop, 2 on tablets and phones (never a single hanging card) */
.bv-case-shorts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin-top: 26px;
}

.bv-case-shorts figure {
	margin: 0;
	flex: 0 0 calc((100% - 4 * 18px) / 5);
	min-width: 0;
}

.bv-case-shorts video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: 14px;
	background: #2a2a30;
	margin: 0;
	max-width: none;
}

.bv-case-shorts figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--text);
}

.bv-case-shorts figcaption strong {
	display: block;
	color: var(--ink);
}

.bv-case-shorts figcaption span {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	opacity: 0.7;
}

@media (max-width: 960px) {
	.bv-case-long-grid,
	.bv-case-craft.is-two {
		grid-template-columns: 1fr;
	}

	.bv-case-shorts figure {
		flex-basis: calc((100% - 18px) / 2);
		max-width: 300px;
	}
}

@media (max-width: 700px) {
	.bv-case-cols {
		columns: 1;
	}

	.bv-case-shorts {
		gap: 14px;
	}

	.bv-case-shorts figure {
		flex-basis: calc((100% - 14px) / 2);
	}
}

@media (max-width: 960px) {
	.bv-case-craft,
	.bv-case-trio {
		grid-template-columns: 1fr;
	}

	.bv-case-trio figure {
		max-width: 400px;
		margin: 0 auto;
		width: 100%;
	}
}

@media (max-width: 700px) {
	.bv-case .lp-section {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.bv-case .lp-hero {
		padding-top: 104px;
		padding-bottom: 28px;
	}

	.bv-case #bulo-stalo {
		padding-top: 28px;
	}
}

@media (max-width: 760px) {
	.bv-case-compare {
		grid-template-columns: 1fr;
	}

	.bv-case-card {
		padding: 22px 18px;
	}

	.bv-case-steps li {
		padding: 18px 18px 18px 64px;
	}

	.bv-case-steps li::before {
		left: 16px;
		top: 16px;
	}
}

/* Portfolio of sites /sites/ (_migration/gen_portfolio.py): a laptop frame with the whole site scrolling inside, a phone over its
   bottom left corner (on the right it hid the laptop's scrollbar) */
.bv-pf-project {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.bv-pf-item:not(.lp-white) .bv-pf-project,
.bv-wip-list > .bv-pf-project:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

/* Chess order everywhere: the finished sites alternate by section background, the projects in progress share one section,
   so every second one there is flipped by its place in the list (owner 06.10.2026) */
.bv-pf-item:not(.lp-white) .bv-pf-media,
.bv-wip-list > .bv-pf-project:nth-child(even) .bv-pf-media {
	order: 2;
}

.bv-pf-shots {
	--pf-phone: 160px;
	position: relative;
	padding: 0 0 40px calc(var(--pf-phone) * .7);   /* only 30% of the phone covers the laptop */
}

.bv-pf-laptop {
	background: #1e1e24;
	border-radius: 14px;
	padding: 0 10px 10px;
	box-shadow: 0 24px 60px rgba(22, 22, 26, .18);
}

.bv-pf-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 4px;
}

.bv-pf-bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #4a4a52;
}

.bv-pf-bar span {
	flex: 1;
	margin-left: 10px;
	padding: 3px 12px;
	border-radius: 6px;
	background: #2c2c33;
	color: #b5b5bd;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bv-pf-screen {
	aspect-ratio: 16 / 10;
	overflow-y: auto;
	border-radius: 6px;
	background: #fff;
	scrollbar-width: thin;
	overscroll-behavior: contain;
}

.bv-pf-screen img {
	display: block;
	width: 100%;
	height: auto;
}

.bv-pf-phone {
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--pf-phone);
	padding: 6px;
	border-radius: 26px;
	background: #1e1e24;
	box-shadow: 0 18px 40px rgba(22, 22, 26, .28);
}

.bv-pf-phone img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.bv-pf-hint {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 14px;
}

.bv-pf-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.bv-pf-tag {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--blue-soft);
	color: var(--blue);
	font-size: 13px;
	font-weight: 600;
}

.bv-pf-text h2 {
	margin: 0 0 14px;
}

.bv-pf-lead {
	margin: 0 0 20px;
	font-size: 18px;
	color: var(--text);
}

.bv-pf-points {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.bv-pf-points li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 22px;
	line-height: 1.55;
}

.bv-pf-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cta);
}

.bv-pf-points strong {
	color: var(--ink);
}

.bv-pf-open {
	display: inline-block;
	padding: 12px 22px;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.bv-pf-open:hover,
.bv-pf-open:focus-visible {
	background: var(--ink);
	color: #fff;
}

/* «Над чим ми зараз працюємо» at the bottom of /sites/: one mockup per visit (gen_portfolio.py WIP, inline script picks it) */
.bv-wip-head {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}

.bv-wip-head h2 {
	margin: 0 0 14px;
}

.bv-wip-head .lp-lead {
	margin: 0;
}

.bv-wip-head .lp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.bv-wip-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cta);
	animation: bv-wip-pulse 1.8s ease-out infinite;
}

@keyframes bv-wip-pulse {
	0% { box-shadow: 0 0 0 0 rgba(232, 89, 12, .45); }
	100% { box-shadow: 0 0 0 10px rgba(232, 89, 12, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.bv-wip-dot { animation: none; }
}

.bv-wip-list > .bv-pf-project + .bv-pf-project {
	margin-top: 72px;
	padding-top: 72px;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.bv-pf-text h3 {
	margin: 0 0 14px;
	font-size: clamp(26px, 2.8vw, 36px);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.bv-pf-tag-wip {
	background: var(--cta);
	color: #fff;
}

@media (max-width: 900px) {
	.bv-pf-project,
	.bv-pf-item:not(.lp-white) .bv-pf-project,
	.bv-wip-list > .bv-pf-project:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.bv-pf-item:not(.lp-white) .bv-pf-media,
	.bv-wip-list > .bv-pf-project:nth-child(even) .bv-pf-media {
		order: 0;
	}

	.bv-pf-shots {
		--pf-phone: clamp(92px, 26vw, 160px);
		padding-bottom: 32px;
	}

	.bv-pf-phone {
		border-radius: 18px;
		padding: 4px;
	}

	.bv-pf-phone img {
		border-radius: 14px;
	}
}