/* ==========================================================================
   MX1 Video Portfolio — "Aperture"
   All rules are scoped to .mx1vp so the theme and other pages are untouched.
   ========================================================================== */

.mx1vp {
	/* Brand (sampled from the supplied MarketingX1 logo) */
	--mx1-blue: #365de3;
	--mx1-blue-bright: #4672f9;
	--mx1-glow: #5f98fd;
	--mx1-navy: #0b1141;
	--mx1-navy-2: #122571;
	/* Derived neutrals */
	--mx1-ink: #04061a;
	--mx1-ink-2: #080c2b;
	--mx1-paper: #f2f4ff;
	--mx1-mute: rgba(242, 244, 255, 0.66);
	--mx1-faint: rgba(242, 244, 255, 0.14);
	--mx1-line: rgba(242, 244, 255, 0.12);

	/* Type */
	--mx1-font: "MX1 Readex", "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	--mx1-fs-hero: clamp(1.95rem, 1.2rem + 2.2vw, 3.5rem);
	--mx1-fs-h2: clamp(2.1rem, 1.2rem + 3.6vw, 4.6rem);
	--mx1-fs-h3: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
	--mx1-fs-lead: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
	--mx1-fs-body: 1rem;
	--mx1-fs-small: 0.8125rem;

	/* Space & shape */
	--mx1-gutter: clamp(1rem, 0.4rem + 3vw, 3.5rem);
	--mx1-max: 1440px;
	--mx1-gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
	--mx1-cut: 22px; /* 45° chamfer echoing the MX1 monogram */
	--mx1-radius: 2px;

	/* Motion */
	--mx1-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mx1-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--mx1-dur: 0.9s;

	position: relative;
	isolation: isolate;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	background: var(--mx1-ink);
	color: var(--mx1-paper);
	font-family: var(--mx1-font);
	font-size: var(--mx1-fs-body);
	line-height: 1.7;
	text-align: start;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

body.mx1-vp-page { overflow-x: clip; }
/* WoodMart prints an empty page-title band above custom templates; the hero carries the title. */
body.mx1-vp-page .page-title { display: none; }
/* No gap between the header and the hero. */
body.mx1-vp-page .main-page-wrapper { padding-top: 0 !important; background: #04061a; }
body.mx1-vp-page .main-page-wrapper > .container, body.mx1-vp-page .content-layout-wrapper { padding-top: 0; margin-top: 0; }
/* WoodMart's cloned sticky bar (black, old logo) duplicates the real sticky header. */
body.mx1-vp-page .whb-clone { display: none !important; }
/* WoodMart's header overlays the content; keep the editor-only notice below it. */
body.mx1-vp-page .mx1vp-preview-flag { margin-block-start: 96px; }

/* Defensive resets against theme styles */
/* The site's custom CSS forces Tajawal on h1,h2,h3,span,div with !important. */
.mx1vp, .mx1vp :is(h1, h2, h3, h4, p, span, div, a, button, li, figcaption) { font-family: var(--mx1-font) !important; }
.mx1vp *, .mx1vp *::before, .mx1vp *::after { box-sizing: border-box; }
.mx1vp :where(h1, h2, h3, p, ul, ol, li, figure, sup) { margin: 0; padding: 0; color: inherit; font-family: inherit; letter-spacing: normal; text-transform: none; }
.mx1vp :where(ul, ol) { list-style: none; }
.mx1vp :where(img, video, iframe) { display: block; max-width: 100%; }
/* WoodMart styles every button with :is(.btn, button, ...) at class weight; .mx1vp button outranks it,
   and every component rule below carries .mx1vp + a class, so components still win over this reset. */
.mx1vp button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-transform: none; letter-spacing: normal; min-height: 0; box-shadow: none; border-radius: 0; line-height: inherit; text-align: inherit; }
.mx1vp button:hover, .mx1vp button:focus { background-color: transparent; color: inherit; }
.mx1vp :where(a) { color: inherit; text-decoration: none; }
.mx1vp :focus-visible { outline: 2px solid var(--mx1-glow); outline-offset: 4px; }
.mx1vp [dir="ltr"] { unicode-bidi: isolate; }
.mx1vp .mx1vp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shared bits ---------- */
.mx1vp .mx1vp-kicker {
	align-self: flex-start; justify-self: start;
	display: inline-flex; align-items: center; gap: 0.6em;
	font-size: var(--mx1-fs-small); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--mx1-glow);
}
.mx1vp .mx1vp-kicker::before { content: ""; width: 2.2em; height: 1px; background: currentColor; }
.mx1vp .mx1vp-h2 { font-size: var(--mx1-fs-h2); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.mx1vp .mx1vp-h3 { font-size: var(--mx1-fs-h3); font-weight: 500; line-height: 1.3; }
.mx1vp .mx1vp-h2 sup { font-size: 0.32em; font-weight: 400; color: var(--mx1-glow); vertical-align: super; margin-inline-start: 0.2em; letter-spacing: 0.08em; }

.mx1vp .mx1vp-badge {
	position: absolute; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: 3;
	padding: 0.25rem 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
	background: #ffd84d; color: #1a1400; border-radius: 2px; white-space: nowrap;
}

.mx1vp .mx1vp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mx1vp .mx1vp-btn {
	--cut: 12px;
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
	min-height: 52px; padding: 0.8rem 1.6rem; font-weight: 500; font-size: 1rem; line-height: 1.2;
	clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
	transition: background-color 0.35s var(--mx1-ease), color 0.35s var(--mx1-ease), transform 0.35s var(--mx1-ease);
}
.mx1vp .mx1vp-btn--primary { background: var(--mx1-blue); color: #fff; }
.mx1vp .mx1vp-btn--primary:hover { background: var(--mx1-blue-bright); color: #fff !important; }
.mx1vp .mx1vp-btn--ghost { background: var(--mx1-faint); color: var(--mx1-paper); box-shadow: inset 0 0 0 1px var(--mx1-line); }
.mx1vp .mx1vp-btn--ghost:hover { background: rgba(242, 244, 255, 0.22); color: #fff !important; }
.mx1vp .mx1vp-btn:active { transform: translateY(1px); }
.mx1vp .mx1vp-btn--lg { min-height: 60px; padding-inline: 2rem; font-size: 1.075rem; }
.mx1vp .mx1vp-btn--sm { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.9rem; --cut: 8px; }
.mx1vp .mx1vp-btn:focus-visible { outline-offset: 2px; clip-path: none; }
.mx1vp .mx1vp-arrow { display: inline-block; transition: transform 0.4s var(--mx1-ease); }
.mx1vp .mx1vp-btn:hover .mx1vp-arrow { transform: translateY(3px); }
.mx1vp .mx1vp-cta .mx1vp-btn:hover .mx1vp-arrow { transform: translateX(-4px); }

.mx1vp .mx1vp-play-icon {
	display: inline-block; width: 0; height: 0;
	border-block: 0.5em solid transparent; border-inline-start: 0.85em solid currentColor;
}
/* Media controls are not mirrored in RTL: play always points right. */
.mx1vp .mx1vp-play-icon { border-inline: 0; border-left: 0.85em solid currentColor; }

.mx1vp .mx1vp-preview-flag {
	position: relative; z-index: 5; margin: 0; padding: 0.75rem var(--mx1-gutter);
	background: #ffd84d; color: #1a1400; font-size: 0.9rem; line-height: 1.5;
}

/* ==========================================================================
   01 HERO — copy + a deck of real work
   The three featured thumbnails sit in a fanned stack at their native
   16:9 (never upscaled); the front card rotates every few seconds.
   --d on each card is its depth: 0 front, 1 and 2 behind.
   ========================================================================== */
.mx1vp .mx1vp-hero {
	position: relative; isolation: isolate;
	min-height: calc(100svh - 90px); /* the site header sits above, in flow */
	display: flex; align-items: center;
	overflow: hidden;
}
.mx1vp .mx1vp-hero__light {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(40% 50% at 22% 40%, rgba(54, 93, 227, 0.42), transparent 70%),
		radial-gradient(36% 40% at 10% 0%, rgba(95, 152, 253, 0.32), transparent 70%),
		radial-gradient(60% 60% at 90% 100%, rgba(18, 37, 113, 0.55), transparent 70%),
		linear-gradient(170deg, var(--mx1-navy) 0%, var(--mx1-ink) 70%);
}
/* soft hand-off into the next section instead of a hard edge */
.mx1vp .mx1vp-hero::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 22vh; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(4, 6, 26, 0), var(--mx1-ink)); }
.mx1vp .mx1vp-hero__inner {
	position: relative; z-index: 1;
	width: 100%; max-width: var(--mx1-max); margin-inline: auto;
	padding: clamp(2.5rem, 7vh, 4.5rem) var(--mx1-gutter) clamp(3.5rem, 8vh, 5rem);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: clamp(2rem, 5vw, 5.5rem); align-items: center;
}
.mx1vp .mx1vp-hero__copy { position: relative; z-index: 2; }
.mx1vp .mx1vp-eyebrow { display: flex; align-items: center; gap: 0.85rem; color: var(--mx1-mute); font-size: 0.95rem; margin-block-end: clamp(1rem, 2.6vh, 1.6rem); }
.mx1vp .mx1vp-eyebrow__dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6); flex: none; }
.mx1vp--motion .mx1vp-eyebrow__dot { animation: mx1vp-rec 1.6s ease-out infinite; }
@keyframes mx1vp-rec { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(255, 77, 77, 0); } }
.mx1vp .mx1vp-hero__title { font-size: var(--mx1-fs-hero); font-weight: 650; line-height: 1.22; letter-spacing: 0; }
.mx1vp .mx1vp-line { display: block; overflow: hidden; padding-block: 0.06em; }
.mx1vp .mx1vp-line > span { display: inline-block; }
.mx1vp .mx1vp-hero__title .mx1vp-line:last-child:not(:first-child) > span {
	background: linear-gradient(100deg, var(--mx1-glow) 0%, var(--mx1-blue-bright) 40%, var(--mx1-paper) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	padding-block-end: 0.08em;
}
.mx1vp .mx1vp-hero__sub { max-width: 34rem; margin-block: clamp(1rem, 2.4vh, 1.5rem) clamp(1.5rem, 3.4vh, 2.25rem); color: var(--mx1-mute); font-size: var(--mx1-fs-lead); line-height: 1.8; }

/* the deck */
.mx1vp .mx1vp-hero__visual {
	position: relative;
	padding: 9% 0 0 11%; /* room for the cards fanned up and to the left (physical: transforms are physical) */
	transform: translate3d(0, var(--y, 0px), 0);
}
.mx1vp .mx1vp-deck { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 680px; margin-inline-start: auto; }
.mx1vp .mx1vp-deck::before {
	content: ""; position: absolute; inset: -18% -12%; z-index: -1; pointer-events: none;
	background: radial-gradient(closest-side, rgba(54, 93, 227, 0.45), transparent 75%);
	filter: blur(20px);
}
.mx1vp .mx1vp-deck__card {
	--d: 0;
	position: absolute; inset: 0; z-index: calc(10 - var(--d));
	display: block; overflow: hidden; padding: 0;
	background: var(--mx1-navy-2);
	clip-path: polygon(var(--mx1-cut) 0, 100% 0, 100% calc(100% - var(--mx1-cut)), calc(100% - var(--mx1-cut)) 100%, 0 100%, 0 var(--mx1-cut));
	transform-origin: 70% 100%;
	transform: translate3d(calc(var(--d) * -8%), calc(var(--d) * -10%), 0) rotate(calc(var(--d) * -3.5deg)) scale(calc(1 - var(--d) * 0.07));
	transition: transform 1s var(--mx1-ease), filter 1s var(--mx1-ease);
	filter: brightness(calc(1 - var(--d) * 0.28)) saturate(calc(1 - var(--d) * 0.2));
}
.mx1vp .mx1vp-deck__card:not(.is-front) { pointer-events: none; }
.mx1vp .mx1vp-deck__card img, .mx1vp .mx1vp-deck__card video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;
	transition: transform 1.2s var(--mx1-ease);
}
.mx1vp .mx1vp-deck__card.is-front:hover img { transform: scale(1.03); }
.mx1vp .mx1vp-deck__card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(242, 244, 255, 0.16); }
.mx1vp .mx1vp-deck__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(4, 6, 26, 0.88) 0%, rgba(4, 6, 26, 0.25) 42%, rgba(4, 6, 26, 0) 65%); }
.mx1vp .mx1vp-deck__card .mx1vp-playbtn { transition: opacity 0.5s, transform 0.5s var(--mx1-ease), background-color 0.3s, color 0.3s; }
.mx1vp .mx1vp-deck__card:not(.is-front) .mx1vp-playbtn, .mx1vp .mx1vp-deck__card:not(.is-front) .mx1vp-deck__meta { opacity: 0; }
.mx1vp .mx1vp-deck__card.is-front:hover .mx1vp-playbtn, .mx1vp .mx1vp-deck__hit:hover .mx1vp-playbtn { background: #fff; color: var(--mx1-blue); }
.mx1vp .mx1vp-deck__meta {
	position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0;
	display: grid; gap: 0.2rem; padding: 1rem 1.25rem 1.1rem; text-align: start;
	transition: opacity 0.5s 0.2s;
}
.mx1vp .mx1vp-deck__meta small { font-size: 0.78rem; color: var(--mx1-glow); }
.mx1vp .mx1vp-deck__meta strong { font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem); font-weight: 600; color: #fff; line-height: 1.5; }
.mx1vp .mx1vp-deck__card:focus-visible { outline: none; }
.mx1vp .mx1vp-deck__card:focus-visible::after { box-shadow: inset 0 0 0 3px var(--mx1-glow); }
.mx1vp .mx1vp-deck__card--solo { z-index: 10; }
.mx1vp .mx1vp-deck__mark {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: radial-gradient(60% 80% at 20% 0%, rgba(95, 152, 253, 0.9), transparent 60%), linear-gradient(135deg, var(--mx1-blue) 0%, var(--mx1-navy-2) 45%, var(--mx1-ink) 100%);
}
.mx1vp .mx1vp-deck__mark img { position: static; width: 56%; height: auto; }
.mx1vp .mx1vp-deck__hit { position: absolute; inset: 0; z-index: 4; }
.mx1vp .mx1vp-hero__note { position: absolute; z-index: 4; inset-block-end: 1rem; inset-inline-end: 1rem; }
.mx1vp .mx1vp-hero__tc {
	position: absolute; z-index: 20; top: 0.85rem; left: 1rem; /* physical: element is LTR */
	padding: 0.25rem 0.55rem; background: rgba(4, 6, 26, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	font-size: 0.68rem; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.9); font-variant-numeric: tabular-nums; pointer-events: none;
}
.mx1vp .mx1vp-hero__tc span:first-child { color: #ff4d4d; }

/* progress dots: the active one fills over one rotation */
.mx1vp .mx1vp-deck__nav { display: flex; gap: 0.5rem; justify-content: center; margin-block-start: 1.5rem; padding-inline-start: 0; }
.mx1vp .mx1vp-deck__dot { position: relative; width: 44px; height: 24px; display: grid; align-items: center; }
.mx1vp .mx1vp-deck__dot span { position: relative; display: block; height: 3px; background: rgba(242, 244, 255, 0.22); overflow: hidden; border-radius: 3px; }
.mx1vp .mx1vp-deck__dot span::after { content: ""; position: absolute; inset: 0; background: var(--mx1-glow); transform: scaleX(0); transform-origin: right; }
.mx1vp .mx1vp-deck__dot.is-on span::after { transform: scaleX(1); }
.mx1vp--motion .mx1vp-deck__dot.is-on span::after { animation: mx1vp-fill var(--mx1-deck-ms, 5200ms) linear both; }
.mx1vp--motion .mx1vp-deck.is-paused ~ .mx1vp-deck__nav .mx1vp-deck__dot.is-on span::after { animation-play-state: paused; }
@keyframes mx1vp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mx1vp .mx1vp-deck__dot:focus-visible { outline: 2px solid var(--mx1-glow); outline-offset: 2px; }

.mx1vp .mx1vp-scrollcue {
	position: absolute; z-index: 2; inset-block-end: 1.25rem; inset-inline-start: 50%;
	width: 1px; height: 44px; background: var(--mx1-line); overflow: hidden;
}
.mx1vp .mx1vp-scrollcue span { position: absolute; inset: 0; background: var(--mx1-glow); transform: translateY(-100%); }

@media (max-width: 1023px) {
	.mx1vp .mx1vp-hero { min-height: 0; }
	.mx1vp .mx1vp-hero__inner { grid-template-columns: 1fr; padding-block: 3rem 3.5rem; gap: 2.5rem; }
	.mx1vp .mx1vp-hero__copy { max-width: 40rem; }
	.mx1vp .mx1vp-hero__visual { max-width: 620px; width: 100%; margin-inline: auto; transform: none; }
	.mx1vp .mx1vp-scrollcue { display: none; }
}
@media (max-width: 600px) {
	.mx1vp .mx1vp-hero__inner { padding-block: 2.25rem 2.75rem; gap: 2rem; }
	.mx1vp .mx1vp-hero__sub { font-size: 0.98rem; line-height: 1.75; }
	.mx1vp .mx1vp-hero .mx1vp-actions .mx1vp-btn { flex: 1 1 auto; justify-content: center; }
	.mx1vp .mx1vp-hero__visual { padding: 10% 0 0 9%; }
	.mx1vp .mx1vp-deck { --mx1-cut: 14px; }
	.mx1vp .mx1vp-deck__meta { padding: 0.75rem 0.9rem 0.8rem; }
	.mx1vp .mx1vp-deck__meta small { font-size: 0.72rem; }
	.mx1vp .mx1vp-hero__tc { display: none; }
	.mx1vp .mx1vp-deck__nav { margin-block-start: 1rem; }
}

/* ==========================================================================
   02 MANIFESTO — words light up as you read down the page (--mp 0 → 1)
   ========================================================================== */
.mx1vp .mx1vp-manifesto { --mp: 1; position: relative; background: var(--mx1-ink); }
.mx1vp--motion .mx1vp-manifesto { --mp: 0; height: 150svh; }
.mx1vp .mx1vp-manifesto__stage {
	position: sticky; top: 0; min-height: 100svh;
	display: flex; flex-direction: column; justify-content: center; gap: 2rem;
	max-width: var(--mx1-max); margin-inline: auto; padding: 6rem var(--mx1-gutter);
}
.mx1vp .mx1vp-manifesto__text { font-size: clamp(1.9rem, 1rem + 3.6vw, 4.4rem); font-weight: 500; line-height: 1.35; max-width: 22ch; }
.mx1vp .mx1vp-word {
	display: inline-block; margin-inline-end: 0.22em;
	opacity: clamp(0.14, calc((var(--mp) * (var(--n) + 3) - var(--i)) * 0.5), 1);
	transition: opacity 0.2s linear;
}

/* ==========================================================================
   03 WORK — the contact sheet
   ========================================================================== */
.mx1vp .mx1vp-work { position: relative; max-width: var(--mx1-max); margin-inline: auto; padding: clamp(4rem, 10vw, 8rem) var(--mx1-gutter); scroll-margin-top: 80px; }
.mx1vp .mx1vp-work__head { display: grid; gap: 1.25rem; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
.mx1vp .mx1vp-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mx1vp .mx1vp-chip {
	display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; padding: 0.45rem 1rem;
	font-size: 0.92rem; color: var(--mx1-mute);
	box-shadow: inset 0 0 0 1px var(--mx1-line); border-radius: 999px !important;
	transition: color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.mx1vp .mx1vp-chip span { font-size: 0.75em; opacity: 0.7; }
.mx1vp .mx1vp-chip:hover { color: var(--mx1-paper); box-shadow: inset 0 0 0 1px rgba(242, 244, 255, 0.4); }
.mx1vp .mx1vp-chip[aria-pressed="true"] { background: var(--mx1-paper); color: var(--mx1-ink); box-shadow: none; }

.mx1vp .mx1vp-grid {
	--row: clamp(150px, 9rem + 10vw, 330px);
	display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 2.6vw, 2.5rem) var(--mx1-gap);
}
.mx1vp .mx1vp-grid::after { content: ""; flex: 999 1 0; }
.mx1vp .mx1vp-card { --ar: 1.7778; flex: var(--ar) 1 calc(var(--ar) * var(--row)); min-width: 0; }
.mx1vp .mx1vp-card--9x16 { --ar: 0.5625; }
.mx1vp .mx1vp-card--1x1 { --ar: 1; }
.mx1vp .mx1vp-card--4x5 { --ar: 0.8; }
.mx1vp .mx1vp-card[hidden] { display: none; }
/* pagination under the works grid */
.mx1vp .mx1vp-pager { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-block-start: clamp(2rem, 4vw, 3rem); }
.mx1vp .mx1vp-pager[hidden] { display: none; }
.mx1vp .mx1vp-pager__list { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.mx1vp .mx1vp-pager__num, .mx1vp .mx1vp-pager__arrow {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 0.5rem;
	font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--mx1-mute);
	box-shadow: inset 0 0 0 1px var(--mx1-line);
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.mx1vp .mx1vp-pager__arrow { font-size: 1.1rem; color: var(--mx1-paper); }
.mx1vp .mx1vp-pager__num:hover, .mx1vp .mx1vp-pager__arrow:not(:disabled):hover { color: var(--mx1-paper); background: rgba(242, 244, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(242, 244, 255, 0.4); }
.mx1vp .mx1vp-pager__num[aria-current="page"] { background: var(--mx1-blue); color: #fff; box-shadow: none; }
.mx1vp .mx1vp-pager__arrow:disabled { opacity: 0.3; cursor: default; }
.mx1vp .mx1vp-pager__gap { min-width: 24px; text-align: center; color: var(--mx1-mute); }
.mx1vp .mx1vp-pager__of { margin-inline: 0.75rem; font-size: 0.75rem; letter-spacing: 0.16em; color: var(--mx1-mute); }
.mx1vp .mx1vp-pager button:focus-visible { outline: 2px solid var(--mx1-glow); outline-offset: -4px; }
@media (max-width: 600px) { .mx1vp .mx1vp-pager__of { display: none; } .mx1vp .mx1vp-pager__num, .mx1vp .mx1vp-pager__arrow { min-width: 40px; height: 40px; } }

.mx1vp .mx1vp-card__btn { display: block; width: 100%; text-align: start; }
.mx1vp .mx1vp-card__frame {
	--cut: var(--mx1-cut);
	position: relative; display: block; overflow: hidden; background: var(--mx1-ink-2);
	aspect-ratio: var(--ar);
	clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
	transition: clip-path 0.6s var(--mx1-ease);
}
.mx1vp .mx1vp-card__img, .mx1vp .mx1vp-card__ph {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.02); transition: transform 1.1s var(--mx1-ease), filter 0.6s;
}
.mx1vp .mx1vp-card__ph {
	display: grid; place-items: center;
	background:
		radial-gradient(80% 60% at calc(20% + var(--h) * 1%) 10%, rgba(95, 152, 253, 0.55), transparent 70%),
		linear-gradient(calc(120deg + var(--h) * 2deg), var(--mx1-navy-2), var(--mx1-ink) 75%);
}
.mx1vp .mx1vp-card__ph span { font-size: clamp(2rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: 0.1em; color: rgba(242, 244, 255, 0.08); }
.mx1vp .mx1vp-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 6, 26, 0.55), transparent 45%); opacity: 0.8; transition: opacity 0.5s; }
.mx1vp .mx1vp-card__index { position: absolute; inset-block-end: 0.85rem; inset-inline-end: 1rem; font-size: 0.75rem; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.8); }
.mx1vp .mx1vp-card__meta { display: grid; gap: 0.2rem; padding-block-start: 0.9rem; }
.mx1vp .mx1vp-card__title { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); font-weight: 550; line-height: 1.35; }
.mx1vp .mx1vp-card__sub { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.85rem; color: var(--mx1-mute); }
.mx1vp .mx1vp-card__dur { font-variant-numeric: tabular-nums; opacity: 0.8; }

@media (hover: hover) {
	.mx1vp .mx1vp-card__btn:hover .mx1vp-card__img, .mx1vp .mx1vp-card__btn:hover .mx1vp-card__ph { transform: scale(1.07); }
	.mx1vp .mx1vp-card__btn:hover .mx1vp-card__frame { --cut: 44px; }
	.mx1vp .mx1vp-card__btn:hover .mx1vp-playbtn, .mx1vp .mx1vp-case__media:hover .mx1vp-playbtn { transform: translate(-50%, -50%) scale(1.12); background: #fff; color: var(--mx1-blue); }
	.mx1vp .mx1vp-card__btn:hover .mx1vp-card__shade { opacity: 1; }
}
.mx1vp .mx1vp-card__btn:focus-visible { outline: none; }
.mx1vp .mx1vp-card__btn:focus-visible .mx1vp-card__frame { clip-path: none; outline: 2px solid var(--mx1-glow); outline-offset: 3px; overflow: visible; }

/* Reveal (only when motion is on) */
.mx1vp--motion .mx1vp-card { opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity 0.9s var(--mx1-ease), transform 1.1s var(--mx1-ease); transition-delay: calc(var(--d) * 90ms); }
.mx1vp--motion .mx1vp-card.is-in { opacity: 1; transform: none; }
.mx1vp--motion .mx1vp-card.is-out { opacity: 0; transform: scale(0.96); transition-duration: 0.25s; transition-delay: 0s; }

@media (max-width: 600px) {
	.mx1vp .mx1vp-grid { --row: 190px; gap: 1.5rem 0.75rem; }
	.mx1vp .mx1vp-card { min-width: 40%; }
	.mx1vp .mx1vp-card .mx1vp-badge { font-size: 0.62rem; padding: 0.2rem 0.45rem; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; }
	.mx1vp .mx1vp-card__frame { --cut: 14px; }
	.mx1vp .mx1vp-card__title { font-size: 0.98rem; }
	.mx1vp .mx1vp-card__sub { font-size: 0.78rem; }
	.mx1vp .mx1vp-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--mx1-gutter) * -1); padding-inline: var(--mx1-gutter); scrollbar-width: none; }
	.mx1vp .mx1vp-filters::-webkit-scrollbar { display: none; }
	.mx1vp .mx1vp-chip { flex: 0 0 auto; }
}

/* ==========================================================================
   04 PROCESS — sticky title, steps advance a rail (--pp 0 → 1)
   ========================================================================== */
.mx1vp .mx1vp-process {
	--pp: 1;
	position: relative; display: grid; gap: 3rem;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	max-width: var(--mx1-max); margin-inline: auto; padding: clamp(4rem, 10vw, 8rem) var(--mx1-gutter);
	border-block-start: 1px solid var(--mx1-line);
}
.mx1vp--motion .mx1vp-process { --pp: 0; }
.mx1vp .mx1vp-process__aside { position: sticky; top: 18vh; align-self: start; display: grid; gap: 1.25rem; }
.mx1vp .mx1vp-process__count { font-size: clamp(3rem, 2rem + 4vw, 6rem); font-weight: 200; line-height: 1; color: var(--mx1-glow); font-variant-numeric: tabular-nums; }
.mx1vp .mx1vp-process__count span:last-child { font-size: 0.35em; color: var(--mx1-mute); margin-inline-start: 0.2em; }
.mx1vp .mx1vp-steps { position: relative; display: grid; padding-inline-start: 2.5rem; }
.mx1vp .mx1vp-steps::before, .mx1vp .mx1vp-steps::after { content: ""; position: absolute; inset-block: 0.6rem; inset-inline-start: 0; width: 1px; background: var(--mx1-line); }
.mx1vp .mx1vp-steps::after { background: linear-gradient(var(--mx1-glow), var(--mx1-blue)); transform-origin: top; transform: scaleY(var(--pp)); }
.mx1vp .mx1vp-step { position: relative; padding-block: clamp(1.75rem, 4vw, 3rem); border-block-end: 1px solid var(--mx1-line); display: grid; gap: 0.6rem; }
.mx1vp .mx1vp-step:last-child { border-block-end: 0; }
.mx1vp .mx1vp-step::before {
	content: ""; position: absolute; inset-inline-start: calc(-2.5rem - 5px); inset-block-start: calc(clamp(1.75rem, 4vw, 3rem) + 0.75rem);
	width: 11px; height: 11px; background: var(--mx1-ink); box-shadow: inset 0 0 0 1px var(--mx1-glow); transform: rotate(45deg);
	transition: background-color 0.4s;
}
.mx1vp .mx1vp-step.is-active::before { background: var(--mx1-glow); }
.mx1vp .mx1vp-step__num { font-size: 0.8rem; letter-spacing: 0.18em; color: var(--mx1-glow); }
.mx1vp .mx1vp-step__title { font-size: var(--mx1-fs-h3); font-weight: 550; line-height: 1.3; }
.mx1vp .mx1vp-step__text { color: var(--mx1-mute); font-size: var(--mx1-fs-lead); max-width: 34rem; }
.mx1vp--motion .mx1vp-step { opacity: 0.35; transition: opacity 0.6s var(--mx1-ease); }
.mx1vp--motion .mx1vp-step.is-active, .mx1vp--motion .mx1vp-step.is-done { opacity: 1; }
@media (max-width: 860px) {
	.mx1vp .mx1vp-process { grid-template-columns: 1fr; gap: 1.5rem; }
	.mx1vp .mx1vp-process__aside { position: static; }
	.mx1vp .mx1vp-process__count { display: none; }
	.mx1vp .mx1vp-steps { padding-inline-start: 1.75rem; }
	.mx1vp .mx1vp-step::before { inset-inline-start: calc(-1.75rem - 5px); }
}

/* ==========================================================================
   05 CLIENTS — restrained, static logo grid
   ========================================================================== */
.mx1vp .mx1vp-clients { max-width: var(--mx1-max); margin-inline: auto; padding: clamp(3.5rem, 8vw, 6rem) var(--mx1-gutter); border-block-start: 1px solid var(--mx1-line); display: grid; gap: 1rem; }
.mx1vp .mx1vp-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-block-start: 1.5rem; border-block-start: 1px solid var(--mx1-line); border-inline-start: 1px solid var(--mx1-line); }
.mx1vp .mx1vp-logos li { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 1.5rem; border-block-end: 1px solid var(--mx1-line); border-inline-end: 1px solid var(--mx1-line); }
.mx1vp .mx1vp-logos img { max-height: 48px; width: auto; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: 0.7; transition: opacity 0.3s; }
.mx1vp .mx1vp-logos li:hover img { opacity: 1; }
.mx1vp .mx1vp-clients--empty { position: relative; padding-top: 4rem; color: var(--mx1-mute); }

/* ==========================================================================
   06 CTA
   ========================================================================== */
.mx1vp .mx1vp-cta {
	position: relative; overflow: hidden;
	display: grid; gap: 1.5rem; justify-items: start;
	padding: clamp(5rem, 14vw, 11rem) max(var(--mx1-gutter), calc((100% - var(--mx1-max)) / 2 + var(--mx1-gutter)));
	background:
		radial-gradient(50% 70% at 10% 0%, rgba(95, 152, 253, 0.45), transparent 70%),
		linear-gradient(150deg, var(--mx1-blue) 0%, var(--mx1-navy-2) 45%, var(--mx1-navy) 100%);
}
.mx1vp .mx1vp-cta .mx1vp-kicker { color: #fff; }
.mx1vp .mx1vp-cta__mark { position: absolute; inset-inline-start: -4%; inset-block-end: -18%; width: min(70vw, 900px); opacity: 0.08; pointer-events: none; }
.mx1vp .mx1vp-cta__mark img { width: 100%; height: auto; }
.mx1vp .mx1vp-cta__title { position: relative; font-size: clamp(2.2rem, 1.2rem + 4vw, 5rem); font-weight: 650; line-height: 1.15; }
.mx1vp .mx1vp-cta__text { position: relative; max-width: 36rem; font-size: var(--mx1-fs-lead); color: rgba(255, 255, 255, 0.82); }
.mx1vp .mx1vp-cta .mx1vp-btn--primary { background: #fff; color: var(--mx1-navy); }
.mx1vp .mx1vp-cta .mx1vp-btn--primary:hover { background: var(--mx1-paper); color: var(--mx1-navy) !important; }
.mx1vp .mx1vp-cta .mx1vp-btn--ghost { background: rgba(4, 6, 26, 0.25); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.mx1vp .mx1vp-cta .mx1vp-btn--ghost:hover, .mx1vp .mx1vp-cta .mx1vp-btn--ghost:focus-visible { background: #fff; color: var(--mx1-navy) !important; }
.mx1vp .mx1vp-btn--wa .mx1vp-btn__ico { width: 1.25em; height: 1.25em; flex: none; color: #25d366; transition: color 0.25s; }
.mx1vp .mx1vp-btn--wa:hover .mx1vp-btn__ico { color: #25d366; }
/* the one call to action: white on the blue band, turns WhatsApp green on hover */
.mx1vp .mx1vp-cta .mx1vp-btn--primary.mx1vp-btn--wa:hover, .mx1vp .mx1vp-cta .mx1vp-btn--primary.mx1vp-btn--wa:focus-visible { background: #25d366; color: #fff !important; }
.mx1vp .mx1vp-cta .mx1vp-btn--primary.mx1vp-btn--wa:hover .mx1vp-btn__ico { color: #fff; }
.mx1vp .mx1vp-btn__ico { width: 1.25em; height: 1.25em; flex: 0 0 auto; transition: color 0.3s; }
.mx1vp .mx1vp-cta__price { position: relative; font-size: 0.95rem; color: rgba(255, 255, 255, 0.78); border-inline-start: 2px solid #fff; padding-inline-start: 0.75rem; }
.mx1vp .mx1vp-cta__title .mx1vp-line:nth-child(2) > span { color: rgba(255, 255, 255, 0.72); }
.mx1vp--motion .mx1vp-cta .mx1vp-line > span { transform: translateY(105%); transition: transform 1.1s var(--mx1-ease); transition-delay: calc(var(--i) * 0.14s); }
.mx1vp--motion .mx1vp-cta.is-in .mx1vp-line > span { transform: none; }
@media (max-width: 600px) { .mx1vp .mx1vp-cta .mx1vp-actions { width: 100%; } .mx1vp .mx1vp-cta .mx1vp-btn { flex: 1 1 100%; } }

/* ==========================================================================
   VIEWER (native <dialog>: focus trap + Esc for free)
   ========================================================================== */
.mx1vp .mx1vp-modal {
	width: min(1180px, 100vw - 2 * var(--mx1-gutter)); max-width: none; max-height: calc(100svh - 2rem);
	margin: auto; padding: 0; border: 0; color: var(--mx1-paper); background: var(--mx1-ink-2);
	font-family: var(--mx1-font); overflow: auto;
	clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}
.mx1vp .mx1vp-modal::backdrop { background: rgba(2, 3, 14, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mx1vp .mx1vp-modal[open] { animation: mx1vp-in 0.5s var(--mx1-ease); }
@keyframes mx1vp-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
.mx1vp .mx1vp-modal__inner { display: grid; gap: 1rem; padding: clamp(1rem, 2.5vw, 1.75rem); }
.mx1vp .mx1vp-modal__head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.mx1vp .mx1vp-modal__meta { font-size: 0.85rem; color: var(--mx1-glow); }
.mx1vp .mx1vp-modal__title { font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); font-weight: 600; line-height: 1.3; }
.mx1vp .mx1vp-modal__close { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; background: var(--mx1-faint) !important; font-size: 1.1rem; }
.mx1vp .mx1vp-modal__close:hover { background: var(--mx1-blue) !important; }
.mx1vp .mx1vp-modal__player { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100svh - 14rem); margin-inline: auto; background: #000; }
.mx1vp .mx1vp-modal__player[data-aspect="9x16"] { aspect-ratio: 9 / 16; width: auto; height: min(78svh, 900px); }
.mx1vp .mx1vp-modal__player[data-aspect="1x1"] { aspect-ratio: 1; width: auto; height: min(72svh, 760px); }
.mx1vp .mx1vp-modal__player[data-aspect="4x5"] { aspect-ratio: 4 / 5; width: auto; height: min(74svh, 820px); }
.mx1vp .mx1vp-modal__player iframe, .mx1vp .mx1vp-modal__player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mx1vp .mx1vp-modal__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--mx1-mute); background: repeating-linear-gradient(45deg, var(--mx1-ink), var(--mx1-ink) 12px, var(--mx1-ink-2) 12px, var(--mx1-ink-2) 24px); }
.mx1vp .mx1vp-modal__foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.mx1vp .mx1vp-modal__story { display: grid; gap: 1rem; max-width: 52rem; }
.mx1vp .mx1vp-modal__desc { color: var(--mx1-mute); }
.mx1vp .mx1vp-modal__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 2rem; }
.mx1vp .mx1vp-modal__cols h3 { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--mx1-glow); margin-block-end: 0.35rem; }
.mx1vp .mx1vp-modal__cols p { color: var(--mx1-paper); font-size: 0.95rem; line-height: 1.75; }
.mx1vp .mx1vp-modal__captions { text-decoration: underline !important; text-underline-offset: 3px; }
.mx1vp .mx1vp-modal__nav { display: flex; gap: 0.5rem; margin-inline-start: auto; }
@media (max-width: 600px) {
	.mx1vp .mx1vp-modal { width: 100vw; max-height: 100svh; height: 100svh; clip-path: none; }
	.mx1vp .mx1vp-modal__player[data-aspect] { width: 100%; height: auto; max-height: 68svh; }
	.mx1vp .mx1vp-modal__player[data-aspect="9x16"] { width: auto; height: 64svh; }
}

/* ==========================================================================
   HUD — timecode follows the scroll (desktop, decorative)
   ========================================================================== */
.mx1vp .mx1vp-hud {
	position: fixed; z-index: 40; inset-block-end: 1.25rem; left: 5.5rem; /* clears WoodMart's scroll-to-top button */
	display: none; align-items: center; gap: 0.9rem; padding: 0.5rem 0.9rem;
	font: 500 0.7rem/1 var(--mx1-font); letter-spacing: 0.16em; text-transform: uppercase; font-variant-numeric: tabular-nums;
	color: var(--mx1-paper); background: rgba(4, 6, 26, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	box-shadow: inset 0 0 0 1px var(--mx1-line);
	opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.4s var(--mx1-ease);
	pointer-events: none;
}
.mx1vp .mx1vp-hud__dot { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; }
@media (min-width: 1024px) { .mx1vp--motion .mx1vp-hud { display: flex; } }
.mx1vp .mx1vp-hud.is-on { opacity: 1; transform: none; }

/* ==========================================================================
   Hero entrance (first paint) — lines rise in sequence
   ========================================================================== */
.mx1vp--motion .mx1vp-hero .mx1vp-line > span { transform: translateY(105%); transition: transform 1.1s var(--mx1-ease); transition-delay: calc(0.15s + var(--i) * 0.12s); }
.mx1vp--motion.is-ready .mx1vp-hero .mx1vp-line > span { transform: none; }
.mx1vp--motion .mx1vp-deck { transition: opacity 1.2s var(--mx1-ease) 0.3s, translate 1.2s var(--mx1-ease) 0.3s; opacity: 0; translate: 0 24px; }
.mx1vp--motion.is-ready .mx1vp-deck { opacity: 1; translate: none; }
.mx1vp--motion .mx1vp-scrollcue span { animation: mx1vp-cue 2.2s var(--mx1-ease-io) infinite; }
@keyframes mx1vp-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ==========================================================================
   Reduced motion: everything readable, nothing moves.
   (JS also skips adding .mx1vp--motion, this is a second safety net.)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.mx1vp *, .mx1vp *::before, .mx1vp *::after { animation: none !important; transition: none !important; }
	.mx1vp .mx1vp-manifesto { height: auto !important; --mp: 1 !important; }
	.mx1vp .mx1vp-manifesto__stage { position: relative; min-height: 0; }
	.mx1vp [data-speed], .mx1vp [data-drift] { transform: none !important; }
}

.mx1vp .mx1vp-after { max-width: var(--mx1-max); margin-inline: auto; padding: 3rem var(--mx1-gutter); }

/* ==========================================================================
   1.2 — ambient motion, new sections, header on this page
   ========================================================================== */

/* ---------- ambient background: drifting light, never blocks content ---------- */
.mx1vp .mx1vp-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mx1vp .mx1vp-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; will-change: transform; }
.mx1vp .mx1vp-orb--a { width: 46vw; height: 46vw; inset-block-start: 110vh; inset-inline-end: -14vw; background: radial-gradient(circle, rgba(54, 93, 227, 0.6), transparent 65%); }
.mx1vp .mx1vp-orb--b { width: 38vw; height: 38vw; inset-block-start: 260vh; inset-inline-start: -12vw; background: radial-gradient(circle, rgba(95, 152, 253, 0.4), transparent 65%); }
.mx1vp .mx1vp-orb--c { width: 52vw; height: 52vw; inset-block-start: 480vh; inset-inline-end: -18vw; background: radial-gradient(circle, rgba(18, 37, 113, 0.9), transparent 65%); }
.mx1vp .mx1vp-gridlines {
	position: absolute; inset: 0; opacity: 0.5;
	background-image: linear-gradient(to left, var(--mx1-line) 1px, transparent 1px);
	background-size: calc((100% - 2 * var(--mx1-gutter)) / 6) 100%; background-position: var(--mx1-gutter) 0;
	mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.mx1vp--motion .mx1vp-orb--a { animation: mx1vp-drift 22s ease-in-out infinite alternate; }
.mx1vp--motion .mx1vp-orb--b { animation: mx1vp-drift 28s ease-in-out -6s infinite alternate-reverse; }
.mx1vp--motion .mx1vp-orb--c { animation: mx1vp-drift 34s ease-in-out -12s infinite alternate; }
@keyframes mx1vp-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6vw, 8vh, 0) scale(1.12); } 100% { transform: translate3d(4vw, -6vh, 0) scale(0.94); } }

/* chamfered outlines floating in the hero */
.mx1vp .mx1vp-shape {
	position: absolute; z-index: 0; pointer-events: none;
	border: 1px solid rgba(95, 152, 253, 0.35);
	clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
	transform: translate3d(0, var(--y, 0px), 0);
}
.mx1vp .mx1vp-shape--1 { width: 180px; height: 120px; inset-block-start: 14%; inset-inline-start: 46%; }
.mx1vp .mx1vp-shape--2 { width: 90px; height: 90px; inset-block-end: 12%; inset-inline-start: 38%; background: rgba(54, 93, 227, 0.12); }
.mx1vp--motion .mx1vp-shape--1 { animation: mx1vp-float 9s ease-in-out infinite; }
.mx1vp--motion .mx1vp-shape--2 { animation: mx1vp-float 11s ease-in-out -3s infinite reverse; }
@keyframes mx1vp-float { 50% { translate: 0 -18px; rotate: 6deg; } }
@media (max-width: 1023px) { .mx1vp .mx1vp-shape { display: none; } }

/* ---------- buttons: pulse every 3s + light sweep ---------- */
.mx1vp .mx1vp-btn { overflow: hidden; isolation: isolate; }
.mx1vp .mx1vp-btn::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
	transform: translateX(-120%);
}
.mx1vp--motion .mx1vp-btn--pulse { animation: mx1vp-pulse 3s var(--mx1-ease) infinite; }
.mx1vp--motion .mx1vp-btn--pulse::after { animation: mx1vp-sweep 3s var(--mx1-ease) infinite; }
.mx1vp--motion .mx1vp-btn--pulse:hover { animation-play-state: paused; }
@keyframes mx1vp-pulse { 0%, 22%, 100% { transform: scale(1); } 8% { transform: scale(1.06); } 15% { transform: scale(0.98); } }
@keyframes mx1vp-sweep { 0%, 6% { transform: translateX(120%); } 30%, 100% { transform: translateX(-120%); } }

/* ---------- animated play button (cards, case studies, hero) ---------- */
.mx1vp .mx1vp-playbtn {
	position: absolute; z-index: 2; inset-block-start: 50%; inset-inline-start: 50%;
	display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
	background: var(--mx1-blue); color: #fff; font-size: 1.1rem;
	transform: translate(-50%, -50%); transition: transform 0.5s var(--mx1-ease), background-color 0.3s, color 0.3s;
	box-shadow: 0 10px 40px rgba(4, 6, 26, 0.45);
}
.mx1vp[dir="rtl"] .mx1vp-playbtn { transform: translate(50%, -50%); }
.mx1vp[dir="rtl"] .mx1vp-card__btn:hover .mx1vp-playbtn, .mx1vp[dir="rtl"] .mx1vp-case__media:hover .mx1vp-playbtn { transform: translate(50%, -50%) scale(1.12); }
.mx1vp .mx1vp-playbtn .mx1vp-play-icon { margin-left: 0.2em; }
.mx1vp .mx1vp-playbtn::before, .mx1vp .mx1vp-playbtn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.7); opacity: 0; }
.mx1vp--motion .mx1vp-playbtn::before { animation: mx1vp-ring 2.4s ease-out infinite; }
.mx1vp--motion .mx1vp-playbtn::after { animation: mx1vp-ring 2.4s ease-out 1.2s infinite; }
@keyframes mx1vp-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
.mx1vp .mx1vp-playbtn--sm { width: 44px; height: 44px; font-size: 0.85rem; box-shadow: none; }
.mx1vp .mx1vp-card--9x16 .mx1vp-playbtn { width: 56px; height: 56px; }
@media (max-width: 600px) { .mx1vp .mx1vp-playbtn { width: 52px; height: 52px; font-size: 0.9rem; } }

.mx1vp .mx1vp-card__tag {
	position: absolute; z-index: 2; inset-block-start: 0.75rem; inset-inline-end: 0.75rem;
	padding: 0.3rem 0.7rem; font-size: 0.72rem; font-weight: 500; color: #fff;
	background: rgba(4, 6, 26, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); border-radius: 999px;
}
.mx1vp .mx1vp-card__index { inset-inline-end: auto; inset-inline-start: 1rem; }
.mx1vp .mx1vp-lead { max-width: 40rem; color: var(--mx1-mute); font-size: var(--mx1-fs-lead); line-height: 1.8; }

/* generic reveal for new sections */
.mx1vp--motion [data-reveal] { opacity: 0; transform: translate3d(0, 56px, 0); transition: opacity 1s var(--mx1-ease), transform 1.2s var(--mx1-ease); transition-delay: calc(var(--d, 0) * 110ms); }
.mx1vp--motion [data-reveal].is-in { opacity: 1; transform: none; }

/* parallax layers set --y from JS */
.mx1vp [data-speed] { --y: 0px; }

/* ---------- proof strip ---------- */
.mx1vp .mx1vp-proof {
	position: relative; z-index: 2;
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
	max-width: var(--mx1-max); margin-inline: auto; padding: 1.75rem var(--mx1-gutter);
	border-block: 1px solid var(--mx1-line); background: rgba(4, 6, 26, 0.6); backdrop-filter: blur(6px);
}
.mx1vp .mx1vp-proof__label { font-size: 0.85rem; color: var(--mx1-glow); white-space: nowrap; }
.mx1vp .mx1vp-proof__list { display: flex; flex-wrap: wrap; gap: 0.5rem 0; }
.mx1vp .mx1vp-proof__list li { font-size: 0.98rem; font-weight: 500; color: var(--mx1-paper); }
.mx1vp .mx1vp-proof__list li + li::before { content: "/"; margin-inline: 0.85rem; color: var(--mx1-faint); }
@media (max-width: 700px) {
	.mx1vp .mx1vp-proof__list { gap: 0.5rem; }
	.mx1vp .mx1vp-proof__list li { padding: 0.35rem 0.8rem; font-size: 0.85rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--mx1-line); }
	.mx1vp .mx1vp-proof__list li + li::before { content: none; }
}

/* ---------- manifesto ghost word drifts sideways (overlaps the next section) ---------- */
.mx1vp .mx1vp-ghostword {
	position: absolute; z-index: 0; inset-block-start: 50%; inset-inline-start: 0;
	font-size: clamp(6rem, 22vw, 22rem); font-weight: 800; line-height: 1; letter-spacing: 0.02em; white-space: nowrap;
	color: transparent; -webkit-text-stroke: 1px rgba(95, 152, 253, 0.18);
	transform: translate3d(var(--x, 0px), -50%, 0); pointer-events: none;
}
.mx1vp .mx1vp-manifesto { overflow-x: clip; }
.mx1vp .mx1vp-manifesto__stage { position: sticky; z-index: 1; }

/* ---------- case studies ---------- */
.mx1vp .mx1vp-spot { position: relative; max-width: var(--mx1-max); margin-inline: auto; padding: clamp(4rem, 10vw, 8rem) var(--mx1-gutter) clamp(2rem, 6vw, 4rem); display: grid; gap: clamp(4rem, 10vw, 8rem); }
.mx1vp .mx1vp-spot__head { display: grid; gap: 1.25rem; }
.mx1vp .mx1vp-case { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.mx1vp .mx1vp-case--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.mx1vp .mx1vp-case--flip .mx1vp-case__media { order: 2; }
.mx1vp .mx1vp-case__media { position: relative; display: block; width: 100%; text-align: start; z-index: 1; }
.mx1vp .mx1vp-case__frame {
	--cut: 36px;
	position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--mx1-ink-2);
	clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
	transform: translate3d(0, var(--y), 0);
}
.mx1vp .mx1vp-case__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--mx1-ease); }
.mx1vp .mx1vp-case__media:hover .mx1vp-case__frame img { transform: scale(1.05); }
.mx1vp .mx1vp-case__num {
	position: absolute; z-index: 2; inset-block-start: -0.45em; inset-inline-end: 0.2em;
	font-size: clamp(4rem, 9vw, 9rem); font-weight: 800; line-height: 1;
	color: transparent; -webkit-text-stroke: 1px rgba(242, 244, 255, 0.4);
}
.mx1vp .mx1vp-case__body {
	position: relative; z-index: 2; display: grid; gap: 1rem;
	margin-inline-start: -14%; padding: clamp(1.5rem, 3vw, 2.5rem);
	background: rgba(8, 12, 43, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	box-shadow: inset 0 0 0 1px var(--mx1-line), 0 30px 80px rgba(2, 3, 14, 0.5);
	transform: translate3d(0, var(--y), 0);
}
.mx1vp .mx1vp-case--flip .mx1vp-case__body { margin-inline-start: 0; margin-inline-end: -14%; }
.mx1vp .mx1vp-case__client { font-size: 0.85rem; color: var(--mx1-glow); }
.mx1vp .mx1vp-case__title { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); font-weight: 600; line-height: 1.3; }
.mx1vp .mx1vp-case__row { display: grid; gap: 0.3rem; }
.mx1vp .mx1vp-case__row h4 { margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--mx1-mute); }
.mx1vp .mx1vp-case__row p, .mx1vp .mx1vp-case__text { color: var(--mx1-paper); line-height: 1.8; font-size: 0.98rem; }
.mx1vp .mx1vp-link { justify-self: start; display: inline-flex; gap: 0.5em; align-items: center; padding-block: 0.4rem; font-weight: 500; color: var(--mx1-glow); border-block-end: 1px solid currentColor !important; }
.mx1vp .mx1vp-link:hover .mx1vp-arrow { transform: translateX(-5px); }
@media (max-width: 860px) {
	.mx1vp .mx1vp-case, .mx1vp .mx1vp-case--flip { grid-template-columns: 1fr; }
	.mx1vp .mx1vp-case--flip .mx1vp-case__media { order: 0; }
	.mx1vp .mx1vp-case__body, .mx1vp .mx1vp-case--flip .mx1vp-case__body { margin: -2.5rem 1rem 0; }
	.mx1vp .mx1vp-case__frame { --cut: 20px; }
}

/* ---------- kinetic strip: two rows slide in opposite directions with scroll ---------- */
.mx1vp .mx1vp-kinetic { position: relative; z-index: 1; overflow: hidden; padding-block: clamp(1.5rem, 4vw, 3rem); margin-block: clamp(-2rem, -3vw, -1rem); transform: rotate(-2deg) scale(1.04); background: var(--mx1-blue); }
.mx1vp .mx1vp-kinetic__row { display: flex; width: max-content; gap: 1.5rem; align-items: center; white-space: nowrap; font-size: clamp(1.6rem, 1rem + 3vw, 3.6rem); font-weight: 700; line-height: 1.25; transform: translate3d(var(--kx, 0px), 0, 0); }
.mx1vp .mx1vp-kinetic__row i { font-style: normal; font-size: 0.5em; opacity: 0.7; }
.mx1vp .mx1vp-kinetic__row--1 { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.75); margin-block-start: 0.25rem; }
.mx1vp .mx1vp-kinetic__row--0 { color: #fff; }

/* ---------- services ---------- */
.mx1vp .mx1vp-services { max-width: var(--mx1-max); margin-inline: auto; padding: clamp(4rem, 10vw, 8rem) var(--mx1-gutter); }
.mx1vp .mx1vp-services__head { display: grid; gap: 1.25rem; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
.mx1vp .mx1vp-services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--mx1-line); box-shadow: 0 0 0 1px var(--mx1-line); }
.mx1vp .mx1vp-service { position: relative; display: grid; align-content: start; gap: 0.75rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--mx1-ink); transition: background-color 0.5s var(--mx1-ease); overflow: hidden; }
.mx1vp .mx1vp-service::before { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(to left, var(--mx1-glow), var(--mx1-blue)); transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--mx1-ease); }
.mx1vp .mx1vp-service:hover { background: var(--mx1-ink-2); }
.mx1vp .mx1vp-service:hover::before { transform: scaleX(1); }
.mx1vp .mx1vp-service__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-block-end: 0.5rem; color: var(--mx1-glow); background: rgba(54, 93, 227, 0.12); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.mx1vp .mx1vp-service__icon svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mx1vp .mx1vp-service__title { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.mx1vp .mx1vp-service__text { color: var(--mx1-mute); line-height: 1.8; }
.mx1vp .mx1vp-service .i-bar { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: bottom; }
.mx1vp .mx1vp-service .i-draw { stroke-dasharray: 160; stroke-dashoffset: 0; }
.mx1vp--motion .mx1vp-service.is-in .i-draw { animation: mx1vp-draw 1.6s var(--mx1-ease) both; }
.mx1vp--motion .mx1vp-service .i-pulse { stroke-dasharray: 60; animation: mx1vp-dash 2.4s linear infinite; }
.mx1vp--motion .mx1vp-service .i-dash { stroke-dasharray: 4 5; animation: mx1vp-dash 1.6s linear infinite; }
.mx1vp--motion .mx1vp-service .i-bar { animation: mx1vp-bar 2.8s var(--mx1-ease) infinite; }
.mx1vp--motion .mx1vp-service .i-b2 { animation-delay: 0.2s; }
.mx1vp--motion .mx1vp-service .i-b3 { animation-delay: 0.4s; }
.mx1vp--motion .mx1vp-service .i-blink { animation: mx1vp-blink 1.2s steps(2) infinite; fill: #ff4d4d; stroke: none; }
.mx1vp--motion .mx1vp-service:hover .i-spin { transform-box: fill-box; transform-origin: center; animation: mx1vp-spin 1.2s var(--mx1-ease); }
@keyframes mx1vp-draw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
@keyframes mx1vp-dash { to { stroke-dashoffset: -120; } }
@keyframes mx1vp-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }
@keyframes mx1vp-blink { 50% { opacity: 0; } }
@keyframes mx1vp-spin { to { transform: rotate(360deg); } }

@media (max-width: 1023px) { .mx1vp .mx1vp-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mx1vp .mx1vp-services__grid { grid-template-columns: 1fr; } }

/* ---------- why ---------- */
.mx1vp .mx1vp-why { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; max-width: var(--mx1-max); margin-inline: auto; padding: clamp(4rem, 10vw, 8rem) var(--mx1-gutter); border-block-start: 1px solid var(--mx1-line); }
.mx1vp .mx1vp-why__aside { position: sticky; top: 16vh; align-self: start; display: grid; gap: 1.25rem; }
.mx1vp .mx1vp-why__mark { width: min(100%, 320px); opacity: 0.12; margin-block-start: 2rem; transform: translate3d(0, var(--y), 0); }
.mx1vp .mx1vp-why__mark img { width: 100%; height: auto; }
.mx1vp .mx1vp-why__list { display: grid; gap: 1rem; }
.mx1vp .mx1vp-why__item { position: relative; display: grid; gap: 0.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); padding-inline-start: clamp(4.5rem, 8vw, 6.5rem); background: linear-gradient(110deg, rgba(54, 93, 227, 0.14), rgba(8, 12, 43, 0.4) 60%); box-shadow: inset 0 0 0 1px var(--mx1-line); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.mx1vp .mx1vp-why__num { position: absolute; inset-inline-start: clamp(1.25rem, 2.5vw, 2rem); inset-block-start: clamp(1.4rem, 3vw, 2.1rem); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 300; color: var(--mx1-glow); line-height: 1; }
.mx1vp .mx1vp-why__item h3 { font-size: 1.25rem; font-weight: 600; }
.mx1vp .mx1vp-why__item p { color: var(--mx1-mute); line-height: 1.8; }
.mx1vp--motion .mx1vp-why__item:nth-child(even) { margin-inline-start: clamp(0rem, 4vw, 3rem); }
@media (max-width: 860px) { .mx1vp .mx1vp-why { grid-template-columns: 1fr; gap: 1.5rem; } .mx1vp .mx1vp-why__aside { position: static; } .mx1vp .mx1vp-why__mark { display: none; } }

/* ---------- clients: compact two-row logo marquee ---------- */
.mx1vp .mx1vp-clients { overflow: hidden; }
.mx1vp .mx1vp-clients__head { display: grid; gap: 0.75rem; }
.mx1vp .mx1vp-logos { display: grid; gap: 0.75rem; margin-block-start: 1.75rem; border: 0; mask-image: linear-gradient(to left, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(to left, transparent, #000 10%, #000 90%, transparent); }
.mx1vp .mx1vp-logos__row { display: flex; width: max-content; gap: 0.75rem; }
.mx1vp .mx1vp-logos__row li { --ls: 1; flex: 0 0 auto; display: grid; place-items: center; width: 208px; height: 92px; aspect-ratio: auto; padding: 0.75rem 1rem; border: 0; background: rgba(242, 244, 255, 0.04); box-shadow: inset 0 0 0 1px var(--mx1-line); }
/* each logo carries an equal-visual-weight size (--lw/--lh) computed from its trimmed artwork */
.mx1vp .mx1vp-logos__row img { width: calc(var(--lw, 140px) * var(--ls)); height: calc(var(--lh, 40px) * var(--ls)); max-width: 100%; max-height: none; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: 0.78; transition: opacity 0.3s, filter 0.3s; }
.mx1vp .mx1vp-logos__row li:hover img { opacity: 1; filter: none; }
/* touch screens have no hover: show every logo in its own colours, always */
@media (hover: none), (max-width: 1023px) {
	.mx1vp .mx1vp-logos__row img { filter: none; opacity: 1; transition: none; }
	.mx1vp .mx1vp-logos__row li { background: rgba(242, 244, 255, 0.07); }
}
@media (max-width: 600px) {
	.mx1vp .mx1vp-logos__row li { --ls: 0.82; width: 172px; height: 80px; }
}
.mx1vp--motion .mx1vp-logos__row { animation: mx1vp-marquee 60s linear infinite; }
.mx1vp--motion .mx1vp-logos:hover .mx1vp-logos__row { animation-play-state: paused; }
@keyframes mx1vp-marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }
.mx1vp:not(.mx1vp--motion) .mx1vp-logos__row { flex-wrap: wrap; width: auto; }
.mx1vp:not(.mx1vp--motion) .mx1vp-logos__row li[aria-hidden] { display: none; }

/* ---------- social ---------- */
.mx1vp .mx1vp-social { max-width: var(--mx1-max); margin-inline: auto; padding: clamp(3.5rem, 8vw, 6rem) var(--mx1-gutter); border-block-start: 1px solid var(--mx1-line); display: grid; gap: 2rem; }
.mx1vp .mx1vp-social__head { display: grid; gap: 1rem; }
.mx1vp .mx1vp-social__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.mx1vp .mx1vp-soc {
	--brand: #fff;
	position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem;
	min-height: 104px; padding: 1.25rem 1.5rem; overflow: hidden; isolation: isolate;
	background: rgba(242, 244, 255, 0.04); box-shadow: inset 0 0 0 1px var(--mx1-line);
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
	transition: box-shadow 0.4s, transform 0.4s var(--mx1-ease);
}
.mx1vp .mx1vp-soc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand-bg, var(--brand)); transform: translateY(101%); transition: transform 0.5s var(--mx1-ease); }
.mx1vp .mx1vp-soc:hover, .mx1vp .mx1vp-soc:focus-visible { color: #fff !important; transform: translateY(-3px); }
.mx1vp .mx1vp-soc:hover::before, .mx1vp .mx1vp-soc:focus-visible::before { transform: none; }
.mx1vp .mx1vp-soc--youtube { --brand: #ff0000; }
.mx1vp .mx1vp-soc--behance { --brand: #1769ff; }
.mx1vp .mx1vp-soc--instagram { --brand: #e1306c; --brand-bg: linear-gradient(45deg, #feda75, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5); }
.mx1vp .mx1vp-soc__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--brand); transition: transform 0.5s var(--mx1-ease); }
.mx1vp .mx1vp-soc--instagram .mx1vp-soc__icon { color: #d62976; }
.mx1vp .mx1vp-soc__icon svg { width: 30px; height: 30px; }
.mx1vp--motion .mx1vp-soc__icon { animation: mx1vp-bob 3s ease-in-out infinite; }
.mx1vp--motion li:nth-child(2) .mx1vp-soc__icon { animation-delay: 0.4s; }
.mx1vp--motion li:nth-child(3) .mx1vp-soc__icon { animation-delay: 0.8s; }
.mx1vp .mx1vp-soc:hover .mx1vp-soc__icon { transform: rotate(-8deg) scale(1.08); }
@keyframes mx1vp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.mx1vp .mx1vp-soc__text { display: grid; gap: 0.15rem; }
.mx1vp .mx1vp-soc__text strong { font-size: 1.05rem; font-weight: 600; }
.mx1vp .mx1vp-soc__text span { font-size: 0.82rem; color: var(--mx1-mute); transition: color 0.3s; }
.mx1vp .mx1vp-soc:hover .mx1vp-soc__text span { color: rgba(255, 255, 255, 0.88); }
@media (max-width: 700px) { .mx1vp .mx1vp-social__list { grid-template-columns: 1fr; } .mx1vp .mx1vp-soc { min-height: 76px; } }

/* ---------- FAQ ---------- */
.mx1vp .mx1vp-faq { max-width: var(--mx1-max); margin-inline: auto; padding: clamp(4rem, 10vw, 8rem) var(--mx1-gutter); border-block-start: 1px solid var(--mx1-line); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
.mx1vp .mx1vp-faq__aside { display: grid; gap: 1.25rem; align-content: start; }
.mx1vp .mx1vp-faq__list { display: grid; }
.mx1vp .mx1vp-qa { border-block-end: 1px solid var(--mx1-line); }
.mx1vp .mx1vp-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding-block: 1.1rem; cursor: pointer; list-style: none; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); font-weight: 550; }
.mx1vp .mx1vp-qa summary::-webkit-details-marker { display: none; }
.mx1vp .mx1vp-qa summary i { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--mx1-line); transition: background-color 0.3s, transform 0.4s var(--mx1-ease); }
.mx1vp .mx1vp-qa summary i::before, .mx1vp .mx1vp-qa summary i::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 12px; height: 1.5px; margin: -0.75px -6px; background: currentColor; }
.mx1vp .mx1vp-qa summary i::after { transform: rotate(90deg); transition: transform 0.4s var(--mx1-ease); }
.mx1vp .mx1vp-qa[open] summary i { background: var(--mx1-blue); transform: rotate(180deg); }
.mx1vp .mx1vp-qa[open] summary i::after { transform: rotate(0deg); }
.mx1vp .mx1vp-qa p { padding-block-end: 1.4rem; max-width: 44rem; color: var(--mx1-mute); line-height: 1.85; }
.mx1vp--motion .mx1vp-qa[open] p { animation: mx1vp-open 0.5s var(--mx1-ease); }
@keyframes mx1vp-open { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 860px) { .mx1vp .mx1vp-faq { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- CTA extras ---------- */
.mx1vp .mx1vp-cta__mark { transform: translate3d(0, var(--y), 0); }
.mx1vp .mx1vp-orb--cta { width: 40vw; height: 40vw; inset-block-start: -10vw; inset-inline-end: -10vw; background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 65%); opacity: 0.6; }
.mx1vp--motion .mx1vp-orb--cta { animation: mx1vp-drift 18s ease-in-out infinite alternate; }