:root {
	--baqhf-navy: #0A192F;
	--baqhf-navy-light: #112240;
	--baqhf-blue: #1E3E62;
	--baqhf-gold: #F2B705;
	--baqhf-gold-glow: #FFD966;
	--baqhf-gold-dark: #CC9A03;
	--baqhf-light-gray: #F8FAFC;
	--baqhf-text: #1E293B;
	--baqhf-white: #FFFFFF;
	--baqhf-border: #E2E8F0;
	--baqhf-border-gold: rgba(242, 183, 5, 0.3);
	--baqhf-muted: #64748B;
	/* System font stack, not a downloaded webfont — instant text render, no
	   FOUT/FOIT, and each OS's own highly-tuned, most-readable UI typeface. */
	--baqhf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--baqhf-content-width: 76rem;
	--baqhf-radius-sm: 0;
	--baqhf-radius-md: 0;
	--baqhf-radius-lg: 0;
	--baqhf-radius-pill: 0;
}

/* Site-wide architecture radius and typography — squared corners everywhere,
   by request, enforced with !important since this block deliberately wins
   over the theme's own --radius-* tokens (see design-tokens.css) so both
   namespaces always agree instead of drifting apart again. */
:root {
	--radius-sm: 0 !important;
	--radius-md: 0 !important;
	--radius-lg: 0 !important;
	--radius-pill: 0 !important;
	--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	--font-body: var(--font-sans) !important;
}

body,
input,
select,
textarea,
button {
	font-family: var(--baqhf-font);
}

button,
input[type="submit"],
input[type="button"],
.btn-primary,
.btn-outline {
	border-radius: var(--baqhf-radius-sm) !important;
}

/* Site-wide button hover: a lift + shadow on every button, plus a light
   "shine" sweep across the solid gold/navy CTA buttons specifically. */
button,
input[type="submit"],
input[type="button"],
.btn-primary,
.btn-outline,
.baq-hf-btn {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn-primary:hover,
.btn-outline:hover,
.baq-hf-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(18, 40, 63, 0.22);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
.btn-primary:active,
.btn-outline:active,
.baq-hf-btn:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(18, 40, 63, 0.16);
}

.btn-primary,
.baq-hf-btn {
	position: relative;
	overflow: hidden;
}

.btn-primary::before,
.baq-hf-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
	transform: translateX(-130%);
	pointer-events: none;
}

.btn-primary:hover::before,
.baq-hf-btn:hover::before {
	transform: translateX(130%);
	transition: transform 0.65s ease;
}

.baq-hf-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Hide the active theme's own header/footer so this plugin's markup is what visitors see. */
.site-header,
.site-footer {
	display: none !important;
}

/* Legacy "content + sidebar" block at the very bottom of the home page
   (baq-prefab-site-manager's contact widget) — duplicates the real footer's
   contact details, and falls back to a placeholder "info@example.com" when
   no email is set in that plugin's own settings. Hidden in favour of the
   proper footer contact info and the Google reviews CTA below. */
.front-page-details {
	display: none !important;
}

.baq-hf-container {
	max-width: var(--baqhf-content-width);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

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

.baq-hf-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--baqhf-white);
	border-bottom: 1px solid var(--baqhf-border);
	font-family: var(--baqhf-font);
	transition: box-shadow 0.2s ease;
}

.admin-bar .baq-hf-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .baq-hf-header {
		top: 46px;
	}
}

/* WP core switches #wpadminbar from fixed to `position: absolute` below
   600px (wp-includes/css/admin-bar.css, "Smartphone" breakpoint) — it's
   designed to scroll away with the page on narrow screens instead of
   permanently eating 46px. Once a logged-in visitor scrolls past it there,
   this sticky/fixed header must stop reserving that 46px too, or the space
   the admin bar used to fill shows raw page content instead — a gap that
   only ever appears for logged-in admins on phone-width screens, never for
   real site visitors. */
@media (max-width: 600px) {
	.admin-bar .baq-hf-header.is-scrolled {
		top: 0;
	}
}

.baq-hf-header.is-scrolled {
	box-shadow: 0 4px 16px rgba(18, 40, 63, 0.08);
}

/* The header always carries its own Dubai skyline photo — deliberately its
   own distinct image rather than the hero's, so it always reads as a
   separate bar sitting on top of whatever hero is beneath it, never as a
   transparent window onto the hero's own image (that used to make the two
   look "mixed together" at the top of the page, before any scrolling). */
.baq-hf-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: var(--baqhf-navy);
	background-image:
		linear-gradient(90deg, rgba(6, 15, 30, 0.88) 0%, rgba(8, 20, 38, 0.68) 45%, rgba(6, 15, 30, 0.88) 100%),
		url('/baq/wp-content/uploads/2026/08/burj-khalifa-footer.jpg');
	background-position: center 38%;
	background-size: cover;
	background-repeat: no-repeat;
	border-bottom-color: transparent;
}

.baq-hf-header--overlay.is-scrolled {
	position: fixed;
	box-shadow: 0 8px 24px rgba(18, 40, 63, 0.18);
}

.baq-hf-header--overlay .baq-hf-site-title,
.baq-hf-header--overlay .baq-hf-menu > li > a,
.baq-hf-header--overlay .baq-hf-menu-placeholder,
.baq-hf-header--overlay .baq-hf-phone {
	color: var(--baqhf-white);
}

/* The uploaded logo is dark (navy) artwork, meant for a white background —
   on the transparent/dark-hero header it would nearly disappear, so render
   it as a white silhouette there instead (both the transparent and the
   scrolled-navy states are dark backgrounds). */
.baq-hf-header--overlay .baq-hf-branding img {
	filter: brightness(0) invert(1);
}

.baq-hf-header--overlay .baq-hf-menu-toggle__icon span {
	background: var(--baqhf-white);
}

.baq-hf-header--overlay .baq-hf-menu > li > a:hover,
.baq-hf-header--overlay .baq-hf-menu > li > a:focus-visible {
	color: var(--baqhf-gold);
	background: rgba(255, 255, 255, 0.08);
}

.baq-hf-header--overlay .baq-hf-menu .baq-hf-submenu a {
	color: var(--baqhf-text);
}

@media (max-width: 1300px) {
	.baq-hf-header--overlay:not(.is-scrolled) .baq-hf-nav.is-open,
	.baq-hf-header--overlay .baq-hf-nav.is-open {
		/* .baq-hf-nav lives inside .baq-hf-container, which has its own
		   1.5rem side padding — without breaking out of that here, this
		   navy panel sat inset 1.5rem from each screen edge while open,
		   leaving the transparent overlay header's hero photo visible in
		   those margins either side of it. .baq-hf-nav is a flex item with
		   its own explicit flex-basis: 100% (see the max-width: 1300px rule
		   below), and flex-basis wins over width for a flex item's main-axis
		   size — overriding width alone left the panel unchanged, so both
		   are overridden here together. */
		width: calc(100% + 3rem);
		flex-basis: calc(100% + 3rem);
		margin-inline: -1.5rem;
		background: var(--baqhf-navy);
		border-radius: var(--baqhf-radius-md);
		margin-top: 0.5rem;
	}

	.baq-hf-header--overlay .baq-hf-menu a {
		border-bottom-color: rgba(255, 255, 255, 0.14);
	}
}

.baq-hf-header__inner {
	/* The header needs more breathing room than the site's 72rem reading-width
	   content column — with a full company name, a 5-item dropdown nav, a
	   phone button and a CTA, 72rem wasn't enough at ANY viewport width
	   (it's a fixed cap, not viewport-relative), which is why the nav was
	   wrapping to two rows even on a 1920px-wide screen. */
	max-width: 88rem;
	display: flex;
	align-items: center;
	gap: 2rem;
	min-height: 6.75rem;
	padding-block: 0.6rem;
}

.baq-hf-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: auto;
}

.baq-hf-nav {
	min-width: 0;
}

.baq-hf-menu {
	flex-wrap: wrap;
	justify-content: flex-end;
	row-gap: 0.25rem;
}

.baq-hf-branding img {
	display: block;
	max-height: 5.75rem;
	max-width: 16rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 480px) {
	.baq-hf-branding img {
		max-height: 3.75rem;
		max-width: 11rem;
	}
}

.baq-hf-site-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--baqhf-navy);
	text-decoration: none;
	letter-spacing: -0.01em;
}

.baq-hf-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	margin-left: auto;
}

.baq-hf-menu-toggle__icon {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 22px;
}

.baq-hf-menu-toggle__icon span {
	display: block;
	height: 2px;
	background: var(--baqhf-navy);
	border-radius: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.baq-hf-menu-toggle[aria-expanded="true"] .baq-hf-menu-toggle__icon span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.baq-hf-menu-toggle[aria-expanded="true"] .baq-hf-menu-toggle__icon span:nth-child(2) {
	opacity: 0;
}

.baq-hf-menu-toggle[aria-expanded="true"] .baq-hf-menu-toggle__icon span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.baq-hf-nav {
	display: flex;
}

.baq-hf-menu {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.baq-hf-menu li {
	position: relative;
}

.baq-hf-menu a {
	display: block;
	padding: 0.6rem 0.9rem;
	color: var(--baqhf-text);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--baqhf-radius-sm);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.baq-hf-menu .baq-hf-submenu a {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
}

.baq-hf-menu > li > a:hover,
.baq-hf-menu > li > a:focus-visible {
	color: var(--baqhf-blue);
	background: var(--baqhf-light-gray);
}

.baq-hf-menu .baq-hf-submenu {
	/* WordPress's default nav-menu walker names every nested <ul> "sub-menu",
	   and the theme has its own unscoped rules for that exact class (one
	   hides it by default, another gives it position:absolute + a white
	   background + a box-shadow for its own Services dropdown). Both used to
	   collide with ours. We now render our own menus with a renamed class
	   (see the nav_menu_submenu_css_class filter in the plugin) so this
	   selector can never collide with the theme's bare .sub-menu rules
	   again — but keep this rule self-contained regardless. */
	display: block;
	list-style: none;
	margin: 0;
	padding: 0.6rem;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 15.5rem;
	background: var(--baqhf-white);
	border: 1px solid var(--baqhf-border);
	border-radius: var(--baqhf-radius-md);
	box-shadow: 0 20px 40px rgba(10, 25, 47, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
	z-index: 10;
}

.baq-hf-submenu li + li {
	margin-top: 0.15rem;
}

.baq-hf-submenu a {
	border-radius: var(--baqhf-radius-sm);
}

.baq-hf-submenu a:hover,
.baq-hf-submenu a:focus-visible {
	background: var(--baqhf-light-gray);
	color: var(--baqhf-blue);
}

/* Top-priority services (baq-hf-top-service, set in baq_hf_build_header_menu)
   get a gold accent and their own "Top Services" eyebrow; the first regular
   service after them gets an "All Services" divider — keyed off the class
   and sibling position rather than nth-child, so it keeps working if the
   count of top/regular services ever changes. */
.baq-hf-submenu li.baq-hf-top-service {
	position: relative;
}

.baq-hf-submenu li.baq-hf-top-service:first-child {
	margin-top: 1.4rem;
}

.baq-hf-submenu li.baq-hf-top-service:first-child::before {
	content: "Top Services";
	position: absolute;
	top: -1.3rem;
	left: 0.75rem;
	color: var(--baqhf-gold-dark);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.baq-hf-submenu li.baq-hf-top-service > a {
	border-left: 2px solid var(--baqhf-gold);
	padding-left: calc(0.9rem - 2px);
	font-weight: 700;
	color: var(--baqhf-navy);
}

.baq-hf-submenu li.baq-hf-top-service + li:not(.baq-hf-top-service) {
	position: relative;
	margin-top: 1.5rem;
	padding-top: 0.65rem;
	border-top: 1px solid var(--baqhf-border);
}

.baq-hf-submenu li.baq-hf-top-service + li:not(.baq-hf-top-service)::before {
	content: "All Services";
	position: absolute;
	top: -0.55rem;
	left: 0.75rem;
	background: var(--baqhf-white);
	padding: 0 0.4rem;
	color: var(--baqhf-muted);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Dropdown visibility is driven ONLY by the JS-controlled .is-open class
   (click-based, on every screen size) — no :hover/:focus-within here. A
   hover-only dropdown is what caused the earlier "stuck open" / "won't
   show" bugs, since hover state on one item can visually linger while the
   mouse is anywhere nearby. One clear source of truth is more reliable. */
.baq-hf-menu .menu-item-has-children.is-open > .baq-hf-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.baq-hf-menu .menu-item-has-children > a {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.baq-hf-menu .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.baq-hf-menu .menu-item-has-children.is-open > a::after {
	transform: rotate(-135deg);
	margin-top: 2px;
}

.baq-hf-menu-placeholder {
	font-size: 0.85rem;
	color: var(--baqhf-muted);
	margin: 0;
}

.baq-hf-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.baq-hf-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--baqhf-navy);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
	border: 1.5px solid var(--baqhf-navy);
	padding: 0.65rem 1.1rem;
	background: transparent;
	animation: baq-hf-phone-shake 3s ease-in-out infinite;
}

.baq-hf-phone:hover,
.baq-hf-phone:focus-visible {
	color: var(--baqhf-white);
	background: var(--baqhf-navy);
	animation-play-state: paused;
}

.baq-hf-header--overlay .baq-hf-phone {
	border-color: rgba(255, 255, 255, 0.6);
}

.baq-hf-header--overlay .baq-hf-phone:hover,
.baq-hf-header--overlay .baq-hf-phone:focus-visible {
	background: var(--baqhf-white);
	color: var(--baqhf-navy);
	border-color: var(--baqhf-white);
}

@keyframes baq-hf-phone-shake {
	0%, 8%, 100% {
		transform: translateX(0) rotate(0);
	}
	1%, 5% {
		transform: translateX(-3px) rotate(-3deg);
	}
	2%, 6% {
		transform: translateX(3px) rotate(3deg);
	}
	3%, 7% {
		transform: translateX(-2px) rotate(-2deg);
	}
	4% {
		transform: translateX(2px) rotate(2deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.baq-hf-phone {
		animation: none;
	}
}

.baq-hf-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.baq-hf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	background: var(--baqhf-gold);
	color: var(--baqhf-navy);
	border: none;
	padding: 0.7rem 1.4rem;
	border-radius: var(--baqhf-radius-pill);
	font-family: var(--baqhf-font);
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.baq-hf-btn:hover {
	background: var(--baqhf-gold-dark);
}

.baq-hf-btn:active {
	transform: scale(0.98);
}

.baq-hf-btn--block {
	width: 100%;
	margin-top: 0.5rem;
}

@media (max-width: 1300px) {
	/* Without flex-wrap, "order + flex-basis: 100%" can never actually push
	   the nav onto its own row — the row just stays single-line and every
	   item (including the long company name) gets squeezed into whatever
	   space is left. This was the real reason the mobile menu never showed. */
	.baq-hf-header__inner {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}

	.baq-hf-site-title {
		font-size: 1.05rem;
	}

	.baq-hf-menu-toggle {
		display: inline-flex;
		order: 2;
	}

	.baq-hf-actions {
		order: 3;
	}

	.baq-hf-nav {
		order: 4;
		flex-basis: 100%;
		width: 100%;
		display: none;
		max-height: 70vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.baq-hf-nav.is-open {
		display: block;
	}

	.baq-hf-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: 0.5rem;
	}

	.baq-hf-menu a {
		padding: 0.85rem 0.5rem;
		border-radius: 0;
		border-bottom: 1px solid var(--baqhf-border);
	}

	.baq-hf-menu .baq-hf-submenu {
		position: static;
		min-width: auto;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		border-radius: 0;
		padding: 0 0 0 1rem;
		display: none;
	}

	.baq-hf-menu .menu-item-has-children.is-open > .baq-hf-submenu {
		display: block;
	}

	.baq-hf-phone__text {
		display: none;
	}
}

@media (max-width: 480px) {
	.baq-hf-btn {
		padding: 0.6rem 1rem;
		font-size: 0.85rem;
	}
}

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

.baq-hf-footer,
.site-footer {
	position: relative;
	background-color: var(--baqhf-navy);
	background-image: 
		linear-gradient(180deg, rgba(8, 20, 38, 0.94) 0%, rgba(10, 25, 47, 0.85) 45%, rgba(6, 15, 30, 0.98) 100%),
		url('/baq/wp-content/uploads/2026/08/burj-portrait-1.jpg');
	background-position: center 25%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--baqhf-font);
	margin-top: 4rem;
	border-top: 3px solid var(--baqhf-gold);
	box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.baq-hf-footer::before,
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 30%, rgba(242, 183, 5, 0.12) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.baq-hf-footer .baq-hf-container,
.site-footer .container {
	position: relative;
	z-index: 1;
}

.baq-hf-footer a,
.site-footer a {
	color: rgba(255, 255, 255, 0.85);
}

.baq-hf-footer__columns {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: 3rem;
	padding-block: 4.5rem 3.5rem;
}

@media (max-width: 768px) {
	.baq-hf-footer__columns {
		grid-template-columns: 1fr;
		gap: 2.25rem;
		padding-block: 3rem 2rem;
	}
}

.baq-hf-footer__heading {
	color: var(--baqhf-gold-glow);
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0 0 1.25rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	position: relative;
	display: inline-block;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--baqhf-gold);
}

.baq-hf-footer__col p {
	margin: 0 0 1.25rem;
	line-height: 1.7;
	font-size: 0.94rem;
	color: rgba(255, 255, 255, 0.85);
}

.baq-hf-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.baq-hf-footer-menu a {
	text-decoration: none;
	font-size: 0.94rem;
	font-weight: 500;
	transition: color 0.2s ease, transform 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.baq-hf-footer-menu a:hover {
	color: var(--baqhf-gold-glow);
	transform: translateX(4px);
}

.baq-hf-footer__contact {
	background: rgba(10, 25, 47, 0.65);
	border: 1px solid rgba(242, 183, 5, 0.25);
	border-radius: var(--baqhf-radius-md);
	padding: 1.75rem;
	backdrop-filter: blur(12px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.baq-hf-footer__contact address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin-bottom: 1.25rem;
	font-size: 0.94rem;
	line-height: 1.6;
}

.baq-hf-footer__contact address a {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
	transition: color 0.2s ease;
}

.baq-hf-footer__contact address a:hover {
	color: var(--baqhf-gold-glow);
}

.baq-hf-social {
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
}

.baq-hf-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 0;
	border: 1px solid rgba(242, 183, 5, 0.4);
	background: rgba(10, 25, 47, 0.6);
	color: var(--baqhf-gold);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 700;
	transition: all 0.25s ease;
}

.baq-hf-social a:hover {
	background: var(--baqhf-gold);
	border-color: var(--baqhf-gold);
	color: var(--baqhf-navy);
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(242, 183, 5, 0.3);
}

.baq-hf-footer__sitemap {
	border-top: 1px solid rgba(242, 183, 5, 0.2);
	padding-block: 2.5rem;
}

.baq-hf-footer__sitemap-inner {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.baq-hf-footer__sitemap-link {
	align-self: flex-start;
	color: var(--baqhf-gold);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.baq-hf-footer__sitemap-link:hover {
	color: var(--baqhf-white);
}

.baq-hf-sitemap-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.baq-hf-sitemap-menu > li {
	flex: 1 1 11rem;
	min-width: 10rem;
}

.baq-hf-sitemap-menu > li > a {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--baqhf-white);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-bottom: 1px solid rgba(242, 183, 5, 0.25);
	padding-bottom: 0.5rem;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.baq-hf-sitemap-menu > li > a:hover {
	color: var(--baqhf-gold);
	border-color: var(--baqhf-gold);
}

.baq-hf-sitemap-menu .baq-hf-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.baq-hf-sitemap-menu .baq-hf-submenu a {
	display: inline-block;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.85rem;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.baq-hf-sitemap-menu .baq-hf-submenu a:hover {
	color: var(--baqhf-gold);
	transform: translateX(4px);
}

.baq-hf-footer__map {
	padding-bottom: 3rem;
}

.baq-hf-footer__map iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
	border-radius: var(--baqhf-radius-md);
}

.baq-hf-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.baq-hf-footer__bottom-inner {
	padding-block: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.5rem;
	text-align: center;
}

.baq-hf-footer__bottom p {
	margin: 0;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.6);
}

.baq-hf-footer__legal {
	display: flex;
	gap: 1.25rem;
}

.baq-hf-footer__legal a {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color 0.2s ease;
}

.baq-hf-footer__legal a:hover {
	color: var(--baqhf-gold);
}

@media (min-width: 640px) {
	.baq-hf-footer__bottom-inner {
		justify-content: space-between;
	}
}

/* ---------- Get a Quote modal ---------- */

.baq-hf-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	font-family: var(--baqhf-font);
}

.baq-hf-modal[hidden] {
	display: none;
}

.baq-hf-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(18, 40, 63, 0.55);
}

.baq-hf-modal__panel {
	position: relative;
	background: var(--baqhf-white);
	border-radius: var(--baqhf-radius-lg);
	max-width: 26rem;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 2rem;
	box-shadow: 0 24px 48px rgba(18, 40, 63, 0.3);
}

.baq-hf-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--baqhf-light-gray);
	border: none;
	border-radius: 0;
	color: var(--baqhf-navy);
	cursor: pointer;
}

.baq-hf-modal__close svg {
	width: 14px;
	height: 14px;
}

.baq-hf-modal__panel h2 {
	margin: 0 0 0.4rem;
	color: var(--baqhf-navy);
	font-size: 1.4rem;
}

.baq-hf-modal__subtitle {
	margin: 0 0 1.5rem;
	color: var(--baqhf-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

#baq-hf-quote-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#baq-hf-quote-form label {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--baqhf-text);
}

#baq-hf-quote-form label em {
	color: var(--baqhf-blue);
	font-style: normal;
}

#baq-hf-quote-form input,
#baq-hf-quote-form select,
#baq-hf-quote-form textarea {
	font-family: var(--baqhf-font);
	font-size: 0.95rem;
	font-weight: 400;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--baqhf-border);
	border-radius: var(--baqhf-radius-sm);
	color: var(--baqhf-text);
	background: var(--baqhf-white);
	resize: vertical;
}

#baq-hf-quote-form select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352606D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 14px;
	padding-right: 2.25rem;
}

#baq-hf-quote-form input:focus,
#baq-hf-quote-form select:focus,
#baq-hf-quote-form textarea:focus {
	outline: 2px solid var(--baqhf-blue);
	outline-offset: 1px;
}

.baq-hf-hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.baq-hf-form-status {
	margin: 0;
	font-size: 0.85rem;
	min-height: 1.2em;
}

.baq-hf-form-status.is-success {
	color: #1b7a3d;
}

.baq-hf-form-status.is-error {
	color: #b3261e;
}

body.baq-hf-modal-open {
	overflow: hidden;
}

/* ---------- Fallback single-page template ---------- */

.baq-hf-page {
	max-width: 48rem;
	padding-block: 3.5rem 5rem;
	font-family: var(--baqhf-font);
	color: var(--baqhf-text);
}

.baq-hf-page__title {
	margin: 0 0 1.5rem;
	color: var(--baqhf-navy);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.baq-hf-page__content {
	line-height: 1.7;
	font-size: 1rem;
}

.baq-hf-page__content h2 {
	margin: 2rem 0 0.75rem;
	color: var(--baqhf-navy);
	font-size: 1.25rem;
}

.baq-hf-page__content h2:first-child {
	margin-top: 0;
}

.baq-hf-page__content p,
.baq-hf-page__content ul,
.baq-hf-page__content ol {
	margin: 0 0 1rem;
}

.baq-hf-page__content ul,
.baq-hf-page__content ol {
	padding-left: 1.25rem;
}

.baq-hf-page__content li {
	margin-bottom: 0.4rem;
}

.baq-hf-page__content a {
	color: var(--baqhf-blue);
}

.baq-hf-page__content h3 {
	margin: 1.5rem 0 0.5rem;
	color: var(--baqhf-navy);
	font-size: 1.05rem;
}

.baq-hf-page__content blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--baqhf-gold);
	background: var(--baqhf-light-gray);
	color: var(--baqhf-navy);
	font-weight: 600;
}

.baq-hf-page__content blockquote p:last-child {
	margin-bottom: 0;
}

/* ---------- Single project (case study) ---------- */

.baq-hf-project__meta {
	margin: 0 0 1.5rem;
}

.baq-hf-project__meta .badge {
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.baq-hf-project__meta a.badge:hover,
.baq-hf-project__meta a.badge:focus-visible {
	background: var(--baqhf-gold-dark);
}

.baq-hf-project__back {
	margin-top: 2.5rem;
}

.baq-hf-project__back a {
	color: var(--baqhf-blue);
	font-weight: 700;
	text-decoration: none;
}

.baq-hf-project__back a:hover {
	color: var(--baqhf-navy);
}

.baq-hf-project-cta {
	padding-block: 3.5rem;
	background: var(--baqhf-navy);
}

.baq-hf-project-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.baq-hf-project-cta .baq-hf-section-eyebrow,
.baq-hf-project-cta .baq-hf-section-heading {
	color: var(--baqhf-white);
}

.baq-hf-project-cta .baq-hf-section-heading {
	margin: 0;
}

.baq-hf-project-cta .baq-hf-btn {
	flex-shrink: 0;
}

/* ---------- Single blog post: article + sticky "What's on this page" ---- */

html {
	scroll-behavior: smooth;
}

.baq-hf-post-layout {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding-block: 3.5rem 5rem;
	font-family: var(--baqhf-font);
}

.baq-hf-post {
	order: 2;
	min-width: 0;
	max-width: 48rem;
	color: var(--baqhf-text);
}

.baq-hf-post .baq-hf-page__content h2 {
	scroll-margin-top: 7rem;
}

.baq-hf-post-back {
	margin-top: 2.5rem;
}

.baq-hf-post-back a {
	color: var(--baqhf-blue);
	font-weight: 700;
	text-decoration: none;
}

.baq-hf-post-back a:hover {
	color: var(--baqhf-navy);
}

.baq-hf-post-toc {
	order: 1;
}

.baq-hf-post-toc__sticky {
	padding: 1.5rem;
	background: var(--baqhf-light-gray);
	border-top: 3px solid var(--baqhf-gold);
}

.baq-hf-post-toc__label {
	margin: 0 0 1rem;
	color: var(--baqhf-navy);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.baq-hf-post-toc__nav {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.baq-hf-post-toc__nav a {
	padding: 0.5rem 0.65rem;
	color: var(--baqhf-muted);
	font-size: 0.87rem;
	line-height: 1.4;
	text-decoration: none;
	border-left: 2px solid var(--baqhf-border);
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.baq-hf-post-toc__nav a:hover,
.baq-hf-post-toc__nav a:focus-visible {
	color: var(--baqhf-navy);
	background: var(--baqhf-white);
	border-left-color: var(--baqhf-gold);
}

@media (min-width: 960px) {
	.baq-hf-post-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.baq-hf-post {
		flex: 1 1 auto;
	}

	.baq-hf-post-toc {
		flex: 0 0 16rem;
	}

	.baq-hf-post-toc__sticky {
		position: sticky;
		top: 7.5rem;
	}
}

/* ---------- "All Services & Areas" sitemap page ---------- */

.baq-hf-page-sitemap {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--baqhf-border);
}

.baq-hf-page-sitemap-menu {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.baq-hf-page-sitemap-menu > li > a {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--baqhf-navy);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
}

.baq-hf-page-sitemap-menu > li > a:hover {
	color: var(--baqhf-blue);
}

.baq-hf-page-sitemap-menu .baq-hf-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.baq-hf-page-sitemap-menu .baq-hf-submenu a {
	color: var(--baqhf-muted);
	font-size: 0.88rem;
	text-decoration: none;
}

.baq-hf-page-sitemap-menu .baq-hf-submenu a:hover {
	color: var(--baqhf-blue);
}

/* ---------- Reusable page hero (Blog, FAQs, and any future page) ---------- */

.baq-hf-hero {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: 22rem;
	overflow: hidden;
	padding-block: 11rem 3.5rem;
	background: var(--baqhf-navy);
	color: var(--baqhf-white);
	font-family: var(--baqhf-font);
}

.baq-hf-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.baq-hf-hero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(9, 25, 40, 0.92), rgba(18, 40, 63, 0.6) 55%, rgba(18, 40, 63, 0.28));
}

.baq-hf-hero__inner {
	position: relative;
	z-index: 1;
}

.baq-hf-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	color: var(--baqhf-gold);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.baq-hf-hero__eyebrow::before {
	content: '';
	display: inline-block;
	width: 1.5rem;
	height: 3px;
	background: var(--baqhf-gold);
	flex-shrink: 0;
}

.baq-hf-hero h1 {
	margin: 0 0 1rem;
	max-width: 40rem;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
}

.baq-hf-hero__subtitle {
	max-width: 38rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.05rem;
	line-height: 1.6;
}

/* ---------- Home hero: video background + inline quote form ---------- */

/* The quote form is much taller than the usual eyebrow/heading/CTA copy, so
   keep the whole hero content pinned to the top (with extra top padding)
   instead of vertically centered — centering a tall column risks pushing it
   up underneath the transparent overlay header. Same treatment on every
   other hero variant (category/about/contact/projects/blog/FAQs/post) so
   the whole site's hero reads as one consistent design, not just home.
   Only front-page-hero still carries the quote-form split (it's home-page
   -only now) — every other hero variant gets its own top-aligned spacing
   directly on its base rule instead, since they always carry a breadcrumb
   now regardless of whether the split/form is present. */
.front-page-hero:has(.baq-hf-hero-split) {
	align-items: flex-start;
	padding-top: 11rem;
}

/* category-hero's own __inner rule bottom-anchors its content and pins a
   fixed min-height — both fight the two-column split, so neutralize them
   here rather than in the shared rule above. */
.category-hero__inner.baq-hf-hero-split {
	align-content: start;
	min-height: auto;
}

@media (min-width: 900px) {
	.baq-hf-hero-split {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		gap: 3rem;
		align-items: start;
	}
}

/* ---------- Breadcrumbs: internal-linking trail shown at the top of every
   hero (dark background by default), or in navy-on-light for the two
   templates with no hero at all. ---------- */
.baq-hf-breadcrumb {
	margin: 0 0 1.1rem;
	font-family: var(--baqhf-font);
	font-size: 0.8rem;
}

.baq-hf-breadcrumb a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.baq-hf-breadcrumb a:hover,
.baq-hf-breadcrumb a:focus-visible {
	color: var(--baqhf-gold);
	text-decoration: underline;
}

.baq-hf-breadcrumb__sep {
	margin: 0 0.5rem;
	color: rgba(255, 255, 255, 0.4);
}

.baq-hf-breadcrumb__current {
	color: var(--baqhf-gold);
	font-weight: 600;
}

.baq-hf-breadcrumb--light a {
	color: var(--baqhf-muted);
}

.baq-hf-breadcrumb--light a:hover,
.baq-hf-breadcrumb--light a:focus-visible {
	color: var(--baqhf-blue);
}

.baq-hf-breadcrumb--light .baq-hf-breadcrumb__sep {
	color: var(--baqhf-border);
}

.baq-hf-breadcrumb--light .baq-hf-breadcrumb__current {
	color: var(--baqhf-navy);
}

/* ---------- Related-links: contextual internal-linking block (service ->
   its area pages, combo page -> other services in that area, blog/FAQs ->
   services) rendered near the end of the page, styled as a chip grid. ---- */
.baq-hf-related-links {
	padding-block: 3.5rem;
	border-top: 1px solid var(--baqhf-border);
	background: var(--baqhf-light-gray);
}

.baq-hf-related-links__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.baq-hf-related-links__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: var(--baqhf-white);
	border: 1px solid var(--baqhf-border);
	color: var(--baqhf-navy);
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.baq-hf-related-links__item:hover,
.baq-hf-related-links__item:focus-visible {
	border-color: var(--baqhf-gold);
	color: var(--baqhf-blue);
	transform: translateY(-2px);
}

/* ---------- Related Categories: sibling-service cards with a real photo,
   shown right before the FAQ accordion. ---------- */
.baq-hf-related-categories {
	padding-block: 3.5rem;
	border-top: 1px solid var(--baqhf-border);
}

.baq-hf-related-categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.75rem;
}

.baq-hf-related-categories__card {
	display: flex;
	flex-direction: column;
	background: var(--baqhf-white);
	border: 1px solid var(--baqhf-border);
	text-decoration: none;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.baq-hf-related-categories__card:hover,
.baq-hf-related-categories__card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--baqhf-gold);
	box-shadow: 0 1.5rem 2.5rem rgba(18, 40, 63, 0.1);
}

.baq-hf-related-categories__image {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-bottom: 3px solid var(--baqhf-gold);
	background: var(--baqhf-light-gray);
}

.baq-hf-related-categories__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.baq-hf-related-categories__card:hover .baq-hf-related-categories__image img {
	transform: scale(1.06);
}

.baq-hf-related-categories__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem 1.5rem 1.5rem;
}

.baq-hf-related-categories__body strong {
	color: var(--baqhf-navy);
	font-size: 1.05rem;
	font-family: var(--baqhf-font);
}

.baq-hf-related-categories__link {
	color: var(--baqhf-blue);
	font-size: 0.85rem;
	font-weight: 700;
}

/* About page "Where we work" now lists all 7 emirates instead of 3 — the
   theme's own grid is a fixed 3 columns, which leaves an awkward lone card
   on its own row for any other count. auto-fill wraps cleanly at 7. */
@media (min-width: 48rem) {
	.about-locations__grid {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)) !important;
	}
}

/* "Call Us" button in the hero copy column, next to the quote form. */
.baq-hf-hero-phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: fit-content;
	min-height: 2.75rem;
	margin-top: 1.5rem;
	padding: 0.5rem 1rem;
	border: 2px solid rgba(255, 255, 255, 0.5);
	color: var(--baqhf-white);
	font-family: var(--baqhf-font);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	justify-self: start;
	box-sizing: border-box;
}

.baq-hf-hero-phone .baq-hf-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--baqhf-gold);
}

.baq-hf-hero-phone:hover,
.baq-hf-hero-phone:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--baqhf-gold);
}

/* about/contact/projects heroes: same 4-photo crossfade slideshow as
   category-hero (a page's own Hero Image, if set via Page Content, leads
   the slideshow — see baq_hf_make_hero_consistent()) instead of the single
   static background these used to have. */
.about-page-hero__bg,
.contact-page-hero__bg,
.projects-page-hero__bg {
	position: absolute;
	inset: 0;
}

.about-page-hero__bg img,
.contact-page-hero__bg img,
.projects-page-hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: hero-crossfade 20s infinite;
}

.about-page-hero__bg img:first-child,
.contact-page-hero__bg img:first-child,
.projects-page-hero__bg img:first-child {
	animation-name: hero-crossfade-first;
}

.about-page-hero__bg img:nth-child(2),
.contact-page-hero__bg img:nth-child(2),
.projects-page-hero__bg img:nth-child(2) {
	animation-delay: 5s;
}

.about-page-hero__bg img:nth-child(3),
.contact-page-hero__bg img:nth-child(3),
.projects-page-hero__bg img:nth-child(3) {
	animation-delay: 10s;
}

.about-page-hero__bg img:nth-child(4),
.contact-page-hero__bg img:nth-child(4),
.projects-page-hero__bg img:nth-child(4) {
	animation-delay: 15s;
}

@media (prefers-reduced-motion: reduce) {
	.about-page-hero__bg img,
	.contact-page-hero__bg img,
	.projects-page-hero__bg img {
		animation: none !important;
		opacity: 0 !important;
	}

	.about-page-hero__bg img:first-child,
	.contact-page-hero__bg img:first-child,
	.projects-page-hero__bg img:first-child {
		opacity: 1 !important;
	}
}

.baq-hf-hero-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(9, 25, 40, 0.88), rgba(18, 40, 63, 0.55) 60%, rgba(18, 40, 63, 0.22));
}

.about-page-hero__inner,
.contact-page-hero__inner,
.projects-page-hero__inner {
	position: relative;
	z-index: 1;
}

/* Every hero now carries a breadcrumb + phone button the theme's original
   7rem top padding was never sized for — on narrower screens (where the
   header can wrap to two rows) that 7rem is shorter than the header itself,
   so the breadcrumb rendered underneath it. Matches the same 11rem used on
   the home/blog/FAQ/post heroes, at every width, so there's always a safe
   margin below the header regardless of whether it's one row or two. */
.category-hero__inner,
.about-page-hero__inner,
.contact-page-hero__inner,
.projects-page-hero__inner {
	padding-top: 11rem !important;
}

.baq-hf-hero-form {
	background: rgba(255, 255, 255, 0.98);
	padding: 2rem;
	max-width: 26rem;
	color: var(--baqhf-text);
	font-family: var(--baqhf-font);
	box-shadow: 0 24px 48px rgba(9, 25, 40, 0.35);
}

@media (max-width: 899px) {
	.baq-hf-hero-form {
		margin-top: 2.5rem;
		max-width: none;
	}
}

.baq-hf-hero-form h2 {
	margin: 0 0 0.4rem;
	color: var(--baqhf-navy);
	font-size: 1.3rem;
}

.baq-hf-hero-form > p {
	margin: 0 0 1.25rem;
	color: var(--baqhf-muted);
	font-size: 0.88rem;
	line-height: 1.5;
}

.baq-hf-hero-form form {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.baq-hf-hero-form label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--baqhf-text);
}

.baq-hf-hero-form label em {
	color: var(--baqhf-blue);
	font-style: normal;
}

.baq-hf-hero-form input,
.baq-hf-hero-form select {
	font-family: var(--baqhf-font);
	font-size: 0.92rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--baqhf-border);
	color: var(--baqhf-text);
	background: var(--baqhf-white);
}

.baq-hf-hero-form select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352606D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.65rem center;
	background-size: 13px;
	padding-right: 2rem;
}

.baq-hf-hero-form input:focus,
.baq-hf-hero-form select:focus {
	outline: 2px solid var(--baqhf-blue);
	outline-offset: 1px;
}

/* ---------- Blog listing ---------- */

.baq-hf-blog {
	padding-block: 3.5rem 5rem;
}

.baq-hf-blog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 2.5rem;
}

.baq-hf-blog__card {
	display: flex;
	flex-direction: column;
	background: var(--baqhf-white);
	border: 1px solid var(--baqhf-border);
	font-family: var(--baqhf-font);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.baq-hf-blog__card:hover {
	transform: translateY(-4px);
	border-color: var(--baqhf-gold);
	box-shadow: 0 1.5rem 2.5rem rgba(18, 40, 63, 0.1);
}

/* The first post in the grid reads as a "featured" story: it spans the full
   row width on larger screens, with a wider image and bigger type. */
.baq-hf-blog__card--featured {
	grid-column: 1 / -1;
}

@media (min-width: 780px) {
	.baq-hf-blog__card--featured {
		flex-direction: row;
	}

	.baq-hf-blog__card--featured .baq-hf-blog__card-image {
		flex: 1 1 50%;
		aspect-ratio: auto;
	}

	.baq-hf-blog__card--featured .baq-hf-blog__card-body {
		flex: 1 1 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 2.5rem;
	}

	.baq-hf-blog__card--featured .baq-hf-blog__card-body h2 {
		font-size: 1.65rem;
	}
}

.baq-hf-blog__card-image {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-bottom: 3px solid var(--baqhf-gold);
	background: var(--baqhf-light-gray);
}

.baq-hf-blog__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.baq-hf-blog__card:hover .baq-hf-blog__card-image img {
	transform: scale(1.06);
}

.baq-hf-blog__card-body {
	padding: 1.5rem 1.5rem 1.75rem;
}

.baq-hf-blog__card-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	color: var(--baqhf-blue);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.baq-hf-blog__card-meta span[aria-hidden] {
	color: var(--baqhf-border);
}

.baq-hf-blog__card-body h2 {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
	line-height: 1.3;
}

.baq-hf-blog__card-body h2 a {
	color: var(--baqhf-navy);
	text-decoration: none;
}

.baq-hf-blog__card-body h2 a:hover {
	color: var(--baqhf-blue);
}

.baq-hf-blog__card-body p {
	margin: 0 0 0.9rem;
	color: var(--baqhf-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

.baq-hf-blog__card-link {
	color: var(--baqhf-blue);
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
}

.baq-hf-blog__card-link:hover {
	color: var(--baqhf-navy);
}

/* ---------- FAQs accordion ---------- */

.baq-hf-faq details {
	border-bottom: 1px solid var(--baqhf-border);
	padding-block: 1.1rem;
}

.baq-hf-faq summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--baqhf-navy);
	font-size: 1.02rem;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.baq-hf-faq summary::-webkit-details-marker {
	display: none;
}

.baq-hf-faq summary::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--baqhf-blue);
}

.baq-hf-faq details[open] summary::after {
	content: "\2212";
}

.baq-hf-faq details p {
	margin: 0.85rem 0 0;
	color: var(--baqhf-muted);
	line-height: 1.65;
}

/* ---------- FAQs page: category groups + closing CTA ---------- */

.baq-hf-faq-group {
	margin-bottom: 2.75rem;
}

.baq-hf-faq-group:last-child {
	margin-bottom: 0;
}

.baq-hf-faq-group h3 {
	margin: 0 0 0.25rem;
	color: var(--baqhf-blue);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--baqhf-font);
}

.baq-hf-faq-cta {
	margin-top: 3.5rem;
	padding: 2.5rem;
	border-top: 3px solid var(--baqhf-gold);
	background: var(--baqhf-light-gray);
	text-align: center;
}

.baq-hf-faq-cta h2 {
	margin: 0 0 0.6rem;
	color: var(--baqhf-navy);
	font-size: 1.4rem;
	font-family: var(--baqhf-font);
}

.baq-hf-faq-cta p {
	margin: 0 auto 1.5rem;
	max-width: 34rem;
	color: var(--baqhf-muted);
	line-height: 1.6;
}

/* ---------- Per-page Gallery & FAQ sections (injected at the end of every
   service / area / service-in-area page) ---------- */

.baq-hf-section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.5rem;
	color: var(--baqhf-blue);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--baqhf-font);
}

.baq-hf-section-eyebrow::before {
	content: '';
	display: inline-block;
	width: 1.5rem;
	height: 3px;
	background: var(--baqhf-gold);
	flex-shrink: 0;
}

.baq-hf-section-heading {
	margin: 0 0 2rem;
	color: var(--baqhf-navy);
	font-size: 1.75rem;
	font-family: var(--baqhf-font);
}

/* Deliberately not a uniform grid of same-size tiles: a CSS-columns
   masonry keeps each photo's natural aspect ratio so the section reads
   like a photo essay, with a rotating navy/blue/gold top accent and a
   playful hover tilt for a bit of unique personality on hover only —
   the resting state stays clean and professional. */
.baq-hf-showcase-section {
	padding-block: 3.5rem;
	border-top: 1px solid var(--baqhf-border);
}

.baq-hf-showcase__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.25rem 0 2rem;
}

.baq-hf-showcase__filters button {
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--baqhf-border);
	background: var(--baqhf-white);
	color: var(--baqhf-text);
	font-family: var(--baqhf-font);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.baq-hf-showcase__filters button:hover {
	border-color: var(--baqhf-gold);
}

.baq-hf-showcase__filters button.is-active {
	background: var(--baqhf-navy);
	border-color: var(--baqhf-navy);
	color: var(--baqhf-white);
}

.baq-hf-showcase {
	columns: 3 18rem;
	column-gap: 1.5rem;
}

.baq-hf-showcase__item {
	break-inside: avoid;
	display: block;
	margin: 0 0 1.5rem;
}

.baq-hf-showcase__item.is-hidden {
	display: none;
}

.baq-hf-showcase__item button {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	border-top: 3px solid var(--baqhf-gold);
	overflow: hidden;
	cursor: pointer;
	background: var(--baqhf-light-gray);
}

.baq-hf-showcase__item:nth-child(3n+2) button {
	border-top-color: var(--baqhf-blue);
}

.baq-hf-showcase__item:nth-child(3n) button {
	border-top-color: var(--baqhf-navy);
}

.baq-hf-showcase__item img,
.baq-hf-showcase__item video {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.4s ease;
}

.baq-hf-showcase__item:nth-child(odd) button:hover img,
.baq-hf-showcase__item:nth-child(odd) button:hover video {
	transform: scale(1.045) rotate(-0.4deg);
}

.baq-hf-showcase__item:nth-child(even) button:hover img,
.baq-hf-showcase__item:nth-child(even) button:hover video {
	transform: scale(1.045) rotate(0.4deg);
}

.baq-hf-showcase__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 3rem;
	height: 3rem;
	background: rgba(18, 40, 63, 0.75);
	pointer-events: none;
}

.baq-hf-showcase__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.55rem 0 0.55rem 0.9rem;
	border-color: transparent transparent transparent var(--baqhf-white);
}

.baq-hf-showcase__item figcaption {
	margin: 0.5rem 0 0;
	color: var(--baqhf-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}

@media (max-width: 680px) {
	.baq-hf-showcase {
		columns: 1;
	}
}

.baq-hf-page-faq-section {
	padding-block: 3.5rem;
	border-top: 1px solid var(--baqhf-border);
}

/* ---------- Media lightbox (images & video) ---------- */

.baq-hf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.baq-hf-lightbox[hidden] {
	display: none;
}

.baq-hf-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: rgba(9, 25, 40, 0.9);
}

.baq-hf-lightbox__content {
	position: relative;
	max-width: 60rem;
	width: 100%;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.baq-hf-lightbox__content img,
.baq-hf-lightbox__content video {
	max-width: 100%;
	max-height: 75vh;
	display: block;
}

.baq-hf-lightbox__content img[hidden],
.baq-hf-lightbox__content video[hidden] {
	display: none;
}

.baq-hf-lightbox__caption {
	margin: 1rem 0 0;
	color: var(--baqhf-white);
	font-family: var(--baqhf-font);
	font-size: 0.9rem;
	text-align: center;
}

.baq-hf-lightbox__caption:empty {
	display: none;
}

.baq-hf-lightbox__close {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--baqhf-white);
	border: none;
	color: var(--baqhf-navy);
	cursor: pointer;
	z-index: 1;
}

.baq-hf-lightbox__close svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 640px) {
	.baq-hf-lightbox {
		padding: 1rem;
	}

	.baq-hf-lightbox__close {
		top: 0;
		right: 0;
	}
}

/* ==========================================================================
   Home page: agency-style polish for the trust bar, testimonials and a new
   "View on Google" reviews CTA. CSS-only overrides of the theme's own
   front-page.php markup (plus the two small HTML insertions made in
   baq_hf_transform_hero_output()), so the theme file itself stays untouched.
   ========================================================================== */

/* ---------- Trust bar: a navy stats band instead of a plain white strip -- */
.trust-bar {
	background: var(--baqhf-navy) !important;
	border-bottom: none !important;
}

.trust-stat {
	border-color: rgba(255, 255, 255, 0.14) !important;
}

.trust-stat strong {
	color: var(--baqhf-white) !important;
}

.trust-stat span {
	color: rgba(255, 255, 255, 0.65) !important;
}

/* Typewriter stat: fixed font-size + no-wrap so cycling through area names
   of different lengths never shifts the trust bar's height. */
.baq-hf-typewriter {
	display: inline-flex;
	align-items: baseline;
	font-size: 1.35rem !important;
	white-space: nowrap;
}

.baq-hf-typewriter__cursor {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	background: var(--baqhf-gold);
	animation: baq-hf-cursor-blink 1s step-end infinite;
}

@keyframes baq-hf-cursor-blink {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.baq-hf-typewriter__cursor {
		animation: none;
		opacity: 0;
	}
}

@media (max-width: 640px) {
	.baq-hf-typewriter {
		font-size: 1.05rem !important;
	}
}

/* ---------- Section rhythm: alternate bands so services / about / projects
   don't all read as one flat white block. ---------- */
.about-section {
	background: var(--baqhf-light-gray);
}

/* ---------- Testimonials: an elevated white card on the grey section,
   with a large decorative quote mark, a star row and an initials avatar —
   reads as a proper agency trust section instead of plain text on grey. -- */
.testimonials-section {
	padding-block: 4.5rem;
}

.testimonial-slider {
	position: relative;
	background: var(--baqhf-white);
	padding: 3rem clamp(1.5rem, 4vw, 3.5rem) 2.5rem;
	border-top: 3px solid var(--baqhf-gold);
	box-shadow: 0 1.5rem 3rem rgba(18, 40, 63, 0.09);
}

.testimonial-slider::before {
	content: "\201C";
	position: absolute;
	top: -0.5rem;
	left: clamp(1.5rem, 4vw, 3.5rem);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 6rem;
	line-height: 1;
	color: var(--baqhf-gold);
	opacity: 0.3;
	pointer-events: none;
}

.baq-hf-testimonial-stars {
	position: relative;
	z-index: 1;
	color: var(--baqhf-gold);
	font-size: 1rem;
	letter-spacing: 0.2em;
	margin-bottom: 1rem;
}

.testimonial-slide blockquote {
	position: relative;
	z-index: 1;
}

.testimonial-slide figcaption {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.baq-hf-testimonial-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	background: var(--baqhf-navy);
	color: var(--baqhf-white) !important;
	font-family: var(--baqhf-font);
	font-weight: 700;
	font-size: 0.9rem !important;
}

.baq-hf-testimonial-meta {
	display: grid;
	gap: 0.15rem;
}

.testimonial-arrow {
	border-radius: 0 !important;
}

.testimonial-arrow:hover,
.testimonial-arrow:focus-visible {
	background: var(--baqhf-gold) !important;
	border-color: var(--baqhf-gold) !important;
	color: var(--baqhf-navy) !important;
}

.testimonial-dots button {
	border-radius: 0 !important;
}

/* ---------- "View on Google" reviews CTA, dropped in right after the
   testimonial slider. ---------- */
.baq-hf-google-cta {
	background: var(--baqhf-white);
	border-bottom: 1px solid var(--baqhf-border);
	padding-block: 2.25rem;
}

.baq-hf-google-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

.baq-hf-google-cta__badge {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background: var(--baqhf-light-gray);
}

.baq-hf-google-cta__badge svg {
	width: 1.5rem;
	height: 1.5rem;
}

.baq-hf-google-cta__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-right: auto;
}

.baq-hf-google-cta__text strong {
	color: var(--baqhf-navy);
	font-size: 1.05rem;
}

.baq-hf-google-cta__text span {
	color: var(--baqhf-muted);
	font-size: 0.9rem;
}

.baq-hf-google-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.5rem;
	background: var(--baqhf-navy);
	color: var(--baqhf-white);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.baq-hf-google-cta__link:hover,
.baq-hf-google-cta__link:focus-visible {
	background: var(--baqhf-gold);
	color: var(--baqhf-navy);
	transform: translateY(-2px);
	box-shadow: 0 0.75rem 1.5rem rgba(18, 40, 63, 0.18);
}

@media (max-width: 640px) {
	.baq-hf-google-cta__inner {
		text-align: center;
		justify-content: center;
	}

	.baq-hf-google-cta__text {
		margin-right: 0;
		align-items: center;
	}
}

/* ---------- Projects page: real project cards now link to their own page
   instead of opening a lightbox, so the cursor should read as a normal
   link rather than the theme's original "zoom-in" affordance. ---------- */
.portfolio-card__image {
	cursor: pointer;
}

.baq-hf-projects-empty {
	padding-block: 2rem;
	color: var(--baqhf-muted);
	font-family: var(--baqhf-font);
}

/* ==========================================================================
   LUXURY UAE AGENCY STYLING & COMPONENTS
   ========================================================================== */

/* UAE Hero Badges and Pills */
.front-page-hero__badge-row {
	margin-bottom: 1.25rem;
}

.uae-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 1.15rem;
	background: rgba(10, 25, 47, 0.75);
	border: 1px solid var(--baqhf-gold);
	border-radius: 0;
	color: var(--baqhf-gold-glow);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	backdrop-filter: blur(12px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 15px rgba(242, 183, 5, 0.2);
}

.uae-flag {
	font-size: 1.1rem;
	line-height: 1;
}

.front-page-hero__features-pill {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin: 1.5rem 0 2rem;
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.88rem;
	font-weight: 600;
}

.front-page-hero__features-pill span {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: rgba(10, 25, 47, 0.65);
	padding: 0.4rem 0.9rem;
	border-radius: var(--baqhf-radius-sm);
	border: 1px solid rgba(242, 183, 5, 0.25);
	backdrop-filter: blur(8px);
}

/* Service Card UAE Enhancements */
.service-card {
	position: relative;
	background: var(--baqhf-white);
	border: 1px solid var(--baqhf-border);
	border-radius: var(--baqhf-radius-md);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	display: flex;
	flex-direction: column;
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 36px rgba(10, 25, 47, 0.12);
	border-color: var(--baqhf-gold);
}

.service-card__media-wrap {
	position: relative;
	overflow: hidden;
	height: 14rem;
	background: var(--baqhf-navy);
}

.service-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.service-card:hover .service-card__image {
	transform: scale(1.06);
}

.service-card__tag {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	background: rgba(10, 25, 47, 0.85);
	color: var(--baqhf-gold-glow);
	border: 1px solid rgba(242, 183, 5, 0.4);
	padding: 0.3rem 0.75rem;
	border-radius: var(--baqhf-radius-pill);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	backdrop-filter: blur(8px);
}

.service-card__body {
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.service-card__number {
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--baqhf-gold);
	letter-spacing: 0.08em;
	margin-bottom: 0.5rem;
}

.service-card__body h3 {
	margin: 0 0 0.75rem;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--baqhf-navy);
	line-height: 1.3;
}

.service-card__body p {
	margin: 0 0 1.25rem;
	color: var(--baqhf-muted);
	font-size: 0.92rem;
	line-height: 1.6;
	flex-grow: 1;
}

.service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--baqhf-blue);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	transition: color 0.2s ease, gap 0.2s ease;
}

.service-card__link:hover {
	color: var(--baqhf-gold-dark);
	gap: 0.65rem;
}

/* UAE Engineering Pillars Section */
.uae-pillars-section {
	background: #081426;
	color: var(--baqhf-white);
	padding-block: 5.5rem;
	position: relative;
	border-top: 1px solid rgba(242, 183, 5, 0.2);
	border-bottom: 1px solid rgba(242, 183, 5, 0.2);
}

.uae-pillars-section .section-heading p.section-heading__eyebrow {
	color: var(--baqhf-gold);
}

.uae-pillars-section .section-heading h2 {
	color: var(--baqhf-white);
}

.uae-pillars-section .section-heading p {
	color: rgba(255, 255, 255, 0.8);
}

.uae-pillars-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.75rem;
	margin-top: 3.5rem;
}

.uae-pillar-card {
	background: rgba(17, 34, 64, 0.7);
	border: 1px solid rgba(242, 183, 5, 0.2);
	border-radius: var(--baqhf-radius-md);
	padding: 2.25rem 1.75rem;
	backdrop-filter: blur(12px);
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.uae-pillar-card:hover {
	transform: translateY(-5px);
	border-color: var(--baqhf-gold);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.uae-pillar-card__icon {
	font-size: 2.25rem;
	line-height: 1;
	margin-bottom: 1.25rem;
	display: inline-block;
}

.uae-pillar-card h3 {
	color: var(--baqhf-white);
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 0.85rem;
	line-height: 1.35;
}

.uae-pillar-card p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9rem;
	line-height: 1.65;
	margin: 0;
}

/* About Section Bullets */
.about-section__bullets {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-top: 1.5rem;
}

.about-bullet {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.95rem;
	color: var(--baqhf-text);
	font-weight: 500;
	line-height: 1.5;
}

.about-bullet__check {
	display: grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	background: rgba(242, 183, 5, 0.18);
	color: var(--baqhf-gold-dark);
	border-radius: 0;
	font-size: 0.75rem;
	font-weight: 800;
	flex-shrink: 0;
	margin-top: 0.15rem;
}

/* Projects Showcase Overlay */
.projects-showcase {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.project-tile {
	position: relative;
	height: 20rem;
	border-radius: var(--baqhf-radius-md);
	overflow: hidden;
	display: block;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(10, 25, 47, 0.08);
}

.project-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.project-tile:hover img {
	transform: scale(1.08);
}

.project-tile__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(10, 25, 47, 0.92) 90%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.5rem;
	color: var(--baqhf-white);
}

.project-tile__loc {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--baqhf-gold-glow);
	margin-bottom: 0.35rem;
}

.project-tile__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--baqhf-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Floating UAE Concierge Widget */
.baq-floating-concierge {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 998;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-end;
}

.baq-concierge-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 1.25rem;
	border-radius: 0;
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}

.baq-concierge-btn:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.baq-concierge-btn--wa {
	background: #25D366;
	color: #FFFFFF;
	border: 2px solid #FFFFFF;
}

.baq-concierge-btn--wa:hover {
	background: #20BA5C;
	color: #FFFFFF;
}

.baq-concierge-btn--call {
	background: var(--baqhf-navy);
	color: var(--baqhf-gold-glow);
	border: 1px solid var(--baqhf-gold);
}

.baq-concierge-btn--call:hover {
	background: var(--baqhf-navy-light);
	color: #FFFFFF;
}

.baq-concierge-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.baq-concierge-pulse {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 12px;
	height: 12px;
	background: #25D366;
	border-radius: 0;
	border: 2px solid #FFFFFF;
	animation: baq-pulse 2s infinite;
}

@keyframes baq-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

@media (max-width: 640px) {
	.baq-floating-concierge {
		bottom: 1rem;
		right: 1rem;
	}
	.baq-concierge-text {
		display: none;
	}
	.baq-concierge-btn {
		padding: 0.85rem;
		border-radius: 0;
		width: 3.25rem;
		height: 3.25rem;
		justify-content: center;
	}
}