/**
 * Services section.
 *
 * The tab view and the accordion view are the SAME markup, not two dialects.
 *
 * The DOM is two sibling groups — all tabs, then all panes — which is what the desktop
 * two-column layout wants. Below the breakpoint both groups become `display: contents` and
 * their children carry an inline `order` (tab i → 2i, pane i → 2i+1), which interleaves them
 * back into tab, pane, tab, pane… for the accordion. No JavaScript is involved in the switch.
 *
 * Do NOT "simplify" this by interleaving the DOM and splitting it with grid placement. A pane
 * spanning every tab row contributes its own height back into those rows, so the tabs drift
 * apart down the column instead of stacking.
 */

.enigma-services__container {
	position: relative;
	z-index: 1;
}

.enigma-services__panel {
	margin-top: clamp(36px, 4.5vw, 58px);
	padding: clamp(14px, 1.6vw, 20px);
	background: var(--e-bg2);
	border: 1px solid var(--e-l2);
	border-radius: var(--e-r-xl);
}

.enigma-services__tabs {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* ---------------------------------------------------------------- tab button */

.enigma-tab {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	padding: 15px 17px;
	cursor: pointer;
	text-align: start;
	background: transparent;
	border: 1px solid var(--e-l2);
	border-radius: var(--e-r-md);
	color: var(--e-text);
	font: inherit;
	transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.enigma-tab:hover {
	background: var(--e-chip);
	border-color: var(--e-l3);
}

.enigma-tab.is-active {
	background: var(--e-accent);
	border-color: var(--e-accent);
	color: var(--e-on-accent);
}

.enigma-tab__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--e-chip);
	border: 1px solid var(--e-l2);
	border-radius: 10px;
	color: var(--e-accent);
	transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.enigma-tab.is-active .enigma-tab__icon {
	background: rgba(14, 14, 15, .12);
	border-color: rgba(14, 14, 15, .16);
	color: var(--e-on-accent);
}

.enigma-tab__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.enigma-tab__num {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .55;
}

.enigma-tab__title {
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.enigma-tab__kicker {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .02em;
	opacity: .62;
}

.enigma-tab__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--e-chip);
	color: var(--e-m3);
	transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}

.enigma-tab.is-active .enigma-tab__arrow {
	background: rgba(14, 14, 15, .14);
	color: var(--e-on-accent);
}

/* ---------------------------------------------------------------- pane */

.enigma-services__pane {
	display: grid;
	gap: clamp(14px, 1.6vw, 20px);
	min-width: 0;
}

.enigma-services__pane[hidden] {
	display: none;
}

/* A ratio rather than a fixed min-height: the frame now follows the photograph's own
   shape as the column widens, instead of forcing a crop to fill a set height. */
.enigma-services__photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--e-text-solid);
	border-radius: var(--e-r-md);
}

/* 0-2-1 — beats Elementor's injected `.elementor img { height:auto }`. */
.enigma .enigma-services__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.enigma-services__photo-chip {
	position: absolute;
	inset-inline-start: 14px;
	top: 14px;
	padding: 8px 15px;
	background: rgba(14, 14, 15, .8);
	border: 1px solid var(--e-l3);
	border-radius: var(--e-r-pill);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--e-text);
}

/* ---------------------------------------------------------------- detail card */

.enigma-service-detail {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(22px, 2.6vw, 34px);
	background: var(--e-detail);
	color: var(--e-text-solid);
	border-radius: var(--e-r-md);
}

.enigma-service-detail__title {
	margin: 0;
	font-size: calc(clamp(19px, 1.9vw, 26px) * var(--e-heading-scale, 1));
	font-weight: var(--e-heading-weight, 900);
	line-height: 1.12;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: var(--e-ink-solid);
	text-wrap: balance;
}

.enigma-service-detail__body {
	margin: 16px 0 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.74;
	color: rgba(64, 64, 65, .82);
	text-wrap: pretty;
}

.enigma-service-detail__bullets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px 18px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(64, 64, 65, .16);
}

.enigma-service-detail__bullet {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--e-text-solid);
}

.enigma-service-detail__bullet svg {
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--e-accent);
}

.enigma-service-detail__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Pushed to the bottom so buttons align across services of differing copy length. */
	margin-top: auto;
	padding: 14px 22px;
	background: var(--e-text-solid);
	border-radius: var(--e-r-sm);
	color: var(--e-text);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background 220ms ease, color 220ms ease;
}

/* The bullets block already provides breathing room; without it the button would sit tight. */
.enigma-service-detail__body + .enigma-service-detail__cta,
.enigma-service-detail__bullets + .enigma-service-detail__cta {
	margin-top: 26px;
}

.enigma-service-detail__cta:hover {
	background: var(--e-ink-solid);
	color: #FFFFFF;
}

/* ---------------------------------------------------------------- grid view */

.enigma-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
	gap: 12px;
	margin-top: clamp(36px, 4.5vw, 58px);
}

.enigma-service-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--e-bg2);
	border: 1px solid var(--e-l2);
	border-radius: 18px;
	color: inherit;
	transition: border-color 240ms ease, transform 240ms ease;
}

.enigma-service-card:hover {
	border-color: rgba(38, 169, 224, .5);
	transform: translateY(-3px);
}

.enigma-service-card__media {
	position: relative;
	height: 170px;
	background: var(--e-text-solid);
}

.enigma .enigma-service-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.enigma-service-card__body-wrap {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.2vw, 28px);
}

.enigma-service-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.enigma-service-card__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(38, 169, 224, .1);
	border: 1px solid rgba(38, 169, 224, .24);
	border-radius: 50%;
	color: var(--e-accent);
}

.enigma-service-card__num {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--e-accent);
}

.enigma-service-card__title {
	margin: 14px 0 0;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.24;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--e-ink);
}

.enigma-service-card__body {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.72;
	color: var(--e-m3);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------- chip row */

.enigma-services__also {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: clamp(24px, 3vw, 40px);
}

.enigma-services__also-label {
	margin-inline-end: 6px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--e-m4);
}

.enigma-services__chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 18px;
	border: 1px solid var(--e-l2);
	border-radius: var(--e-r-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--e-m1);
}

.enigma-services__chip-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--e-accent);
}

.enigma-services__empty {
	padding: 28px;
	border: 1px dashed var(--e-l3);
	border-radius: var(--e-r-lg);
	color: var(--e-m2);
}

/* ---------------------------------------------------------------- tab layout */

/* Above the breakpoint: two columns, tabs left, active pane right. */
@media (min-width: 900px) {
	.enigma-services__panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: clamp(14px, 1.6vw, 20px);
		align-items: stretch;
	}

	.enigma-services__panes {
		display: flex;
		min-width: 0;
	}

	/*
	 * The pane stays a single column: photo above, detail below.
	 *
	 * Splitting it again made three columns across the section, which left the photo in a
	 * narrow slot that object-fit had to crop hard. Full pane width gives it room, so the
	 * photograph reads as one rather than as a sliver of one.
	 */
	.enigma-services__pane {
		flex: 1 1 auto;
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------- read more button */

.enigma-service-card__readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--e-accent, #26A9E0);
	text-decoration: none;
	transition: gap 200ms ease;
}

.enigma-service-card__readmore:hover {
	gap: 12px;
}

.enigma-service-card__readmore svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------- carousel view */

.enigma-services__carousel {
	display: flex;
	gap: clamp(16px, 3vw, 28px);
	overflow-x: auto;
	scroll-behavior: smooth;
	padding-bottom: 12px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.enigma-services__carousel::-webkit-scrollbar {
	height: 4px;
}

.enigma-services__carousel::-webkit-scrollbar-track {
	background: var(--e-l1);
	border-radius: 2px;
}

.enigma-services__carousel::-webkit-scrollbar-thumb {
	background: var(--e-accent, #26A9E0);
	border-radius: 2px;
}

.enigma-services__carousel .enigma-service-card {
	flex: 0 0 clamp(300px, 85vw, 420px);
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* ---------------------------------------------------------------- carousel controls */

.enigma-carousel__controls {
	display: flex;
	gap: 12px;
	margin-top: 16px;
	justify-content: flex-end;
}

.enigma-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--e-bg2);
	border: 1px solid var(--e-l2);
	color: var(--e-accent);
	cursor: pointer;
	transition: all 200ms ease;
}

.enigma-carousel__arrow:hover {
	background: var(--e-accent);
	border-color: var(--e-accent);
	color: #fff;
	transform: scale(1.05);
}

.enigma-carousel__arrow:active {
	transform: scale(0.95);
}

.enigma-carousel__arrow svg {
	width: 18px;
	height: 18px;
}

/* Below the breakpoint: flatten both groups and let `order` interleave them. */
@media (max-width: 899px) {
	.enigma-services__panel {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.enigma-services__tabs,
	.enigma-services__panes {
		display: contents;
	}

	.enigma-services__pane {
		margin-bottom: 6px;
	}

	.enigma-tab__arrow {
		transform: rotate(90deg);
	}

	.enigma-tab.is-active .enigma-tab__arrow {
		transform: rotate(-90deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.enigma-tab,
	.enigma-service-card,
	.enigma-tab__arrow {
		transition: none;
	}

	.enigma-service-card:hover {
		transform: none;
	}
}

:lang(ar) .enigma-tab__title,
:lang(ar) .enigma-tab__num,
:lang(ar) .enigma-service-detail__title,
:lang(ar) .enigma-service-card__title,
:lang(ar) .enigma-service-card__num,
:lang(ar) .enigma-services__also-label,
:lang(ar) .enigma-services__chip,
:lang(ar) .enigma-services__photo-chip,
:lang(ar) .enigma-service-detail__cta {
	letter-spacing: 0;
	text-transform: none;
}

/* =================================================== section head with button

   The About page pairs the heading with a "full service detail" pill instead of
   the intro paragraph, so the two sit on one baseline row and stack when narrow. */

.enigma-services__head.has-cta {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: clamp(20px, 3vw, 48px);
}

.enigma-services__head-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 24px;
	border: 1px solid var(--e-l3);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--e-text);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 220ms ease, color 220ms ease;
}

.enigma-services__head-cta:hover {
	border-color: var(--e-accent);
	color: var(--e-accent);
}

@media (max-width: 782px) {
	.enigma-services__head.has-cta {
		grid-template-columns: 1fr;
		justify-items: start;
	}
}

/* ======================================================== grid card, redesigned

   The design's grid cards carry no photography — an icon tile, a muted index, the
   name and one summary line. Overrides sit after the originals so the tab and
   carousel views, which share .enigma-service-card, are left untouched. */

/* Four across, as the design lays it out. auto-fit resolved to five in a 1320px
   container, which also wrapped the last row wrongly. */
.enigma-services__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
}

@media (max-width: 1180px) {
	.enigma-services__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.enigma-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.enigma-services__grid {
		grid-template-columns: 1fr;
	}
}

.enigma-services__grid .enigma-service-card {
	border-radius: 16px;
	border-color: var(--e-l1);
}

.enigma-services__grid .enigma-service-card__body-wrap {
	padding: clamp(22px, 2.2vw, 28px);
}

.enigma-services__grid .enigma-service-card__head {
	justify-content: space-between;
	align-items: flex-start;
}

.enigma-services__grid .enigma-service-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	border: none;
	background: rgba(38, 169, 224, .12);
}

.enigma-services__grid .enigma-service-card__num {
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--e-m5);
	font-variant-numeric: tabular-nums;
}

.enigma-services__grid .enigma-service-card__title {
	margin-top: 20px;
	font-size: 15.5px;
	line-height: 1.32;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: pretty;
}

.enigma-services__grid .enigma-service-card__body {
	margin-top: 10px;
	font-size: 13.5px;
	line-height: 1.66;
}

/* ============================================ grid card text + small screens

   The summary is clamped rather than left to run: services have descriptions of
   very different lengths, and unclamped they pull the cards to wildly different
   heights, which is what made the grid look ragged. */

.enigma-services__grid .enigma-service-card__body {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The card body grows so the whole card stays the row height and the text block
   sits directly under the title rather than floating mid-card. */
.enigma-services__grid .enigma-service-card__body-wrap {
	flex: 1;
}

@media (max-width: 860px) {
	/* Two across on a phone in landscape or a small tablet — the icon tile and the
	   generous desktop padding leave almost no room for the title. */
	.enigma-services__grid .enigma-service-card__body-wrap {
		padding: 20px 18px;
	}

	.enigma-services__grid .enigma-service-card__title {
		font-size: 15px;
	}
}

@media (max-width: 560px) {
	.enigma-services__grid {
		gap: 10px;
	}

	.enigma-services__grid .enigma-service-card__body-wrap {
		padding: 18px 18px 20px;
	}

	/* One card per row means there is width for the full summary. */
	.enigma-services__grid .enigma-service-card__body {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}

	/* The section button spans the row instead of sitting as a stray pill. */
	.enigma-services__head.has-cta .enigma-services__head-cta {
		width: 100%;
		justify-content: center;
	}
}