/* ==========================================================================
   MediaKit.pro theme styles — layout/interaction pieces theme.json can't express.
   ========================================================================== */

/* ---- Layout utility ------------------------------------------------------ */

.mkp-container {
	max-width: var( --wp--style--global--wide-size, 1180px );
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* ---- Buttons: outline treatment, subtle tint on hover (theme.json sets the
   border/typography; the hover fill needs currentColor math theme.json can't do) --- */

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: color-mix( in srgb, currentColor 12%, transparent );
	color: inherit;
}

/* ---- Photo-background card grid (services, etc.) — full-bleed photo/video
   fills the whole card, dark gradient for legibility, white overlaid text +
   bordered button. Matches the reference's "Video Production / Professional
   Editing / Aerial Video" card style — not a white card with a small thumbnail. */

.mkp-photo-card-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 4px;
}

.mkp-photo-card {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2rem 1.75rem;
	color: #fff;
}

.mkp-photo-card .mkp-media-placeholder {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: 0;
}

.mkp-photo-card__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( 180deg, rgba( 14, 12, 10, 0.1 ) 25%, rgba( 14, 12, 10, 0.88 ) 100% );
}

.mkp-photo-card__content {
	position: relative;
	z-index: 2;
}

.mkp-photo-card h3 {
	color: #fff;
	margin-bottom: 0.6rem;
}

.mkp-photo-card p {
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 0.9rem;
}

.mkp-photo-card .wp-element-button {
	margin-top: 1.25rem;
	border-color: rgba( 255, 255, 255, 0.85 );
	color: #fff;
}

/* ---- Photo-background feature section (stats / "why us" style) ----------- */

.mkp-photo-feature {
	position: relative;
	overflow: hidden;
	color: #fff;
	padding-block: var( --wp--preset--spacing--50 );
}

.mkp-photo-feature .mkp-media-placeholder {
	position: absolute;
	inset: 0;
	z-index: 0;
	aspect-ratio: auto;
	border-radius: 0;
}

/* Real photo used directly as a section background (not a placeholder). */
.mkp-photo-feature__bg-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mkp-photo-feature__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( 180deg, rgba( 14, 12, 10, 0.65 ), rgba( 14, 12, 10, 0.82 ) );
}

.mkp-photo-feature__content {
	position: relative;
	z-index: 2;
	text-align: center;
}

.mkp-photo-feature h2,
.mkp-photo-feature h3 {
	color: #fff;
}

.mkp-icon-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 2.5rem;
	margin-top: 2.5rem;
}

.mkp-icon-stats__item svg {
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 0.75rem;
	color: #fff;
}

.mkp-icon-stats__number {
	display: block;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.85rem;
}

.mkp-icon-stats__label {
	font-size: 0.82rem;
	color: rgba( 255, 255, 255, 0.75 );
}

/* ---- Header / sticky nav ------------------------------------------------ */

.mkp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var( --wp--preset--color--paper );
	border-bottom: 1px solid rgba( 22, 19, 15, 0.08 );
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Added by navigation.js when the page opens with a full-bleed hero: the header
   floats transparently over the video until the visitor scrolls past it. */
.mkp-header--overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom-color: transparent;
}

/* Sit below the WP admin toolbar when logged in previewing the site — visitors
   (logged out) never have an admin bar, so this rule never applies for them. */
.admin-bar .mkp-header--overlay {
	top: 32px;
}

@media ( max-width: 782px ) {
	.admin-bar .mkp-header--overlay {
		top: 46px;
	}
}

/* WP auto-applies blockGap as margin-top between top-level site blocks (header
   part → main). Since the header floats via position:fixed, that reserved gap
   would otherwise leave a visible blank strip above a full-bleed hero. */
.wp-site-blocks > main {
	margin-top: 0;
}

.mkp-header--overlay,
.mkp-header--overlay a {
	color: var( --wp--preset--color--paper );
}

.mkp-header--overlay .mkp-nav-toggle span {
	background: var( --wp--preset--color--paper );
}

.mkp-header--overlay.is-scrolled {
	background: var( --wp--preset--color--ink );
	border-bottom-color: rgba( 255, 255, 255, 0.1 );
}

/* Standalone landing pages: no nav, no home link on the logo — just a mark,
   so the page has zero outbound links to the rest of the site. */
.mkp-header--standalone .mkp-header__inner {
	justify-content: center;
}

.mkp-header__logo-text {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.35rem;
	letter-spacing: -0.01em;
}

.mkp-footer--standalone {
	text-align: center;
}

.mkp-footer__standalone-text {
	font-size: 0.8rem;
	color: rgba( 247, 245, 241, 0.7 );
	margin: 0;
}

.mkp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 0;
}

.mkp-header__nav {
	display: none;
}

@media ( min-width: 900px ) {
	.mkp-header__nav {
		display: flex;
		align-items: center;
		gap: 2rem;
	}
}

.mkp-header__nav a {
	text-decoration: none;
	font-size: 0.95rem;
}

.mkp-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

@media ( min-width: 900px ) {
	.mkp-nav-toggle {
		display: none;
	}
}

.mkp-nav-toggle span {
	display: block;
	height: 2px;
	background: var( --wp--preset--color--ink );
}

/* ---- Off-canvas mobile menu ---------------------------------------------- */

.mkp-offcanvas {
	position: fixed;
	inset: 0 0 0 auto;
	width: min( 320px, 85vw );
	background: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	transform: translateX( 100% );
	transition: transform 0.3s ease;
	z-index: 200;
	padding: 2rem 1.5rem;
	overflow-y: auto;
}

.mkp-offcanvas a {
	color: var( --wp--preset--color--paper );
}

.is-menu-open .mkp-offcanvas {
	transform: translateX( 0 );
}

.mkp-offcanvas__close {
	background: none;
	border: none;
	color: inherit;
	font-size: 1.5rem;
	cursor: pointer;
	margin-bottom: 1.5rem;
}

.mkp-offcanvas__nav {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	font-size: 1.1rem;
}

.mkp-offcanvas-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 190;
}

.is-menu-open .mkp-offcanvas-overlay {
	opacity: 1;
	pointer-events: auto;
}

.mkp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

/* ---- Section utilities used across patterns ------------------------------ */

.mkp-section {
	padding-block: var( --wp--preset--spacing--50 );
}

.mkp-section--dark {
	background: var( --wp--preset--color--charcoal );
	color: var( --wp--preset--color--paper );
}

.mkp-section--dark h1,
.mkp-section--dark h2,
.mkp-section--dark h3 {
	color: var( --wp--preset--color--paper );
}

.mkp-eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gold );
	margin-bottom: 0.75rem;
}

.mkp-section--tight {
	padding-block: var( --wp--preset--spacing--30 );
}

.mkp-section--flush {
	padding-block: var( --wp--preset--spacing--50 ) 0;
}

.mkp-section-kicker {
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 0.5rem;
}

/* ---- Logo strip (placeholder slots) -------------------------------------- */

.mkp-logo-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2rem 3rem;
}

.mkp-logo-strip__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 64px;
	opacity: 0.6;
	filter: grayscale( 100% );
	transition: opacity 0.2s ease;
}

.mkp-logo-strip__item:hover {
	opacity: 1;
}

.mkp-logo-strip__item img,
.mkp-logo-strip__item svg {
	max-width: 100%;
	max-height: 100%;
}

.mkp-logo-strip__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed rgba( 22, 19, 15, 0.25 );
	border-radius: 4px;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--stone );
}

/* ---- Hero: full-bleed, full-viewport video banner ------------------------ */

.mkp-hero--fullbleed {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: var( --wp--preset--color--paper );
}

.mkp-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #000;
}

.mkp-hero__poster,
.mkp-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mkp-hero__video {
	opacity: 0;
	transition: opacity 0.8s ease;
}

.mkp-hero__video.is-loaded {
	opacity: 1;
}

.mkp-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Monotonic darkening (no lighter "dip" partway up) so the text zone always
	   has a reliable dark floor to sit on, regardless of what's in that part of
	   the video frame at a given moment. */
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.82 ) 0%, rgba( 0, 0, 0, 0.5 ) 55%, rgba( 0, 0, 0, 0.22 ) 100% );
}

.mkp-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 760px;
	padding: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--50 );
}

.mkp-hero__content .mkp-eyebrow {
	color: var( --wp--preset--color--gold );
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.65 );
}

.mkp-hero__content h1,
.mkp-hero__content p {
	color: var( --wp--preset--color--paper );
	text-shadow: 0 2px 10px rgba( 0, 0, 0, 0.45 );
}

/* ---- Temporary homepage stub: video hero (.mkp-event-hero handles the
   fullscreen background video/poster/scrim — this just styles the overlay
   text, positioned/centered independently of the event page's content). ---- */

/* Kept clear of the middle of the frame on purpose — this video also has its
   own on-screen text centered in the shot (same issue as the event hero), so
   the brand mark sits high and the WhatsApp action sits low instead of both
   stacking in the center where they'd overlap the video's own text. */
.mkp-home-stub__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	max-width: 420px;
	margin: 0 auto;
	padding: clamp( 6.5rem, 16vh, 9rem ) var( --wp--preset--spacing--30 ) clamp( 3rem, 8vh, 5rem );
}

.mkp-home-stub__mark {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.75rem, 4vw, 2.5rem );
	color: var( --wp--preset--color--paper );
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.5 );
	margin: 0 0 0.75rem;
}

.mkp-home-stub__tagline {
	font-size: 0.95rem;
	color: var( --wp--preset--color--paper );
	text-shadow: 0 1px 8px rgba( 0, 0, 0, 0.5 );
	margin: 0 0 0.5rem;
}

.mkp-home-stub__note {
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba( 247, 245, 241, 0.75 );
	text-shadow: 0 1px 8px rgba( 0, 0, 0, 0.5 );
	margin: 0 0 2rem;
}

.mkp-home-stub__cta {
	display: inline-block;
	color: var( --wp--preset--color--paper );
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.55 );
	padding-bottom: 0.35rem;
}

/* Mobile: no background video, no poster either — a "Watch video" popup
   replaces it instead (see initHomeStubVideoModal() in navigation.js and
   initEventHeroVideo()'s early-return for .mkp-home-stub under 700px). */
.mkp-home-stub__play {
	display: none;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	background: none;
	border: none;
	color: var( --wp--preset--color--paper );
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 0;
}

.mkp-home-stub__play-icon {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1.5px solid rgba( 255, 255, 255, 0.85 );
	display: flex;
	align-items: center;
	justify-content: center;
}

.mkp-home-stub__play-icon svg {
	width: 0.65rem;
	height: 0.65rem;
	margin-left: 2px;
	fill: currentColor;
}

@media ( max-width: 699px ) {
	.mkp-home-stub.mkp-event-hero {
		background: var( --wp--preset--color--ink );
	}

	.mkp-home-stub .mkp-event-hero__poster,
	.mkp-home-stub .mkp-event-hero__video-mount {
		display: none;
	}

	/* No video showing on mobile, so the top/bottom split that keeps desktop
	   text clear of the video's own on-screen text isn't needed here — the
	   whole block (including "Watch video") centers together instead. */
	.mkp-home-stub .mkp-home-stub__content {
		justify-content: center;
		gap: 2.5rem;
		padding-top: var( --wp--preset--spacing--30 );
	}

	.mkp-home-stub__play {
		display: inline-flex;
	}
}

/* ---- Simple single-video popup (home stub "Watch video" button) ---------- */

body.mkp-lightbox-open {
	overflow: hidden;
}

.mkp-video-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mkp-video-modal[hidden] {
	display: none;
}

.mkp-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 8, 7, 6, 0.92 );
}

.mkp-video-modal__frame {
	position: relative;
	z-index: 1;
	width: min( 90vw, 500px );
}

.mkp-video-modal__player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.mkp-video-modal__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mkp-video-modal__close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	border: none;
	background: none;
	color: #fff;
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
}

/* ---- Event page hero: fullscreen Vimeo background ------------------------ */

.mkp-event-hero {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	color: var( --wp--preset--color--paper );
	background: #000;
}

.mkp-event-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.mkp-event-hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mkp-event-hero__video-mount {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78vh; /* 16:9 "cover" trick: always overfills the viewport regardless of aspect ratio. */
	height: 56.25vw;
	min-width: 100%;
	min-height: 100%;
	transform: translate( -50%, -50% );
}

.mkp-event-hero__video-mount iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.mkp-event-hero__video-mount.is-loaded iframe {
	opacity: 1;
}

.mkp-event-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.6 ) 0%, rgba( 0, 0, 0, 0.35 ) 45%, rgba( 0, 0, 0, 0.45 ) 100% );
}

.mkp-event-hero__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	padding: clamp( 6.5rem, 16vh, 9rem ) var( --wp--preset--spacing--30 ) clamp( 3rem, 8vh, 5rem );
}

/* Kept clear of the middle of the frame on purpose — the source video already
   has its own on-screen text centered in the shot, so the eyebrow sits high
   (just under the transparent header) and the CTA sits low, instead of both
   stacking in the center where they'd overlap the video's own title card. */
.mkp-event-hero__eyebrow {
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.6;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.6 );
	margin: 0;
}

.mkp-event-hero__statement {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2.5rem, 7vw, 5.5rem );
	line-height: 1.05;
	margin: 0 0 2.5rem;
	text-shadow: 0 2px 16px rgba( 0, 0, 0, 0.55 );
}

.mkp-event-hero__cta {
	display: inline-block;
	color: var( --wp--preset--color--paper );
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.55 );
	padding-bottom: 0.35rem;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}

.mkp-event-hero__cta:hover {
	border-color: #fff;
	opacity: 0.85;
}

@media ( max-width: 600px ) {
	.mkp-event-hero__statement {
		font-size: clamp( 2.25rem, 11vw, 3rem );
	}
}

/* ---- Event page: short full-width positioning breaks --------------------- */

.mkp-event-break {
	padding-block: var( --wp--preset--spacing--60 );
	text-align: center;
	overflow: hidden;
}

.mkp-event-break--dark {
	background: var( --wp--preset--color--charcoal );
	color: var( --wp--preset--color--paper );
}

.mkp-event-break__statement {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2rem, 5.5vw, 3.75rem );
	line-height: 1.1;
	margin: 0 0 2.5rem;
}

.mkp-event-break__list {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

.mkp-event-break__marquee {
	width: 100%;
	overflow: hidden;
}

.mkp-event-break__track {
	display: inline-flex;
	gap: 3rem;
	white-space: nowrap;
	animation: mkp-marquee 28s linear infinite;
}

.mkp-event-break__track span {
	font-size: clamp( 1rem, 2.4vw, 1.5rem );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix( in srgb, currentColor 65%, transparent );
}

@keyframes mkp-marquee {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( -50% );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mkp-event-break__marquee {
		display: none;
	}

	.mkp-event-break__list {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem 1.5rem;
		list-style: none;
		padding: 0;
		font-size: 0.95rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}
}

/* ---- Event page: "fast content" / "production scale" short statements --- */

.mkp-event-statement-block {
	padding-block: var( --wp--preset--spacing--60 );
	text-align: center;
}

.mkp-event-statement-block__main {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.75rem, 4.5vw, 3rem );
	line-height: 1.15;
	margin: 0 0 1rem;
}

.mkp-event-statement-block--dark {
	background: var( --wp--preset--color--charcoal );
	color: var( --wp--preset--color--paper );
}

.mkp-event-statement-block--dark .mkp-event-statement-block__sub {
	color: rgba( 255, 255, 255, 0.6 );
}

.mkp-event-statement-block__sub {
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--stone );
	margin: 0;
}

/* ---- Event page: "WE COVER" typographic list ----------------------------- */

.mkp-event-cover {
	padding-block: var( --wp--preset--spacing--60 );
	text-align: center;
}

.mkp-event-cover__heading {
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--stone );
	margin: 0 0 2rem;
}

.mkp-event-cover__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 720px;
}

.mkp-event-cover__list li {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.4rem, 3.5vw, 2.25rem );
	line-height: 1.5;
	border-bottom: 1px solid var( --wp--preset--color--stone );
	padding: 0.5rem 0;
}

.mkp-event-cover__list li:last-child {
	border-bottom: none;
}

/* ---- Event page: agencies + final contact --------------------------------- */

.mkp-event-agencies {
	text-align: center;
	padding-block: var( --wp--preset--spacing--60 );
}

.mkp-event-agencies__heading {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.75rem, 4vw, 2.75rem );
	line-height: 1.15;
	margin: 0 0 1.25rem;
}

.mkp-event-agencies__text {
	max-width: 520px;
	margin: 0 auto 0.5rem;
	font-size: 1rem;
}

.mkp-event-agencies__cta {
	display: inline-block;
	margin-top: 1.5rem;
	color: inherit;
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.3rem;
}

.mkp-event-contact {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	color: var( --wp--preset--color--paper );
	background: var( --wp--preset--color--charcoal );
}

.mkp-event-contact__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.mkp-event-contact__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mkp-event-contact__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba( 22, 19, 15, 0.72 );
}

.mkp-event-contact__content {
	position: relative;
	z-index: 2;
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--30 );
}

.mkp-event-contact__heading {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.75rem, 4.5vw, 3rem );
	line-height: 1.15;
	margin: 0 0 2rem;
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.5 );
}

.mkp-event-contact__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 2.5rem;
}

.mkp-event-contact__action {
	color: var( --wp--preset--color--paper );
	text-decoration: none;
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.55 );
	padding-bottom: 0.4rem;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}

.mkp-event-contact__action:hover {
	border-color: #fff;
	opacity: 0.85;
}

.mkp-hero__controls {
	position: absolute;
	right: var( --wp--preset--spacing--30 );
	bottom: var( --wp--preset--spacing--20 );
	z-index: 3;
	display: flex;
	gap: 1.25rem;
}

.mkp-hero__controls button {
	background: none;
	border: none;
	color: var( --wp--preset--color--paper );
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
	cursor: pointer;
	padding: 0;
}

.mkp-hero__controls button:hover {
	opacity: 1;
}

.mkp-hero__scroll-cue {
	position: absolute;
	left: var( --wp--preset--spacing--30 );
	bottom: var( --wp--preset--spacing--20 );
	z-index: 2;
	color: var( --wp--preset--color--paper );
	opacity: 0.75;
	animation: mkp-scroll-bounce 2s ease-in-out infinite;
}

@keyframes mkp-scroll-bounce {
	0%, 100% { transform: translateY( 0 ); }
	50% { transform: translateY( 8px ); }
}

/* Desktop clip hidden on small screens, mobile clip hidden on larger screens —
   both <video> elements exist so a vertical (9:16) clip can be swapped in for
   phones instead of stretching/cropping the horizontal showreel. */
.mkp-hero__video--desktop,
.mkp-hero__poster--desktop {
	display: none;
}

.mkp-hero__video--mobile,
.mkp-hero__poster--mobile {
	display: block;
}

@media ( min-width: 782px ) {
	.mkp-hero__video--desktop,
	.mkp-hero__poster--desktop {
		display: block;
	}

	.mkp-hero__video--mobile,
	.mkp-hero__poster--mobile {
		display: none;
	}
}

/* ---- Trust strip -------------------------------------------------------- */

.mkp-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	align-items: center;
	justify-content: space-between;
}

.mkp-trust-strip__logos {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: center;
	opacity: 0.7;
}

.mkp-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.mkp-stats__item {
	text-align: left;
}

.mkp-stats__number {
	display: block;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.75rem;
}

.mkp-stats__label {
	font-size: 0.85rem;
	color: var( --wp--preset--color--stone );
}

/* ---- Card grid ------------------------------------------------------- */

.mkp-card-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 1.5rem;
}

.mkp-card-grid--compare {
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
}

.mkp-card {
	padding: 1.75rem;
	border: 1px solid rgba( 22, 19, 15, 0.08 );
	border-radius: 10px;
}

.mkp-card.is-style-featured {
	background: var( --wp--preset--color--charcoal );
	color: var( --wp--preset--color--paper );
	border-color: transparent;
}

.mkp-card.is-style-featured h3 {
	color: var( --wp--preset--color--paper );
}

/* Cards inside a dark section need a light-on-dark border/tint instead of the
   default dark-on-light border, otherwise they're invisible against the
   charcoal background. */
.mkp-section--dark .mkp-card,
.mkp-photo-feature .mkp-card {
	border-color: rgba( 247, 245, 241, 0.15 );
	background: rgba( 247, 245, 241, 0.04 );
}

.mkp-section--dark .mkp-card.is-style-featured {
	background: rgba( 247, 245, 241, 0.08 );
}

/* ---- Checkmark list ----------------------------------------------------- */

ul.is-style-checkmark-list {
	list-style: none;
	padding-left: 0;
}

ul.is-style-checkmark-list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.6rem;
}

ul.is-style-checkmark-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var( --wp--preset--color--gold );
	font-weight: 700;
}

/* ---- Media placeholders (photo/video slots to break up text) ------------- */

.mkp-media-placeholder {
	position: relative;
	aspect-ratio: 4 / 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	background: linear-gradient( 135deg, #1a1a1a, #2c2c2c );
	color: rgba( 255, 255, 255, 0.75 );
	border-radius: 6px;
	overflow: hidden;
	text-align: center;
	padding: 1rem;
}

.mkp-media-placeholder svg {
	width: 2rem;
	height: 2rem;
	opacity: 0.8;
}

.mkp-media-placeholder__type {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gold );
}

.mkp-media-placeholder__caption {
	font-size: 0.85rem;
	color: rgba( 255, 255, 255, 0.65 );
	max-width: 16rem;
}

.mkp-media-break {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 4px;
}

@media ( max-width: 600px ) {
	.mkp-media-break {
		grid-template-columns: 1fr 1fr;
	}
}

.mkp-media-break .mkp-media-placeholder {
	aspect-ratio: 3 / 4;
	border-radius: 0;
}

/* Small thumbnail placeholder used above card headings (services grid, etc.) */
.mkp-card__media {
	aspect-ratio: 16 / 10;
	margin: -1.75rem -1.75rem 1.25rem;
	border-radius: 10px 10px 0 0;
}

.mkp-section--dark .mkp-card__media {
	border-radius: 4px 4px 0 0;
}

/* Side-by-side horizontal vs vertical frame demo */
.mkp-format-demo {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.mkp-format-demo .mkp-media-placeholder--horizontal {
	width: min( 480px, 100% );
	aspect-ratio: 16 / 9;
}

.mkp-format-demo .mkp-media-placeholder--vertical {
	width: min( 220px, 100% );
	aspect-ratio: 9 / 16;
}

/* Interactive crop-reveal: one 16:9 image that stays the same size — hovering
   hatches out the side thirds to show what a 9:16 crop of the same shot would
   lose, instead of actually resizing anything. */
.mkp-crop-demo {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.mkp-crop-demo__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
}

.mkp-crop-demo__frame .mkp-media-placeholder {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: 0;
}

.mkp-crop-demo__mask {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34.2%;
	background: repeating-linear-gradient(
		45deg,
		rgba( 10, 8, 6, 0.75 ) 0 10px,
		rgba( 10, 8, 6, 0.5 ) 10px 20px
	);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
	z-index: 2;
}

.mkp-crop-demo__mask--left {
	left: 0;
}

.mkp-crop-demo__mask--right {
	right: 0;
}

.mkp-crop-demo__frame:hover .mkp-crop-demo__mask,
.mkp-crop-demo__frame:focus-within .mkp-crop-demo__mask {
	opacity: 1;
}

.mkp-crop-demo__outline {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 34.2%;
	right: 34.2%;
	border-left: 1px dashed rgba( 255, 255, 255, 0.8 );
	border-right: 1px dashed rgba( 255, 255, 255, 0.8 );
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: 3;
	pointer-events: none;
}

.mkp-crop-demo__frame:hover .mkp-crop-demo__outline,
.mkp-crop-demo__frame:focus-within .mkp-crop-demo__outline {
	opacity: 1;
}

.mkp-crop-demo__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 4;
	padding: 0.3rem 0.7rem;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: rgba( 10, 8, 6, 0.7 );
	border-radius: 2px;
	transition: opacity 0.2s ease;
}

.mkp-crop-demo__badge--hover {
	opacity: 0;
}

.mkp-crop-demo__frame:hover .mkp-crop-demo__badge--default,
.mkp-crop-demo__frame:focus-within .mkp-crop-demo__badge--default {
	opacity: 0;
}

.mkp-crop-demo__frame:hover .mkp-crop-demo__badge--hover,
.mkp-crop-demo__frame:focus-within .mkp-crop-demo__badge--hover {
	opacity: 1;
}

.mkp-crop-demo__caption {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	color: var( --wp--preset--color--stone );
}

/* ---- Process stepper: compact roadmap + swappable detail panel ----------- */

.mkp-stepper__nav {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
}

.mkp-stepper__nav::before {
	content: "";
	position: absolute;
	top: 1.1rem;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba( 22, 19, 15, 0.15 );
	z-index: 0;
}

.mkp-stepper__node {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
	text-decoration: none;
	color: inherit;
	padding: 0 0.25rem;
}

.mkp-stepper__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid rgba( 22, 19, 15, 0.25 );
	background: var( --wp--preset--color--paper );
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.95rem;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mkp-stepper__label {
	font-size: 0.8rem;
	max-width: 8rem;
}

.js-stepper-ready .mkp-stepper__node.is-active .mkp-stepper__number {
	background: var( --wp--preset--color--gold );
	border-color: var( --wp--preset--color--gold );
	color: var( --wp--preset--color--ink );
}

/* No-JS / crawler fallback: every panel stays visible, stacked, with a divider
   — nothing is ever hidden behind interactivity that might not run. */
.mkp-stepper__panel {
	padding-block: 1.5rem;
	border-top: 1px solid rgba( 22, 19, 15, 0.08 );
}

.js-stepper-ready .mkp-stepper__panel {
	display: none;
	border-top: none;
	padding-block: 0;
}

.js-stepper-ready .mkp-stepper__panel.is-active {
	display: block;
	animation: mkp-fade-in 0.25s ease;
}

@keyframes mkp-fade-in {
	from { opacity: 0; transform: translateY( 6px ); }
	to { opacity: 1; transform: translateY( 0 ); }
}

@media ( max-width: 782px ) {
	.mkp-stepper__nav {
		overflow-x: auto;
		justify-content: flex-start;
		gap: 1.75rem;
		padding-bottom: 0.5rem;
	}

	.mkp-stepper__nav::before {
		left: 1rem;
		right: 1rem;
	}

	.mkp-stepper__label {
		max-width: none;
		white-space: nowrap;
	}
}

/* Icon variant (Who we work with): wraps to multiple rows instead of one
   forced-fit line, no connecting line, bordered node instead of a number
   circle, shared text panel below stays centred and reserves height so the
   panel swap doesn't jump the page. */
.mkp-stepper--icons .mkp-stepper__nav {
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.mkp-stepper--icons .mkp-stepper__nav::before {
	display: none;
}

.mkp-stepper--icons .mkp-stepper__node {
	flex: 0 1 128px;
	padding: 1rem 0.75rem;
	border: 1px solid rgba( 22, 19, 15, 0.12 );
	border-radius: 8px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mkp-stepper--icons .mkp-stepper__icon svg {
	width: 1.75rem;
	height: 1.75rem;
	color: var( --wp--preset--color--gold );
}

.mkp-stepper--icons .mkp-stepper__label {
	max-width: none;
	font-size: 0.78rem;
	line-height: 1.25;
}

.js-stepper-ready .mkp-stepper--icons .mkp-stepper__node.is-active {
	border-color: var( --wp--preset--color--gold );
	background: rgba( 184, 148, 79, 0.08 );
}

.mkp-stepper--icons .mkp-stepper__panels {
	min-height: 7rem;
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

@media ( max-width: 782px ) {
	.mkp-stepper--icons .mkp-stepper__nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
	}
}

/* ---- Filming time calculator ---------------------------------------------- */

.mkp-calculator {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 2rem;
	align-items: stretch;
	border: 1px solid rgba( 22, 19, 15, 0.1 );
	border-radius: 10px;
	padding: 2rem;
}

.mkp-calculator__inputs {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 1.25rem;
	align-content: start;
}

.mkp-calculator__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.mkp-calculator__field label,
.mkp-calculator__field-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --wp--preset--color--stone );
}

.mkp-calculator__field input[type="number"] {
	padding: 0.6rem 0.8rem;
	border: 1px solid rgba( 22, 19, 15, 0.15 );
	border-radius: 4px;
	font: inherit;
	font-size: 0.95rem;
}

.mkp-calculator__field--checkboxes {
	gap: 0.5rem;
	justify-content: center;
}

.mkp-calculator__field--checkboxes label {
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.88rem;
	color: var( --wp--preset--color--ink );
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mkp-calculator__result {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.4rem;
	padding: 1.75rem 1.5rem;
	background: var( --wp--preset--color--charcoal );
	color: var( --wp--preset--color--paper );
	border-radius: 8px;
}

.mkp-calculator__result-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba( 247, 245, 241, 0.6 );
}

.mkp-calculator__result-value {
	font-family: var( --wp--preset--font-family--display );
	font-size: 2.1rem;
	line-height: 1.1;
}

.mkp-calculator__result-note {
	font-size: 0.82rem;
	color: rgba( 247, 245, 241, 0.75 );
	margin-bottom: 0.5rem;
	min-height: 1.2em;
}

.mkp-calculator__cta {
	margin-top: 0.5rem;
}

@media ( max-width: 782px ) {
	.mkp-calculator {
		grid-template-columns: 1fr;
	}

	.mkp-calculator__inputs {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 480px ) {
	.mkp-calculator__inputs {
		grid-template-columns: 1fr;
	}
}

/* ---- FAQ (core/details) accordion --------------------------------------- */

.mkp-faq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 3rem;
	row-gap: 0;
	align-items: start;
	/* Narrower than the full 1180px container and centred as its own block —
	   full-width columns made each question line stretch too wide. Text inside
	   stays left-aligned (the default); only the block itself is centred. */
	max-width: 960px;
	margin-inline: auto;
}

.mkp-faq > h2 {
	grid-column: 1 / -1;
	margin-bottom: 0.5rem;
}

/* Kill the automatic blockGap margin-top WP adds between sibling blocks —
   it was stacking on top of the grid gap, doubling the visible space between
   rows. The border-bottom (set in theme.json) is the only separator needed.
   width:100% is the real fix for the ragged left edges: each <details> was
   shrinking to its own content width and centering itself within its grid
   column (short questions sat right-shifted, long 2-line ones sat further
   left) — forcing full width makes every question start at the same left
   edge regardless of how long it is. */
.mkp-faq details {
	margin: 0;
	width: 100%;
}

@media ( max-width: 700px ) {
	.mkp-faq {
		grid-template-columns: 1fr;
	}
}

.mkp-faq details summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mkp-faq details summary::-webkit-details-marker {
	display: none;
}

.mkp-faq details summary::after {
	content: "+";
	font-size: 1.5rem;
	color: var( --wp--preset--color--gold );
	transition: transform 0.2s ease;
}

.mkp-faq details[open] summary::after {
	transform: rotate( 45deg );
}

/* ---- CTA band + WhatsApp -------------------------------------------- */

.mkp-cta-band {
	text-align: center;
	padding: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--30 );
	border-radius: 16px;
}

.mkp-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 1.5rem;
}

.mkp-whatsapp-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: underline;
}

/* ---- Footer ------------------------------------------------------------ */

.mkp-footer {
	background: var( --wp--preset--color--charcoal );
	color: var( --wp--preset--color--paper );
	padding-block: var( --wp--preset--spacing--40 );
}

.mkp-footer a {
	color: var( --wp--preset--color--paper );
}