/* VARIABLES */

:root {
	--green-1: #7ecfd4;
	--green-2: #9ecfd1;
	--green-3: #2b6264;
	--green-4: #143840;
	--orange: #ff4b31;

	/* new home */
	--chilli-red: #e91e0c;
	--tomato: #ff4b31;
	--midnight-green: #133840;
	--caribbean-current: #2b6163;
	--non-photo-blue: #9eced0;
	--white: #efefef;

	--duration: 400ms;
	--ease: cubic-bezier(0.36, -0, 0.29, 1.08);
}

/* TYPOGRAPHY */

@font-face {
	font-family: "Epilogue";
	src: url("../") format("woff");
	src: url("../fonts/Epilogue/Epilogue-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Epilogue";
	src: url("../fonts/Epilogue/Epilogue-Medium.woff") format("woff");
	src: url("../fonts/Epilogue/Epilogue-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Epilogue";
	src: url("../fonts/Epilogue/Epilogue-SemiBold.woff") format("woff");
	src: url("../fonts/Epilogue/Epilogue-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Epilogue";
	src: url("../fonts/Epilogue/Epilogue-Bold.woff") format("woff");
	src: url("../fonts/Epilogue/Epilogue-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Epilogue";
	src: url("../fonts/Epilogue/Epilogue-ExtraBold.woff") format("woff");
	src: url("../fonts/Epilogue/Epilogue-ExtraBold.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

h1,
.h1 {
	font-size: 72px;
	line-height: 77px;
	font-weight: 400;
	letter-spacing: -0.03em;
	color: inherit;
}

body {
	font-family: "Epilogue", sans-serif;
}

body #page-wrap {
	opacity: 0;
	pointer-events: none;
}

body.loaded #page-wrap {
	opacity: 1;
	pointer-events: all;
}

.color-orange {
	color: var(--orange);
}

.bg-tomato {
	background-color: var(--orange);
}

/* BUTTONS */

.r2-btn {
	padding: 18px 28px;
	font-size: 18px;
	line-height: 1;
	letter-spacing: -0.03em;
	border: none;
	outline: none;
	box-shadow: none;
	transition: background-color 0.3s;
	border-radius: 15px;
	font-weight: 500;
	text-align: left;

	@media screen and (max-width: 768px) and (orientation: portrait) {
		font-size: 14px;
		padding: 14px 20px;
	}

	&.has-arrow {
		padding-right: 50px;
		position: relative;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			padding-right: 32px;
		}

		svg,
		path {
			position: absolute;
			right: 28px;
			top: 50%;
			transform: translateY(-50%);
			width: 10px;
			height: auto;
			transition: stroke 0.3s;

			@media screen and (max-width: 768px) and (orientation: portrait) {
				width: 6px;
				right: 14px;
			}

			path {
				transform: translateY(0);
			}
		}
	}

	&:hover,
	&.active {
		background-color: var(--tomato);
		color: #fff;

		svg,
		path {
			fill: #fff;
			stroke: #fff;
		}
	}
}

.r2-btn-milky-green {
	background-color: var(--green-1);
	color: var(--green-4);
}

.r2-btn-orange {
	background-color: var(--tomato);
	color: #fff;

	svg,
	path {
		fill: #fff;
		stroke: #fff;
	}

	&:hover,
	&.active {
		background-color: var(--green-3);
	}
}

.menu-item > a{
	position: relative;

	.submenu-trigger{
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}

/* LAYOUT */

.page-template-workflow,
.page-template-product {
	section {
		position: relative;
		overflow: hidden;
	}

	section:has(> svg) {
		overflow: visible;
	}

	.container-full {
		max-width: 1920px !important;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
	}

	.grid {
		display: grid;
	}

	/* ANIMATIONS */

	[r2-method="animate"] {
		opacity: 0;
	}

	/* COMPONENTS */

	.card.green-1 {
		background-color: var(--green-1);
		color: var(--green-4);
	}

	.card.green-2 {
		background-color: var(--green-2);
		color: var(--green-4);
	}

	.card.green-3 {
		background-color: var(--green-3);
		color: #fff;
	}

	.card.orange {
		background-color: var(--orange);
		color: #fff;
	}

	/* BLOCKS */

	/* TEMPLATE WORKFLOW */

	/* HERO */

	section.workflow-hero,
	section.product-hero {
		min-height: 100dvh;
		display: flex;
		align-items: center;
		color: #fff;
		padding: 130px 0;
	}

	section.workflow-hero .row,
	section.product-hero .row {
		gap: 60px;
		align-items: flex-end;
		justify-content: space-between;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			gap: 32px;
		}
	}

	section.workflow-hero .left,
	section.product-hero .left {
		width: 100%;
		max-width: 625px;
		flex-shrink: 0;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			max-width: 100%;
		}
	}

	section.workflow-hero .right,
	section.product-hero .right {
		width: 100%;
		max-width: 485px;
		flex-shrink: 0;
		padding-bottom: 15px;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			max-width: 100%;
			padding-bottom: 0;
		}
	}

	section.workflow-hero .grid.cards {
		margin-top: 115px;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30px;
	}

	@media screen and (max-width: 1024px) {
		section.workflow-hero .grid.cards {
			grid-template-columns: repeat(2, 2fr);
		}
	}

	@media screen and (max-width: 768px) and (orientation: portrait) {
		section.workflow-hero .grid.cards {
			margin-top: 64px;
			grid-template-columns: repeat(1, 1fr);
			gap: 16px;
		}
	}

	section.workflow-hero .cards .card {
		height: 100%;
		padding: 48px;
		border-radius: 25px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 192px;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			padding: 36px;
			height: 200px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	section.workflow-hero .cards .card .text p {
		font-size: 16px;
		line-height: 24px;
		letter-spacing: -0.03em;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			font-size: 16px;
			line-height: 24px;
			letter-spacing: -0.03em;
		}
	}

	/* PRODUCTS / PRODUCT GRAPHIC AND LINKS */
	section.products .layout-3d {
		display: flex;
		position: relative;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 7vw;
		aspect-ratio: 1460 / 900;
		width: 100%;
		padding-top: 1.16em;

		@media screen and (min-width: 1440px) {
			font-size: 100px;
		}

		@media screen and (max-width: 1279px) {
			display: none;
		}

		& .canvas-frame {
			position: absolute;
			width: 100%;
			max-width: 1600px;
			aspect-ratio: 1600 / 930;
			right: 0;
			top: 0;

			& canvas {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			@media screen and (min-width: 1440px) {
				right: -0.66em;
			}
		}

		& .statistics {
			position: relative;
			z-index: 10;
			display: flex;
			flex-wrap: wrap;
			height: calc(100% - 0.24em);

			& .tag-frame {
				display: flex;
				align-items: center;
				gap: 0.1em;
			}

			& .more-btn {
				cursor: pointer;
				display: flex;
				align-items: center;
				transition:
					background-color var(--duration) var(--ease),
					opacity var(--duration) var(--ease);
				background-color: var(--caribbean-current);
				padding: 0.0915em;
				border-radius: 0.08em;
				opacity: 0;
				pointer-events: none;

				&.active {
					opacity: 1;
					pointer-events: all;
				}

				&.open span {
					color: #ffffff;
					transition: color var(--duration) var(--ease);
					transition-delay: 50ms;
				}

				& * {
					pointer-events: none;
				}

				& span {
					position: relative;
					transition: color 75ms var(--ease);
					font-size: 0.14em;
					line-height: 1.2em;
					font-weight: 600;
					letter-spacing: 0em;
					display: block;
					text-transform: uppercase;
					white-space: nowrap;
					padding-right: 0.5em;
					color: transparent;
					transition-delay: 0ms;
					overflow: hidden;
				}

				& img {
					display: block;
					width: 0.2em;
				}

				&:hover {
					background-color: var(--tomato);
				}
			}

			& .tags {
				display: block;
				width: 100%;
				height: max-content;

				& .tag-frame:not(:last-child) {
					margin-bottom: 0.12em;
				}
			}

			& .tag {
				--x: -150%;

				display: block;
				cursor: pointer;
				position: relative;
				transition: background-color var(--ease) var(--duration);

				font-weight: 600;

				text-transform: uppercase;
				color: #fff;
				width: fit-content;
				text-align: center;
				padding: 0.1em 0.16em 0.12em;
				border-radius: 0.08em;
				background-color: var(--caribbean-current);
				overflow: hidden;

				* {
					pointer-events: none;
				}

				& span {
					position: relative;
					font-size: 0.14em;
					line-height: 1.2em;
					letter-spacing: 0em;
					display: block;
					transition: transform var(--duration) var(--ease);
					transform: translate3d(0%, 0%, 0) skewX(0deg);
					transition-delay: 100ms;
					z-index: 3;
				}

				& span:last-of-type {
					position: absolute;
					transition: transform var(--duration) var(--ease);
					transform: translate3d(-50%, 150%, 0) skewX(-10deg);
					transition-delay: 0ms;
					width: max-content;
					top: calc(50% - 0.01em);
					left: 50%;
				}

				&::before {
					content: "";
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				&::before {
					z-index: 1;
					width: 0.35em;
					height: 200%;
					transform: skew(-10deg) translate3d(var(--x), -50%, 0);
					background-color: var(--tomato);
					filter: blur(0.1em);
				}
			}

			& .tag.active {
				background-color: var(--tomato);

				& span:first-of-type {
					transform: translate3d(0%, -200%, 0) skewX(10deg);
					transition-delay: 0ms;
				}

				& span:last-of-type {
					transform: translate3d(-50%, -50%, 0) skewX(0deg);
					transition-delay: 100ms;
				}
			}

			& .infos {
				position: relative;
				border: 0.02em dashed var(--non-photo-blue);
				background-color: var(--midnight-green);
				padding: 0.12em;
				border-radius: 0.08em;
				margin-bottom: 0.44em;
				height: max-content;

				& .info:not(:last-child) {
					margin-bottom: 0.2em;
				}

				& .label {
					font-size: 0.18em;
					line-height: 1.2em;
					letter-spacing: 0;
					font-weight: 800;
					text-transform: uppercase;
					color: #fff;
					margin-bottom: 1em;
				}
			}

			& .info {
				display: flex;
				align-items: center;
				gap: 0.08em;

				& .media {
					width: 0.5em;
				}

				& .main-title {
					font-size: 0.12em;
					line-height: 1.2em;
					letter-spacing: 0;
					text-transform: uppercase;
					font-weight: 800;
					margin-bottom: 0.04em;
					color: #fff;
				}

				& .piece {
					transform-origin: 0% 50%;
				}
			}

			& .r2-button {
				display: flex;
				gap: 0.2em;

				cursor: pointer;
				position: relative;
				align-self: flex-end;
				transition:
					opacity 600ms var(--ease),
					visibility 600ms var(--ease);
				visibility: hidden;
				opacity: 0;
				font-size: 100px;
				text-transform: uppercase;
				color: #fff;
				width: fit-content;
				text-align: center;
				padding: 0.08em 0.16em 0.1em;
				border-radius: 0.08em;
				height: max-content;
				overflow: hidden;

				&.active {
					visibility: visible;
					opacity: 1;
				}

				* {
					pointer-events: none;
				}

				& svg {
					display: block;
					position: relative;
					transition: transform var(--duration) var(--ease);
					transform: translate3d(0, 0, 0);
					z-index: 3;
					width: 0.08em;
				}

				& span {
					position: relative;
					font-size: 0.14em;
					line-height: 1.2em;
					font-weight: 600;
					letter-spacing: 0em;
					display: block;
					transition: transform var(--duration) var(--ease);
					transform: translate3d(0%, 0%, 0) skewX(0deg);
					transition-delay: 100ms;
					z-index: 3;
				}

				& span:last-of-type {
					position: absolute;
					transition: transform var(--duration) var(--ease);
					transform: translate3d(0%, 150%, 0) skewX(-10deg);
					transition-delay: 0ms;
					width: max-content;
					top: calc(50% - 0.01em);
					/* left: 0.16em; */
				}

				&::before,
				&::after {
					content: "";
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				&::before {
					z-index: 1;
					background-color: var(--tomato);
				}
				&::after {
					z-index: 2;
					transition: transform 600ms var(--ease);
					background-color: var(--caribbean-current);
					transform: translate(-150%, 0%);
					left: -0.05em;
					width: calc(100% + 0.1em);
				}
			}
		}
	}

	section.products {
		margin-top: 145px;
		color: #fff;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			margin-top: 80px;
		}
	}

	section.products .title {
		width: 100%;
		max-width: 530px;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			max-width: 100%;
		}
	}

	section.products .splash-image {
		width: 100%;
		height: auto;
		margin-top: 60px;
		display: none;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;

		@media screen and (max-width: 1279px) {
			display: block;
		}

		@media screen and (max-width: 768px) and (orientation: portrait) {
			margin-top: 32px;
		}
	}

	section.products .scrollable-image .scroll-inner {
		display: inline-block;
		white-space: nowrap;
		min-width: max-content;
		width: 100%;
	}

	section.products .splash-image img,
	section.products .splash-image svg {
		width: 100%;
		height: auto;
	}

	section.products .links-and-info {
		margin-top: 125px;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			margin-top: 64px;
		}
	}

	section.products .row {
		justify-content: space-between;
	}

	section.products .left,
	section.products .right {
		width: calc(50% - 15px);
		flex-shrink: 0;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			width: 100%;
		}
	}

	section.products .title-links {
		width: 100%;
		max-width: 400px;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			max-width: 250px;
		}
	}

	section.products .links {
		margin-top: 48px;
		display: flex;
		flex-direction: column;
		gap: 20px;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			margin-top: 36px;
		}
	}

	section.products .link {
		max-width: 228px;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			max-width: 100%;
		}
	}

	section.products .right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			margin-top: 36px;
			gap: 20px;
		}
	}

	section.products .border-line {
		width: 100%;
		height: 1px;
		background-color: var(--green-3);
	}

	section.products .info-row {
		display: flex;
		gap: 20px;
		align-items: flex-start;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			gap: 16px;
		}
	}

	section.products .info-row .icon {
		flex-shrink: 0;
		width: 48px;
		height: 48px;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			width: 36px;
			height: 36px;
		}
	}

	section.products .info-row .icon img,
	section.products .info-row .icon svg {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: top left;
	}

	/* WORKFLOW STEPS */

	section.workflow-steps {
		margin-top: 185px;
		color: #fff;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			margin-top: 84px;
		}
	}

	section.workflow-steps .title {
		width: 100%;
		max-width: 766px;
	}

	section.workflow-steps .steps {
		margin-top: 60px;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 16px;

		@media screen and (max-width: 1200px) {
			justify-content: flex-start;
			max-width: calc(100% + 60px);
			overflow: auto;
			margin-left: -30px;
			margin-right: -30px;
			padding-bottom: 30px;
			gap: 20px;
		}
	}

	section.workflow-steps .arrow-wrap {
		align-self: flex-start;
		position: relative;
		margin-top: 12px;

		@media screen and (max-width: 1200px) {
			margin-top: 18px;
		}
	}

	section.workflow-steps .arrow-wrap img,
	section.workflow-steps .arrow-wrap svg {
		position: absolute;
		top: 0;
		left: -50%;
		transform: translateX(-50%);
	}

	section.workflow-steps .arrow-wrap {
		align-self: flex-start;
		position: relative;
		margin-top: calc(100% * (180 / 617) * 0.435);

		@media screen and (max-width: 1200px) {
			margin-top: calc(100% * (180 / 617) * 1.1);
		}
	}

	section.workflow-steps .arrow-wrap img,
	section.workflow-steps .arrow-wrap svg {
		position: absolute;
		top: 0;
		left: -50%;
		transform: translateX(-50%);
	}

	section.workflow-steps .step {
		width: 15%;

		@media screen and (max-width: 1200px) {
			width: 150px;
			flex-shrink: 0;
		}
	}

	section.workflow-steps .step:first-child {
		@media screen and (max-width: 768px) and (orientation: portrait) {
			margin-left: 30px;
		}
	}

	section.workflow-steps .step:last-child {
		@media screen and (max-width: 768px) and (orientation: portrait) {
			margin-right: 30px;
		}
	}

	section.workflow-steps .step img,
	section.workflow-steps .step svg {
		width: 100%;
		height: auto;
	}

	section.workflow-steps .footnotes {
		display: flex;
		justify-content: flex-end;
		gap: 20px;
		margin-top: 20px;
	}

	section.workflow-steps .footnote {
		display: flex;
	}

	section.workflow-steps .footnote p {
		font-size: 11px;
		line-height: 1.2;
		font-weight: 800;
		text-transform: uppercase;
	}

	section.workflow-steps .footnote img,
	section.workflow-steps .footnote svg {
		height: 10px;
		width: 10px;
		margin-right: 8px;
	}

	section.workflow-steps .footnote:nth-child(1) {
		color: var(--orange);
	}

	section.workflow-steps .footnote:nth-child(1) svg path {
		fill: var(--orange);
	}

	section.workflow-steps .footnote:nth-child(2) {
		color: var(--green-1);
	}

	section.workflow-steps .footnote:nth-child(2) svg path {
		fill: var(--green-1);
	}

	/* CASE STUDIES */

	section.case-studies {
		margin-top: 185px;
		background-color: #fff;
		padding: 120px 0;

		&.dark-green {
			background-color: var(--green-4);
			color: #fff;
			padding-top: 0;

			.fill-white {
				fill: var(--green-4);
			}

			.title {
				color: #fff;
			}

			.grid .cell .story {
				border: 1px solid rgba(255, 255, 255, 0.25);

				.bordered-corner {
					background-color: var(--green-4);

					@media screen and (max-width: 768px) and (orientation: portrait) {
						display: none;
					}
				}

				.bordered-corner::before {
					background-color: var(--green-4);
					border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
					border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
				}
			}

			.button-wrap {
				background-color: var(--green-4) !important;
				border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
				border-top: 1px solid rgba(255, 255, 255, 0.25) !important;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					background-color: transparent !important;
					border-left: none !important;
					border-top: none !important;
				}
			}
		}
	}

	section.case-studies .title {
		color: var(--green-3);
		margin-bottom: 34px;

		@media screen and (max-width: 1020px) {
			margin-bottom: 30px;
		}
	}

	section.case-studies .grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;

		@media screen and (max-width: 1280px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 30px;
		}
	}

	section.case-studies .grid h2.title {
		margin-bottom: 0;
	}

	@media screen and (max-width: 768px) {
		section.case-studies .grid {
			grid-template-columns: repeat(1, 1fr);
		}
	}

	section.case-studies .grid .cell.title-cell {
		grid-column: 1;

		@media screen and (max-width: 1280px) {
			grid-column: 1 / -1;
		}
	}

	section.case-studies .grid .cell .story {
		border: 1px solid rgba(0, 0, 0, 0.25);
		border-radius: 25px;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	section.case-studies .story .text {
		padding: 48px;
		align-self: flex-start;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			padding: 36px 36px 16px;
		}
	}

	section.case-studies .story .button-wrap {
		padding: 20px;
		width: 280px;
		border-left: 1px solid rgba(0, 0, 0, 0.25);
		border-top: 1px solid rgba(0, 0, 0, 0.25);
		border-top-left-radius: 25px;
		background-color: #fff;
		margin-bottom: -1px;
		margin-right: -1px;
		position: relative;

		@media screen and (max-width: 900px) and (orientation: portrait) {
			padding: 16px;
			background-color: transparent;
			border-left: none;
			border-top: none;
			width: 100%;
		}
	}

	section.case-studies .story .bordered-corner {
		position: absolute;
		width: 30px;
		height: 30px;
		background-color: #fff;

		@media screen and (max-width: 900px) and (orientation: portrait) {
			display: none;
		}
	}

	section.case-studies .story .bordered-corner.tr {
		bottom: 100%;
		right: 0;
	}

	section.case-studies .story .bordered-corner.tr::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border-right: 1px solid rgba(0, 0, 0, 0.25);
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
		background-color: transparent;
		border-bottom-right-radius: 25px;
	}

	section.case-studies .story .bordered-corner.bl {
		right: 100%;
		bottom: 0;
	}

	section.case-studies .story .bordered-corner.bl::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border-right: 1px solid rgba(0, 0, 0, 0.25);
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
		background-color: transparent;
		border-bottom-right-radius: 25px;
	}

	/* RELATED INSIGHT */

	section.related-insight {
		padding: 150px 0;
		color: #fff;
	}

	section.related-insight h2.title {
		margin-bottom: 34px;

		@media screen and (max-width: 1020px) {
			margin-bottom: 30px;
		}
	}

	section.related-insight .grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;

		@media screen and (max-width: 1020px) {
			grid-template-columns: repeat(1, 1fr);
			gap: 30px;
		}
	}

	section.related-insight .grid h2.title {
		margin-bottom: 0;
	}

	section.related-insight .grid .cell .insight {
		border: 1px solid rgba(255, 255, 255, 0.25);
		border-radius: 25px;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	section.related-insight .insight .text {
		padding: 48px;
		align-self: flex-start;

		@media screen and (max-width: 1020px) {
			padding: 36px 36px 16px;
		}
	}

	section.related-insight .insight .button-wrap {
		padding: 20px;
		width: 97px;
		border-left: 1px solid rgba(255, 255, 255, 0.25);
		border-top: 1px solid rgba(255, 255, 255, 0.25);
		border-top-left-radius: 25px;
		background-color: var(--green-4);
		margin-bottom: -1px;
		margin-right: -1px;
		position: relative;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			padding: 16px;
			background-color: transparent;
			border-left: none;
			border-top: none;
			width: 100%;
			width: fit-content;
		}
	}

	section.related-insight .insight .btn {
		width: 57px;
		height: 57px;
	}

	section.related-insight .insight .bordered-corner {
		position: absolute;
		width: 30px;
		height: 30px;
		background-color: var(--green-4);

		@media screen and (max-width: 768px) and (orientation: portrait) {
			display: none;
		}
	}

	section.related-insight .insight .bordered-corner.tr {
		bottom: 100%;
		right: 0;
	}

	section.related-insight .insight .bordered-corner.tr::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border-right: 1px solid rgba(255, 255, 255, 0.25);
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
		background-color: transparent;
		border-bottom-right-radius: 25px;
	}

	section.related-insight .insight .bordered-corner.bl {
		right: 100%;
		bottom: 0;
	}

	section.related-insight .insight .bordered-corner.bl::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border-right: 1px solid rgba(255, 255, 255, 0.25);
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
		background-color: transparent;
		border-bottom-right-radius: 25px;
	}

	section.use-cases {
		padding-top: 120px;

		.title {
			color: #fff;
			max-width: 500px;
		}

		.tabs-and-texts-row {
			align-items: flex-start;
			margin-top: 95px;
			justify-content: space-between;
			gap: 32px;

			@media screen and (max-width: 768px) and (orientation: portrait) {
				gap: 8px;
				margin-top: 48px;
			}

			.left {
				max-width: 435px;
				display: flex;
				flex-direction: column;
				gap: 20px;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					width: 100%;
					max-width: 100%;
				}

				@media screen and (max-width: 768px) and (orientation: portrait) {
					gap: 8px;
				}
			}

			.right {
				max-width: 585px;
				margin: 0;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					width: 100%;
					max-width: 100%;
					margin-top: 24px;
				}

				.text {
					@media screen and (max-width: 768px) and (orientation: portrait) {
						padding: 20px;
					}

					li {
						font-size: 18px;
						line-height: 26px;
						letter-spacing: -0.03em;
						paragraph-spacing: 6px;
						font-weight: 400;
						padding: 16px 0 16px 20px;
						position: relative;
						color: #fff;
					}

					li:nth-child(1) {
						padding-top: 0;
					}

					li:nth-child(1)::before {
						top: 12px;
					}

					li::before {
						content: "";
						width: 2px;
						height: 2px;
						background-color: var(--white);
						border-radius: 50%;
						position: absolute;
						left: 8px;
						top: 28px;
						transform: translateY(-50%);
					}
				}
			}
		}
	}

	section.workflow-video {
		margin-top: 120px;

		&.dark-green {
			.video-custom-controls-wrap {
				background-color: var(--green-4);
			}
		}

		.custom-video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			aspect-ratio: 144 / 75;
		}

		.video-custom-controls-wrap {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 30px 0;
			background-color: var(--green-1);

			@media screen and (max-width: 768px) and (orientation: portrait) {
				padding: 14px;
			}
		}

		.video-custom-controls {
			width: 100%;
			max-width: 340px;
			display: flex;
			justify-content: center;
			gap: 16px;

			.custom-video-control {
				width: 40px;
				height: 40px;
				padding: 10px;
				border-radius: 16px;
				background-color: var(--tomato);
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				flex-shrink: 0;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					padding: 12px;
				}

				svg {
					width: 100%;
					height: 100%;
					object-fit: contain;
					object-position: center;
				}
			}

			.timeline {
				flex-grow: 1;
				display: flex;
				align-items: center;
				position: relative;

				.timeline-line {
					width: 100%;
					height: 1px;
					background-color: var(--orange);
				}

				.timeline-indicator {
					width: 13px;
					height: 13px;
					position: absolute;
					top: 50%;
					transform: translate(-50%, -50%);
					cursor: pointer;

					svg {
						width: 100%;
						height: 100%;
						object-fit: contain;
						object-position: center;
					}
				}
			}
		}
	}
}

/* PRODUCT PAGE */

.page-template-product {
	section {
		&.product-hero {
			.container {
				position: relative;
			}

			.background-image {
				width: 720px;
				max-width: 100%;
				height: 100%;
				position: absolute;
				bottom: 180px;
				left: 50%;
				transform: translateX(-50%);

				@media screen and (max-width: 1279px) {
					overflow: hidden;
					padding: 10px;
					transform: translateX(0);
				}

				img {
					width: 100%;
					height: 100%;
					object-fit: contain;
					object-position: bottom center;
				}
			}

			.title-row {
				align-items: flex-end;

				.right {
					p {
						max-width: 375px;
					}
				}
			}

			.tabs-and-texts-row {
				align-items: flex-start;
				margin-top: 95px;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					gap: 8px;
					margin-top: 48px;
				}

				.left {
					max-width: 435px;
					display: flex;
					flex-direction: column;
					gap: 20px;

					@media screen and (max-width: 768px) and (orientation: portrait) {
						width: 100%;
						max-width: 100%;
					}

					@media screen and (max-width: 768px) and (orientation: portrait) {
						gap: 8px;
					}
				}

				.right {
					max-width: 482px;
					margin: 0;
					padding-bottom: 0;

					@media screen and (max-width: 768px) and (orientation: portrait) {
						width: 100%;
						max-width: 100%;
						margin-top: 24px;
					}

					.text {
						padding: 24px;
						background-color: var(--tomato);
						border-radius: 25px;

						@media screen and (max-width: 768px) and (orientation: portrait) {
							padding: 20px;
						}

						/* ul {
							margin-top: 25px;

							@media screen and (max-width: 768px) and (orientation: portrait) {
								margin-top: 18px;
							}
						} */

						li {
							font-size: 16px;
							line-height: 24px;
							letter-spacing: -0.03em;
							font-weight: 400;
							padding: 16px 0 16px 20px;
							position: relative;

							+ li {
								border-top: 1px solid rgba(255, 255, 255, 0.2);
							}
						}

						li::before {
							content: "";
							width: 2px;
							height: 2px;
							background-color: var(--white);
							border-radius: 50%;
							position: absolute;
							left: 8px;
							top: 28px;
							transform: translateY(-50%);
						}
					}
				}
			}
		}

		&.product-awards {
			background-color: #fff;
			padding: 120px 0;

			.title-col {
				width: 33%;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					width: 100%;
				}

				.title {
					color: var(--midnight-green);
				}
			}

			.images-col {
				width: 66%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				gap: 16px;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					width: 100%;
					flex-wrap: wrap;
					gap: 16px;
					margin-top: 36px;
				}

				.img-wrap {
					width: 242px;
					height: 180px;

					@media screen and (max-width: 768px) and (orientation: portrait) {
						width: 100%;
						height: 200px;
					}

					img {
						width: 100%;
						height: 100%;
						object-fit: contain;
						object-position: center;
					}
				}
			}
		}

		&.product-features {
			padding: 120px 0;

			.title {
				color: #fff;
			}

			.grid {
				gap: 30px;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				border-radius: 25px;
				margin-top: 56px;

				@media screen and (max-width: 992px) and (orientation: portrait) {
					gap: 16px;
					grid-template-columns: repeat(1, 1fr);
					margin-top: 32px;
				}

				.cell {
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 48px 24px;
					border-radius: 25px;
					gap: 8px;

					.title {
						letter-spacing: inital;
						font-weight: 800;
						line-height: 1.2;
						text-transform: uppercase;
						padding: 0 6px;
					}

					.cell-border {
						width: 100%;
						height: 1px;
						background-color: #fff;
						opacity: 0.2;
						display: none;
					}
				}

				.card.green-1 {
					background-color: var(--green-1);

					.title,
					.text {
						color: var(--green-4);
					}

					.cell-border {
						background-color: var(--green-4);
					}
				}

				.card.green-2 {
					background-color: var(--green-2);

					.title,
					.text {
						color: var(--green-4);
					}

					.cell-border {
						background-color: var(--green-4);
					}
				}

				.card.green-3 {
					background-color: var(--green-3);

					.title,
					.text {
						color: #fff;
					}

					.cell-border {
						background-color: #fff;
					}
				}

				.card.orange {
					background-color: var(--orange);

					.title,
					.text {
						color: #fff;
					}

					.cell-border {
						background-color: #fff;
					}
				}
			}
		}

		&.example-use-cases {
			padding: 120px 0;

			@media screen and (max-width: 768px) and (orientation: portrait) {
				padding-top: 0;
			}

			.title {
				color: #fff;
			}

			.left-and-right {
				margin-top: 62px;
				justify-content: center;
			}

			.left,
			.right {
				width: 50%;
				color: #fff;
				border-radius: 25px;
				padding: 48px;

				&.rounded {
					border-radius: 25px !important;
				}

				@media screen and (max-width: 768px) and (orientation: portrait) {
					width: 100%;
					padding: 32px;
				}

				ul {
					margin-top: 25px;

					@media screen and (max-width: 768px) and (orientation: portrait) {
						margin-top: 18px;
					}
				}

				li {
					font-size: 18px;
					line-height: 26px;
					letter-spacing: -0.03em;
					font-weight: 400;
					position: relative;
					padding-left: 20px;
					color: #fff;
				}

				li::before {
					content: "";
					width: 2px;
					height: 2px;
					background-color: var(--white);
					border-radius: 50%;
					position: absolute;
					left: 8px;
					top: 10px;
					transform: translateY(-50%);
				}

				.title {
					margin-bottom: 10px;
				}

				p + ul {
					margin-top: 0;
				}

				p {
					font-weight: 700;
				}
			}

			.left {
				background: linear-gradient(
					125deg,
					rgba(43, 98, 100, 1) 0%,
					rgba(33, 64, 70, 1) 100%
				);
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					border-top-right-radius: 25px;
					border-bottom-right-radius: 0;
					border-bottom-left-radius: 0;
				}
			}

			.right {
				background: linear-gradient(
					125deg,
					rgba(255, 75, 49, 1) 0%,
					rgba(33, 64, 70, 1) 100%
				);
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					border-top-right-radius: 0;
					border-top-left-radius: 0;
					border-bottom-right-radius: 25px;
					border-bottom-left-radius: 25px;
				}
			}
		}

		&.book-a-demo {
			padding-bottom: 120px;

			.title,
			.description {
				text-align: center;
			}

			.title {
				color: var(--tomato);
			}

			.description {
				color: #fff;
				margin: 30px 0;
			}

			.btn-wrap {
				position: relative;
				display: flex;
				justify-content: center;
				margin-bottom: 30px;
				min-height: 54px;
			}

			#toggle-demo-form {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, 0);
				z-index: 1;
			}

			#toggle-demo-form.hidden {
				pointer-events: none;
				visibility: hidden;
			}

			.demo-form-wrap {
				background-color: #2b6264;
				border-radius: 25px;
				overflow: hidden;
				transition: 1.3s;
				display: grid;
				grid-template-rows: 0fr;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					background-color: transparent;
				}

				.form-title {
					color: #fff;
					margin-bottom: 32px;
				}

				.inner {
					min-height: 0;
					transition: visibility 1.3s;
					visibility: hidden;
				}

				.inner-content {
					margin-top: 30px;
					padding: 52px;

					@media screen and (max-width: 768px) and (orientation: portrait) {
						padding: 0;
					}
				}
			}

			.demo-form-wrap.active {
				grid-template-rows: 1fr;

				.inner {
					min-height: 100%;
					visibility: visible;
				}
			}
		}
	}
}

@keyframes point-down {
	0% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(50%);
	}
}

#page-wrap {
	overflow: hidden;
}

/* scope for rise2 new home */
.rise2-home-frame {
	display: block;
	position: relative;
	transition: opacity var(--duration) var(--ease);
	width: 100%;
	/* font-size: 100px; */
	font-size: 7.15vw;
	font-weight: 800;
	color: var(--white);
	background-color: var(--midnight-green);
	opacity: 0;
	margin-top: -0.1em;

	@media screen and (min-width: 1440px) {
		font-size: 100px;
	}

	@media screen and (max-width: 1024px) and (orientation: portrait) {
		/* font-size: 120px; */
		font-size: 13vw;

		& section {
			max-width: 100vw;
		}
	}

	@media screen and (max-width: 768px) and (orientation: portrait) {
		font-size: 24vw;
	}

	&.inited {
		opacity: 1;
	}

	/* generals */
	& [reveal-title] {
		.split-lines {
			padding: 0.2em 0;
			margin: -0.4em 0;
			overflow: hidden;
		}

		.split-words {
			transform-origin: 0% 50%;
		}

		@media screen and (max-width: 768px) and (orientation: portrait) {
			& .split-lines {
				padding: 0.3em 0;
				margin: -0.6em 0;
			}
		}
	}

	& .page-dot-marker {
		display: block;
		position: absolute;
		pointer-events: none;
		width: 100%;
		height: 1px;
		top: 50%;
		left: 0;
	}

	& .relative {
		position: relative;
	}

	& .media {
		display: block;
		position: relative;

		& img,
		& video,
		& svg,
		& picture {
			display: block;
			max-width: 100%;
			width: 100%;
		}
	}

	& .title {
		font-size: 0.32em;
		line-height: 0.9em;
		letter-spacing: 0;
		text-align: center;
		font-weight: 800;
		text-transform: uppercase;
		color: #fff;

		@media screen and (max-width: 1024px) and (orientation: portrait) {
			font-size: 0.3em;
		}

		& span {
			color: var(--tomato);
		}

		& .split-lines {
			overflow: hidden;
			padding-bottom: 0.2em;
			margin-bottom: -0.2em;
		}

		& .split-words {
			transform-origin: 50% 100%;
		}

		@media screen and (max-width: 768px) and (orientation: portrait) {
			& .split-lines {
				padding: 0.3em 0;
				margin: -0.6em 0;
			}
		}
	}

	& .r2-container {
		width: 100%;
		max-width: 12em;
		margin: auto;

		@media screen and (max-width: 1024px) and (orientation: portrait) {
			all: unset;
			display: block;
			width: 100%;
			max-width: 10em;
			margin: auto;
		}

		@media screen and (max-width: 768px) and (orientation: portrait) {
			font-size: inherit;
			max-width: 3.5em;
		}
	}

	/* page dots */
	& .page-dots {
		position: fixed;
		pointer-events: none;
		z-index: 50;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			display: none;
		}

		&.hide-dots .dots {
			transform: translate(5%, -50%);
			opacity: 0;
		}

		& .dots {
			display: block;
			position: absolute;
			transition:
				opacity var(--duration) var(--ease),
				transform var(--duration) var(--ease);
			transform: translate(0, -50%);
			top: 50%;
			right: 0.2em;
		}

		& .r2-item {
			pointer-events: none;
			position: relative;
			width: fit-content;
			margin-left: auto;
			margin-right: 0;

			&:not(:last-child) {
				margin-bottom: 0.04em;
			}
		}

		& .r2-item.active:hover {
			& .r2-label {
				transform: scale(1) translate(0em, 0);
				opacity: 1;
			}
		}

		& .r2-item:hover {
			& .r2-label {
				transform: scale(1) translate(0em, 0);
				opacity: 0.35;
			}

			& .r2-dot {
				transform: translate(0, -50%) scale(1.25);
			}
		}

		& .r2-item.active {
			/* & .r2-label {
				transform: scale(1) translate(0em, 0);
				opacity: 1;
			} */

			& .r2-dot {
				transform: translate(0, -50%) scale(1.5);

				& svg path:nth-child(1) {
					fill: #ffffff;
				}

				& svg path:nth-child(2) {
					stroke: #ffffff;
				}
			}
		}

		& .r2-label {
			color: #ffffff;
			transition:
				opacity var(--duration) var(--ease),
				transform var(--duration) var(--ease);
			transform: translate(-0.04em, 0);
			transform-origin: 100% 50%;
			line-height: 0.132em;
			padding: 0.04em 0.08em;
			padding-right: 0.26em;
			border-radius: 0.04em;
			text-transform: uppercase;
			background-color: var(--tomato);
			width: fit-content;
			opacity: 0;

			& span {
				display: block;
				font-size: 0.11em;
				font-weight: 800;
			}

			& .split-lines {
				overflow: hidden;
			}
		}

		& .r2-dot {
			cursor: pointer;
			pointer-events: all;
			display: block;
			position: absolute;
			transition: transform var(--ease) var(--duration);
			transform: translate(0, -50%) scale(1);
			width: 0.1em;
			top: 50%;
			right: 0.08em;

			& svg {
				display: block;
				width: 100%;
			}

			& svg path:nth-child(1) {
				transition: fill var(--duration) var(--ease);
				fill: var(--non-photo-blue);
			}

			& svg path:nth-child(2) {
				transition: stroke var(--duration) var(--ease);
				stroke: var(--non-photo-blue);
			}
		}
	}

	/* main hero */
	& .main-hero {
		display: block;
		position: relative;
		min-height: 100svh;

		& .track {
			display: block;
			position: relative;
			height: 400svh;

			@media screen and (max-width: 768px) and (orientation: portrait) {
				height: 300svh;
			}

			& .sticky {
				position: relative;
				height: 100svh;
			}
		}

		& .layout {
			display: flex;
			position: absolute;
			align-items: center;
			justify-content: center;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/* outline: 2px solid orchid; */

			&[data-type="statistics-layout"] {
				align-items: flex-start;
				justify-content: flex-start;
				padding-top: 1.16em;
			}
		}

		& .statistics {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			margin-left: 0.25em;
			height: calc(100% - 0.24em);

			@media screen and (max-width: 768px) and (orientation: portrait) {
				width: 100%;
				margin: 0;
				align-items: flex-end;
				padding: 0 0.25em 0.2em;

				& .infos {
					display: none;
				}

				& .tags .tag-frame {
					width: 100%;

					& .tag {
						width: 100%;
					}

					& .more-btn {
						display: none;
					}
				}
			}

			& .tag-frame {
				display: flex;
				align-items: center;
				gap: 0.1em;
			}

			& .more-btn {
				cursor: pointer;
				display: flex;
				align-items: center;
				transition:
					background-color var(--duration) var(--ease),
					opacity var(--duration) var(--ease);
				background-color: var(--caribbean-current);
				padding: 0.0915em;
				border-radius: 0.08em;
				opacity: 0;
				pointer-events: none;

				&.active {
					opacity: 1;
					pointer-events: all;
				}

				&.open span {
					color: #ffffff;
					transition: color var(--duration) var(--ease);
					transition-delay: 50ms;
				}

				& * {
					pointer-events: none;
				}

				& span {
					position: relative;
					transition: color 75ms var(--ease);
					font-size: 0.14em;
					line-height: 1.2em;
					font-weight: 600;
					letter-spacing: 0em;
					display: block;
					text-transform: uppercase;
					white-space: nowrap;
					padding-right: 0.5em;
					color: transparent;
					transition-delay: 0ms;
					overflow: hidden;
				}

				& img {
					display: block;
					width: 0.2em;
				}

				&:hover {
					background-color: var(--tomato);
				}
			}

			& .tags {
				display: block;
				width: 100%;
				height: max-content;

				& .tag-frame:not(:last-child) {
					margin-bottom: 0.12em;
				}
			}

			& .tag {
				--x: -150%;

				display: block;
				cursor: pointer;
				position: relative;
				transition: background-color var(--ease) var(--duration);

				font-weight: 600;

				text-transform: uppercase;
				color: #fff;
				width: fit-content;
				text-align: center;
				padding: 0.1em 0.16em 0.12em;
				border-radius: 0.08em;
				background-color: var(--caribbean-current);
				overflow: hidden;

				* {
					pointer-events: none;
				}

				& span {
					position: relative;
					font-size: 0.14em;
					line-height: 1.2em;
					letter-spacing: 0em;
					display: block;
					transition: transform var(--duration) var(--ease);
					transform: translate3d(0%, 0%, 0) skewX(0deg);
					transition-delay: 100ms;
					z-index: 3;
				}

				& span:last-of-type {
					position: absolute;
					transition: transform var(--duration) var(--ease);
					transform: translate3d(-50%, 150%, 0) skewX(-10deg);
					transition-delay: 0ms;
					width: max-content;
					top: calc(50% - 0.01em);
					left: 50%;
				}

				&::before {
					content: "";
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				&::before {
					z-index: 1;
					width: 0.35em;
					height: 200%;
					transform: skew(-10deg) translate3d(var(--x), -50%, 0);
					background-color: var(--tomato);
					filter: blur(0.1em);
				}
			}

			& .tag.active {
				background-color: var(--tomato);

				& span:first-of-type {
					transform: translate3d(0%, -200%, 0) skewX(10deg);
					transition-delay: 0ms;
				}

				& span:last-of-type {
					transform: translate3d(-50%, -50%, 0) skewX(0deg);
					transition-delay: 100ms;
				}
			}

			& .infos {
				position: relative;
				border: 0.02em dashed var(--non-photo-blue);
				background-color: var(--midnight-green);
				padding: 0.12em;
				border-radius: 0.08em;
				margin-bottom: 0.44em;
				height: max-content;

				& .info:not(:last-child) {
					margin-bottom: 0.2em;
				}

				& .label {
					font-size: 0.18em;
					line-height: 1.2em;
					letter-spacing: 0;
					font-weight: 800;
					text-transform: uppercase;
					color: #fff;
					margin-bottom: 0.2em;
				}
			}

			& .info {
				display: flex;
				align-items: center;
				gap: 0.08em;

				& .media {
					width: 0.5em;
				}

				& .main-title {
					font-size: 0.12em;
					line-height: 1.2em;
					letter-spacing: 0;
					text-transform: uppercase;
					font-weight: 800;
					margin-bottom: 0.04em;
					color: #fff;
				}

				& .piece {
					transform-origin: 0% 50%;
				}
			}

			& .r2-button {
				display: flex;
				gap: 0.2em;

				cursor: pointer;
				position: relative;
				align-self: flex-end;
				transition:
					opacity 600ms var(--ease),
					visibility 600ms var(--ease);
				visibility: hidden;
				opacity: 0;
				font-size: 100px;
				text-transform: uppercase;
				color: #fff;
				width: fit-content;
				text-align: center;
				padding: 0.08em 0.16em 0.1em;
				border-radius: 0.08em;
				height: max-content;
				overflow: hidden;

				&.active {
					visibility: visible;
					opacity: 1;
				}

				* {
					pointer-events: none;
				}

				& svg {
					display: block;
					position: relative;
					transition: transform var(--duration) var(--ease);
					transform: translate3d(0, 0, 0);
					z-index: 3;
					width: 0.08em;
				}

				& span {
					position: relative;
					font-size: 0.14em;
					line-height: 1.2em;
					font-weight: 600;
					letter-spacing: 0em;
					display: block;
					transition: transform var(--duration) var(--ease);
					transform: translate3d(0%, 0%, 0) skewX(0deg);
					transition-delay: 100ms;
					z-index: 3;
				}

				& span:last-of-type {
					position: absolute;
					transition: transform var(--duration) var(--ease);
					transform: translate3d(0%, 150%, 0) skewX(-10deg);
					transition-delay: 0ms;
					width: max-content;
					top: calc(50% - 0.01em);
					/* left: 0.16em; */
				}

				&::before,
				&::after {
					content: "";
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				&::before {
					z-index: 1;
					background-color: var(--tomato);
				}
				&::after {
					z-index: 2;
					transition: transform 600ms var(--ease);
					background-color: var(--caribbean-current);
					transform: translate(-150%, 0%);
					left: -0.05em;
					width: calc(100% + 0.1em);
				}
			}
		}

		& .canvas-frame {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #133840;
			pointer-events: none;

			& .arrow {
				position: absolute;
				cursor: pointer;
				transition: opacity 600ms var(--duration) var(--ease);
				transform: translateX(-50%);
				z-index: 10;
				left: calc(50% - 0.175em);
				bottom: 0.75em;
				width: 0.35em;
				animation: point-down infinite alternate 1s ease;
				opacity: 0;

				&.active {
					opacity: 1;
					pointer-events: all;
				}

				& path {
					box-shadow: 0.05em 0.05em var(--midnight-green);
				}
			}

			@media screen and (max-width: 1024px) and (orientation: portrait) {
				& .arrow {
					left: calc(50% - 0.125em);
					width: 0.25em;
					bottom: 0.5em;
				}
			}
		}

		& canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 0.2em;
		}

		& .title-frame {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 100%;
			/* background-color: rgba(12, 56, 64, 0.95); */
			background: radial-gradient(
				circle,
				rgba(19, 56, 64, 1) 0%,
				rgba(19, 56, 64, 0.85) 40%,
				rgba(19, 56, 64, 0) 58%,
				rgba(19, 56, 64, 0) 100%
			);
			border-radius: 50%;
			width: 7.3em;
			aspect-ratio: 4 / 3.5;
			padding: 0.5em;
			min-height: 3.6em;

			& .title {
				pointer-events: none;
				/* transform: translateY(-0.16em); */
				width: 100%;
			}

			& .title:not(:first-child) {
				position: absolute;
				transform: translate(-50%, -50%);
				top: 50%;
				left: 50%;
			}

			@media screen and (max-width: 1024px) and (orientation: portrait) {
				width: 3.8em;
				padding: 0;

				& .title {
					& .split-lines {
						padding: 0.15em 0;
						margin: -0.15em 0;
					}
				}
			}
		}

		@media screen and (hover: hover) {
			& .statistics {
				& .tag:not(.active):hover {
					& span:first-of-type {
						transform: translate3d(0%, -200%, 0) skewX(10deg);
						transition-delay: 0ms;
					}

					& span:last-of-type {
						transform: translate3d(-50%, -50%, 0) skewX(0deg);
						transition-delay: 100ms;
					}
				}

				& .r2-button:hover {
					&::after {
						transform: translate(0%, 0%);
					}

					& span:first-of-type {
						transform: translate3d(0%, -200%, 0) skewX(10deg);
						transition-delay: 0ms;
					}

					& span:last-of-type {
						transform: translate3d(0%, -50%, 0) skewX(0deg);
						transition-delay: 100ms;
					}

					& svg {
						transform: translate3d(0.04em, 0, 0);
					}
				}
			}
		}
	}

	/* complex data */
	& .complex-data {
		display: block;
		position: relative;
		padding: 1.5em 0 1.7em;
		margin-top: -25svh;

		@media screen and (max-width: 768px) and (orientation: portrait) {
			padding: 1em 0 0;
			margin-bottom: -1em;
		}

		& .r2-container {
			position: relative;
			width: 100%;
			max-width: 12em;
			padding: 0 0.2em;
			margin: auto;

			@media screen and (max-width: 1024px) and (orientation: portrait) {
				font-size: 69px;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				font-size: inherit;
				max-width: 3.5em;
			}
		}

		& .r2-title {
			text-align: center;
			color: var(--tomato);
			line-height: 0.52em;
			margin-bottom: 0.07em;

			& span {
				display: block;
				font-size: 0.48em;
				letter-spacing: -0.04em;
				font-weight: 400;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				line-height: 0.56em;
				margin-bottom: 0.25em;

				& span {
					font-size: 0.5em;
				}
			}
		}

		& .r2-subtitle {
			text-align: center;
			color: var(--non-photo-blue);
			line-height: 0.36em;
			margin-bottom: 0.07em;

			& span {
				display: block;
				font-size: 0.26em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				line-height: 0.26em;
				margin-bottom: 0.25em;

				& span {
					font-size: 0.25em;
				}
			}
		}

		& .fix-it-label {
			text-align: center;
			color: var(--non-photo-blue);
			line-height: 0.36em;
			margin-bottom: 0.24em;

			& span {
				display: block;
				font-size: 0.26em;
				letter-spacing: -0.03em;
				font-weight: 400;
				padding-top: 0.3em;
				margin-top: -0.3em;
			}

			& svg {
				display: block;
				width: 0.24em;
				margin: auto;
				margin-top: 0.2em;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				line-height: 0.26em;
				margin-bottom: 0.25em;

				& span {
					font-size: 0.25em;
				}
			}
		}

		& .r2-text {
			text-align: center;
			color: #ffffff;
			line-height: 0.36em;
			max-width: 6.2em;
			margin: auto;
			margin-bottom: 0.4em;

			& span {
				display: block;
				font-size: 0.26em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				line-height: 0.22em;

				& span {
					font-size: 0.2em;
				}
			}
		}

		/* sprites */
		& .sprite-frame {
			display: block;
			position: absolute;
			pointer-events: none;
			backface-visibility: hidden;
			transform: translateX(-50%);
			top: 0;
			left: 50%;
			width: 100%;
			max-width: 14.4em;
			height: 100%;

			& .sprite {
				position: absolute;
				display: block;
			}

			& .sprite svg {
				display: block;
				width: 0.38em;
			}

			/* positions */
			& .sprite:nth-child(1) {
				top: 1.6em;
				left: 0.68em;
			}
			& .sprite:nth-child(2) {
				top: 0.93em;
				left: 3.67em;
			}
			& .sprite:nth-child(3) {
				top: 1.02em;
				right: 4.77em;
			}
			& .sprite:nth-child(4) {
				top: 1.1em;
				left: 1.2em;
			}
			& .sprite:nth-child(5) {
				bottom: 0.86em;
				left: 0.68em;
			}
			& .sprite:nth-child(6) {
				bottom: 4.25em;
				left: 3.46em;
			}
			& .sprite:nth-child(7) {
				top: 3.29em;
				right: 2.72em;
			}
			& .sprite:nth-child(8) {
				top: 3.8em;
				right: 0.6em;
			}
			& .sprite:nth-child(9) {
				bottom: 1.26em;
				left: 1.97em;
			}
			& .sprite:nth-child(10) {
				bottom: 2em;
				right: 1.24em;
			}
			& .sprite:nth-child(11) {
				bottom: 0.88em;
				right: 1.9em;
			}
		}
	}

	/* choose finbourne section */
	& .choose-finbourne-section {
		display: block;
		position: relative;
		margin-top: -2em;

		& .track {
			display: block;
			position: relative;
			height: 600svh;

			& .sticky {
				position: relative;
				display: flex;
				align-items: center;
				height: 100svh;
			}
		}

		& .r2-text {
			text-align: center;
			color: var(--tomato);
			line-height: 0.36em;
			margin-bottom: 0.08em;

			& span {
				display: block;
				font-size: 0.26em;
				letter-spacing: -0.04em;
				font-weight: 400;
			}
		}

		& .media.logo {
			width: 2.86em;
			margin: auto;
			margin-bottom: 0.48em;
			backface-visibility: hidden;
			transform: translate3d(0, 0, 0);
		}

		& .r2-title {
			text-align: center;
			color: #ffffff;
			max-width: 2.8em;
			line-height: 0.36em;
			margin: auto;

			& .split-lines {
				padding: 0.2em 0;
				margin: -0.4em 0;
				overflow: hidden;
			}

			& span {
				display: block;
				font-size: 0.26em;
				letter-spacing: -0.04em;
				font-weight: 400;
			}
		}

		& .v-title {
			text-align: center;
			color: #ffffff;
			line-height: 0.2em;

			& span {
				display: block;
				font-size: 0.16em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}
		}

		& .visual-frame {
			display: block;
			position: absolute;
			z-index: 2;
			transform: translate3d(-50%, -50%, 0);
			top: 50%;
			left: 50%;
			width: 13.12em;
			height: 7.12em;

			@media screen and (max-width: 768px) and (orientation: portrait) {
				transform: translate3d(-50%, -50%, 0) scale(0.65);
			}

			/*  */
			& .node-frame {
				display: block;
				position: absolute;
				transform: translate(0, -50%);
				top: 50%;
				left: 0.77em;
				width: 6.28em;
				height: 5.5em;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					transform: translate(-50%, -50%);
					left: 50%;
				}

				& .media {
					aspect-ratio: 1;
					position: absolute;
					/* pointer-events: none; */
					top: calc(50% - 1.5em);
					left: calc(50% - 1.5em);
					width: 3em;
				}

				& .media.lines {
					position: absolute;
					transform: translate(-50%, -50%);
					top: 50%;
					left: 50%;
					width: 100%;

					& svg {
						display: block;
						width: 100%;
					}
				}
			}

			/* */
			& .text-frame {
				position: absolute;
				transform: translate(0, -50%);
				top: 50%;
				right: 0.9em;
				width: 3.74em;
				height: 1em;

				@media screen and (max-width: 768px) and (orientation: portrait) {
					transform: translate(-50%, -50%);
					top: auto;
					right: auto;
					left: 50%;
					bottom: -0.6em;
				}

				& .n-text {
					position: absolute;
					transform: translate(-50%, -50%);
					top: 50%;
					left: 50%;
				}

				& .n-text {
					width: 100%;
					text-align: center;
					color: #ffffff;
					line-height: 0.3em;

					& .split-lines {
						padding: 0.2em 0;
						margin: -0.4em 0;
						overflow: hidden;
					}

					& .split-words {
						transform-origin: 50% 50%;
					}

					& span {
						display: block;
						font-size: 0.26em;
						letter-spacing: -0.04em;
						font-weight: 400;
					}
				}

				& .n-text.break-3 {
					top: calc(50% + 0.4em);
				}
			}
		}

		& .r2-container {
			z-index: 3;

			@media screen and (max-width: 1024px) and (orientation: portrait) {
				font-size: 69px;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				font-size: 20vw;
				max-width: 3.5em;
			}
		}

		/* sprites */
		& .sprite-frame {
			display: block;
			position: absolute;
			z-index: 1;
			pointer-events: none;
			backface-visibility: hidden;
			transform: translateX(-50%);
			top: 0;
			left: 50%;
			width: 100%;
			max-width: 14.4em;
			height: 100%;

			& .sprite {
				position: absolute;
				display: block;
			}

			& .sprite svg {
				display: block;
				width: 0.38em;
			}

			/* positions */
			& .sprite:nth-child(1) {
				top: 1.6em;
				left: 0.68em;
			}
			& .sprite:nth-child(2) {
				top: 0.93em;
				left: 3.67em;
			}
			& .sprite:nth-child(3) {
				top: 1.02em;
				right: 4.77em;
			}
			& .sprite:nth-child(4) {
				top: 1.1em;
				left: 1.2em;
			}
			& .sprite:nth-child(5) {
				bottom: 0.86em;
				left: 0.68em;
			}
			& .sprite:nth-child(6) {
				bottom: 4.25em;
				left: 3.46em;
			}
			& .sprite:nth-child(7) {
				top: 3.29em;
				right: 2.72em;
			}
			& .sprite:nth-child(8) {
				top: 3.8em;
				right: 0.6em;
			}
			& .sprite:nth-child(9) {
				bottom: 1.26em;
				left: 1.97em;
			}
			& .sprite:nth-child(10) {
				bottom: 2em;
				right: 1.24em;
			}
			& .sprite:nth-child(11) {
				bottom: 0.88em;
				right: 1.9em;
			}
		}
	}

	/* our clients */
	& .our-clients {
		display: block;
		position: relative;
		padding: 1.84em 0 1.6em;

		@media screen and (max-width: 1024px) and (orientation: portrait) {
			padding: 1em 0;
			font-size: 0.69em;
		}

		@media screen and (max-width: 768px) and (orientation: portrait) {
			font-size: inherit;
		}

		& .cnt {
			margin-bottom: 1.04em;
		}

		& .r2-title {
			color: #ffffff;
			line-height: 0.52em;
			margin-bottom: 0.08em;

			& span {
				display: block;
				font-size: 0.48em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				line-height: 0.46em;
				margin-bottom: 0.15em;

				& span {
					font-size: 0.45em;
				}
			}
		}

		& .r2-text {
			color: #ffffff;
			line-height: 0.36em;

			& span {
				display: block;
				font-size: 0.26em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				line-height: 0.26em;

				& span {
					font-size: 0.25em;
				}
			}
		}

		& .swiper {
			position: relative;
			width: calc(100% + 1.2em);

			&::before {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 1em;
				height: 100%;
				background: linear-gradient(
					270deg,
					rgba(19, 56, 64, 1) 53%,
					rgba(19, 56, 64, 0) 100%
				);
			}

			& .swiper-wrapper {
				transition-timing-function: linear;
				align-items: center;
			}

			& .swiper-slide {
				padding-right: 1.38em;
			}

			& .media {
				transform: translate3d(0, 0, 0);
				backface-visibility: hidden;

				& img,
				video {
					max-height: 100%;
					backface-visibility: hidden;
				}
			}

			@media screen and (max-width: 1024px) and (orientation: portrait) {
				width: calc(100% + 0.88em);
				left: -0.44em;
				padding-left: 0.44em;

				& .swiper-slide {
					padding-right: 0.69em;
				}
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				& .swiper-slide {
					padding-right: 0.66em;
				}
			}
		}
	}

	/* our impact */
	& .our-impact {
		display: block;
		position: relative;
		padding: 1.2em 0 0.72em;
		background-color: #fff;

		@media screen and (max-width: 1024px) and (orientation: portrait) {
			font-size: 0.69em;
		}

		@media screen and (max-width: 768px) and (orientation: portrait) {
			font-size: inherit;
		}

		& .cnt {
			margin-bottom: 0.56em;
		}

		& .r2-title {
			color: var(--midnight-green);
			line-height: 0.52em;
			margin-bottom: 0.08em;

			& span {
				display: block;
				font-size: 0.48em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				line-height: 0.46em;
				margin-bottom: 0.15em;

				& span {
					font-size: 0.45em;
				}
			}
		}

		& .r2-text {
			color: var(--midnight-green);
			line-height: 0.36em;

			& span {
				display: block;
				font-size: 0.26em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				line-height: 0.26em;

				& span {
					font-size: 0.25em;
				}
			}
		}

		& .cards {
			display: flex;
			gap: 0.3em;

			& .card {
				flex: 1;
				aspect-ratio: 1;
				display: flex;
				border-radius: 0.25em;
				background-color: var(--white);
				align-items: center;
				justify-content: center;
				text-align: center;

				&.color-1 {
					background-color: var(--green-1);
				}

				&.color-2 {
					background-color: var(--non-photo-blue);
				}

				&.color-3 {
					background-color: var(--tomato);

					& .c-num,
					& .c-text {
						color: #ffffff;
					}
				}

				&.color-4 {
					background-color: var(--green-3);

					& .c-text {
						color: #ffffff;
					}
				}

				& > div {
					max-width: 1.82em;
				}
			}

			& .c-text {
				color: var(--green-4);
				line-height: 0.24em;

				&:first-child {
					margin-bottom: 0.08em;
				}

				& span {
					display: block;
					font-size: 0.16em;
					letter-spacing: -0.03em;
					font-weight: 400;
				}
			}

			& .c-num {
				color: var(--tomato);
				line-height: 0.68em;
				margin-bottom: 0.08em;

				& span {
					display: block;
					font-size: 0.72em;
					letter-spacing: -0.03em;
					font-weight: 500;
				}
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				flex-wrap: wrap;
				gap: 0.16em;

				& .card {
					padding: 0.2em;
				}

				& .c-num {
					& span {
						font-size: 0.5em;
					}
				}

				& .c-text {
					line-height: 0.18em;
				}
			}
		}
	}

	/* value section */
	& .value-section {
		display: block;
		position: relative;
		padding: 1.2em 0;
		background-color: #ffffff;

		@media screen and (max-width: 1024px) and (orientation: portrait) {
			font-size: 0.69em;
		}

		@media screen and (max-width: 768px) and (orientation: portrait) {
			font-size: inherit;
		}

		/*  */
		& .r2-label {
			color: var(--midnight-green);
			line-height: 0.16em;
			margin-bottom: 0.16em;

			& span {
				display: block;
				font-size: 0.12em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}
		}

		/*  */
		& .r2-title {
			color: var(--midnight-green);
			padding-top: 0.08em;
			line-height: 0.56em;

			& span {
				display: block;
				font-size: 0.48em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}
		}

		/*  */
		& .r2-text {
			display: flex;
			gap: 0.16em;
			align-items: center;
			color: var(--midnight-green);
			line-height: 0.56em;
			margin-bottom: 0.16em;

			& span {
				display: block;
				font-size: 0.26em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}

			& .media.logo {
				top: -0.01em;
				width: 1.56em;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				& .media.logo {
					top: -0.02em;
					width: 1.26em;
				}
			}
		}

		/*  */
		& .c-text {
			color: var(--midnight-green);
			line-height: 0.24em;

			& span {
				display: block;
				font-size: 0.16em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}
		}

		/*  */
		& .layout {
			display: flex;
			gap: 0.56em;

			@media screen and (max-width: 768px) and (orientation: portrait) {
				display: block;

				& .inner:first-child {
					width: 100%;
					margin-bottom: 0.5em;
				}

				& .inner:last-child {
					width: 100%;
				}
			}
		}

		& .inner:first-child {
			width: 3.54em;
		}

		& .inner:last-child {
			flex: 1;
		}

		/*  */
		& .inner-layout {
			display: flex;
			gap: 0.3em;

			& > div {
				flex: 1;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				display: block;

				& > div {
					width: 100%;

					&:not(:last-child) {
						margin-bottom: 0.26em;
					}
				}
			}
		}

		/*  */
		& .card {
			display: flex;
			align-items: flex-start;
			gap: 0.16em;
			border: 0.01em solid var(--white);
			border-radius: 0.08em;
			padding: 0.16em;
			min-height: 0.8em;

			&.red {
				border-color: var(--tomato);
			}

			&.green {
				border-color: var(--midnight-green);
			}

			&:not(:last-child) {
				margin-bottom: 0.16em;
			}

			& .c-text {
				/* flex-shrink: 0; */
			}

			& svg {
				display: block;
				flex-shrink: 0;
				width: 0.24em;
			}
		}
	}

	/* business section */
	& .business-section {
		display: block;
		position: relative;
		padding: 1.84em 0 3em;

		@media screen and (max-width: 1024px) and (orientation: portrait) {
			font-size: 0.69em;
		}

		@media screen and (max-width: 768px) and (orientation: portrait) {
			font-size: inherit;
			padding: 1.2em 0;
		}

		/*  */
		& .title-frame {
			margin-bottom: 0.62em;
		}

		& .r2-title {
			color: #ffffff;
			line-height: 0.52em;

			&.secondary {
				max-width: 3em;
			}

			& span {
				display: block;
				font-size: 0.48em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				line-height: 0.46em;

				& span {
					font-size: 0.45em;
				}
			}
		}

		/*  */
		& .visual {
			display: block;
			margin-bottom: 1.84em;

			@media screen and (max-width: 768px) and (orientation: portrait) {
				margin-bottom: 1em;
			}

			& img {
				display: block;
				width: 100%;
			}
		}

		/*  */
		& .icons-block {
			display: flex;
			gap: 0.3em;

			& > div {
				flex: 1;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				display: block;
				margin-bottom: 1em;

				& > div {
					width: 100%;
					margin-bottom: 0.8em;
				}
			}
		}

		/*  */
		& .r2-list {
			display: block;

			& .l-text {
				color: #ffffff;
				line-height: 0.34em;

				& span {
					display: block;
					font-size: 0.26em;
					letter-spacing: -0.03em;
					font-weight: 400;
				}

				@media screen and (max-width: 768px) and (orientation: portrait) {
					line-height: 0.3em;
					padding-top: 0.02em;

					& span {
						font-size: 0.2em;
					}
				}
			}

			& .r2-row {
				display: flex;
				gap: 0.2em;
				padding-bottom: 0.32em;

				&:not(:last-child) {
					border-bottom: 0.01em solid var(--caribbean-current);
				}

				&:not(:first-child) {
					padding-top: 0.32em;
				}

				& .media {
					width: 0.48em;
				}

				& .l-text {
					flex: 1;
				}
			}
		}
	}

	/* news section */
	& .latest-news-section {
		padding-bottom: 4.46em;

		& .r2-title {
			color: #ffffff;
			line-height: 0.77em;
			max-width: 7.16em;

			& span {
				display: block;
				font-size: 0.72em;
				letter-spacing: -0.03em;
				font-weight: 400;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				line-height: 0.46em;

				& span {
					font-size: 0.45em;
				}

				& .split-lines {
					padding-top: 0.6em;
					margin-bottom: -0.9em;
				}
			}
		}

		/*  */
		& .news-block {
			display: flex;
			position: relative;
			align-items: center;
			justify-content: space-between;

			@media screen and (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
				transform: scale(0.6);
				width: 160%;
				left: -30%;
			}

			& .positioning {
				font-size: 0.9em;

				@media screen and (max-width: 1024px) and (orientation: portrait) {
					transform: translate3d(-1.15em, 0, 0);
				}

				@media screen and (max-width: 768px) and (orientation: portrait) {
					transform: none;
				}
			}

			& .title-wrap {
				position: absolute;
				top: 0.18em;
				left: 0;

				& .r2-title {
					margin-bottom: 0.42em;
				}

				& .r2-socials {
					display: flex;
					align-items: center;
					gap: 0.18em;

					& .r2-social {
						display: block;
						width: fit-content;
						max-width: 0.22em;

						& .media {
							display: block;
							width: fit-content;
						}

						& svg path {
							transition: fill var(--duration) var(--ease);
							fill: #fff;
						}

						&:hover svg path {
							fill: var(--orange);
						}
					}
				}

				@media screen and (max-width: 768px) and (orientation: portrait) {
					margin-bottom: 0.8em;

					& .r2-title {
						margin-bottom: 0.32em;
					}
				}
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				display: block;
			}

			@media screen and (max-width: 768px) and (orientation: portrait) {
				& .title-wrap {
					position: relative;
					top: 0;
				}
			}
		}

		/*  */
		& .frame {
			position: relative;
			border-radius: 0.25em;
			padding: 0.48em;
			background-color: var(--white);

			@media screen and (max-width: 768px) and (orientation: portrait) {
				position: relative;

				&:not(:last-child) {
					margin-bottom: 0.4em;
				}
			}

			& .swiper {
				& .swiper-wrapper {
					margin-bottom: 0.24em;
				}

				& .pagination {
					display: flex;
					align-items: center;
					gap: 0.05em;
				}

				& .dot {
					display: block;
					transition: background-color var(--ease) var(--duration);
					width: 0.3em;
					height: 0.01em;
					background-color: rgba(20, 56, 64, 0.2);

					&.active {
						background-color: var(--tomato);
					}
				}

				& .cnt .s-title {
					margin-bottom: 0;
				}
			}

			& a:not(:last-child) .cnt {
				margin-bottom: 0.3em;
				border-bottom: 0.01em solid rgba(255, 255, 255, 0.2);
			}

			& .cnt {
				& .s-date {
					color: var(--midnight-green);
					line-height: 0.16em;
					opacity: 0.7;
					margin-bottom: 0.08em;

					& span {
						display: block;
						font-size: 0.12em;
						letter-spacing: -0.03em;
						font-weight: 400;
					}
				}

				& .s-title {
					display: block;
					color: var(--midnight-green);
					line-height: 0.22em;
					margin-bottom: 0.08em;

					& span {
						display: block;
						font-size: 0.18em;
						letter-spacing: -0.03em;
						font-weight: 400;
					}
				}

				& .s-text {
					color: var(--midnight-green);
					line-height: 0.22em;
					min-height: 0.88em;

					& span {
						display: block;
						font-size: 0.16em;
						letter-spacing: -0.03em;
						font-weight: 400;
					}
				}
			}

			& .f-title {
				display: block;
				line-height: 0.42em;
				padding-bottom: 0.24em;
				border-bottom: 0.01em solid transparent;
				margin-bottom: 0.2em;

				& > span {
					display: block;
					font-size: 0.42em;
					letter-spacing: -0.03em;
					font-weight: 400;
				}

				& .btn {
					display: block;
					width: fit-content;
					transition:
						color var(--ease) var(--duration),
						background-color var(--ease) var(--duration);
					line-height: 0.11em;
					text-align: center;
					background-color: var(--tomato);
					padding: 0.11em 0.16em 0.08em;
					border-radius: 0.14em;
					color: #fff;
					margin-top: 0.24em;

					& > span {
						display: block;
						font-size: 0.16em;
						letter-spacing: -0.03em;
						font-weight: 400;
					}
				}

				@media screen and (max-width: 768px) and (orientation: portrait) {
					align-items: flex-start;

					& .btn {
						position: relative;
						z-index: 1;
						white-space: nowrap;
					}
				}
			}
		}

		& .events-frame {
			width: 3.8em;
			background-color: #ffffff;

			@media screen and (max-width: 768px) and (orientation: portrait) {
				top: 0;
				left: 0;
				width: 100%;
				height: auto;
			}

			& .f-title {
				color: var(--midnight-green);
				border-color: rgba(20, 56, 64, 0.2);

				& .btn {
					color: #ffffff;
					background-color: var(--tomato);

					&:hover {
						background-color: var(--white);
						color: var(--tomato);
					}
				}
			}
		}

		& .latest-frame {
			width: 3.8em;
			padding-bottom: 0.4em;
			background-color: var(--tomato);

			@media screen and (max-width: 768px) and (orientation: portrait) {
				top: 0;
				left: 0;
				width: 100%;
				height: auto;
			}

			& .f-title {
				color: #ffffff;
				line-height: 0.42em;
				border-color: rgba(255, 255, 255, 0.2);

				& .btn {
					color: var(--midnight-green);
					background-color: #ffffff;

					&:hover {
						background-color: var(--midnight-green);
						color: #ffffff;
					}
				}

				@media screen and (max-width: 768px) and (orientation: portrait) {
					& > span {
						font-size: 0.32em;
					}
				}
			}

			& .cnt {
				& .s-date {
					color: rgba(255, 255, 255, 0.7);
				}
				& .s-title {
					color: rgba(255, 255, 255, 1);
				}
			}
		}

		& .leadership-frame {
			width: 3.8em;
			background-color: #2b6264;
			background: linear-gradient(
				150deg,
				rgba(43, 98, 100, 1) 35%,
				rgba(33, 64, 70, 1) 100%
			);

			@media screen and (max-width: 768px) and (orientation: portrait) {
				top: 0;
				left: 0;
				width: 100%;
				height: auto;
			}

			& .f-title {
				color: #ffffff;
				border-color: rgba(255, 255, 255, 0.2);
				padding-bottom: 0.27em;

				& .btn {
					color: var(--midnight-green);
					background-color: #ffffff;

					&:hover {
						background-color: var(--midnight-green);
						color: #ffffff;
					}
				}

				@media screen and (max-width: 768px) and (orientation: portrait) {
					& > span {
						font-size: 0.32em;
					}
				}
			}

			& .cnt {
				margin-bottom: 0;

				& .s-date {
					color: rgba(255, 255, 255, 0.7);
					margin-bottom: 0.16em;
				}
				& .s-title {
					color: rgba(255, 255, 255, 1);
				}
			}

			& .swiper {
				& .pagination {
					justify-content: flex-end;
				}

				& .dot {
					background-color: rgba(158, 207, 209, 0.2);
				}
			}
		}
	}
}