.mk-hero {
	--mk-h: #fff;
	--mk-t: #dce6ee;
	--mk-arrow: #ff5a66;
	--mk-push: 1.07;
	--mk-push-s: 30s;
	--mk-wash: 0.66;
	--mk-slide-ms: 5500ms;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding: 120px 0 150px;
	background: var(--mk-navy);
	text-align: center;
}
.mk-hero .mk-hero__media {
	position: absolute;
	inset: 0;
	width: 100% !important; /* beat theme / Elementor "img { height: auto }" so the photo always fills the banner */
	height: 100% !important;
	min-height: 100%;
	object-fit: cover;
	object-position: center top;
	max-width: none;
	transform-origin: 50% 22%;
	will-change: transform;
}
.mk-hero.has-push .mk-hero__media { animation: mk-push var(--mk-push-s) ease-in-out infinite alternate; }
@keyframes mk-push { from { transform: scale(1); } to { transform: scale(var(--mk-push)); } }

.mk-hero__wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 62% 48% at 50% 54%, rgba(22, 36, 48, var(--mk-wash)) 0%, rgba(22, 36, 48, calc(var(--mk-wash) * 0.66)) 55%, rgba(22, 36, 48, 0) 100%),
		linear-gradient(180deg, rgba(22, 36, 48, 0.1) 0%, rgba(22, 36, 48, 0.12) 40%, rgba(22, 36, 48, 0.12) 70%, rgba(22, 36, 48, 0.45) 100%);
}
.mk-hero__inner { position: relative; z-index: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 24px; }

/* Slides share one grid cell, so the box never jumps between headlines. */
.mk-hero__slides { display: grid; }
.mk-hero__slide {
	grid-area: 1 / 1;
	align-self: end;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.9s ease, transform 0.9s ease;
	pointer-events: none;
}
.mk-hero__slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mk-hero .mk-hero__h {
	color: var(--mk-h);
	font-size: min(92px, calc((100vw - 40px) / 10.4));
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 22px 0 26px;
}
.mk-hero__h b, .mk-hero__h strong { font-weight: 650; }
.mk-hero .mk-hero__p { color: var(--mk-t); max-width: 560px; margin: 0 auto 38px; font-size: clamp(17px, 1.5vw, 19.5px); }
.mk-hero__p b { color: var(--mk-h); }

.mk-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mk-hero .mk-pill { border-color: rgba(255, 255, 255, 0.85); color: #fff; }
.mk-hero .mk-pill .mk-arr { color: var(--mk-arrow); }
.mk-hero .mk-pill:hover { background: #fff; color: var(--mk-navy); }
.mk-hero .mk-pill:hover .mk-arr { color: var(--mk-red); }
.mk-hero .mk-pill--solid {
	min-width: 15.2em; /* fits the longest label so buttons never shift */
	justify-content: center;
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(10px) saturate(1.15);
	backdrop-filter: blur(10px) saturate(1.15);
}
.mk-hero .mk-pill--solid:hover { background: rgba(255, 255, 255, 0.32); color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.mk-hero .mk-pill--solid:hover .mk-arr { color: var(--mk-arrow); }

/* Progress bars: the active one fills over --mk-slide-ms. */
.mk-hero__bars { position: absolute; z-index: 2; left: 50%; bottom: 82px; transform: translateX(-50%); display: flex; gap: 10px; }
.mk-hero .mk-hero__bar { width: 56px; height: 20px; padding: 9px 0; }
.mk-hero__bar i { display: block; height: 2px; background: rgba(255, 255, 255, 0.28); position: relative; overflow: hidden; }
.mk-hero__bar i::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.mk-hero__bar.is-on i::after { animation: mk-fill var(--mk-slide-ms) linear forwards; }
.mk-hero__bar.is-done i::after { transform: scaleX(1); }
.mk-hero.is-paused .mk-hero__bar.is-on i::after { animation-play-state: paused; }
@keyframes mk-fill { to { transform: scaleX(1); } }

.mk-hero__cue {
	position: absolute; z-index: 2; left: 50%; bottom: 24px; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	font: 500 11px var(--mk-mono); letter-spacing: 0.22em; text-transform: uppercase;
	color: #fff; transition: opacity 0.4s;
}
.mk-hero__caret { width: 20px; height: 11px; animation: mk-caret 2.6s ease-in-out infinite; }
.mk-hero__cue.is-gone { opacity: 0; pointer-events: none; }
@keyframes mk-caret { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
	.mk-hero.has-push .mk-hero__media { animation: none; }
	.mk-hero__slide { transform: none; }
	.mk-hero__caret { animation: none; opacity: 0.8; }
}

/* The banner is full height and later in the page: keep a fixed / absolute / sticky theme header on top of it. */
.elementor-location-header, .elementor-location-header > .e-parent, header.site-header, #header { z-index: 100; }

/* Always full width + centred inside Elementor flex containers (the widget wrapper can otherwise shrink to its content). */
.elementor-widget-mk-hero-slider { width: 100%; max-width: 100%; align-self: stretch; }
.mk-hero { width: 100%; box-sizing: border-box; }
.mk-hero__inner, .mk-hero__slides, .mk-hero__slide { text-align: center; }
.mk-hero .mk-hero__h, .mk-hero .mk-hero__p { margin-left: auto; margin-right: auto; text-align: center; }

/* Phone: truly centred content (equal top/bottom space, bars + cue sit in the bottom gap). */
@media (max-width: 767px) {
	.mk-hero { justify-content: center; align-items: center; padding: 110px 0 110px; min-height: 100vh; min-height: 100svh; }
	.mk-hero__inner { padding: 0 20px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; }
	.mk-hero__slides { width: 100%; }
	.mk-hero__slide { align-self: center; }
	.mk-hero .mk-hero__h { margin: 0 0 18px; }
	.mk-hero .mk-hero__p { margin-bottom: 28px; max-width: 100%; }
	.mk-hero__cta { width: 100%; flex-direction: column; align-items: center; }
	.mk-hero .mk-pill--solid { min-width: 0; width: min(100%, 300px); }
	.mk-hero .mk-pill { width: min(100%, 300px); justify-content: center; }
}