/* Orion Mission & Vision — about-us.html `.story` section.
   Breakpoints: sm=640, md=768 (HTML Tailwind md), lg=992, xl=1199, 1xl=1380, 2xl=1752. */

.orion-mv {
	position: relative;
	z-index: 20;
	margin-bottom: 40px;
	/* Do not clip here — overflow lives on __inner like HTML `.story`. */
	overflow: visible;
	width: 100%;
}
@media (min-width: 640px)  { .orion-mv { margin-bottom: 50px; } }
@media (min-width: 992px)  { .orion-mv { margin-bottom: 70px; } }
@media (min-width: 1380px) { .orion-mv { margin-bottom: 80px; } }
@media (min-width: 1752px) { .orion-mv { margin-bottom: 100px; } }

.orion-mv__inner {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}
/* Project md = 769 (same as HTML compiled `md:` in this theme). */
@media (min-width: 769px) {
	.orion-mv__inner { flex-direction: row; }
}

.orion-mv__media {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 880 / 640;
	overflow: hidden;
	flex-shrink: 0;
}
/* HTML: `md:absolute … md:w-[41%] md:h-[80%] md:top-1/2 md:-translate-y-1/2` */
@media (min-width: 769px) {
	.orion-mv__media {
		width: 41%;
		max-width: none;
		position: absolute;
		aspect-ratio: auto;
		height: 80%;
		top: 50%;
		left: 0;
		right: auto;
		bottom: auto;
		transform: translateY(-50%);
		margin: 0;
	}
}
@media (min-width: 992px) {
	.orion-mv__media {
		width: 46.2%;
	}
}

/* Absolute fill inside media — beats Elementor `.elementor img { height:auto }`. */
.orion-mv__media .orion-mv__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

.orion-mv__box {
	position: relative;
	width: 100%;
	background-color: #F6F6F6;
	padding: 30px 0;
	margin-left: auto;
	margin-right: 0;
	z-index: 0;
}
/* HTML: `md:w-[73%] md:py-14 md:pl-40` */
@media (min-width: 769px) {
	.orion-mv__box {
		width: 73%;
		padding: 56px 0 56px 160px;
		margin-left: auto;
		margin-right: 0;
	}
}
@media (min-width: 992px) {
	.orion-mv__box {
		width: 74%;
		padding-top: 96px;
		padding-bottom: 96px;
		padding-left: 240px;
	}
}
@media (min-width: 1199px) {
	.orion-mv__box { padding-left: 320px; }
}
@media (min-width: 1380px) {
	.orion-mv__box { padding-top: 120px; padding-bottom: 120px; }
}
@media (min-width: 1752px) {
	.orion-mv__box {
		padding-top: 145px;
		padding-bottom: 145px;
		padding-left: 450px;
	}
}

.orion-mv__container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 815px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}
@media (min-width: 769px) {
	.orion-mv__container { margin-left: 0; padding: 0; }
}

/* HTML global h2. */
h2.orion-mv__title {
	margin: 0 0 16px;
	font-family: "El Messiri", serif;
	font-weight: 500;
	color: #000;
	font-size: 26px;
	line-height: 36px;
}
@media (min-width: 640px) {
	h2.orion-mv__title { margin-bottom: 20px; font-size: 30px; line-height: 40px; }
}
@media (min-width: 769px) {
	h2.orion-mv__title { font-size: 35px; line-height: 40px; }
}
@media (min-width: 1199px) {
	h2.orion-mv__title { font-size: 40px; line-height: 50px; }
}
@media (min-width: 1380px) {
	h2.orion-mv__title { font-size: 46px; line-height: 55px; }
}
@media (min-width: 1752px) {
	h2.orion-mv__title { font-size: 60px; line-height: 70px; }
}

p.orion-mv__desc {
	margin: 0 0 25px;
	/* Beat Elementor `{{WRAPPER}} .orion-mv__desc { color: var(--orion-text) }`. */
	color: #464343;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	/* HTML: `leading-7` until xl, then `xl:leading-[30px]` */
	line-height: 28px;
}
@media (min-width: 992px) {
	p.orion-mv__desc { font-size: 15px; }
}
@media (min-width: 1199px) {
	p.orion-mv__desc { margin-bottom: 28px; line-height: 30px; }
}
@media (min-width: 1752px) {
	p.orion-mv__desc { font-size: 18px; line-height: 32px; }
}

.orion-mv__list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
@media (min-width: 640px) {
	.orion-mv__list { padding-left: 33px; }
}
@media (min-width: 1199px) {
	.orion-mv__list { margin-bottom: 40px; }
}

.orion-mv__list li {
	display: flex;
	align-items: flex-start;
	position: relative;
	gap: 0;
}

/* Match HTML `.custom-list li::before` — icon in the padding gutter so text keeps full width.
   Path uses fill="currentColor", so set `color` (not only `fill` on the <svg>). */
.orion-mv__list svg {
	position: absolute;
	left: -23px;
	top: 0.25em;
	flex-shrink: 0;
	width: 16.5px;
	height: 16.5px;
	margin-top: 0;
	color: var(--orion-primary);
	fill: var(--orion-primary);
}
.orion-mv__list svg path {
	fill: currentColor;
}
@media (min-width: 640px) {
	.orion-mv__list svg {
		left: -28.8px;
		width: 18px;
		height: 18px;
	}
}
@media (min-width: 1199px) {
	.orion-mv__list svg {
		width: 19px;
		height: 19px;
	}
}
@media (min-width: 1380px) {
	.orion-mv__list svg {
		width: 20px;
		height: 20px;
	}
}

.orion-mv__list p {
	margin: 0;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
	color: #000;
	width: 100%;
}
@media (min-width: 992px) {
	.orion-mv__list p { font-size: 15px; line-height: 25px; }
}
@media (min-width: 1199px) {
	.orion-mv__list p { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-mv__list p { font-size: 18px; line-height: 32px; }
}

.orion-mv__cta {
	display: inline-flex;
}

/* Keep Elementor parent full-bleed so the image can sit at viewport left:0. */
.e-con.e-flex:has(> .elementor-widget-orion-mission-vision) {
	--flex-wrap: nowrap;
	flex-wrap: nowrap;
	--padding-left: 0px;
	--padding-right: 0px;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
	max-width: 100%;
}
.elementor-widget-orion-mission-vision {
	width: 100%;
	max-width: 100%;
}
.elementor-widget-orion-mission-vision > .elementor-widget-container {
	height: auto;
	width: 100%;
	max-width: 100%;
	padding: 0;
}