/* Orion Projects — matches the real ".our-work-section" / ".project-slider"
   markup exactly, using this project's real breakpoints:
   sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752. */
.orion-projects {
	width: 100%;
	position: relative;
	z-index: 1;
	background-color: #fff;
	margin-bottom: 32px;
}
@media (min-width: 769px) { .orion-projects { margin-bottom: 50px; } }
@media (min-width: 992px) { .orion-projects { margin-bottom: 60px; } }
@media (min-width: 1380px) { .orion-projects { margin-bottom: 80px; } }
@media (min-width: 1752px) { .orion-projects { margin-bottom: 100px; } }

/* Real .container schedule, scoped — the bare .container class is reset
   to max-width:none by a legacy ".elementor-page .container" rule in
   style.css, so layout_1/3 (which use the real .container in their
   reference pages) use this scoped copy instead. layout_2 keeps the
   site's own .container-2 class, which it really uses in index-2.html. */
.orion-projects__inner {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px)  { .orion-projects__inner { max-width: 640px; } }
@media (min-width: 769px)  { .orion-projects__inner { max-width: 769px; } }
@media (min-width: 992px)  { .orion-projects__inner { max-width: 992px; } }
@media (min-width: 1199px) { .orion-projects__inner { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-projects__inner { max-width: 1380px; } }
@media (min-width: 1752px) { .orion-projects__inner { max-width: 1752px; } }

/* Listing page container py: py-[34px] sm:py-[38px] md:py-[50px] xl:py-[70px].
   Section margin-bottom is zeroed — spacing comes from this padding like HTML. */
.orion-projects.layout_1[data-load-more] {
	margin-bottom: 0;
}
.orion-projects.layout_1[data-load-more] .orion-projects__inner {
	padding-top: 34px;
	padding-bottom: 34px;
}
@media (min-width: 640px) {
	.orion-projects.layout_1[data-load-more] .orion-projects__inner {
		padding-top: 38px;
		padding-bottom: 38px;
	}
}
@media (min-width: 769px) {
	.orion-projects.layout_1[data-load-more] .orion-projects__inner {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}
@media (min-width: 1199px) {
	.orion-projects.layout_1[data-load-more] .orion-projects__inner {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}

/* layout_3 additionally nests a "max-w-[1253px] mx-auto relative" wrapper
   around the sticky header, cards, and footer button. */
.orion-projects__narrow {
	width: 100%;
	max-width: 1253px;
	margin: 0 auto;
	position: relative;
}

/* Layout 2 section background — HTML bg-gray-300 (#f2f2f2) on the section
   itself (.orion-projects.layout_2), not the Elementor widget wrapper.
   Listing grid mode (projects-2.html) stays white — see .orion-projects--grid. */
.orion-projects.layout_2:not(.orion-projects--grid):not([data-load-more]) {
	background-color: #f2f2f2;
}
.orion-projects.layout_2:not(.orion-projects--grid) {
	padding: 40px 0;
}
@media (min-width: 769px)  { .orion-projects.layout_2:not(.orion-projects--grid) { padding: 60px 0; } }
@media (min-width: 992px)  { .orion-projects.layout_2:not(.orion-projects--grid) { padding: 65px 0; } }
@media (min-width: 1199px) { .orion-projects.layout_2:not(.orion-projects--grid) { padding: 60px 0; } }
@media (min-width: 1380px) { .orion-projects.layout_2:not(.orion-projects--grid) { padding: 75px 0; } }
@media (min-width: 1752px) { .orion-projects.layout_2:not(.orion-projects--grid) { padding: 90px 0; } }


.orion-projects__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 20px;
}
@media (min-width: 640px) { .orion-projects__header { margin-bottom: 30px; } }
@media (min-width: 769px) { .orion-projects__header { margin-bottom: 36px; } }
@media (min-width: 1199px) { .orion-projects__header { margin-bottom: 40px; } }

/* Layout 1 stacks the header below 640px ("sm:flex" in the reference). */
.layout_1 .orion-projects__header { display: block; }
@media (min-width: 640px) { .layout_1 .orion-projects__header { display: flex; } }

/* Listing page (projects.html): title mb schedule on the header —
   mb-5 / sm:mb-6 / md:mb-8 / lg:mb-10 / 1xl:mb-[50px] / 2xl:mb-[60px]. */
.orion-projects.layout_1[data-load-more] .orion-projects__header {
	display: block;
	margin: 0 0 20px;
}
@media (min-width: 640px)  { .orion-projects.layout_1[data-load-more] .orion-projects__header { margin-bottom: 24px; } }
@media (min-width: 769px)  { .orion-projects.layout_1[data-load-more] .orion-projects__header { margin-bottom: 32px; } }
@media (min-width: 992px)  { .orion-projects.layout_1[data-load-more] .orion-projects__header { margin-bottom: 40px; } }
@media (min-width: 1380px) { .orion-projects.layout_1[data-load-more] .orion-projects__header { margin-bottom: 50px; } }
@media (min-width: 1752px) { .orion-projects.layout_1[data-load-more] .orion-projects__header { margin-bottom: 60px; } }

.orion-projects__viewall-wrap { display: none; align-items: center; justify-content: flex-end; }
@media (min-width: 640px) { .orion-projects__viewall-wrap { display: flex; } }

/* Below 640px the button is repeated under the slider instead. */
.orion-projects__viewall-mobile { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
@media (min-width: 640px) { .orion-projects__viewall-mobile { display: none; } }

/* The theme's generic ".btn" loads after the utility sheet and flattens the
   responsive padding, so the button box is restated on the component class. */
.orion-projects__viewall {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	white-space: nowrap;
	text-align: start;
	font-family: var(--font-lexend, Lexend, sans-serif);
	font-weight: 400;
	line-height: 24px;
	letter-spacing: normal;
	font-size: 14px;
}
@media (min-width: 1199px) { .orion-projects__viewall { font-size: 15px; } }
@media (min-width: 1752px) { .orion-projects__viewall { font-size: 18px; } }

.orion-projects__header-left { display: flex; flex-direction: column; }
.orion-projects__label { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #666; margin-bottom: 5px; }
/* HTML global h2 schedule (beats Customizer --orion-h2-size / --orion-h1-size).
   text-[26px] sm:text-3xl md:text-[35px] xl:text-4xl(40) 1xl:text-[46px] 2xl:text-5xl(60) */
html body h1.orion-projects__title,
html body h2.orion-projects__title,
.orion-projects__title {
	margin: 0;
	color: #000;
	font-family: var(--orion-font-heading, "El Messiri", serif);
	font-weight: 500;
	font-size: 26px;
	line-height: 36px;
	letter-spacing: normal;
	text-transform: none;
}
@media (min-width: 640px) {
	html body h1.orion-projects__title,
	html body h2.orion-projects__title,
	.orion-projects__title { font-size: 30px; line-height: 40px; }
}
@media (min-width: 769px) {
	html body h1.orion-projects__title,
	html body h2.orion-projects__title,
	.orion-projects__title { font-size: 35px; line-height: 40px; }
}
@media (min-width: 1199px) {
	html body h1.orion-projects__title,
	html body h2.orion-projects__title,
	.orion-projects__title { font-size: 40px; line-height: 50px; }
}
@media (min-width: 1380px) {
	html body h1.orion-projects__title,
	html body h2.orion-projects__title,
	.orion-projects__title { font-size: 46px; line-height: 55px; }
}
@media (min-width: 1752px) {
	html body h1.orion-projects__title,
	html body h2.orion-projects__title,
	.orion-projects__title { font-size: 60px; line-height: 70px; }
}
/* Listing page: centered on mobile, left from sm+ (sm:text-start text-center). */
.orion-projects.layout_1[data-load-more] .orion-projects__title {
	text-align: center;
}
@media (min-width: 640px) {
	.orion-projects.layout_1[data-load-more] .orion-projects__title { text-align: start; }
}
p.orion-projects__subtitle { margin: 15px 0 0; color: #666; text-align: center; max-width: 600px; }
.orion-projects__nav { display: flex; gap: 10px; }
.orion-projects__nav-btn { width: 40px; height: 40px; border: 1px solid #ddd; background: #fff; border-radius: 4px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.orion-projects__nav-btn:hover { border-color: var(--orion-primary); color: var(--orion-primary); }

/* Grid Layouts — layout_1 listing (projects.html): gap-8 / xl:40 / 1xl:50,
   cols 1 / sm:2 / lg:3. */
.orion-projects__grid { display: grid; }
.orion-projects__grid--3 {
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 640px)  { .orion-projects__grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .orion-projects__grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1199px) { .orion-projects__grid--3 { gap: 40px; } }
@media (min-width: 1380px) { .orion-projects__grid--3 { gap: 50px; } }
.orion-projects__grid--4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* "Load More" AJAX button (used on standalone Projects listing pages)
   projects-2.html: mt-9 / md:mt-12 / lg:mt-15 / 1xl:mt-17 / 2xl:mt-20 */
.orion-projects__load-more-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 36px;
}
@media (min-width: 769px)  { .orion-projects__load-more-wrap { margin-top: 48px; } }
@media (min-width: 992px)  { .orion-projects__load-more-wrap { margin-top: 60px; } }
@media (min-width: 1380px) { .orion-projects__load-more-wrap { margin-top: 68px; } }
@media (min-width: 1752px) { .orion-projects__load-more-wrap { margin-top: 80px; } }

.orion-projects__load-more .animate-spin {
	display: none;
}
.orion-projects__load-more.is-loading {
	opacity: 0.7;
	pointer-events: none;
}
.orion-projects__load-more.is-loading .animate-spin {
	display: inline-block;
}

.orion-projects__load-more-error {
	color: #c0392b;
	font-size: 14px;
	text-align: center;
}

.orion-projects__load-more-done {
	color: #666;
	font-size: 14px;
	text-align: center;
}

/* Project Cards */
.orion-projects__card { background: #fff; }

/* Layout 1: Featured Projects slider — matches the real ".project-slider"
   markup (aspect-ratio image box + hover reveal arrow button). */
.orion-projects-swiper { width: 100%; overflow: visible; }

.orion-projects__group { display: block; }

.orion-projects__image {
	position: relative;
	overflow: hidden;
}
.orion-projects__image::before {
	content: '';
	display: block;
	padding-top: 110%;
}
@media (min-width: 1752px) { .orion-projects__image::before { padding-top: 112%; } }

/* Listing page (projects.html): before:pt-[104%] / sm:before:pt-[115%]. */
.orion-projects.layout_1[data-load-more] .orion-projects__image::before {
	padding-top: 104%;
}
@media (min-width: 640px) {
	.orion-projects.layout_1[data-load-more] .orion-projects__image::before { padding-top: 115%; }
}

.orion-projects__image-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
}
/* Compound selector (2 classes) needed to beat Elementor's global
   ".elementor img{height:auto;max-width:100%}" reset (0,1,1 specificity). */
.orion-projects__image .orion-projects__image-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	max-width: none;
}

.orion-projects__expand {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
	display: none;
	align-items: center;
	justify-content: center;
	color: #000;
	transition: background-color .3s ease, color .3s ease;
}
@media (min-width: 640px) { .orion-projects__expand { width: 62px; height: 62px; } }
@media (min-width: 992px) { .orion-projects__expand { top: 20px; right: 20px; } }
@media (min-width: 1199px) { .orion-projects__expand { width: 68px; height: 68px; } }
@media (min-width: 1752px) { .orion-projects__expand { width: 85px; height: 85px; } }
.orion-projects__group:hover .orion-projects__expand { display: flex; }
.orion-projects__expand:hover { background-color: #fff; color: var(--orion-primary); }
/* The reference sizes only the width and leaves the svg's own 69px height,
   so the glyph stays square and centred while the box overflows the button. */
.orion-projects__expand svg { width: 40px; height: 69px; stroke: currentColor; }
@media (min-width: 640px)  { .orion-projects__expand svg { width: 55px; } }
@media (min-width: 992px)  { .orion-projects__expand svg { width: 63px; } }
@media (min-width: 1752px) { .orion-projects__expand svg { width: 69px; } }

/* Listing name wrap: mt-4 / xl:mt-6 (home slider keeps its own schedule). */
.orion-projects__name-wrap { margin-top: 16px; }
@media (min-width: 992px) { .orion-projects__name-wrap { margin-top: 20px; } }
@media (min-width: 1752px) { .orion-projects__name-wrap { margin-top: 28px; } }
.orion-projects.layout_1[data-load-more] .orion-projects__name-wrap { margin-top: 16px; }
@media (min-width: 992px) {
	.orion-projects.layout_1[data-load-more] .orion-projects__name-wrap { margin-top: 16px; }
}
@media (min-width: 1199px) {
	.orion-projects.layout_1[data-load-more] .orion-projects__name-wrap { margin-top: 24px; }
}
@media (min-width: 1752px) {
	.orion-projects.layout_1[data-load-more] .orion-projects__name-wrap { margin-top: 24px; }
}

/* HTML `.project-name`: Lexend medium 16 → 18@xl → 22@2xl */
html body .orion-projects:not(.layout_3) h5.orion-projects__name,
.orion-projects:not(.layout_3) .orion-projects__name {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	font-family: var(--orion-font-body, Lexend, sans-serif);
	line-height: 26px;
	color: #000;
}
@media (min-width: 769px)  {
	html body .orion-projects:not(.layout_3) h5.orion-projects__name,
	.orion-projects:not(.layout_3) .orion-projects__name { line-height: 30px; }
}
@media (min-width: 1199px) {
	html body .orion-projects:not(.layout_3) h5.orion-projects__name,
	.orion-projects:not(.layout_3) .orion-projects__name { font-size: 18px; }
}
@media (min-width: 1752px) {
	html body .orion-projects:not(.layout_3) h5.orion-projects__name,
	.orion-projects:not(.layout_3) .orion-projects__name { font-size: 22px; line-height: 35px; }
}
.orion-projects__name a {
	color: inherit;
	text-decoration: none;
	font-family: inherit;
}
.orion-projects__group:hover .orion-projects__name a { color: var(--orion-primary); }

/* Layout 2: Portfolio swiper — matches the real "projects-2" swiper markup
   from index-2.html exactly. The shared component classes (.projects-2,
   .project, .project-box, .project-img-before, .project-location) are real
   hand-authored classes already compiled in orion-tailwind.css (scoped under
   the ".projects-2 .project .project-box" ancestor chain) and reused here
   as-is; only the pieces unique to this widget are defined below. The bare
   ".project-arrow" class carries an unrelated global "display:none!important"
   rule (authored for a different usage elsewhere), so a dedicated class name
   is used here instead to avoid that collision. */
.orion-proj2__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	margin: 0 0 22px;
	gap: 16px;
}
@media (min-width: 769px)  { .orion-proj2__header { margin-bottom: 32px; } }
@media (min-width: 1380px) { .orion-proj2__header { margin-bottom: 40px; } }

.orion-proj2__header-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
@media (min-width: 640px)  { .orion-proj2__header-left { gap: 16px; } }
@media (min-width: 992px)  { .orion-proj2__header-left { gap: 20px; } }
@media (min-width: 1199px) { .orion-proj2__header-left { gap: 25px; } }
@media (min-width: 1752px) { .orion-proj2__header-left { gap: 30px; } }

/* Theme/Elementor heading resets (h5/h6 size + margin) beat bare .sub-title —
   restore the real Portfolio label look from index-2.html. */
.orion-proj2__header-left .sub-title {
	margin: 0;
	font-family: var(--font-lexend, Lexend, sans-serif);
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #000;
}
@media (min-width: 640px)  { .orion-proj2__header-left .sub-title { font-size: 15px; } }
@media (min-width: 769px)  { .orion-proj2__header-left .sub-title { font-size: 16px; } }
@media (min-width: 992px)  { .orion-proj2__header-left .sub-title { font-size: 17px; } }
@media (min-width: 1380px) { .orion-proj2__header-left .sub-title { letter-spacing: 0.25em; } }
@media (min-width: 1752px) { .orion-proj2__header-left .sub-title { font-size: 20px; } }

.orion-proj2__nav { position: relative; display: flex; gap: 8px; margin-bottom: 0; }
@media (min-width: 640px) { .orion-proj2__nav { margin-bottom: 12px; } }

.orion-proj2__nav-btn.swiper-button-prev,
.orion-proj2__nav-btn.swiper-button-next { margin-top: 0; }
.orion-proj2__nav-btn::after { content: none; }
.orion-proj2__nav-btn svg { width: 100%; height: 100%; }

.orion-proj2__swiper { width: 100%; overflow: hidden; }

/* HTML index-2 (slider) cards use `!bg-white`; compiled Tailwind defaults
   this chain to #f6f6f6 — force white on the home slider only. Listing grid
   (projects-2.html) keeps #f6f6f6. */
.orion-projects.layout_2:not(.orion-projects--grid) .projects-2 .project .project-box {
	background-color: #fff;
	color: #000;
}
.orion-projects--grid .projects-2 .project .project-box {
	background-color: #f6f6f6;
	color: #000;
}

.orion-proj2__img-link { position: absolute; inset: 0; display: block; }
.orion-proj2__img { width: 100%; height: 100% !important; object-fit: cover; max-width: none; }

.orion-proj2__arrow {
	display: none;
	z-index: 1;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 55px;
	height: 55px;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: rgba(255,255,255,0.85);
	transition: background-color .3s ease, color .3s ease;
}
@media (min-width: 992px)  { .orion-proj2__arrow { top: 20px; right: 20px; } }
@media (min-width: 1199px) { .orion-proj2__arrow { width: 65px; height: 65px; } }
@media (min-width: 1752px) { .orion-proj2__arrow { width: 80px; height: 80px; } }
.project-box:hover .orion-proj2__arrow { display: flex; }
.orion-proj2__arrow:hover { background-color: #fff; color: var(--orion-primary); }

.orion-proj2__arrow-svg { width: 55%; height: 55%; flex-shrink: 0; }

/* HTML: p2 !tracking-[0.8px] !font-medium uppercase text-primary-900 */
.orion-proj2__location,
p.orion-proj2__location {
	margin: 0 0 18px;
	font-family: var(--orion-font-body, Lexend, sans-serif);
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 150%;
}
@media (min-width: 769px) {
	.orion-proj2__location,
	p.orion-proj2__location { font-size: 14px; }
}
@media (min-width: 1752px) {
	.orion-proj2__location,
	p.orion-proj2__location { font-size: 16px; }
}

/* HTML bare h4: text-xl(20) → md:text-2xl(22) → xl:text-[24px] → 2xl:text-3xl(30) */
html body h4.orion-proj2__title-wrap,
.project-box .orion-proj2__title-wrap {
	margin: 0 0 12px;
	font-family: var(--orion-font-heading, "El Messiri", serif);
	font-size: 20px;
	line-height: 28px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	color: #000;
}
@media (min-width: 769px) {
	html body h4.orion-proj2__title-wrap,
	.project-box .orion-proj2__title-wrap { font-size: 22px; line-height: 32px; }
}
@media (min-width: 1199px) {
	html body h4.orion-proj2__title-wrap,
	.project-box .orion-proj2__title-wrap { font-size: 24px; line-height: 32px; }
}
@media (min-width: 1380px) {
	html body h4.orion-proj2__title-wrap,
	.project-box .orion-proj2__title-wrap { line-height: 36px; }
}
@media (min-width: 1752px) {
	html body h4.orion-proj2__title-wrap,
	.project-box .orion-proj2__title-wrap { font-size: 30px; line-height: 42px; }
}
.orion-proj2__title-link {
	display: inline;
	text-decoration: none;
	color: inherit;
	font: inherit;
	font-family: inherit;
	font-weight: inherit;
	transition: color .3s ease;
}
.project-box:hover .orion-proj2__title-link { color: var(--orion-primary); }

/* HTML desc has no bottom margin; theme p { margin-bottom } was adding 16px. */
.project-box .project-location > p.text-gray-400,
.project-box .project-location > p.orion-proj2__desc {
	margin: 0;
	color: #464343;
}

/* ===== Layout 3 (Legacy Projects — Home Style 3) =====
   Matches index-3.html sticky stack:
   header: top-60 / sm:top-75 / md:top-85 / lg:relative
   cards:  top-45% / min-[403px]:top-233 / md:top-260 / lg:relative
   Below lg cards stay sticky and stack; at lg+ they use -25% overlap.

   Listing page (projects-3.html) overrides live under
   `.orion-projects.layout_3.orion-projects--listing` below. */

.orion-projects.layout_3 { overflow: clip; }

.layout_3 .orion-projects__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: sticky;
	top: 60px;
	z-index: 4;
	background: #fff;
	padding: 10px 0;
	margin-bottom: 22px;
	transition: all .3s ease;
}
@media (min-width: 640px)  { .layout_3 .orion-projects__header { top: 75px; } }
@media (min-width: 769px)  { .layout_3 .orion-projects__header { top: 85px; } }
@media (min-width: 992px)  { .layout_3 .orion-projects__header { position: relative; top: 0; margin-bottom: 50px; } }

.layout_3 .orion-projects__title { margin-bottom: 12px; }
@media (min-width: 769px) { .layout_3 .orion-projects__title { margin-bottom: 16px; } }
@media (min-width: 992px) { .layout_3 .orion-projects__title { margin-bottom: 20px; } }

.layout_3 .orion-projects__subtitle {
	margin: 0 auto;
	width: 100%;
	max-width: none;
	color: #464343; /* HTML text-gray-400 */
	text-align: center;
	font-weight: 300;
}
@media (min-width: 769px) { .layout_3 .orion-projects__subtitle { width: 85%; } }

.layout_3 .orion-projects__grid.orion-projects__grid--4 {
	display: block;
}

.layout_3 .orion-projects__card {
	position: sticky;
	top: 45%;
	overflow: hidden;
	border-radius: 20px; /* rounded-4xl */
	cursor: pointer;
	transition: margin-bottom .7s ease;
	z-index: 2;
	background: transparent;
}
.layout_3 .orion-projects__card:not(:last-child) { margin-bottom: 16px; }
@media (min-width: 403px)  { .layout_3 .orion-projects__card { top: 233px; } }
@media (min-width: 640px)  { .layout_3 .orion-projects__card:not(:last-child) { margin-bottom: 28px; } }
@media (min-width: 769px)  { .layout_3 .orion-projects__card { top: 260px; } }
@media (min-width: 992px)  {
	.layout_3 .orion-projects__card {
		position: relative;
		top: 0;
		border-radius: 30px; /* lg:rounded-5xl (home) */
	}
	.layout_3 .orion-projects__card:not(:last-child) { margin-bottom: -25%; }
	.layout_3 .orion-projects__card:not(:last-child):hover { margin-bottom: 40px; }
}
@media (min-width: 1199px) { .layout_3 .orion-projects__card { border-radius: 40px; } /* xl:rounded-6xl */ }

/* HTML home: before:pt-[76%] sm:54% lg:40% 2xl:45% */
.layout_3 .orion-projects__image {
	position: relative;
	height: auto;
	overflow: hidden;
}
.layout_3 .orion-projects__image::before {
	content: '';
	display: block;
	padding-top: 76%;
}
@media (min-width: 640px)  { .layout_3 .orion-projects__image::before { padding-top: 54%; } }
@media (min-width: 992px)  { .layout_3 .orion-projects__image::before { padding-top: 40%; } }
@media (min-width: 1752px) { .layout_3 .orion-projects__image::before { padding-top: 45%; } }

/* our-projects-bg:before — bottom 75% from-black/40 */
.layout_3 .orion-projects__image::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 75%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
	pointer-events: none;
	z-index: 1;
}

.layout_3 .orion-projects__image img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	z-index: 0;
}

.layout_3 .orion-projects__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 16px; /* p-4 */
	color: #fff;
	background: transparent;
	z-index: 2;
}
/* Overlay gradient layer: to-black opacity-20, h-[80%] bottom */
.layout_3 .orion-projects__overlay::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80%;
	background: linear-gradient(to bottom, transparent, #000);
	opacity: 0.2;
	pointer-events: none;
	z-index: 0;
}
@media (min-width: 640px)  { .layout_3 .orion-projects__overlay { padding: 20px; } }
@media (min-width: 769px)  { .layout_3 .orion-projects__overlay { padding: 32px; } }
@media (min-width: 992px)  { .layout_3 .orion-projects__overlay { padding: 40px; } }
@media (min-width: 1752px) { .layout_3 .orion-projects__overlay { padding: 50px; } }

.layout_3 .orion-projects__arrow {
	align-self: flex-end;
	width: 55px;
	height: 55px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .3s ease;
	position: relative;
	z-index: 1;
}
@media (min-width: 769px)  { .layout_3 .orion-projects__arrow { width: 65px; height: 65px; } }
@media (min-width: 1199px) { .layout_3 .orion-projects__arrow { width: 70px; height: 70px; } }
@media (min-width: 1752px) { .layout_3 .orion-projects__arrow { width: 85px; height: 85px; } }
.layout_3 .orion-projects__card:hover .orion-projects__arrow { opacity: 1; }

.layout_3 .orion-projects__arrow svg {
	width: 40px;
	height: 40px;
	color: #000;
}
@media (min-width: 640px)  { .layout_3 .orion-projects__arrow svg { width: 55px; height: 55px; } }
@media (min-width: 992px)  { .layout_3 .orion-projects__arrow svg { width: 63px; height: 63px; } }
@media (min-width: 1752px) { .layout_3 .orion-projects__arrow svg { width: 69px; height: 69px; } }

.layout_3 .orion-projects__text {
	position: relative;
	z-index: 1;
	text-align: left;
}
@media (min-width: 1380px) { .layout_3 .orion-projects__text { margin-bottom: 20px; } }

/* Location — HTML .sub-title + page overrides:
   index-3: !tracking-normal !font-normal
   projects-3 listing: tracking-normal font-light */
.layout_3 .orion-projects__location,
html body .layout_3 p.orion-projects__location {
	display: block;
	margin: 0 0 6px;
	font-family: var(--orion-font-body, Lexend, sans-serif);
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #fff;
	opacity: 1;
}
@media (min-width: 640px)  {
	.layout_3 .orion-projects__location,
	html body .layout_3 p.orion-projects__location {
		font-size: 15px;
		margin-bottom: 12px;
	}
}
@media (min-width: 769px)  {
	.layout_3 .orion-projects__location,
	html body .layout_3 p.orion-projects__location { font-size: 16px; }
}
@media (min-width: 992px)  {
	.layout_3 .orion-projects__location,
	html body .layout_3 p.orion-projects__location { font-size: 17px; }
}
@media (min-width: 1199px) {
	.layout_3 .orion-projects__location,
	html body .layout_3 p.orion-projects__location { margin-bottom: 16px; }
}
@media (min-width: 1752px) {
	.layout_3 .orion-projects__location,
	html body .layout_3 p.orion-projects__location { font-size: 20px; }
}

/* projects-3.html listing: font-light + sm:mb-3 / mb-1.5 */
.orion-projects.layout_3.orion-projects--listing .orion-projects__location,
html body .orion-projects.layout_3.orion-projects--listing p.orion-projects__location {
	font-weight: 300;
	margin-bottom: 6px;
}
@media (min-width: 640px) {
	.orion-projects.layout_3.orion-projects--listing .orion-projects__location,
	html body .orion-projects.layout_3.orion-projects--listing p.orion-projects__location {
		margin-bottom: 12px;
	}
}
@media (min-width: 1199px) {
	.orion-projects.layout_3.orion-projects--listing .orion-projects__location,
	html body .orion-projects.layout_3.orion-projects--listing p.orion-projects__location {
		margin-bottom: 16px;
	}
}

/* Card name — HTML h3: 22 → 26@sm → 30@md → 38@1xl → 45@2xl */
html body .layout_3 h3.orion-projects__name,
.layout_3 .orion-projects__name {
	display: block;
	margin: 0;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-weight: 300 !important; /* HTML !font-light */
	font-size: 22px !important;
	line-height: 30px !important;
	color: #fff;
	text-transform: none !important;
	letter-spacing: normal !important;
}
@media (min-width: 640px)  {
	html body .layout_3 h3.orion-projects__name,
	.layout_3 .orion-projects__name { font-size: 26px !important; line-height: 32px !important; }
}
@media (min-width: 769px)  {
	html body .layout_3 h3.orion-projects__name,
	.layout_3 .orion-projects__name { font-size: 30px !important; line-height: 38px !important; }
}
@media (min-width: 1199px) {
	html body .layout_3 h3.orion-projects__name,
	.layout_3 .orion-projects__name { line-height: 40px !important; }
}
@media (min-width: 1380px) {
	html body .layout_3 h3.orion-projects__name,
	.layout_3 .orion-projects__name { font-size: 38px !important; line-height: 40px !important; }
}
@media (min-width: 1752px) {
	html body .layout_3 h3.orion-projects__name,
	.layout_3 .orion-projects__name { font-size: 45px !important; line-height: 60px !important; }
}

/* HTML: btn mx-auto — button is display:flex/fit-content (block-level), so
   text-align alone won't center it; use auto margins like mx-auto. */
.layout_3 .orion-projects__footer {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}
@media (min-width: 1199px) { .layout_3 .orion-projects__footer { margin-top: 48px; } }
.layout_3 .orion-projects__footer .orion-projects__viewall {
	margin-left: auto;
	margin-right: auto;
}

/* ── Layout 3 listing (projects-3.html) ──
   Sticky tops, radii, aspect ratios, and page padding differ from the
   home-section variant in index-3.html. */
.orion-projects.layout_3.orion-projects--listing {
	overflow: visible;
	margin-bottom: 0;
}

/* container: pb-[34px] sm:pb-[38px] lg:pt-[40px] lg:pb-[60px] xl:py-[70px] */
.orion-projects.layout_3.orion-projects--listing .orion-projects__inner {
	padding-top: 0;
	padding-bottom: 34px;
}
@media (min-width: 640px)  { .orion-projects.layout_3.orion-projects--listing .orion-projects__inner { padding-bottom: 38px; } }
@media (min-width: 992px)  {
	.orion-projects.layout_3.orion-projects--listing .orion-projects__inner {
		padding-top: 40px;
		padding-bottom: 60px;
	}
}
@media (min-width: 1199px) {
	.orion-projects.layout_3.orion-projects--listing .orion-projects__inner {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}

/* stickyHeader: top-[50px] md:top-[75px] pt-[18px] pb-5 md:pt-10 lg:py-0
   xl:mb-[50px] lg:mb-7 */
.orion-projects.layout_3.orion-projects--listing .orion-projects__header {
	top: 50px;
	padding: 18px 0 20px;
	margin-bottom: 0;
}
@media (min-width: 769px) {
	.orion-projects.layout_3.orion-projects--listing .orion-projects__header {
		top: 75px;
		padding-top: 40px;
	}
}
@media (min-width: 992px) {
	.orion-projects.layout_3.orion-projects--listing .orion-projects__header {
		position: relative;
		top: 0;
		padding: 0;
		margin-bottom: 28px; /* lg:mb-7 */
	}
}
@media (min-width: 1199px) {
	.orion-projects.layout_3.orion-projects--listing .orion-projects__header {
		margin-bottom: 50px; /* xl:mb-[50px] */
	}
}

.orion-projects.layout_3.orion-projects--listing .orion-projects__title {
	margin-bottom: 0;
	text-align: center;
	font-weight: 500;
}

/* Cards: top-[124px] sm:top-[133px] md:top-[185/182] ;
   radii rounded-4xl md:rounded-5xl lg:rounded-6xl ;
   aspect 76 / sm54 / lg45 / xl42 / 2xl44 */
.orion-projects.layout_3.orion-projects--listing .orion-projects__card {
	top: 124px;
	border-radius: 20px;
}
@media (min-width: 640px) {
	.orion-projects.layout_3.orion-projects--listing .orion-projects__card { top: 133px; }
}
@media (min-width: 769px) {
	.orion-projects.layout_3.orion-projects--listing .orion-projects__card { top: 182px; border-radius: 30px; }
	.orion-projects.layout_3.orion-projects--listing .orion-projects__card:first-child { top: 185px; }
}
@media (min-width: 992px) {
	.orion-projects.layout_3.orion-projects--listing .orion-projects__card,
	.orion-projects.layout_3.orion-projects--listing .orion-projects__card:first-child {
		position: relative;
		top: 0;
		border-radius: 40px; /* lg:rounded-6xl */
	}
}

.orion-projects.layout_3.orion-projects--listing .orion-projects__image::before { padding-top: 76%; }
@media (min-width: 640px)  { .orion-projects.layout_3.orion-projects--listing .orion-projects__image::before { padding-top: 54%; } }
@media (min-width: 992px)  { .orion-projects.layout_3.orion-projects--listing .orion-projects__image::before { padding-top: 45%; } }
@media (min-width: 1199px) { .orion-projects.layout_3.orion-projects--listing .orion-projects__image::before { padding-top: 42%; } }
@media (min-width: 1752px) { .orion-projects.layout_3.orion-projects--listing .orion-projects__image::before { padding-top: 44%; } }

/* Load More: mt-9 md:mt-12 lg:mt-15 1xl:mt-17 2xl:mt-20 */
.orion-projects.layout_3.orion-projects--listing .orion-projects__load-more-wrap {
	margin-top: 36px;
}
@media (min-width: 769px)  { .orion-projects.layout_3.orion-projects--listing .orion-projects__load-more-wrap { margin-top: 48px; } }
@media (min-width: 992px)  { .orion-projects.layout_3.orion-projects--listing .orion-projects__load-more-wrap { margin-top: 60px; } }
@media (min-width: 1380px) { .orion-projects.layout_3.orion-projects--listing .orion-projects__load-more-wrap { margin-top: 68px; } }
@media (min-width: 1752px) { .orion-projects.layout_3.orion-projects--listing .orion-projects__load-more-wrap { margin-top: 80px; } }

/* ── Layout 4 — index-4.html "Our Projects" (dark-teal band + slider) ──
   Real breakpoints: sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752. */
.orion-projects.layout_4 { position: relative; }

/* HTML puts top spacing on the inner .container (pt-10 … 2xl:pt-[100px]), not
   the outer section — and never adds mobile side padding on the section. */
.layout_4 .orion-projects__inner { padding-top: 40px; }
@media (min-width: 640px)  { .layout_4 .orion-projects__inner { padding-top: 50px; } }
@media (min-width: 992px)  { .layout_4 .orion-projects__inner { padding-top: 70px; } }
@media (min-width: 1380px) { .layout_4 .orion-projects__inner { padding-top: 80px; } }
@media (min-width: 1752px) { .layout_4 .orion-projects__inner { padding-top: 100px; } }

.layout_4 .orion-projects__band {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 85%;
	background-color: var(--orion-primary);
	z-index: 0;
}

.layout_4 .orion-projects__header {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
@media (max-width: 639px) {
	.layout_4 .orion-projects__header { gap: 0; }
}
@media (min-width: 640px)  { .layout_4 .orion-projects__header { flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 30px; } }
@media (min-width: 769px)  { .layout_4 .orion-projects__header { margin-bottom: 40px; } }
@media (min-width: 1199px) { .layout_4 .orion-projects__header { margin-bottom: 50px; } }

.layout_4 .orion-projects__title { color: #fff; margin: 0; text-align: center; }
@media (min-width: 640px) { .layout_4 .orion-projects__title { text-align: left; } }

/* index-4.html keeps "View All Projects" in the header row on mobile (only
   layout_1 moves the CTA below the slider below 640px). */
.layout_4 .orion-projects__viewall-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	margin-top: 8px;
}
@media (min-width: 640px) {
	.layout_4 .orion-projects__viewall-wrap {
		margin-top: 0;
		justify-content: flex-end;
	}
}

.layout_4 .orion-projects__viewall { background-color: #fff; color: #000; }

.orion-proj4__swiper { position: relative; z-index: 1; overflow: visible; }

.orion-proj4__card { position: relative; }
.orion-proj4__link {
	display: block;
	position: relative;
	overflow: hidden;
}
.orion-proj4__link::before { content: ''; display: block; padding-top: 85%; }
.orion-proj4__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	max-width: none;
}
.orion-proj4__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.orion-proj4__arrow {
	margin-left: auto;
	width: 55px;
	height: 55px;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
@media (min-width: 769px)  { .orion-proj4__arrow { width: 60px; height: 60px; } }
@media (min-width: 1199px) { .orion-proj4__arrow { width: 70px; height: 70px; } }
@media (min-width: 1752px) { .orion-proj4__arrow { width: 85px; height: 85px; } }
.orion-proj4__arrow svg { width: 60%; height: 60%; }
.orion-proj4__card:hover .orion-proj4__arrow { opacity: 1; transform: translateY(0); background-color: #fff; color: var(--orion-primary); }

html body h4.orion-proj4__title,
h4.orion-proj4__title {
	color: #fff;
	margin: 0;
	position: absolute;
	left: 20px;
	bottom: 12px;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-weight: 500 !important;
	font-size: 20px !important;
	line-height: 28px !important;
	text-transform: none !important;
}
@media (min-width: 769px)  {
	html body h4.orion-proj4__title,
	h4.orion-proj4__title { left: 28px; bottom: 20px; font-size: 22px !important; line-height: 28px !important; }
}
@media (min-width: 1199px) {
	html body h4.orion-proj4__title,
	h4.orion-proj4__title { left: 28px; bottom: 28px; font-size: 24px !important; line-height: 32px !important; }
}
@media (min-width: 1380px) {
	html body h4.orion-proj4__title,
	h4.orion-proj4__title { line-height: 36px !important; }
}
@media (min-width: 1752px) {
	html body h4.orion-proj4__title,
	h4.orion-proj4__title { font-size: 30px !important; line-height: 42px !important; }
}

/* Placeholder */
.orion-projects__placeholder { width: 100%; height: 200px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #999; }

/* Layout 2 — static grid mode (display_mode=grid), used on the standalone
   Projects listing page. Matches the real projects-2.html grid exactly:
   1 col mobile, 2 at sm(640), 3 at xl(1199). */
.orion-proj2__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}
@media (min-width: 640px)  { .orion-proj2__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (min-width: 769px)  { .orion-proj2__grid { gap: 32px; } }
@media (min-width: 1199px) { .orion-proj2__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
@media (min-width: 1380px) { .orion-proj2__grid { gap: 50px; } }

/* ===== Listing page (projects-2.html) — .orion-projects--grid =====
   Container py: 34 / sm:38 / md:60 / xl:70. Title is bare h1.h2.
   Image ratios: 61% / lg:56.5% / xl:60% / 2xl:63% (not the home slider's
   project-img-before 60/73/75 schedule). */

.orion-projects--grid {
	background-color: #fff;
	margin-bottom: 0;
	padding: 0;
}
.orion-projects--grid .orion-projects__inner {
	padding-top: 34px;
	padding-bottom: 34px;
}
@media (min-width: 640px)  { .orion-projects--grid .orion-projects__inner { padding-top: 38px; padding-bottom: 38px; } }
@media (min-width: 769px)  { .orion-projects--grid .orion-projects__inner { padding-top: 60px; padding-bottom: 60px; } }
@media (min-width: 1199px) { .orion-projects--grid .orion-projects__inner { padding-top: 70px; padding-bottom: 70px; } }

/* HTML <h1 class="h2"> — same schedule as h2 / .h2
   (26 → 30@sm → 35@md → 40@xl → 46@1xl → 60@2xl).
   Margins: mb-5 / sm:mb-6 / md:mb-8 / xl:mb-10 / 1xl:mb-[50px] / 2xl:mb-[60px] */
html body h1.orion-proj2__page-title,
.orion-projects--grid .orion-proj2__page-title {
	display: block;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	color: #000;
	text-align: center;
	font-family: var(--orion-font-heading, "El Messiri", serif);
	font-weight: 500;
	font-size: 26px;
	line-height: 36px;
	letter-spacing: normal;
	text-transform: none;
}
@media (min-width: 640px) {
	html body h1.orion-proj2__page-title,
	.orion-projects--grid .orion-proj2__page-title {
		margin-bottom: 24px;
		text-align: start;
		font-size: 30px;
		line-height: 40px;
	}
}
@media (min-width: 769px) {
	html body h1.orion-proj2__page-title,
	.orion-projects--grid .orion-proj2__page-title {
		margin-bottom: 32px;
		font-size: 35px;
		line-height: 40px;
	}
}
@media (min-width: 1199px) {
	html body h1.orion-proj2__page-title,
	.orion-projects--grid .orion-proj2__page-title {
		margin-bottom: 40px;
		font-size: 40px;
		line-height: 50px;
	}
}
@media (min-width: 1380px) {
	html body h1.orion-proj2__page-title,
	.orion-projects--grid .orion-proj2__page-title {
		margin-bottom: 50px;
		font-size: 46px;
		line-height: 55px;
	}
}
@media (min-width: 1752px) {
	html body h1.orion-proj2__page-title,
	.orion-projects--grid .orion-proj2__page-title {
		margin-bottom: 60px;
		font-size: 60px;
		line-height: 70px;
	}
}

/* Listing image aspect — override homepage .project-img-before ratios.
   Must beat `.projects-2 .project .project-box .project-img-before` (60/73/75). */
.orion-projects--grid .projects-2 .project .project-box .project-img-before::before {
	content: "";
	display: block;
	padding-top: 61%;
}
@media (min-width: 992px)  {
	.orion-projects--grid .projects-2 .project .project-box .project-img-before::before { padding-top: 56.5%; }
}
@media (min-width: 1199px) {
	.orion-projects--grid .projects-2 .project .project-box .project-img-before::before { padding-top: 60%; }
}
@media (min-width: 1752px) {
	.orion-projects--grid .projects-2 .project .project-box .project-img-before::before { padding-top: 63%; }
}

/* Location / title spacing — HTML listing cards: loc ~mb-3 / 1xl:mb-4; h4 mb-2 md:mb-3 1xl:mb-4 */
.orion-projects--grid .orion-proj2__location {
	margin: 0 0 12px;
}
@media (min-width: 1380px) { .orion-projects--grid .orion-proj2__location { margin-bottom: 16px; } }

/* Listing card title margins (HTML mb-2 / md:mb-3 / 1xl:mb-4); sizes from h4 block above */
html body .orion-projects--grid h4.orion-proj2__title-wrap,
.orion-projects--grid .project-box .orion-proj2__title-wrap {
	margin: 0 0 8px;
	color: #000;
	font-weight: 500;
}
@media (min-width: 769px) {
	html body .orion-projects--grid h4.orion-proj2__title-wrap,
	.orion-projects--grid .project-box .orion-proj2__title-wrap { margin-bottom: 12px; }
}
@media (min-width: 1380px) {
	html body .orion-projects--grid h4.orion-proj2__title-wrap,
	.orion-projects--grid .project-box .orion-proj2__title-wrap { margin-bottom: 16px; }
}
.orion-projects--grid .orion-proj2__title-link { color: inherit; }

/* Desc uses HTML p leading (23 → 25 → 26 → 28 → 32), gray-400. */
.orion-projects--grid .project-box .project-location > p.text-gray-400,
.orion-projects--grid .project-box .project-location > p.orion-proj2__desc {
	margin: 0;
	color: #464343;
	font-family: var(--font-lexend, Lexend, sans-serif);
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 992px)  {
	.orion-projects--grid .project-box .project-location > p.text-gray-400,
	.orion-projects--grid .project-box .project-location > p.orion-proj2__desc {
		font-size: 15px;
		line-height: 25px;
	}
}
@media (min-width: 1199px) {
	.orion-projects--grid .project-box .project-location > p.text-gray-400,
	.orion-projects--grid .project-box .project-location > p.orion-proj2__desc { line-height: 26px; }
}
@media (min-width: 1380px) {
	.orion-projects--grid .project-box .project-location > p.text-gray-400,
	.orion-projects--grid .project-box .project-location > p.orion-proj2__desc { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-projects--grid .project-box .project-location > p.text-gray-400,
	.orion-projects--grid .project-box .project-location > p.orion-proj2__desc {
		font-size: 18px;
		line-height: 32px;
	}
}

/* In grid mode the arrow/title-hover interactions rely on plain :hover
   (no Swiper JS), scoped to the same .project-box ancestor used by the
   slider markup, so no extra rules are needed beyond the grid itself. */