/**
 * Virgo — Elementor bridge
 *
 * Pages are laid out with Elementor containers that carry the existing Virgo
 * classes (virgo-band, virgo-container, virgo-grid, virgo-card …). Those
 * classes already own the design system, so this file only does the small
 * amount of translation Elementor's own markup needs:
 *
 *   1. give Elementor containers the gutter the block theme used to apply
 *   2. stop Elementor's default widget margins fighting our grid gaps
 *   3. style the Elementor Button widget as a Virgo button
 *
 * Loaded only on pages that are actually built with Elementor.
 */

/* -------------------------------------------------------------------------
   1. Bands and containers
   ---------------------------------------------------------------------- */

/*
 * An Elementor band paints full width and supplies no horizontal padding of
 * its own — the .virgo-container shell inside it is already inset by the
 * gutter. Padding here as well is what produced gutter-plus-leftover side
 * space instead of one predictable value.
 */
.virgo-band--el {
	padding-inline: 0;
}

/* Elementor containers default to a max-width and auto margins; inside a band
   the Virgo container class is what should decide the width. */
.virgo-band--el > .e-con,
.virgo-band--el > .elementor-element {
	width: 100%;
	max-width: 100%;
}

.virgo-band--el .virgo-container {
	width: var(--virgo-content-shell);
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

/* Elementor gives every container display:flex; column is the sane default for
   our stacked sections. The grid classes below override it where needed. */
.elementor .virgo-band,
.elementor .virgo-container,
.elementor .virgo-stack {
	display: flex;
	flex-direction: column;
}

/* Our own grid/split classes must win over Elementor's flex default. */
.elementor .virgo-grid,
.elementor .virgo-steps-counter {
	display: grid;
}

.elementor .virgo-split {
	display: grid;
}

@media (min-width: 62rem) {
	.elementor .virgo-split {
		grid-template-columns: 1.05fr 0.95fr;
	}

	.elementor .virgo-split--wide-first {
		grid-template-columns: 1.35fr 0.65fr;
	}
}

.elementor .virgo-section-head {
	display: grid;
}

/* -------------------------------------------------------------------------
   2. Widget rhythm
   Elementor adds its own bottom margin to every widget. Inside our grids and
   cards that doubles the gap, so it is removed there and left alone elsewhere.
   ---------------------------------------------------------------------- */

.elementor .virgo-grid > .elementor-element,
.elementor .virgo-steps-counter > .elementor-element,
.elementor .virgo-split > .elementor-element,
.elementor .virgo-section-head > .elementor-element {
	margin-block: 0;
}

.elementor .virgo-card > .elementor-widget:last-child,
.elementor .virgo-step > .elementor-widget:last-child,
.elementor .virgo-panel > .elementor-widget:last-child {
	margin-bottom: 0;
}

/* Text widgets should not introduce a second paragraph margin. */
.elementor .elementor-widget-text-editor > .elementor-widget-container > p:first-child,
.elementor .elementor-widget-text-editor p:first-child {
	margin-top: 0;
}

.elementor .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Headings inside a card keep the card's tighter spacing. */
.elementor .virgo-card .elementor-widget-heading,
.elementor .virgo-step .elementor-widget-heading {
	margin-bottom: 0.4rem;
}

/* -------------------------------------------------------------------------
   3. Buttons
   The Elementor Button widget rendered as a Virgo button, so a button added in
   Elementor is indistinguishable from one in the theme.
   ---------------------------------------------------------------------- */

/*
 * Elementor lays containers out with `.e-con.e-flex { flex-direction: var(--flex-direction) }`
 * — two classes, so a plain `.virgo-ebtn-row { flex-direction: row }` loses and
 * the buttons stack. Drive Elementor's own custom properties instead: it wins
 * the cascade by construction and the container stays editable in the panel.
 */
.virgo-ebtn-row,
.virgo-ebtn-row.e-con,
.virgo-ebtn-row.e-con-full.e-flex {
	--display: flex;
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: flex-start;
	--align-items: center;
	--gap: 0.75rem;
	--row-gap: 0.75rem;
	--column-gap: 0.75rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: flex-start;
}

/*
 * Inside a container, Elementor makes every widget a full-width flex item, so
 * two buttons stack and each one centres itself in its own row. Shrink the
 * widget to its button and the row reads as a real button group.
 */
.virgo-ebtn-row.e-con > .elementor-widget,
.virgo-ebtn-row.e-con > .elementor-element,
.virgo-ebtn-row > .elementor-widget,
.virgo-ebtn-row > .elementor-element {
	width: auto;
	max-width: 100%;
	flex: 0 0 auto;
}

.virgo-ebtn-row .elementor-button-wrapper {
	text-align: left;
}

.virgo-ebtn .elementor-button,
.virgo-ebtn .elementor-button-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	/* Matches .virgo-btn exactly — the two systems must not drift, because the
	   same CTA can be authored either in Elementor or in a theme template. */
	min-height: 3rem;
	padding: 0.9rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--virgo-radius-pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--virgo-transition), color var(--virgo-transition),
		border-color var(--virgo-transition), transform var(--virgo-transition), box-shadow var(--virgo-transition);
}

.virgo-ebtn .elementor-button:hover {
	transform: translateY(-1px);
}

.virgo-ebtn .elementor-button:focus-visible {
	outline: 2px solid var(--virgo-focus);
	outline-offset: 3px;
}

/* Elementor's own size modifiers must not undercut the tap target. */
.virgo-ebtn .elementor-button.elementor-size-sm,
.virgo-ebtn .elementor-button.elementor-size-xs {
	min-height: 2.75rem;
	padding: 0.6rem 1.15rem;
}

/*
 * The primary fill is declared once, in section 14 of this file, from
 * --virgo-brand-gradient-fill. What used to be here was a second copy reading
 * the decorative gradient, whose orange end gives white text 2.26:1 — the
 * later rule already won, but leaving a failing gradient in the file is how it
 * comes back.
 */
.virgo-ebtn--primary .elementor-button {
	background-color: var(--wp--preset--color--violet-deep);
	background-size: 160% 100%;
	background-position: 0% 50%;
	color: #fff;
	transition: background-position var(--virgo-transition-slow), transform var(--virgo-transition), box-shadow var(--virgo-transition);
}

.virgo-ebtn--primary .elementor-button:hover {
	background-position: 100% 50%;
	color: #fff;
}

.virgo-ebtn--outline .elementor-button {
	background-color: transparent;
	color: var(--virgo-text);
	border-color: var(--virgo-line-strong);
}

.virgo-ebtn--outline .elementor-button:hover {
	background-color: var(--virgo-bg-card-hover);
	border-color: var(--virgo-accent);
	color: var(--virgo-text);
}

.virgo-ebtn--light .elementor-button {
	background-color: #fff;
	color: var(--wp--preset--color--base);
}

.virgo-ebtn--light .elementor-button:hover {
	background-color: var(--wp--preset--color--paper-2);
	color: var(--wp--preset--color--base);
}

/* Elementor wraps the label in a span; keep it from adding its own spacing. */
.virgo-ebtn .elementor-button-content-wrapper {
	gap: 0.55rem;
}

.virgo-ebtn .elementor-button-text {
	flex-grow: 0;
}

@media (max-width: 30rem) {
	.virgo-ebtn-row,
	.virgo-ebtn-row.e-con,
	.virgo-ebtn-row.e-con-full.e-flex {
		--flex-direction: column;
		--align-items: stretch;
		flex-direction: column;
		align-items: stretch;
	}

	.virgo-ebtn-row.e-con > .elementor-widget,
	.virgo-ebtn-row > .elementor-widget,
	.virgo-ebtn-row > .elementor-element,
	.virgo-ebtn-row .elementor-widget-button,
	.virgo-ebtn .elementor-button {
		width: 100%;
	}

	.virgo-ebtn-row .elementor-button-wrapper {
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
   4. Light bands
   Elementor sets its own colours on some widgets; the band still wins.
   ---------------------------------------------------------------------- */

.virgo-band--light .elementor-widget-heading .elementor-heading-title,
.virgo-band--tinted .elementor-widget-heading .elementor-heading-title {
	color: var(--virgo-text);
}

.virgo-band--light .elementor-widget-text-editor,
.virgo-band--tinted .elementor-widget-text-editor {
	color: var(--virgo-text);
}

.virgo-band--light .elementor-widget-text-editor a,
.virgo-band--tinted .elementor-widget-text-editor a {
	color: var(--virgo-link);
}

/* -------------------------------------------------------------------------
   5. Editor canvas
   Inside the Elementor editor there is no fixed header, so the offset the
   theme applies to <main> would leave a large gap at the top.
   ---------------------------------------------------------------------- */

body.elementor-editor-active .virgo-main,
body.elementor-editor-preview .virgo-main {
	padding-top: 0;
}

/* Give empty containers a visible target in the editor. */
body.elementor-editor-active .virgo-band--el {
	min-height: 2rem;
}

/* -------------------------------------------------------------------------
   6. Reading measure inside a prose band
   Text stays comfortable to read while grids and cards use the full column.
   ---------------------------------------------------------------------- */

/*
 * A comfortable reading measure. Expressed in rem rather than ch because a
 * heading and a paragraph have very different font sizes, and `68ch` on a 34px
 * heading is over a thousand pixels wide — no measure at all.
 */
.virgo-band--el .virgo-prose > .elementor-widget-text-editor,
.virgo-band--el .virgo-prose > .elementor-widget-heading,
.virgo-band--el .virgo-prose > .elementor-widget-text-editor.elementor-widget,
.virgo-band--el .virgo-prose > .elementor-widget-heading.elementor-widget {
	max-width: 44rem;
}

.virgo-band--el .virgo-prose > .elementor-widget-heading.elementor-widget-heading {
	margin-top: 1.6em;
}

.virgo-band--el .virgo-prose > .elementor-widget-heading:first-child {
	margin-top: 0;
}

/* The Elementor page template has no constrained wrapper, so <main> supplies
   nothing of its own and every band spans the viewport. */
.virgo-main--elementor > .elementor {
	width: 100%;
}

/* -------------------------------------------------------------------------
   7. Overflow guards for Elementor containers
   Elementor containers are flex parents, and flex children default to
   min-width:auto — which lets a long word or a wide image push a column past
   its share and scroll the page sideways. Same guard the theme applies to its
   own grids.
   ---------------------------------------------------------------------- */

/*
 * The job here is to stop a long word or a wide table forcing a horizontal
 * scrollbar. `min-width: 0` is what actually does that for a flex item.
 *
 * `max-width: 100%` is deliberately NOT applied to containers and widgets:
 * this rule has the same specificity as the 1240px container cap and the prose
 * measure, so as the later rule it silently overrode both — every section ran
 * viewport-wide and every paragraph was a 150-character line. Elementor already
 * caps widgets with `.e-con > .elementor-widget { max-width: 100% }`.
 */
.elementor .e-con,
.elementor .e-con > .e-con-inner,
.elementor .e-con > .elementor-element,
.elementor .elementor-widget {
	min-width: 0;
}

.elementor .elementor-widget-container {
	min-width: 0;
	max-width: 100%;
}

.elementor .elementor-widget-text-editor,
.elementor .elementor-widget-heading {
	overflow-wrap: break-word;
}

/* An image dropped into an Elementor page must never exceed its column. */
.elementor .elementor-widget-image img {
	max-width: 100%;
	height: auto;
}

/* Elementor's own full-width container should not create a horizontal
   scrollbar inside a band that already supplies the gutter. */
.virgo-band--el > .e-con-full,
.virgo-band--el > .e-con {
	padding-inline: 0;
}

/* -------------------------------------------------------------------------
   8. Elementor Button widget — the Virgo default
   Button styling used to live in the Elementor kit, but the kit applies it to
   every native <button> on the site, which turned the header's icon buttons
   into solid pills with the icons pushed out of view. Styling the widget class
   directly keeps Elementor buttons on-brand and leaves native buttons alone.
   ---------------------------------------------------------------------- */

.elementor-button,
.elementor-button-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.9rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--virgo-radius-pill);
	font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	background-image: var(--virgo-brand-gradient);
	background-color: var(--wp--preset--color--violet-deep);
	background-size: 160% 100%;
	background-position: 0% 50%;
	color: #fff;
	transition: background-position var(--virgo-transition-slow), transform var(--virgo-transition), box-shadow var(--virgo-transition);
}

.elementor-button:hover,
.elementor-button:focus-visible {
	background-position: 100% 50%;
	color: #fff;
	transform: translateY(-1px);
}

/* Our own classed variants still win over the default above. */
.virgo-ebtn--outline .elementor-button {
	background-image: none;
	background-color: transparent;
	color: var(--virgo-text);
	border-color: var(--virgo-line-strong);
	box-shadow: none;
}

.virgo-ebtn--outline .elementor-button:hover,
.virgo-ebtn--outline .elementor-button:focus-visible {
	background-image: none;
	background-color: var(--virgo-bg-card-hover);
	border-color: var(--virgo-accent);
	color: var(--virgo-text);
}

.virgo-ebtn--light .elementor-button {
	background-image: none;
	background-color: #fff;
	color: var(--wp--preset--color--base);
}

.virgo-ebtn--light .elementor-button:hover {
	background-image: none;
	background-color: var(--wp--preset--color--paper-2);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
   9. Hero composition
   A genuine two-column hero: copy on the left, visual on the right, both
   vertically centred. Below the laptop breakpoint it stacks.
   ---------------------------------------------------------------------- */

.elementor .virgo-hero .virgo-split--wide-first {
	align-items: center;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 62rem) {
	.elementor .virgo-hero .virgo-split--wide-first {
		/* 55 / 45 */
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	}
}

/* The hero band needs enough height for the CTA to sit above the fold on a
   typical laptop, without becoming a full-screen splash. */
.virgo-hero {
	padding-block: clamp(3rem, 7vw, 6rem);
}

/* Only the home page hero reserves a full first screen; inner-page heroes are
   short introductions and should not leave a void under the copy. */
@media (min-width: 62rem) {
	.home .virgo-hero {
		min-height: min(78vh, 760px);
		display: flex;
		align-items: center;
	}

	.home .virgo-hero > .e-con,
	.home .virgo-hero > .elementor-element {
		width: 100%;
	}
}

/* Hero typography: let the wider container do the wrapping. */
.elementor .virgo-hero__title,
.elementor .virgo-hero .elementor-widget-heading .elementor-heading-title {
	max-width: 16ch;
	text-wrap: balance;
}

@media (max-width: 61.999rem) {
	.elementor .virgo-hero__title,
	.elementor .virgo-hero .elementor-widget-heading .elementor-heading-title {
		max-width: 100%;
	}
}

.elementor .virgo-hero__lede,
.elementor .virgo-hero .virgo-hero__lede {
	max-width: 46ch;
}

/* Hero actions sit inline, left aligned, directly under the copy. */
.elementor .virgo-hero .virgo-ebtn-row {
	margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
   10. Button colour guard
   Elementor's Site Settings can emit `.elementor-kit-N a{color:…}`. That class
   lives on <body>, so the selector outranks every `.virgo-btn--*` rule and
   silently repaints button labels site-wide — it is what turned the header CTA
   violet-on-violet. The kit setting has been removed, and these rules make sure
   a future one cannot do it again.
   ---------------------------------------------------------------------- */

body .virgo-btn--primary,
body .virgo-btn--primary:visited,
body .virgo-btn--primary:hover,
body .virgo-ebtn--primary .elementor-button,
body .virgo-ebtn--primary .elementor-button:visited,
body .virgo-btn--light,
body .virgo-btn--light:visited,
body .virgo-ebtn--light .elementor-button {
	/* Solid, deliberate label colour — never inherited from a link setting. */
	text-decoration: none;
}

body .virgo-btn--primary,
body .virgo-btn--primary:visited,
body .virgo-btn--primary:hover,
body .virgo-ebtn--primary .elementor-button,
body .virgo-ebtn--primary .elementor-button:visited,
body .virgo-ebtn--primary .elementor-button:hover {
	color: #fff;
}

body .virgo-btn--light,
body .virgo-btn--light:visited,
body .virgo-btn--light:hover,
body .virgo-ebtn--light .elementor-button,
body .virgo-ebtn--light .elementor-button:visited,
body .virgo-ebtn--light .elementor-button:hover {
	color: var(--wp--preset--color--base);
}

body .virgo-btn--outline,
body .virgo-btn--outline:visited,
body .virgo-btn--outline:hover,
body .virgo-ebtn--outline .elementor-button,
body .virgo-ebtn--outline .elementor-button:visited,
body .virgo-ebtn--outline .elementor-button:hover {
	color: var(--virgo-text);
	text-decoration: none;
}

/*
 * The header CTA needed its own AA-safe gradient when the shared one was the
 * decorative gradient. The shared fill clears AA at every stop now, so the CTA
 * uses it like every other primary and there is one primary appearance on the
 * site rather than two.
 */
.virgo-header__actions .virgo-btn--primary {
	box-shadow: 0 8px 24px -12px rgba(109, 40, 217, 0.9);
	letter-spacing: 0.005em;
}


/* -------------------------------------------------------------------------
   11. Grouped service categories
   Four named groups instead of one fifteen-card menu. Each group reads as a
   short chapter: title, one line of context, then its cards.
   ---------------------------------------------------------------------- */

.virgo-service-groups {
	--display: flex;
	--flex-direction: column;
	--gap: clamp(2.5rem, 5vw, 4rem);
	--row-gap: clamp(2.5rem, 5vw, 4rem);
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vw, 4rem);
	width: 100%;
}

.virgo-service-group {
	--display: flex;
	--flex-direction: column;
	--gap: 1rem;
	--row-gap: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	padding-top: 1.5rem;
	border-top: 1px solid var(--virgo-line);
}

.virgo-service-group:first-child {
	padding-top: 0;
	border-top: 0;
}

.elementor .virgo-service-group__title .elementor-heading-title {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0;
}

.elementor .virgo-service-group__lede {
	max-width: 62ch;
	margin: 0;
	color: var(--virgo-text-muted);
	font-size: 1rem;
}

.elementor .virgo-service-group__lede p {
	margin: 0;
}

/* The grid sits a little away from the group's own copy. */
.virgo-service-group .virgo-services {
	margin-top: 0.5rem;
	width: 100%;
}

/* =========================================================================
   12. Service-page segmentation

   Fifteen service pages plus the Dubai location page share one shape: hero,
   a single uninterrupted prose column of six or seven H2 sections, then the
   call to action. The copy is strong; what a reader could not see was where
   one part ended and the next began.

   Each H2 now opens a segment — a hairline above it and deliberate space
   around it — and alternate segments take a very slightly raised surface, so
   the page reads as Position / What we deliver / Capabilities / Process /
   Who this is for / CTA without a single word being rewritten and without
   sixteen page-specific stylesheets.
   ========================================================================= */

/*
 * Elementor wraps every heading in `.elementor-widget-heading` with no level
 * class, so :has() is what tells an H2 from the handful of H3s. Where :has()
 * is unavailable the pages keep the spacing they had — the rule degrades to
 * nothing rather than to something wrong.
 */
@supports selector(:has(*)) {
	/*
	 * Scoped away from .virgo-service-section. The service pages now put each
	 * H2 in its own section container, where every H2 is :first-child, so this
	 * rule would not fire on them anyway — but stating the exclusion keeps the
	 * two mechanisms from ever both applying and doubling the separator.
	 *
	 * It still runs on Privacy and Terms, which are deliberately one long
	 * prose column and are not being split.
	 */
	.virgo-band--el:not(.virgo-service-section) .virgo-prose > .elementor-widget-heading:has(h2):not(:first-child) {
		margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
		padding-top: clamp(1.5rem, 3vw, 2.25rem);
		border-top: 1px solid var(--virgo-line);
	}

	/* The heading and the paragraph under it belong together. */
	.virgo-band--el .virgo-prose > .elementor-widget-heading:has(h2) {
		margin-bottom: 0.35rem;
	}

	.virgo-band--el .virgo-prose > .elementor-widget-heading:has(h3) {
		margin-top: clamp(1.5rem, 3vw, 2.25rem);
	}
}

/* Never wider than the prose column, and held to a comfortable line length
   inside it. One relationship, stated once. */
.virgo-band--el .virgo-prose > .elementor-widget-text-editor,
.virgo-band--el .virgo-prose > .elementor-widget-heading,
.virgo-band--el .virgo-prose > .elementor-widget-text-editor.elementor-widget,
.virgo-band--el .virgo-prose > .elementor-widget-heading.elementor-widget {
	max-width: min(44rem, var(--virgo-prose));
}

/* A card group, grid or process sequence inside the prose column uses the
   full column: it is a diagram, not running text. */
.virgo-band--el .virgo-prose > .virgo-grid,
.virgo-band--el .virgo-prose > .virgo-steps-counter,
.virgo-band--el .virgo-prose > .e-con:has(> .virgo-grid) {
	max-width: none;
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

/* =========================================================================
   13. Service motifs

   One restrained device per service family, drawn in CSS. No image, no stock
   photograph, no invented screenshot, no device mock-up, no client logo and
   no fabricated chart — every one of these is a few lines of gradient and
   border, sitting behind the hero copy at low contrast.

   All are decorative, all are pointer-events:none, all are inside the hero's
   existing `overflow: clip`, and all are suppressed below the laptop
   breakpoint where the hero has no spare room.
   ========================================================================= */

@media (min-width: 62rem) {
	.virgo-service-page .virgo-hero::after {
		content: "";
		position: absolute;
		pointer-events: none;
		z-index: 0;
		opacity: 0.5;
	}

	/* --- A window / layout frame: website design, UI/UX --------------- */
	.virgo-motif-frame .virgo-hero::after {
		right: calc(-1 * var(--virgo-gutter) / 2);
		top: 22%;
		width: 26rem;
		height: 17rem;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: var(--virgo-radius-lg);
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 2.25rem, transparent 2.25rem),
			linear-gradient(90deg, rgba(139, 92, 246, 0.09), transparent 60%);
		box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
	}

	/* --- A block grid: WordPress ------------------------------------- */
	.virgo-motif-blocks .virgo-hero::after {
		right: 2%;
		top: 20%;
		width: 22rem;
		height: 16rem;
		border-radius: var(--virgo-radius-lg);
		background-image:
			linear-gradient(to right, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
			linear-gradient(to bottom, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
		background-size: 5.5rem 5.33rem;
		border: 1px solid rgba(255, 255, 255, 0.12);
	}

	/* --- A dashboard split: web applications -------------------------- */
	.virgo-motif-dashboard .virgo-hero::after {
		right: 2%;
		top: 20%;
		width: 24rem;
		height: 16rem;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: var(--virgo-radius-lg);
		background:
			linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 7rem, transparent 7rem),
			linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 2rem, transparent 2rem);
	}

	/* --- A device outline: mobile apps -------------------------------- */
	.virgo-motif-device .virgo-hero::after {
		right: 8%;
		top: 16%;
		width: 9.5rem;
		height: 19rem;
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 1.6rem;
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 45%),
			linear-gradient(160deg, rgba(139, 92, 246, 0.10), transparent 70%);
	}

	/* --- Connected steps: custom software, ERP, CRM, social ----------- */
	.virgo-motif-flow .virgo-hero::after {
		right: 4%;
		top: 34%;
		width: 24rem;
		height: 0.75rem;
		border-radius: var(--virgo-radius-pill);
		background:
			radial-gradient(circle at 6% 50%, rgba(255, 255, 255, 0.55) 0 0.28rem, transparent 0.3rem),
			radial-gradient(circle at 38% 50%, rgba(255, 255, 255, 0.4) 0 0.28rem, transparent 0.3rem),
			radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.28) 0 0.28rem, transparent 0.3rem),
			radial-gradient(circle at 98% 50%, rgba(255, 255, 255, 0.18) 0 0.28rem, transparent 0.3rem),
			linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent);
	}

	/* --- Catalogue and checkout: e-commerce --------------------------- */
	.virgo-motif-commerce .virgo-hero::after {
		right: 4%;
		top: 22%;
		width: 22rem;
		height: 15rem;
		border-radius: var(--virgo-radius-lg);
		background-image:
			linear-gradient(to right, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
			linear-gradient(to bottom, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
			linear-gradient(160deg, rgba(251, 146, 60, 0.10), transparent 65%);
		background-size: 7.3rem 7.5rem, 7.3rem 7.5rem, auto;
		border: 1px solid rgba(255, 255, 255, 0.10);
	}

	/*
	 * --- Editorial: branding, digital content -------------------------
	 * Deliberately not a device. One wide rule and a great deal of space, so
	 * these pages do not read like a software dashboard.
	 */
	.virgo-motif-editorial .virgo-hero::after {
		right: 6%;
		top: 30%;
		width: 18rem;
		height: 1px;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent);
		box-shadow: 0 3.5rem 0 rgba(255, 255, 255, 0.12), 0 7rem 0 rgba(255, 255, 255, 0.06);
	}

	.virgo-motif-editorial .virgo-hero {
		padding-block: clamp(4rem, 8vw, 7rem);
	}

	/* --- Print and digital production: graphic design ----------------- */
	.virgo-motif-print .virgo-hero::after {
		right: 6%;
		top: 24%;
		width: 15rem;
		height: 15rem;
		border: 1px solid rgba(255, 255, 255, 0.14);
		background:
			linear-gradient(135deg, transparent 49.6%, rgba(255, 255, 255, 0.14) 49.6% 50.4%, transparent 50.4%),
			linear-gradient(200deg, rgba(236, 72, 153, 0.10), transparent 70%);
		box-shadow: 1.5rem 1.5rem 0 -1px rgba(255, 255, 255, 0.07);
	}

	/*
	 * --- Reach and measurement: SEO, digital marketing -----------------
	 * Concentric arcs, not a ranking chart. Nothing here represents a number,
	 * because there is no result data to represent.
	 */
	.virgo-motif-signal .virgo-hero::after {
		right: 4%;
		top: 18%;
		width: 20rem;
		height: 20rem;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.10);
		box-shadow:
			inset 0 0 0 3.5rem rgba(255, 255, 255, 0.03),
			inset 0 0 0 3.6rem rgba(255, 255, 255, 0.10),
			inset 0 0 0 7.2rem rgba(255, 255, 255, 0.03),
			inset 0 0 0 7.3rem rgba(255, 255, 255, 0.09);
	}

	/*
	 * --- Location: the Dubai page --------------------------------------
	 * A plain marker. No skyline, no landmark, nothing that would imply an
	 * office in Dubai — the company is registered in Ajman and the page says
	 * so.
	 */
	.virgo-motif-place .virgo-hero::after {
		right: 8%;
		top: 26%;
		width: 12rem;
		height: 12rem;
		border-radius: 50%;
		border: 1px dashed rgba(255, 255, 255, 0.16);
		background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.16) 0 0.5rem, transparent 0.55rem);
	}
}

/* The hero copy always sits above the motif. */
.virgo-service-page .virgo-hero > * {
	position: relative;
	z-index: 1;
}

/* =========================================================================
   14. Elementor buttons — one gradient, and only on the primary

   `.elementor-button` defaulted to the brand gradient, so any button added in
   the editor without a variant class became a full-strength primary. It also
   used the decorative gradient, whose orange end gives white text 2.26:1.
   Primary now uses the AA-safe fill; an unclassed button falls back to the
   secondary treatment rather than to the loudest one on the site.
   ========================================================================= */

.elementor-button,
.elementor-button-link {
	background-image: none;
	background-color: var(--virgo-bg-card);
	color: var(--virgo-text);
	border-color: var(--virgo-line-strong);
	letter-spacing: 0.005em;
}

.elementor-button:hover,
.elementor-button:focus-visible {
	background-image: none;
	background-color: var(--virgo-bg-card-hover);
	border-color: var(--virgo-accent);
	color: var(--virgo-text);
}

.virgo-ebtn--primary .elementor-button {
	background-image: var(--virgo-brand-gradient-fill);
	background-color: var(--wp--preset--color--violet-deep);
	background-size: 160% 100%;
	background-position: 0% 50%;
	border-color: transparent;
	color: #fff;
	box-shadow: 0 10px 30px -14px rgba(109, 40, 217, 0.75);
	transition: background-position var(--virgo-transition-slow), transform var(--virgo-transition), box-shadow var(--virgo-transition);
}

.virgo-ebtn--primary .elementor-button:hover,
.virgo-ebtn--primary .elementor-button:focus-visible {
	background-image: var(--virgo-brand-gradient-fill);
	background-position: 100% 50%;
	color: #fff;
	box-shadow: 0 16px 40px -16px rgba(190, 24, 93, 0.7);
}

/* A tertiary action added in Elementor. */
.virgo-ebtn--tertiary .elementor-button {
	min-height: 0;
	padding: 0;
	background: none;
	background-image: none;
	border: 0;
	color: var(--virgo-link);
	box-shadow: none;
}

.virgo-ebtn--tertiary .elementor-button:hover {
	background: none;
	color: var(--virgo-text);
	transform: none;
}

/* =========================================================================
   15. Elementor grid width parity

   Elementor's boxed container capped at the old CSS wide width. It reads the
   token now, so an Elementor section and a block-template section land on the
   same vertical edges.
   ========================================================================= */

.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner {
	max-width: var(--virgo-wide);
}

/* Bands built in Elementor use the same three-step rhythm as every other
   band, instead of Elementor's own per-section padding. */
.virgo-band--el {
	padding-block: var(--section-space);
}

.virgo-band--el.virgo-band--tight {
	padding-block: var(--section-space-sm);
}

.virgo-band--el.virgo-band--loose,
.virgo-band--el.virgo-hero {
	padding-block: var(--section-space-lg);
}

.virgo-band--el.virgo-band--flush-top {
	padding-block-start: 0;
}

.virgo-band--el.virgo-band--flush-bottom {
	padding-block-end: 0;
}

/* The pillar overview sits directly under the section head and directly above
   the grouped detail, so it needs breathing room on both sides. */
.virgo-pillars-lead {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.elementor .virgo-services-grouped {
	display: block;
	width: 100%;
}

/* =========================================================================
   16. Related guides on a service page

   Seven service pages point at a published guide. Four do it under a "Further
   reading" heading; three name it inside a paragraph. Rather than rewrite
   three approved sentences, any link from a service page into /insights/ takes
   a guide affordance, so the reference reads as a signposted related guide
   wherever it sits.
   ========================================================================= */

.virgo-service-page .virgo-prose a[href*="/insights/"] {
	display: inline;
	padding: 0.05em 0.1em 0.05em 1.35em;
	position: relative;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	border-radius: 3px;
}

/* The document glyph from the icon set, masked so it takes the link colour. */
.virgo-service-page .virgo-prose a[href*="/insights/"]::before {
	content: "";
	position: absolute;
	left: 0.1em;
	top: 0.18em;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--virgo-guide-mask) center / contain no-repeat;
	mask: var(--virgo-guide-mask) center / contain no-repeat;
	opacity: 0.85;
}

/* A "Further reading" section closes the page, so it gets a quiet panel
   rather than yet another full-width prose block. */
@supports selector(:has(*)) {
	.virgo-service-page .virgo-prose > .elementor-widget-heading:has(h2):last-of-type ~ .elementor-widget-text-editor {
		padding: clamp(1rem, 2vw, 1.25rem);
		border: 1px solid var(--virgo-line);
		border-radius: var(--virgo-radius-lg);
		background-color: var(--virgo-bg-card);
	}
}

/* =========================================================================
   17. About — the founder media column

   The founder image is still a placeholder and stays one. What changes is the
   column it will land in: a 55/45 split, so when the 1200 x 1500 portrait is
   added it sits in a column already proportioned for it rather than forcing a
   re-layout.
   ========================================================================= */

@media (min-width: 62rem) {
	.page-id-13 .elementor .virgo-split {
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
		gap: clamp(2rem, 4vw, 3.5rem);
	}
}

/* "In short" is a fact panel, not an essay: tighter rhythm than a prose block. */
.page-id-13 .virgo-panel .elementor-widget-text-editor li,
.page-id-13 .virgo-panel .elementor-widget-text-editor p {
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* =========================================================================
   18. Legal pages

   Content first. A reading measure, generous heading spacing and clear link
   focus — no cards, no decoration, and not one word of the wording touched.
   ========================================================================= */

.page-id-3 .virgo-prose,
.page-id-23 .virgo-prose {
	max-width: min(44rem, var(--virgo-prose));
}

.page-id-3 .virgo-prose > .elementor-widget-text-editor,
.page-id-23 .virgo-prose > .elementor-widget-text-editor {
	font-size: 1rem;
	line-height: 1.75;
}

.page-id-3 .virgo-prose li,
.page-id-23 .virgo-prose li {
	margin-bottom: 0.5rem;
	line-height: 1.7;
}

.page-id-3 .virgo-prose a:focus-visible,
.page-id-23 .virgo-prose a:focus-visible {
	outline: 2px solid var(--virgo-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Legal pages carry no motif and no decorative band. */
.page-id-3 .virgo-hero::after,
.page-id-23 .virgo-hero::after {
	content: none;
}

/* =========================================================================
   19. Service sections

   The sixteen service and location pages used to be one band holding a single
   prose column, with each H2 given a hairline and space by
   `.virgo-prose > .elementor-widget-heading:has(h2)`. That produced the right
   picture but meant the whole page was one container in Elementor: an owner
   could not select "Capabilities" or "Who this is for" on its own.

   Each H2 is now its own top-level section, so the Navigator reads as an
   outline of the page and every part is independently editable. The visual
   result is deliberately unchanged — the separator and the spacing simply move
   from the heading to the section that now contains it.

   All sections share one background, so the sequence still reads as one
   continuous column rather than a stack of cards.
   ========================================================================= */

/*
 * Sections supply no vertical padding of their own; the rhythm comes from the
 * margin and padding on the run below. The first is flush under the hero
 * (it also carries --flush-top) and the last closes the run with the standard
 * section space before the call to action.
 */
.virgo-band--el.virgo-service-section {
	padding-block: 0;
}

.virgo-band--el.virgo-service-section--last {
	padding-block-end: var(--section-space);
}

.virgo-service-section + .virgo-service-section {
	margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
}

/*
 * The separator. It sits on the inner shell rather than the section, because
 * the rule it replaces was on the H2 and therefore only as wide as the prose
 * measure — a full-viewport hairline would be a visible change, and this pass
 * is not meant to have any.
 */
.virgo-service-section:not(.virgo-service-section--first) > .virgo-service-section__inner::before {
	content: "";
	display: block;
	width: min(44rem, 100%);
	height: 1px;
	background-color: var(--virgo-line);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/*
 * The inner shell keeps `.virgo-prose`, so the reading measure, the grid
 * exemption and the heading rhythm declared in section 12 all continue to
 * apply unchanged — running text stays at 44rem and card grids still use the
 * full content shell.
 */
.virgo-service-section__inner > .elementor-widget-heading:first-child {
	margin-top: 0;
}

/* A section is a landmark for the owner, not a new stacking context. */
.virgo-service-section {
	position: relative;
}