/**

 * Modern homepage layout

 *

 * Full-viewport intro slider, editorial sections, alternating session features.

 */



/* -----------------------------------------------------------------------

 * Header + viewport stack (Modern homepage only)

 * Header sits in document flow; slider fills the remaining viewport.

 * -------------------------------------------------------------------- */

.home-layout--modern {
	--mk-modern-utility-h: 0px;
	--mk-modern-header-h: 64px;
	--mk-modern-progress-h: 4px;
}

.home-layout--modern.has-header-utility {
	--mk-modern-utility-h: 44px;
}

/* Solid header in normal flow — utility + nav stack ABOVE the slider so the
   slider begins beneath the menu. The header is never transparent. */
body.home-layout--modern .mk-site-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	overflow: visible;
}

/* Dark distinct utility strip (in flow, above the nav) */
body.home-layout--modern .mk-header-utility {
	position: relative;
	top: 0;
	left: auto;
	right: auto;
	flex-shrink: 0;
	background-color: var(--mk-header-utility-overlay-bg);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.9);
}

/* Solid navigation bar — white background, dark text (never transparent) */
body.home-layout--modern .mk-site-header .mk-header,
body.home-layout--modern .mk-site-header .mk-header.mk-header--transparent {
	position: relative;
	top: 0;
	z-index: 1;
	height: var(--mk-modern-header-h);
	flex-shrink: 0;
	overflow: visible;
	background-color: #fff;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: none;
}

body.home-layout--modern .mk-site-header .mk-header::after {
	box-shadow: var(--mk-header-drop-shadow, 0 5px 14px 2px rgba(0, 0, 0, 0.06));
}

/* Nav, logo, and theme toggle — black on white */
body.home-layout--modern .mk-site-header .mk-header .mk-logo,
body.home-layout--modern .mk-site-header .mk-header .mk-logo__text,
body.home-layout--modern .mk-site-header .mk-header .mk-nav__link,
body.home-layout--modern .mk-site-header .mk-header .mk-nav__link--top,
body.home-layout--modern .mk-site-header .mk-header .mk-dropdown__toggle,
body.home-layout--modern .mk-site-header .mk-header .mk-darkmode-toggle {
	color: #111;
}

body.home-layout--modern .mk-site-header .mk-header .mk-darkmode-toggle {
	display: inline-flex;
}

body.home-layout--modern .mk-site-header .mk-header .mk-darkmode-toggle svg {
	stroke: currentColor;
}

body.home-layout--modern .mk-site-header .mk-header .mk-hamburger__bar {
	background: #111;
}

body.home-layout--modern .mk-site-header .mk-header .mk-logo__img {
	filter: none;
}

/* logo_light_url = dark logo for light backgrounds; logo_dark_url = light logo for dark backgrounds */
body.home-layout--modern:not([data-theme="dark"]) .mk-logo__img--light {
	display: block;
}

body.home-layout--modern:not([data-theme="dark"]) .mk-logo__img--dark {
	display: none;
}

[data-theme="dark"] body.home-layout--modern .mk-logo__img--light {
	display: none;
}

[data-theme="dark"] body.home-layout--modern .mk-logo__img--dark {
	display: block;
}

body.home-layout--modern .mk-site-header .mk-header__nav .mk-nav__link--top:hover,
body.home-layout--modern .mk-site-header .mk-header__nav .mk-nav__link--top.is-active,
body.home-layout--modern .mk-site-header .mk-header__nav .current-menu-item > .mk-nav__link--top,
body.home-layout--modern .mk-site-header .mk-header__nav .current_page_item > .mk-nav__link--top,
body.home-layout--modern .mk-site-header .mk-header__nav .current-menu-ancestor > .mk-nav__link--top,
body.home-layout--modern .mk-site-header .mk-header__nav .mk-nav__item--has-dropdown:hover > .mk-nav__link--top,
body.home-layout--modern .mk-site-header .mk-header__nav .mk-nav__item--has-dropdown:focus-within > .mk-nav__link--top {
	color: #111;
	background-color: rgba(0, 0, 0, 0.06);
}

body.home-layout--modern .mk-site-header .mk-header__nav .current-menu-item > .mk-nav__link--top,
body.home-layout--modern .mk-site-header .mk-header__nav .current_page_item > .mk-nav__link--top {
	background-color: rgba(0, 0, 0, 0.08);
}

body.home-layout--modern .mk-site-header .mk-header .mk-darkmode-toggle:hover,
body.home-layout--modern .mk-site-header .mk-header .mk-darkmode-toggle:focus-visible {
	color: #111;
	background-color: rgba(0, 0, 0, 0.06);
}

/* Dark theme: solid header with light text (still not transparent) */
[data-theme="dark"] body.home-layout--modern .mk-site-header .mk-header .mk-logo,
[data-theme="dark"] body.home-layout--modern .mk-site-header .mk-header .mk-logo__text,
[data-theme="dark"] body.home-layout--modern .mk-site-header .mk-header .mk-nav__link,
[data-theme="dark"] body.home-layout--modern .mk-site-header .mk-header .mk-nav__link--top,
[data-theme="dark"] body.home-layout--modern .mk-site-header .mk-header .mk-dropdown__toggle,
[data-theme="dark"] body.home-layout--modern .mk-site-header .mk-header .mk-darkmode-toggle {
	color: var(--mk-text);
}

[data-theme="dark"] body.home-layout--modern .mk-site-header .mk-header .mk-hamburger__bar {
	background: var(--mk-text);
}

[data-theme="dark"] body.home-layout--modern .mk-site-header .mk-header .mk-darkmode-toggle:hover,
[data-theme="dark"] body.home-layout--modern .mk-site-header .mk-header .mk-darkmode-toggle:focus-visible {
	color: var(--mk-text);
	background-color: color-mix(in srgb, var(--mk-text) 8%, transparent);
}



/* -----------------------------------------------------------------------

 * Intro slider

 * -------------------------------------------------------------------- */

.mk-modern-intro {

	position: relative;

	width: 100%;

	/* Fill the viewport that remains below the (in-flow) utility bar + nav so
	   the menu and slider together equal exactly one screen height. */
	height: calc(100svh - var(--mk-modern-header-h) - var(--mk-modern-utility-h));

	height: calc(100dvh - var(--mk-modern-header-h) - var(--mk-modern-utility-h));

	min-height: 420px;

	overflow: hidden;

	color: #fff;

	isolation: isolate;

	--mk-modern-progress: 9%;

}



.mk-modern-intro__slides {

	position: absolute;

	inset: 0;

	z-index: 0;

	overflow: hidden;

}



.mk-modern-intro__slide {

	position: absolute;

	inset: 0;

	background-position: center 30%;

	background-size: cover;

	background-repeat: no-repeat;

	opacity: 0;

	transform: scale(1);

	transition:

		opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1),

		transform 9s cubic-bezier(0.25, 0.1, 0.25, 1);

}



.mk-modern-intro__slide.is-active {

	opacity: 1;

	transform: scale(1.02);

	/* Promote only the visible slide — not all N — so we don't hold a GPU layer
	   (backed by a full-size image) for every slide at once. */

	will-change: opacity, transform;

}

/* Desktop: balanced focal point — avoids heavy top or bottom crop */
@media (min-width: 941px) {

	.mk-modern-intro__slide {
		background-position: center 38%;
	}

}

/* Large monitors: keep the photo full and crisp — no zoom drift */
@media (min-width: 1600px) {

	.mk-modern-intro__slide {
		background-position: center 40%;
		transform: scale(1);
	}

	.mk-modern-intro__slide.is-active {
		transform: scale(1);
	}

}



.mk-modern-intro__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 18%, transparent 32%, transparent 52%, rgba(0, 0, 0, 0.18) 100%),
		radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 58%);
	pointer-events: none;
}

.mk-modern-intro__progress-track {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 5;
	height: var(--mk-modern-progress-h);
	margin: 0;
	background: rgba(255, 255, 255, 0.22);
	overflow: hidden;
	border-radius: 0;
	pointer-events: none;
}

.mk-modern-intro__progress-fill {
	display: block;
	height: 100%;
	width: var(--mk-modern-progress, 9%);
	background: #fff;
	border-radius: 0;
	transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

.mk-modern-intro__scroll-rail {
	position: absolute;
	right: clamp(1rem, 2.8vw, 2rem);
	top: 50%;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	transform: translateY(-50%);
	pointer-events: none;
}

.mk-modern-intro__scroll {
	margin: 0;
	font-family: var(--mk-font-body);
	font-size: 0.58rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
}

.mk-modern-intro__scroll-line {
	display: block;
	width: 1px;
	height: 2.75rem;
	background: rgba(255, 255, 255, 0.38);
	animation: mk-modern-scroll-line 2.6s ease-in-out infinite;
}

@keyframes mk-modern-scroll-line {
	0%, 100% { transform: scaleY(0.5); opacity: 0.4; }
	50% { transform: scaleY(1); opacity: 0.85; }
}

/* Bottom-right slide switcher */
.mk-modern-intro__nav {
	position: absolute;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: calc(var(--mk-modern-progress-h) + clamp(1.25rem, 3vw, 2rem));
	z-index: 4;
	display: flex;
	align-items: center;
	pointer-events: auto;
}

.mk-modern-intro__nav-panel {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.5rem, 1.2vw, 0.85rem);
	padding: 0.4rem 0.55rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	background: rgba(12, 12, 14, 0.42);
	backdrop-filter: blur(12px) saturate(1.2);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.mk-modern-intro__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(2.25rem, 3.4vw, 2.75rem);
	height: clamp(2.25rem, 3.4vw, 2.75rem);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	opacity: 1;
	transition: background 0.2s ease, transform 0.2s ease;
}

.mk-modern-intro__arrow svg {
	display: block;
	width: clamp(1.15rem, 1.8vw, 1.4rem);
	height: clamp(1.15rem, 1.8vw, 1.4rem);
}

.mk-modern-intro__arrow:hover,
.mk-modern-intro__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.9);
	color: #111;
	outline: none;
	transform: none;
}

.mk-modern-intro__counter {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	min-width: clamp(3.5rem, 6vw, 4.25rem);
	justify-content: center;
	margin: 0;
	font-family: var(--mk-font-body);
	font-size: clamp(0.9rem, 1.5vw, 1.05rem);
	font-weight: 600;
	letter-spacing: 0.16em;
	font-variant-numeric: tabular-nums;
	color: #fff;
	line-height: 1;
}

.mk-modern-intro__counter-sep {
	opacity: 0.5;
	font-weight: 400;
}



/* -----------------------------------------------------------------------

 * About — editorial split with layered portrait blob

 * -------------------------------------------------------------------- */

.mk-modern-about {

	--mk-about-blob-w: clamp(18rem, 34vw, 27.5rem);

	padding-block: clamp(4rem, 8vw, 6.5rem);

	border-top: 1px solid var(--mk-border, rgba(0, 0, 0, 0.08));

	overflow: hidden;

}



.mk-modern-about__inner {

	width: 100%;

}



.mk-modern-about__split {

	display: grid;

	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

	gap: clamp(2.5rem, 5vw, 4.5rem);

	align-items: center;

}



.mk-modern-about__media {

	position: relative;

	display: flex;

	justify-content: center;

	align-items: center;

	min-height: calc(var(--mk-about-blob-w) * 1.28);

	padding: clamp(1rem, 3vw, 2rem) 0;

}



.mk-modern-about__figure {

	position: relative;

	margin: 0;

	width: var(--mk-about-blob-w);

	aspect-ratio: 4 / 5;

}



.mk-modern-about__blob-def {

	position: absolute;

	width: 0;

	height: 0;

	overflow: hidden;

}



.mk-modern-about__blob-glow {

	position: absolute;

	inset: 8% -14% -10% 10%;

	background: radial-gradient(ellipse at 42% 38%, color-mix(in srgb, var(--mk-accent, #c4a882) 42%, transparent) 0%, transparent 72%);

	clip-path: url(#mk-modern-about-blob);

	transform: scale(1.18) rotate(-4deg);

	transform-origin: 52% 48%;

	opacity: 0.75;

	z-index: 0;

}



.mk-modern-about__blob-shell {

	position: absolute;

	inset: 4% -8% -6% 8%;

	background: color-mix(in srgb, var(--mk-accent, #c4a882) 24%, var(--mk-surface, #fff));

	clip-path: url(#mk-modern-about-blob);

	transform: scale(1.08) rotate(3deg);

	transform-origin: 48% 52%;

	opacity: 0.9;

	z-index: 1;

}



.mk-modern-about__blob-ring {

	position: absolute;

	inset: -5% -9% -7% 5%;

	width: calc(100% + 14%);

	height: calc(100% + 12%);

	color: color-mix(in srgb, var(--mk-accent, #c4a882) 55%, var(--mk-text, #1a1a1a));

	opacity: 0.42;

	z-index: 2;

	pointer-events: none;

}



.mk-modern-about__blob-media {

	position: relative;

	z-index: 3;

	width: 100%;

	height: 100%;

	clip-path: url(#mk-modern-about-blob);

	filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.14));

}



.mk-modern-about__photo {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

	object-position: center 22%;

}



.mk-modern-about__spark {

	position: absolute;

	top: 10%;

	right: -2%;

	width: clamp(0.65rem, 1.4vw, 0.85rem);

	height: clamp(0.65rem, 1.4vw, 0.85rem);

	border-radius: 50%;

	background: var(--mk-accent, #c4a882);

	box-shadow: 0 0 0 6px color-mix(in srgb, var(--mk-accent, #c4a882) 22%, transparent);

	z-index: 4;

}



.mk-modern-about__copy {

	padding-block: clamp(0.5rem, 2vw, 1.5rem);

}



.mk-modern-about__copy .mk-eyebrow {

	display: block;

	margin-bottom: 0.75rem;

	text-align: left;

}



.mk-modern-about__copy .mk-section__title {

	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);

	text-align: left;

	max-width: 18ch;

}



.mk-modern-about__text {

	margin-bottom: clamp(1.5rem, 3vw, 2rem);

	font-size: clamp(1rem, 1.4vw, 1.0625rem);

	line-height: 1.8;

	color: var(--mk-text-2, var(--mk-muted));

	max-width: 42rem;

}



.mk-modern-about__text p {

	margin: 0;

}



.mk-modern-about__actions {

	margin-top: 0.25rem;

}



/* -----------------------------------------------------------------------

 * Sessions — investment-style card grid

 * -------------------------------------------------------------------- */

.mk-modern-sessions {

	padding-block: clamp(4rem, 8vw, 6.5rem);

	background: var(--mk-surface);

}



.mk-modern-sessions__head,

.mk-modern-portfolio__head,

.mk-modern-testimonials__head {

	margin-bottom: clamp(2rem, 4vw, 3rem);

	text-align: center;

}



.mk-modern-sessions__sub {

	max-width: 38rem;

	margin-inline: auto;

}



/* -----------------------------------------------------------------------

 * Portfolio + testimonials spacing

 * -------------------------------------------------------------------- */

.mk-modern-portfolio {

	padding-block: clamp(4rem, 8vw, 6.5rem);

}



.mk-modern-testimonials {

	padding-block: clamp(4rem, 8vw, 6.5rem);

	background: var(--mk-surface);

}



.mk-modern-quote {

	margin-block: 0;

}



.mk-modern-cta {

	margin-block: 0;

	min-height: clamp(20rem, 40vw, 26rem);

	padding-block: clamp(3.5rem, 8vw, 5.5rem);

}



.mk-modern-cta .mk-fullwidth-cta__heading {

	font-family: var(--mk-font-head);

	font-size: clamp(1.85rem, 3.2vw, 2.85rem);

	font-weight: 400;

	line-height: 1.2;

	max-width: 18ch;

}



.mk-modern-cta .mk-eyebrow {

	letter-spacing: 0.18em;

}



.home-layout--modern .mk-section__action {

	margin-top: clamp(2rem, 4vw, 3rem);

	text-align: center;

}



/* -----------------------------------------------------------------------

 * Responsive

 * -------------------------------------------------------------------- */

@media (max-width: 900px) {

	.mk-modern-about__split {

		grid-template-columns: 1fr;

	}



	.mk-modern-about {

		--mk-about-blob-w: min(78vw, 22rem);

	}



	.mk-modern-about__media {

		min-height: auto;

		padding-block: 0.5rem 1.5rem;

	}



	.mk-modern-about__figure {

		margin-inline: auto;

	}



	.mk-modern-about__copy .mk-section__title {

		max-width: none;

	}



	.mk-modern-intro__arrow {
		width: 2.5rem;
		height: 2.5rem;
	}

	.mk-modern-intro__scroll-rail {
		right: 0.75rem;
	}

}



@media (max-width: 640px) {

	.home-layout--modern {
		--mk-modern-header-h: 56px;
	}

	.home-layout--modern.has-header-utility {
		--mk-modern-utility-h: 38px;
	}

	body.home-layout--modern .mk-header-utility {
		height: var(--mk-modern-utility-h);
		font-size: 0.7rem;
	}

	body.home-layout--modern .mk-header-utility__inner {
		min-height: var(--mk-modern-utility-h);
		gap: 0.5rem;
		padding-inline: max(var(--mk-container-pad), env(safe-area-inset-left, 0px)) max(var(--mk-container-pad), env(safe-area-inset-right, 0px));
	}

	body.home-layout--modern .mk-header-utility__start,
	body.home-layout--modern .mk-header-utility__end {
		gap: 0.5rem;
	}

	body.home-layout--modern .mk-header-utility__location {
		font-size: 0.66rem;
		max-width: 52vw;
	}

	body.home-layout--modern .mk-header-utility__link {
		font-size: 0.66rem;
	}

	body.home-layout--modern .mk-header-utility__social-link {
		width: 1.35rem;
		height: 1.35rem;
	}

	body.home-layout--modern .mk-header__inner {
		padding-inline: max(var(--mk-container-pad), env(safe-area-inset-left, 0px)) max(var(--mk-container-pad), env(safe-area-inset-right, 0px));
	}

	.mk-modern-intro {
		min-height: 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.mk-modern-intro__overlay {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.16) 20%, transparent 34%, transparent 50%, rgba(0, 0, 0, 0.2) 100%),
			radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0, 0, 0, 0.38) 0%, transparent 58%);
	}

	.mk-modern-intro__arrow {
		width: 2.35rem;
		height: 2.35rem;
	}

	.mk-modern-intro__counter {
		min-width: 3.5rem;
		font-size: 0.88rem;
	}

	.mk-modern-intro__scroll-rail {
		display: none;
	}

}



@media (prefers-reduced-motion: reduce) {

	.mk-modern-intro__slide {

		transition: opacity 0.4s ease;

		transform: none !important;

	}



	.mk-modern-intro__slide.is-active {

		transform: none;

	}



	.mk-modern-intro__scroll-line {
		animation: none;
	}

	.mk-modern-intro__progress-fill {
		transition: none;
	}

}