/*
 * Consultation banner (homepage, above the footer). Figma NdcwLxoPTX756JayKGOtUO:
 * 104:73 (360), 104:85 (390), 104:97 (768), 104:109 (1440), 104:121 (1920) and the
 * integrated frame 113:379 (banner at the footer's shared content width, separator below).
 * Breakpoints follow the site's Elementor defaults: mobile <= 767, tablet 768-1024, desktop >= 1025.
 * The outer gutters mirror the footer container (48px tablet/desktop, 24px mobile, 1140px box)
 * so the banner's edges line up with the footer below it at every width.
 */

.ta-consult {
	--ta-consult-bg: #f3f6ff;
	--ta-consult-accent: #0062fe;
	--ta-consult-accent-hover: #0054d9;
	--ta-consult-ink: #292566;
	--ta-consult-text: #292b43;
	--ta-consult-muted: #53516c;
	--ta-consult-white: #ffffff;
	--ta-consult-ring: rgba(222, 223, 230, 0.65);
	--ta-consult-divider: #e8e8ec;
	--ta-consult-font-head: Alef, sans-serif;
	--ta-consult-font-body: Heebo, sans-serif;

	--ta-consult-max-width: 1140px;
	--ta-consult-section-pad-top: 24px;
	--ta-consult-section-pad-bottom: 24px;
	--ta-consult-section-gutter: 24px;
	--ta-consult-radius: 32px;
	--ta-consult-pad-block: 28px;
	--ta-consult-pad-inline: 24px;
	--ta-consult-gap: 24px;
	--ta-consult-ring-size: 144px;
	--ta-consult-photo-size: 124px;
	--ta-consult-dot-size: 22px;
	--ta-consult-title-size: 30px;
	--ta-consult-title-line: 36px;
	--ta-consult-body-size: 15px;
	--ta-consult-body-line: 24px;
	--ta-consult-cta-width: 100%;
	--ta-consult-cta-height: 56px;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--ta-consult-section-pad-top) var(--ta-consult-section-gutter) 0;
	background: var(--ta-consult-white);
	direction: rtl;
	text-align: right;
	font-family: var(--ta-consult-font-body);
	color: var(--ta-consult-text);
}

.ta-consult *,
.ta-consult *::before,
.ta-consult *::after {
	box-sizing: border-box;
}

.ta-consult__inner {
	max-width: var(--ta-consult-max-width);
	margin-inline: auto;
}

/* ---------------------------------------------------------------- */
/* Banner                                                             */
/* ---------------------------------------------------------------- */

.ta-consult__banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ta-consult-gap);
	padding: var(--ta-consult-pad-block) var(--ta-consult-pad-inline);
	border-radius: var(--ta-consult-radius);
	background: var(--ta-consult-bg);
}

/*
 * Subtle separator between the banner and the footer, at the shared content width (113:402).
 * Anchored on the section: Elementor's frontend.min.css has `.elementor hr { margin: 0;
 * background-color: transparent }`, which outranks a lone class selector.
 */
.ta-consult .ta-consult__separator {
	display: block;
	height: 1px;
	margin: 0;
	margin-top: var(--ta-consult-section-pad-bottom);
	border: 0;
	background-color: var(--ta-consult-divider);
}

/* ---------------------------------------------------------------- */
/* Portrait: ring, photo and the orbiting dot                         */
/* ---------------------------------------------------------------- */

.ta-consult__portrait {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--ta-consult-ring-size);
	height: var(--ta-consult-ring-size);
	overflow: visible;
}

.ta-consult__ring {
	position: absolute;
	inset: 0;
	border: 1px solid var(--ta-consult-ring);
	border-radius: 50%;
	pointer-events: none;
}

/* Anchored on the section so it beats the Elementor sheets that match plain `img`. */
.ta-consult .ta-consult__photo {
	display: block;
	width: var(--ta-consult-photo-size);
	height: var(--ta-consult-photo-size);
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 50%;
	background: var(--ta-consult-bg);
}

/*
 * Orbit: a wrapper the exact size of the ring, centred on the portrait, rotated as a whole.
 * The dot sits on the wrapper's top edge, so its centre is always exactly one ring-radius
 * from the centre, which keeps it on the outline at every breakpoint without any per-size
 * maths. 45deg is the Figma resting position (top-right); one clockwise turn = 24s, linear.
 */
.ta-consult__orbit {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	transform: rotate(45deg);
	transform-origin: 50% 50%;
	animation: ta-consult-orbit 24s linear infinite;
	pointer-events: none;
	overflow: visible;
}

.ta-consult__dot {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--ta-consult-dot-size);
	height: var(--ta-consult-dot-size);
	margin: 0;
	margin-top: calc(var(--ta-consult-dot-size) / -2);
	margin-left: calc(var(--ta-consult-dot-size) / -2);
	border: 3px solid var(--ta-consult-bg);
	border-radius: 50%;
	background: var(--ta-consult-accent);
}

@keyframes ta-consult-orbit {
	from { transform: rotate(45deg); }
	to   { transform: rotate(405deg); }
}

/* ---------------------------------------------------------------- */
/* Content                                                            */
/* ---------------------------------------------------------------- */

.ta-consult__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
	min-width: 0;
}

.ta-consult__message {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
}

.ta-consult__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	font-family: var(--ta-consult-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 21px;
	color: var(--ta-consult-accent);
}

.ta-consult__eyebrow-rule {
	flex: 0 0 32px;
	width: 32px;
	height: 2px;
	background: var(--ta-consult-accent);
}

.ta-consult__title {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--ta-consult-font-head);
	font-size: var(--ta-consult-title-size);
	font-weight: 700;
	line-height: var(--ta-consult-title-line);
	color: var(--ta-consult-ink);
	overflow-wrap: break-word;
}

.ta-consult__title-line {
	display: block;
}

.ta-consult__body {
	width: 100%;
	margin: 0;
	font-family: var(--ta-consult-font-body);
	font-size: var(--ta-consult-body-size);
	font-weight: 400;
	line-height: var(--ta-consult-body-line);
	color: var(--ta-consult-text);
}

/* ---------------------------------------------------------------- */
/* Action                                                             */
/* ---------------------------------------------------------------- */

.ta-consult__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: var(--ta-consult-cta-width);
	max-width: 100%;
}

/* Full reset first: the parent theme paints every button pink on hover/focus (#cc3366). */
.ta-consult .ta-consult__cta,
.ta-consult .ta-consult__cta:hover,
.ta-consult .ta-consult__cta:focus,
.ta-consult .ta-consult__cta:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: var(--ta-consult-cta-height);
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: calc(var(--ta-consult-cta-height) / 2);
	background: var(--ta-consult-accent);
	box-shadow: none;
	color: var(--ta-consult-white);
	font-family: var(--ta-consult-font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ta-consult .ta-consult__cta:hover,
.ta-consult .ta-consult__cta:active {
	background: var(--ta-consult-accent-hover);
}

.ta-consult .ta-consult__cta:focus {
	outline: none;
}

.ta-consult .ta-consult__cta:focus-visible {
	outline: 3px solid var(--ta-consult-ink);
	outline-offset: 3px;
}

.ta-consult__cta-arrow {
	display: inline-block;
	line-height: 1;
}

.ta-consult__hint {
	width: 100%;
	margin: 0;
	font-family: var(--ta-consult-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 21px;
	text-align: center;
	color: var(--ta-consult-muted);
}

/* ---------------------------------------------------------------- */
/* Tablet (104:97): still stacked, larger type and portrait            */
/* ---------------------------------------------------------------- */

@media (min-width: 768px) {
	.ta-consult {
		--ta-consult-section-pad-top: 48px;
		--ta-consult-section-pad-bottom: 48px;
		--ta-consult-section-gutter: 48px;
		--ta-consult-radius: 48px;
		--ta-consult-pad-block: 44px;
		--ta-consult-pad-inline: 40px;
		--ta-consult-ring-size: 190px;
		--ta-consult-photo-size: 170px;
		--ta-consult-title-size: 40px;
		--ta-consult-title-line: 48px;
		--ta-consult-body-size: 17px;
		--ta-consult-body-line: 27px;
	}
}

/* ---------------------------------------------------------------- */
/* Desktop (113:379 / 104:109): portrait left, content right           */
/* ---------------------------------------------------------------- */

@media (min-width: 1025px) {
	.ta-consult {
		--ta-consult-section-pad-bottom: 40px;
		--ta-consult-pad-inline: 64px;
		--ta-consult-gap: 72px;
		--ta-consult-ring-size: 280px;
		--ta-consult-photo-size: 240px;
		--ta-consult-cta-width: 280px;
	}

	/* RTL row-reverse: the first DOM child (portrait) lands on the left, content on the right. */
	.ta-consult__banner {
		flex-direction: row-reverse;
		align-items: center;
	}

	.ta-consult__content {
		flex: 1 1 auto;
	}

	.ta-consult__action {
		align-self: flex-start;
	}
}

/* ---------------------------------------------------------------- */
/* Reduced motion: no rotation, dot stays at its resting position      */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ta-consult__orbit {
		animation: none;
	}

	.ta-consult .ta-consult__cta {
		transition: none;
	}
}