:root {
	--vision-project-surface: linear-gradient(165deg, rgba(10, 15, 19, 0.92), rgba(4, 7, 10, 0.96));
	--vision-project-border: rgba(155, 190, 170, 0.24);
	--vision-project-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
	--vision-project-text: #ecf3ff;
	--vision-project-text-soft: rgba(223, 234, 248, 0.82);
	--vision-project-accent: #8fb8a0;
}

/* First-paint safety (single-work): keep dark background and avoid bright flashes. */
body.single-work {
	background-color: #05080c;
}

/* Single-work hero text must paint immediately (no delayed reveal). */
body.single-work #hero :is(
	h1,
	.entry-title,
	.post-title,
	.post-title > span,
	.post-meta-container,
	.post-secondary-meta-container,
	.post-meta-container p,
	.post-secondary-meta-container p,
	.subheading,
	.description
) {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	animation: none !important;
	animation-delay: 0s !important;
	transition: none !important;
	transition-delay: 0s !important;
}

/* Project header short description is deprecated: hide legacy excerpt/meta block. */
body.single-work #hero .post-meta-container,
body.single-work #hero .post-secondary-meta-container,
body.single-work #hero .work-excerpt-container {
	display: none !important;
}

.filtered-content[data-post-type="work"] .vision-work-entry-media,
#work-grid-container [data-post-type="work"] .vision-work-entry-media {
	position: relative;
	overflow: hidden;
	background: rgba(7, 11, 15, 0.42);
}

.filtered-content[data-post-type="work"] .entry-work-grid .vision-work-entry-media,
#work-grid-container [data-post-type="work"] .entry-work-grid .vision-work-entry-media {
	aspect-ratio: 4 / 5;
}

.filtered-content[data-post-type="work"] .vision-work-entry-media .entry-cover,
#work-grid-container [data-post-type="work"] .vision-work-entry-media .entry-cover {
	position: relative;
	overflow: hidden;
}

.filtered-content[data-post-type="work"] .entry-work-grid .vision-work-entry-media .entry-cover,
#work-grid-container [data-post-type="work"] .entry-work-grid .vision-work-entry-media .entry-cover {
	height: 100%;
	padding-bottom: 0 !important;
}

.filtered-content[data-post-type="work"] .vision-work-entry-media .vision-work-preview-image,
#work-grid-container [data-post-type="work"] .vision-work-entry-media .vision-work-preview-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}

.filtered-content[data-post-type="work"] .vision-work-entry-media .entry-cover > .vision-work-preview-image,
#work-grid-container [data-post-type="work"] .vision-work-entry-media .entry-cover > .vision-work-preview-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.filtered-content[data-post-type="work"] .vision-work-entry-media > .vision-work-preview-image,
#work-grid-container [data-post-type="work"] .vision-work-entry-media > .vision-work-preview-image {
	height: auto !important;
}

.filtered-content[data-post-type="work"] .entry-work-grid .vision-work-entry-media > .vision-work-preview-image,
#work-grid-container [data-post-type="work"] .entry-work-grid .vision-work-entry-media > .vision-work-preview-image {
	height: 100% !important;
}

.filtered-content[data-post-type="work"] .vision-work-entry-media::after,
#work-grid-container [data-post-type="work"] .vision-work-entry-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(4, 8, 11, 0.42) 0%,
		rgba(4, 8, 11, 0.12) 36%,
		rgba(4, 8, 11, 0.12) 64%,
		rgba(4, 8, 11, 0.44) 100%
	);
}

.vision-work-has-video {
	position: relative;
}

.vision-work-video-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.42);
	background: rgba(6, 9, 14, 0.56);
	color: #f1f8ff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1;
	pointer-events: none;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.vision-work-video-badge-icon {
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid currentColor;
	margin-left: 1px;
}

.filtered-content[data-post-type="work"] .entry-summary .vision-work-card-client-logo,
#work-grid-container .entry-summary .vision-work-card-client-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: fit-content;
	max-width: min(248px, 84%);
	min-height: clamp(40px, 3.2vw, 54px);
	height: auto;
	margin: 0 0 clamp(10px, 1.2vw, 14px);
	padding: 6px 14px;
	line-height: 0;
	overflow: visible;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(5, 10, 14, 0.56);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.filtered-content[data-post-type="work"] .entry-summary .vision-work-card-client-logo-image,
#work-grid-container .entry-summary .vision-work-card-client-logo-image {
	display: block;
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: clamp(28px, 2.2vw, 38px);
	object-fit: contain;
	object-position: left center;
	filter: brightness(1.02) contrast(1.04);
}

/* Keep work-card hierarchy readable (logo + title on top, taxonomy bottom)
 * without relying on :has() to reduce expensive selector recalculation.
 */
.filtered-content[data-post-type="work"] .entry-summary,
#work-grid-container .entry-summary {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left !important;
	min-height: 100%;
}

.filtered-content[data-post-type="work"] .entry-summary .entry-title,
#work-grid-container .entry-summary .entry-title {
	margin-top: 0;
	margin-bottom: 0;
}

.filtered-content[data-post-type="work"] .entry-summary .entry-taxonomy,
#work-grid-container .entry-summary .entry-taxonomy {
	margin-top: auto;
	padding-top: 10px;
}

@media (max-width: 768px) {
	.filtered-content[data-post-type="work"] .entry-summary .vision-work-card-client-logo,
	#work-grid-container .entry-summary .vision-work-card-client-logo {
		max-width: min(192px, 86%);
		min-height: 44px;
		padding: 6px 12px;
	}

	.filtered-content[data-post-type="work"] .entry-summary .vision-work-card-client-logo-image,
	#work-grid-container .entry-summary .vision-work-card-client-logo-image {
		max-height: 34px;
	}
}

.vision-project-media-stack {
	display: grid;
	gap: 20px;
	margin: 0 0 18px;
}

.vision-project-videos-stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.vision-project-instagram-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.vision-project-instagram-item {
	grid-column: span 2;
}

.vision-project-instagram-grid.is-count-1 .vision-project-instagram-item {
	grid-column: 1 / -1;
}

.vision-project-instagram-grid.is-count-2 .vision-project-instagram-item {
	grid-column: span 3;
}

.vision-project-instagram-grid.has-tail-1 .vision-project-instagram-item:last-child {
	grid-column: 1 / -1;
}

.vision-project-instagram-grid.has-tail-2 .vision-project-instagram-item:nth-last-child(-n + 2) {
	grid-column: span 3;
}

.single-work .content-wrapper {
	padding-top: clamp(8px, 1.4vw, 20px);
}

/*
 * Theme base uses `.site-container { overflow: hidden; }`, which can disable
 * native `position: sticky` in single work layouts. Keep overflow visible here
 * so the infos panel can stick correctly across browsers.
 */
.single-work .site-container,
.single-work #page,
.single-work #page-content,
.single-work #primary,
.single-work #content.site-content {
	overflow: visible !important;
}

/* Single project desktop layout:
 * - left column: Infos projet card
 * - right column: media block (video/gallery)
 * Both start on the same top baseline.
 */
.single-work .entry-single-work {
	width: 100%;
	max-width: none;
	margin: 0;
	overflow: visible;
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	contain: none !important;
}

.single-work .entry-single-work .vision-project-content {
	width: min(100%, 1400px);
	max-width: 1400px;
	margin: 0 auto;
	overflow: visible;
}

.single-work.single-work-width-fullwidth .entry-single-work .vision-project-content {
	width: 100%;
	max-width: none;
}

.single-work .entry-single-work .vision-project-grid {
	display: grid;
	grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
	align-items: stretch;
	column-gap: clamp(16px, 2.8vw, 40px);
	row-gap: 0;
	width: 100%;
	overflow: visible;
	position: relative;
	isolation: isolate;
}

.single-work .entry-single-work .vision-project-aside {
	float: none !important;
	width: 100% !important;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	display: block;
	align-self: stretch;
	overflow: visible;
	position: relative;
	z-index: 30;
}

/* Theme legacy sticky-kit targets `.work-info-container` and can inject inline
 * fixed positioning/width while scrolling. Force this wrapper to remain the
 * left grid column and let only the inner wrapper be sticky.
 */
.single-work .entry-single-work .vision-project-aside.work-info-container,
.single-work .entry-single-work .vision-project-aside.work-info-container.is_stuck {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	width: 100% !important;
	max-width: none !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	transform: none !important;
	will-change: auto !important;
}

/* Safety: if sticky-kit already injected a wrapper before detach, keep it
 * constrained to the left grid column so width can never jump full page.
 */
.single-work .entry-single-work .vision-project-grid > .sticky-wrapper,
.single-work .entry-single-work .vision-project-grid > .sticky_parent,
.single-work .entry-single-work .vision-project-grid > .sticky-parent {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	align-self: stretch;
}

.single-work .entry-single-work .vision-project-main {
	float: none !important;
	width: 100% !important;
	max-width: none;
	min-width: 0;
	margin: 0;
	align-self: start;
	position: relative;
	z-index: 10;
}

.single-work .entry-single-work .vision-project-content,
.single-work .entry-single-work .vision-project-grid,
.single-work .entry-single-work .vision-project-aside,
.single-work .entry-single-work .vision-project-main {
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	overflow: visible;
}

.single-work .entry-single-work .vision-project-aside > .entry-title,
.single-work .entry-single-work .vision-project-aside > .work-excerpt-container,
.single-work .entry-single-work .vision-project-aside .entry-title,
.single-work .entry-single-work .vision-project-aside .work-excerpt-container {
	display: none !important;
}

.single-work .entry-single-work .vision-project-aside .work-meta-container {
	float: none !important;
	width: 100% !important;
	min-width: 0;
	height: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.single-work .entry-single-work .vision-project-aside-inner {
	display: block;
	width: 100%;
	max-width: none;
	min-width: 0;
	height: auto;
}

.single-work .entry-single-work .vision-project-aside__sticky {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	z-index: 40;
}

@media (min-width: 981px) {
	.single-work .entry-single-work .vision-project-aside {
		min-width: 360px;
	}

	.single-work .entry-single-work .vision-project-aside__sticky,
	.single-work .entry-single-work .vision-project-aside__sticky.vision-css-sticky {
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--vision-header-safe, 120px) + 8px);
		width: 100%;
		max-width: 100%;
		min-width: 0;
		left: auto !important;
		right: auto !important;
		z-index: 60;
	}
}

@media (max-width: 980px) {
	.single-work .entry-single-work .vision-project-aside.work-info-container,
	.single-work .entry-single-work .vision-project-aside.work-info-container.is_stuck {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		max-width: none !important;
		transform: none !important;
	}

	.single-work .entry-single-work .vision-project-aside__sticky,
	.single-work .entry-single-work .vision-project-aside__sticky.vision-css-sticky {
		position: static !important;
		top: auto;
	}
}

.single-work .entry-single-work .vision-project-aside .vision-project-info-card {
	margin-top: 0;
}

.vision-project-video-item,
.vision-project-video-section,
.vision-project-gallery-section,
.vision-project-editor-content,
.vision-project-info-card {
	border-radius: 18px;
	border: 1px solid var(--vision-project-border);
	background: var(--vision-project-surface);
	box-shadow: var(--vision-project-shadow);
}

.vision-project-video-section,
.vision-project-gallery-section,
.vision-project-editor-content {
	padding: clamp(14px, 1.8vw, 24px);
}

.vision-project-video-embed-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	background: #000;
}

body.single-work .vision-media-wrap {
	position: relative;
	overflow: hidden;
}

body.single-work .vision-media-wrap .vision-skel {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 1;
	transition: opacity .28s ease, transform .28s ease;
	background:
		radial-gradient(120% 140% at 20% 0%, rgba(153, 182, 162, .16) 0%, rgba(0, 0, 0, 0) 55%),
		linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
}

body.single-work .vision-media-wrap .vision-skel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(153,182,162,.12) 20%, rgba(255,255,255,0) 45%);
	transform: translateX(-110%);
	opacity: .78;
}

body.single-work .vision-media-wrap .vision-skel::after {
	content: "";
	position: absolute;
	inset: -40%;
	background: radial-gradient(circle at 30% 30%, rgba(153,182,162,.10), transparent 55%);
	filter: blur(18px);
	opacity: .55;
}

body.single-work .vision-media-wrap.is-ready .vision-skel,
body.single-work .vision-media-wrap .vision-skel.is-done {
	opacity: 0;
	transform: translateY(-2px);
}

body.single-work .vision-media-wrap .vision-media {
	position: relative;
	z-index: 2;
}

/* Keep embed slots visually stable and reveal progressively. */
body.single-work .vision-project-video-embed-wrap.vision-media-wrap .vision-media {
	opacity: 0;
	transition: opacity .32s ease;
}

body.single-work .vision-project-video-embed-wrap.vision-media-wrap.is-ready .vision-media {
	opacity: 1;
}

body.single-work .vision-skel-badge {
	position: absolute;
	right: 12px;
	top: 12px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.1);
	background: rgba(0,0,0,.35);
	color: rgba(255,255,255,.78);
	font-size: 11px;
	letter-spacing: .02em;
	line-height: 1;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.vision-project-video-embed-wrap[data-aspect="9-16"] {
	aspect-ratio: 9 / 16;
	max-width: min(100%, 520px);
	margin-left: auto;
	margin-right: auto;
}

.vision-project-instagram-grid .vision-project-video-embed-wrap[data-aspect="9-16"] {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.vision-project-video-embed-wrap [hidden] {
	display: none !important;
}

.vision-project-video-embed {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.vision-project-video-embed-wrap--facebook {
	cursor: auto;
	aspect-ratio: auto;
	min-height: clamp(240px, 34vw, 680px);
	background: transparent;
}

.vision-project-video-embed-wrap--facebook.is-ready {
	min-height: 0;
}

.vision-project-video-item--full .vision-project-video-embed-wrap {
	width: 100%;
}

.vision-project-video-embed-wrap--instagram-direct {
	background: #05080c;
}

.vision-instagram-direct-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #05080c;
}

/*
 * For a single Instagram video (or the full-width tail item), keep a
 * horizontal 16:9 frame so the block does not become excessively tall.
 * The vertical media stays fully visible inside the frame.
 */
.vision-project-instagram-item--scoped .vision-project-video-embed-wrap--instagram-direct {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
}

.vision-project-instagram-item--scoped .vision-instagram-direct-video {
	object-fit: contain;
	background: #05080c;
}

body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: clamp(14px, 2.2vw, 24px);
	text-align: center;
	background:
		radial-gradient(120% 140% at 20% 0%, rgba(143, 184, 160, 0.12) 0%, rgba(5, 8, 12, 0) 58%),
		linear-gradient(180deg, rgba(5, 8, 12, 0.78), rgba(5, 8, 12, 0.94));
}

body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback p {
	margin: 0;
	max-width: 30ch;
	color: rgba(233, 244, 255, 0.9);
	font-size: clamp(0.95rem, 1.45vw, 1.1rem);
	line-height: 1.35;
	font-weight: 500;
	text-wrap: balance;
}

body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-runtime-fallback {
	position: absolute;
	inset: 0;
	z-index: 5;
}

body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 11px;
	width: min(100%, 420px);
	max-width: 100%;
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid rgba(207, 229, 245, 0.28);
	background: linear-gradient(170deg, rgba(9, 14, 22, 0.72), rgba(8, 13, 20, 0.9));
	box-shadow:
		0 10px 20px rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: #f4f8ff;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(207, 229, 245, 0.28) !important;
	font-weight: 600;
	line-height: 1.2;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link:hover,
body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link:focus-visible {
	border-color: rgba(173, 218, 191, 0.62) !important;
	background: linear-gradient(170deg, rgba(12, 20, 29, 0.86), rgba(11, 18, 27, 0.95));
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow:
		0 14px 26px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link:focus-visible {
	outline: 2px solid rgba(230, 243, 255, 0.72);
	outline-offset: 2px;
}

body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}

body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link__label {
	min-width: 0;
	font-size: clamp(0.98rem, 1.2vw, 1.15rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}

body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link__arrow {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 980px) {
	body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback {
		gap: 12px;
		padding: 14px;
	}

	body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback p {
		max-width: 26ch;
		font-size: 0.96rem;
	}

	body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link {
		width: 100%;
		max-width: 100%;
		padding: 11px 14px;
	}

	body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link__label {
		font-size: 0.98rem;
	}
}

@media (max-width: 560px) {
	body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback {
		padding: 12px;
		gap: 10px;
	}

	body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback p {
		max-width: 24ch;
		font-size: 0.92rem;
	}

	body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link {
		padding: 10px 12px;
	}

	body.single-work .vision-project-video-embed-wrap--instagram-direct .vision-instagram-direct-fallback-link__label {
		font-size: 0.93rem;
	}
}

.vision-facebook-video-player {
	position: relative;
}

.vision-facebook-video-player--direct {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.vision-facebook-video-player--inline {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.vision-facebook-video-player--xfbml {
	position: relative;
	z-index: 2;
}

.vision-facebook-video-placeholder .vision-facebook-video-player {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.vision-facebook-video-player--inline iframe,
.vision-facebook-video-player--direct iframe,
.vision-facebook-video-placeholder .vision-facebook-video-player iframe {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.vision-facebook-video-player--xfbml .fb-video,
.vision-facebook-video-player--xfbml .fb-video > span,
.vision-facebook-video-player--xfbml iframe {
	display: block !important;
	width: 100% !important;
}

.vision-youtube-video-placeholder,
.vision-facebook-video-placeholder {
	position: absolute;
	inset: 0;
}

.vision-youtube-video-cover-wrap {
	position: absolute;
	inset: 0;
	display: block;
}

.vision-facebook-video-cover,
.vision-youtube-video-cover {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vision-youtube-video-player {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.vision-youtube-video-player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.vision-project-video-embed-wrap--instagram {
	--vision-instagram-aspect: 16 / 9;
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: var(--vision-instagram-aspect);
	border-radius: 14px;
	overflow: hidden;
	background: radial-gradient(circle at 24% 12%, rgba(26, 184, 138, 0.24), rgba(5, 8, 12, 0.96) 58%);
}

/* Ensure runtime hidden states always win for overlay/fallback layers. */
.vision-project-video-embed-wrap--instagram [hidden] {
	display: none !important;
}

.vision-project-video-embed-wrap--instagram[data-aspect="9-16"] {
	--vision-instagram-aspect: 9 / 16;
	max-width: min(100%, 520px);
	margin-left: auto;
	margin-right: auto;
}

.vision-instagram-video-cover {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vision-instagram-video-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: rgba(7, 11, 16, 0.56);
	color: #f2f7fd;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.vision-instagram-video-play {
	position: relative;
	z-index: 3;
}

.vision-video-load-button {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 3;
	min-width: 140px;
	justify-content: center;
}

.vision-instagram-video-play.collab-btn--sm {
	font-size: 13px;
	padding: 9px 14px;
	min-height: auto;
}

.vision-instagram-video-play .collab-arrow {
	width: 16px;
	height: 16px;
}

.vision-instagram-video-player {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.vision-instagram-video-player iframe {
	display: block;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	background: #05080c;
}

.vision-instagram-video-player .vision-instagram-video-element {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #05080c;
}

.vision-project-video-embed-wrap--instagram[data-instagram-state="loading"] .vision-instagram-video-play {
	opacity: 0.7;
	pointer-events: none;
}

.vision-instagram-video-fallback {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 10px;
	padding: 20px;
	text-align: center;
	background: linear-gradient(180deg, rgba(4, 7, 12, 0.34) 0%, rgba(4, 7, 12, 0.88) 70%);
}

.vision-instagram-video-fallback-message {
	margin: 0;
	color: #eef4fb;
	font-size: 13px;
	line-height: 1.5;
}

.vision-instagram-video-fallback-cta.collab-btn--sm {
	font-size: 13px;
	padding: 9px 14px;
	min-height: auto;
}

.vision-project-video-embed-wrap--instagram[data-instagram-state="ready"] .vision-instagram-video-cover,
.vision-project-video-embed-wrap--instagram[data-instagram-state="ready"] .vision-instagram-video-play,
.vision-project-video-embed-wrap--instagram[data-instagram-state="ready"] .vision-instagram-video-badge {
	display: none !important;
}

.vision-youtube-video-placeholder[data-youtube-state="ready"] .vision-youtube-video-cover,
.vision-youtube-video-placeholder[data-youtube-state="ready"] .vision-youtube-video-play,
.vision-youtube-video-placeholder[data-youtube-state="ready"] .vision-instagram-video-badge,
.vision-facebook-video-placeholder[data-facebook-state="ready"] .vision-facebook-video-cover,
.vision-facebook-video-placeholder[data-facebook-state="ready"] .vision-facebook-video-play,
.vision-facebook-video-placeholder[data-facebook-state="ready"] .vision-instagram-video-badge {
	display: none !important;
}

.vision-project-gallery-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 10px;
}

.vision-project-gallery-item {
	grid-column: span 4;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid rgba(194, 220, 203, 0.18);
	background: rgba(255, 255, 255, 0.02);
}

.single-work .vision-project-gallery-item.vision-media-card {
	aspect-ratio: 4 / 3;
}

.single-work .vision-project-gallery-item .vision-media-skeleton {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	background:
		linear-gradient(110deg, rgba(255, 255, 255, 0.04) 8%, rgba(255, 255, 255, 0.12) 18%, rgba(255, 255, 255, 0.04) 33%),
		linear-gradient(180deg, rgba(7, 12, 18, 0.92), rgba(6, 10, 14, 0.96));
	background-size: 260% 100%, 100% 100%;
	background-position: 100% 0, 0 0;
	transition: opacity 0.24s ease;
}

html.vision-js .single-work .vision-project-gallery-item.vision-media-card.is-pending .vision-media-skeleton {
	opacity: 1;
	animation: vision-gallery-shimmer 1.3s linear infinite;
}

.vision-project-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.single-work .vision-project-gallery-item.vision-media-card .vision-project-gallery-image {
	position: relative;
	z-index: 2;
	opacity: 1;
	transition: opacity 0.24s ease, transform 0.2s ease;
}

html.vision-js .single-work .vision-project-gallery-item.vision-media-card.is-pending .vision-project-gallery-image {
	opacity: 0;
}

.single-work .vision-project-gallery-item.vision-media-card.is-loaded .vision-project-gallery-image {
	opacity: 1;
}

.vision-project-gallery-item:hover img {
	transform: scale(1.02);
}

@keyframes vision-gallery-shimmer {
	0% {
		background-position: 100% 0, 0 0;
	}

	100% {
		background-position: -120% 0, 0 0;
	}
}

@keyframes vision-media-shimmer {
	0% {
		transform: translateX(-110%);
	}

	100% {
		transform: translateX(110%);
	}
}

@keyframes vision-media-breathe {
	0%,
	100% {
		opacity: .42;
		transform: scale(1);
	}

	50% {
		opacity: .68;
		transform: scale(1.05);
	}
}

@media (prefers-reduced-motion: no-preference) {
	body.single-work .vision-media-wrap .vision-skel::before {
		animation: vision-media-shimmer 1.7s ease-in-out infinite;
	}

	body.single-work .vision-media-wrap .vision-skel::after {
		animation: vision-media-breathe 3.5s ease-in-out infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.vision-js .single-work .vision-project-gallery-item.vision-media-card.is-pending .vision-media-skeleton {
		animation: none;
	}

	body.single-work .vision-media-wrap .vision-skel::before,
	body.single-work .vision-media-wrap .vision-skel::after {
		animation: none !important;
	}
}

.vision-project-editor-content {
	color: var(--vision-project-text-soft);
	line-height: 1.7;
}

.vision-project-editor-content :is(h1, h2, h3, h4, h5, h6) {
	color: var(--vision-project-text);
}

.vision-project-info-card {
	padding: 16px;
	margin-top: 12px;
	overflow: hidden;
}

.vision-project-info-title {
	margin: 0 0 12px;
	font-size: 1rem;
	color: var(--vision-project-text);
}

.vision-project-client-logo {
	margin-bottom: 12px;
	padding: 8px 4px 10px;
	border-radius: 0;
	border: 0;
	background: transparent;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vision-project-client-logo img,
.vision-project-client-logo .vision-project-client-logo-image {
	display: block;
	max-width: min(100%, 230px);
	max-height: clamp(58px, 8vw, 86px);
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center center;
	border-radius: 0;
}

.vision-project-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
}

.vision-project-info-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 1px dashed rgba(172, 192, 214, 0.2);
}

.vision-project-info-label {
	color: rgba(181, 201, 225, 0.82);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.vision-project-info-value {
	color: var(--vision-project-text);
	text-align: right;
	max-width: 65%;
	overflow-wrap: anywhere;
}

.vision-project-info-taxonomy {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.vision-project-info-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.74rem;
	letter-spacing: 0.02em;
	color: #e7f4ec;
	background: rgba(143, 184, 160, 0.2);
	border: 1px solid rgba(143, 184, 160, 0.36);
}

.vision-project-service-block {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(172, 192, 214, 0.2);
	display: grid;
	gap: 10px;
	min-height: 150px;
}

.vision-service-chosen {
	display: grid;
	gap: 8px;
}

.vision-service-chosen__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.vision-project-service-label {
	display: inline-flex;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(181, 201, 225, 0.82);
}

.vision-project-service-value {
	margin: 0;
	color: var(--vision-project-text);
	font-size: 0.98rem;
	font-weight: 600;
}

.vision-service-chosen__title {
	line-height: 1.3;
}

.vision-project-service-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	color: #e6f5ee;
	background: rgba(104, 152, 129, 0.2);
	border: 1px solid rgba(134, 187, 161, 0.36);
	width: fit-content;
}

.vision-project-service-description {
	margin: 0;
	color: var(--vision-project-text-soft);
	font-size: 0.86rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vision-service-chosen--compact .vision-service-desc {
	font-size: 0.8rem;
	line-height: 1.4;
	-webkit-line-clamp: 1;
}

.vision-project-service-inclusions-wrap {
	display: grid;
	gap: 6px;
}

.vision-project-service-inclusions-label {
	display: inline-flex;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(181, 201, 225, 0.78);
}

.vision-project-service-inclusions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 5px;
}

.vision-project-service-inclusions li {
	position: relative;
	padding-left: 12px;
	font-size: 0.83rem;
	line-height: 1.45;
	color: var(--vision-project-text-soft);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vision-project-service-inclusions li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.56em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(143, 184, 160, 0.9);
	box-shadow: 0 0 0 3px rgba(143, 184, 160, 0.16);
}

.vision-service-chosen--compact .service-includes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	min-height: 30px;
	align-items: flex-start;
}

.vision-service-chosen--compact .vision-service-chip {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	max-width: 100%;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.74rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: rgba(229, 241, 255, 0.93);
	border: 1px solid rgba(170, 196, 223, 0.28);
	background: rgba(15, 25, 34, 0.54);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vision-service-chosen--compact .vision-service-chip--more {
	color: rgba(210, 231, 216, 0.95);
	border-color: rgba(143, 184, 160, 0.4);
	background: rgba(72, 112, 94, 0.24);
}

/* CTA fallback so project pages keep theme CTA look even without global collab styles loaded. */
.vision-project-service-cta.collab-btn.collab-btn--sm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	border-radius: 999px;
	padding: 9px 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: #0b0b0b;
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
	max-width: 100%;
}

.vision-project-service-cta.collab-btn.collab-btn--sm .collab-text {
	font-size: 14px;
	line-height: 1;
}

.vision-project-service-cta.collab-btn.collab-btn--sm .collab-arrow {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

.vision-project-service-cta.collab-btn.collab-btn--sm:hover,
.vision-project-service-cta.collab-btn.collab-btn--sm:focus {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
	background-color: #f7f7f7;
	color: #0b0b0b;
}

.vision-project-service-cta.collab-btn.collab-btn--sm:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

.vision-service-chosen--compact .vision-project-service-cta.collab-btn.collab-btn--sm {
	padding: 7px 12px;
	font-size: 13px;
	gap: 8px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.vision-service-chosen--compact .vision-project-service-cta.collab-btn.collab-btn--sm .collab-text {
	font-size: 13px;
}

.vision-service-chosen--compact .vision-project-service-cta.collab-btn.collab-btn--sm .collab-arrow {
	width: 16px;
	height: 16px;
}

body.single-work .vision-client-links {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(172, 192, 214, 0.2);
}

body.single-work .vision-client-links__title {
	margin: 0 0 8px;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(184, 204, 228, 0.78);
}

body.single-work .vision-client-link {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid rgba(172, 192, 214, 0.24);
	background: linear-gradient(170deg, rgba(13, 21, 29, 0.86), rgba(7, 12, 18, 0.92));
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	text-decoration: none;
	color: #edf5ff;
	transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

body.single-work .vision-client-link:hover,
body.single-work .vision-client-link:focus-visible {
	transform: translateY(-1px);
	border-color: rgba(199, 223, 247, 0.46);
	background: linear-gradient(170deg, rgba(16, 26, 36, 0.94), rgba(9, 15, 22, 0.96));
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}

body.single-work .vision-client-link:focus-visible {
	outline: 2px solid rgba(230, 241, 255, 0.74);
	outline-offset: 2px;
}

body.single-work .vision-client-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(240, 248, 255, 0.9);
}

body.single-work .vision-client-link__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

body.single-work .vision-client-link__favicon {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	object-fit: contain;
}

body.single-work .vision-client-link__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	color: #edf5ff;
}

body.single-work .vision-client-link__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	color: rgba(236, 245, 255, 0.92);
}

body.single-work .vision-client-link__arrow svg {
	display: block;
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 980px) {
	.single-work .entry-single-work .vision-project-content {
		width: 100%;
		max-width: 100%;
	}

	.single-work .entry-single-work .vision-project-grid {
		display: block;
	}

	.single-work .entry-single-work .vision-project-main {
		float: none !important;
		width: 100% !important;
		margin: 0;
	}

	.single-work .entry-single-work .vision-project-aside {
		float: none !important;
		width: 100% !important;
		min-width: 0;
		margin-top: 0;
		margin-bottom: clamp(16px, 3.2vw, 24px);
	}

	.single-work .work-info-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.single-work .work-info-container .work-meta-container {
		float: none !important;
		width: 100% !important;
		grid-column: auto;
	}

	.single-work .entry-single-work .vision-project-aside-inner {
		position: relative;
		top: auto;
		width: 100%;
		max-width: 100%;
	}

	.vision-project-gallery-item {
		grid-column: span 6;
	}

	.vision-project-instagram-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vision-project-instagram-item,
	.vision-project-instagram-grid.is-count-2 .vision-project-instagram-item,
	.vision-project-instagram-grid.has-tail-2 .vision-project-instagram-item:nth-last-child(-n + 2) {
		grid-column: span 1;
	}

	.vision-project-instagram-grid.is-count-1 .vision-project-instagram-item,
	.vision-project-instagram-grid.has-tail-1 .vision-project-instagram-item:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.vision-work-video-badge {
		top: 8px;
		right: 8px;
		padding: 5px 8px;
		font-size: 10px;
	}

	.vision-project-gallery-item {
		grid-column: span 12;
	}

	.vision-project-instagram-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.vision-project-instagram-item,
	.vision-project-instagram-grid.is-count-2 .vision-project-instagram-item,
	.vision-project-instagram-grid.has-tail-2 .vision-project-instagram-item:nth-last-child(-n + 2),
	.vision-project-instagram-grid.has-tail-1 .vision-project-instagram-item:last-child {
		grid-column: 1 / -1;
	}

	.vision-project-info-list li {
		flex-direction: column;
		gap: 4px;
	}

	.vision-project-info-value {
		max-width: 100%;
		text-align: left;
	}

	.vision-project-service-cta.collab-btn.collab-btn--sm {
		width: 100%;
		justify-content: space-between;
	}
}

@media (max-width: 520px) {
	.single-work .entry-single-work .vision-project-content,
	.single-work .entry-single-work .vision-project-main,
	.single-work .entry-single-work .vision-project-aside,
	.single-work .vision-project-info-card {
		width: 100% !important;
		min-width: 0;
	}
}