.motiondeck-project {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
}

.motiondeck-project *,
.motiondeck-project *::before,
.motiondeck-project *::after {
	box-sizing: border-box;
}

.motiondeck-project--contained {
	max-width: 100%;
}

.motiondeck-project--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.motiondeck-project__inner {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.motiondeck-node {
	max-width: 100%;
}

.motiondeck-node--row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.motiondeck-node--stack {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.motiondeck-node--card,
.motiondeck-node--media-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.motiondeck-node--carousel-track {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	width: 100%;
	position: relative;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.motiondeck-node--carousel-track > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.motiondeck-carousel-wrap {
	position: relative;
	width: 100%;
}

.motiondeck-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2rem;
	height: 2rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: color-mix(in srgb, #fff 88%, transparent);
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.motiondeck-carousel-btn--prev {
	left: 0.35rem;
}

.motiondeck-carousel-btn--next {
	right: 0.35rem;
}

.motiondeck-node--scene {
	display: block;
	width: 100%;
}

.motiondeck-node--button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
}

.motiondeck-node--image {
	display: block;
	max-width: 100%;
	object-fit: var(--md-object-fit, cover);
	object-position: var(--md-object-position, center center);
}

.motiondeck-node--image-frame {
	display: block;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.motiondeck-node--image-frame > .motiondeck-node--image {
	width: 100%;
	height: 100%;
	max-width: none;
}

.motiondeck-node--image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 8rem;
	aspect-ratio: 3 / 4;
	padding: 0.75rem;
	border-radius: 0.5rem;
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: inherit;
	opacity: 0.75;
	font-size: 0.8125rem;
	text-align: center;
}

.motiondeck-role--slide {
	display: block;
	width: 100%;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 12rem;
}

/* Fixed design stage (e.g. 1440×860) scaled to the slide shell width. */
.motiondeck-slide--canvas {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	container-type: inline-size;
	container-name: md-slide;
}

.motiondeck-slide--canvas > .motiondeck-slide-stage {
	position: relative;
	transform-origin: top left;
	will-change: transform;
	pointer-events: auto;
}

/* Prefer JS scale (always). CQ scale is a progressive enhancement when vars are unitless. */
.motiondeck-slide--canvas[data-md-scaled="1"] > .motiondeck-slide-stage {
	position: absolute;
	left: 0;
	top: 0;
}

.motiondeck-project--one-page-website > .motiondeck-project__inner > .motiondeck-role--slide,
.motiondeck-project--type-one-page-website > .motiondeck-project__inner > .motiondeck-role--slide {
	width: 100%;
	max-width: 100%;
}

.motiondeck-project--full > .motiondeck-project__inner > .motiondeck-role--slide {
	max-width: none;
}

.motiondeck-project--one-page-website > .motiondeck-project__inner,
.motiondeck-project--type-one-page-website > .motiondeck-project__inner {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.motiondeck-project--one-page-website > .motiondeck-project__inner > .motiondeck-role--slide,
.motiondeck-project--type-one-page-website > .motiondeck-project__inner > .motiondeck-role--slide {
	flex: 0 0 auto;
}

body.motiondeck-canvas-page #wpadminbar {
	position: fixed;
}

.motiondeck-project--slider > .motiondeck-project__inner > .motiondeck-role--slide.is-hidden {
	display: none;
}

.motiondeck-project--slider > .motiondeck-project__inner > .motiondeck-role--slide.is-active {
	display: block;
}

.motiondeck-slider-chrome {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1rem;
	padding: 0.25rem 0 0.5rem;
}

.motiondeck-slider-btn {
	width: 2rem;
	height: 2rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.motiondeck-slider-dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.motiondeck-slider-dot {
	width: 0.55rem;
	height: 0.55rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 35%, transparent);
	cursor: pointer;
}

.motiondeck-slider-dot.is-active {
	background: currentColor;
}

.motiondeck-node--form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	max-width: 28rem;
}

.motiondeck-form__title {
	margin: 0;
	font-weight: 600;
}

.motiondeck-form__label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.875rem;
}

.motiondeck-form__control {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid currentColor;
	border-radius: 0.25rem;
	background: transparent;
	color: inherit;
	font: inherit;
}

.motiondeck-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1rem;
	border: 1px solid currentColor;
	border-radius: 0.25rem;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: default;
}

.motiondeck-form__check {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.md-motion {
	--md-motion-duration: 600ms;
	--md-motion-delay: 0ms;
	--md-motion-easing: ease-out;
}

.md-motion--pending {
	opacity: 0;
}

.md-motion--visible {
	animation-duration: var(--md-motion-duration);
	animation-delay: 0ms;
	animation-fill-mode: both;
	animation-timing-function: var(--md-motion-easing);
}

.md-motion--fade.md-motion--visible {
	animation-name: md-fade-in;
}

.md-motion--slide-up.md-motion--visible {
	animation-name: md-slide-up;
}

.md-motion--slide-left.md-motion--visible {
	animation-name: md-slide-left;
}

.md-motion--slide-right.md-motion--visible {
	animation-name: md-slide-right;
}

.md-motion--scale.md-motion--visible {
	animation-name: md-scale-in;
}

.md-motion--slide-down.md-motion--visible {
	animation-name: md-slide-down;
}

.md-motion--rotate.md-motion--visible {
	animation-name: md-rotate-in;
}

.md-motion--pulse.md-motion--visible {
	animation-name: md-pulse-in;
}

@keyframes md-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes md-slide-up {
	from { opacity: 0; translate: 0 1rem; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes md-slide-down {
	from { opacity: 0; translate: 0 -1rem; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes md-slide-left {
	from { opacity: 0; translate: 1rem 0; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes md-slide-right {
	from { opacity: 0; translate: -1rem 0; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes md-scale-in {
	from { opacity: 0; scale: 0.96; }
	to { opacity: 1; scale: 1; }
}

@keyframes md-rotate-in {
	from { opacity: 0; rotate: -8deg; scale: 0.96; }
	to { opacity: 1; rotate: 0deg; scale: 1; }
}

@keyframes md-pulse-in {
	0% { opacity: 0; scale: 0.92; }
	70% { opacity: 1; scale: 1.03; }
	100% { opacity: 1; scale: 1; }
}

@media (max-width: 782px) {
	.motiondeck-node--row {
		flex-direction: column;
		align-items: stretch;
	}

	.motiondeck-project--full {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.motiondeck-project,
	.motiondeck-project * {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.md-motion--pending {
		opacity: 1;
	}
}

.motiondeck-project--reduced-motion,
.motiondeck-project--reduced-motion * {
	animation: none !important;
	transition: none !important;
}

.motiondeck-project--reduced-motion .md-motion--pending {
	opacity: 1;
}

.md-is-hidden,
.motiondeck-node[hidden] {
	display: none !important;
}

/* Advanced Motion text choreography and exit-phase support. */
.md-motion-text-unit {
	display: inline-block;
	white-space: pre;
	will-change: transform, opacity;
}

.motiondeck-role--slide.is-exiting {
	position: absolute;
	inset: 0;
	width: 100%;
	pointer-events: none;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.md-motion-text-unit {
		transform: none !important;
		opacity: 1 !important;
	}
}

/* Completion Stage 3: Carousel Pro, Scroll FX, and richer media. */
.motiondeck-node--carousel-track {
	gap: var(--md-carousel-gap, 1rem);
}

.motiondeck-node--carousel-track > * {
	flex-basis: var(--md-carousel-item-width, auto);
	transition: translate 220ms ease, rotate 220ms ease, scale 220ms ease, opacity 220ms ease;
	transform-origin: center center;
}

.motiondeck-carousel-wrap--center .motiondeck-node--carousel-track {
	scroll-padding-inline: 18%;
}

.motiondeck-carousel-wrap--center .motiondeck-node--carousel-track > * {
	scroll-snap-align: center;
}

.motiondeck-carousel-wrap--coverflow .motiondeck-node--carousel-track,
.motiondeck-carousel-wrap--stacked .motiondeck-node--carousel-track {
	perspective: 1000px;
	padding-block: 1rem;
}

.motiondeck-carousel-wrap--vertical .motiondeck-node--carousel-track {
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	max-height: min(70vh, 720px);
}

.motiondeck-carousel-wrap--vertical .motiondeck-node--carousel-track > * {
	width: 100%;
	scroll-snap-align: start;
}

.motiondeck-node--audio,
.motiondeck-node--video {
	display: block;
	width: 100%;
	max-width: 100%;
}

.motiondeck-node--audio-placeholder,
.motiondeck-node--video-placeholder {
	display: grid;
	place-items: center;
	min-height: 5rem;
	padding: 1rem;
	border: 1px dashed color-mix(in srgb, currentColor 28%, transparent);
	border-radius: 0.625rem;
	opacity: 0.7;
}

.motiondeck-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
	gap: 0.75rem;
}

.motiondeck-gallery > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: inherit;
}

.md-scroll-fx {
	translate: var(--md-scroll-translate, 0 0);
	scale: var(--md-scroll-scale, 1);
	rotate: var(--md-scroll-rotate, 0deg);
	opacity: var(--md-scroll-opacity, 1);
	will-change: translate, scale, rotate, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.motiondeck-node--carousel-track > *,
	.md-scroll-fx {
		transition: none !important;
		transform: none !important;
		translate: none !important;
		scale: none !important;
		rotate: none !important;
		opacity: 1 !important;
	}
}

/* MotionDeck Pro visual effects: canvases remain scoped to the effect host. */
.md-fx-host {
	position: relative;
	isolation: isolate;
}
.md-fx-host > .md-fx-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	border-radius: inherit;
}
.md-fx-3d {
	perspective: var(--md-3d-perspective, 900px);
	transform-style: preserve-3d;
	transform: var(--md-fx-base-transform, translate3d(0,0,0)) perspective(var(--md-3d-perspective, 900px)) rotateX(var(--md-3d-rx, 0deg)) rotateY(var(--md-3d-ry, 0deg)) translateZ(var(--md-3d-z, 0px));
}
.md-fx-interactive--tilt {
	transform: var(--md-fx-base-transform, translate3d(0,0,0)) perspective(var(--md-3d-perspective, 900px)) rotateX(calc(var(--md-3d-rx, 0deg) + var(--md-tilt-x, 0deg))) rotateY(calc(var(--md-3d-ry, 0deg) + var(--md-tilt-y, 0deg))) translateZ(var(--md-3d-z, 0px));
	transition: transform 120ms ease-out;
}
.md-fx-interactive--magnetic {
	translate: var(--md-magnet-x, 0px) var(--md-magnet-y, 0px);
	transition: translate 120ms ease-out;
}
.md-fx-interactive--spotlight::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	border-radius: inherit;
	background: radial-gradient(circle at var(--md-pointer-x, 50%) var(--md-pointer-y, 50%), rgba(255,255,255,.24), transparent 34%);
	mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
	.md-fx-canvas { display: none !important; }
	.md-fx-interactive, .md-fx-3d { transform: none !important; translate: none !important; }
}

/* Data Visualisation */
.motiondeck-chart{margin:0;min-width:180px}.motiondeck-chart__label{font-weight:600;margin-bottom:.75rem}.motiondeck-chart__value{font-size:clamp(2rem,5vw,4.5rem);font-weight:700;line-height:1}.motiondeck-chart__progress{height:12px;border-radius:999px;background:rgba(127,127,127,.18);overflow:hidden;margin-top:.75rem}.motiondeck-chart__progress>span{display:block;height:100%;background:currentColor;border-radius:inherit}.motiondeck-chart__plot{display:flex;align-items:flex-end;gap:.6rem;min-height:180px}.motiondeck-chart__item{display:flex;flex:1;min-width:20px;height:180px;flex-direction:column;justify-content:flex-end;gap:.4rem}.motiondeck-chart__bar{height:var(--md-chart-value);min-height:4px;background:currentColor;border-radius:6px 6px 2px 2px;opacity:.8}.motiondeck-chart--line .motiondeck-chart__bar{width:4px;align-self:center;border-radius:999px}.motiondeck-chart--donut .motiondeck-chart__plot{min-height:auto;align-items:center;flex-wrap:wrap}.motiondeck-chart--donut .motiondeck-chart__item{height:auto;min-width:110px;flex-direction:row;align-items:center}.motiondeck-chart--donut .motiondeck-chart__bar{width:12px;height:12px;border-radius:50%}.motiondeck-chart__item-label{font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* MotionDeck modal interaction */
.md-modal-open{position:fixed!important;inset:5vh 5vw!important;z-index:2147480000!important;overflow:auto!important;display:block!important;max-width:90vw!important;max-height:90vh!important;box-shadow:0 24px 80px rgba(0,0,0,.35)}

/* MotionDeck design-system output. These variables keep template and public render
 * output consistent without exposing arbitrary CSS from project documents. */
.motiondeck-design--motiondeck-basic { --md-bg:#EEF2FF; --md-fg:#0F172A; --md-accent:#4F46E5; --md-muted:#64748B; --md-surface:#FFFFFF; --md-border:#CBD5E1; }
.motiondeck-design--motiondeck-studio { --md-bg:#ECFEFF; --md-fg:#0F172A; --md-accent:#06B6D4; --md-muted:#475569; --md-surface:#FFFFFF; --md-border:#CFFAFE; }
.motiondeck-design--motiondeck-noir { --md-bg:#0B1220; --md-fg:#E2E8F0; --md-accent:#94A3B8; --md-muted:#64748B; --md-surface:#111827; --md-border:#334155; }
.motiondeck-design--motiondeck-luxe { --md-bg:#1C1917; --md-fg:#FAF7F2; --md-accent:#D4A017; --md-muted:#A8A29E; --md-surface:#292524; --md-border:#57534E; }
.motiondeck-design--motiondeck-editorial { --md-bg:#FAFAF9; --md-fg:#18181B; --md-accent:#B91C1C; --md-muted:#52525B; --md-surface:#FFFFFF; --md-border:#D6D3D1; }
.motiondeck-design--motiondeck-neon { --md-bg:#0A0A0A; --md-fg:#F8FAFC; --md-accent:#22D3EE; --md-muted:#A855F7; --md-surface:#171717; --md-border:#3F3F46; }
.motiondeck-design--motiondeck-commerce { --md-bg:#F0FDF4; --md-fg:#14532D; --md-accent:#16A34A; --md-muted:#4B5563; --md-surface:#FFFFFF; --md-border:#BBF7D0; }
.motiondeck-design--motiondeck-property { --md-bg:#F0FDFA; --md-fg:#134E4A; --md-accent:#0F766E; --md-muted:#64748B; --md-surface:#FFFFFF; --md-border:#99F6E4; }
.motiondeck-design--motiondeck-automotive { --md-bg:#18181B; --md-fg:#FAFAFA; --md-accent:#DC2626; --md-muted:#A1A1AA; --md-surface:#27272A; --md-border:#52525B; }
.motiondeck-design--motiondeck-minimal { --md-bg:#F8FAFC; --md-fg:#0F172A; --md-accent:#334155; --md-muted:#94A3B8; --md-surface:#FFFFFF; --md-border:#E2E8F0; }

.motiondeck-project[class*="motiondeck-design--"] {
	background: var(--md-bg);
	color: var(--md-fg);
}

.motiondeck-project .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.motiondeck-node--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}

.motiondeck-node--media-panel,
.motiondeck-node--list {
	display: flex;
	flex-direction: column;
}

.motiondeck-node--card,
.motiondeck-node--media-card {
	background: var(--md-surface, transparent);
	border: 1px solid var(--md-border, currentColor);
}

.motiondeck-node--button {
	background: var(--md-accent, currentColor);
	color: #fff;
	border-radius: 0.5rem;
}

.motiondeck-node--image-placeholder {
	background: color-mix(in srgb, var(--md-accent, currentColor) 12%, var(--md-surface, transparent));
	border: 1px solid var(--md-border, currentColor);
}

.motiondeck-node--background-decor {
	width: 100%;
	background:
		radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--md-accent, currentColor) 35%, transparent), transparent 42%),
		linear-gradient(135deg, var(--md-surface, transparent), var(--md-bg, transparent));
}

.motiondeck-node--shape[data-md-geometry="path"] {
	background: transparent !important;
	overflow: visible;
}

.motiondeck-node--shape .motiondeck-shape__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.motiondeck-node--shape .motiondeck-shape__text {
	position: relative;
	z-index: 1;
}

@media (max-width: 782px) {
	.motiondeck-node--split {
		grid-template-columns: 1fr;
	}
}

.motiondeck-project .md-is-busy {
	cursor: progress;
	opacity: 0.72;
}

/* Accessibility preference: strong keyboard focus without forcing outlines on pointer clicks. */
.motiondeck-project--focus-visible :focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.motiondeck-project--carousel {
	overflow: hidden;
	max-width: 100%;
}

.motiondeck-project--carousel > .motiondeck-project__inner {
	overflow: hidden;
	max-width: 100%;
}

.motiondeck-project--carousel .motiondeck-node--carousel-track {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	align-items: stretch;
}

.motiondeck-project--carousel .motiondeck-node--carousel-track > * {
	flex: 0 0 var(--md-carousel-item-width, 22rem);
	width: var(--md-carousel-item-width, 22rem);
	max-width: min(var(--md-carousel-item-width, 22rem), 92vw);
	min-width: 0;
	box-sizing: border-box;
}

.motiondeck-project--carousel .motiondeck-node--external-component {
	display: block;
	width: 100%;
	min-width: 0;
}

.motiondeck-external-slot {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
	min-height: 18rem;
	padding: 1.25rem;
	border: 1px dashed color-mix(in srgb, currentColor 28%, transparent);
	border-radius: 1rem;
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.motiondeck-external-slot__label {
	margin: 0;
	font-weight: 700;
}

.motiondeck-external-slot__source {
	font-size: 0.85rem;
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.motiondeck-project--carousel .motiondeck-node--carousel-track {
		scroll-behavior: auto;
	}
}