/*
Theme Name: Astra Child
Theme URI: https://joinchoicehotels.lamp.revium.dev/
Description: Child theme for Astra.
Author: Revium
Author URI: https://revium.com.au/
Template: astra
Version: 1.0.88
Text Domain: astra-child
*/

:root {
	/* Realigned to Choice Hotels Brand Guidelines INT (Jan 2024 v6) on 2026-06-04. */
	--jch-brown: #5f5a55;
	--jch-brown-soft: #7c7771;
	--jch-orange: #f5851d;
	--jch-orange-dark: #f26322;
	--jch-cream: #f1efe9;
	--jch-white: #ffffff;
	--jch-divider: rgba(95, 90, 85, 0.15);
	--jch-header-height: 92px;
	--jch-frame-offset: clamp(8px, 1.4vw, 16px);
}

/* ---------- 1. Solid white header (defeat transparent-header mode) ---------- */
body.ast-theme-transparent-header #masthead,
body #masthead {
	background-color: var(--jch-white) !important;
	position: relative !important;
	top: auto !important;
	border-bottom: 1px solid var(--jch-divider);
	font-family: "Montserrat", sans-serif;
	color: var(--jch-brown);
}
body.ast-theme-transparent-header #masthead .main-header-bar,
body.ast-theme-transparent-header #masthead .ast-primary-header-bar,
body.ast-theme-transparent-header #masthead .ast-above-header,
body.ast-theme-transparent-header #masthead .ast-below-header,
body #masthead .main-header-bar,
body #masthead .ast-primary-header-bar {
	background-color: transparent !important;
}
/* Keep .transparent-custom-logo visible — on this site it is the only logo rendered. */
body #masthead .ast-builder-layout-element .site-logo-img,
body #masthead .site-branding .custom-logo-link {
	display: inline-block !important;
}

/* ---------- 2. Header bar layout — full width, no overlap ---------- */
#masthead .ast-container,
#masthead .main-header-bar > .ast-container,
#masthead .site-primary-header-wrap > .ast-container {
	max-width: 100% !important;
	padding-left: clamp(16px, 3vw, 40px) !important;
	padding-right: clamp(16px, 3vw, 40px) !important;
}
#masthead .ast-primary-header-bar {
	min-height: var(--jch-header-height);
	display: flex !important;
	align-items: center;
}
#masthead .site-branding {
	flex: 0 0 auto;
}
#masthead .ast-builder-menu,
#masthead .ast-builder-menu-1 {
	min-width: 0;
}

/* ---------- 3. Desktop nav links — brown, hover orange ---------- */
#masthead .menu-link,
#masthead .ast-builder-menu .menu-item > .menu-link,
#masthead .main-header-menu .menu-item > .menu-link {
	color: var(--jch-brown) !important;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
}
#masthead .menu-link:hover,
#masthead .menu-link:focus,
#masthead .menu-item:hover > .menu-link,
#masthead .current-menu-item > .menu-link,
#masthead .current-menu-ancestor > .menu-link {
	color: var(--jch-orange) !important;
}

/* Contact Us — orange link emphasis */
#masthead .nav-contact > .menu-link,
#masthead .menu-item-contact > .menu-link,
#masthead a.menu-link[href*="/contact" i] {
	color: var(--jch-orange) !important;
}

/* Phone CTA — orange rounded button */
#masthead .nav-phone-button > .menu-link,
#masthead .menu-item-phone > .menu-link,
#masthead a.menu-link[href^="tel:"] {
	background-color: var(--jch-orange) !important;
	color: var(--jch-white) !important;
	border-radius: 0 !important;
	padding: 12px 22px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px;
	white-space: nowrap !important;
}
#masthead .nav-phone-button > .menu-link:hover,
#masthead .menu-item-phone > .menu-link:hover,
#masthead a.menu-link[href^="tel:"]:hover {
	background-color: var(--jch-orange-dark) !important;
	color: var(--jch-white) !important;
}

/* ---------- 4. Dropdowns — clean white panels, inline nested items ---------- */
#masthead .sub-menu {
	background-color: var(--jch-white) !important;
	border: 1px solid var(--jch-divider) !important;
	box-shadow: 0 12px 28px rgba(40, 35, 25, 0.12) !important;
	padding: 8px 0 !important;
	border-radius: 0 !important;
	min-width: 240px;
}
#masthead .sub-menu .menu-link {
	padding: 10px 18px !important;
	color: var(--jch-brown) !important;
	font-weight: 500 !important;
	white-space: nowrap;
}
#masthead .sub-menu .menu-link:hover,
#masthead .sub-menu .menu-item:hover > .menu-link {
	background-color: rgba(226, 104, 17, 0.08) !important;
	color: var(--jch-orange) !important;
}
/* (Desktop nested submenu rules moved to section 11 below) */

/* ---------- 5. Desktop ≥1023px ---------- */
@media (min-width: 1076px) {
	#masthead .menu-toggle,
	#masthead .main-header-menu-toggle,
	#masthead .ast-button-wrap .menu-toggle {
		display: none !important;
	}
	#masthead .main-header-menu,
	#masthead .ast-builder-menu-1,
	#masthead .ast-desktop-header-content {
		display: flex !important;
	}
	#masthead .ast-builder-menu .menu-item > .menu-link {
		white-space: normal;
		line-height: 1.15;
	}
	/* Single-line on key items */
	#masthead .nav-phone-button > .menu-link,
	#masthead .menu-item-home > .menu-link,
	#masthead .nav-contact > .menu-link,
	#masthead a.menu-link[href*="/contact" i],
	#masthead a.menu-link[href^="tel:"] {
		white-space: nowrap !important;
	}
}

/* ---------- 6. Compact desktop 1023–1280px ---------- */
@media (min-width: 1076px) and (max-width: 1280px) {
	#masthead .ast-builder-menu .menu-item > .menu-link {
		padding-left: 10px !important;
		padding-right: 10px !important;
		font-size: 0.82rem;
	}
	#masthead .nav-phone-button > .menu-link,
	#masthead a.menu-link[href^="tel:"] {
		padding: 10px 14px !important;
		font-size: 0.82rem;
	}
}

/* 6a2. Single-row desktop ≥1440px — keep the nav on one line */
@media (min-width: 1440px) {
	#masthead .main-header-menu {
		flex-wrap: nowrap !important;
	}
	#masthead .main-header-menu > .menu-item > .menu-link {
		white-space: nowrap !important;
	}
}

/* 6b. Full-size desktop ≥1520px — breathing room between logo and nav */
@media (min-width: 1520px) {
	#masthead .ast-builder-menu-1 {
		margin-left: 28px;
	}
}

/* 6c. Guard against horizontal page scroll */
.site-content {
	overflow-x: clip;
}

/* ---------- 7. Mobile/tablet ≤1180px ---------- */
@media (max-width: 1075px) {
	/* Force mobile presentation regardless of Astra's own breakpoint */
	body #masthead .ast-desktop-header-content,
	body
		#masthead
		.ast-builder-menu-1
		> .main-header-menu:not(.toggle-on):not(.toggled-on),
	body.ast-desktop #masthead .main-header-menu:not(.toggle-on):not(.toggled-on) {
		display: none !important;
	}
	#masthead .menu-toggle,
	#masthead .main-header-menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		background: transparent !important;
		color: var(--jch-brown) !important;
		border: 1px solid var(--jch-divider) !important;
		border-radius: 8px;
		width: 44px;
		height: 44px;
	}
	#masthead .menu-toggle .mobile-menu-toggle-icon,
	#masthead .menu-toggle svg,
	#masthead .menu-toggle .ast-mobile-svg {
		color: var(--jch-brown) !important;
		fill: currentColor !important;
	}

	#masthead .main-header-menu .menu-item {
		display: block !important;
		width: 100% !important;
		float: none !important;
	}
	#masthead .main-header-menu .menu-item > .menu-link {
		display: flex !important;
		width: 100% !important;
		padding: 14px 12px !important;
		/* Reset line-height: Astra core's line-height:3 bloats drawer rows below the fold. */
		line-height: 1.3 !important;
		border-bottom: 1px solid var(--jch-divider);
		white-space: normal !important;
		color: var(--jch-brown) !important;
		background: transparent !important;
		font-size: 1rem !important;
	}

	/* Phone CTA stays orange pill inside drawer — padded so it reads as a button. */
	#masthead .main-header-menu .nav-phone-button > .menu-link,
	#masthead .main-header-menu a.menu-link[href^="tel:"] {
		background-color: var(--jch-orange) !important;
		color: var(--jch-white) !important;
		border-radius: 0 !important;
		margin: 16px !important;
		padding: 14px 22px !important;
		width: fit-content !important;
		justify-content: center !important;
		border-bottom: none !important;
		font-weight: 700 !important;
	}

	/* Accordion submenus: closed by default, expand inline full-width */
	#masthead .main-header-menu .sub-menu {
		position: static !important;
		transform: none !important;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 0 0 0 16px !important;
		background-color: transparent !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		visibility: visible;
		opacity: 1;
	}
	#masthead .main-header-menu .menu-item-has-children > .sub-menu {
		display: none;
	}
	/* Open states — Astra/UAE add one of these classes via JS on tap */
	#masthead
		.main-header-menu
		.menu-item-has-children.ast-submenu-expanded
		> .sub-menu,
	#masthead .main-header-menu .menu-item-has-children.dropdown-open > .sub-menu,
	#masthead .main-header-menu .menu-item-has-children.menu-item-open > .sub-menu,
	#masthead .main-header-menu .menu-item-has-children > .sub-menu.toggle-on,
	#masthead .main-header-menu .menu-item-has-children > .sub-menu.toggled-on {
		display: block !important;
	}
	/* Nested sub-sub menus inside drawer: full-width inline */
	#masthead .main-header-menu .sub-menu .sub-menu {
		padding-left: 16px !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
	}
	#masthead .main-header-menu .sub-menu .menu-link {
		padding: 12px 12px !important;
		white-space: normal !important;
		font-size: 0.95rem !important;
	}
}

/* ---------- 8. Phone refinement ≤767px ---------- */
@media (max-width: 767px) {
	:root {
		--jch-header-height: 72px;
	}
	#masthead .custom-logo,
	#masthead .site-logo-img img,
	#masthead .ast-logo-svg-inline svg {
		max-height: 44px !important;
		width: auto !important;
	}
	#masthead .ast-primary-header-bar {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}
}

/* ---------- 9. Logo sizing fix — site-branding must hold logo width ---------- */
#masthead .site-branding,
#masthead .ast-builder-layout-element[data-section="title_tagline"],
#masthead .site-header-section-left {
	min-width: 0;
	flex: 0 1 auto;
}
#masthead .site-logo-img,
#masthead .site-branding {
	width: auto !important;
	min-width: 120px;
}
/* Logo max-height/max-width are set with !important in the block below; the */
@media (max-width: 1075px) {
	#masthead .site-branding {
		min-width: 130px;
	}
}
@media (max-width: 767px) {
	#masthead .site-branding {
		min-width: 110px;
	}
}

/* Force logo image to render its natural dimensions even when */
#masthead .custom-logo,
#masthead .site-logo-img img,
#masthead .custom-logo-link img {
	width: auto !important;
	height: auto !important;
	max-height: 56px !important;
	max-width: 200px !important;
	display: block !important;
}
#masthead .custom-logo-link,
#masthead .transparent-custom-logo {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
}
@media (max-width: 1075px) {
	#masthead .custom-logo,
	#masthead .site-logo-img img {
		max-height: 44px !important;
		max-width: 150px !important;
	}
}
@media (max-width: 767px) {
	#masthead .custom-logo,
	#masthead .site-logo-img img {
		max-height: 40px !important;
		max-width: 130px !important;
	}
}

/* Explicit logo dimensions — parent <a> collapses to 0×0 when width is auto, */
#masthead .ast-mobile-header-wrap .custom-logo-link img,
#masthead .ast-mobile-header-wrap .custom-logo,
#masthead .ast-mobile-header-wrap .site-logo-img img {
	width: 130px !important;
	height: 42px !important;
	object-fit: contain !important;
	display: block !important;
}
#masthead .ast-main-header-wrap .custom-logo,
#masthead .ast-main-header-wrap .custom-logo-link img {
	width: 160px !important;
	height: 52px !important;
	object-fit: contain !important;
	display: block !important;
}
@media (max-width: 767px) {
	#masthead .ast-mobile-header-wrap .custom-logo,
	#masthead .ast-mobile-header-wrap .site-logo-img img {
		width: 120px !important;
		height: 38px !important;
	}
}

/* ---------- 10. Phone CTA — white text + phone icon ---------- */
#masthead .nav-phone-button > .menu-link,
#masthead .nav-phone-button > .menu-link span,
#masthead .menu-item-phone > .menu-link,
#masthead a.menu-link[href^="tel:"],
#masthead a.menu-link[href^="tel:"] span,
#masthead .main-header-menu .nav-phone-button > .menu-link,
#masthead .main-header-menu a.menu-link[href^="tel:"] {
	color: #ffffff !important;
}

#masthead .nav-phone-button > .menu-link::before,
#masthead a.menu-link[href^="tel:"]::before,
#masthead .main-header-menu .nav-phone-button > .menu-link::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.25l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.58l2.2-2.21c.28-.27.36-.66.25-1.01-.37-1.12-.57-2.32-.57-3.57 0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	vertical-align: -2px;
	flex-shrink: 0;
}

/* ---------- 11. Desktop multi-level dropdown — proper side flyouts ---------- */
@media (min-width: 1076px) {
	/* Level 1 dropdown panel — Astra already styles this; we keep nice rounding */
	#masthead .main-header-menu > .menu-item-has-children > .sub-menu {
		top: 100% !important;
		left: 0 !important;
	}

	/* Level 2+ sub-menu: side flyout to the right of parent item, hidden until hover */
	#masthead .sub-menu .menu-item-has-children {
		position: relative;
	}
	#masthead .sub-menu .sub-menu {
		position: absolute !important;
		left: 100% !important;
		top: -11px !important;
		margin: 0 0 0 12px !important;
		padding: 8px 0 !important;
		border: 1px solid var(--jch-divider) !important;
		box-shadow: 0 12px 28px rgba(40, 35, 25, 0.12) !important;
		background-color: var(--jch-white) !important;
		border-radius: 0 !important;
		min-width: 240px !important;
		visibility: hidden;
		opacity: 0;
		display: block !important;
		transition:
			opacity 0.15s ease,
			visibility 0.15s ease;
		pointer-events: none;
		z-index: 999;
	}
	#masthead .sub-menu .menu-item-has-children:hover > .sub-menu,
	#masthead .sub-menu .menu-item-has-children:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	/* Restore level-2 link styling — same weight/size as level-1 */
	#masthead .sub-menu .sub-menu .menu-link {
		font-weight: 500 !important;
		padding: 10px 18px !important;
		color: var(--jch-brown) !important;
		font-size: 0.95rem !important;
		white-space: nowrap !important;
	}

	/* Chevron indicator on items that have a flyout */
	#masthead .sub-menu .menu-item-has-children > .menu-link {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
	}
	#masthead .sub-menu .menu-item-has-children > .menu-link::after {
		content: "\203A"; /* › */
		margin-left: 16px;
		font-size: 1.1em;
		line-height: 1;
		color: var(--jch-brown-soft);
	}
	#masthead .sub-menu .menu-item-has-children:hover > .menu-link::after {
		color: var(--jch-orange);
	}

	/* Hide the inline dropdown-menu-toggle chevron inside <a> on desktop — */
	#masthead .sub-menu .dropdown-menu-toggle,
	#masthead .sub-menu .ast-header-navigation-arrow,
	#masthead .sub-menu > .menu-item-has-children > button.ast-menu-toggle {
		display: none !important;
	}

	/* Edge-of-viewport guard: if flyout would overflow right, flip to left */
	#masthead .sub-menu .menu-item-has-children:hover > .sub-menu.flyout-left,
	#masthead .sub-menu .sub-menu.flyout-left {
		left: auto !important;
		right: 100% !important;
		margin: 0 4px 0 0 !important;
	}
}

/* ---------- 12. Hover & visual polish ---------- */
@media (min-width: 1076px) {
	/* Override Astra's 600 on has-children items — all top-level nav at 500 */
	#masthead .main-header-menu > .menu-item-has-children > .menu-link {
		font-weight: 500 !important;
	}
	/* Top-level menu items — flex alignment + equal height with has-children items */
	#masthead .main-header-menu > .menu-item {
		display: flex !important;
		align-items: center !important;
		align-self: center !important;
		padding-bottom: 4px !important;
	}
	/* Top-level menu links: animated underline on hover/active */
	#masthead .main-header-menu > .menu-item > .menu-link {
		position: relative;
		padding: 28px 14px !important;
		display: inline-flex !important;
		align-items: center !important;
		transition: color 0.2s ease;
	}
	#masthead .main-header-menu > .menu-item > .menu-link::after {
		content: "";
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 18px !important;
		height: 2px;
		background-color: var(--jch-orange);
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.2s ease;
		border-radius: 2px;
		display: block;
	}
	#masthead .main-header-menu > .menu-item:hover > .menu-link::after,
	#masthead .main-header-menu > .menu-item.current-menu-item > .menu-link::after,
	#masthead
		.main-header-menu
		> .menu-item.current-menu-ancestor
		> .menu-link::after {
		transform: scaleX(1);
	}
	/* Phone CTA shouldn't get the underline — it has a background button style instead */
	#masthead .main-header-menu > .nav-phone-button > .menu-link::after,
	#masthead .main-header-menu > .menu-item-phone > .menu-link::after {
		display: none !important;
	}

	/* Top-level chevron (Astra's dropdown-menu-toggle inside the link) — neat alignment */
	#masthead
		.main-header-menu
		> .menu-item-has-children
		> .menu-link
		.dropdown-menu-toggle {
		margin-left: 6px;
		display: inline-flex;
		align-items: center;
		color: var(--jch-brown-soft);
		transition:
			transform 0.2s ease,
			color 0.2s ease;
	}
	#masthead
		.main-header-menu
		> .menu-item-has-children:hover
		> .menu-link
		.dropdown-menu-toggle {
		color: var(--jch-orange);
		transform: rotate(180deg);
	}

	/* Dropdown panel — softer shadow, slight slide-in animation */
	#masthead .main-header-menu > .menu-item-has-children > .sub-menu {
		box-shadow: 0 18px 40px rgba(40, 35, 25, 0.14) !important;
		border: 1px solid rgba(94, 87, 69, 0.08) !important;
		padding: 10px !important;
		margin-top: 4px;
	}

	/* Dropdown items — full-width orange-tint background on hover, rounded */
	#masthead .sub-menu .menu-item {
		margin: 1px 0;
	}
	#masthead .sub-menu .menu-link {
		border-radius: 0 !important;
		transition:
			background-color 0.15s ease,
			color 0.15s ease !important;
		padding: 10px 14px !important;
	}
	#masthead .sub-menu .menu-item:hover > .menu-link,
	#masthead .sub-menu .menu-link:hover,
	#masthead .sub-menu .menu-link:focus {
		background-color: rgba(226, 104, 17, 0.12) !important;
		color: var(--jch-orange) !important;
	}
	/* Keep the active page styled distinctly */
	#masthead .sub-menu .current-menu-item > .menu-link {
		background-color: rgba(226, 104, 17, 0.08) !important;
		color: var(--jch-orange) !important;
		font-weight: 600 !important;
	}

	/* Side flyout panel — match level-1 styling, soft shadow */
	#masthead .sub-menu .sub-menu {
		padding: 10px !important;
		box-shadow: 0 18px 40px rgba(40, 35, 25, 0.14) !important;
		border: 1px solid rgba(94, 87, 69, 0.08) !important;
		border-radius: 0 !important;
	}

	/* Chevron indicator '›' — rotate when the row is hovered */
	#masthead .sub-menu .menu-item-has-children > .menu-link::after {
		transition:
			color 0.15s ease,
			transform 0.15s ease;
	}
	#masthead .sub-menu .menu-item-has-children:hover > .menu-link::after {
		transform: translateX(3px);
	}
}
/* ---------- 12b. Header hover motion ---------- */
@media (min-width: 1076px) {
	#masthead .main-header-menu > .menu-item > .menu-link,
	#masthead .sub-menu .menu-link,
	#masthead .ast-header-button-1 .ast-custom-button,
	#masthead .ast-header-button-1 .ast-custom-button-link {
		transition:
			color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
			background-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
			border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
	}

	#masthead .main-header-menu > .menu-item > .menu-link::after {
		transition:
			transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
	}

	#masthead
		.main-header-menu
		> .menu-item-has-children
		> .menu-link
		.dropdown-menu-toggle,
	#masthead .sub-menu .menu-item-has-children > .menu-link::after {
		transition:
			color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
	}

	#masthead .sub-menu .menu-item:hover > .menu-link,
	#masthead .sub-menu .menu-link:focus {
		transform: translateX(2px);
	}

	#masthead .ast-header-button-1 .ast-custom-button:hover,
	#masthead
		.ast-header-button-1
		.ast-custom-button-link:hover
		.ast-custom-button,
	#masthead
		.ast-header-button-1
		.ast-custom-button-link:focus
		.ast-custom-button {
		box-shadow: 0 8px 18px rgba(40, 35, 25, 0.14);
		transform: translateY(-1px);
	}
}

/* ---------- 13. Counter widget — fluid number sizing for long values ---------- */
/* Counter widget: inline-size container so the number scales with column width. */
.elementor-widget-counter {
	container-type: inline-size;
}
.elementor-widget-counter .elementor-counter-number-wrapper {
	font-size: clamp(1.5rem, 16cqi, 3.125rem) !important;
	line-height: 1.1 !important;
	white-space: nowrap !important;
}
.elementor-widget-counter .elementor-counter-number-wrapper > span {
	font-size: inherit !important;
	line-height: inherit !important;
}

/* 14. Desktop phone CTA — use Astra Header Builder button, hide nav menu duplicate */

/* Hide the duplicate tel: link inside the Header Builder Button 1 widget. */
#masthead .ast-header-button-1 a.menu-link[href^="tel:"] {
	display: none !important;
}
#masthead .ast-header-button-1 .ast-custom-button-link {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}
/* Phone icon to the right of the number — use ::after so it renders after the text. */
#masthead .ast-header-button-1 .ast-custom-button-link::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.25l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.58l2.2-2.21c.28-.27.36-.66.25-1.01-.37-1.12-.57-2.32-.57-3.57 0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

/* ---------- 15. Mobile header — push hamburger toggle to the right edge ---------- */
/* Mobile header grid: stretch row to full width so the toggle anchors right. */
@media (max-width: 1075px) {
	#masthead .ast-mobile-header-wrap .ast-builder-grid-row {
		width: 100% !important;
		grid-template-columns: 1fr auto !important;
	}
}

/* ---------- 16. Mobile header — force visible up to 920px ---------- */
@media (max-width: 1075px) {
	body #ast-mobile-header,
	body #masthead .ast-mobile-header-wrap {
		display: block !important;
	}
	body #ast-desktop-header {
		display: none !important;
	}
}

/* Lay out each expandable menu-item as a flex row: link left, chevron toggle right, sub-menu wraps below. */
#masthead
	.ast-header-break-point
	.main-header-bar
	.main-header-bar-navigation
	.menu-item-has-children,
#masthead
	.ast-header-break-point
	.ast-builder-menu-1
	.menu-item.menu-item-has-children,
.ast-header-break-point #masthead .main-header-menu .menu-item-has-children {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}
#masthead
	.ast-header-break-point
	.main-header-bar
	.main-header-bar-navigation
	.menu-item-has-children
	> .menu-link,
#masthead
	.ast-header-break-point
	.ast-builder-menu-1
	.menu-item.menu-item-has-children
	> .menu-link,
.ast-header-break-point
	#masthead
	.main-header-menu
	.menu-item-has-children
	> .menu-link {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
}
#masthead
	.ast-header-break-point
	.main-header-bar
	.main-header-bar-navigation
	.menu-item-has-children
	> .ast-menu-toggle,
#masthead
	.ast-header-break-point
	.ast-builder-menu-1
	.menu-item.menu-item-has-children
	> .ast-menu-toggle,
.ast-header-break-point
	#masthead
	.main-header-menu
	.menu-item-has-children
	> .ast-menu-toggle {
	position: static !important;
	top: auto !important;
	right: auto !important;
	transform: none !important;
	flex: 0 0 auto !important;
	align-self: stretch !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-right: 0 !important;
	padding-right: 20px !important;
}
#masthead
	.ast-header-break-point
	.main-header-bar
	.main-header-bar-navigation
	.menu-item-has-children
	> .sub-menu,
#masthead
	.ast-header-break-point
	.ast-builder-menu-1
	.menu-item.menu-item-has-children
	> .sub-menu,
.ast-header-break-point
	#masthead
	.main-header-menu
	.menu-item-has-children
	> .sub-menu {
	flex: 0 0 100% !important;
}

/* Mirror the row divider onto the toggle so the border spans the full row width. */
.ast-header-break-point
	#masthead
	.main-header-menu
	.menu-item-has-children
	> .ast-menu-toggle {
	border-bottom: 1px solid var(--jch-divider) !important;
}

/* Suppress the orange tap-flash on the chevron button on hover/focus/active. */
.ast-header-break-point
	.main-header-bar
	.main-header-bar-navigation
	.menu-item-has-children
	> .ast-menu-toggle:hover,
.ast-header-break-point
	.main-header-bar
	.main-header-bar-navigation
	.menu-item-has-children
	> .ast-menu-toggle:focus,
.ast-header-break-point
	.main-header-bar
	.main-header-bar-navigation
	.menu-item-has-children
	> .ast-menu-toggle:focus-visible,
.ast-header-break-point
	.main-header-bar
	.main-header-bar-navigation
	.menu-item-has-children
	> .ast-menu-toggle:active,
.ast-header-break-point
	.ast-builder-menu-1
	.menu-item.menu-item-has-children
	> .ast-menu-toggle:hover,
.ast-header-break-point
	.ast-builder-menu-1
	.menu-item.menu-item-has-children
	> .ast-menu-toggle:focus,
.ast-header-break-point
	.ast-builder-menu-1
	.menu-item.menu-item-has-children
	> .ast-menu-toggle:focus-visible,
.ast-header-break-point
	.ast-builder-menu-1
	.menu-item.menu-item-has-children
	> .ast-menu-toggle:active {
	background-color: transparent !important;
	background-image: none !important;
	outline: none !important;
}

/* 16. Compact nav 1101–1439px — trim container spacing, */
@media (min-width: 1076px) and (max-width: 1439px) {
	#masthead .site-primary-header-wrap > .ast-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	#masthead .main-header-bar,
	#masthead .ast-builder-menu-1,
	#masthead .main-header-bar-navigation,
	#masthead .main-header-menu,
	#masthead .main-header-menu > li {
		padding: 0 !important;
		margin: 0 !important;
	}
	#masthead .main-header-menu > .menu-item > .menu-link {
		padding: 28px 7px !important;
		font-size: 0.82rem;
	}
	#masthead .main-header-menu > .menu-item > .menu-link::after {
		left: 7px !important;
		right: 7px !important;
	}
	#masthead .nav-phone-button > .menu-link,
	#masthead a.menu-link[href^="tel:"] {
		padding: 10px 14px !important;
		font-size: 0.82rem;
	}
}

/* 17. Partner / testimonial images — full colour on touch devices */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
	.elementor-widget-image img {
		filter: none !important;
	}
}

/* 18. Ghost button — semi-transparent secondary CTA over hero images */
.jch-btn-ghost .elementor-button {
	background-color: rgba(255, 255, 255, 0.35) !important;
	border: none !important;
	color: #ffffff !important;
	margin-left: 12px;
}
.jch-btn-ghost .elementor-button:hover {
	background-color: rgba(255, 255, 255, 0.3) !important;
	border-color: #ffffff !important;
	color: #ffffff !important;
}

/* Hero CTA row — gap between primary and ghost buttons */
.elementor-element-844e51c.e-con,
.elementor-element-d0227c3.e-con {
	gap: 16px !important;
}

/* 19. Split Content — gutter between mobile stack and 1200px boxed cap */
@media (min-width: 1025px) and (max-width: 1280px) {
	.elementor .e-con.e-con-boxed > .e-con-inner {
		padding-inline: 24px;
	}
}

/* 20. Locations image grid — scale gracefully with 2–4 cards */
.elementor-element-444f73a7 .elementor-container {
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}
.elementor-element-444f73a7 .elementor-container > .elementor-column {
	flex: 1 1 280px;
	max-width: 300px;
	width: auto;
}

/* 21. Icon feature grid / split sections — centre image against text */
/* Centre any flex column whose only widget is an image (image-only split columns). */
.e-con.e-child:has(> .elementor-widget-image):not(
		:has(> .elementor-widget:not(.elementor-widget-image))
	) {
	align-self: center;
}

/* 22. Mobile drawer — hide Header Builder button, show nav menu phone */
@media (max-width: 1075px) {
	#masthead .ast-mobile-header-wrap .ast-header-button-1 {
		display: none !important;
	}
}

/* 23. Tablet/mobile header — gutters and logo lock */
@media (max-width: 1075px) {
	#masthead .ast-mobile-header-wrap .ast-builder-grid-row,
	#masthead .ast-mobile-header-wrap .ast-primary-header-bar {
		padding-left: clamp(16px, 3vw, 32px) !important;
		padding-right: clamp(16px, 3vw, 32px) !important;
	}
	#masthead .ast-mobile-header-wrap .site-branding {
		min-width: 140px;
	}
	#masthead .ast-mobile-header-wrap .site-header-primary-section-right {
		display: flex !important;
		align-items: center;
		gap: 10px;
		flex: 0 0 auto;
	}
}

/* 24. Mobile drawer — strip any orange from menu buttons */
@media (max-width: 1075px) {
	#masthead .menu-toggle,
	#masthead .menu-toggle:hover,
	#masthead .menu-toggle:focus,
	#masthead .menu-toggle:focus-visible,
	#masthead .menu-toggle:active,
	body.ast-theme-transparent-header #masthead .menu-toggle,
	body.ast-theme-transparent-header #masthead .menu-toggle:hover,
	body.ast-theme-transparent-header #masthead .menu-toggle:focus {
		background-color: transparent !important;
		background-image: none !important;
		color: var(--jch-brown) !important;
		border-color: var(--jch-divider) !important;
	}
	#masthead .menu-toggle svg,
	#masthead .menu-toggle .ast-mobile-svg,
	#masthead .menu-toggle .mobile-menu-toggle-icon {
		fill: var(--jch-brown) !important;
		color: var(--jch-brown) !important;
	}
	#masthead .main-header-menu .menu-item > .menu-link,
	#masthead .main-header-menu .menu-link,
	#masthead .main-header-menu .current-menu-item > .menu-link,
	#masthead .main-header-menu .current-menu-ancestor > .menu-link {
		background-color: transparent !important;
		background-image: none !important;
		color: var(--jch-brown) !important;
	}
}

/* 25. Mobile drawer open state — fix selector */
@media (max-width: 1075px) {
	body.ast-main-header-nav-open
		#masthead
		.ast-mobile-header-wrap
		.ast-mobile-header-content,
	body
		#masthead
		.ast-mobile-header-wrap:has(.menu-toggle.toggled)
		.ast-mobile-header-content,
	body
		#masthead
		.ast-mobile-header-wrap:has(.main-header-bar-navigation.toggle-on)
		.ast-mobile-header-content,
	body
		#masthead
		.ast-mobile-header-wrap:has(.main-header-bar-navigation.toggled-on)
		.ast-mobile-header-content {
		display: block !important;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--jch-white);
		border-top: 1px solid var(--jch-divider);
		border-radius: 0 0 16px 16px;
		overflow: hidden;
		box-shadow: 0 10px 24px rgba(40, 35, 25, 0.1);
		z-index: 9999;
	}
	#masthead .main-header-bar-navigation.toggle-on,
	#masthead .main-header-bar-navigation.toggled-on {
		display: block !important;
		width: 100% !important;
	}
	body
		#masthead
		.ast-mobile-header-wrap
		.main-header-bar-navigation.toggle-on
		.main-header-menu,
	body
		#masthead
		.ast-mobile-header-wrap
		.main-header-bar-navigation.toggled-on
		.main-header-menu,
	body
		#masthead
		.ast-builder-menu-1
		.main-header-bar-navigation.toggle-on
		.main-header-menu,
	body
		#masthead
		.ast-builder-menu-1
		.main-header-bar-navigation.toggled-on
		.main-header-menu {
		display: block !important;
		width: 100% !important;
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		background-color: var(--jch-white);
		padding: 12px 16px;
		box-shadow: none;
		z-index: auto;
	}
}

/* ---------- 25b. Mobile drawer row layout ---------- */
@media (max-width: 1075px) {
	body #masthead .ast-mobile-header-content .ast-builder-menu-1,
	body #masthead .ast-mobile-header-content .ast-main-header-bar-alignment,
	body #masthead .ast-mobile-header-content .main-header-bar-navigation,
	body #masthead .ast-mobile-header-content .site-navigation,
	body #masthead .ast-mobile-header-content .main-navigation,
	body #masthead .ast-mobile-header-content .main-header-menu {
		width: 100% !important;
		max-width: none !important;
		box-sizing: border-box !important;
	}

	body #masthead .ast-mobile-header-content .main-header-menu {
		margin: 0 !important;
		padding: 12px 16px !important;
	}

	body #masthead .ast-mobile-header-content .main-header-menu > .menu-item {
		display: flex !important;
		align-items: stretch !important;
		flex-wrap: wrap !important;
		width: 100% !important;
		max-width: none !important;
	}

	body
		#masthead
		.ast-mobile-header-content
		.main-header-menu
		> .menu-item
		> .menu-link {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 16px !important;
		padding: 14px 12px !important;
		box-sizing: border-box !important;
	}

	body
		#masthead
		.ast-mobile-header-content
		.main-header-menu
		> .menu-item-has-children
		> .menu-link
		.dropdown-menu-toggle {
		display: none !important;
	}

	body
		#masthead
		.ast-mobile-header-content
		.main-header-menu
		> .menu-item-has-children
		> button.ast-menu-toggle {
		display: inline-flex !important;
		position: static !important;
		flex: 0 0 56px !important;
		width: 56px !important;
		min-width: 56px !important;
		min-height: 56px !important;
		align-self: stretch !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 12px !important;
		background: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid rgba(94, 87, 69, 0.15) !important;
		color: var(--jch-brown) !important;
		box-shadow: none !important;
	}

	body
		#masthead
		.ast-mobile-header-content
		.main-header-menu
		> .menu-item-has-children
		> button.ast-menu-toggle
		.ast-icon {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	body
		#masthead
		.ast-mobile-header-content
		.main-header-menu
		> .menu-item
		> .sub-menu {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: none !important;
		position: static !important;
		margin: 0 !important;
		padding: 0 0 8px 16px !important;
		box-shadow: none !important;
	}
}

/* ---------- 25c. Franchise current-item priority ---------- */
/* Both Discover and Build a Hotel get marked current (same URL); prefer the grouped item. */
#masthead
	#menu-item-3092:has(> .sub-menu > .mm-group.current-menu-item)
	> .sub-menu
	> #menu-item-3148.current-menu-item
	> .menu-link,
#masthead
	#menu-item-3092:has(> .sub-menu > .mm-group.current_page_item)
	> .sub-menu
	> #menu-item-3148.current_page_item
	> .menu-link {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--jch-brown) !important;
}

#masthead
	#menu-item-3092:has(> .sub-menu > .mm-group.current-menu-item)
	> .sub-menu
	> #menu-item-3148.current-menu-item
	> .menu-link
	.ast-icon,
#masthead
	#menu-item-3092:has(> .sub-menu > .mm-group.current_page_item)
	> .sub-menu
	> #menu-item-3148.current_page_item
	> .menu-link
	.ast-icon {
	color: var(--jch-brown) !important;
}

/* 26. Mid-width 1076–1279px — logo + nav on one line, phone CTA below the logo */
@media (min-width: 1076px) and (max-width: 1279px) {
	/* The HFB container and grid row shrink-wrap to their widest row by default; */
	#masthead:not(#ast-mobile-header) .site-primary-header-wrap {
		max-width: 100% !important;
		width: 100% !important;
	}
	#masthead .site-primary-header-wrap .ast-builder-grid-row {
		display: grid !important;
		grid-template-columns: auto 1fr !important;
		grid-template-rows: auto auto !important;
		width: 100% !important;
		align-items: center !important;
		column-gap: 20px !important;
		row-gap: 4px !important;
	}
	#masthead .site-header-primary-section-left {
		display: contents !important;
	}
	/* Row 1, col 1 — logo */
	#masthead
		.site-header-primary-section-left
		> .ast-builder-layout-element[data-section="title_tagline"] {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: start !important;
		align-self: center !important;
	}
	/* Row 1, col 2 — nav menu, left-aligned next to the logo */
	#masthead .site-header-primary-section-left > .ast-builder-menu-1,
	#masthead
		.site-header-primary-section-left
		> [data-section="section-hb-menu-1"] {
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-self: start !important;
		align-self: center !important;
	}
	/* Row 2, col 1 — phone CTA, left-aligned directly under the logo */
	#masthead .site-header-primary-section-right {
		grid-column: 1 !important;
		grid-row: 2 !important;
		justify-self: start !important;
		display: flex !important;
		justify-content: flex-start !important;
		align-self: start !important;
		margin: 0 !important;
		padding: 0 0 10px 0 !important;
	}

	/* Comfortable nav typography now that the nav owns a full row. */
	#masthead .main-header-menu {
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
	}
	#masthead .main-header-menu > .menu-item {
		flex: 0 0 auto !important;
	}
	#masthead .main-header-menu > .menu-item > .menu-link {
		padding: 8px 9px !important;
		font-size: 0.85rem !important;
		letter-spacing: 0.01em !important;
		white-space: nowrap !important;
		flex-wrap: nowrap !important;
	}
	#masthead .main-header-menu > .menu-item > .menu-link::after {
		left: 9px !important;
		right: 9px !important;
		bottom: 2px !important;
	}
	#masthead .ast-main-header-wrap .custom-logo,
	#masthead .ast-main-header-wrap .custom-logo-link img {
		width: 160px !important;
		height: 52px !important;
	}
	/* Phone CTA at its normal size on its own row. */
	#masthead .ast-header-button-1 .ast-custom-button {
		padding: 10px 18px !important;
		font-size: 0.95rem !important;
	}
}

/* Brand: ALL CAPS headlines (H1/H2/H3) */
h1,
h2,
h3,
.entry-title,
h1.wp-block-post-title,
.ast-archive-title,
.page-title,
.entry-header h1,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3 {
	text-transform: uppercase !important;
	letter-spacing: 0.02em;
}

/* Tighter leading on the largest titles for the brand "hero" feel */
h1,
h1.entry-title,
.entry-header h1,
.ast-archive-title,
h1.elementor-heading-title {
	line-height: 1.05;
}

/* Nav ALL CAPS rule reverted 2026-06-04: broke header layout; nav stays title case. */

/* Brand: Buttons / CTAs - ALL CAPS */
.elementor-button,
.elementor-button-link,
.wp-block-button__link,
.ast-custom-button,
button.btn,
a.btn,
.button,
input[type="submit"],
button[type="submit"] {
	text-transform: uppercase !important;
	letter-spacing: 0.03em;
}

/* Brand: Choice Yellow (#FFCF31) systemic accents */
::selection {
	background-color: #ffcf31;
	color: #2b2a28;
}
::-moz-selection {
	background-color: #ffcf31;
	color: #2b2a28;
}

.brand-block-yellow {
	background-color: #ffcf31;
	color: #ffffff;
	font-family: "Montserrat", sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 18px 32px;
	display: inline-block;
	text-decoration: none;
	border: none;
	transition: background-color 0.2s ease;
}
.brand-block-yellow:hover,
.brand-block-yellow:focus {
	background-color: #5f5a55;
	color: #ffffff;
}

/* Migrated from Astra Customizer "Additional CSS" on 2026-06-04 */
.elementor-position-top .elementor-image-box-img {
	width: 100% !important;
	display: block;
	overflow: hidden;
}
.elementor-position-top .elementor-image-box-img img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Yellow accent stripe on CTAs - tried and reverted 2026-06-04. */

/* Brand: Unlimited Elements post-grid "Read More" button */
.uc_more_btn {
	background-color: var(--jch-orange) !important;
	color: #ffffff !important;
	padding: 12px 24px !important;
	border-radius: 0 !important;
	display: inline-block;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.uc_more_btn:hover,
.uc_more_btn:focus {
	background-color: var(--jch-orange-dark) !important;
	color: #ffffff !important;
}
.uc_more_btn .uc_btn_txt {
	color: #ffffff !important;
	font-family: "Montserrat", sans-serif !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	font-size: 0.85rem;
}

/* Brand: Gravity Forms theme variable overrides */
.gform-theme--orbital,
.gform-theme {
	/* PRIMARY (submit button, focus accents) — brand Choice Orange */
	--gf-color-primary: #f5851d !important;
	--gf-color-primary-rgb: 245, 133, 29 !important;
	--gf-color-primary-contrast: #ffffff !important;
	--gf-color-primary-contrast-rgb: 255, 255, 255 !important;
	--gf-color-primary-darker: #f26322 !important;
	--gf-color-primary-lighter: #fa9f46 !important;

	/* IN-CONTROL PRIMARY — same role within form controls (radio dots, etc.) */
	--gf-color-in-ctrl-primary: #f5851d !important;
	--gf-color-in-ctrl-primary-rgb: 245, 133, 29 !important;
	--gf-color-in-ctrl-primary-contrast: #ffffff !important;
	--gf-color-in-ctrl-primary-contrast-rgb: 255, 255, 255 !important;
	--gf-color-in-ctrl-primary-darker: #f26322 !important;
	--gf-color-in-ctrl-primary-lighter: #fa9f46 !important;

	/* SECONDARY-CONTRAST (label text on white bg) — brand Warm Gray */
	--gf-color-secondary-contrast: #5f5a55 !important;
	--gf-color-secondary-contrast-rgb: 95, 90, 85 !important;
	--gf-color-in-ctrl-contrast: #5f5a55 !important;
	--gf-color-in-ctrl-contrast-rgb: 95, 90, 85 !important;

	/* OUT-CONTROL DARK-DARKER (heading/strong text) — brand Warm Gray */
	--gf-color-out-ctrl-dark-darker: #5f5a55 !important;
	--gf-color-in-ctrl-dark-darker: #5f5a55 !important;

	/* OUT-CONTROL-LIGHT alpha base (faint dividers / outlines) — derive from Warm Gray */
	--gf-color-out-ctrl-light: rgba(95, 90, 85, 0.1) !important;
	--gf-color-out-ctrl-light-rgb: 95, 90, 85 !important;
	--gf-color-in-ctrl-light: rgba(95, 90, 85, 0.1) !important;
	--gf-color-in-ctrl-light-rgb: 95, 90, 85 !important;

	/* CONTROL LABEL colours (the field <label> text) — brand Warm Gray */
	--gf-ctrl-label-color-primary: #5f5a55 !important;
	--gf-ctrl-label-color-secondary: #5f5a55 !important;
}

/* Submit button: enforce brand button styling matching the site CTA system. */
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper button[type="submit"],
.gform_wrapper input[type="submit"] {
	text-transform: uppercase !important;
	letter-spacing: 0.03em;
	font-weight: 600 !important;
	font-family: "Montserrat", sans-serif !important;
}

/* Field labels: belt-and-braces brand Warm Gray override. */
.gform_wrapper .gfield_label,
.gform_wrapper .gfield_label_before_complex,
.gform_wrapper legend.gfield_label {
	color: #5f5a55 !important;
}

/* Input focus state: brand-orange focus ring instead of default blue. */
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: #f5851d !important;
	box-shadow: 0 0 0 2px rgba(245, 133, 29, 0.2) !important;
	outline: none;
}

/* Brand Cards proportional layout */

.elementor-element.brand-card-row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 0 !important;
}

.elementor-element.brand-card-row > .elementor-element {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
}

.elementor-element.brand-card-row > .elementor-element.brand-card--featured {
	flex: 2 1 0 !important;
}

/* Tablet: wrap to 2 columns. */
@media (max-width: 1024px) {
	.elementor-element.brand-card-row > .elementor-element,
	.elementor-element.brand-card-row > .elementor-element.brand-card--featured {
		flex: 0 0 50% !important;
	}
}

/* Mobile: stack 1 column. */
@media (max-width: 600px) {
	.elementor-element.brand-card-row > .elementor-element,
	.elementor-element.brand-card-row > .elementor-element.brand-card--featured {
		flex: 0 0 100% !important;
	}
}

/* Single post + blog archive brand pass */

/* Hide any comments markup that may still leak through */
.single-post #comments,
.single-post .comments-area,
.single-post #respond,
.single-post .comment-respond,
.single-post .ast-comment-meta,
.single-post .comments-link {
	display: none !important;
}

/* "Back to Articles & News" link above the post title */
.jch-back-to-news {
	display: inline-block;
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	color: #f5851d;
	text-decoration: none;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.jch-back-to-news:hover {
	color: #f26322;
}

/* Single post: title hero treatment */
.single-post .entry-title,
.single-post .ast-dynamic-single-post-title {
	font-size: 44px;
	line-height: 1.15;
	margin-bottom: 0;
}
.single-post .entry-header,
.single-post .ast-single-post-banner-content {
	margin-bottom: 32px;
}
.single-post .entry-header::after,
.single-post .ast-single-post-banner-content::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	background: #f5851d;
	margin-top: 20px;
}

@media (max-width: 768px) {
	.single-post .entry-title,
	.single-post .ast-dynamic-single-post-title {
		font-size: 32px;
	}
}

/* Single post + archive: meta line styling */
.entry-meta,
.ast-blog-meta-container,
.ast-dynamic-single-post-meta {
	font-size: 14px;
	color: #5f5a55;
	margin-bottom: 12px;
}
.entry-meta a,
.ast-blog-meta-container a {
	color: #5f5a55;
	text-decoration: none;
}
.entry-meta a:hover,
.ast-blog-meta-container a:hover {
	color: #f5851d;
}

/* Footer nav — suppress HFE hamburger toggle */

.jch-elementor-footer .hfe-nav-menu__toggle {
	display: none !important;
}

.jch-elementor-footer nav.hfe-dropdown,
.jch-elementor-footer nav.hfe-dropdown > ul,
.jch-elementor-footer nav.hfe-dropdown li,
.jch-elementor-footer nav.hfe-dropdown li a,
.jch-elementor-footer nav.hfe-dropdown a.hfe-menu-item,
.jch-elementor-footer .hfe-nav-menu.hfe-dropdown {
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
}

/* Category links rendered as brand-orange pill badge */
.entry-meta .cat-links a,
.ast-terms-link a,
.ast-dynamic-single-post-taxonomy a {
	display: inline-block;
	background: #f5851d;
	color: #ffffff !important;
	padding: 4px 12px;
	border-radius: 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none !important;
	line-height: 1.4;
}
.entry-meta .cat-links a:hover,
.ast-terms-link a:hover,
.ast-dynamic-single-post-taxonomy a:hover {
	background: #f26322;
	color: #ffffff !important;
}

/* Blog archive: card hover lift + breathing room */
.blog .post,
.archive .post,
.search-results .post {
	margin-bottom: 32px;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}
.blog .post:hover,
.archive .post:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Featured image on archive cards: fills card width */
.blog .post-thumb-img-content img,
.archive .post-thumb-img-content img {
	width: 100%;
	height: auto;
	display: block;
}

/* Post navigation (prev/next) — clean brand styling */
.post-navigation,
.nav-links {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #f1efe9;
	font-size: 15px;
}
.post-navigation .nav-previous a,
.post-navigation .nav-next a,
.nav-links .nav-previous a,
.nav-links .nav-next a {
	text-decoration: none;
	color: #5f5a55;
	font-weight: 600;
}
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
	color: #f5851d;
}

/* Single post: force a readable content column. */
.single-post .site-content > .ast-container,
.single-post .entry-content,
.single-post .ast-post-format-,
.single-post #primary > .ast-row {
	max-width: 800px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}

/* Astra global heading typography sets text-transform:capitalize on all h1–h6. */
.elementor-widget-text-editor h4 {
	text-transform: none;
}

/* Match the featured-image banner and post navigation to the article column width. */
.single-post .entry-header,
.single-post .post-navigation,
.single-post .nav-links {
	max-width: 800px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}

/* Brand: Uniform image heights on UAEL Posts widget thumbnails */
.elementor-widget-uael-posts .uael-post__thumbnail,
.elementor-widget-uael-posts .uael-post__thumbnail > a {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.elementor-widget-uael-posts .uael-post__thumbnail img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* Brand: Testimonial Carousel */
.brand-testimonial-carousel {
	position: relative;
	padding: 0 56px;
	overflow: hidden;
	/* Override the Elementor container `display: flex` once Swiper rewires us. */
	display: block !important;
	width: 100% !important;
}
@media (max-width: 767px) {
	.brand-testimonial-carousel {
		padding: 0 32px;
	}
}

.brand-testimonial-carousel .swiper-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch;
	width: 100%;
}

.brand-testimonial-carousel .swiper-slide {
	height: auto;
	display: flex;
	box-sizing: border-box;
	/* Honor the inline per-slide width Swiper sets, so slides don't shrink. */
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
}

/* Card surface for each testimonial inside the carousel */
.brand-testimonial-carousel .swiper-slide > .elementor-element,
.brand-testimonial-carousel .swiper-slide > .elementor-widget {
	width: 100%;
	background: #ffffff;
	border: 1px solid #e8e5df;
	border-radius: 0;
	padding: 32px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	transition:
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}
.brand-testimonial-carousel .swiper-slide > .elementor-element:hover,
.brand-testimonial-carousel .swiper-slide > .elementor-widget:hover {
	border-color: var(--jch-orange);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Quote glyph above the testimonial text */
.brand-testimonial-carousel
	.elementor-widget-testimonial
	.elementor-testimonial-content::before {
	content: "\201C"; /* left double quote */
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 56px;
	line-height: 1;
	color: var(--jch-orange);
	margin-bottom: 8px;
}

/* Testimonial typography inside the carousel cards */
.brand-testimonial-carousel .elementor-testimonial-content {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--jch-brown);
	font-style: italic;
	margin-bottom: 20px;
}
.brand-testimonial-carousel .elementor-testimonial-name {
	font-weight: 700;
	color: var(--jch-brown);
	font-size: 1rem;
}
.brand-testimonial-carousel .elementor-testimonial-job {
	color: var(--jch-brown-soft);
	font-size: 0.875rem;
	text-transform: none;
}
.brand-testimonial-carousel .elementor-testimonial-image img {
	border-radius: 50%;
	width: 56px;
	height: 56px;
	object-fit: cover;
}

/* Navigation arrows — brand orange circles */
.brand-testimonial-carousel .swiper-button-prev,
.brand-testimonial-carousel .swiper-button-next {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--jch-orange);
	color: #ffffff;
	top: 50%;
	transform: translateY(-50%);
	margin-top: 0;
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
.brand-testimonial-carousel .swiper-button-prev:hover,
.brand-testimonial-carousel .swiper-button-next:hover {
	background: var(--jch-orange-dark);
}
.brand-testimonial-carousel .swiper-button-prev::after,
.brand-testimonial-carousel .swiper-button-next::after {
	font-family: Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	color: #ffffff;
}
/* Unicode chevrons — work without Swiper's icon font. */
.brand-testimonial-carousel .swiper-button-prev::after {
	content: "\2039";
}
.brand-testimonial-carousel .swiper-button-next::after {
	content: "\203A";
}
.brand-testimonial-carousel .swiper-button-prev {
	left: 4px;
}
.brand-testimonial-carousel .swiper-button-next {
	right: 4px;
}

/* Pagination dots — brand orange, horizontally centered */
.brand-testimonial-carousel .swiper-pagination {
	position: relative;
	margin-top: 24px;
	bottom: auto;
	text-align: center;
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.brand-testimonial-carousel .swiper-pagination-bullet {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--jch-brown-soft);
	opacity: 0.4;
	cursor: pointer;
	transition:
		background 0.2s ease,
		opacity 0.2s ease;
}
.brand-testimonial-carousel .swiper-pagination-bullet-active {
	background: var(--jch-orange);
	opacity: 1;
}

/* 27. "What We Provide" icon-box grid — restore even row spacing. */
.elementor-element.elementor-element-6bc271b3 > .elementor-widget-container,
.elementor-element.elementor-element-99d0852 > .elementor-widget-container {
	margin-bottom: 24px !important;
}

/* 28. Sub-nav hover gap fix — 4px margin-top on .sub-menu creates a dead zone that
   breaks hover before the cursor reaches the dropdown. Extend the li hover area
   instead and zero the margin so position stays the same. */
@media (min-width: 1076px) {
  #masthead .main-header-menu > .menu-item-has-children {
    padding-bottom: 4px;
  }
  #masthead .main-header-menu > .menu-item-has-children > .sub-menu {
    margin-top: 0 !important;
  }
}


/* 30. Nested fly-out hover gap fix — 12px margin-left on the fly-out sub-menu
   creates a horizontal dead zone. Bridge it with padding-right on the parent li,
   same pattern as fix #28. */
@media (min-width: 1076px) {
  #masthead .sub-menu .menu-item-has-children {
    padding-right: 12px;
  }
  #masthead .sub-menu .menu-item-has-children > .sub-menu {
    margin-left: 0 !important;
  }
}

/* 31. First-level submenu padding — more breathing room in the dropdown card
   and between items. */
#masthead .main-header-menu > .menu-item-has-children > .sub-menu {
  padding: 14px 0 !important;
}
#masthead .main-header-menu > .menu-item-has-children > .sub-menu > .menu-item > .menu-link {
  padding: 12px 18px !important;
}
/* 32. Elementor divider separators — Choice yellow-to-orange gradient line */
.elementor-widget-divider .elementor-divider-separator {
	border-top: 0 !important;
	min-height: 4px;
	background: linear-gradient(90deg, #ffc72b 0%, #f47a1b 100%);
}

/* 33. Split Content image — orange border + offset orange backgrounds.
   .jch-image-frame targets the image column explicitly (preferred). The
   structural :has() fallback now fires ONLY inside a split row: an
   image-only column that is a sibling of a text/heading column. This
   stops standalone images (e.g. the brand logo) from being framed. */
/*:is(.e-con, .e-con-inner):has(
		> .e-con.e-child :is(.elementor-widget-text-editor, .elementor-widget-heading)
	)
	> .e-con.e-child:has(> .elementor-widget-image):not(
		:has(> .elementor-widget:not(.elementor-widget-image))
	),
.jch-image-frame {
	border: 4px solid var(--jch-orange) !important;
	overflow: visible !important;
}*/

:is(.e-con, .e-con-inner):has(
		> .e-con.e-child :is(.elementor-widget-text-editor, .elementor-widget-heading)
	)
	> .e-con.e-child:has(> .elementor-widget-image):not(
		:has(> .elementor-widget:not(.elementor-widget-image))
	)
	> .elementor-widget-image
	> .elementor-widget-container,
.jch-image-frame .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}
:is(.e-con, .e-con-inner):has(
		> .e-con.e-child :is(.elementor-widget-text-editor, .elementor-widget-heading)
	)
	> .e-con.e-child:has(> .elementor-widget-image):not(
		:has(> .elementor-widget:not(.elementor-widget-image))
	)
	> .elementor-widget-image,
.jch-image-frame .elementor-widget-image {
	position: relative;
	overflow: visible;
	isolation: isolate;
}
:is(.e-con, .e-con-inner):has(
		> .e-con.e-child :is(.elementor-widget-text-editor, .elementor-widget-heading)
	)
	> .e-con.e-child:has(> .elementor-widget-image):not(
		:has(> .elementor-widget:not(.elementor-widget-image))
	)
	> .elementor-widget-image::before,
.jch-image-frame .elementor-widget-image::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 30%;
	height: 30%;
	background: var(--jch-orange);
	transform: translate(-10px, -10px);
	z-index: -1;
	pointer-events: none;
}
:is(.e-con, .e-con-inner):has(
		> .e-con.e-child :is(.elementor-widget-text-editor, .elementor-widget-heading)
	)
	> .e-con.e-child:has(> .elementor-widget-image):not(
		:has(> .elementor-widget:not(.elementor-widget-image))
	)
	> .elementor-widget-image::after,
.jch-image-frame .elementor-widget-image::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30%;
	height: 30%;
	background: var(--jch-orange);
	transform: translate(10px, 10px);
	z-index: -1;
	pointer-events: none;
}

/* 33a. Testimonial cards opt out of the rule #33 auto image frame, on any page.
   A testimonial-card image column lives in a container that also holds an
   .elementor-widget-testimonial; split-content image columns do not. */
.e-con:has(.elementor-widget-testimonial)
	> .e-con.e-child:has(> .elementor-widget-image) {
	border: 0 !important;
}
.e-con:has(.elementor-widget-testimonial)
	> .e-con.e-child:has(> .elementor-widget-image)
	> .elementor-widget-image::before,
.e-con:has(.elementor-widget-testimonial)
	> .e-con.e-child:has(> .elementor-widget-image)
	> .elementor-widget-image::after {
	content: none !important;
}

/* 33b. Split Content video — match the image frame (rule #33) for columns
   whose only widget is a video. Squares are sized to 30% of the widget, the
   same proportional sizing now used for images (#33/#34.1), so they scale
   with the media instead of using a fixed pixel size. */
.e-con.e-child:has(> .elementor-widget-video):not(
		:has(> .elementor-widget:not(.elementor-widget-video))
	),
.jch-image-frame .elementor-widget-video,
.jch-video-frame {
	border: 4px solid var(--jch-orange) !important;
	overflow: visible !important;
}
.e-con.e-child:has(> .elementor-widget-video):not(
		:has(> .elementor-widget:not(.elementor-widget-video))
	)
	> .elementor-widget-video
	> .elementor-widget-container,
.jch-video-frame .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}
.e-con.e-child:has(> .elementor-widget-video):not(
		:has(> .elementor-widget:not(.elementor-widget-video))
	)
	> .elementor-widget-video,
.jch-video-frame .elementor-widget-video {
	position: relative;
	overflow: visible;
	isolation: isolate;
}
.e-con.e-child:has(> .elementor-widget-video):not(
		:has(> .elementor-widget:not(.elementor-widget-video))
	)
	> .elementor-widget-video::before,
.jch-video-frame .elementor-widget-video::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 30%;
	height: 30%;
	background: var(--jch-orange);
	transform: translate(-10px, -10px);
	z-index: -1;
	pointer-events: none;
}
.e-con.e-child:has(> .elementor-widget-video):not(
		:has(> .elementor-widget:not(.elementor-widget-video))
	)
	> .elementor-widget-video::after,
.jch-video-frame .elementor-widget-video::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30%;
	height: 30%;
	background: var(--jch-orange);
	transform: translate(10px, 10px);
	z-index: -1;
	pointer-events: none;
}

/* 34. Image-style variants for CH Split Content (Text Left / Text Right).
   Add ONE class to the IMAGE COLUMN via Elementor → Advanced → CSS Classes:
     jch-img--frame  — orange brand frame (border + offset corner squares)
     jch-img--plain  — no frame / no decoration
     jch-img--<new>  — future styles (add a block like 34.1 below)
   Any jch-img--* class opts the column OUT of the automatic frame (#33);
   columns with no such class keep today's automatic behaviour unchanged.
   This is direction-agnostic, so it works on both Text Left and Text Right. */

/* 34.0 Shared opt-out: any variant cancels the automatic #33 frame. */
.e-con.e-child[class*="jch-img--"] {
	border: 0 !important;
	overflow: visible !important;
}
.e-con.e-child[class*="jch-img--"] > .elementor-widget-image::before,
.e-con.e-child[class*="jch-img--"] > .elementor-widget-image::after {
	content: none !important;
}

/* 34.1 Variant: orange brand frame (explicit; works on boxed + full layouts).
   Scoped to .e-con.e-child so its specificity ties the 34.0 reset and, being
   later in source order, wins — re-enabling the corner squares for this variant. */
/*.e-con.e-child.jch-img--frame {
	border: 4px solid var(--jch-orange) !important;
	overflow: visible !important;
}*/
.e-con.e-child.jch-img--frame > .elementor-widget-image {
	position: relative;
	overflow: visible;
	isolation: isolate;
}
.e-con.e-child.jch-img--frame > .elementor-widget-image::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 30%;
	height: 30%;
	background: var(--jch-orange);
	transform: translate(-10px, -10px);
	z-index: -1;
	pointer-events: none;
}
.e-con.e-child.jch-img--frame > .elementor-widget-image::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30%;
	height: 30%;
	background: var(--jch-orange);
	transform: translate(10px, 10px);
	z-index: -1;
	pointer-events: none;
}

/* 34.2 Responsive hug: when a split row stacks (≤1024px) the framed image
   COLUMN stretches full-width while the image keeps its natural size, which
   leaves the frame (border + corner squares) larger than the image and
   detached from its edges (visible roughly 781–1023px). Shrink the framed
   column to its image and centre it so the frame hugs the image at every
   width. Native image size is preserved (no upscaling). Desktop side-by-side
   layouts (≥1025px) are untouched. Applies to the auto frame (#33), the legacy
   .jch-image-frame, and the .jch-img--frame variant (#34.1). */
@media (max-width: 1024px) {
	:is(.e-con, .e-con-inner):has(
			> .e-con.e-child :is(.elementor-widget-text-editor, .elementor-widget-heading)
		)
		> .e-con.e-child:has(> .elementor-widget-image):not(
			:has(> .elementor-widget:not(.elementor-widget-image))
		),
	.jch-image-frame,
	.e-con.e-child.jch-img--frame {
		width: fit-content !important;
		max-width: 100% !important;
		margin-inline: auto !important;
	}
}


/* ==========================================================================
   Section 35 — CH Video Carousel widget (ch_video_carousel)
   Stage (main Swiper) + linked filmstrip (thumbs Swiper), brand-styled.
   Squared corners throughout, consistent with the site-wide de-rounding.
   ========================================================================== */
.ch-video-carousel {
	font-family: "Montserrat", sans-serif;
}
.ch-vc__heading {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--jch-brown);
	margin: 0 0 28px;
	line-height: 1.15;
}

/* Stage slide: text beside video on desktop, stacked on mobile */
.ch-vc__slide {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
@media (min-width: 900px) {
	.ch-vc__slide {
		flex-direction: row;
		align-items: center;
		gap: 56px;
	}
	.ch-vc__text {
		flex: 0 0 38%;
	}
	.ch-vc__media {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Stage slides share one locked height (set by the JS aligner); centre the
   content within it so shorter slides don't leave lopsided whitespace. */
.ch-video-carousel .ch-vc__main .swiper-slide {
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.ch-video-carousel .ch-vc__main .swiper-slide > .ch-vc__slide {
	width: 100%;
}
@media (max-width: 899px) {
	.ch-video-carousel .ch-vc__main .swiper-slide {
		align-items: flex-start;
	}
}

.ch-vc__title {
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--jch-brown);
	margin: 0 0 10px;
}
.ch-vc__sub {
	font-size: 16px;
	font-weight: 700;
	color: var(--jch-brown);
	margin: 0 0 16px;
	line-height: 1.4;
}
.ch-vc__desc {
	color: var(--jch-brown-soft);
	font-size: 15px;
	line-height: 1.7;
}
.ch-vc__desc ul {
	margin: 0;
	padding-left: 20px;
}
.ch-vc__desc li {
	margin-bottom: 10px;
}

/* "Next video" button — brand orange, squared (no radius per site standard) */
.ch-vc__next-btn {
	margin-top: 24px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--jch-orange);
	color: var(--jch-white);
	border: none;
	border-radius: 0;
	padding: 14px 26px;
	font-family: inherit;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.ch-vc__next-btn:hover {
	background: var(--jch-orange-dark);
}

/* Video facade: 16:9 poster with a play button; iframe injected on click */
.ch-vc__embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
	cursor: pointer;
}
.ch-vc__embed--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	cursor: default;
}
.ch-vc__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ch-vc__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.ch-vc__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	border: none;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.ch-vc__embed:hover .ch-vc__play {
	background: var(--jch-orange);
}
.ch-vc__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 52%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 18px solid #fff;
}

/* Pagination dots */
.ch-vc__main .ch-vc__pagination {
	margin-top: 20px;
	text-align: center;
}
.ch-vc__main .swiper-pagination-bullet {
	background: var(--jch-brown-soft);
	opacity: 0.4;
}
.ch-vc__main .swiper-pagination-bullet-active {
	background: var(--jch-orange);
	opacity: 1;
}

/* Filmstrip row: arrows flanking the thumbs Swiper */
.ch-vc__thumbs-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 36px;
}
.ch-vc__thumbs {
	flex: 1 1 auto;
	min-width: 0;
}
/* Arrows: scoped + !important to beat the theme's global button styling,
   which otherwise renders these as plain orange squares. Circular is an
   intentional exception to the site-wide squaring (prev/next nav). */
.ch-video-carousel .ch-vc__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none !important;
	border-radius: 50% !important;
	background: var(--jch-orange) !important;
	color: var(--jch-white) !important;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
	/* Lift onto the thumbnail image centre (half the label block below it). */
	transform: translateY(-24px);
}
.ch-video-carousel .ch-vc__arrow:hover {
	background: var(--jch-orange-dark) !important;
}
.ch-video-carousel .ch-vc__arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* Draw the chevrons in CSS rather than relying on the glyphs, which fall back
   to a system font and sit off-centre. A rotated two-border square is crisp
   and centres cleanly via the button's flexbox. */
.ch-video-carousel .ch-vc__arrow {
	font-size: 0;
}
.ch-video-carousel .ch-vc__arrow::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border: solid var(--jch-white);
	border-width: 2.5px 2.5px 0 0;
}
.ch-video-carousel .ch-vc__arrow--prev::before {
	transform: translateX(2px) rotate(-135deg);
}
.ch-video-carousel .ch-vc__arrow--next::before {
	transform: translateX(-2px) rotate(45deg);
}

/* Filmstrip thumbnails */
.ch-vc__thumb {
	cursor: pointer;
	height: auto;
}
.ch-vc__thumb-frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	border: 3px solid transparent;
	transition: border-color 0.2s ease;
}
.ch-vc__thumb-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ch-vc__thumb-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 24px;
	background: rgba(0, 0, 0, 0.6);
}
.ch-vc__thumb-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid #fff;
}
.ch-vc__thumb-label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--jch-brown);
	margin-top: 10px;
	line-height: 1.3;
	min-height: 2.6em;
}
/* Active thumbnail: brand highlight (Swiper adds the active class) */
.ch-vc__thumbs .swiper-slide-thumb-active .ch-vc__thumb-frame {
	border-color: var(--jch-orange);
}

/* --------------------------------------------------------------------------
   Section 35b — self-contained Swiper layout essentials (scoped)
   -------------------------------------------------------------------------- */
.ch-video-carousel .swiper {
	position: relative;
	overflow: hidden;
	z-index: 1;
	display: block;
}
.ch-video-carousel .swiper-wrapper {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	box-sizing: content-box;
	transition-property: transform;
	align-items: stretch;
}
.ch-video-carousel .swiper-slide {
	flex-shrink: 0;
	box-sizing: border-box;
	position: relative;
}
.ch-video-carousel .ch-vc__main > .swiper-wrapper {
	align-items: center;
}
.ch-video-carousel .swiper-pagination-bullet {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin: 0 5px;
	border-radius: 50%;
	cursor: pointer;
}

/* Fade effect: restrict interaction to the active slide (mirrors Swiper's
   stock effect-fade rules, which we don't load). */
.ch-video-carousel .ch-vc__main.swiper-fade .swiper-slide {
	pointer-events: none;
	transition-property: opacity;
}
.ch-video-carousel .ch-vc__main.swiper-fade .swiper-slide-active {
	pointer-events: auto;
}


/* ==========================================================================
   Section 36 — B2B brand alignment (Productive task #72, 2026-07-16)
   Client colour guide: Dark #272333, Primary 500 #FFC72C, Primary 600 #EFBB29.
     1) Primary menu default text -> #272333
     2) Buttons -> yellow #FFC72C, hover #EFBB29, dark #272333 text
     3) Retire the orange image-frame device (orange dropped from B2B brand)
   Appended override block so earlier rules stay intact for easy rollback.
   ========================================================================== */

/* 1. Primary menu default link text */
#masthead .menu-link,
#masthead .ast-builder-menu .menu-item > .menu-link,
#masthead .main-header-menu .menu-item > .menu-link,
#masthead .main-header-menu .menu-link {
	color: #272333 !important;
}

/* 2. Buttons — brand yellow with dark text. Ghost buttons keep their own
   treatment via higher specificity and are intentionally not overridden. */
.elementor-button,
.elementor-button-link,
.uc_more_btn,
#masthead .nav-phone-button > .menu-link,
#masthead .menu-item-phone > .menu-link,
#masthead a.menu-link[href^="tel:"] {
	background-color: #FFC72C !important;
	color: #272333 !important;
}
.elementor-button:hover,
.elementor-button:focus,
.elementor-button-link:hover,
.uc_more_btn:hover,
.uc_more_btn:focus,
#masthead .nav-phone-button > .menu-link:hover,
#masthead .menu-item-phone > .menu-link:hover,
#masthead a.menu-link[href^="tel:"]:hover {
	background-color: #EFBB29 !important;
	color: #272333 !important;
}
.uc_more_btn .uc_btn_txt {
	color: #272333 !important;
}
.brand-block-yellow {
	background-color: #FFC72C !important;
	color: #272333 !important;
}
.brand-block-yellow:hover,
.brand-block-yellow:focus {
	background-color: #EFBB29 !important;
	color: #272333 !important;
}

/* 3. Remove residual orange image frames/borders. Per client these only
   appear on the internal /components/ demo page, so scope to those specific
   elements rather than site-wide. */
.elementor-element-4ea71b6 .elementor-widget-image::before,
.elementor-element-4ea71b6 .elementor-widget-image::after,
.elementor-element-4ea0f9d .elementor-widget-image::before,
.elementor-element-4ea0f9d .elementor-widget-image::after,
.elementor-element-fbaae15 .elementor-widget-image::before,
.elementor-element-fbaae15 .elementor-widget-image::after {
	display: none !important;
}
.elementor-element-fbaae15 {
	border: 0 !important;
}

/* Task #72 frame-border override — retire the orange frame-device border (overrides the
   .jch-image-frame rule near line 1934; orange dropped for B2B). */
.jch-image-frame,
.e-con.e-child.jch-img--frame {
	border: 0 !important;
}

/* Task #72 header-button hover text — keep dark text on hover (Astra sets it to
   --ast-global-color-5 = white, which fails contrast on the yellow). */
.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-1 .ast-custom-button:focus {
	color: #272333 !important;
}

.elementor-widget-counter .elementor-counter-number-wrapper {
  color: #6C6C74;
}
.elementor-widget-counter .elementor-counter-number-wrapper > span.elementor-counter-number,
.elementor-widget-counter .elementor-counter-number-wrapper > span.elementor-counter-number-suffix {
  color: inherit;
}

/* Task #73 Submit button: enforce brand button styling matching the site CTA system. */
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper button[type="submit"],
.gform_wrapper input[type="submit"] {
	text-transform: uppercase !important;
	letter-spacing: 0.03em;
	font-weight: 600 !important;
	font-family: "Montserrat", sans-serif !important;
	background-color: #FFC72C !important;
	border-radius: 0 !important;
}

.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper button[type="submit"],
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_footer .gform_button:focus,
.gform_wrapper button[type="submit"]:focus,
.gform_wrapper input[type="submit"]:focus,
.gform_wrapper .gform_footer .gform_button:active,
.gform_wrapper button[type="submit"]:active,
.gform_wrapper input[type="submit"]:active {
	background-color: #FFC72C !important;
	border-radius: 0 !important;
}

.choice-contact-form .gform_button,
input[type="submit"].gform_button {
  color: #272333 !important;
}

/* Task #74. Dropdown panel width — Astra customizer has this at 1200px on staging,
      which also pushes the level-2 flyout off to the right. */
@media (min-width: 1076px) {
	#masthead .main-header-menu .sub-menu,
	#masthead .main-header-menu .sub-menu .sub-menu {
		width: 350px !important;
		min-width: 350px !important;
	}
}
#masthead .main-header-menu .sub-menu .menu-link {
	color: var(--jch-brown) !important;
	text-transform: none !important;
	border-bottom: 0 !important;
}

#masthead .main-header-menu .sub-menu .menu-item:hover > .menu-link,
#masthead .main-header-menu .sub-menu .menu-link:hover,
#masthead .main-header-menu .sub-menu .menu-link:focus {
	background-color: rgba(226, 104, 17, 0.12) !important;
	color: var(--jch-orange) !important;
}

@media (max-width: 1075px) {
	.ast-header-break-point #masthead .main-header-menu .menu-link > .ast-icon.icon-arrow {
		display: none !important;
	}
}
/* Removing play button on video thumbnails  */
.ch-vc__thumb-play { display: none; }

/* Article headings render as authored, not uppercase */
.ast-blog-single-element,
.single-post .entry-title,
.blog .entry-title,
.archive .entry-title {
  text-transform: none !important;
}

/* Archive / blog listing titles */
.blog article .entry-title,
.archive article .entry-title,
.blog .wp-block-post-title,
.archive .wp-block-post-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    color: #e26811 !important;
}

/* Single article title */
.single .entry-title,
.single .wp-block-post-title {
    font-size: 36px !important;
    line-height: 1.2 !important;
    color: inherit !important;
    display: block !important;
    margin-bottom: 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* Archive / blog listing images only */
.blog article .post-thumbnail,
.archive article .post-thumbnail,
.blog .wp-block-post-featured-image,
.archive .wp-block-post-featured-image {
    overflow: hidden;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
}

.blog article .post-thumbnail img,
.archive article .post-thumbnail img,
.blog .wp-block-post-featured-image img,
.archive .wp-block-post-featured-image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Task #86 — Meet the Team grid alignment (page 3041)
   Equalises the name+role block so the "Profile" toggle starts on the same
   line, and bottom-pins the contact row so cards end on the same line. */
.elementor-page-3041 .e-con.e-child:has(> .elementor-widget-n-accordion) > .elementor-widget-image-box {
	min-height: 108px !important;
}
@media (max-width: 1024px) {
	.elementor-page-3041 .e-con.e-child:has(> .elementor-widget-n-accordion) > .elementor-widget-image-box {
		min-height: 150px !important;
	}
}
.elementor-page-3041 .e-con.e-child:has(> .elementor-widget-n-accordion) > .elementor-widget-social-icons {
	margin-top: auto !important;
}

/* Mobile stats counter — even, compact spacing (fix irregular gaps) */
@media (max-width: 767px) {
  .elementor .elementor-element.elementor-element-2f7004a.e-grid {
    --e-con-grid-template-rows: repeat(4, 100px) !important;
    align-content: center !important;
    row-gap: 20px !important;
  }
  .elementor .elementor-element.elementor-element-2f7004a.e-grid > .e-con {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}