/* KAYA Homepage Hero, Figma 1920x821.
   Desktop sizes use ITG-style min(rem, vw) against a 1920px artboard. */

.kaya-hero {
	--kaya-hero-height: min(51.3125rem, 42.7604166667vw);
	--kaya-hero-pad-top: min(14.25rem, 11.875vw);
	--kaya-hero-pad-right: min(4.6875rem, 3.90625vw);
	--kaya-hero-pad-bottom: min(1.5rem, 1.25vw);
	--kaya-hero-pad-left: min(6.25rem, 5.2083333333vw);
	--kaya-hero-gap: min(9.734375rem, 8.1119791667vw);
	--kaya-hero-copy-w: min(45.8125rem, 38.1770833333vw);
	--kaya-hero-copy-mt: min(2.8125rem, 2.34375vw);
	--kaya-hero-copy-gap: min(1.5rem, 1.25vw);
	--kaya-hero-text-gap: min(0.75rem, 0.625vw);
	--kaya-hero-heading-gap: min(0.25rem, 0.2083333333vw);

	--kaya-hero-badge-py: min(0.5rem, 0.4166666667vw);
	--kaya-hero-badge-px: min(0.75rem, 0.625vw);
	--kaya-hero-badge-radius: min(0.625rem, 0.5208333333vw);
	--kaya-hero-badge-fs: min(0.75rem, 0.625vw);
	--kaya-hero-badge-border: min(0.0625rem, 0.0520833333vw);

	--kaya-hero-fs-title: min(3.75rem, 3.125vw);
	--kaya-hero-lh-title: min(3.75rem, 3.125vw);
	--kaya-hero-fs-body: min(1rem, 0.8333333333vw);
	--kaya-hero-lh-body: min(1.5rem, 1.25vw);

	--kaya-hero-cta-py: min(1rem, 0.8333333333vw);
	--kaya-hero-cta-px: min(1.25rem, 1.0416666667vw);
	--kaya-hero-cta-gap: min(1rem, 0.8333333333vw);
	--kaya-hero-cta-radius: min(0.625rem, 0.5208333333vw);
	--kaya-hero-cta-fs: min(0.875rem, 0.7291666667vw);
	--kaya-hero-cta-lh: min(1.0625rem, 0.8854166667vw);
	--kaya-hero-cta-icon-w: min(1.25rem, 1.0416666667vw);
	--kaya-hero-cta-icon-h: min(0.875rem, 0.7291666667vw);
	--kaya-hero-cta-leaf-w: min(1.317375rem, 1.0978125vw);
	--kaya-hero-cta-leaf-h: min(0.9423125rem, 0.7852604167vw);
	--kaya-hero-cta-leaf-t: min(0.0336875rem, 0.0280729167vw);

	--kaya-hero-banner-w: min(53.515rem, 44.5958333333vw);
	--kaya-hero-banner-h: min(31.81375rem, 26.5114583333vw);
	--kaya-hero-banner-inner-w: calc(840 / 856.2400639057159 * 100%);
	--kaya-hero-banner-inner-h: calc(480 / 509.02317970991135 * 100%);
	--kaya-hero-banner-rotate: 2deg;
	--kaya-hero-banner-radius: min(1.25rem, 1.0416666667vw);
	--kaya-hero-strip-h: min(1.4375rem, 1.1979166667vw);
	--kaya-hero-strip-leaf-h: min(2.1875rem, 1.8229166667vw);

	position: relative;
	width: 100%;
	min-height: var(--kaya-hero-height);
	overflow: visible;
	background-color: var(--kaya-brown);
	color: var(--kaya-white);
	box-sizing: border-box;
}

body.home.kaya-hero-active,
body.home.kaya-hero-active #ajax-content-wrap {
	background-color: var(--kaya-white);
}

body.home.kaya-hero-active #ajax-content-wrap > .container-wrap {
	margin-top: 0;
	background-color: var(--kaya-white);
}

.kaya-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.kaya-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	max-width: none;
}

.kaya-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	min-height: var(--kaya-hero-height);
	margin: 0 auto;
	padding: var(--kaya-hero-pad-top) var(--kaya-hero-pad-right) var(--kaya-hero-pad-bottom) var(--kaya-hero-pad-left);
	box-sizing: border-box;
	gap: var(--kaya-hero-gap);
}

.kaya-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--kaya-hero-copy-gap);
	width: var(--kaya-hero-copy-w);
	max-width: 100%;
	margin-top: var(--kaya-hero-copy-mt);
	flex: 0 1 var(--kaya-hero-copy-w);
}

.kaya-hero__copy-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--kaya-hero-text-gap);
	width: 100%;
}

.kaya-hero__badge {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: var(--kaya-hero-badge-py) var(--kaya-hero-badge-px);
	border: var(--kaya-hero-badge-border) solid var(--kaya-orange);
	border-radius: var(--kaya-hero-badge-radius);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: var(--kaya-hero-badge-fs);
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--kaya-white);
	white-space: nowrap;
}

.kaya-hero__headings {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--kaya-hero-heading-gap);
	width: 100%;
	color: var(--kaya-white);
}

.kaya-hero h1.kaya-hero__heading,
.kaya-hero__heading {
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: "Montserrat", sans-serif;
	font-weight: 900;
	font-size: var(--kaya-hero-fs-title);
	line-height: var(--kaya-hero-lh-title);
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--kaya-white);
}

.kaya-hero__body {
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: var(--kaya-hero-fs-body);
	line-height: var(--kaya-hero-lh-body);
	letter-spacing: 0;
	color: var(--kaya-white);
	font-variant-numeric: lining-nums proportional-nums;
	font-feature-settings: "lnum" 1, "pnum" 1;
}

.kaya-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--kaya-hero-cta-gap);
	margin: 0;
	padding: var(--kaya-hero-cta-py) var(--kaya-hero-cta-px);
	border-radius: var(--kaya-hero-cta-radius);
	background: var(--kaya-white);
	color: var(--kaya-brown);
	text-decoration: none;
	flex: 0 0 auto;
}

.kaya-hero__cta-label {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: var(--kaya-hero-cta-fs);
	line-height: var(--kaya-hero-cta-lh);
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--kaya-brown);
	white-space: nowrap;
}

.kaya-hero__cta-icon {
	display: block;
	position: relative;
	width: var(--kaya-hero-cta-icon-w);
	height: var(--kaya-hero-cta-icon-h);
	overflow: visible;
	flex: 0 0 var(--kaya-hero-cta-icon-w);
}

.kaya-hero__cta-icon img {
	display: block;
	position: absolute;
	top: calc(-1 * var(--kaya-hero-cta-leaf-t));
	left: 0;
	width: var(--kaya-hero-cta-leaf-w);
	height: var(--kaya-hero-cta-leaf-h);
	max-width: none;
}

.kaya-hero__cta:hover,
.kaya-hero__cta:focus {
	background: var(--kaya-orange);
	opacity: 1;
	color: var(--kaya-brown);
}

.kaya-hero__cta:hover .kaya-hero__cta-label,
.kaya-hero__cta:focus .kaya-hero__cta-label {
	color: var(--kaya-brown);
}

.kaya-hero__banner {
	position: relative;
	flex: 0 0 auto;
	width: var(--kaya-hero-banner-w);
	height: var(--kaya-hero-banner-h);
	margin: 0;
}

.kaya-hero__banner-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--kaya-hero-banner-inner-w);
	height: var(--kaya-hero-banner-inner-h);
	overflow: hidden;
	border-radius: var(--kaya-hero-banner-radius);
	pointer-events: none;
	transform: translate(-50%, -50%) rotate(var(--kaya-hero-banner-rotate));
}

.kaya-hero__banner-frame img {
	position: absolute;
	left: 0;
	top: -2.36%;
	width: 100%;
	height: 116.67%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.kaya-hero__strip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: var(--kaya-hero-strip-h);
	overflow: visible;
	background: none;
	line-height: 0;
	pointer-events: none;
}

.kaya-hero__strip img {
	display: block;
	width: 100%;
	height: var(--kaya-hero-strip-leaf-h);
	max-width: none;
	object-fit: fill;
	object-position: top;
}

@media only screen and (max-width: 999px) {
	/* Figma mobile homepage hero, 393px frame. Photo 353×201, then badge, heading, CTA, body. */
	.kaya-hero {
		min-height: 0;
	}

	.kaya-hero__inner {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 180px 20px 48px;
		gap: 16px;
	}

	.kaya-hero__copy,
	.kaya-hero__copy-text,
	.kaya-hero__headings {
		display: contents;
	}

	.kaya-hero__banner {
		order: 1;
		width: 100%;
		max-width: none;
		height: auto;
		aspect-ratio: 353 / 201;
		margin: 0;
	}

	.kaya-hero__banner-frame {
		position: absolute;
		inset: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 16px;
		transform: none;
	}

	.kaya-hero__banner-frame img {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.kaya-hero__badge {
		order: 2;
		align-self: flex-start;
		margin: 0;
		padding: 8px 12px;
		border-width: 1px;
		border-radius: 100px;
		font-size: 12px;
		line-height: 1;
		white-space: nowrap;
	}

	.kaya-hero h1.kaya-hero__heading,
	.kaya-hero__heading {
		order: 3;
		margin: 0;
		font-size: 36px;
		line-height: 1;
		letter-spacing: -0.03em;
	}

	.kaya-hero__cta {
		order: 4;
		align-self: flex-start;
		margin: 0;
		padding: 16px 20px;
		gap: 16px;
		border-radius: 12px;
	}

	.kaya-hero__cta-label {
		font-size: 14px;
		line-height: 17px;
		white-space: nowrap;
	}

	.kaya-hero__cta-icon {
		width: 20px;
		height: 14px;
		flex-basis: 20px;
	}

	.kaya-hero__cta-icon img {
		top: 0;
		width: 21px;
		height: 15px;
	}

	.kaya-hero__body {
		order: 5;
		margin: 0;
		font-size: 16px;
		line-height: 24px;
	}

	.kaya-hero__strip {
		display: none;
	}
}

/* Optional breadcrumb and line under the heading. Nothing is output when a page does not use them. */

.kaya-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: min(0.75rem, 0.625vw);
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--kaya-white);
}

.kaya-hero__crumb {
	color: var(--kaya-white);
	text-decoration: none;
}

a.kaya-hero__crumb:hover,
a.kaya-hero__crumb:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	color: var(--kaya-white);
}

.kaya-hero__crumb-sep,
.kaya-hero__crumbs .kaya-hero__crumb[aria-current="page"] {
	opacity: 0.6;
}

.kaya-hero__subheading {
	margin: 0;
	padding: 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: min(1.125rem, 0.9375vw);
	line-height: min(1.625rem, 1.3541666667vw);
	color: var(--kaya-white);
}

@media only screen and (max-width: 999px) {
	.kaya-hero__crumbs {
		font-size: 12px;
		line-height: 1.2;
	}

	.kaya-hero__subheading {
		font-size: 17px;
		line-height: 25px;
	}
}