/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/***
* Sticky header.
* Elementor Pro's sticky setting only works on legacy sections, so the V4
* header sticks with plain CSS. The admin-bar var keeps it below the WP
* toolbar when logged in (0px for visitors).
*/
.elementor-location-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}


/***
* Header collapse on scroll.
* functions.php adds .is-scrolled to the header once the page scrolls ~40px.
* hdr-wrap's min-height drops along with the padding, otherwise min-height
* holds the height and the padding change is invisible.
* Both states shed exactly 24px (hdr 10->4 padding, hdr-wrap 76->64 / 64->52
* min-height), and the matching margin-bottom on the sticky wrapper keeps the
* page below from jumping up, so the collapse causes no layout shift (CLS).
* If the header's padding/min-height values change, recheck the 24px.
*/
.elementor-location-header {
	transition: margin-bottom 0.2s ease;
}

.elementor-location-header .elementor-element-35c7f4d4 {
	transition: padding 0.2s ease;
}

.elementor-location-header .elementor-element-9c7b525 {
	transition: padding 0.2s ease, min-height 0.2s ease;
}

.elementor-location-header.is-scrolled {
	margin-bottom: 24px;
}

.elementor-location-header.is-scrolled .elementor-element-35c7f4d4 {
	padding-block: 4px;
}

.elementor-location-header.is-scrolled .elementor-element-9c7b525 {
	padding-block: 6px;
	min-height: 64px;
}

@media (max-width: 767px) {
	.elementor-location-header.is-scrolled .elementor-element-9c7b525 {
		min-height: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-location-header,
	.elementor-location-header .elementor-element-35c7f4d4,
	.elementor-location-header .elementor-element-9c7b525 {
		transition: none;
	}
}


/***
* Contact page: the header + footer "Talk to Us" buttons point at the page
* you're already on, so they render as a static "you are here" pill:
* dark, no chevron, no hover. !important beats the btn-primary :hover rule.
*/
.elementor-page-129 [data-id="62333ad0"],
.elementor-page-129 [data-id="4739eceb"] {
	background-color: var(--dark) !important;
	box-shadow: none !important;
	transform: none !important;
	pointer-events: none;
}
.elementor-page-129 [data-id="62333ad0"] span,
.elementor-page-129 [data-id="4739eceb"] span {
	display: none;
}

/***
* Smooth scroll for in-page step links (How it Works). Skipped for people
* who've asked their OS for reduced motion.
*/
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/***
* btn-text hover: the arrow nudges right as the colour goes dark (colour is
* set on the btn-text global class). Lives here because Elementor's class
* editor mangles a span rule nested inside :hover.
*/
@media (prefers-reduced-motion: no-preference) {
	.elementor .btn-text span {
		transition: transform 0.2s ease;
	}
	.elementor .btn-text:hover span,
	.elementor .btn-text:focus-visible span {
		transform: translateX(4px);
	}
}

/***
* Text selection: brand orange with white text. The fallback hex matches the
* Elementor "orange" global variable in case the variable isn't printed.
*/
::selection {
	background: var(--orange, #f59e0b);
	color: #fff;
}

/***
* Contact is hidden in the header menu only ("Talk to Us" button covers it) but
* shows in the footer. It used to carry WordPress's "hide" menu-item class, which
* Hello Elementor turns into display:none everywhere, so that class was removed
* and the rule is scoped to the header here.
*/
.elementor-location-header .elementor-nav-menu .menu-item-268 {
	display: none !important;
}

/***
* Homepage load-in: header logo, nav and button, then the hero copy and art,
* then the logo band, each fading up in turn. Pure CSS (no JS, so nothing waits
* on a script) and transform/opacity only, so it can't cause layout shift.
* `backwards` fill (not `both`) so the element returns to its own styles after
* the animation; otherwise the held end state would block the buttons' hover
* transforms. It also keeps delayed items invisible until their turn.
* Delays are set through --gl-delay, not animation-delay: the :is() rule below
* out-ranks the per-item selectors, so a plain animation-delay there would be
* reset to 0 by the shorthand and every item would animate at once.
* Perf: the hero h1 is likely the LCP element, so it starts early (0.29s); the
* last hero item starts at 0.65s and finishes at 1.4s, and the logo band (below
* the hero) starts right at 1.4s so it only appears once everything above it
* has landed. Page 126 = Home.
*/
@keyframes gl-fade-up {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.elementor-page-126 :is(
		.elementor-location-header a.e-image-link-base,
		.elementor-location-header .elementor-nav-menu--main .menu-item,
		.elementor-location-header a.btn-primary,
		.elementor-location-header .elementor-menu-toggle,
		.sec-hero .eyebrow,
		.sec-hero .headline,
		.sec-hero .body-copy,
		.sec-hero .btn-primary,
		.sec-hero .btn-text,
		.sec-hero img,
		.sec-trust .wrap
	) {
		animation: gl-fade-up 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--gl-delay, 0s) backwards;
	}

	/* Header */
	.elementor-page-126 .elementor-location-header .elementor-nav-menu--main .menu-item:nth-child(1) { --gl-delay: 0.1s; }
	.elementor-page-126 .elementor-location-header .elementor-nav-menu--main .menu-item:nth-child(2) { --gl-delay: 0.19s; }
	.elementor-page-126 .elementor-location-header .elementor-nav-menu--main .menu-item:nth-child(3) { --gl-delay: 0.28s; }
	.elementor-page-126 .elementor-location-header a.btn-primary { --gl-delay: 0.37s; }
	/* Burger (tablet/mobile only; display:none on desktop) lands right after the CTA. */
	.elementor-page-126 .elementor-location-header .elementor-menu-toggle { --gl-delay: 0.46s; }

	/* Hero */
	.elementor-page-126 .sec-hero .eyebrow     { --gl-delay: 0.2s; }
	.elementor-page-126 .sec-hero .headline    { --gl-delay: 0.29s; }
	.elementor-page-126 .sec-hero img          { --gl-delay: 0.38s; }
	.elementor-page-126 .sec-hero .body-copy   { --gl-delay: 0.47s; }
	.elementor-page-126 .sec-hero .btn-primary { --gl-delay: 0.56s; }
	.elementor-page-126 .sec-hero .btn-text    { --gl-delay: 0.65s; }

	/* Logo band: waits for the hero's last item to finish (0.65s + 0.75s). */
	.elementor-page-126 .sec-trust .wrap { --gl-delay: 1.4s; }
}

/***
* Tablet + mobile header (<= 1024px, Elementor's tablet breakpoint).
* Layout: logo / space / "Talk to Us" / burger, in one slim row.
* The stacked default paddings (header 10 + wrap 12 + button box 10) made the bar
* ~144px tall, so they're zeroed and the bar is held to ~52px. The desktop
* scroll-collapse is switched off here (the bar is already compact), which also
* drops its 24px compensating margin so nothing shifts when scrolling starts.
*/
@media (max-width: 1024px) {
	.elementor-location-header,
	.elementor-location-header.is-scrolled {
		margin-bottom: 0;
	}

	.elementor-location-header .elementor-element-35c7f4d4,
	.elementor-location-header.is-scrolled .elementor-element-35c7f4d4 {
		padding-block: 0;
	}

	.elementor-location-header .elementor-element-9c7b525,
	.elementor-location-header.is-scrolled .elementor-element-9c7b525 {
		padding-block: 6px;
		min-height: 52px;
	}

	/* margin-inline-start:auto is the "space": it pushes button + burger right. */
	.elementor-location-header .elementor-element-c9fbd21 {
		margin-inline-start: auto;
		padding: 0;
		gap: 8px;
		flex-wrap: nowrap;
	}

	.elementor-location-header .elementor-element-36e0e626 {
		flex: 0 0 auto;
		width: auto;
	}

	.elementor-location-header a.btn-primary {
		white-space: nowrap;
	}
}

/***
* Flyout menu (<= 1024px): the burger opens a dark off-canvas panel from the
* right instead of Elementor's full-width white dropdown. CSS only for the look;
* a few lines of JS (functions.php) add tap-outside / Escape to close.
* "Push" style: the page slides left by the panel width while the panel slides in,
* so it reads as the page being pushed over, not covered. Only transforms, and
* only while open, so there's no layout cost and no permanent containing block.
* Elementor stretches the dropdown with inline top/left/width, so those are
* overridden with !important. Closed state is visibility:hidden so keyboard
* focus can't land in the off-screen links.
*/
@media (max-width: 1024px) {
	.elementor-location-header .elementor-menu-toggle {
		position: relative;
		z-index: 3;
	}

	/* The X is an SVG filled with currentColor-less Elementor rules, so set both. */
	.elementor-location-header .elementor-menu-toggle.elementor-active,
	.elementor-location-header .elementor-menu-toggle.elementor-active svg,
	.elementor-location-header .elementor-menu-toggle.elementor-active i {
		color: #fff !important;
		fill: #fff !important;
	}

	.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed !important;
		inset: 0 0 0 auto !important;
		z-index: 2;
		width: var(--flyout-w) !important;
		height: 100vh;
		height: 100dvh;
		max-height: none !important;
		margin: 0 !important;
		padding: 72px 0 24px;
		overflow-y: auto;
		background-color: var(--dark, #181626) !important;
		box-shadow: -18px 0 40px rgba(0, 0, 0, 0.25);
		transform: translateX(100%) !important;
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
	}

	.elementor-location-header .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		transform: none !important;
		visibility: visible;
		transition: transform 0.3s ease, visibility 0s;
	}

	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
		padding: 16px 28px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		background-color: transparent !important;
		color: #fff !important;
		font-size: 18px;
		font-weight: 600;
	}

	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:focus-visible {
		background-color: rgba(255, 255, 255, 0.08) !important;
		color: #fff !important;
	}

	/* Current page: purple edge instead of Elementor's gray fill. */
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
		background-color: rgba(139, 47, 232, 0.28) !important;
		box-shadow: inset 3px 0 0 var(--purple-light, #8b2fe8);
	}

	/* Dim the page behind the open panel; a click on it lands on the header
	 * element itself, which the JS treats as "close". */
	.elementor-location-header:has(.elementor-menu-toggle.elementor-active)::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 1;
		background: rgba(24, 22, 38, 0.55);
	}

	body:has(.elementor-location-header .elementor-menu-toggle.elementor-active) {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		transition: none;
	}
}

/* Flyout "push": the page slides left by --flyout-w as the panel slides in. */
:root {
	--flyout-w: min(320px, 86vw);
}

@media (max-width: 1024px) {
	/* What gets pushed: the page (wrapped in <main id="content">, functions.php)
	 * + footer, and the header's logo and CTA. The
	 * header itself is NOT transformed (a transform would turn it into the
	 * containing block for the fixed panel and break it). The burger stays put
	 * and becomes the X over the panel. */
	.elementor-location-header ~ :is(.elementor, #content),
	.elementor-location-header a.e-image-link-base,
	.elementor-location-header a.btn-primary {
		transition: transform 0.3s ease;
	}

	body:has(.elementor-location-header .elementor-menu-toggle.elementor-active) .elementor-location-header ~ :is(.elementor, #content),
	body:has(.elementor-location-header .elementor-menu-toggle.elementor-active) .elementor-location-header a.e-image-link-base,
	body:has(.elementor-location-header .elementor-menu-toggle.elementor-active) .elementor-location-header a.btn-primary {
		transform: translateX(calc(var(--flyout-w) * -1));
	}

	/* The header bar's white background and hairline move with the page, so they
	 * can't live on the (untransformed) bar: draw them on a layer that slides. */
	.elementor-location-header .elementor-element-35c7f4d4 {
		background-color: transparent;
		border-block-end-color: transparent;
	}

	/* display:block beats Elementor's .elementor::before clearfix (display:table),
	 * which shrink-wraps the layer to 0px wide and left the bar transparent.
	 * Translucent white + blur so content scrolling under stays legible. */
	.elementor-location-header::before {
		content: "";
		display: block;
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgba(255, 255, 255, 0.75);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-block-end: 1px solid rgba(24, 22, 38, 0.08);
		transition: transform 0.3s ease;
	}

	.elementor-location-header:has(.elementor-menu-toggle.elementor-active)::before {
		transform: translateX(calc(var(--flyout-w) * -1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-location-header ~ :is(.elementor, #content),
	.elementor-location-header a.e-image-link-base,
	.elementor-location-header a.btn-primary,
	.elementor-location-header::before {
		transition: none;
	}
}

/***
* Logo band on phones (<= 767px): everything centered, the four logos in a 2x2
* grid, and the descriptive line wrapped with text-wrap: balance so it doesn't
* leave a lone word on the last line. Structural selectors on purpose (the band
* has no per-part classes): .wrap > first child = "Built by" block, last child =
* "Trusted by" block, whose last child is the logo group.
*/
@media (max-width: 767px) {
	.sec-trust .wrap {
		align-items: center;
		text-align: center;
	}

	.sec-trust .wrap > :first-child {
		max-width: none;
		align-items: center;
	}

	.sec-trust .wrap > :first-child > :first-child {
		justify-content: center;
	}

	.sec-trust .wrap > :first-child p {
		text-wrap: balance;
	}

	.sec-trust .wrap > :last-child {
		width: 100%;
		align-items: center;
	}

	.sec-trust .wrap > :last-child > p {
		max-width: none;
		text-align: center;
	}

	.sec-trust .wrap > :last-child > :last-child {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 16px;
		width: 100%;
		justify-items: center;
		align-items: center;
	}

	/* Fixed height keeps the logos even; max-width + contain stops the wide
	 * Parsons mark overflowing its half-width cell. */
	.sec-trust .wrap img {
		height: 32px;
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}
}

/***
* Phone side padding (<= 767px). The .wrap global class adds 24px each side and
* Elementor adds a 10px default on every container inside it, so content sat
* ~34px in. .wrap is now 16px; the header's wrap is 0 so the logo and burger
* line up with the screen edge (the header bar's own 10px remains). The inner
* containers' 10px default is zeroed in Elementor (mobile variant on each direct
* child of .wrap that has no padding of its own), not here, so cards and other
* deliberate padding aren't flattened.
* `body` in the selectors just out-ranks the global class's own rule.
*/
@media (max-width: 767px) {
	body .elementor .wrap {
		padding-inline: 16px;
	}

	body header.elementor-location-header .wrap {
		padding-inline: 0;
	}
}

/* Balanced line breaks on h3s (card headings etc.) so a heading never leaves a
 * lone word on its last line. Progressive enhancement: ignored by older browsers. */
.elementor h3 {
	text-wrap: balance;
}

/***
* "Talk to Us" button inside the mobile flyout (<= 1024px). It is a real menu
* item (class menu-cta-flyout) so it lives in the panel's markup, but it is
* hidden in the desktop bar where the header already has the same button.
* Styled to match .btn-primary: purple pill, white bold label, arrow.
*/
.elementor-location-header .elementor-nav-menu--main .menu-cta-flyout {
	display: none;
}

@media (max-width: 1024px) {
	.elementor-location-header .elementor-nav-menu--dropdown .menu-cta-flyout {
		padding: 28px 28px 0;
	}

	.elementor-location-header .elementor-nav-menu--dropdown .menu-cta-flyout .elementor-item {
		display: block;
		padding: 14px 24px;
		border-bottom: 0;
		border-radius: 999px;
		background-color: var(--purple-light, #8b2fe8) !important;
		box-shadow: 0 8px 22px rgba(139, 47, 232, 0.35);
		color: #fff !important;
		font-weight: 700;
		font-size: 17px;
		text-align: center;
	}

	.elementor-location-header .elementor-nav-menu--dropdown .menu-cta-flyout .elementor-item::after {
		content: "\203A";
		/* Elementor uses .elementor-item::after for its pointer underline
		 * (absolute, opacity 0), so reset those or the arrow is invisible. */
		position: static;
		display: inline;
		opacity: 1 !important;
		margin-inline-start: 10px;
	}

	.elementor-location-header .elementor-nav-menu--dropdown .menu-cta-flyout .elementor-item:hover,
	.elementor-location-header .elementor-nav-menu--dropdown .menu-cta-flyout .elementor-item:focus-visible {
		background-color: var(--purple, #6f1fc4) !important;
	}
}

/***
* Scrollbars: same treatment as the admin (inc/admin-colors/css/admin.css) but
* in the brand blue (--blue #008ec6) instead of purple. Thumb is the blue
* lightened 15% (as the admin's hl-l15); track is the brand dark (--dark).
* WebKit/Blink only, like the admin; Firefox keeps its native scrollbar.
*/
::-webkit-scrollbar {
	width: 0.65em;
	height: 0.65em;
}

::-webkit-scrollbar-thumb {
	background: #269fce;
}

::-webkit-scrollbar-track {
	background: var(--dark, #181626);
}

/***
* Homepage hero graphic: 30% larger on wide screens (>= 1600px), where there is
* room beside the copy without crowding it or running off the right edge.
* Uses the standalone `scale` property, not `transform: scale()`, so it stacks
* with the load-in gl-fade-up animation (which animates `transform`) instead of
* being overridden by it. Transform-only: no layout shift (CLS).
*/
@media (min-width: 1600px) {
	.elementor-page-126 .sec-hero img {
		scale: 1.3;
	}
}

/***
* Keyboard + touch polish.
* - #content is the <main> the skip link focuses (tabindex -1); it doesn't need
*   a focus ring, the content itself is the destination.
* - The header logo link had no visible focus: Elementor's image link base uses
*   `all: unset`, which strips the browser outline.
* - Footer/404 inline links (phone, HingePoint, "Tell us what you were after")
*   were 19-23px tall, under WCAG 2.2's 24px target. Vertical padding on an
*   inline element grows the tap area without moving the line (no layout shift).
*/
#content:focus {
	outline: none;
}

.elementor-location-header a.e-image-link-base:focus-visible {
	outline: 2px solid var(--purple-light, #8b2fe8);
	outline-offset: 4px;
	border-radius: 4px;
}

.elementor-location-footer .body-copy a,
.sec-404 .body-copy a {
	padding-block: 5px;
}

/***
* FAQ accordion icon (.faq-icon, How it Works).
* The + turns into an x while its item is open. Global classes can't hold an
* ancestor selector (details[open] ...), so the open state lives here.
*/
.faq-icon {
	transition: transform 0.2s ease;
}

details[open] > summary .faq-icon {
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.faq-icon {
		transition: none;
	}
}