/**
 * Faltec X — visual effects (site-wide).
 *
 * Static treatments Elementor's native style controls cannot express:
 * gradient text, button pseudo-elements, <details> states, header states and
 * reduced-motion fallbacks. Colours come from the Elementor global variables
 * (--fx-*). Selectors target visual fx-* classes, never fx-js-* hooks.
 */

/* ---------- Font fallbacks (no font files) ----------
   The web fonts (Anton, Poppins, Orbitron via Elementor) swap in after first
   paint. Until then text uses a locally installed face resized to the web
   font's width and vertical metrics, so it neither shows as Times nor
   reflows noticeably when the real font arrives. Values measured against the
   loaded web fonts (size-adjust = width ratio; overrides = metric / size). */
@font-face {
	font-family: "Poppins Fallback";
	src: local("Arial"), local("ArialMT"), local("Roboto");
	size-adjust: 111.51%;
	ascent-override: 94.16%;
	descent-override: 31.39%;
	line-gap-override: 8.97%;
}

@font-face {
	font-family: "Anton Fallback Narrow";
	src: local("Arial Narrow"), local("ArialNarrow");
	size-adjust: 84.46%;
	ascent-override: 139.71%;
	descent-override: 39.07%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Anton Fallback";
	src: local("Arial"), local("ArialMT"), local("Roboto");
	size-adjust: 69.25%;
	ascent-override: 170.40%;
	descent-override: 47.65%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Orbitron Fallback";
	src: local("Arial"), local("ArialMT"), local("Roboto");
	size-adjust: 117.13%;
	ascent-override: 86.23%;
	descent-override: 20.49%;
	line-gap-override: 0%;
}

/* The kit defines these variables as the bare family names; the same names
   come first here, so the web fonts are used exactly as before. */
html:root {
	--fx-font-display: Anton, "Anton Fallback Narrow", "Anton Fallback", sans-serif;
	--fx-font-body: Poppins, "Poppins Fallback", sans-serif;
	--fx-font-tech: Orbitron, "Orbitron Fallback", sans-serif;
}

:root {
	/* The three gradient families. */
	--fx-grad-signal: linear-gradient(135deg, var(--fx-accent) 0%, var(--fx-accent-blue) 100%); /* dark surfaces */
	--fx-grad-ink: linear-gradient(135deg, var(--fx-secondary) 0%, var(--fx-accent-blue) 100%); /* light surfaces, accessible */
	--fx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Text rendering ---------- */

.elementor :is(h1, h2, h3) {
	text-wrap: balance;
}

.elementor p {
	text-wrap: pretty;
}

/* ---------- Focus ---------- */

.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor summary:focus-visible {
	outline: 3px solid var(--fx-accent-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

.elementor .fx-btn-primary:focus-visible {
	border-radius: 999px;
}

/* ---------- Buttons: gradient fade + chevron ---------- */

.elementor .fx-btn-primary {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: translate 0.3s var(--fx-ease-out), box-shadow 0.3s var(--fx-ease-out), color 0.3s;
}

.elementor .fx-btn-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fx-grad-signal);
	opacity: 0;
	transition: opacity 0.35s var(--fx-ease-out);
}

.elementor .fx-btn-primary::after {
	content: '';
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.15em;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: translate 0.3s var(--fx-ease-out);
}

/* Engaged state (cyan → blue fill, navy text, chevron nudge): keyboard focus
   everywhere; hover only on devices that really hover. Touch browsers keep
   :hover after a tap, which would leave the fill "stuck" on the button. */
.elementor .fx-btn-primary:focus-visible {
	color: var(--fx-navy);
}

.elementor .fx-btn-primary:focus-visible::before {
	opacity: 1;
}

.elementor .fx-btn-primary:focus-visible::after {
	translate: 3px 0;
}

@media (hover: hover) {
	.elementor .fx-btn-primary:hover {
		color: var(--fx-navy);
	}

	.elementor .fx-btn-primary:hover::before {
		opacity: 1;
	}

	.elementor .fx-btn-primary:hover::after {
		translate: 3px 0;
	}
}

/* Touch: the button class's own hover glow and lift don't stick after a tap. */
@media (hover: none) {
	.elementor .fx-btn-primary:hover:not(:focus-visible) {
		box-shadow: none;
		transform: none;
	}
}

/* ---------- Accent typography ---------- */

/* Hero H1: the display line, then a sentence-case sub-line (a <span> inside
   the approved H1) carrying the single gradient accent word (<em>). */
.elementor .fx-hero-title > span:not(.fx-w) {
	display: block;
	white-space: normal; /* the display line itself is kept on one line (no reflow when Anton loads) */
	margin-top: 0.45em;
	max-width: 26em;
	font-family: var(--fx-font-body);
	font-size: max(0.3em, var(--fx-sub-min, 0px)); /* optional floor, set per H1 (unset on Home) */
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-transform: none;
	color: var(--fx-charcoal);
}

/* The approved H1 keeps its em dash in the text (search engines, screen
   readers); it is hidden visually only, at the owner's request. */
.elementor .fx-hero-title > span:not(.fx-w) > span:first-child:not(.fx-w) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Heading accent system: one approved word per major heading, set in the
   Faltec X gradient. Blue ink gradient on light surfaces (legible), the
   cyan → blue signal gradient on dark surfaces. Anton headings use the
   italic accent; Poppins statements stay upright. */
.elementor :is(.fx-hero-title, .fx-section h2) em {
	font-style: normal;
	background-image: var(--fx-grad-ink);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.elementor .fx-section h2:not(.fx-statement) em {
	font-style: italic;
	padding-right: 0.16em;
	margin-right: -0.1em;
}

.elementor .fx-section-dark h2 em {
	background-image: var(--fx-grad-signal);
}

/* Final CTA: the italic accent is the last word before the "?". Gradient text
   only paints inside the element's own box, so the slanted last letter needs
   enough right padding to stay fully visible, plus clear space before "?". */
.elementor .fx-cta-band h2:not(.fx-statement) em {
	padding-right: 0.3em;
	margin-right: 0.06em;
	/* An accent phrase that wraps keeps the clearance on every line. */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* A CTA band instance without supporting copy shows no empty paragraph. */
.elementor .fx-cta-band p:empty {
	display: none;
}

/* Links inside CTA band copy (e.g. a service page's pricing link). */
.elementor .fx-cta-band p a {
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

/* Final CTA (reference treatment): navy with two soft radial light fields.
   The lower edge settles into the footer navy so the CTA and footer read as
   one continuous ending. */
.elementor .fx-cta-band {
	background-image:
		linear-gradient(180deg, rgba(34, 48, 63, 0) 62%, var(--fx-navy) 100%),
		radial-gradient(circle at 80% 30%, rgba(59, 91, 138, 0.6), transparent 50%),
		radial-gradient(circle at 10% 90%, rgba(143, 191, 218, 0.18), transparent 50%);
}

/* No hard seam where the footer follows the CTA: one dark environment,
   divided only by a quiet gradient hairline across the content width
   (strongest at the centre, fading out at both ends). The CTA's lower
   padding and this top padding set the actual spacing. */
body:has(.fx-cta-band) .elementor .fx-footer {
	position: relative;
	padding-block-start: clamp(3.5rem, 5vw, 4.5rem);
	border-block-start-color: transparent;
}

body:has(.fx-cta-band) .elementor .fx-footer::before {
	content: '';
	position: absolute;
	top: 0;
	right: auto;
	bottom: auto;
	left: 50%;
	width: min(var(--fx-container-max), calc(100% - 2 * var(--fx-space-gutter)));
	height: 1px;
	translate: -50% 0;
	background: linear-gradient(90deg, rgba(143, 191, 218, 0) 0%, rgba(143, 191, 218, 0.18) 24%, rgba(0, 157, 255, 0.42) 50%, rgba(143, 191, 218, 0.18) 76%, rgba(143, 191, 218, 0) 100%);
	opacity: 1;
	pointer-events: none;
}

/* ---------- Dark surfaces ---------- */

/* Labels on dark surfaces. Stack cards sit inside a dark section but have
   their own (mostly light) surfaces, so their labels keep the standard label
   colour / their own colour for contrast. */
.elementor .fx-section-dark .fx-label:not(.fx-stack-card .fx-label),
.elementor .fx-card-featured .fx-label-sm {
	color: var(--fx-dark-sky);
}

.elementor .fx-section-dark .fx-lead,
.elementor .fx-section-dark .fx-text-sm,
.elementor .fx-card-featured .fx-text-sm {
	color: var(--fx-gull);
}

.elementor .fx-section-dark .fx-text-sm a {
	color: var(--fx-link-water);
	text-decoration: none;
}

.elementor .fx-section-dark .fx-text-sm a:hover {
	color: var(--fx-accent);
}

/* ---------- Pricing ---------- */

.elementor .fx-card p strong {
	font-weight: 600;
	color: inherit;
}

/* ---------- FAQ ---------- */

/* Open: the question keeps its hover colour; the icon stays neutral and
   secondary, with the gradient carried by a thin ring only. */
.elementor details[open] > .fx-faq-question {
	color: var(--fx-primary);
}

.elementor details[open] > summary .fx-faq-icon {
	transform: rotate(45deg);
	border-color: transparent;
	background:
		linear-gradient(#FFFFFF, #FFFFFF) padding-box,
		var(--fx-grad-signal) border-box;
	color: var(--fx-navy);
}

/* Keyboard focus: a restrained ring around the question text and the icon,
   not the whole row. */
.elementor .fx-faq-question:focus-visible {
	outline: none;
}

.elementor .fx-faq-question :is(h2, h3, h4) {
	width: fit-content;
}

.elementor .fx-faq-question:focus-visible :is(h2, h3, h4) {
	outline: 2px solid var(--fx-accent-blue);
	outline-offset: 0.4rem;
	border-radius: 0.25rem;
}

.elementor .fx-faq-question:focus-visible .fx-faq-icon {
	box-shadow: 0 0 0 3px rgba(0, 157, 255, 0.25);
}

/* The answer text fades in just behind the opening (closed answers are
   hidden natively; this only sets the fade). */
.elementor .fx-faq-answer {
	transition: opacity 0.18s ease 0.06s;
}

.elementor .fx-faq-item:not([open]) .fx-faq-answer {
	opacity: 0;
}

@supports selector(::details-content) {
	:root {
		interpolate-size: allow-keywords;
	}

	.elementor .fx-faq-item::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size 0.3s var(--fx-ease-out), content-visibility 0.3s allow-discrete;
	}

	.elementor .fx-faq-item[open]::details-content {
		block-size: auto;
	}
}

/* ---------- Header ---------- */

.elementor .fx-header {
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	/* Reveal: gentle quint-out (the expo-out ease front-loaded the move and read as a snap). */
	transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.45s var(--fx-ease-out), border-color 0.45s var(--fx-ease-out), -webkit-backdrop-filter 0.45s var(--fx-ease-out), backdrop-filter 0.45s var(--fx-ease-out);
}

.elementor .fx-header.is-hidden {
	translate: 0 -100%;
	/* Hide: soft accelerate-decelerate so the bar glides away rather than snapping off. */
	transition: translate 0.55s cubic-bezier(0.55, 0, 0.25, 1), background-color 0.45s var(--fx-ease-out), border-color 0.45s var(--fx-ease-out), -webkit-backdrop-filter 0.45s var(--fx-ease-out), backdrop-filter 0.45s var(--fx-ease-out);
}

.elementor .fx-header.is-on-dark {
	background-color: rgba(34, 48, 63, 0.78);
	border-color: var(--fx-hairline-dark);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.elementor .fx-header { background-color: rgba(250, 250, 248, 0.96); }
	.elementor .fx-header.is-on-dark { background-color: rgba(34, 48, 63, 0.97); }
}

@media (prefers-reduced-transparency: reduce) {
	.elementor .fx-header { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--fx-bg-warm); }
	.elementor .fx-header.is-on-dark { background-color: var(--fx-navy); }
}

body.admin-bar .elementor .fx-header { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .elementor .fx-header { top: 46px; }
}

/* Logo pair: dark logo on light, light logo on dark (crossfade). The light
   logo is taken out of flow at its static position (inset: auto), i.e.
   exactly over the first logo inside the link's content box, whatever
   touch-target padding the link has at each breakpoint. */
.elementor .fx-header .fx-logo {
	transition: opacity 0.45s var(--fx-ease-out);
}

.elementor .fx-header .fx-logo + .fx-logo {
	position: absolute;
	inset: auto;
	opacity: 0;
}

.elementor .fx-header.is-on-dark .fx-logo:first-child { opacity: 0; }
.elementor .fx-header.is-on-dark .fx-logo + .fx-logo { opacity: 1; }

/* Header CTA on the dark state: invert to a light pill so it keeps its shape. */
.elementor .fx-header .fx-btn-primary {
	transition: translate 0.3s var(--fx-ease-out), box-shadow 0.3s var(--fx-ease-out), color 0.3s, background-color 0.45s var(--fx-ease-out);
}

.elementor .fx-header.is-on-dark .fx-btn-primary {
	background-color: #FFFFFF;
	color: var(--fx-navy);
}

.elementor .fx-header .elementor-nav-menu--main .elementor-item {
	margin: 0 0.95rem;
	padding: 0.5rem 0;
	font-family: var(--fx-font-body), sans-serif;
	font-size: 0.84375rem;
	font-weight: 400;
	color: var(--fx-charcoal);
	fill: var(--fx-charcoal);
	transition: color 0.3s;
}

.elementor .fx-header .elementor-nav-menu--main .elementor-item:hover,
.elementor .fx-header .elementor-nav-menu--main .elementor-item:focus-visible,
.elementor .fx-header .elementor-nav-menu--main .elementor-item.highlighted {
	color: var(--fx-primary);
}

.elementor .fx-header.is-on-dark .elementor-nav-menu--main .elementor-item { color: var(--fx-link-water); fill: var(--fx-link-water); }
.elementor .fx-header.is-on-dark .elementor-nav-menu--main .elementor-item:hover { color: #FFFFFF; }
.elementor .fx-header.is-on-dark .elementor-menu-toggle { color: #FFFFFF; }

.elementor .fx-header .e--pointer-underline .elementor-item::after {
	height: 1px;
	background: var(--fx-grad-signal);
}

.elementor .fx-header .elementor-nav-menu--main .sub-menu {
	min-width: 13rem;
	padding: 0.5rem;
	border: 1px solid var(--fx-hairline);
	border-radius: 0.875rem;
	background-color: #FFFFFF;
	box-shadow: 0 24px 48px -24px rgba(34, 48, 63, 0.25);
}

.elementor .fx-header .elementor-nav-menu--main .sub-menu .elementor-sub-item {
	margin: 0;
	padding: 0.6rem 0.85rem;
	border-radius: 0.5rem;
	font-size: 0.84375rem;
	color: var(--fx-charcoal);
}

.elementor .fx-header .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover,
.elementor .fx-header .elementor-nav-menu--main .sub-menu .elementor-sub-item:focus-visible {
	background-color: var(--fx-link-water);
	color: var(--fx-navy);
}

/* Current page in the menus (desktop dropdown + mobile panel). Elementor Pro's
   default paints the active dropdown item as a dark grey block; the Faltec X
   current state is quiet: primary-blue text, no block. Hover/keyboard focus
   still apply on top of it. */
.elementor .fx-header .elementor-nav-menu--dropdown :is(.elementor-item, .elementor-sub-item).elementor-item-active,
.elementor .fx-header .elementor-nav-menu--dropdown a.current {
	background-color: transparent;
	color: var(--fx-primary);
	font-weight: 500;
}

.elementor .fx-header .elementor-menu-toggle {
	color: var(--fx-navy);
	background-color: transparent;
}

.elementor .fx-header .elementor-nav-menu--dropdown {
	border-top: 1px solid var(--fx-hairline);
	background-color: var(--fx-bg-warm);
}

.elementor .fx-header .elementor-nav-menu--dropdown a {
	padding: 0.95rem var(--fx-space-gutter);
	font-family: var(--fx-font-body), sans-serif;
	font-size: 0.9375rem;
	color: var(--fx-navy);
	background-color: transparent; /* Elementor Pro paints :focus as a dark block */
}

.elementor .fx-header .elementor-nav-menu--dropdown a:hover,
.elementor .fx-header .elementor-nav-menu--dropdown a:focus-visible,
.elementor .fx-header .elementor-nav-menu--dropdown a.highlighted,
.elementor .fx-header .elementor-nav-menu--dropdown a:is(.elementor-item-active, .current):is(:hover, :focus-visible) {
	background-color: var(--fx-link-water);
	color: var(--fx-navy);
}

/* ---------- Footer ---------- */

.elementor .fx-footer .fx-text-sm a {
	color: var(--fx-link-water);
	text-decoration: none;
	transition: color 0.3s;
}

.elementor .fx-footer .fx-text-sm a:hover {
	color: var(--fx-accent);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.elementor *,
	.elementor *::before,
	.elementor *::after {
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Fixes: header nav ---------- */

/* Keep the V3 nav-menu on one line inside the atomic header row. */
.elementor .fx-header .elementor-nav-menu--main .elementor-nav-menu {
	flex-wrap: nowrap;
}

/* Mobile menu: the dropdown overlays the page below the bar (Elementor's
   stretch layout), so it never adds height or width to the header row. */
.elementor .fx-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	position: absolute;
	z-index: 9997;
}

/* Tablet: the burger sits at the far right, after the header CTA. */
@media (max-width: 1024px) {
	.elementor .fx-header .fx-header-nav > .elementor-widget-nav-menu { order: 2; }
}

/* ---------- Header: transparent top state ---------- */

/* At the very top of the page (html.fx-at-top, set in the head) the bar
   drops its frosted surface and sits directly on the Hero; the approved
   frosted / dark states return as soon as the page scrolls. Never while the
   menu panel is open. Logo, nav and button keep their normal colours (the
   Hero is light; dark surfaces still switch to the light set). */
html.fx-at-top .elementor .fx-header:not(:has(.elementor-menu-toggle.elementor-active)) {
	border-color: transparent;
	background-color: transparent;
	-webkit-backdrop-filter: blur(0px) saturate(1);
	backdrop-filter: blur(0px) saturate(1);
}

/* ---------- Header: tablet and mobile menu ---------- */

@media (max-width: 1024px) {
	/* The panel is positioned from the fixed bar itself (not the widget), so
	   it always starts exactly at the bar's lower edge at full width. */
	.elementor .fx-header .fx-header-inner,
	.elementor .fx-header .fx-header-nav,
	.elementor .fx-header .elementor-widget-nav-menu {
		position: static;
	}

	/* Toggle: a 44px touch target; the close icon turns in once (restrained). */
	.elementor .fx-header .elementor-menu-toggle {
		width: 2.75rem;
		height: 2.75rem;
		margin-inline-end: -0.625rem;
		padding: 0;
		border-radius: 50%;
		font-size: 1.375rem;
	}

	.elementor .fx-header .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close {
		animation: fx-toggle-in 0.35s var(--fx-ease-out);
	}

	/* Panel: full screen below the bar; clip-reveals downward. */
	.elementor .fx-header nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		top: 100% !important;
		left: 0 !important;
		width: 100% !important;
		height: calc(100dvh - var(--fx-hdr-h, 4rem));
		margin-top: 0;
		padding-block: 0.5rem 2rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 1px solid var(--fx-hairline);
		background-color: var(--fx-bg-warm);
		transform: none;
		transition: clip-path 0.45s var(--fx-ease-out), opacity 0.25s ease, visibility 0s;
	}

	.elementor .fx-header .elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active) + nav.elementor-nav-menu__container {
		max-height: none;
		transform: none;
		opacity: 0;
		visibility: hidden;
		clip-path: inset(0 0 100% 0);
		transition: clip-path 0.35s var(--fx-ease-out), opacity 0.2s ease, visibility 0s 0.35s;
	}

	.elementor .fx-header .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu__container {
		max-height: none;
		transform: none;
		opacity: 1;
		visibility: visible;
		clip-path: inset(0);
		animation: none;
	}

	.elementor .fx-header nav.elementor-nav-menu--dropdown .elementor-item {
		min-height: 3.5rem;
		padding: 0.9rem var(--fx-space-gutter);
		border-bottom: 1px solid var(--fx-hairline);
		font-size: 1.25rem;
		font-weight: 500;
		letter-spacing: -0.01em;
	}

	.elementor .fx-header nav.elementor-nav-menu--dropdown .elementor-sub-item {
		min-height: 3rem;
		padding: 0.75rem var(--fx-space-gutter) 0.75rem calc(var(--fx-space-gutter) + 1rem);
		border-bottom: 1px solid var(--fx-hairline);
		font-size: 1rem;
		color: var(--fx-charcoal);
	}

	.elementor .fx-header nav.elementor-nav-menu--dropdown .sub-arrow {
		padding: 0.5rem;
		margin-inline-end: -0.5rem;
	}

	/* While the menu is open the page behind it does not scroll. */
	html:has(.fx-header .elementor-menu-toggle.elementor-active) {
		overflow: hidden;
	}
}

@keyframes fx-toggle-in {
	from { opacity: 0; rotate: -90deg; scale: 0.6; }
}

/* Mobile: the bar holds logo + menu only; the primary action moves into the
   open panel, pinned to its lower edge as a full-width button. */
@media (max-width: 767px) {
	.elementor .fx-header nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		padding-block-end: 7rem;
	}

	.elementor .fx-header .fx-header-nav:has(.elementor-menu-toggle.elementor-active) > .fx-btn-sm {
		position: absolute;
		top: calc(100dvh - 4.75rem - env(safe-area-inset-bottom, 0px));
		right: var(--fx-space-gutter);
		left: var(--fx-space-gutter);
		z-index: 9998;
		display: inline-flex;
		justify-content: center;
		min-height: 3.25rem;
		font-size: 0.9375rem;
		animation: fx-panel-cta-in 0.45s var(--fx-ease-out) 0.08s backwards;
	}
}

@keyframes fx-panel-cta-in {
	from { opacity: 0; translate: 0 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor .fx-header .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close,
	.elementor .fx-header .fx-header-nav > .fx-btn-sm {
		animation: none !important;
	}
}

/* ---------- Main landmark (inc/template.php) ----------
   Focus lands here from the skip link; the landmark itself shows no ring. */
.fx-main:focus {
	outline: none;
}

/* ---------- Continuity line (.fx-m-care; Website Care coverage) ----------
   Ongoing responsibilities, not steps: one continuous line joins the items
   and trails off at the end (care continues), and every item carries the
   same status dot. Desktop: a horizontal line above the columns; single
   column (≤1024px): a vertical line down the left. The static design is the
   final state; fx-motion.css adds the entrance. */
.elementor .fx-m-care {
	position: relative;
}

.elementor .fx-m-care::before,
.elementor .fx-m-care::after {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
}

.elementor .fx-m-care::before {
	background: var(--fx-hairline-strong);
}

.elementor .fx-m-care::after {
	background: linear-gradient(90deg, var(--fx-secondary) 0%, var(--fx-accent-blue) 100%);
	transform-origin: 0 50%;
}

.elementor .fx-m-care > * {
	position: relative;
	z-index: 1;
	border-block-start-color: transparent;
}

/* Status dot on the line (::before) and its ring (::after, motion only). */
.elementor .fx-m-care > *::before,
.elementor .fx-m-care > *::after {
	content: '';
	position: absolute;
	top: -0.25rem;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	pointer-events: none;
}

.elementor .fx-m-care > *::before {
	background: linear-gradient(135deg, var(--fx-accent) 0%, var(--fx-accent-blue) 100%);
	box-shadow: 0 0 0 4px rgba(0, 157, 255, 0.14);
}

.elementor .fx-m-care > *::after {
	border: 1px solid var(--fx-accent-blue);
	opacity: 0;
}

@media (max-width: 1024px) {
	.elementor .fx-m-care::before,
	.elementor .fx-m-care::after {
		inset: 0 auto 0 0;
		width: 1px;
		height: auto;
		-webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
	}

	.elementor .fx-m-care::after {
		background: linear-gradient(180deg, var(--fx-secondary) 0%, var(--fx-accent-blue) 100%);
		transform-origin: 50% 0;
	}

	.elementor .fx-m-care > * {
		padding-block-start: 0;
		padding-inline-start: 1.75rem;
	}

	.elementor .fx-m-care > *::before,
	.elementor .fx-m-care > *::after {
		top: 0.55rem;
		left: calc(-0.25rem + 0.5px);
	}
}

/* ---------- Form fields (.fx-input, fx-field, fx-field-label) ----------
   Base, hover and focus states live in the fx-input global class. Here:
   the required marker, the error state + message and the Project Type
   select (fx-forms.js turns the native select into a button + listbox;
   the panel follows the Header dropdown: white, hairline, 0.875rem radius). */

/* Required marker: a gradient asterisk after the label of any field whose
   control is required. Assistive technology announces the control as
   required; the asterisk itself has empty alt text. */
.elementor .fx-field:has([required]) > .fx-field-label::after {
	content: "*";
	content: "*" / "";
	margin-inline-start: 0.2em;
	font-weight: 600;
	background: var(--fx-grad-signal);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Error: border only, plus a readable message (fx-forms.js). */
.elementor .fx-input:user-invalid,
.elementor .fx-input[aria-invalid="true"] {
	border-color: #B4400E;
}

.elementor .fx-input[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 1px #B4400E;
}

/* Browser autofill (Chrome/Edge/Safari :-webkit-autofill, standard :autofill,
   Firefox's filter tint): keep the normal field look. The browser background
   is forced with !important, so it is covered by an inset white shadow; the
   focus ring is layered on top. While submitting, the sending-state rule wins
   (and fx-forms.js clears the autofill state). :is() is forgiving, so an
   unsupported pseudo-class never drops the rule. */
.elementor .fx-input:is(:-webkit-autofill, :autofill) {
	-webkit-text-fill-color: #22303F;
	caret-color: #22303F;
	box-shadow: inset 0 0 0 100vmax #FFFFFF;
	filter: none;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 600000s 0s, color 600000s 0s;
}

.elementor .fx-input:is(:-webkit-autofill, :autofill):focus {
	box-shadow: inset 0 0 0 100vmax #FFFFFF, 0 0 0 1px #009DFF;
}

.elementor .fx-input[aria-invalid="true"]:is(:-webkit-autofill, :autofill):focus {
	box-shadow: inset 0 0 0 100vmax #FFFFFF, 0 0 0 1px #B4400E;
}

/* Consent checkboxes (Elementor checkbox inside an fx-field row): the field
   border, radius and focus ring of fx-input; ticked = the signal gradient
   behind Elementor's own white check mark (::before). */
.elementor .fx-field input[type="checkbox"] {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
	border: 1px solid rgba(34, 48, 63, 0.28);
	border-radius: 0.3125rem;
	background: #FFFFFF;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.elementor .fx-field input[type="checkbox"]:hover {
	border-color: rgba(34, 48, 63, 0.5);
}

.elementor .fx-field input[type="checkbox"]:focus-visible {
	border-color: #009DFF;
	box-shadow: 0 0 0 1px #009DFF;
}

.elementor .fx-field input[type="checkbox"]:checked {
	border-color: transparent;
	background: var(--fx-grad-signal);
}

.elementor .fx-field input[type="checkbox"][aria-invalid="true"] {
	border-color: #B4400E;
}

.elementor .fx-field input[type="checkbox"] + label {
	cursor: pointer;
}

.elementor .fx-field-error {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #9A3412;
}

.elementor .fx-field-error::before {
	content: "!";
	content: "!" / "";
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	font-size: 0.6875rem;
	font-weight: 700;
	color: #FFFFFF;
	background-color: #B4400E;
	transform: translateY(0.1rem);
}

/* Project Type select. */
.elementor .fx-select-native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}

.elementor .fx-select {
	position: relative;
}

.elementor .fx-select-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	text-align: start;
	cursor: pointer;
}

.elementor .fx-select-button.is-placeholder .fx-select-value {
	color: var(--fx-charcoal);
}

.elementor .fx-select-button::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-inline-end: 0.2rem;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-0.15rem) rotate(45deg);
	transition: transform 0.25s var(--fx-ease-out);
}

.elementor .fx-select.is-open .fx-select-button::after {
	transform: translateY(0.1rem) rotate(-135deg);
}

.elementor .fx-select.is-open .fx-select-button {
	border-color: #009DFF;
}

.elementor .fx-select-list {
	position: absolute;
	z-index: 20;
	inset-inline: 0;
	inset-block-start: calc(100% + 0.4rem);
	max-height: min(22rem, 60vh);
	margin: 0;
	padding: 0.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	border: 1px solid var(--fx-hairline);
	border-radius: 0.875rem;
	background-color: #FFFFFF;
	box-shadow: 0 24px 48px -24px rgba(34, 48, 63, 0.25);
	animation: fx-select-in 0.18s var(--fx-ease-out);
}

.elementor .fx-select-list[hidden] {
	display: none;
}

@keyframes fx-select-in {
	from { opacity: 0; translate: 0 -0.35rem; }
}

.elementor .fx-select-option {
	position: relative;
	margin: 0;
	padding: 0.7rem 2.25rem 0.7rem 0.85rem;
	border-radius: 0.6rem;
	font-family: var(--fx-font-body);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--fx-navy);
	cursor: pointer;
}

.elementor .fx-select-option.is-active {
	background-color: rgba(0, 157, 255, 0.07);
}

.elementor .fx-select-option[aria-selected="true"] {
	font-weight: 500;
}

/* Selected: a gradient-blue check mark. */
.elementor .fx-select-option[aria-selected="true"]::after {
	content: "";
	position: absolute;
	inset-inline-end: 0.95rem;
	inset-block-start: 50%;
	width: 0.35rem;
	height: 0.65rem;
	border-inline-end: 2px solid var(--fx-accent-blue);
	border-block-end: 2px solid var(--fx-accent-blue);
	transform: translateY(-65%) rotate(45deg);
}

/* "Not sure" sits apart from the service options. */
.elementor .fx-select-option:last-child {
	margin-block-start: 0.35rem;
}

.elementor .fx-select-option:last-child::before {
	content: "";
	position: absolute;
	inset-inline: 0.85rem;
	inset-block-start: -0.2rem;
	border-block-start: 1px solid var(--fx-hairline);
}

@media (prefers-reduced-motion: reduce) {
	.elementor .fx-select-list {
		animation: none;
	}

	.elementor .fx-select-button::after {
		transition: none;
	}
}

/* ---------- Package comparison (.fx-compare, global class; Pricing) ----------
   Rows (e-div-block) of cells (e-paragraph): feature + one value per package.
   Every value starts with its package name in a <span> (Elementor strips inline classes): visually hidden on
   desktop (column headings do the job; screen readers and text extraction
   still get "Starter: Included"), shown as a small label on phones, where
   each row becomes the feature over three short value columns.
   Column focus: pointing at any cell tints that package's whole column. */
.elementor .fx-compare {
	border-block-start: 1px solid var(--fx-hairline-strong);
}

.elementor .fx-compare > * {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
	min-width: 0;
	padding: 0;
	border-block-end: 1px solid var(--fx-hairline);
}

.elementor .fx-compare > * > * {
	margin: 0;
	padding: 0.95rem 1rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--fx-charcoal);
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.elementor .fx-compare > * > :first-child {
	padding-inline-start: 0;
	font-weight: 500;
	color: var(--fx-navy);
}

/* Heading row: package names. */
.elementor .fx-compare > :first-child {
	border-block-end-color: var(--fx-hairline-strong);
}

.elementor .fx-compare > :first-child > * {
	padding-block: 1.1rem;
	font-family: var(--fx-font-display);
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--fx-navy);
}

.elementor .fx-compare > :first-child > :first-child {
	font-family: var(--fx-font-tech);
	font-size: 0.625rem;
	letter-spacing: 0.25em;
	color: var(--fx-secondary);
	align-self: end;
}

/* The two rows that differ most are set in navy. */
.elementor .fx-compare > :nth-child(2) > *,
.elementor .fx-compare > :nth-child(3) > * {
	color: var(--fx-navy);
	font-weight: 500;
}

.elementor .fx-compare > * > :not(:first-child) > span:first-child {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (hover: hover) and (min-width: 768px) {
	.elementor .fx-compare:has(> * > :nth-child(2):hover) > * > :nth-child(2),
	.elementor .fx-compare:has(> * > :nth-child(3):hover) > * > :nth-child(3),
	.elementor .fx-compare:has(> * > :nth-child(4):hover) > * > :nth-child(4) {
		background-color: rgba(0, 157, 255, 0.06);
	}

	.elementor .fx-compare:has(> * > :nth-child(2):hover) > :first-child > :nth-child(2),
	.elementor .fx-compare:has(> * > :nth-child(3):hover) > :first-child > :nth-child(3),
	.elementor .fx-compare:has(> * > :nth-child(4):hover) > :first-child > :nth-child(4) {
		box-shadow: inset 0 -2px 0 var(--fx-accent-blue);
	}
}

@media (max-width: 767px) {
	.elementor .fx-compare > :first-child {
		display: none;
	}

	.elementor .fx-compare > * {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 0.75rem;
		padding-block: 0.9rem;
	}

	.elementor .fx-compare > * > * {
		padding: 0;
		font-size: 0.875rem;
		/* Narrow phones / folded screens: long words (e.g. "straightforward") must
		   not run into the next column. */
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.elementor .fx-compare > * > :first-child {
		grid-column: 1 / -1;
		margin-block-end: 0.6rem;
		font-size: 0.9375rem;
	}

	.elementor .fx-compare > * > :not(:first-child) > span:first-child {
		position: static;
		display: block;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		margin-block-end: 0.3rem;
		font-family: var(--fx-font-tech);
		font-size: 0.625rem;
		font-weight: 500;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--fx-secondary);
	}
}

/* ---------- Article body (.fx-article, global class; Single Article) ----------
   Long-form reading inside the post-content slot: body typography (not the
   service-page display faces), a readable measure set on the wrapper, and
   sensible defaults for headings, lists, links, quotes, media and tables. */
.elementor .fx-article {
	font-family: var(--fx-font-body);
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--fx-charcoal);
}

.elementor .fx-article :is(h2, h3, h4) {
	font-family: var(--fx-font-body);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--fx-navy);
	scroll-margin-top: 6rem;
}

.elementor .fx-article h2 {
	margin: 2.6em 0 0.7em;
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	line-height: 1.25;
}

.elementor .fx-article h3 {
	margin: 2em 0 0.6em;
	font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
	line-height: 1.35;
}

.elementor .fx-article h4 {
	margin: 1.75em 0 0.5em;
	font-size: 1.125rem;
	line-height: 1.4;
}

.elementor .fx-article > :first-child,
.elementor .fx-article .elementor-widget-container > :first-child {
	margin-top: 0;
}

.elementor .fx-article :is(p, ul, ol, blockquote, figure, table, pre) {
	margin: 0 0 1.35em;
}

.elementor .fx-article :is(ul, ol) {
	padding-inline-start: 1.35em;
}

.elementor .fx-article li {
	margin-block: 0.45em;
	padding-inline-start: 0.2em;
}

.elementor .fx-article li::marker {
	color: var(--fx-accent-blue);
}

.elementor :is(.fx-article, .fx-inline-links) a {
	overflow-wrap: anywhere; /* long source URLs wrap on narrow screens */
	color: var(--fx-secondary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.elementor :is(.fx-article, .fx-inline-links) a:hover {
	color: var(--fx-navy);
}

.elementor .fx-article strong {
	font-weight: 600;
	color: var(--fx-navy);
}

.elementor .fx-article blockquote {
	padding: 0.25rem 0 0.25rem 1.35rem;
	border-inline-start: 3px solid var(--fx-accent-blue);
	font-size: 1.1875rem;
	color: var(--fx-navy);
}

.elementor .fx-article blockquote > :last-child {
	margin-bottom: 0;
}

.elementor .fx-article img {
	max-width: 100%;
	height: auto;
	border-radius: 0.75rem;
}

.elementor .fx-article :is(figcaption, .wp-caption-text, .wp-element-caption) {
	margin-top: 0.6rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--fx-charcoal);
}

/* Tables scroll inside their own box on narrow screens. */
.elementor .fx-article table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.elementor .fx-article :is(th, td) {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--fx-hairline-strong);
	text-align: start;
	vertical-align: top;
}

.elementor .fx-article th {
	font-weight: 600;
	color: var(--fx-navy);
}

.elementor .fx-article code {
	padding: 0.1em 0.35em;
	border-radius: 0.3rem;
	font-size: 0.9em;
	background-color: var(--fx-bg-cool);
}

.elementor .fx-article hr {
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid var(--fx-hairline-strong);
}

@media (max-width: 767px) {
	.elementor .fx-article {
		font-size: 1.0625rem;
		line-height: 1.7;
	}
}

/* ---------- People portraits (About) ---------- */

/* Monochrome at rest, natural colour on hover (fine pointers only); touch
   shows a calm, mostly natural static state. Content never depends on it. */
.elementor .fx-portrait {
	position: relative;
	overflow: hidden;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	background-color: var(--fx-navy);
	isolation: isolate;
}

.elementor .fx-portrait img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 18%;
	filter: grayscale(1) contrast(1.04);
	transition: filter 0.9s var(--fx-ease-out), scale 1.2s var(--fx-ease-out);
}

.elementor .fx-portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(26, 37, 49, 0) 55%, rgba(26, 37, 49, 0.32) 100%),
		linear-gradient(135deg, rgba(0, 229, 255, 0.1) 0%, rgba(0, 157, 255, 0) 45%);
	transition: opacity 0.9s var(--fx-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.elementor :has(> .fx-portrait):hover .fx-portrait img {
		filter: grayscale(0) contrast(1);
		scale: 1.02;
	}

	.elementor :has(> .fx-portrait):hover .fx-portrait::after {
		opacity: 0.35;
	}
}

@media (hover: none) {
	.elementor .fx-portrait img {
		filter: grayscale(0.3) contrast(1.02);
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor :has(> .fx-portrait):hover .fx-portrait img {
		scale: none;
	}
}

/* ---------- Footer: description + social links ---------- */

.elementor .fx-footer-about {
	max-inline-size: 24rem;
}

.elementor .fx-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.elementor a.fx-social-link {
	position: relative;
	display: inline-flex;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid var(--fx-hairline-dark);
	border-radius: 999px;
	background: transparent;
	color: var(--fx-link-water);
	font-size: 0;
	line-height: 0;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

.elementor a.fx-social-link::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	background-color: currentColor;
	-webkit-mask: var(--fx-icon) no-repeat center / contain;
	mask: var(--fx-icon) no-repeat center / contain;
}

.elementor a.fx-social-link:is(:hover, :focus-visible) {
	color: var(--fx-accent);
	border-color: var(--fx-accent);
	background-color: rgba(0, 229, 255, 0.06);
}

.elementor a.fx-social-link:focus-visible {
	border-radius: 999px;
}

.elementor .fx-social-facebook { --fx-icon: url("../img/fx-social-facebook.svg"); }
.elementor .fx-social-instagram { --fx-icon: url("../img/fx-social-instagram.svg"); }
.elementor .fx-social-linkedin { --fx-icon: url("../img/fx-social-linkedin.svg"); }

/* ---------- Home Adelaide: a window onto a scene behind the page ----------
   The photo layer is fixed to the viewport and clipped to the section, so the
   section before it slides away to reveal Adelaide and the next section
   slides over it. No JS. Reduced motion: the normal in-flow background. */
.elementor .fx-window-shade {
	box-shadow:
		inset 0 1.75rem 2.5rem -1.5rem rgba(10, 16, 24, 0.55),
		inset 0 -1.75rem 2.5rem -1.5rem rgba(10, 16, 24, 0.55);
}

@media (prefers-reduced-motion: no-preference) {
	.elementor .fx-window {
		clip-path: inset(0);
	}

	.elementor .fx-window > .fx-window-scene {
		position: fixed;
		inset: 0 0 auto;
		block-size: 100lvh;
		translate: none;
		animation: none;
	}
}

/* Adelaide scene photo: applied only once the section is near (fx-motion.js
   adds .is-near), sized to the viewport band. Relative upload paths so the
   rules survive the move to production. */
.elementor .fx-window.is-near > .fx-window-scene {
	background-image: url("/wp-content/uploads/2026/10/faltecx-adelaide-elder-park-2048-1536x909.webp");
}

@media (min-width: 1601px) {
	.elementor .fx-window.is-near > .fx-window-scene {
		background-image: url("/wp-content/uploads/2026/10/faltecx-adelaide-elder-park-2048.webp");
	}
}

@media (max-width: 1024px) {
	.elementor .fx-window.is-near > .fx-window-scene {
		background-image: url("/wp-content/uploads/2026/10/faltecx-adelaide-elder-park-1200.webp");
	}
}

/* ---------- Contact form: submitting state (approved 2026-10-06) ----------
   Driven by Elementor's own atomic-form markers. While the request runs the
   fields get a slowly travelling Faltec X gradient border (same 1px border,
   so no layout shift); on success the form simply resets and stays visible.
   fx-forms.js slides the button label and announces success (role=status). */
@property --fx-field-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes fx-field-border {
	to { --fx-field-angle: 360deg; }
}

.elementor form[data-atomic-form-submitting] .fx-input {
	border-color: transparent;
	background:
		linear-gradient(#FFFFFF, #FFFFFF) padding-box,
		conic-gradient(from var(--fx-field-angle), #009DFF, #00E5FF, #3B5B8A, #009DFF) border-box;
	filter: none; /* Firefox tints autofilled fields with a filter */
	box-shadow: none; /* drop the focus ring so a focused field matches the rest */
	pointer-events: none;
	animation: fx-field-border 2.4s linear infinite;
}

.elementor form[data-atomic-form-submitting] .e-form-submit-button-base {
	cursor: progress;
}

/* Elementor's own success message is replaced by the fx-forms.js success bar. */
.elementor form.form-state-success > .e-form-success-message-base {
	display: none !important;
}

/* Success bar above the form (fx-forms.js). Absolutely positioned in the gap
   above the form, so showing it never moves the fields. */
.elementor form.fx-has-notice {
	position: relative;
}

.elementor .fx-form-notice {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	inset-block-end: calc(100% + 0.5rem);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--fx-hairline-strong);
	border-inline-start: 3px solid #009DFF;
	border-radius: 0.625rem;
	background-color: #FFFFFF;
	box-shadow: 0 0.5rem 1.5rem rgba(34, 48, 63, 0.08);
	color: var(--fx-navy);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.375rem);
	transition: opacity 0.28s var(--fx-ease-out), transform 0.28s var(--fx-ease-out), visibility 0s linear 0.28s;
	pointer-events: none;
}

.elementor .fx-form-notice::before {
	content: "\2713";
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 1.375rem;
	block-size: 1.375rem;
	border-radius: 999px;
	background: var(--fx-grad-signal);
	color: #FFFFFF;
	font-size: 0.75rem;
	font-weight: 700;
}

.elementor .fx-form-notice.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.elementor form[data-atomic-form-submitting] .fx-input {
		animation: none;
	}

	.elementor .fx-form-notice {
		transform: none;
		transition: none;
	}
}

/* ---------- Contextual guide links (approved 2026-10-06) ----------
   Inline links from AI Automation (326) and Website Redesign (317) paragraphs
   to Insights guides: underlined in the paragraph's own colour, matching the
   fx-prose FAQ links. Scoped to those two pages and /insights/ targets only. */
:is(.page-id-317, .page-id-326) main .elementor .e-paragraph-base a[href^="/insights/"] {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}