/* =========================================================
   REMOVE TWENTY FIFTEEN LAYOUT
========================================================= */

body.km-prototype-page:before {
	display: none !important;
}

body.km-prototype-page {
	background: #11100e !important;
}

body.km-prototype-page #sidebar,
body.km-prototype-page .sidebar,
body.km-prototype-page #colophon,
body.km-prototype-page .site-footer,
body.km-prototype-page .entry-header,
body.km-prototype-page .entry-footer,
body.km-prototype-page .post-navigation,
body.km-prototype-page .navigation,
body.km-prototype-page .comments-area {
	display: none !important;
}

body.km-prototype-page #page,
body.km-prototype-page .site {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

body.km-prototype-page #content,
body.km-prototype-page .site-content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

body.km-prototype-page .content-area,
body.km-prototype-page .site-main {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

body.km-prototype-page article,
body.km-prototype-page .hentry {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.km-prototype-page .entry-content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.km-prototype-page .entry-content > * {
	max-width: none;
}

body.km-prototype-page .entry-content:before,
body.km-prototype-page .entry-content:after {
	display: none;
}


/* =========================================================
   GLOBAL PROTOTYPE
========================================================= */

#km-home-prototype {

	--km-dark: #11100e;
	--km-paper: #eee9df;
	--km-gold: #b6a078;
	--km-grey: #8f8a80;

	width: 100%;

	overflow: clip;

	background: var(--km-paper);

	color: var(--km-dark);

	font-family:
		"STIX Two Text",
		Georgia,
		serif;
}

#km-home-prototype,
#km-home-prototype * {
	box-sizing: border-box;
}

#km-home-prototype h1,
#km-home-prototype h2,
#km-home-prototype h3,
#km-home-prototype p {
	font-family:
		"STIX Two Text",
		Georgia,
		serif;
}

.km-container {
	width: min(
		1380px,
		calc(100% - 100px)
	);

	margin: 0 auto;
}




/* =========================================================
   GLOBAL NAVIGATION / HEADER
========================================================= */

body.km-prototype-page {
	--km-header-height: 88px;
}

.km-site-header {
	position: fixed;
	z-index: 99991;
	top: 0;
	left: 0;
	right: 0;
	height: var(--km-header-height);
	padding: 0 clamp(24px, 4vw, 70px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	color: #eee9df;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition:
		background .35s ease,
		border-color .35s ease,
		box-shadow .35s ease,
		height .35s ease;
}

body.admin-bar.km-prototype-page .km-site-header {
	top: 32px;
}

.km-site-header.is-scrolled,
.km-site-header.is-menu-open {
	height: 74px;
	background: rgba(14,13,11,.84);
	border-bottom-color: rgba(238,233,223,.10);
	box-shadow: 0 10px 35px rgba(0,0,0,.12);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.km-site-brand {
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: inherit !important;
	text-decoration: none !important;
}

.km-site-brand-mark {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	display: grid;
	place-items: center;
}

.km-site-brand-mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.km-site-brand-name {
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: .17em;
	white-space: nowrap;
}

.km-menu-toggle {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	padding: 12px 0 12px 14px;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	background: transparent !important;
	color: #eee9df !important;
	font-family: Arial, sans-serif;
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .20em;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
}

.km-menu-toggle:focus {
	outline: none;
}

.km-menu-toggle:focus-visible {
	outline: 1px solid #b6a078;
	outline-offset: 5px;
}

.km-menu-toggle-icon {
	position: relative;
	width: 25px;
	height: 14px;
	display: block;
}

.km-menu-toggle-icon span {
	position: absolute;
	left: 0;
	width: 25px;
	height: 1px;
	background: currentColor;
	transform-origin: center;
	transition:
		top .28s ease,
		transform .28s ease;
}

.km-menu-toggle-icon span:first-child {
	top: 3px;
}

.km-menu-toggle-icon span:last-child {
	top: 10px;
}

.km-menu-toggle.is-open .km-menu-toggle-icon span:first-child {
	top: 7px;
	transform: rotate(45deg);
}

.km-menu-toggle.is-open .km-menu-toggle-icon span:last-child {
	top: 7px;
	transform: rotate(-45deg);
}


/* ---------------------------------------------------------
   FULL SCREEN MENU
--------------------------------------------------------- */

html.km-menu-open,
body.km-menu-open {
	overflow: hidden !important;
}

.km-menu-overlay {
	position: fixed;
	z-index: 99990;
	inset: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 82% 18%, #302b23 0%, #171511 34%, #0b0a09 78%);
	color: #eee9df;
	transition:
		opacity .42s ease,
		visibility .42s step-end;
}

body.admin-bar.km-prototype-page .km-menu-overlay {
	top: 32px;
}

.km-menu-overlay:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
	background-size: 8vw 100%;
	pointer-events: none;
}

.km-menu-overlay.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition:
		opacity .42s ease,
		visibility 0s;
}

.km-menu-overlay-inner {
	position: relative;
	z-index: 2;
	height: 100%;
	padding:
		calc(var(--km-header-height) + 46px)
		clamp(28px, 6vw, 110px)
		42px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 34px;
	overflow-y: auto;
}

.km-menu-overlay-head,
.km-menu-overlay-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	font-family: Arial, sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .20em;
	color: rgba(238,233,223,.48);
}

.km-menu-overlay-head {
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(238,233,223,.12);
}

.km-menu-overlay-foot {
	padding-top: 22px;
	border-top: 1px solid rgba(238,233,223,.12);
}

.km-menu-navigation {
	align-self: center;
	width: 100%;
}

.km-primary-menu,
.km-primary-menu ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.km-primary-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(55px, 8vw, 150px);
	row-gap: 0;
}

.km-primary-menu > li {
	position: relative;
	min-width: 0;
	padding: 13px 0 15px;
	border-bottom: 1px solid rgba(238,233,223,.10);
	break-inside: avoid;
}

.km-primary-menu a {
	color: #eee9df !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition:
		color .24s ease,
		opacity .24s ease,
		transform .24s ease;
}

.km-primary-menu > li > a {
	display: inline-block;
	font-family: "STIX Two Text", Georgia, serif;
	font-size: 34px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.018em;
}

.km-primary-menu > li:hover > a,
.km-primary-menu > li.current-menu-item > a,
.km-primary-menu > li.current-menu-ancestor > a {
	color: #c7ae7a !important;
}

.km-primary-menu .sub-menu {
	margin-top: 12px !important;
	padding-left: 18px !important;
	border-left: 1px solid rgba(182,160,120,.35);
}

.km-primary-menu .sub-menu li + li {
	margin-top: 7px;
}

.km-primary-menu .sub-menu a {
	display: inline-block;
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .08em;
	color: rgba(238,233,223,.58) !important;
}

.km-primary-menu .sub-menu a:hover,
.km-primary-menu .sub-menu a:focus-visible {
	color: #d2bb8d !important;
	transform: translateX(4px);
}

.km-menu-missing {
	font-size: 20px;
	color: #eee9df;
}


/* ---------------------------------------------------------
   MENU ENTRANCE
--------------------------------------------------------- */

.km-menu-overlay .km-primary-menu > li {
	opacity: 0;
	transform: translateY(12px);
}

.km-menu-overlay.is-open .km-primary-menu > li {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity .42s ease,
		transform .42s ease;
}

.km-menu-overlay.is-open .km-primary-menu > li:nth-child(2n) {
	transition-delay: .04s;
}


/* ---------------------------------------------------------
   NAV MOBILE
--------------------------------------------------------- */

@media (max-width: 782px) {

	body.admin-bar.km-prototype-page .km-site-header,
	body.admin-bar.km-prototype-page .km-menu-overlay {
		top: 46px;
	}
}

@media (max-width: 760px) {

	body.km-prototype-page {
		--km-header-height: 72px;
	}

	.km-site-header {
		padding: 0 22px;
	}

	.km-site-header.is-scrolled,
	.km-site-header.is-menu-open {
		height: 66px;
	}

	.km-site-brand {
		gap: 10px;
	}

	.km-site-brand-mark {
		width: 36px;
		height: 36px;
		flex-basis: 36px;
	}

	.km-site-brand-name {
		max-width: 170px;
		white-space: normal;
		font-size: 8px;
		letter-spacing: .13em;
	}

	.km-menu-toggle-label {
		display: none;
	}

	.km-menu-toggle {
		padding-left: 10px;
	}

	.km-menu-overlay-inner {
		padding:
			calc(var(--km-header-height) + 30px)
			22px
			28px;
		gap: 25px;
	}

	.km-menu-overlay-head,
	.km-menu-overlay-foot {
		font-size: 8px;
		letter-spacing: .13em;
	}

	.km-menu-overlay-head span:last-child {
		display: none;
	}

	.km-primary-menu {
		grid-template-columns: 1fr;
	}

	.km-primary-menu > li {
		padding: 10px 0 12px;
	}

	.km-primary-menu > li > a {
		font-size: clamp(24px, 8vw, 34px);
	}

	.km-primary-menu .sub-menu {
		margin-top: 10px !important;
	}

	.km-primary-menu .sub-menu a {
		font-size: 9px;
	}

	.km-menu-overlay-foot {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}
}


/* =========================================================
   HERO
========================================================= */

.km-hero {

	position: relative;

	height: 100vh;
	min-height: 700px;

	display: flex;
	align-items: center;

	overflow: hidden;

	color: var(--km-paper);

	background:
		radial-gradient(
			circle at 72% 44%,
			#302b23 0%,
			#191612 38%,
			#0a0908 100%
		);
}

.km-hero:after {

	content: "";

	position: absolute;
	inset: 0;

	background-image:
		linear-gradient(
			90deg,
			rgba(255,255,255,.025) 1px,
			transparent 1px
		);

	background-size:
		8vw 100%;

	pointer-events: none;
}


/* ---------------------------------------------------------
   HERO 3D OBJECT
   Lightweight Polycam object floating on the right.
--------------------------------------------------------- */

.km-hero-3d {

	position: absolute;

	z-index: 2;

	top: 50%;
	right: clamp(20px, 4vw, 80px);

	width: min(43vw, 720px);
	height: min(78vh, 760px);

	transform-origin: center center;

	pointer-events: none;

	opacity: 1;

	will-change: transform, opacity;
}

#km-hero-canvas {

	position: absolute;
	inset: 0;

	display: block;

	width: 100%;
	height: 100%;
}

.km-hero-3d-loader {

	position: absolute;

	left: 50%;
	top: 50%;

	width: 190px;

	transform: translate(-50%, -50%);

	color: rgba(238,233,223,.48);

	font-family: Arial, sans-serif;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: .14em;
	text-align: center;

	transition: opacity .55s ease;
}

.km-hero-loader-line {

	width: 100%;
	height: 1px;

	margin-bottom: 13px;

	overflow: hidden;

	background: rgba(238,233,223,.14);
}

#km-hero-loader-progress {

	width: 0;
	height: 100%;

	background: #b6a078;

	transition: width .15s linear;
}


.km-hero-inner {

	position: relative;

	z-index: 3;

	width: min(
		1380px,
		calc(100% - 100px)
	);

	margin: 0 auto;
}

.km-eyebrow {

	margin-bottom: 35px;

	color: var(--km-gold);

	font-family: Arial, sans-serif !important;

	font-size: 11px;

	font-weight: 600;

	letter-spacing: .24em;
}

.km-hero h1 {

	max-width: 1200px;

	margin: 0;

	color: var(--km-paper);

	font-size:
		clamp(
			58px,
			7vw,
			128px
		);

	font-weight: 400;

	line-height: .89;

	letter-spacing: -.045em;

	text-transform: none;
}

.km-hero-subtitle {

	margin-top: 45px;

	color: rgba(
		238,
		233,
		223,
		.62
	);

	font-size: 18px;

	letter-spacing: .05em;
}

.km-scroll-hint {

	position: absolute;

	right: 0;
	bottom: -125px;

	display: flex;

	align-items: center;

	gap: 15px;

	transform:
		rotate(90deg);

	transform-origin:
		right center;

	color:
		rgba(
			255,
			255,
			255,
			.45
		);

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;

	letter-spacing: .25em;
}

.km-scroll-line {

	width: 55px;

	height: 1px;

	background:
		rgba(
			255,
			255,
			255,
			.35
		);
}


/* =========================================================
   INTRO
========================================================= */

.km-intro {

	padding:
		180px 0;

	background:
		var(--km-paper);
}

.km-intro-grid {

	display: grid;

	grid-template-columns:
		minmax(120px, .6fr)
		minmax(300px, 2fr);

	gap: 90px;
}

.km-intro-label {

	padding-top: 15px;

	color: #7e786c;

	font-family:
		Arial,
		sans-serif;

	font-size: 10px;

	font-weight: 600;

	letter-spacing: .22em;
}

.km-intro-content h2 {

	margin: 0;

	color: var(--km-dark);

	font-size:
		clamp(
			46px,
			5.5vw,
			88px
		);

	font-weight: 400;

	line-height: .98;

	letter-spacing: -.035em;
}

.km-intro-content p {

	max-width: 680px;

	margin-top: 55px;

	margin-bottom: 0;

	color: #69645b;

	font-size: 22px;

	line-height: 1.6;
}


/* =========================================================
   CONSERVATION / BEFORE & AFTER
========================================================= */

.km-conservation {
	position: relative;
	padding: 155px 0 170px;
	background: #e7e0d4;
	color: var(--km-dark);
	overflow: hidden;
}

.km-conservation:before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(
			90deg,
			rgba(17,16,14,.035) 1px,
			transparent 1px
		);
	background-size: 8vw 100%;
	opacity: .32;
}

.km-conservation-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(280px, .78fr) minmax(420px, 1.35fr);
	gap: clamp(70px, 9vw, 150px);
	align-items: center;
}

.km-conservation-copy {
	max-width: 520px;
}

.km-conservation-copy h2 {
	margin: 28px 0 0;
	color: var(--km-dark);
	font-size: clamp(52px, 5.4vw, 88px);
	font-weight: 400;
	line-height: .92;
	letter-spacing: -.04em;
}

.km-conservation-copy p {
	max-width: 480px;
	margin: 48px 0 0;
	color: #655f56;
	font-size: 19px;
	line-height: 1.65;
}

.km-conservation-link {
	display: inline-block;
	margin-top: 42px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(17,16,14,.36);
	color: var(--km-dark) !important;
	font-family: Arial, sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .18em;
	text-decoration: none !important;
	transition: border-color .25s ease, color .25s ease;
}

.km-conservation-link:hover,
.km-conservation-link:focus {
	border-color: var(--km-gold);
	color: #8b744c !important;
}

.km-before-after-wrap {
	width: min(100%, 590px);
	justify-self: end;
}

.km-before-after {
	--position: 50%;
	position: relative;
	width: 100%;
	aspect-ratio: 660 / 842;
	background: #181613;
	overflow: hidden;
	cursor: ew-resize;
	touch-action: none;
	box-shadow: 0 30px 70px rgba(32,27,20,.13);
	user-select: none;
}

.km-ba-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
	user-select: none;
}

.km-ba-before {
	z-index: 2;
	clip-path: inset(0 calc(100% - var(--position)) 0 0);
}

.km-ba-after {
	z-index: 1;
}

.km-ba-divider {
	position: absolute;
	z-index: 5;
	top: 0;
	bottom: 0;
	left: var(--position);
	width: 1px;
	transform: translateX(-50%);
	background: rgba(238,233,223,.96);
	box-shadow: 0 0 0 1px rgba(17,16,14,.12);
	pointer-events: none;
}

.km-ba-handle {
	position: absolute;
	z-index: 7;
	left: var(--position);
	top: 50%;
	width: 50px;
	height: 50px;
	padding: 0 !important;
	margin: 0 !important;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 50%;
	background: rgba(17,16,14,.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #eee9df;
	font-family: Arial, sans-serif;
	font-size: 20px;
	line-height: 1;
	text-align: center;
	outline: none;
	pointer-events: auto;
	transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.km-ba-handle span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 20px;
	line-height: 1;
	transform: translateY(-1px);
}

.km-before-after:hover .km-ba-handle,
.km-ba-handle:focus-visible {
	background: rgba(182,160,120,.92);
	border-color: #d8c49f;
	transform: translate(-50%, -50%) scale(1.06);
}

.km-ba-label {
	position: absolute;
	z-index: 6;
	top: 22px;
	padding: 7px 10px 6px;
	background: rgba(17,16,14,.62);
	color: rgba(255,255,255,.9);
	font-family: Arial, sans-serif;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: .18em;
	pointer-events: none;
}

.km-ba-label-before {
	left: 22px;
}

.km-ba-label-after {
	right: 22px;
}

.km-ba-caption {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(17,16,14,.18);
	color: #766f64;
	font-family: Arial, sans-serif;
	font-size: 9px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.km-conservation {
		padding: 105px 0 115px;
	}

	.km-conservation-grid {
		grid-template-columns: 1fr;
		gap: 65px;
	}

	.km-conservation-copy {
		max-width: 680px;
	}

	.km-before-after-wrap {
		width: min(100%, 560px);
		justify-self: start;
	}
}

@media (max-width: 600px) {
	.km-conservation-copy h2 {
		font-size: 48px;
	}

	.km-conservation-copy p {
		margin-top: 34px;
		font-size: 17px;
	}

	.km-ba-handle {
		width: 44px;
		height: 44px;
	}

	.km-ba-label {
		top: 14px;
	}

	.km-ba-label-before {
		left: 14px;
	}

	.km-ba-label-after {
		right: 14px;
	}

	.km-ba-caption {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}
}


/* =========================================================
   3D STORY
========================================================= */

.km-object-story {

	position: relative;

	height: 400vh;

	color: #ffffff;

	background:
		radial-gradient(
			circle at 60% 45%,
			#302c24 0%,
			#171411 43%,
			#080706 100%
		);
}

.km-object-sticky {

	position: sticky;

	top: 0;

	height: 100vh;

	overflow: hidden;
}

/* Soft museum-style vignette. It sits above the canvas but below text. */
.km-object-sticky:before {

	content: "";

	position: absolute;
	inset: 0;

	z-index: 2;

	pointer-events: none;

	background:
		radial-gradient(
			circle at 60% 44%,
			transparent 28%,
			rgba(0,0,0,.10) 58%,
			rgba(0,0,0,.42) 100%
		);
}

/* Tiny texture so the dark background does not feel digitally flat. */
.km-object-sticky:after {

	content: "";

	position: absolute;
	inset: 0;

	z-index: 3;

	pointer-events: none;

	opacity: .10;

	background-image:
		repeating-linear-gradient(
			0deg,
			rgba(255,255,255,.018) 0,
			rgba(255,255,255,.018) 1px,
			transparent 1px,
			transparent 3px
		);
}


/* MODEL */

.km-model-stage {

	position: absolute;

	inset: 0;

	z-index: 1;
}

#km-model-canvas,
#km-model-canvas-2 {

	position: absolute;

	inset: 0;

	display: block;

	width: 100%;

	height: 100%;
}


/* LABEL */

.km-object-label {

	position: absolute;

	z-index: 5;

	top: calc(var(--km-header-height) + 22px);
	left: 65px;

	display: flex;

	flex-direction: column;

	opacity: 1;
	visibility: visible;

	pointer-events: none;
}

.km-object-label span {

	color: var(--km-gold);

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;

	letter-spacing: .22em;
}

.km-object-label strong {

	margin-top: 10px;

	color: #ffffff;

	font-size: 32px;

	font-weight: 400;
}


/* LOADER */

.km-model-loader {

	position: absolute;

	z-index: 20;

	top: 50%;
	left: 58%;

	width: 220px;

	transform:
		translate(
			-50%,
			-50%
		);

	color:
		rgba(
			255,
			255,
			255,
			.58
		);

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;

	letter-spacing: .14em;

	text-align: center;

	transition:
		opacity .6s ease;
}

.km-loader-line {

	width: 100%;

	height: 1px;

	margin-bottom: 15px;

	overflow: hidden;

	background:
		rgba(
			255,
			255,
			255,
			.15
		);
}

#km-loader-progress {

	width: 0;

	height: 100%;

	background:
		#c3aa78;

	transition:
		width .15s linear;
}


/* COPY */

.km-story-copy {

	position: absolute;

	z-index: 5;

	left: 65px;
	bottom: 80px;

	width:
		min(
			390px,
			40vw
		);

	height: 190px;

	pointer-events: none;
}

.km-story-step {

	position: absolute;

	inset: 0;

	visibility: hidden;
	opacity: 0;

	filter: blur(4px);

	transform:
		translateY(24px);

	transition:
		opacity .65s ease,
		transform .65s ease,
		filter .65s ease;
}

.km-story-step.is-active {

	visibility: visible;
	opacity: 1;

	filter: blur(0);

	transform:
		translateY(0);
}

.km-story-number {

	margin-bottom: 14px;

	color: var(--km-gold);

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;

	letter-spacing: .2em;
}

.km-story-step h2 {

	margin:
		0 0 18px;

	color: #ffffff;

	font-size: 48px;

	font-weight: 400;

	line-height: 1;
}

.km-story-step p {

	max-width: 330px;

	margin: 0;

	color:
		rgba(
			255,
			255,
			255,
			.62
		);

	font-size: 17px;

	line-height: 1.55;
}

.km-object-instruction {

	position: absolute;

	z-index: 5;

	right: 65px;
	bottom: 65px;

	color:
		rgba(
			255,
			255,
			255,
			.38
		);

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;

	letter-spacing: .2em;
}

/* Minimal scroll progress indicator, created by JavaScript. */
.km-story-progress {

	position: absolute;

	z-index: 6;

	right: 65px;
	top: 50%;

	width: 1px;
	height: 170px;

	transform: translateY(-50%);

	background: rgba(255,255,255,.16);

	pointer-events: none;
}

.km-story-progress-fill {

	position: absolute;

	left: 0;
	top: 0;

	width: 1px;
	height: 0%;

	background: var(--km-gold);

	box-shadow: 0 0 12px rgba(182,160,120,.25);

	transition: height .08s linear;
}

.km-story-progress-label {

	position: absolute;

	right: 14px;
	top: -5px;

	min-width: 48px;

	color: rgba(255,255,255,.55);

	font-family: Arial, sans-serif;

	font-size: 9px;

	letter-spacing: .15em;

	text-align: right;
}



/* =========================================================
   SECOND 3D STORY – REVERSED COMPOSITION
   Model left / text right
========================================================= */

.km-object-story--reverse {

	background:
		radial-gradient(
			circle at 38% 45%,
			#302c24 0%,
			#171411 43%,
			#080706 100%
		);
}

.km-object-story--reverse .km-object-sticky:before {

	background:
		radial-gradient(
			circle at 38% 44%,
			transparent 28%,
			rgba(0,0,0,.10) 58%,
			rgba(0,0,0,.42) 100%
		);
}

.km-object-story--reverse .km-object-label {

	left: auto;
	right: 65px;

	align-items: flex-end;
	text-align: right;
}

.km-object-story--reverse .km-story-copy {

	left: auto;
	right: 65px;

	text-align: right;
}

.km-object-story--reverse .km-story-step p {

	margin-left: auto;
}

.km-object-story--reverse .km-model-loader {

	left: 40%;
}

.km-object-story--reverse .km-object-instruction {

	right: auto;
	left: 65px;
}

.km-object-story--reverse .km-story-progress {

	right: auto;
	left: 65px;
}

.km-object-story--reverse .km-story-progress-label {

	right: auto;
	left: 14px;

	text-align: left;
}


/* =========================================================
   LATEST NEWS
========================================================= */

.km-news {

	padding:
		170px 0
		190px;

	background:
		#eee9df;
}

.km-section-heading {

	display: flex;

	align-items: flex-end;

	justify-content:
		space-between;

	margin-bottom: 80px;

	padding-bottom: 45px;

	border-bottom:
		1px solid
		rgba(
			17,
			16,
			14,
			.18
		);
}

.km-eyebrow-dark {

	color: #80786a;

	font-family:
		Arial,
		sans-serif;

	font-size: 10px;

	font-weight: 600;

	letter-spacing: .22em;
}

.km-section-heading h2 {

	margin: 0;

	color: var(--km-dark);

	font-size:
		clamp(
			44px,
			5vw,
			76px
		);

	font-weight: 400;

	letter-spacing: -.03em;
}

.km-news-grid {

	display: grid;

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

	border-top:
		1px solid
		rgba(
			17,
			16,
			14,
			.18
		);

	border-bottom:
		1px solid
		rgba(
			17,
			16,
			14,
			.18
		);
}

.km-news-card {

	position: relative;

	min-width: 0;

	padding:
		30px
		30px
		38px;

	display: flex;

	flex-direction: column;

	border-right:
		1px solid
		rgba(
			17,
			16,
			14,
			.18
		);

	background:
		transparent;

	transition:
		background .35s ease;
}

.km-news-card:first-child {

	border-left:
		1px solid
		rgba(
			17,
			16,
			14,
			.18
		);
}

.km-news-card:hover {

	background:
		rgba(
			255,
			255,
			255,
			.22
		);
}

.km-news-top {

	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap: 20px;

	margin-bottom: 25px;

	padding:
		0 10px;

	color: #817a6c;

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;

	font-weight: 600;

	letter-spacing: .15em;
}

.km-news-date {

	text-align: right;

	letter-spacing: .08em;
}

.km-news-image {

	position: relative;

	display: block;

	width: 100%;

	aspect-ratio: 4 / 3;

	margin-bottom: 30px;

	overflow: hidden;

	background:
		#d9d3c8;

	text-decoration: none;
}

.km-news-image img {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

	object-position: center;

	transform: scale(1.001);

	filter:
		saturate(.92)
		contrast(.98);

	transition:
		transform .75s cubic-bezier(.2,.7,.2,1),
		filter .45s ease;
}

.km-news-card:hover .km-news-image img {

	transform:
		scale(1.045);

	filter:
		saturate(1)
		contrast(1);
}

.km-news-image-placeholder {

	position: absolute;

	inset: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 30px;

	background:
		radial-gradient(
			circle at 50% 40%,
			#ddd5c6 0%,
			#c9c0af 50%,
			#b9af9e 100%
		);

	color:
		rgba(
			17,
			16,
			14,
			.48
		);

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;

	font-weight: 600;

	letter-spacing: .2em;

	text-align: center;
}

.km-news-body {

	display: flex;

	flex: 1;

	flex-direction: column;

	padding:
		0 12px 0 10px;
}

.km-news-title {

	margin: 0;

	font-size:
		clamp(
			27px,
			2.05vw,
			37px
		);

	font-weight: 400;

	line-height: 1.08;

	letter-spacing: -.018em;
}

.km-news-title a {

	color:
		var(--km-dark);

	text-decoration: none;

	transition:
		color .25s ease;
}

.km-news-title a:hover,
.km-news-title a:focus-visible {

	color:
		#8b744b;
}

.km-news-readmore {

	display: inline-block;

	align-self: flex-start;

	margin-top: auto;

	padding-top: 18px;

	color:
		#8b744b;

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;

	font-weight: 600;

	letter-spacing: .16em;

	text-decoration: none;
}

.km-news-readmore:after {

	content: "";

	display: block;

	width: 0;

	height: 1px;

	margin-top: 7px;

	background:
		#8b744b;

	transition:
		width .28s ease;
}

.km-news-readmore:hover:after,
.km-news-readmore:focus-visible:after {

	width: 100%;
}

.km-news-footer {

	display: flex;

	justify-content: flex-end;

	margin-top: 38px;
}

.km-news-all {

	display: inline-flex;

	align-items: center;

	gap: 12px;

	color:
		#6f654f;

	font-family:
		Arial,
		sans-serif;

	font-size: 10px;

	font-weight: 600;

	letter-spacing: .16em;

	text-decoration: none;
}

.km-news-all:hover,
.km-news-all:focus-visible {

	color:
		#11100e;
}

.km-news-empty {

	margin: 0;

	padding: 35px 0;

	border-top:
		1px solid
		rgba(
			17,
			16,
			14,
			.18
		);

	color: #69645b;

	font-size: 18px;
}

/* =========================================================
   VISIT
========================================================= */

.km-visit {

	padding:
		170px 0;

	color:
		#eee9df;

	background:
		#11100e;
}

.km-visit-inner {

	display: grid;

	grid-template-columns:
		2fr 1fr;

	gap: 100px;

	align-items: end;
}

.km-visit h2 {

	margin: 0;

	color:
		#eee9df;

	font-size:
		clamp(
			58px,
			7vw,
			105px
		);

	font-weight: 400;

	line-height: .9;

	letter-spacing: -.04em;
}

.km-visit-copy {

	padding-left: 50px;

	border-left:
		1px solid
		rgba(
			255,
			255,
			255,
			.2
		);
}

.km-visit-copy p {

	color:
		rgba(
			255,
			255,
			255,
			.6
		);

	font-size: 19px;

	line-height: 1.6;
}

.km-visit-copy a {

	display: inline-block;

	margin-top: 35px;

	color:
		#c0a777;

	font-family:
		Arial,
		sans-serif;

	font-size: 10px;

	font-weight: 600;

	letter-spacing: .15em;

	text-decoration: none;
}


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width: 800px) {

	.km-container,
	.km-hero-inner {

		width:
			calc(
				100% - 44px
			);
	}

	.km-hero {

		min-height:
			640px;
	}

	.km-hero h1 {

		font-size:
			clamp(
				47px,
				14vw,
				72px
			);
	}

	.km-scroll-hint {

		display:
			none;
	}

	.km-hero-3d {

		top: 44%;
		right: -24vw;

		width: 82vw;
		height: 58vh;

		opacity: .58;
	}

	.km-hero-3d-loader {

		display: none;
	}

	.km-intro {

		padding:
			100px 0;
	}

	.km-intro-grid {

		grid-template-columns:
			1fr;

		gap:
			35px;
	}

	.km-intro-content h2 {

		font-size:
			46px;
	}

	.km-intro-content p {

		font-size:
			18px;
	}

	.km-object-story {

		height:
			320vh;
	}

	.km-object-label {

		top:
			calc(var(--km-header-height) + 16px);

		left:
			22px;
	}

	.km-model-loader {

		left:
			50%;
	}

	.km-story-copy {

		left:
			22px;

		bottom:
			35px;

		width:
			calc(
				100% - 44px
			);

		height:
			160px;
	}

	.km-story-step h2 {

		font-size:
			36px;
	}

	.km-story-step p {

		max-width:
			290px;

		font-size:
			15px;
	}

	.km-object-instruction,
	.km-story-progress {

		display:
			none;
	}


	.km-news {

		padding:
			100px 0;
	}

	.km-section-heading {

		display:
			block;

		margin-bottom:
			55px;
	}

	.km-section-heading h2 {

		margin-top:
			25px;
	}

	.km-news-grid {

		grid-template-columns:
			1fr;
	}

	.km-news-card {

		padding:
			28px 0
			38px;

		border-right:
			0;

		border-left:
			0 !important;

		border-bottom:
			1px solid
			rgba(
				17,
				16,
				14,
				.18
			);
	}

	.km-news-card:last-child {

		border-bottom:
			0;
	}

	.km-news-image {

		aspect-ratio:
			16 / 10;
	}

	.km-news-title {

		font-size:
			32px;
	}

	.km-news-footer {

		justify-content:
			flex-start;

		margin-top:
			30px;
	}

	.km-visit {

		padding:
			110px 0;
	}

	.km-visit-inner {

		grid-template-columns:
			1fr;

		gap:
			70px;
	}

	.km-visit-copy {

		padding-left:
			0;

		padding-top:
			35px;

		border-left:
			0;

		border-top:
			1px solid
			rgba(
				255,
				255,
				255,
				.2
			);
	}

}



@media (max-width: 800px) {

	.km-object-story--reverse .km-object-label {

		left: auto;
		right: 22px;

		align-items: flex-end;
		text-align: right;
	}

	.km-object-story--reverse .km-story-copy {

		left: 22px;
		right: 22px;

		width: auto;

		text-align: left;
	}

	.km-object-story--reverse .km-story-step p {

		margin-left: 0;
	}

	.km-object-story--reverse .km-model-loader {

		left: 50%;
	}

	.km-object-story--reverse .km-story-progress {

		display: none;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

	.km-hero-3d {

		transition: none;
	}

	.km-story-step {
		transition: none;
		filter: none;
	}

}

@media (max-width: 1100px) { .km-primary-menu > li > a { font-size: 30px; } }
@media (max-width: 760px) { .km-primary-menu > li > a { font-size: 26px; } .km-primary-menu .sub-menu a { font-size: 9px; } }

/* =========================================================
   V1.0.14 — EDITORIAL TYPE SCALE REBALANCE
   Keep the homepage hero display type unchanged; reduce the
   rest of the site's oversized headings for better hierarchy.
========================================================= */
.km-intro-content h2 {
	font-size: clamp(40px, 4.2vw, 66px);
	line-height: 1.02;
}

.km-conservation-copy h2 {
	font-size: clamp(40px, 4vw, 62px);
	line-height: .98;
}

.km-story-step h2 {
	font-size: 40px;
	line-height: 1.04;
}

.km-section-heading h2 {
	font-size: clamp(38px, 3.7vw, 58px);
}

.km-news-title {
	font-size: clamp(24px, 1.75vw, 31px);
	line-height: 1.08;
}

.km-visit h2 {
	font-size: clamp(46px, 5vw, 72px);
	line-height: .96;
}

@media (max-width: 1100px) {
	.km-intro-content h2 { font-size: 46px; }
	.km-conservation-copy h2 { font-size: 44px; }
	.km-section-heading h2 { font-size: 48px; }
	.km-visit h2 { font-size: 58px; }
}

@media (max-width: 760px) {
	.km-intro-content h2 { font-size: 38px; }
	.km-conservation-copy h2 { font-size: 38px; }
	.km-story-step h2 { font-size: 34px; }
	.km-section-heading h2 { font-size: 38px; }
	.km-news-title { font-size: 27px; }
	.km-visit h2 { font-size: 44px; }
}


/* =========================================================
   V1.0.15 — 3D STORY LABEL VISIBILITY
   Keep exhibit titles clear of the fixed header and ensure
   the current story title is visible as each 3D section enters.
========================================================= */
.km-object-story .km-object-label {
	top: calc(var(--km-header-height) + 22px);
	opacity: 1;
	visibility: visible;
}

.km-object-story .km-story-step.is-active {
	visibility: visible;
	opacity: 1;
}

@media (max-width: 800px) {
	.km-object-story .km-object-label {
		top: calc(var(--km-header-height) + 16px);
	}
}


/* =========================================================
   V1.0.17 — MOBILE 3D SAFE MODE
   Phones and low-memory devices skip WebGL/GLB loading.
   Keep the museum presentation with lightweight static art.
========================================================= */

html.km-mobile-safe .km-hero-3d {
	background-image: url("../images/mobile-hero-poster.webp");
	background-repeat: no-repeat;
	background-position: 78% center;
	background-size: contain;
	transform: translateY(-50%);
	opacity: .56;
	will-change: auto;
}

html.km-mobile-safe #km-hero-canvas {
	display: block !important;
}

html.km-mobile-safe .km-hero-3d-loader {
	display: block;
}

html.km-mobile-safe.km-compact-hero-ready .km-hero-3d {
	background-image: none;
}

html.km-mobile-safe .km-object-story {
	height: auto;
	min-height: 680px;
}

html.km-mobile-safe .km-object-sticky {
	position: relative;
	top: auto;
	height: 680px;
	min-height: 680px;
}

html.km-mobile-safe .km-model-stage {
	display: block;
	background-repeat: no-repeat;
	background-position: center 44%;
	background-size: min(78vw, 520px) auto;
}

html.km-mobile-safe #km-model-canvas,
html.km-mobile-safe #km-model-canvas-2,
html.km-mobile-safe .km-model-loader {
	display: none !important;
}

html.km-mobile-safe #km-object-story .km-model-stage {
	background-image:
		radial-gradient(circle at 50% 46%, rgba(48,44,36,.18), rgba(8,7,6,.42) 72%),
		url("../images/mobile-d452-poster.webp");
	background-position: center 45%;
	background-size: min(88vw, 610px) auto;
}

html.km-mobile-safe #km-object-story .km-model-stage::before {
	display: none;
}

html.km-mobile-safe #km-object-story-2 .km-model-stage {
	background-image:
		linear-gradient(rgba(8,7,6,.08), rgba(8,7,6,.26)),
		url("../images/mobile-church-poster.webp");
	background-position: center 46%;
	background-size: min(92vw, 720px) auto;
}

html.km-mobile-safe .km-story-copy {
	height: auto;
	bottom: 46px;
}

html.km-mobile-safe .km-story-step {
	display: none;
}

html.km-mobile-safe .km-story-step:first-child {
	position: relative;
	inset: auto;
	display: block;
	visibility: visible;
	opacity: 1;
	filter: none;
	transform: none;
}

html.km-mobile-safe .km-object-instruction,
html.km-mobile-safe .km-story-progress {
	display: none !important;
}

html.km-mobile-safe .km-object-label strong {
	max-width: 74vw;
	font-size: 24px;
	line-height: 1.08;
}

@media (max-width: 760px) {
	html.km-mobile-safe .km-hero {
		min-height: 620px;
	}

	html.km-mobile-safe .km-hero-3d {
		top: 46%;
		right: -18vw;
		width: 82vw;
		height: 64vh;
	}

	html.km-mobile-safe .km-object-story,
	html.km-mobile-safe .km-object-sticky {
		min-height: 620px;
		height: 620px;
	}

	html.km-mobile-safe .km-model-stage {
		background-size: min(84vw, 480px) auto;
	}

	html.km-mobile-safe #km-object-story-2 .km-model-stage {
		background-position: center 43%;
		background-size: min(96vw, 620px) auto;
	}

	html.km-mobile-safe .km-object-label {
		top: calc(var(--km-header-height) + 22px);
	}

	html.km-mobile-safe .km-story-copy {
		bottom: 38px;
		height: auto;
	}

	html.km-mobile-safe .km-story-step h2 {
		font-size: 32px;
	}

	html.km-mobile-safe .km-story-step p {
		font-size: 15px;
		line-height: 1.5;
	}
}


/* =========================================================
   V1.0.24 — MOBILE 3D VIEWER BUTTONS
========================================================= */
.km-mobile-3d-button {
	position: relative;
	z-index: 12;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-width: 154px;
	padding: 12px 14px;
	border: 1px solid rgba(182,160,120,.58);
	background: rgba(17,16,14,.72);
	color: #eee9df;
	font: 600 10px/1 Arial, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
}

.km-mobile-3d-button b {
	font: 300 18px/1 Arial, sans-serif;
	color: #b6a078;
}

.km-mobile-3d-button--hero {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.km-mobile-3d-button--stage {
	position: absolute;
	z-index: 8;
	right: clamp(26px, 3.5vw, 65px);
	top: 50%;
	transform: translateY(-50%);
}

#km-object-story-2 .km-mobile-3d-button--stage {
	right: auto;
	left: clamp(26px, 3.5vw, 65px);
	top: 50%;
}

html.km-mobile-3d-open,
html.km-mobile-3d-open body {
	overflow: hidden !important;
}

.km-mobile-3d-viewer {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	background: radial-gradient(circle at 50% 42%, #181613 0, #0b0a09 66%, #070706 100%);
	color: #eee9df;
	touch-action: none;
}

.km-mobile-3d-viewer.is-open {
	display: block;
}

.km-mobile-3d-toolbar {
	position: absolute;
	z-index: 4;
	top: max(18px, env(safe-area-inset-top));
	left: 18px;
	right: 18px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	pointer-events: none;
}

.km-mobile-3d-heading span {
	display: block;
	margin-bottom: 7px;
	font: 600 9px/1.2 Arial, sans-serif;
	letter-spacing: .18em;
	color: #b6a078;
}

.km-mobile-3d-heading strong {
	display: block;
	max-width: 72vw;
	font-family: "STIX Two Text", Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.08;
}

.km-mobile-3d-close {
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(238,233,223,.24);
	border-radius: 50%;
	background: rgba(17,16,14,.58);
	color: #eee9df;
	font: 300 28px/38px Arial, sans-serif;
	pointer-events: auto;
	cursor: pointer;
}

.km-mobile-3d-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
}

.km-mobile-3d-loader {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	width: min(68vw, 320px);
	transform: translate(-50%, -50%);
	text-align: center;
	transition: opacity .25s ease;
}

.km-mobile-3d-loader.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.km-mobile-3d-loader-line {
	height: 1px;
	margin-bottom: 14px;
	background: rgba(238,233,223,.20);
	overflow: hidden;
}

.km-mobile-3d-loader-line span {
	display: block;
	width: 0;
	height: 100%;
	background: #b6a078;
	transition: width .12s linear;
}

.km-mobile-3d-loader p,
.km-mobile-3d-help {
	margin: 0;
	font: 600 9px/1.5 Arial, sans-serif;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(238,233,223,.62);
}

.km-mobile-3d-loader.is-error p {
	color: #eee9df;
}

.km-mobile-3d-help {
	position: absolute;
	z-index: 4;
	left: 20px;
	right: 20px;
	bottom: max(20px, env(safe-area-inset-bottom));
	text-align: center;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.km-mobile-3d-help.is-visible {
	opacity: 1;
}

@media (min-width: 761px) {
	/* Desktop/tablet already use the full-resolution inline 3D scenes. */
	.km-mobile-3d-button {
		display: none !important;
	}
}

@media (max-width: 760px) {
	/* The lightweight hero 3D runs automatically on phones. */
	.km-mobile-3d-button--hero {
		display: none !important;
	}

	.km-mobile-3d-button--stage,
	#km-object-story-2 .km-mobile-3d-button--stage {
		left: 50%;
		right: auto;
		top: 54%;
		transform: translate(-50%, -50%);
	}

	#km-object-story-2 .km-mobile-3d-button--stage {
		top: 58%;
	}
}
