/*
 * Henna At Home — supplemental styles.
 * Everything expressible through theme.json (colors, typography, spacing)
 * lives there. This file only covers what block settings/styles can't do:
 * sticky header behaviour, hover/zoom effects, the scroll-snap
 * testimonial slider, the lightweight lightbox, animations, focus states
 * and a handful of small responsive fixes.
 */

/* ---------- Header: layout, nav & CTAs ---------- */
.site-header,
.site-header .wp-block-navigation__responsive-container.is-menu-open,
.site-header .wp-block-navigation__responsive-container-content {
	background-color: #06120e !important;
}
.site-header.is-layout-constrained,
header.site-header.is-layout-constrained {
	max-width: 100% !important;
}
.site-header.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 100% !important;
	margin-inline: auto;
	width: 100%;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	max-width: 100% !important;
	width: 100%;
}
.site-header__logo {
	margin: 0 !important;
	flex-shrink: 0;
	line-height: 0;
}
.site-header__logo a {
	display: block;
}
.site-header__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: clamp(112px, 18vw, 180px);
}
.wp-block-group.site-header__nav-wrap {
    gap: 30px;
}
.site-header__nav {
	flex: 0 0 auto;
	min-width: 0;
	position: relative;
}
.site-header__nav .wp-block-navigation__container {
	gap: clamp(1rem, 1.75vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-header__nav .wp-block-navigation-item {
	list-style: none;
	margin: 0;
}
.site-header__nav .wp-block-navigation-item__content {
	color: #f2efe8 !important;
	font-weight: 600;
	padding: 0.35rem 0;
	transition: color 0.25s ease;
}
.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item__content:focus-visible {
	color: #c9a44c !important;
}
.site-header__nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.site-header__nav .wp-block-navigation-item.current_page_item .wp-block-navigation-item__content {
	color: #c9a44c !important;
}
.site-header__nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after,
.site-header__nav .wp-block-navigation-item.current_page_item .wp-block-navigation-item__content::after {
	background-color: #c9a44c;
}
.site-header__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}
.site-header__actions .wp-block-button.is-style-fill .wp-block-button__link {
	background-color: #c9a44c;
	color: #fff !important;
	border-radius: 4px;
	padding: 0.75rem 1.5rem;
	transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.site-header__actions .wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: #a8843a;
	transform: translateY(-1px);
}
/* Book CTA active — mirrors nav current-page gold treatment */
.site-header__actions .wp-block-button.is-style-fill.is-current-page .wp-block-button__link,
.site-header__actions .wp-block-button.is-style-fill.current-menu-item .wp-block-button__link,
.site-header__actions .wp-block-button.is-style-fill .wp-block-button__link[aria-current="page"] {
	background-color: #a8843a;
	box-shadow: inset 0 0 0 2px rgba(242, 239, 232, 0.9);
	font-weight: 700;
}
.site-header__actions .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: #ffffff !important;
	border: 1px solid #c9a44c;
	border-radius: 4px;
	padding: 0.75rem 1.5rem;
}
.site-header__actions .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #c9a44c;
	color: #14251a !important;
}

/* Hamburger toggle */
.site-header__nav .wp-block-navigation__responsive-container-open,
.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 1px solid rgba(201, 164, 76, 0.55);
	border-radius: 6px;
	color: #f2efe8;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.site-header__nav .wp-block-navigation__responsive-container-open:hover,
.site-header__nav .wp-block-navigation__responsive-container-open:focus-visible,
.site-header__nav .wp-block-navigation__responsive-container-close:hover,
.site-header__nav .wp-block-navigation__responsive-container-close:focus-visible {
	background-color: rgba(201, 164, 76, 0.15);
	border-color: #c9a44c;
	color: #c9a44c;
}
.site-header__nav .wp-block-navigation__responsive-container-open svg,
.site-header__nav .wp-block-navigation__responsive-container-close svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Mobile / tablet full-screen menu panel */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	--menu-pad-x: clamp(0.9rem, 4.2vw, 1.5rem);
	--menu-pad-y: clamp(0.55rem, 2vw, 0.9rem);
	--menu-link-size: clamp(1.05rem, 3.2vw, 1.2rem);
	--menu-icon-size: clamp(1.1rem, 3.4vw, 1.35rem);
	--menu-btn-size: clamp(0.72rem, 2.4vw, 0.85rem);
	--menu-btn-pad-y: clamp(0.72rem, 2.4vw, 0.95rem);
	--menu-logo-h: clamp(48px, 12vw, 72px);
	--menu-close-size: clamp(36px, 10vw, 44px);

	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex !important;
	flex-direction: column;
	width: 100% !important;
	max-width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	max-height: 100vh;
	max-height: 100dvh;
	z-index: 99999;
	background-color: #06120e !important;
	border: none;
	border-radius: 0;
	padding: 0;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	overflow: hidden !important;
	box-sizing: border-box;
}
.site-header__menu-head {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: none;
	flex-shrink: 0;
	width: 100%;
	box-sizing: border-box;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open > .site-header__menu-head,
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__menu-head {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.site-header__menu-head-logo {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0 !important;
	flex: 0 1 auto;
	min-width: 0;
	max-width: min(78%, 240px);
	line-height: 0;
	order: 1;
}
.site-header__menu-head-logo a {
	display: block !important;
	line-height: 0;
}
.site-header__menu-head .wp-block-navigation__responsive-close-dialog,
.site-header__menu-head .wp-block-navigation__responsive-dialog {
	position: static;
	flex-shrink: 0;
	margin: 0 0 0 auto;
	order: 2;
}
.site-header__menu-head .wp-block-navigation__responsive-container-close {
	display: flex !important;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: #c9a44c;
	order: 2;
	flex-shrink: 0;
}
.site-header__menu-head .wp-block-navigation__responsive-container-close::before {
	content: none;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	max-width: 100%;
	overflow: visible;
	flex: 0 0 auto;
	min-height: 0;
	height: auto;
	max-height: none;
	box-sizing: border-box;
}
.site-header__menu-scroll {
	display: none;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	box-sizing: border-box;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open > .site-header__menu-scroll {
	display: flex !important;
}
.site-header__menu-footer {
	display: none;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	max-width: 100%;
	border-bottom: 1px solid rgba(201, 164, 76, 0.12);
	box-sizing: border-box;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: none;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: var(--menu-pad-y, 1.15rem) var(--menu-pad-x, 1.5rem);
	font-size: var(--menu-link-size, 1.05rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.site-header__menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99998;
	border: 0;
	padding: 0;
	margin: 0;
	background: rgba(6, 18, 14, 0.45);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 280ms ease, visibility 280ms ease;
}
.site-header__menu-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}
/* Tablet / mobile: logo left, hamburger right — CTAs live in the menu */
@media (max-width: 1023px) {
	.site-header__logo {
		order: 1;
		flex-shrink: 0;
	}
	.site-header__actions {
		display: none !important;
	}
	.site-header__nav {
		order: 3;
		flex: 0 0 auto;
		margin-left: auto;
	}
	.site-header__nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
		display: none !important;
	}
	.wp-block-group.site-header__nav-wrap {
		gap: 5px;
	}

	/* Full-screen mobile menu layout */
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 0 !important;
		overflow: hidden !important;
		z-index: 100000 !important;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__menu-scroll .wp-block-navigation__responsive-dialog,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__menu-scroll .wp-block-navigation__responsive-close {
		position: static !important;
		inset: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
		overflow: visible !important;
		flex: 0 0 auto;
		display: block;
		box-sizing: border-box;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open > .site-header__menu-scroll {
		display: flex !important;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0 !important;
		max-height: none;
		width: 100%;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		touch-action: pan-y;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__menu-head {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		z-index: 2;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		flex: 0 0 auto;
		flex-shrink: 0;
		gap: clamp(0.5rem, 2vw, 0.85rem);
		padding: clamp(0.65rem, 2.2vw, 1rem) var(--menu-pad-x);
		padding-top: calc(clamp(0.65rem, 2.2vw, 1rem) + env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px));
		background-color: #06120e;
		border-bottom: none;
		box-sizing: border-box;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__menu-head-logo {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		max-width: min(72%, 240px);
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__menu-head-logo img {
		display: block !important;
		max-height: var(--menu-logo-h);
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		align-items: center;
		justify-content: center;
		position: static !important;
		top: auto;
		right: auto;
		z-index: 2;
		width: var(--menu-close-size) !important;
		height: var(--menu-close-size) !important;
		padding: 0;
		margin: 0 0 0 auto;
		border: none !important;
		border-radius: 6px;
		background: transparent !important;
		color: #c9a44c !important;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		flex-shrink: 0;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__menu-head .wp-block-navigation__responsive-container-close {
		position: static !important;
		top: auto;
		right: auto;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		display: block !important;
		width: calc(var(--menu-close-size) * 0.58) !important;
		height: calc(var(--menu-close-size) * 0.58) !important;
		fill: #c9a44c !important;
		color: #c9a44c !important;
		pointer-events: none;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before {
		content: none;
	}

	/* Nav + CTAs scroll together inside .site-header__menu-scroll */
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 0.25rem 0 0 !important;
		flex: 0 0 auto !important;
		min-height: 0;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		width: 100%;
	}

	/* Nav item icons (mobile menu only) */
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid rgba(201, 164, 76, 0.22);
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex !important;
		align-items: center;
		align-self: stretch;
		gap: 1.25rem;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		color: #c9a44c !important;
		background-color: rgba(201, 164, 76, 0.08);
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current_page_item,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-current-page {
		background-color: rgba(201, 164, 76, 0.14);
		box-shadow: inset 3px 0 0 #c9a44c;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current_page_item .wp-block-navigation-item__content,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-current-page .wp-block-navigation-item__content,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
		color: #c9a44c !important;
		font-weight: 700;
		background-color: transparent;
		box-shadow: none;
		width: 100% !important;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
		content: "";
		flex-shrink: 0;
		width: var(--menu-icon-size);
		height: var(--menu-icon-size);
		background-color: rgba(242, 239, 232, 0.85);
		-webkit-mask: no-repeat center / contain;
		mask: no-repeat center / contain;
		transition: background-color 0.2s ease;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::before,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current_page_item .wp-block-navigation-item__content::before,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-current-page .wp-block-navigation-item__content::before,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"]::before {
		background-color: #c9a44c;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) .wp-block-navigation-item__content::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z'/%3E%3C/svg%3E");
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) .wp-block-navigation-item__content::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) .wp-block-navigation-item__content::before {
		background-color: transparent;
		background-image: url("../images/icon-card-mandala.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		-webkit-mask: none;
		mask: none;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) .wp-block-navigation-item__content::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) .wp-block-navigation-item__content::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z'/%3E%3C/svg%3E");
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) .wp-block-navigation-item__content::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
	}

	/* Menu footer CTAs — flows after links inside the scroll area */
	.site-header__menu-footer {
		display: none;
		flex-direction: column;
		flex: 0 0 auto;
		gap: clamp(0.75rem, 2.5vw, 1.1rem);
		width: 100%;
		max-width: 100%;
		margin-top: auto;
		padding: clamp(0.9rem, 3vw, 1.25rem) var(--menu-pad-x) calc(clamp(1rem, 3.5vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
		background-color: #06120e;
		border-top: none;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__menu-scroll > .site-header__menu-footer,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__menu-footer {
		display: flex;
	}

	.site-header__menu-footer-divider {
		position: relative;
		height: clamp(1.15rem, 3.5vw, 1.5rem);
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: url("../images/icon-card-mandala.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: clamp(14px, 4vw, 18px);
		flex-shrink: 0;
	}

	.site-header__menu-footer-divider::before,
	.site-header__menu-footer-divider::after {
		content: "";
		flex: 1 1 auto;
		height: 1px;
		background: rgba(201, 164, 76, 0.35);
	}

	.site-header__menu-footer-divider::before {
		margin-right: 0.75rem;
	}

	.site-header__menu-footer-divider::after {
		margin-left: 0.75rem;
	}

	.site-header__menu-footer-actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: clamp(0.55rem, 2vw, 0.85rem);
		width: 100%;
		max-width: 100%;
		margin: 0;
		box-sizing: border-box;
	}

	.site-header__menu-footer-actions .wp-block-button {
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	.site-header__menu-footer-actions .wp-block-button .wp-block-button__link {
		border-radius: 4px !important;
	}

	.site-header__menu-footer-actions .wp-block-button.is-style-fill .wp-block-button__link {
		background-color: #c9a44c !important;
		color: #06120e !important;
		border: 1px solid #c9a44c !important;
	}

	.site-header__menu-footer-actions .wp-block-button.is-style-fill.is-current-page .wp-block-button__link,
	.site-header__menu-footer-actions .wp-block-button.is-style-fill.current-menu-item .wp-block-button__link,
	.site-header__menu-footer-actions .wp-block-button.is-style-fill .wp-block-button__link[aria-current="page"] {
		background-color: #a8843a !important;
		border-color: #f2efe8 !important;
		box-shadow: inset 0 0 0 2px rgba(242, 239, 232, 0.55);
		font-weight: 700;
	}

	.site-header__menu-footer-actions .wp-block-button.is-style-fill .wp-block-button__link::before {
		content: "";
		width: var(--menu-icon-size);
		height: var(--menu-icon-size);
		flex-shrink: 0;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	.site-header__menu-footer-actions .wp-block-button.is-style-outline .wp-block-button__link {
		background-color: transparent !important;
		color: #c9a44c !important;
		border: 1.5px solid #c9a44c !important;
	}

	.site-header__menu-footer-actions .wp-block-button.is-style-outline .wp-block-button__link::before {
		content: "";
		width: var(--menu-icon-size);
		height: var(--menu-icon-size);
		flex-shrink: 0;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z'/%3E%3Cpath d='M12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893C23.94 5.338 18.602.001 12.05 0zm0 21.785h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.981 1-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.435 9.885-9.887 9.885z'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z'/%3E%3Cpath d='M12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893C23.94 5.338 18.602.001 12.05 0zm0 21.785h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.981 1-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.435 9.885-9.887 9.885z'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	.site-header__menu-footer-actions .wp-block-button.is-style-fill .wp-block-button__link:hover,
	.site-header__menu-footer-actions .wp-block-button.is-style-fill .wp-block-button__link:focus-visible {
		background-color: #a8843a !important;
		transform: none;
		box-shadow: none;
	}

	.site-header__menu-footer-actions .wp-block-button.is-style-outline .wp-block-button__link:hover,
	.site-header__menu-footer-actions .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
		background-color: rgba(201, 164, 76, 0.12) !important;
		color: #c9a44c !important;
		transform: none;
	}
}

/* Phone landscape / short viewports — tighten vertical rhythm */
@media (max-width: 1023px) and (max-height: 700px) {
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		--menu-pad-y: 0.55rem;
		--menu-logo-h: 44px;
		--menu-btn-pad-y: 0.65rem;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__menu-head {
		padding-top: calc(0.55rem + env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px));
		padding-bottom: 0.55rem;
	}

	.site-header__menu-footer {
		gap: 0.65rem;
		padding-top: 0.75rem;
		padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
	}
}

@media (max-width: 767px) {
	.site-header {
		padding: 12px !important;
	}
	.site-header__inner {
		gap: 0.5rem;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		--menu-pad-x: 1.15rem;
		--menu-pad-y: 0.85rem;
		--menu-link-size: 1.1rem;
		--menu-icon-size: 1.2rem;
		--menu-btn-size: 0.78rem;
		--menu-logo-h: 60px;
		--menu-close-size: 40px;
	}
}

@media (max-width: 479px) {
	.site-header__nav .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
	}
	.site-header__nav .wp-block-navigation__responsive-container-open svg {
		width: 32px;
		height: 32px;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		--menu-pad-x: 1rem;
		--menu-pad-y: 0.75rem;
		--menu-link-size: 1.05rem;
		--menu-icon-size: 1.1rem;
		--menu-btn-size: 0.72rem;
		--menu-btn-pad-y: 0.78rem;
		--menu-logo-h: 52px;
		--menu-close-size: 36px;
	}

	.site-header__menu-footer-actions .wp-block-button__link {
		letter-spacing: 0.06em;
	}
}

@media (max-width: 359px) {
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		--menu-pad-x: 0.85rem;
		--menu-pad-y: 0.65rem;
		--menu-link-size: 1rem;
		--menu-icon-size: 1rem;
		--menu-btn-size: 0.68rem;
		--menu-btn-pad-y: 0.7rem;
		--menu-logo-h: 44px;
		--menu-close-size: 34px;
	}
}

/* Desktop: inline nav, hide hamburger */
@media (min-width: 1024px) {
	.site-header__nav .wp-block-navigation__responsive-container-open,
	.site-header__nav .wp-block-navigation__responsive-container-close {
		display: none !important;
	}
	.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		position: static;
		width: auto;
		height: auto;
		background: transparent !important;
		padding: 0;
	}
	.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
		display: flex !important;
		position: static;
		width: auto;
		padding: 0;
	}
	.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
	}
	.site-header__nav {
		flex: 1 1 auto;
		display: flex;
		justify-content: flex-end;
	}
}

/* Mid-desktop: slightly tighter nav */
@media (min-width: 1024px) and (max-width: 1199px) {
	.site-header__nav .wp-block-navigation__container {
		gap: 1.25rem;
	}
	.site-header__nav .wp-block-navigation-item__content {
		font-size: 0.82rem !important;
	}
	.site-header__actions .wp-block-button__link {
		padding: 0.65rem 1.1rem !important;
		font-size: 0.82rem !important;
	}
}

/* footer css here */

.trust-badges .wp-block-columns {
    max-width: 100%;
}
.henna-trust-item{
    padding:0 25px;
    position:relative;
}
.henna-trust-item:not(:last-child)::after{
    content:"";
    position:absolute;
    top:10px;
    right:0;
    width:1px;
    height:70%;
    background:rgba(201,164,76,.35);
}
.henna-trust-item__title{
    color:#c9a44c;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:8px;
    letter-spacing:1px;
}
/* footer column section  */
.site-footer .wp-block-columns {
    gap: 2rem;
}
.site-footer .wp-block-column {
    padding-right: 1rem;
}
.site-footer h4.wp-block-heading {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1.5rem !important;
}
.site-footer .wp-block-paragraph {
    line-height: 1.7;
    font-size: 0.9rem;
}
.site-footer .site-footer__nav .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.site-footer .site-footer__nav .wp-block-navigation-item__content {
    color: #f2efe8 !important;
    font-size: 0.9rem;
}
.site-footer .site-footer__nav .wp-block-navigation-item__content:hover {
    color: #c9a44c !important;
}
.site-footer__bottom {
    margin-inline: 30px !important;
    border-top: 1px solid rgba(201, 164, 76, 0.2);
}
.wp-block-group.has-global-padding.is-layout-constrained.wp-container-core-group-is-layout-706549e8.wp-block-group-is-layout-constrained {
    max-width: 100%;
    padding-inline: 30px;
}
.site-footer .wp-block-columns {
    max-width: 100%;
}
.wp-block-separator.has-alpha-channel-opacity {
    margin-inline: 30px !important;
}


/* ---------- Accessibility basics ---------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.henna-skip-link {
	position: fixed;
	top: -60px;
	left: 1rem;
	z-index: 100000;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--deep-green);
	padding: 0.75rem 1.25rem;
	border-radius: 6px;
	font-weight: 600;
	transition: top 200ms ease;
}
.henna-skip-link:focus {
	top: 1rem;
	position: fixed;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- Sticky, transparent-to-solid header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: transparent;
	transition: background-color var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}
body:not(.home) .site-header {
	background-color: var(--wp--preset--color--deep-green);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
}
.site-header.is-scrolled {
	background-color: var(--wp--preset--color--deep-green);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
}
.site-header a {
	color: var(--wp--preset--color--white);
}
.site-header .wp-block-navigation-item:hover > a,
.site-header .current-menu-item > a {
	color: var(--wp--preset--color--gold);
}
.site-header__actions .wp-block-button__link {
	white-space: nowrap;
}
.site-header,
.site-header__inner {
	overflow: visible;
}
body.site-header-menu-open {
	overflow: hidden;
}
body.site-header-menu-open .site-header {
	z-index: 100001;
}
/* ---------- Buttons ---------- */
.wp-block-button__link.wp-element-button {
	transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base), background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}
.wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--deep-green);
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--gold-light);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(201, 161, 90, 0.35);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--deep-green);
	transform: translateY(-2px);
}

/* ---------- Cards: hover lift + image zoom ---------- */
.henna-card,
.henna-pricing-card,
.henna-testimonial-card,
.henna-gallery-item {
	transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
	overflow: hidden;
}
.henna-card:hover,
.henna-pricing-card:hover,
.henna-testimonial-card:hover {
	transform: unset;
	box-shadow: unset;
}
.henna-card figure,
.henna-gallery-item figure {
	overflow: hidden;
	margin: 0;
}
.henna-card figure img,
.henna-gallery-item figure img {
	transition: transform 500ms ease;
}
.henna-card:hover figure img,
.henna-gallery-item:hover figure img {
	transform: scale(1.07);
}

/* ---------- Pricing ---------- */
.henna-pricing-card {
	position: relative;
}
.henna-badge-ribbon {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	white-space: nowrap;
}
.henna-pricing-card.is-featured-package {
	border-color: var(--wp--preset--color--gold) !important;
	box-shadow: 0 16px 40px rgba(201, 161, 90, 0.25);
	transform: scale(1.03);
}
.henna-pricing-card.is-featured-package .henna-badge-ribbon {
	display: inline-block;
}
.henna-price-table table {
	border-color: rgba(255, 255, 255, 0.15);
}
.henna-price-table th,
.henna-price-table td {
	border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ---------- Rating / stars ---------- */
.henna-stars {
	display: inline-flex;
	gap: 2px;
}
.henna-star {
	fill: none;
	stroke: var(--wp--preset--color--gold);
	stroke-width: 1.5;
}
.henna-star.is-filled {
	fill: var(--wp--preset--color--gold);
	stroke: var(--wp--preset--color--gold);
}
.henna-rating-badge {
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(2px);
}

/* ---------- Announcement bar ----------
   Hidden entirely when the Theme Settings field is empty, so an unused bar
   never leaves a stripe of dead space at the top of the site. */
.henna-announce {
	padding: 0.75rem var(--wp--preset--spacing--30);
}
.henna-announce__text {
	font-size: 0.9rem !important;
	letter-spacing: 0.05em !important;
}
.henna-announce__text {
	line-height: 1.45;
}
.henna-announce:has(.henna-announce__text:empty) {
	display: none;
}

/* ---------- Header, centred layout ----------
   Socials left, logo centred, actions right, navigation on its own line
   underneath. */
/* Social icons pinned to the far right of the header, level with the logo.
   Taken out of the flow so they can't push the centred logo off centre. */
.site-header--centred {
	position: relative;
	padding-top: 26px !important;
	padding-bottom: 20px !important;
}
.site-header--centred .site-header__social {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: var(--wp--preset--spacing--30);
	margin: 0;
}
.site-header--centred .henna-social-links {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header--centred .henna-social-links__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(201, 161, 90, 0.45);
	color: var(--wp--preset--color--gold);
	background: rgba(201, 161, 90, 0.06);
	transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.site-header--centred .henna-social-links__item a svg {
	fill: currentColor;
	display: block;
}
.site-header--centred .henna-social-links__item a:hover,
.site-header--centred .henna-social-links__item a:focus-visible {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--deep-green);
}



.site-header--centred .site-header__logo {
	margin: 0 auto 0.9rem !important;
	display: flex;
	justify-content: center;
	width: 100%;
}
.site-header--centred .site-header__logo a,
.site-header--centred .site-header__logo img {
	display: block;
	margin: 0 auto;
}
.site-header--centred .site-header__logo img {
	max-height: 104px;
	max-width: 300px;
	width: auto;
	/* The logo file has a near-black rectangle baked into it, which reads as a
	   dull box against the deep green. Blending it away lets the gold sit
	   directly on the header, and a little extra brightness keeps it crisp. */
	mix-blend-mode: lighten;
	filter: brightness(1.12) contrast(1.04) saturate(1.06);
}
.site-header--centred .site-header__nav,
.site-header--centred .site-header__nav .wp-block-navigation__container {
	justify-content: center !important;
	gap: clamp(1.4rem, 2.8vw, 3rem);
}
/* Navigation set larger, with more letter spacing and a gold underline that
   draws in on hover — the old size read as small print rather than a menu. */
.site-header--centred .site-header__nav .wp-block-navigation-item__content {
	position: relative;
	font-size: 0.98rem !important;
	letter-spacing: 0.13em !important;
	padding-bottom: 6px;
	transition: color 220ms ease;
}
.site-header--centred .site-header__nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.site-header--centred .site-header__nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.site-header--centred .site-header__nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}
.site-header--centred .site-header__nav .wp-block-navigation-item:hover .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold-light);
}

@media (max-width: 980px) {
	.site-header--centred .site-header__logo img {
		max-height: 62px;
	}
	.site-header--centred .site-header__nav .wp-block-navigation-item__content {
		font-size: 0.92rem !important;
	}
	.site-header--centred .site-header__nav {
		justify-content: center !important;
	}
}

/* ---------- Hero ---------- */
/* Fills the first screen: viewport height less the header. svh rather than vh
   so mobile browsers don't hide the bottom behind their address bar. The JS
   sets --henna-header-height from the real header; the fallback covers the
   moment before that runs. */
.henna-hero {
	padding-top: clamp(1.5rem, 3vw, 3rem) !important;
	padding-bottom: clamp(1.5rem, 3vw, 3rem) !important;
	min-height: calc(100svh - var(--henna-header-height, 104px) - 6px) !important;
	display: flex !important;
	align-items: center !important;
}
.henna-hero > .wp-block-cover__inner-container {
	width: 100%;
}
.henna-hero .wp-block-cover__background {
	background: var(--wp--preset--gradient--hero-overlay);
}

/* ---------- Hero, full-bleed variant ----------
   The photograph is the message: it fills the screen and the copy sits on a
   darkened band at the left. Three things only — headline, one line, one
   button — so a visitor knows what this is before reading a word. */
/* The whole first screen: copy in the middle, reassurance pinned to the
   bottom, nothing below the fold on a normal laptop or phone. */
.henna-hero--full {
	align-items: stretch !important;
	padding-top: clamp(1rem, 2vh, 2rem) !important;
	padding-bottom: clamp(2rem, 5.5vh, 4.5rem) !important;
}
.henna-hero--full > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100%;
	gap: 1.5rem;
}
.henna-hero--full .henna-hero__copy {
	margin-top: auto;
	margin-bottom: auto;
}
.henna-hero--full .wp-block-cover__image-background {
	object-position: 68% center;
}
/* Two washes: one across from the left so the copy always has contrast, and
   one up from the bottom so the trust strip never fights the photograph. */
.henna-hero--full .wp-block-cover__background {
	background:
		linear-gradient(
			to top,
			rgba(6, 18, 14, 0.94) 0%,
			rgba(6, 18, 14, 0.86) 9%,
			rgba(6, 18, 14, 0.45) 20%,
			rgba(6, 18, 14, 0) 32%
		),
		linear-gradient(
			100deg,
			rgba(6, 18, 14, 0.92) 0%,
			rgba(6, 18, 14, 0.78) 32%,
			rgba(6, 18, 14, 0.32) 58%,
			rgba(6, 18, 14, 0.12) 100%
		) !important;
}
.henna-hero--full .henna-hero__copy {
	position: relative;
	max-width: 660px;
	margin-right: auto;
	padding-bottom: 0;
}
/* Type is sized against viewport height as well as width, so a long headline
   plus the paragraph plus the trust strip always fit one screen without
   scrolling, on a laptop or a phone. */
.henna-hero--full .henna-hero__title {
	text-wrap: balance;
	font-size: clamp(2rem, min(4.4vw, 6.4vh), 3.6rem) !important;
}
.henna-hero--full .henna-hero__sub {
	font-size: clamp(0.95rem, min(1.15vw, 2.1vh), 1.1rem) !important;
	max-width: 58ch;
}

/* Eyebrow: bigger and given a small gold rule so it reads as a considered part
   of the composition rather than a stray line of small caps. Still clearly
   subordinate to the headline. */
.henna-hero--full .henna-hero__eyebrow {
	font-size: clamp(0.82rem, 1.9vh, 0.98rem) !important;
	letter-spacing: 0.22em !important;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	color: var(--wp--preset--color--gold-light) !important;
}
.henna-hero--full .henna-hero__eyebrow::after {
	content: "";
	flex: 0 0 auto;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 1px;
	background: linear-gradient(
		to right,
		rgba(201, 161, 90, 0.9),
		rgba(201, 161, 90, 0)
	);
}

/* Rating badge sits over the photograph, clear of the copy */
.henna-hero--full {
	position: relative;
}
.henna-hero--full .henna-rating-badge {
	position: absolute;
	right: clamp(1.5rem, 5vw, 5rem) !important;
	top: clamp(1.5rem, 5vh, 3.5rem) !important;
	transform: none;
	z-index: 3;
	width: 118px !important;
	height: 118px !important;
	border-radius: 50%;
	border: 1px solid rgba(201, 161, 90, 0.55);
	background: rgba(18, 42, 32, 0.72);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.2rem;
}
.henna-hero--full .henna-rating-badge__score {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.9rem;
	line-height: 1;
	color: var(--wp--preset--color--gold-light);
}
.henna-hero--full .henna-rating-badge__star {
	font-size: 1.1rem;
	margin-left: 0.15rem;
}
.henna-hero--full .henna-rating-badge__label {
	font-size: 0.58rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	line-height: 1.3;
	max-width: 84px;
}
@media (max-width: 1100px) {
	.henna-hero--full .henna-rating-badge {
		display: none !important;
	}
}
.henna-hero--full .henna-hero__actions {
	gap: 0.75rem 1rem;
	align-items: center;
}
.henna-hero--full .henna-hero__whatsapp .wp-block-button__link {
	border-width: 1px;
	background: transparent;
}
.henna-hero--full .henna-hero__whatsapp .wp-block-button__link:hover {
	background: rgba(251, 246, 236, 0.1);
}

/* Trust strip sits directly under the hero, carrying the reassurance the
   hero deliberately no longer clutters itself with. */
/* A solid band behind the trust strip. A gradient alone can't win against a
   bright, busy photograph, so the bottom of the hero gets a real dark bar with
   a short gradient above it to soften the join. */
.henna-hero--full::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--henna-strip-height, 150px) + 2.5rem);
	background:
		linear-gradient(
			to top,
			#0B1A14 0%,
			#0B1A14 72%,
			rgba(11, 26, 20, 0.9) 86%,
			rgba(11, 26, 20, 0) 100%
		);
	pointer-events: none;
	z-index: 1;
}
.henna-hero--full > .wp-block-cover__inner-container {
	z-index: 2;
}

.henna-trust-strip--in-hero {
	border-top: 1px solid rgba(201, 161, 90, 0.28);
	padding-top: clamp(0.8rem, 1.7vh, 1.3rem) !important;
	padding-bottom: clamp(0.9rem, 1.9vh, 1.5rem) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.henna-trust-strip__row {
	gap: 1rem 2rem;
	margin-bottom: 0 !important;
}
.henna-trust-strip__row .wp-block-column {
	border-left: 1px solid rgba(201, 161, 90, 0.3);
	padding-left: 1.1rem;
}
/* Icon sits to the left of the two lines of text, as on the original site */
.henna-trust-strip__row .henna-trust-item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 0.75rem;
	align-items: center;
}
.henna-trust-strip__row .henna-trust-item__icon {
	grid-row: 1 / span 2;
	margin: 0 !important;
	line-height: 0;
}
.henna-trust-strip__row .henna-trust-item__icon img {
	width: 26px;
	height: 26px;
	display: block;
}
.henna-trust-strip__row .wp-block-column:first-child {
	border-left: 0;
	padding-left: 0;
}
.henna-trust-strip__row p {
	margin-top: 0;
	text-shadow: 0 1px 3px rgba(6, 18, 14, 0.55);
}
/* Social lives in the header on desktop; this copy of it is for phones only,
   where the header has no room for it. */
.henna-trust-social {
	display: none !important;
}

@media (max-width: 900px) {
	.henna-hero--full .wp-block-cover__image-background {
		object-position: 62% center;
	}
	/* On a small screen the photograph sits directly behind every line of
	   text. Quietening it in the middle band is what makes the copy feel
	   uncluttered; the top and the very bottom stay open so the image still
	   reads as a photograph. */
	.henna-hero--full .wp-block-cover__background {
		background:
			linear-gradient(
				to top,
				rgba(6, 18, 14, 0.97) 0%,
				rgba(6, 18, 14, 0.93) 20%,
				rgba(6, 18, 14, 0.86) 46%,
				rgba(6, 18, 14, 0.62) 68%,
				rgba(6, 18, 14, 0.18) 100%
			) !important;
	}
	.henna-hero--full .henna-hero__title {
		font-size: clamp(1.9rem, min(7.6vw, 5.6vh), 2.9rem) !important;
	}
	.henna-hero--full .henna-hero__sub {
		font-size: clamp(0.9rem, 1.9vh, 1rem) !important;
		margin-bottom: 1.3rem !important;
	}
	.henna-trust-strip__row {
		flex-wrap: wrap !important;
		gap: 0.75rem 1.25rem;
	}
	.henna-trust-strip__row .wp-block-column {
		border-left: 0;
		padding-left: 0;
		flex-basis: calc(50% - 0.75rem) !important;
	}
	.henna-trust-strip__row p {
		font-size: 0.74rem !important;
	}
	.henna-trust-strip__row p:first-child {
		font-size: 0.64rem !important;
	}
}

@media (max-width: 600px) {
	.henna-hero--full .henna-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.henna-hero--full .henna-hero__actions .wp-block-button {
		width: 100%;
	}
	.henna-hero--full .henna-hero__actions .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	.henna-hero--full .henna-hero__title {
		line-height: 1.12 !important;
	}
}

/* Short laptop screens: shrink the headline rather than push the trust strip
   off the bottom. */
@media (min-width: 901px) and (max-height: 780px) {
	.henna-hero--full .henna-hero__title {
		font-size: clamp(2.6rem, 4.4vw, 3.6rem) !important;
	}
	.henna-hero--full .henna-hero__sub {
		margin-bottom: 1.4rem !important;
	}
}
.henna-hero .henna-hero-bg-mobile {
	display: none !important;
}

/* Mobile: portrait hero — shift subject to the right (~50% of girl visible) */
@media (max-width: 768px) {
	.henna-hero.wp-block-cover {
		background-color: #06120e !important;
		background-image: url("/wp-content/themes/henna-at-home/assets/images/hero-mobile-bg.webp") !important;
		background-size: 155% auto !important;
		background-position: left top !important;
		background-repeat: no-repeat !important;
	}
	.henna-hero.wp-block-cover .wp-block-cover__image-background:not(.henna-hero-bg-mobile) {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}
	.henna-hero.wp-block-cover .henna-hero-bg-mobile {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		object-fit: cover !important;
		object-position: left top !important;
		width: 155% !important;
		max-width: none !important;
		height: 100% !important;
		left: 0 !important;
		right: auto !important;
	}
}
.henna-hero .henna-hero__media-col {
	position: relative;
}
.henna-hero .henna-rating-badge img {
	width: 24px !important;
	height: 24px !important;
	margin-top: 20px !important;
}
.henna-hero .henna-rating-badge {
	position: absolute;
	top: 0;
	right: 0;
	width: 110px !important;
	height: 110px !important;
	padding: 0 !important;
	aspect-ratio: 1/1;
}
.henna-hero .henna-rating-badge p {
	margin-top: 20px !important;
}
.henna-hero .henna-rating-badge p:last-child {
	margin-top: 0.25rem !important;
}
.henna-hero .henna-hero-features {
	gap: 1rem !important;
	margin-top: 2rem !important;
}
.henna-hero-features .wp-block-image img {
	width: 32px !important;
	height: 32px !important;
	max-width: 32px !important;
}
.henna-hero-row .wp-block-buttons {
	align-items: stretch;
}
.henna-hero-row .wp-block-buttons .wp-block-button__link {
	padding: 0.5rem 1.75rem !important;
}
.henna-hero-row .wp-block-buttons > .wp-block-button:not(.henna-btn-whatsapp) .wp-block-button__link {
	color: #ffffff !important;
}
.henna-btn-whatsapp .wp-block-button__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.henna-btn-whatsapp .wp-block-button__link:not(:has(.henna-btn-whatsapp__icon))::before {
	content: url('../images/icon-whatsapp.svg');
	filter: brightness(0) invert(1);
}

.henna-hero-row .wp-block-buttons > .wp-block-button {
	display: flex;
	align-items: stretch;
}
.henna-hero-row .wp-block-buttons > .wp-block-button .wp-block-button__link {
	flex: 1;
	min-height: 3.25rem;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.henna-hero .henna-rating-badge {
		bottom: -45px !important;
		top: unset;
	}
	.henna-hero-row .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.henna-hero-row .wp-block-buttons > .wp-block-button {
		width: 100%;
	}
	.henna-hero-row .wp-block-buttons .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
	.henna-hero-features {
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}
	.henna-hero-features > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.henna-hero-row > .wp-block-column:first-child > p {
		width: 100% !important;
		max-width: 100% !important;
	}
	.henna-hero-row h1 + p,
	.henna-hero-row .wp-block-heading + p {
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 1.5rem !important;
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
	}
}

@media (max-width: 480px) {
	.henna-hero-features > .wp-block-column {
		margin-bottom: 1rem;
	}
	.henna-hero-features > .wp-block-column:last-child {
		margin-bottom: 0;
	}
}

.henna-feature-item__icon img {
	filter: brightness(0) saturate(100%) invert(76%) sepia(28%) saturate(500%) hue-rotate(357deg);
}
.henna-hero-features .henna-feature-item {
	min-width: 130px;
}


/* ---------- Contact items ---------- */
.henna-contact-item__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
}
/* Gold ringed circle, matching the social icons, so the footer's contact list
   and its social row read as one set rather than two different treatments. */
.site-footer .henna-contact-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(201, 161, 90, 0.45);
	background: rgba(201, 161, 90, 0.06);
	color: var(--wp--preset--color--gold);
	flex-shrink: 0;
	transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.site-footer .henna-contact-item__link:hover .henna-contact-item__icon,
.site-footer .henna-contact-item__link:focus-visible .henna-contact-item__icon {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--deep-green);
}
.site-footer .henna-contact-item__icon svg {
	width: 15px;
	height: 15px;
	display: block;
}
.site-footer .henna-contact-item__link {
	gap: 0.75rem;
}
.site-footer .henna-contact-list .henna-contact-item {
	margin-bottom: 0.85rem;
}

.henna-contact-item__icon {
	display: inline-flex;
	color: var(--wp--preset--color--gold);
	flex-shrink: 0;
}
.henna-contact-list .henna-contact-item {
	margin-bottom: 1.1rem;
}

/* ---------- Social links ---------- */
.henna-social-links {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.henna-social-links--vertical {
	flex-direction: column;
}
.henna-social-links__item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}
.henna-social-links__item a:hover,
.henna-social-links__item a:focus-visible {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--deep-green);
}
.henna-social-links__item svg {
	fill: currentColor;
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 300;
}
@media (max-width: 768px) {
	/* Smaller and tucked into the corner so it never sits on top of the
	   reassurance strip at the bottom of the hero. */
	.whatsapp-float {
		right: 0.85rem;
		bottom: 0.85rem;
	}
	.whatsapp-float__button .henna-contact-item__link {
		width: 48px;
		height: 48px;
	}
}
.whatsapp-float__button .henna-contact-item__link {
	width: 58px;
	height: 58px;
	border-radius: 999px;
	background-color: #25d366;
	color: #fff;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.whatsapp-float__button .henna-contact-item__value {
	display: none;
}
.whatsapp-float__button .henna-contact-item__icon {
	color: #fff;
}

/* ---------- Testimonial slider (scroll-snap, no JS library) ---------- */
.henna-testimonial-slider.wp-block-post-template {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 1.75rem;
	padding: 0.5rem 0.25rem 1.5rem;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--gold) transparent;
}
.henna-testimonial-slider.wp-block-post-template > li {
	scroll-snap-align: start;
	flex: 0 0 min(360px, 85vw);
	list-style: none;
}
.henna-slider-prev,
.henna-slider-next {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--gold);
	background: transparent;
	color: var(--wp--preset--color--deep-green);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}
.henna-slider-prev:hover,
.henna-slider-next:hover {
	background-color: var(--wp--preset--color--gold);
	color: #fff;
}

/* ---------- Lightweight lightbox (assets/js/main.js) ---------- */
.henna-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(14, 31, 23, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 2rem;
	animation: henna-fade-in 200ms ease;
}
.henna-lightbox-overlay img {
	max-width: min(92vw, 1100px);
	max-height: 88vh;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.henna-lightbox-close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--gold);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 1.4rem;
	cursor: pointer;
}
@keyframes henna-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---------- Scroll animations (progressive enhancement) ---------- */
html.henna-js .henna-card,
html.henna-js .henna-pricing-card,
html.henna-js .henna-testimonial-card,
html.henna-js .henna-process-step,
html.henna-js .henna-gallery-item,
html.henna-js .henna-hero h1,
html.henna-js .henna-hero p {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 700ms ease, transform 700ms ease;
}
html.henna-js .henna-card.is-visible,
html.henna-js .henna-pricing-card.is-visible,
html.henna-js .henna-testimonial-card.is-visible,
html.henna-js .henna-process-step.is-visible,
html.henna-js .henna-gallery-item.is-visible,
html.henna-js .henna-hero h1.is-visible,
html.henna-js .henna-hero p.is-visible {
	opacity: 1;
	transform: translateY(0);
}
html.henna-reduced-motion .henna-card,
html.henna-reduced-motion .henna-pricing-card,
html.henna-reduced-motion .henna-testimonial-card,
html.henna-reduced-motion .henna-process-step,
html.henna-reduced-motion .henna-gallery-item,
html.henna-reduced-motion .henna-hero h1,
html.henna-reduced-motion .henna-hero p,
html.henna-reduced-motion * {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Smooth scrolling for on-page anchors ---------- */
html {
	scroll-behavior: smooth;
}

/* The header is sticky, so an anchor target scrolled to the very top of the
   viewport ends up hidden behind it. Push each target down by the header
   height plus a little breathing room. */
#services,
#pricing,
#detailed-pricing,
#gallery,
#reviews,
#contact,
#main [id] {
	scroll-margin-top: 6.5rem;
}

/* ---------- Breadcrumbs ---------- */
.henna-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1rem;
	padding: 0;
	font-size: 0.85rem;
}
.henna-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 0.4rem;
	color: var(--wp--preset--color--gold);
}
.henna-breadcrumbs a {
	color: var(--wp--preset--color--deep-green);
	text-decoration: underline;
}

/* ---------- Flourish section headings (⁓ Heading ⁓) ---------- */
.henna-flourish-heading {
	position: relative;
	display: inline-block;
	padding: 0 2.5rem;
}
.henna-flourish-heading::before,
.henna-flourish-heading::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--gold);
}
.henna-flourish-heading::before { left: 0; }
.henna-flourish-heading::after { right: 0; }
.wp-block-heading.henna-flourish-heading,
h2.henna-flourish-heading {
	display: block;
	text-align: center;
}
.henna-flourish-heading::before { left: 50%; margin-left: -120px; }


/* home page css here  */

/* "For Every Occasion" services section — hidden on all screens */
/* .wp-block-group.alignfull.has-cream-background-color:has(.henna-occasion-row),
.henna-occasion-section {
	display: none !important;
} */

.henna-hero-row p.wp-block-paragraph.is-visible {
    margin-top: 10px;
}
.henna-occasion-row {
	max-width: 100% !important;
}
.henna-occasion-row h2.wp-block-heading {
	margin-bottom: 15px !important;
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	display: none !important;
}
.henna-occasion-photos {
	gap: 16px !important;
}
.henna-occasion-photos .wp-block-column {
	flex-basis: 33.33%;
	display: flex !important;
}
.henna-occasion-photos figure.wp-block-image {
	border-radius: 8px;
	overflow: hidden;
	width: 100%;
	display: flex;
}
.henna-occasion-photos figure.wp-block-image img {
	width: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 768px) {
	.henna-occasion-photos figure.wp-block-image,
	.henna-occasion-photos figure.wp-block-image img {
		height: 280px !important;
	}
}
@media (max-width: 480px) {
	.henna-occasion-photos figure.wp-block-image,
	.henna-occasion-photos figure.wp-block-image img {
		height: 220px !important;
	}
}

.henna-occasion-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.henna-occasion-icon figure.wp-block-image {
	margin: 0 0 10px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #c9a44c;
	border-radius: 50%;
}
.henna-occasion-icon figure.wp-block-image img {
	width: 38px !important;
	height: 38px !important;
}
.henna-occasion-icon p.wp-block-paragraph {
	font-size: 0.8rem;
	font-weight: 600;
	color: #1a2b1c;
	line-height: 1.3;
}
@media (max-width: 782px) {
	.henna-occasion-icons {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.henna-occasion-icons > .wp-block-column {
		flex-basis: auto !important;
		flex-grow: 0 !important;
		max-width: none !important;
		width: auto !important;
	}
}
@media (max-width: 600px) {
	.henna-occasion-icon figure.wp-block-image {
		height: 40px;
		width: 40px;
	}
	.henna-occasion-icon figure.wp-block-image img {
		height: 24px !important;
		width: 24px !important;
	}
}

.henna-services-pricing{
	background:#faf5ee;
}

/* Full-width Services & Pricing (live markup lacks alignfull) */
#main > section.wp-block-group:has(.henna-services-grid),
.henna-services-pricing{
	width:100% !important;
	max-width:none !important;
	margin-left:0 !important;
	margin-right:0 !important;
	background:#faf5ee !important;
	padding:50px 30px !important;
	box-sizing:border-box;
}
#main.is-layout-constrained > section.wp-block-group:has(.henna-services-grid){
	max-width:none !important;
	width:100% !important;
}
#main > section.wp-block-group:has(.henna-services-grid) > .is-layout-constrained,
.henna-services-pricing > .is-layout-constrained{
	max-width:none !important;
	width:100% !important;
	margin-left:0 !important;
	margin-right:0 !important;
}
.henna-services-grid{
	width:100% !important;
	max-width:none !important;
}

.henna-services-pricing .top-rule,
#main > section.wp-block-group:has(.henna-services-grid) > .top-rule,
#main > section.wp-block-group:has(.henna-services-grid) > .wp-block-separator{
	display: none !important;
}

.henna-services-pricing .section-title{
	font-family: var(--wp--preset--font-family--heading);
	font-weight:600;
	color:#5b1f2b;
	letter-spacing:0.5px;
}

.henna-services-pricing .section-title .flourish{
	color:#b5883a;
}

span.flourish {
	color:#b5883a;
}

.henna-services-grid{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:22px;
}

.henna-service-card{
	position: relative;
	background:#fbf7f1;
	border:1px solid #e9ded0;
	border-radius:10px;
	padding:14px 14px 70px;
}

.henna-service-image-wrap{
	position:relative;
	margin-bottom:20px;
}

.henna-service-image{
	width:100%;
	aspect-ratio:1/0.92;
	border-radius:8px;
	display:block;
	overflow:hidden;
	background-size:cover !important;
	background-position:center !important;
	background-repeat:no-repeat !important;
}

/* Override old inline gradient placeholders with real service images */
.henna-services-grid .henna-service-card:nth-child(1) .henna-service-image,
.henna-services-grid .henna-service-card:nth-child(3) .henna-service-image,
.henna-services-grid .henna-service-card:nth-child(5) .henna-service-image{
	background-image:url('../images/bridal-design.jpeg') !important;
}
.henna-services-grid .henna-service-card:nth-child(2) .henna-service-image,
.henna-services-grid .henna-service-card:nth-child(4) .henna-service-image{
	background-image:url('../images/Henna-TipTop-Salon.webp') !important;
}

.henna-service-badge{
	position:absolute;
	top:-24px;
	left:50%;
	transform:translateX(-50%);
	width:52px;
	height:52px;
	border-radius:50%;
	background:#16241d;
	display:flex;
	align-items:center;
	justify-content:center;
	border:3px solid #fbf7f1;
	border-color:#b5883afa;
}
.henna-service-badge img,
.henna-service-badge__icon{
	width:28px !important;
	height:28px !important;
	display:block !important;
	object-fit:contain;
}
.henna-service-badge:not(:has(img)){
	font-size:0;
	color:transparent;
	background-repeat:no-repeat;
	background-position:center;
	background-size:28px;
}
.henna-services-grid .henna-service-card:nth-child(1) .henna-service-badge:not(:has(img)),
.henna-service-badge--icon-card-mandala:not(:has(img)){
	background-image:url('../images/icon-card-mandala.svg');
}
.henna-services-grid .henna-service-card:nth-child(2) .henna-service-badge:not(:has(img)),
.henna-service-badge--icon-card-gift:not(:has(img)){
	background-image:url('../images/icon-card-gift.svg');
}
.henna-services-grid .henna-service-card:nth-child(3) .henna-service-badge:not(:has(img)),
.henna-service-badge--icon-card-feet:not(:has(img)){
	background-image:url('../images/icon-card-feet.svg');
}
.henna-services-grid .henna-service-card:nth-child(4) .henna-service-badge:not(:has(img)),
.henna-service-badge--icon-card-joined-hands:not(:has(img)){
	background-image:url('../images/icon-card-joined-hands.svg');
}
.henna-services-grid .henna-service-card:nth-child(5) .henna-service-badge:not(:has(img)),
.henna-service-badge--icon-card-hands:not(:has(img)){
	background-image:url('../images/icon-card-hands.svg');
}

.henna-service-title{
	font-family: var(--wp--preset--font-family--heading);
	font-weight:600;
	font-size:1.02rem;
	letter-spacing:0.6px;
	color:#b5883a;
	text-transform:uppercase;
	text-align:center;
	margin-bottom:16px;
}

.henna-service-list{
	margin-bottom:10px;
}

.henna-service-list li{
	font-size:15px;
	color:#3a3a3a;
	line-height:1.6;
}

.henna-service-list li::marker {
	color:#b5883a;
	font-size:large;
}

.henna-view-pricing-btn{
	position:absolute;
	left:60px;
	bottom:20px;
	width:60%;
}

.henna-view-pricing-btn .wp-block-button__link{
	display:block;
	width:100%;
	text-align:center;
	background:#b5883a;
	font-size:0.78rem;
	font-weight:600;
	letter-spacing:0.8px;
	padding:12px 10px;
	border-radius:4px;
	text-transform:uppercase;
}

.henna-view-pricing-btn .wp-block-button__link:hover{
	background:#a67a34;
}

/* Homepage only: reorder Client Love between pricing & gallery.
   Do NOT apply flex to #main on About/Contact — it breaks alignfull heroes. */
body.home #main.wp-block-group,
body.front-page #main.wp-block-group{
	display:flex !important;
	flex-direction:column;
}
body.home #main > .henna-detailed-pricing,
body.front-page #main > .henna-detailed-pricing{ order:40; }
body.home #main > .henna-testimonials-section,
body.front-page #main > .henna-testimonials-section{ order:45; }
body.home #main > .henna-gallery-section,
body.front-page #main > .henna-gallery-section{ order:50; }

/* About & Contact: keep page heroes/sections full width */
body.page-template-about-page #main,
body.page-template-page-contact #main,
body.page-id-146 #main,
body.page-id-148 #main{
	display:block !important;
}
body.page-template-about-page #main > .henna-about,
body.page-template-about-page #main > .henna-section,
body.page-template-page-contact #main > .henna-contact,
body.page-template-page-contact #main > .henna-contact-section,
body.page-id-146 #main > .henna-about,
body.page-id-146 #main > .henna-section,
body.page-id-148 #main > .henna-contact{
	width:100% !important;
	max-width:none !important;
	margin-left:0 !important;
	margin-right:0 !important;
}
.henna-about-hero.alignfull,
.henna-contact-hero.alignfull{
	width:100% !important;
	max-width:none !important;
	margin-left:0 !important;
	margin-right:0 !important;
}
.henna-about-hero,
.henna-contact-hero{
	width:100% !important;
	max-width:none !important;
}
body.page-template-about-page #main .alignfull,
body.page-template-page-contact #main .alignfull,
body.page-id-146 #main .alignfull,
body.page-id-148 #main .alignfull{
	width:100% !important;
	max-width:none !important;
	margin-left:0 !important;
	margin-right:0 !important;
}
/* Contact form content can stay centered; only force full-bleed backgrounds */
body.page-template-page-contact .henna-contact-section,
body.page-id-148 .henna-contact-section{
	width:100% !important;
	max-width:none !important;
}

/**** Client Love testimonial slider css here ********/
/* Pure CSS mockup layout — works without JS on live blockquote/cite HTML */
/* background-color, not the background shorthand: the shorthand wiped out the
   mehndi pattern that every other cream section gets, and its !important meant
   the pattern could never paint here. Padding left to the block's own setting
   so this section breathes like the ones around it. */
.henna-testimonials-section{
	display:block !important;
	width:100% !important;
	max-width:none !important;
	background-color: var(--henna-sand, #EFE3D4) !important;
	box-sizing:border-box;
	/* Pull the section heading up; the full preset spacing left it stranded
	   a long way below the pricing block above. */
	padding-top: clamp(3rem, 4vw, 4.5rem) !important;
}
.henna-reviews-heading{
	margin-bottom: 1.9rem !important;
}
.henna-testimonials-section.has-global-padding{
	padding-left:30px !important;
	padding-right:30px !important;
}
/* This used to force every child of the reviews section to full width. It
   belonged to the old two-column testimonials layout and its !important beat
   the new card's own max-width, so the card could never be narrowed. Scoped to
   the retired markup rather than deleted, in case that layout comes back. */
.henna-testimonials-section.is-layout-constrained > .henna-testimonials-row{
	max-width:none !important;
	width:100% !important;
	margin-left:0 !important;
	margin-right:0 !important;
}
.henna-testimonials-section .henna-testimonials-cta-col{
	display:none !important;
}
.henna-testimonials-section .henna-testimonials-row,
.henna-testimonials-section .henna-testimonials-main{
	display:block !important;
	width:100% !important;
	max-width:none !important;
	flex-basis:100% !important;
	margin:0 !important;
}
.henna-testimonials-section .henna-testimonials-heading,
.henna-testimonials-section .henna-testimonials-stars{
	display:none !important;
}

/* ============================================
   REVIEW BOARD – 3 Column Layout
   ============================================ */
.henna-review-board {
	display: grid;
	grid-template-columns: 280px 1fr 360px;
	gap: 0;
	width: 100%;
	max-width: 1200px;
	margin: 2rem auto 0;
}

/* --- LEFT: Hero image column --- */
.hrb-left {
	position: relative;
	display: flex;
	flex-direction: column;
}
.hrb-hero-img {
	width: 100%;
	height: 100%;
	min-height: 480px;
	object-fit: cover;
	display: block;
	border-radius: 8px 0 0 8px;
}
.hrb-avatar {
	position: absolute;
	bottom: 30px;
	left: 18px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 3px solid #1a3a24;
	overflow: hidden;
	background: #1a3a24;
	z-index: 5;
}
.hrb-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hrb-share-link {
	display: block;
	margin-top: 1rem;
	color: #1a3a24;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hrb-share-link:hover {
	color: #c9a44c;
}

/* --- CENTRE: Featured review --- */
.hrb-centre {
	background: #fdfdfb;
	padding: 2.5rem 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hrb-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.hrb-eline {
	width: 30px;
	height: 1px;
	background: rgba(201,164,76,0.4);
}
.hrb-etext {
	font-size: 0.6rem;
	letter-spacing: 0.25em;
	color: #c9a44c;
	font-weight: 600;
	text-transform: uppercase;
}
.hrb-eheart {
	color: #c9a44c;
	font-size: 0.6rem;
}
.hrb-quote-mark {
	color: #c9a44c;
	font-size: 1.5rem;
	font-family: Georgia, serif;
	line-height: 1;
	margin-bottom: 0.5rem;
}
.hrb-headline {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.45rem;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.3;
	margin-bottom: 0.8rem;
}
.hrb-body {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.88rem;
	color: #444;
	line-height: 1.65;
	margin-bottom: 1.2rem;
}
.hrb-stars {
	color: #c9a44c;
	font-size: 0.85rem;
	letter-spacing: 2px;
	margin-bottom: 0.5rem;
}
.hrb-name {
	font-weight: 700;
	font-size: 0.7rem;
	color: #1a1a1a;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.15rem;
}
.hrb-meta {
	font-size: 0.65rem;
	color: #c9a44c;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.3rem;
}
.hrb-service-tag {
	font-size: 0.65rem;
	color: #999;
	font-style: italic;
	margin-bottom: 1.5rem;
}

/* Google review badge */
.hrb-google-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fafaf8;
	border: 1px solid #e8decb;
	border-radius: 8px;
	padding: 0.6rem 1rem;
	text-decoration: none;
	transition: border-color 0.3s;
	margin-top: auto;
}
.hrb-google-badge:hover {
	border-color: #c9a44c;
}
.hrb-g-icon {
	font-family: 'Product Sans', Arial, sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	color: #4285F4;
	line-height: 1;
}
.hrb-g-score {
	font-weight: 700;
	font-size: 0.95rem;
	color: #1a1a1a;
}
.hrb-g-stars {
	color: #c9a44c;
	font-size: 0.8rem;
	letter-spacing: 1px;
}
.hrb-g-label {
	font-size: 0.55rem;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	flex: 1;
}
.hrb-g-arrow {
	font-size: 1rem;
	color: #c9a44c;
}

/* --- RIGHT: Two stacked cards --- */
.hrb-right {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.hrb-card {
	display: flex;
	flex-direction: column;
	flex: 1;
	background: #f9f6f0;
	overflow: hidden;
}
.hrb-card:first-child {
	border-radius: 0 8px 0 0;
}
.hrb-card:last-child {
	border-radius: 0 0 8px 0;
}
.hrb-card-img {
	width: 100%;
	height: 160px;
	overflow: hidden;
}
.hrb-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hrb-card-body {
	padding: 1rem 1.2rem 1.2rem;
}
.hrb-card-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	font-weight: 600;
	font-style: italic;
	color: #1a1a1a;
	margin-bottom: 0.4rem;
	line-height: 1.3;
}
.hrb-card-text {
	font-size: 0.78rem;
	color: #555;
	line-height: 1.5;
	margin-bottom: 0.5rem;
}
.hrb-card-name {
	font-weight: 700;
	font-size: 0.65rem;
	color: #c9a44c;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.1rem;
}
.hrb-card-meta {
	font-size: 0.6rem;
	color: #c9a44c;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.2rem;
}
.hrb-card-svc {
	font-size: 0.6rem;
	color: #aaa;
	font-style: italic;
}

/* --- Mobile --- */
@media (max-width: 900px) {
	.henna-review-board {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.hrb-hero-img {
		min-height: 280px;
		border-radius: 8px 8px 0 0;
	}
	.hrb-left {
		padding-bottom: 2rem;
	}
	.hrb-centre {
		padding: 2rem 1.5rem;
	}
	.hrb-right {
		flex-direction: column;
	}
	.hrb-card:first-child,
	.hrb-card:last-child {
		border-radius: 8px;
	}
	.hrb-card-img {
		height: 200px;
	}
}


.henna-testimonials-section .henna-testimonial-slide.is-henna-cl::before,
.henna-testimonials-section .henna-testimonial-slide.is-henna-cl::after{
	content:none !important;
	display:none !important;
}
.henna-testimonials-section .henna-cl-media{
	position:relative;
	min-height:440px;
	border-radius:14px;
	overflow:hidden;
	align-self:stretch;
}
.henna-testimonials-section .henna-cl-photo{
	display:block;
	width:100%;
	height:100%;
	min-height:440px;
	object-fit:cover;
	border-radius:14px;
}
.henna-testimonials-section .henna-cl-avatar{
	position:absolute;
	left:18px;
	bottom:18px;
	width:100px;
	height:100px;
	border-radius:50%;
	border:5px solid #fff;
	object-fit:cover;
	box-shadow:0 8px 22px rgba(26,43,28,.18);
	z-index:2;
	background:#fff;
	transform:none;
}
.henna-testimonials-section .henna-cl-content{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	padding:0.1rem 0 0;
	max-width:34rem;
}
.henna-testimonials-section .henna-cl-kicker{
	margin:0;
	text-align:center;
	color:#c5a059;
	font-family: var(--wp--preset--font-family--heading);
	font-size:0.88rem;
	font-weight:600;
	letter-spacing:0.28em;
	text-transform:uppercase;
	line-height:1;
}
.henna-testimonials-section .henna-cl-divider{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.7rem;
	margin:0.85rem 0 1.15rem;
	color:#c5a059;
	font-size:0.95rem;
	line-height:1;
}
.henna-testimonials-section .henna-cl-divider::before,
.henna-testimonials-section .henna-cl-divider::after{
	content:"";
	width:42px;
	height:1px;
	background:#c5a059;
}
.henna-testimonials-section .henna-cl-quote-mark{
	margin:0 0 0.35rem;
	color:#c5a059;
	font-family: var(--wp--preset--font-family--heading);
	font-size:3.1rem;
	font-weight:700;
	line-height:0.75;
}
.henna-testimonials-section .henna-cl-headline{
	margin:0 0 0.85rem;
	color:#1a1a1a;
	font-family: var(--wp--preset--font-family--heading);
	font-size:clamp(1.55rem, 2.4vw, 2.05rem);
	font-weight:600;
	line-height:1.28;
}
.henna-testimonials-section .henna-cl-body{
	margin:0 0 1.15rem;
	color:#2a2a2a;
	font-family:Georgia,'Times New Roman',serif;
	font-size:1.15rem;
	font-weight:400;
	line-height:1.75;
}
.henna-testimonials-section .henna-cl-stars{
	margin:0 0 0.85rem;
	color:#c5a059;
	font-size:1.2rem;
	letter-spacing:0.12em;
	line-height:1;
}
.henna-testimonials-section .henna-cl-name{
	margin:0;
	color:#1a1a1a;
	font-family: var(--wp--preset--font-family--heading);
	font-size:1.05rem;
	font-weight:700;
	letter-spacing:0.08em;
	text-transform:uppercase;
	line-height:1.35;
}
.henna-testimonials-section .henna-cl-meta{
	margin:0.28rem 0 0;
	color:#c5a059;
	font-family:Georgia,'Times New Roman',serif;
	font-size:0.9rem;
	font-weight:600;
	letter-spacing:0.1em;
	text-transform:uppercase;
	line-height:1.4;
}

.henna-testimonials-section .henna-testimonial-dots{
	display:flex !important;
	justify-content:center;
	align-items:center;
	gap:0.55rem;
	margin-top:1.15rem;
}
.henna-testimonials-section .henna-testimonial-dots label{
	width:9px;
	height:9px;
	border-radius:50%;
	background:#d8c4a4;
	cursor:pointer;
	display:block;
	transition:transform .2s ease, background-color .2s ease;
}
.henna-testimonials-section #henna-testimonial-0:checked ~ .henna-testimonial-dots label[for="henna-testimonial-0"],
.henna-testimonials-section #henna-testimonial-1:checked ~ .henna-testimonial-dots label[for="henna-testimonial-1"],
.henna-testimonials-section #henna-testimonial-2:checked ~ .henna-testimonial-dots label[for="henna-testimonial-2"]{
	background:#c5a059;
	transform:scale(1.18);
}

@media (max-width:900px){
	.henna-testimonials-section .henna-testimonial-slide{
		grid-template-columns:minmax(220px, 0.85fr) minmax(260px, 1.15fr);
		column-gap:1.6rem;
	}
	.henna-testimonials-section .henna-testimonial-slide::before,
	.henna-testimonials-section .henna-cl-media,
	.henna-testimonials-section .henna-cl-photo{
		min-height:340px;
	}
	.henna-testimonials-section .henna-testimonial-slide::after,
	.henna-testimonials-section .henna-cl-avatar{
		width:88px;
		height:88px;
		left:14px;
		bottom:14px;
	}
}

@media (max-width:768px){
	.henna-testimonials-section{
		padding:16px 18px 40px !important;
	}
	.henna-testimonials-section .henna-testimonial-slider{
		padding:1.25rem 1.1rem 1.1rem;
		border-radius:16px;
	}
	.henna-google-badge {
		top: 1.25rem;
		right: 1.1rem;
		font-size: 0.6rem;
		gap: 0.35rem;
	}
	.henna-google-badge span {
		width: 14px;
		height: 14px;
		font-size: 0.5rem;
	}
	.henna-testimonials-section .henna-testimonial-slide{
		grid-template-columns:1fr;
		grid-template-rows:auto auto auto;
		row-gap:1.1rem;
	}
	.henna-testimonials-section .henna-testimonial-slide::before{
		grid-column:1;
		grid-row:1;
		min-height:250px;
		height:250px;
		max-height:280px;
	}
	.henna-testimonials-section .henna-testimonial-slide::after{
		left:14px;
		bottom:auto;
		top:168px;
		width:86px;
		height:86px;
	}
	.henna-testimonials-section .henna-testimonial-slide > blockquote{
		grid-column:1;
		grid-row:2;
		padding-top:0;
		max-width:none;
		font-size:1.08rem;
	}
	.henna-testimonials-section .henna-testimonial-slide > cite{
		grid-column:1;
		grid-row:3;
		max-width:none;
	}
	.henna-testimonials-section .henna-testimonial-slide > blockquote::after{
		font-size:1.4rem;
	}
	.henna-testimonials-section .henna-cl-media,
	.henna-testimonials-section .henna-cl-photo{
		min-height:250px;
		height:250px;
	}
	.henna-testimonials-section .henna-cl-avatar{
		width:86px;
		height:86px;
		left:14px;
		bottom:14px;
	}
	.henna-testimonials-section .henna-cl-content{
		max-width:none;
	}
}

/* Responsive */
@media (max-width:1024px){
	.henna-services-grid{
		grid-template-columns:repeat(3, 1fr);
	}
}

@media (max-width:640px){
	.henna-services-grid{
		grid-template-columns:repeat(2, 1fr);
		gap:18px;
	}
}

@media (max-width:420px){
	.henna-services-grid{
		grid-template-columns:1fr;
	}
}


/**** Detailed Pricing  css here ********/
.henna-detailed-pricing{
	background:#faf5ee;
	padding-top: 100px !important;
	padding-bottom: 160px !important;
}

.section-title{
	font-family: var(--wp--preset--font-family--heading);
	font-weight:600;
	color:#5b1f2b !important;
	letter-spacing:0.5px;
}

.section-title .flourish{
	color:#c99a4a !important;
}

/*
 * The maroon above is chosen for the cream sections and is unreadable on the
 * dark green bands — it was set with !important, so the block editor's own
 * colour picker could not override it and the heading came out maroon on dark
 * green however it was set in the editor. On a dark background the heading
 * follows whatever colour the editor was given, falling back to gold.
 */
.has-deep-green-background-color .section-title,
.has-forest-green-background-color .section-title,
.henna-branch .section-title,
.henna-svc-cta .section-title {
	color: var(--wp--preset--color--gold, #C9A15A) !important;
}

.has-deep-green-background-color .section-title.has-text-color,
.has-forest-green-background-color .section-title.has-text-color,
.henna-branch .section-title.has-text-color,
.henna-svc-cta .section-title.has-text-color {
	color: inherit !important;
}

/* -------------------------------------------------------------------------
   A pair of call-to-action buttons.

   Two buttons with different labels are two different widths, which reads as
   sloppy rather than as one primary and one secondary choice. Matching their
   width makes them a pair; the gap keeps them from touching.
   ---------------------------------------------------------------------- */
.henna-cta-pair {
	gap: 0.9rem;
	align-items: stretch;
}

.henna-cta-pair .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 15.5rem;
	min-height: 3.25rem;
	line-height: 1.2;
	text-align: center;
	box-sizing: border-box;
}

/* The outline style draws its border inside the same box, so without this it
   sits a border-width shorter than the solid one next to it. */
.henna-cta-pair .is-style-outline .wp-block-button__link {
	border-width: 1px;
}

@media (max-width: 600px) {
	.henna-cta-pair {
		flex-direction: column;
		width: 100%;
	}

	.henna-cta-pair .wp-block-button,
	.henna-cta-pair .wp-block-button__link {
		width: 100%;
		min-width: 0;
	}
}

.henna-pricing-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:20px;
	margin: 5.5rem auto 1.5rem;
}

.henna-pricing-card{
	background: rgba(22, 36, 29, 0.95) !important;
	color: var(--wp--preset--color--gold);
	border: none;
	border-radius: 12px;
	overflow:visible;
	position:relative;
	padding: clamp(1.6rem, 2.5vw, 2.2rem) clamp(1.2rem, 2vw, 1.8rem);
	transition: background 300ms ease, transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.henna-pricing-card:hover {
	background: rgba(22, 36, 29, 1) !important;
	transform: translateY(-4px);
}

/* Ornate gold frame overlay — same as branch cards */
.henna-pricing-card::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 26px solid transparent;
	border-image-source: url("../images/frame-plaque.svg");
	border-image-slice: 60;
	border-image-width: 26px;
	border-image-repeat: stretch;
	opacity: 0.9;
	z-index: 1;
}

.henna-pricing-card-header{
	background: transparent;
	padding:4px 8px 10px;
	border-bottom: none;
}

.henna-pricing-card-title{
	font-family: var(--wp--preset--font-family--heading);
	font-weight:400;
	text-align:center;
	margin:0 0 10px;
}

p.henna-pricing-card-title.wp-block-paragraph {
	margin-bottom:0;
	font-size: clamp(1.4rem, 2vw, 1.85rem) !important;
	line-height: 1.2;
	color:var(--wp--preset--color--gold-light) !important;
}

.henna-pricing-card-labels{
	display:flex;
	justify-content:space-between;
	font-size:0.62rem;
	font-weight:600;
	letter-spacing:0.8px;
	color:#c99a4a;
	text-transform:uppercase;
	border-top:1px solid rgba(201, 161, 90, 0.20);
	padding-top:8px;
}

.henna-pricing-card-body{
	padding:2px 8px 4px;
}

.henna-price-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:8px 0;
	border-bottom:1px solid rgba(201, 161, 90, 0.12);
	font-size:0.82rem;
	color: var(--wp--preset--color--cream);
}

.henna-price-row:last-child{
	border-bottom:none;
}

.henna-price-row .henna-service-price{
	font-weight:500;
	color: var(--wp--preset--color--gold);
}

.henna-pricing-card-footer{
	text-align:center;
	padding:10px 8px 4px;
	font-size:0.75rem;
	color: var(--wp--preset--color--beige);
	font-style:italic;
	opacity: 0.7;
}

/* Responsive */
@media (max-width:1024px){
	.henna-pricing-grid{
		grid-template-columns:repeat(2, 1fr);
	}
}

@media (max-width:640px){
	.henna-pricing-grid{
		grid-template-columns:1fr;
	}
}

/* Detailed Pricing — layout overrides */
.henna-pricing-grid .henna-price-row {
	border-bottom-color: rgba(201, 161, 90, 0.12);
}

.henna-pricing-grid .henna-pricing-card-labels {
	padding-bottom:0.4rem !important;
	border-top:none;
}

.henna-pricing-grid .henna-pricing-card {
	position:relative;
	padding-bottom:2rem !important;
}

.henna-pricing-grid .henna-pricing-card-footer {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
	margin:0 !important;
	padding:0.4rem 1rem 0 !important;
	border-top:1px solid rgba(201, 161, 90, 0.15) !important;
}
/* gallery css here */
.henna-gallery-section {
    padding: 0 30px 60px !important;
}
.henna-gallery-grid .wp-block-image {
    overflow: hidden;
    border: 1px solid #c9a44c;
    border-radius: 10px;
    max-width: 160px;
    height: 180px
}
.henna-gallery-grid .wp-block-image img {
    transition: transform 0.3s ease;
}
.henna-gallery-grid .wp-block-image:hover img {
    transform: scale(1.05);
}


/**** Gallery archive page (match About Us) ********/
body.post-type-archive-henna_gallery{
	--henna-gold:#b5883a;
}
body.post-type-archive-henna_gallery #main{
	display:block !important;
	max-width:none !important;
	width:100% !important;
	background:#f7f1e6 !important;
	padding:0 !important;
}
body.post-type-archive-henna_gallery #main .alignfull,
body.post-type-archive-henna_gallery #main > .henna-gallery-page,
body.post-type-archive-henna_gallery #main > .henna-section,
body.post-type-archive-henna_gallery #main > .henna-gallery-archive-section{
	width:100% !important;
	max-width:none !important;
	margin-left:0 !important;
	margin-right:0 !important;
}

/* New template cover hero — mirror About cover */
body.post-type-archive-henna_gallery .henna-gallery-hero.wp-block-cover,
body.post-type-archive-henna_gallery .henna-about-hero.wp-block-cover{
	width:100% !important;
	max-width:none !important;
	min-height:480px !important;
	align-items:center !important;
	padding-top:var(--wp--preset--spacing--50, 3.5rem) !important;
	padding-bottom:var(--wp--preset--spacing--50, 3.5rem) !important;
	padding-left:var(--wp--preset--spacing--30, 1.5rem) !important;
	padding-right:var(--wp--preset--spacing--30, 1.5rem) !important;
	box-sizing:border-box;
}
body.post-type-archive-henna_gallery .henna-gallery-hero .wp-block-cover__inner-container,
body.post-type-archive-henna_gallery .henna-about-hero .wp-block-cover__inner-container{
	width:100% !important;
	max-width:1280px !important;
	margin-left:0 !important;
	margin-right:auto !important;
}
body.post-type-archive-henna_gallery .henna-gallery-hero__content,
body.post-type-archive-henna_gallery .henna-about-hero__content{
	max-width:640px !important;
	width:100% !important;
	margin-inline:0 !important;
	margin-left:0 !important;
	text-align:left !important;
}
body.post-type-archive-henna_gallery .henna-about-eyebrow,
body.post-type-archive-henna_gallery .henna-eyebrow{
	color:var(--henna-gold) !important;
	font-size:0.8rem !important;
	font-weight:700 !important;
	text-transform:uppercase !important;
	letter-spacing:0.2em !important;
	margin:0 0 1rem !important;
	text-align:left !important;
}
body.post-type-archive-henna_gallery .henna-about-heading{
	font-weight:500 !important;
	line-height:1.15 !important;
	color:#fff !important;
	text-align:left !important;
}
body.post-type-archive-henna_gallery .henna-about-hero__line,
body.post-type-archive-henna_gallery .henna-divider{
	display:block;
	width:64px;
	height:2px;
	margin:0 0 1.3rem;
	background:var(--henna-gold);
}
body.post-type-archive-henna_gallery .henna-section-heading{
	font-weight:500 !important;
	line-height:1.2 !important;
	margin:0 0 0.5rem !important;
}

/* Cream section under hero */
body.post-type-archive-henna_gallery .henna-gallery-archive-section,
body.post-type-archive-henna_gallery .henna-section--cream{
	background:#f7f1e6 !important;
	padding:4.5rem clamp(1.25rem, 4vw, 2.5rem) !important;
	box-sizing:border-box;
}
body.post-type-archive-henna_gallery .henna-gallery-archive-intro{
	margin:0 0 2.25rem !important;
	max-width:720px !important;
}
body.post-type-archive-henna_gallery .henna-gallery-archive-intro .henna-eyebrow{
	margin-bottom:0.6rem !important;
}
body.post-type-archive-henna_gallery .henna-gallery-archive-intro .henna-divider{
	margin:0.9rem 0 1.25rem;
	width:60px;
}

/* Grid */
body.post-type-archive-henna_gallery .henna-gallery-archive-grid,
body.post-type-archive-henna_gallery .wp-block-post-template.is-layout-grid{
	display:grid !important;
	grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
	gap:1rem !important;
	margin:0 !important;
	padding:0 !important;
	list-style:none !important;
}
body.post-type-archive-henna_gallery .wp-block-post-template > li{
	margin:0 !important;
	width:100% !important;
}
body.post-type-archive-henna_gallery .henna-gallery-item{
	background:transparent !important;
	border:0 !important;
	box-shadow:none !important;
	padding:0 !important;
	overflow:hidden;
}
body.post-type-archive-henna_gallery .henna-gallery-item .wp-block-post-featured-image,
body.post-type-archive-henna_gallery .henna-gallery-item figure{
	margin:0 0 0.65rem !important;
	border-radius:6px;
	overflow:hidden;
	aspect-ratio:1 / 1;
	background:#e8dfd0;
}
body.post-type-archive-henna_gallery .henna-gallery-item img{
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	display:block;
	border-radius:6px;
}
body.post-type-archive-henna_gallery .henna-gallery-item .wp-block-post-title,
body.post-type-archive-henna_gallery .henna-gallery-item__title{
	margin:0 !important;
	font-size:0.9rem !important;
	font-weight:500 !important;
	line-height:1.35 !important;
	text-align:left !important;
}
body.post-type-archive-henna_gallery .henna-gallery-item .wp-block-post-title a{
	color:#1c1c1c !important;
	text-decoration:none !important;
}
body.post-type-archive-henna_gallery .henna-gallery-item .wp-block-post-title a:hover{
	color:var(--henna-gold) !important;
}
body.post-type-archive-henna_gallery .henna-gallery-pagination{
	margin-top:2.5rem !important;
	gap:0.5rem;
}
body.post-type-archive-henna_gallery .henna-gallery-pagination a,
body.post-type-archive-henna_gallery .henna-gallery-pagination .page-numbers{
	color:#1c1c1c;
	border:1px solid #eadfc9;
	padding:0.45rem 0.75rem;
	border-radius:4px;
	text-decoration:none;
}
body.post-type-archive-henna_gallery .henna-gallery-pagination .current{
	background:var(--henna-gold);
	border-color:var(--henna-gold);
	color:#fff;
}

/*
 * LIVE DB template fallback (still the old centered intro group).
 * Force About Us hero look: stacked LEFT text + full-bleed photo on the right.
 */
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section){
	position:relative !important;
	display:flex !important;
	flex-direction:column !important;
	flex-wrap:nowrap !important;
	align-items:flex-start !important;
	justify-content:center !important;
	justify-items:start !important;
	width:100% !important;
	max-width:none !important;
	min-height:480px !important;
	margin:0 !important;
	padding:var(--wp--preset--spacing--50, 3.5rem) clamp(1.25rem, 4vw, 2.5rem) !important;
	box-sizing:border-box !important;
	gap:0 !important;
	/* Same hero image treatment as About cover: subject sits on the right */
	background-color:#0b1a12 !important;
	background-image:
		linear-gradient(90deg, rgba(11,26,18,.92) 0%, rgba(11,26,18,.72) 38%, rgba(11,26,18,.28) 62%, rgba(11,26,18,.15) 100%),
		url('../images/HeroDesktop.jpeg') !important;
	background-size:cover !important;
	background-position:center right !important;
	background-repeat:no-repeat !important;
	border:0 !important;
}
/* Kill WP constrained/grid centering that spreads children horizontally */
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section).is-layout-constrained,
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section).is-layout-flex{
	display:flex !important;
	flex-direction:column !important;
	align-items:flex-start !important;
}
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section) > *{
	display:block !important;
	width:auto !important;
	max-width:640px !important;
	margin-left:0 !important;
	margin-right:0 !important;
	text-align:left !important;
	float:none !important;
}
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section) .henna-breadcrumbs,
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section) > script,
body.post-type-archive-henna_gallery #main .henna-breadcrumbs + script[type="application/ld+json"],
body.post-type-archive-henna_gallery #main script[type="application/ld+json"]{
	display:none !important;
	visibility:hidden !important;
	height:0 !important;
	width:0 !important;
	overflow:hidden !important;
	max-width:0 !important;
	margin:0 !important;
	padding:0 !important;
	font-size:0 !important;
	line-height:0 !important;
	color:transparent !important;
}
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section) > p.has-gold-color,
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section) > p:nth-of-type(1){
	color:var(--henna-gold) !important;
	font-size:0.8rem !important;
	font-weight:700 !important;
	text-transform:uppercase !important;
	letter-spacing:0.2em !important;
	margin:0 0 1rem !important;
	text-align:left !important;
}
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section) > h1{
	color:#fff !important;
	font-weight:500 !important;
	font-size:clamp(2.5rem, 5vw, 3.5rem) !important;
	line-height:1.15 !important;
	margin:0 0 1.25rem !important;
	text-align:left !important;
	max-width:640px !important;
}
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section) > h1::after{
	content:"";
	display:block;
	width:64px;
	height:2px;
	margin:1.15rem 0 0;
	background:var(--henna-gold);
}
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section) > p:not(.has-gold-color):last-of-type,
body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section) > p.wp-block-paragraph:last-of-type{
	color:#f2efe8 !important;
	font-size:1.05rem !important;
	line-height:1.7 !important;
	margin:0 !important;
	text-align:left !important;
	max-width:34rem !important;
}

/* Query section under hero */
body.post-type-archive-henna_gallery #main > .wp-block-query{
	width:100% !important;
	max-width:none !important;
	margin:0 !important;
	padding:4.5rem clamp(1.25rem, 4vw, 2.5rem) !important;
	background:#f7f1e6 !important;
	box-sizing:border-box;
}

@media (max-width:1024px){
	body.post-type-archive-henna_gallery .henna-gallery-archive-grid,
	body.post-type-archive-henna_gallery .wp-block-post-template.is-layout-grid{
		grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
	}
}
@media (max-width:768px){
	body.post-type-archive-henna_gallery .henna-gallery-hero.wp-block-cover .wp-block-cover__image-background{
		display:none !important;
	}
	body.post-type-archive-henna_gallery .henna-gallery-hero.wp-block-cover,
	body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section){
		min-height:auto !important;
		padding:2.5rem 1.25rem !important;
		background-image:
			linear-gradient(rgba(11,26,18,.55), rgba(11,26,18,.55)),
			url('../images/HeroMob.jpeg') !important;
		background-size:cover !important;
		background-position:center !important;
	}
	body.post-type-archive-henna_gallery #main > .wp-block-group.has-global-padding:not(.henna-gallery-page):not(.henna-gallery-archive-section):not(.henna-section) > h1{
		font-size:clamp(1.85rem, 8vw, 2.75rem) !important;
	}
	body.post-type-archive-henna_gallery .henna-gallery-archive-grid,
	body.post-type-archive-henna_gallery .wp-block-post-template.is-layout-grid{
		grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
	}
}


/**** Services archive page (match About Us) ********/
body.post-type-archive-henna_service{
	--henna-gold:#b5883a;
}
body.post-type-archive-henna_service #main{
	display:block !important;
	max-width:none !important;
	width:100% !important;
	background:#f7f1e6 !important;
	padding:0 !important;
}
body.post-type-archive-henna_service #main .alignfull,
body.post-type-archive-henna_service #main > .henna-services-page,
body.post-type-archive-henna_service #main > .henna-section,
body.post-type-archive-henna_service #main > .henna-services-archive-section{
	width:100% !important;
	max-width:none !important;
	margin-left:0 !important;
	margin-right:0 !important;
}

/* New template cover hero */
body.post-type-archive-henna_service .henna-services-hero.wp-block-cover,
body.post-type-archive-henna_service .henna-about-hero.wp-block-cover{
	width:100% !important;
	max-width:none !important;
	min-height:480px !important;
	align-items:center !important;
	padding-top:var(--wp--preset--spacing--50, 3.5rem) !important;
	padding-bottom:var(--wp--preset--spacing--50, 3.5rem) !important;
	padding-left:var(--wp--preset--spacing--30, 1.5rem) !important;
	padding-right:var(--wp--preset--spacing--30, 1.5rem) !important;
	box-sizing:border-box;
}
body.post-type-archive-henna_service .henna-services-hero .wp-block-cover__inner-container,
body.post-type-archive-henna_service .henna-about-hero .wp-block-cover__inner-container{
	width:100% !important;
	max-width:1280px !important;
	margin-left:0 !important;
	margin-right:auto !important;
}
body.post-type-archive-henna_service .henna-services-hero__content,
body.post-type-archive-henna_service .henna-about-hero__content{
	max-width:640px !important;
	width:100% !important;
	margin-inline:0 !important;
	margin-left:0 !important;
	text-align:left !important;
}
body.post-type-archive-henna_service .henna-about-eyebrow,
body.post-type-archive-henna_service .henna-eyebrow{
	color:var(--henna-gold) !important;
	font-size:0.8rem !important;
	font-weight:700 !important;
	text-transform:uppercase !important;
	letter-spacing:0.2em !important;
	margin:0 0 1rem !important;
	text-align:left !important;
}
body.post-type-archive-henna_service .henna-about-heading{
	font-weight:500 !important;
	line-height:1.15 !important;
	color:#fff !important;
	text-align:left !important;
}
body.post-type-archive-henna_service .henna-about-hero__line,
body.post-type-archive-henna_service .henna-divider{
	display:block;
	width:64px;
	height:2px;
	margin:0 0 1.3rem;
	background:var(--henna-gold);
}
body.post-type-archive-henna_service .henna-section-heading{
	font-weight:500 !important;
	line-height:1.2 !important;
	margin:0 0 0.5rem !important;
}

/* Cream services section */
body.post-type-archive-henna_service .henna-services-archive-section,
body.post-type-archive-henna_service .henna-section--cream{
	background:#f7f1e6 !important;
	padding:4.5rem clamp(1.25rem, 4vw, 2.5rem) !important;
	box-sizing:border-box;
}
body.post-type-archive-henna_service .henna-services-archive-intro{
	margin:0 0 2.25rem !important;
	max-width:720px !important;
}
body.post-type-archive-henna_service .henna-services-archive-intro .henna-divider{
	margin:0.9rem 0 1.25rem;
	width:60px;
}

/* Cards grid */
body.post-type-archive-henna_service .henna-services-archive-grid,
body.post-type-archive-henna_service .wp-block-post-template.is-layout-grid{
	display:grid !important;
	grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
	gap:1.5rem !important;
	margin:0 !important;
	padding:0 !important;
	list-style:none !important;
}
body.post-type-archive-henna_service .wp-block-post-template > li{
	margin:0 !important;
	width:100% !important;
}
body.post-type-archive-henna_service .henna-card,
body.post-type-archive-henna_service .henna-service-archive-card{
	height:100%;
	background:#fff !important;
	border:1px solid #eadfc9 !important;
	border-radius:10px !important;
	overflow:hidden;
	box-shadow:none !important;
}
body.post-type-archive-henna_service .henna-card .wp-block-post-featured-image,
body.post-type-archive-henna_service .henna-card figure{
	margin:0 !important;
	overflow:hidden;
	aspect-ratio:4 / 3;
	background:#e8dfd0;
}
body.post-type-archive-henna_service .henna-card img{
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	display:block;
}
body.post-type-archive-henna_service .henna-card .wp-block-post-title{
	margin:0 0 0.55rem !important;
	font-size:1.2rem !important;
	font-weight:600 !important;
	line-height:1.3 !important;
}
body.post-type-archive-henna_service .henna-card .wp-block-post-title a{
	color:#1c1c1c !important;
	text-decoration:none !important;
}
body.post-type-archive-henna_service .henna-card .wp-block-post-title a:hover{
	color:var(--henna-gold) !important;
}
body.post-type-archive-henna_service .henna-card .wp-block-post-excerpt,
body.post-type-archive-henna_service .henna-card .wp-block-post-excerpt p{
	margin:0 !important;
	color:#555 !important;
	font-size:0.95rem !important;
	line-height:1.6 !important;
}
body.post-type-archive-henna_service .henna-services-pagination{
	margin-top:2.5rem !important;
	gap:0.5rem;
}
body.post-type-archive-henna_service .henna-services-pagination a,
body.post-type-archive-henna_service .henna-services-pagination .page-numbers{
	color:#1c1c1c;
	border:1px solid #eadfc9;
	padding:0.45rem 0.75rem;
	border-radius:4px;
	text-decoration:none;
}
body.post-type-archive-henna_service .henna-services-pagination .current{
	background:var(--henna-gold);
	border-color:var(--henna-gold);
	color:#fff;
}

/*
 * LIVE fallback — old archive.html intro (breadcrumbs + "Archives: Services")
 * Restyle into About-style stacked left hero. No JS.
 */
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section){
	position:relative !important;
	display:flex !important;
	flex-direction:column !important;
	flex-wrap:nowrap !important;
	align-items:flex-start !important;
	justify-content:center !important;
	justify-items:start !important;
	width:100% !important;
	max-width:none !important;
	min-height:480px !important;
	margin:0 !important;
	padding:var(--wp--preset--spacing--50, 3.5rem) clamp(1.25rem, 4vw, 2.5rem) !important;
	box-sizing:border-box !important;
	gap:0 !important;
	background-color:#0b1a12 !important;
	background-image:
		linear-gradient(90deg, rgba(11,26,18,.92) 0%, rgba(11,26,18,.72) 38%, rgba(11,26,18,.28) 62%, rgba(11,26,18,.15) 100%),
		url('../images/HeroDesktop.jpeg') !important;
	background-size:cover !important;
	background-position:center right !important;
	background-repeat:no-repeat !important;
	border:0 !important;
}
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section).is-layout-constrained,
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section).is-layout-flex{
	display:flex !important;
	flex-direction:column !important;
	align-items:flex-start !important;
}
/* Eyebrow */
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section)::before{
	content:"WHAT WE OFFER";
	display:block !important;
	color:var(--henna-gold) !important;
	font-size:0.8rem !important;
	font-weight:700 !important;
	text-transform:uppercase !important;
	letter-spacing:0.2em !important;
	margin:0 0 1rem !important;
	max-width:640px;
}
/* Description under heading */
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section)::after{
	content:"Bridal henna, parties, festivals and kids’ designs — expert artistry brought to your doorstep across West London.";
	display:block !important;
	color:#f2efe8 !important;
	font-size:1.05rem !important;
	line-height:1.7 !important;
	margin:0 !important;
	max-width:34rem;
	text-align:left !important;
}
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section) > *{
	display:block !important;
	width:auto !important;
	max-width:640px !important;
	margin-left:0 !important;
	margin-right:0 !important;
	text-align:left !important;
	float:none !important;
}
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section) .henna-breadcrumbs,
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section) > script,
body.post-type-archive-henna_service #main .henna-breadcrumbs + script[type="application/ld+json"],
body.post-type-archive-henna_service #main script[type="application/ld+json"]{
	display:none !important;
	visibility:hidden !important;
	height:0 !important;
	width:0 !important;
	max-width:0 !important;
	overflow:hidden !important;
	margin:0 !important;
	padding:0 !important;
	font-size:0 !important;
	line-height:0 !important;
	color:transparent !important;
}
/* Replace ugly "Archives: Services" title */
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section) > h1,
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section) .wp-block-query-title{
	color:transparent !important;
	font-size:0 !important;
	line-height:0 !important;
	margin:0 0 1.25rem !important;
	max-width:640px !important;
	text-align:left !important;
}
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section) > h1::before,
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section) .wp-block-query-title::before{
	content:"Our Services";
	display:block;
	color:#fff !important;
	font-weight:500 !important;
	font-size:clamp(2.5rem, 5vw, 3.5rem) !important;
	line-height:1.15 !important;
	letter-spacing:normal;
	text-transform:none;
}
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section) > h1::after,
body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section) .wp-block-query-title::after{
	content:"";
	display:block;
	width:64px;
	height:2px;
	margin:1.15rem 0 0;
	background:var(--henna-gold);
}

/* Query under hero */
body.post-type-archive-henna_service #main > .wp-block-query{
	width:100% !important;
	max-width:none !important;
	margin:0 !important;
	padding:4.5rem clamp(1.25rem, 4vw, 2.5rem) !important;
	background:#f7f1e6 !important;
	box-sizing:border-box;
}

@media (max-width:1024px){
	body.post-type-archive-henna_service .henna-services-archive-grid,
	body.post-type-archive-henna_service .wp-block-post-template.is-layout-grid{
		grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width:768px){
	body.post-type-archive-henna_service .henna-services-hero.wp-block-cover .wp-block-cover__image-background{
		display:none !important;
	}
	body.post-type-archive-henna_service .henna-services-hero.wp-block-cover,
	body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section){
		min-height:auto !important;
		padding:2.5rem 1.25rem !important;
		background-image:
			linear-gradient(rgba(11,26,18,.55), rgba(11,26,18,.55)),
			url('../images/HeroMob.jpeg') !important;
		background-size:cover !important;
		background-position:center !important;
	}
	body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section) > h1::before,
	body.post-type-archive-henna_service #main > .wp-block-group.has-global-padding:not(.henna-services-page):not(.henna-services-archive-section):not(.henna-section) .wp-block-query-title::before{
		font-size:clamp(1.85rem, 8vw, 2.75rem) !important;
	}
	body.post-type-archive-henna_service .henna-services-archive-grid,
	body.post-type-archive-henna_service .wp-block-post-template.is-layout-grid{
		grid-template-columns:1fr !important;
	}
}

/* ---------- Hero, full-bleed variant: phones ----------
   Everything that matters has to survive a 375px-wide, 667px-tall screen:
   headline, one clear promise, a full-width booking button, and the four
   reassurance items. Nothing is hidden, the type just gets tighter. */
@media (max-width: 768px) {
	/* The theme swaps in a portrait crop for phones. Keep that, but let it
	   fill the frame properly instead of the old 155% left-aligned crop. */
	.henna-hero--full.wp-block-cover {
		background-size: cover !important;
		background-position: 50% 18% !important;
	}

	.henna-hero--full .henna-hero__eyebrow {
		font-size: 0.7rem !important;
		letter-spacing: 0.2em !important;
		margin-bottom: 1.3rem !important;
	}
	.henna-hero--full .henna-hero__eyebrow::after {
		width: 1.75rem;
	}

	.henna-hero--full .henna-hero__title {
		font-size: clamp(1.65rem, min(7.8vw, 4.3vh), 2.2rem) !important;
		line-height: 1.2 !important;
		margin-bottom: 1.3rem !important;
	}

	.henna-hero--full .henna-hero__sub {
		font-size: clamp(0.85rem, 1.65vh, 0.94rem) !important;
		line-height: 1.75 !important;
		margin-bottom: 2rem !important;
		max-width: 100%;
		color: #E6DCC8 !important;
	}


	.henna-hero--full > .wp-block-cover__inner-container {
		gap: 2.2rem;
	}
	.henna-hero--full {
		padding-left: 1.4rem !important;
		padding-right: 1.4rem !important;
	}
	.henna-hero--full .henna-hero__copy {
		max-width: 33rem;
	}

	/* Booking button full width and thumb-sized; WhatsApp sits under it,
	   still obvious but visibly second. */
	.henna-hero--full .henna-hero__actions {
		gap: 0.6rem;
	}
	.henna-hero--full .henna-hero__actions .wp-block-button__link {
		padding-top: 0.95rem !important;
		padding-bottom: 0.95rem !important;
		font-size: 0.78rem !important;
		min-height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Reassurance stacked down the left, social in the space beside it. */
	.henna-trust-strip--in-hero {
		padding-top: 1.5rem !important;
		padding-bottom: 0.6rem !important;
	}
	/* A clean two-by-two matrix. Icon, then a single short line each — the
	   second line was repeating what the label already said. */
	.henna-trust-strip__row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: center;
		gap: 1.3rem 0.75rem;
		padding-right: 0;
		margin: 0 !important;
	}
	.henna-trust-strip__row .wp-block-column {
		flex: none !important;
		max-width: 100% !important;
		width: 100% !important;
		border-left: 0;
		padding-left: 0;
		margin: 0 !important;
	}
	.henna-trust-strip__row .henna-trust-item {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.4rem;
	}
	.henna-trust-strip__row .wp-block-column p:last-child {
		display: block;
		font-size: 0.76rem !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		color: #FBF6EC !important;
		margin-top: 0.1rem !important;
	}
	.henna-trust-strip__row .henna-trust-item__icon img {
		width: 24px;
		height: 24px;
		opacity: 0.9;
	}
	.henna-trust-strip__row p {
		font-size: 0.72rem !important;
		letter-spacing: 0.11em !important;
		color: #E8DCC4 !important;
		white-space: normal;
	}

	/* Block layout, not flex: the logo centres on its own and the menu button
	   is taken out of the flow entirely so it cannot shift it. */
	.site-header--centred {
		display: block !important;
		position: relative;
		padding-top: 14px !important;
		padding-bottom: 14px !important;
		min-height: 76px;
		text-align: center;
	}
	.site-header--centred .site-header__logo {
		margin: 0 auto !important;
		display: block !important;
		width: 100%;
	}
	.site-header--centred .site-header__logo a {
		display: inline-block !important;
		margin: 0 auto;
	}
	.site-header--centred .site-header__nav {
		position: static !important;
		margin: 0 !important;
	}
	/* Menu on the left, social on the right, logo centred between them. */
	.site-header--centred .wp-block-navigation__responsive-container-open:not(.always-shown) {
		position: absolute !important;
		top: 50% !important;
		transform: translateY(-50%);
		left: 1rem !important;
		right: auto !important;
		margin: 0 !important;
		color: var(--wp--preset--color--gold);
		width: 42px;
		height: 42px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(201, 161, 90, 0.4);
		border-radius: 4px;
		background: rgba(201, 161, 90, 0.06);
	}
	/* Desktop keeps the social icons in the header; phones and tablets do not.
	   They compete with the booking button and send people away from it. */
	.site-header--centred .site-header__social {
		display: none !important;
	}
	.site-header--centred .henna-social-links {
		gap: 0.35rem;
	}
	.site-header--centred .henna-social-links__item a {
		width: 30px;
		height: 30px;
	}
	.site-header--centred .henna-social-links__item a svg {
		width: 14px;
		height: 14px;
	}
	.site-header--centred .site-header__logo img {
		max-height: 64px;
	}
	.henna-announce {
		padding: 0.45rem 1rem;
	}
	.henna-announce__text {
		font-size: 0.72rem !important;
	}
}

/* Short phones (SE, older Androids): trim the paragraph rather than let the
   trust strip fall off the bottom. */
@media (max-width: 768px) and (max-height: 700px) {

	.henna-hero--full .henna-hero__title {
		font-size: clamp(1.7rem, 8vw, 2.1rem) !important;
	}
}

/* ---------- Photo carousel: coverflow ----------
   The centred photograph sits forward and square on; the rest fan away in 3D
   on both sides. Slides are absolutely positioned and the script sets a
   --offset on each one, so the whole arrangement is driven by a single number
   per slide and loops in both directions. */
/* The outer slides fan well past the container edge. Without clipping, that
   width becomes real page width and the whole site can be dragged sideways. */
.henna-carousel {
	position: relative;
	perspective: 1400px;
	padding: 0 clamp(1rem, 3vw, 2.5rem);
	overflow: hidden;
	max-width: 100%;
}
.henna-carousel__track {
	cursor: grab;
	touch-action: pan-y;
}
.henna-carousel__track {
	position: relative;
	display: block;
	max-width: 100%;
	height: clamp(320px, 34vw, 460px);
	margin: 0;
	padding: 0;
	list-style: none;
	transform-style: preserve-3d;
}
.henna-carousel__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 8px;
	border-radius: 12px;
}
.henna-carousel__slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: clamp(210px, 22vw, 300px);
	height: 100%;
	margin: 0;
	transform-origin: center center;
	transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 520ms ease, filter 520ms ease;
	will-change: transform;
	cursor: pointer;
}
.henna-carousel__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(18, 42, 32, 0.35);
}

/* Before the script runs, show them in a plain row so the section is never
   an empty box. */
html:not(.henna-js) .henna-carousel__track {
	display: flex;
	gap: 8px;
	height: auto;
	overflow-x: auto;
}
html:not(.henna-js) .henna-carousel__slide {
	position: static;
	flex: 0 0 32%;
	height: clamp(300px, 30vw, 430px);
	transform: none;
}
html:not(.henna-js) @media (max-width: 700px) {
	.henna-carousel {
		padding: 0 1rem;
	}
	.henna-carousel__track {
		height: 340px;
	}
	.henna-carousel__slide {
		width: 62%;
	}
}

/* Reduced motion: no 3D, no sliding — a plain scrollable row. */
.henna-reduced-motion .henna-carousel__track {
	display: flex;
	gap: 8px;
	height: auto;
	overflow-x: auto;
}
.henna-reduced-motion .henna-carousel__slide {
	position: static;
	flex: 0 0 32%;
	height: clamp(300px, 30vw, 430px);
	transform: none !important;
	opacity: 1 !important;
}

/* ---------- Services section: button and carousel spacing ----------
   On phones the two columns stack, so the button and the carousel end up
   directly on top of each other. Centre the button and give the carousel room
   to breathe on both sides. */
.henna-view-services-btn {
	justify-content: flex-start;
}
.henna-occasion-photos-col .henna-carousel {
	margin-top: 0;
}

@media (max-width: 900px) {
	.henna-view-services-btn {
		justify-content: center !important;
		margin-top: 2rem !important;
		margin-bottom: 0 !important;
	}
	.henna-view-services-btn .wp-block-button__link {
		padding-left: 2.4rem;
		padding-right: 2.4rem;
	}
	.henna-occasion-photos-col {
		margin-top: 3.25rem !important;
	}
	.henna-occasion-photos-col .henna-carousel {
		margin-bottom: 1.5rem;
	}
}

/* ---------- Inner page hero (About, Contact, location pages) ----------
   Same treatment as the homepage hero but shorter, since these pages need to
   get to the content quickly rather than hold the whole screen. */
.henna-page-hero {
	display: flex !important;
	align-items: center !important;
	position: relative;
}
.henna-page-hero .wp-block-cover__image-background {
	object-position: 70% center;
}
.henna-page-hero .wp-block-cover__background {
	background: linear-gradient(
		100deg,
		rgba(6, 18, 14, 0.94) 0%,
		rgba(6, 18, 14, 0.82) 38%,
		rgba(6, 18, 14, 0.4) 66%,
		rgba(6, 18, 14, 0.15) 100%
	) !important;
}
.henna-page-hero__copy {
	margin-right: auto;
}
.henna-page-hero__title {
	text-wrap: balance;
}

/* -------------------------------------------------------------------------
   About hero — flat green, no photograph.

   Plain colour rather than an image, so nothing competes with the headline and
   the page costs nothing to load. The mehndi pattern the other green bands
   carry is turned off here on purpose: this one is the first thing on the page
   and reads better empty.
   ---------------------------------------------------------------------- */
.henna-about-hero {
	display: flex;
	align-items: center;
	min-height: 42svh;
}

/* The pattern this hero uses is now what every green band uses — see the
   mehndi background rules further down. Nothing to override here. */

/* Copy sits left rather than centred. The inner group is constrained, so
   killing the auto left margin is what pushes it over. */
.henna-about-hero__copy {
	margin-left: 0;
	margin-right: auto;
}

.henna-about-hero__copy > * {
	margin-left: 0;
	margin-right: auto;
}

@media (max-width: 782px) {
	.henna-about-hero {
		min-height: 0;
	}
}

@media (max-width: 900px) {
	.henna-page-hero .wp-block-cover__background {
		background: linear-gradient(
			to top,
			rgba(6, 18, 14, 0.96) 0%,
			rgba(6, 18, 14, 0.88) 45%,
			rgba(6, 18, 14, 0.55) 100%
		) !important;
	}
	.henna-about-vision__row {
		gap: 2.5rem;
	}
	.henna-about-image img {
		height: 300px;
	}
}

@media (max-width: 600px) {
	.henna-about-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.henna-about-cta__actions .wp-block-button,
	.henna-about-cta__actions .wp-block-button__link {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

/* ---------- About page ---------- */
.henna-about-statement {
	position: relative;
	padding-left: 1.5rem;
	border-left: 3px solid var(--wp--preset--color--gold);
}
.henna-about-pullquote {
	padding-left: 1.25rem;
	border-left: 2px solid var(--wp--preset--color--gold);
}

/* Three photographs interlocked: one tall on the left, two stacked on the
   right. Gives the intro some depth without needing a single hero-quality
   image. */
.henna-about-mosaic {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: repeat(2, 1fr);
	gap: 12px;
	height: clamp(380px, 40vw, 520px);
}
.henna-about-mosaic figure {
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
}
.henna-about-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.henna-about-mosaic__tall {
	grid-row: 1 / span 2;
}

.henna-about-image img {
	width: 100%;
	height: clamp(340px, 40vw, 500px);
	object-fit: cover;
	border-radius: 14px;
}

/* Numbered steps on the dark band */
.henna-about-steps__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.henna-about-steps__item {
	padding-top: 1.4rem;
	border-top: 1px solid rgba(201, 161, 90, 0.35);
}
.henna-about-steps__num {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.6rem;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.6rem;
}
.henna-about-steps__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	font-weight: 400;
	color: #ffffff;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}
.henna-about-steps__text {
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--wp--preset--color--beige);
	margin: 0;
}

/* Occasion cards: photograph with the label sitting on a dark foot */
.henna-about-occasions__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.henna-about-occasion {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
}
.henna-about-occasion img {
	display: block;
	width: 100%;
	height: clamp(280px, 26vw, 360px);
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.henna-about-occasion:hover img {
	transform: scale(1.05);
}
.henna-about-occasion figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2.5rem 1rem 1rem;
	background: linear-gradient(to top, rgba(6, 18, 14, 0.92), rgba(6, 18, 14, 0));
	color: var(--wp--preset--color--cream);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-align: center;
}

/* Four small photographs beside the gallery invitation */
.henna-about-proof__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.henna-about-proof__grid figure {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
}
.henna-about-proof__grid img {
	display: block;
	width: 100%;
	height: clamp(150px, 15vw, 210px);
	object-fit: cover;
}

.henna-about-cta__actions {
	gap: 0.9rem;
}

@media (max-width: 1024px) {
	.henna-about-steps__list,
	.henna-about-occasions__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.henna-about-intro__row,
	.henna-about-vision__row,
	.henna-about-proof__row {
		gap: 2.5rem;
	}
	.henna-about-mosaic {
		height: 340px;
	}
	.henna-about-image img {
		height: 300px;
	}
	/* Photograph first on a phone: it explains the page faster than the words. */
	.henna-about-intro__row {
		flex-direction: column-reverse;
	}
	.henna-about-statement {
		padding-left: 1.1rem;
	}
	.henna-about-gallery-btn {
		justify-content: center !important;
	}
}

@media (max-width: 600px) {
	.henna-about-steps__list {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.henna-about-occasions__grid {
		gap: 12px;
	}
	.henna-about-occasion img {
		height: 210px;
	}
	.henna-about-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.henna-about-cta__actions .wp-block-button,
	.henna-about-cta__actions .wp-block-button__link {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}


/* ---------- Horizontal overflow guard ----------
   Full-bleed sections, 3D transforms and wide grids can each add a few pixels
   past the viewport, which on a phone shows as white bands at the edges and a
   page that slides sideways. Nothing on this site is meant to scroll
   horizontally, so clip it at the root. `clip` rather than `hidden` because
   `hidden` on the root would break sticky positioning. */
html {
	overflow-x: clip;
	max-width: 100%;
}
body {
	overflow-x: clip;
	max-width: 100vw;
}
.wp-site-blocks,
.wp-site-blocks > * {
	max-width: 100%;
}
img,
video,
iframe {
	max-width: 100%;
}

/* ---------- Mehndi ornament ----------
   Two original SVG drawings, both in the palette's gold:

   • border  — a dense vertical panel of mandalas, paisley pairs, a lotus and
     scallop bands, repeating down the left and right margins. This is where
     the empty space actually is on a wide screen, so the ornament fills it
     without ever crossing the text.
   • tile    — the looser scattered motif, used faintly across the middle.

   Drawn rather than licensed: about 4KB each, sharp at any zoom, and recoloured
   by editing one value. */
section.has-cream-background-color,
section.has-beige-background-color,
.wp-block-group.has-cream-background-color,
.wp-block-group.has-beige-background-color,
.henna-pattern {
	background-image: url("../images/pattern-mehndi-border.svg"), url("../images/pattern-mehndi-border.svg"), url("../images/pattern-mehndi-cream.svg");
	background-position: left -30px top, right -30px top, 0 0;
	background-repeat: repeat-y, repeat-y, repeat;
	background-size: 154px auto, 154px auto, 480px 480px;
}

/*
 * The green bands are lighter-handed than the cream ones: one ornament column
 * instead of two, and the scatter tile stretched from 480px to 720px.
 *
 * Two columns plus a dense scatter is a lot of movement behind pale text, and
 * on a dark background the gold lines read far stronger than the same drawing
 * does on cream. Keeping a single column on the right — the side copy rarely
 * occupies — gives the ornament somewhere to live without crowding the words.
 */
section.has-deep-green-background-color,
.wp-block-group.has-deep-green-background-color,
.henna-pattern--dark {
	background-image: url("../images/pattern-mehndi-border-dark.svg"), url("../images/pattern-mehndi-dark.svg");
	background-position: right -40px top, 0 0;
	background-repeat: repeat-y, repeat;
	background-size: 150px auto, 720px 720px;
}

/* Below this the margins disappear, so the side panels would run under the
   text. Drop them and keep only the faint scatter.

   The sizes are restated rather than inherited: with three sizes listed and
   only one image left, a browser takes the *first* value — so the scatter was
   being drawn at 154px, packing it far tighter here than on desktop. */
@media (max-width: 1180px) {
	section.has-cream-background-color,
	section.has-beige-background-color,
	.wp-block-group.has-cream-background-color,
	.wp-block-group.has-beige-background-color,
	.henna-pattern {
		background-image: url("../images/pattern-mehndi-cream.svg");
		background-position: 0 0;
		background-repeat: repeat;
		background-size: 480px 480px;
	}
	section.has-deep-green-background-color,
	.wp-block-group.has-deep-green-background-color,
	.henna-pattern--dark {
		background-image: url("../images/pattern-mehndi-dark.svg");
		background-position: 0 0;
		background-repeat: repeat;
		background-size: 560px 560px;
	}
}

@media (max-width: 700px) {
	section.has-cream-background-color,
	section.has-beige-background-color,
	.wp-block-group.has-cream-background-color,
	.wp-block-group.has-beige-background-color,
	section.has-deep-green-background-color,
	.wp-block-group.has-deep-green-background-color,
	.henna-pattern {
		background-size: 300px 300px;
	}
}

/* Places that already carry enough detail. */
.site-footer,
.site-header,
.henna-announce,
.henna-hero,
.henna-page-hero,
.henna-services-band,
.wp-block-button,
.wp-block-buttons,
.henna-carousel {
	background-image: none !important;
}

/* ---------- Services as a branching vine ----------
   A gold stem runs down the middle of a dark band; each service hangs off it
   on alternating sides, connected by a curved branch, and every item in that
   service is a leaf on the branch. All five stay visible — nothing is hidden
   behind a click. */
.henna-branch {
	position: relative;
	/* Enough head room that the wreath is fully visible before the first card
	   reaches it — it was being clipped by the top card. */
	padding: clamp(9rem, 14vw, 13rem) 0 clamp(2rem, 5vw, 4rem);
	color: var(--wp--preset--color--cream);
}

/* The stem itself, drawn as a repeating vine rather than a plain rule. */
/* The client's own vine artwork, keyed off its checkerboard and split in two:
   the HA wreath crowns the column once, and only the vine below it repeats.
   Repeating the whole drawing meant the monogram appeared five times down the
   page. */
.henna-branch__vine {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 190px;
	transform: translateX(-50%);
	background-image: url("../images/vine-tile.png");
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 190px auto;
	pointer-events: none;
	opacity: 0.95;
}

.henna-branch__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

.henna-branch__item {
	position: relative;
	display: flex;
	width: 50%;
}
.henna-branch__item--left {
	justify-content: flex-end;
	padding-right: clamp(3rem, 5vw, 5rem);
}
.henna-branch__item--right {
	margin-left: 50%;
	justify-content: flex-start;
	padding-left: clamp(3rem, 5vw, 5rem);
}

/* Branch reaching from the stem to the card, curving as a real one would. */
.henna-branch__stem {
	position: absolute;
	top: 3.25rem;
	width: clamp(3rem, 5vw, 5rem);
	height: 3.5rem;
	border-color: rgba(201, 161, 90, 0.65);
	border-style: solid;
	pointer-events: none;
}
.henna-branch__item--left .henna-branch__stem {
	right: 0;
	border-width: 0 0 1.5px 0;
	border-bottom-right-radius: 0;
}
.henna-branch__item--left .henna-branch__stem {
	border-width: 0 1.5px 1.5px 0;
	border-top-right-radius: 26px;
	top: 1.4rem;
}
.henna-branch__item--right .henna-branch__stem {
	left: 0;
	border-width: 0 0 1.5px 1.5px;
	border-top-left-radius: 26px;
	top: 1.4rem;
}

/* The bud where branch meets stem. */
.henna-branch__node {
	position: absolute;
	top: 1.15rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 4px rgba(201, 161, 90, 0.18);
}
.henna-branch__item--left .henna-branch__node {
	right: -4.5px;
}
.henna-branch__item--right .henna-branch__node {
	left: -4.5px;
}

/* --- the card --- */
.henna-branch__card {
	position: relative;
	width: 100%;
	max-width: 430px;
	padding: clamp(2rem, 3vw, 2.75rem) clamp(1.8rem, 2.6vw, 2.4rem);
	background: rgba(8, 22, 17, 0.55);
	color: var(--wp--preset--color--gold);
	transition: background 300ms ease, transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.henna-branch__card:hover {
	background: rgba(8, 22, 17, 0.78);
	transform: translateY(-4px);
}
/* Double-line plaque with notched corners, drawn once as SVG and stretched to
   whatever size the card ends up. border-image keeps the corner ornament crisp
   while the straight edges scale. */
.henna-branch__frame {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 26px solid transparent;
	border-image-source: url("../images/frame-plaque.svg");
	border-image-slice: 60 fill;
	border-image-width: 26px;
	border-image-repeat: stretch;
	opacity: 0.9;
	transition: opacity 300ms ease;
}
.henna-branch__card:hover .henna-branch__frame {
	opacity: 1;
}
/* Notched corner flourishes, the detail that makes the frame read as drawn
   rather than as a plain box. */
.henna-branch__corner {
	position: absolute;
	line-height: 0;
	color: var(--wp--preset--color--gold);
	opacity: 0.9;
	pointer-events: none;
}
.henna-branch__corner--tl { top: -1px; left: -1px; }
.henna-branch__corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.henna-branch__corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.henna-branch__corner--br { bottom: -1px; right: -1px; transform: scale(-1); }

.henna-branch__head {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
}
.henna-branch__num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gold);
	opacity: 0.85;
}
.henna-branch__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.4rem, 2vw, 1.85rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--gold-light);
}
.henna-branch__blurb {
	margin: 0 0 1.15rem;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--wp--preset--color--beige);
	max-width: 38ch;
}

/* Every item is a leaf. */
.henna-branch__leaves {
	list-style: none;
	margin: 0 0 1.3rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem 1.1rem;
}
.henna-branch__leaves li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.88rem;
	color: var(--wp--preset--color--cream);
}
.henna-branch__leaf {
	flex: 0 0 auto;
	color: var(--wp--preset--color--gold);
	opacity: 0.75;
	transition: opacity 220ms ease, transform 320ms ease;
}
.henna-branch__leaves li:hover .henna-branch__leaf {
	opacity: 1;
	transform: rotate(-12deg);
}

.henna-branch__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(201, 161, 90, 0.5);
	transition: color 200ms ease, border-color 200ms ease, gap 200ms ease;
}
.henna-branch__link:hover,
.henna-branch__link:focus-visible {
	color: var(--wp--preset--color--gold-light);
	border-color: var(--wp--preset--color--gold-light);
	gap: 0.65rem;
}

/* --- phones and tablets: stem to the left, everything hanging off one side --- */
@media (max-width: 900px) {
	.henna-branch__vine {
		left: 22px;
		transform: none;
		width: 60px;
		background-size: 60px 300px;
	}
	.henna-branch__list {
		gap: 2rem;
	}
	.henna-branch__item,
	.henna-branch__item--left,
	.henna-branch__item--right {
		box-sizing: border-box;
		width: 100%;
		margin-left: 0;
		justify-content: flex-start;
		padding-left: 3.25rem;
		padding-right: 1.5rem;
	}
	.henna-branch__item--left .henna-branch__stem,
	.henna-branch__item--right .henna-branch__stem {
		left: 22px;
		right: auto;
		width: 2rem;
		height: 2.4rem;
		top: 1rem;
		border-width: 0 0 1.5px 1.5px;
		border-top-left-radius: 18px;
		border-top-right-radius: 0;
	}
	.henna-branch__item--left .henna-branch__node,
	.henna-branch__item--right .henna-branch__node {
		left: 17.5px;
		right: auto;
		top: 0.85rem;
	}
	.henna-branch__card {
		max-width: none;
	}
	.henna-branch__leaves {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.45rem 0.8rem;
	}
	.henna-branch__leaves li {
		font-size: 0.8rem;
	}
	.henna-branch__corner svg {
		width: 30px;
		height: 30px;
	}
}

@media (max-width: 560px) {
	.henna-branch__leaves {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Headings and the intro line inside the services band sit on dark now. */
.henna-services-band .section-title,
.henna-services-band h2 {
	color: var(--wp--preset--color--gold-light) !important;
}
.henna-services-band .section-title .flourish {
	color: var(--wp--preset--color--gold) !important;
}
.henna-services-band p {
	color: var(--wp--preset--color--beige) !important;
}
.henna-services-band .top-rule {
	display: none !important;
}

/* Plain deep-green ground for the services band: the vine and the plaques are
   the only ornament, as in the reference. */
.henna-services-band {
	background-color: var(--wp--preset--color--deep-green) !important;
}
.henna-branch__frame {
	filter: drop-shadow(0 0 6px rgba(201, 161, 90, 0.12));
}
@media (max-width: 900px) {
	.henna-branch__vine {
		width: 118px;
		left: -30px;
		transform: none;
		background-image: url("../images/vine-tile.png");
		background-repeat: repeat-y;
		background-position: left top;
		background-size: 118px auto;
		opacity: 0.28;
	}
	.henna-branch__frame {
		border-width: 18px;
		border-image-width: 18px;
	}
	.henna-branch__card {
		padding: 1.6rem 1.4rem;
	}
}

/* ---------- Services band: phones ----------
   The wreath moves out of the column and sits above the cards as a crown, so
   it is seen at full size instead of being clipped by the screen edge. */
.henna-branch__crown {
	display: none;
}

@media (max-width: 900px) {
	.henna-branch {
		padding-top: 2.25rem;
	}
	.henna-branch__crown {
		display: none !important;
	}

	/* Cards sit clear of the watermark vine rather than on top of it. */
	.henna-branch__item,
	.henna-branch__item--left,
	.henna-branch__item--right {
		padding-left: 2.5rem;
	}
	.henna-branch__item--left .henna-branch__stem,
	.henna-branch__item--right .henna-branch__stem {
		left: 8px;
		width: 1.5rem;
	}
	.henna-branch__item--left .henna-branch__node,
	.henna-branch__item--right .henna-branch__node {
		left: 3.5px;
	}

	/* The plaque needs a little more room at small sizes or the notched corners
	   crowd the first line of text. */
	.henna-branch__card {
		padding: 1.75rem 1.35rem 1.5rem;
	}
	.henna-branch__frame {
		border-width: 20px;
		border-image-width: 20px;
	}
	.henna-branch__title {
		font-size: 1.25rem;
	}
	.henna-branch__blurb {
		font-size: 0.9rem;
		margin-bottom: 1rem;
	}
	.henna-branch__leaves li {
		font-size: 0.82rem;
	}
	.henna-branch__leaf {
		width: 18px;
		height: 12px;
	}
}

@media (max-width: 560px) {
	.henna-branch__vine {
		width: 96px;
		background-size: 96px auto;
		left: -34px;
		opacity: 0.22;
	}
	.henna-branch__item,
	.henna-branch__item--left,
	.henna-branch__item--right {
		padding-left: 1.9rem;
	}
	.henna-branch__card {
		padding: 1.6rem 1.15rem 1.35rem;
	}
	.henna-branch__frame {
		border-width: 16px;
		border-image-width: 16px;
	}
	.henna-branch__crown {
		width: 112px;
		margin-bottom: 1.75rem;
	}
}



/* ---------- Services cards ----------
   Desktop is unchanged: every card open, nothing to click.
   Phones collapse to the title alone and open on tap, so five services read as
   a short list instead of a very long scroll. */
.henna-branch__toggle {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	text-align: left;
	color: inherit;
	font: inherit;
	cursor: default;
}
.henna-branch__chev {
	display: none;
}

@media (max-width: 900px) {
	.henna-branch__toggle {
		cursor: pointer;
		min-height: 44px;
	}
	.henna-branch__head {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		margin-bottom: 0;
		transition: margin-bottom 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.henna-branch__title {
		flex: 1 1 auto;
	}
	.henna-branch__chev {
		display: block;
		flex: 0 0 auto;
		color: var(--wp--preset--color--gold);
		transition: transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	/* 0fr → 1fr animates the height without measuring anything. */
	.henna-branch__reveal {
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;
		transition: grid-template-rows 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
			opacity 260ms ease;
	}
	.henna-branch__revealinner {
		overflow: hidden;
		min-height: 0;
	}

	.henna-branch__item.is-open .henna-branch__reveal {
		grid-template-rows: 1fr;
		opacity: 1;
	}
	.henna-branch__item.is-open .henna-branch__head {
		margin-bottom: 0.9rem;
	}
	.henna-branch__item.is-open .henna-branch__chev {
		transform: rotate(180deg);
	}

	/* Compact card at rest */
	.henna-branch__card {
		padding: 1.15rem 1.15rem 1.2rem;
		transition: padding 340ms cubic-bezier(0.22, 0.61, 0.36, 1),
			background 300ms ease;
	}
	.henna-branch__item.is-open .henna-branch__card {
		padding: 1.5rem 1.25rem 1.4rem;
		background: rgba(8, 22, 17, 0.8);
	}
	.henna-branch__list {
		gap: 1.1rem;
	}
	.henna-branch__title {
		font-size: 1.15rem;
	}

	/* Ornate frame needs a little more inset at this size so the corner
	   flourishes sit outside the text rather than over it. */
	.henna-branch__frame {
		border-width: 24px;
		border-image-width: 24px;
	}

	/* No JavaScript: everything stays open rather than unreachable. */
	html:not(.henna-js) .henna-branch__reveal {
		grid-template-rows: 1fr;
		opacity: 1;
	}
	html:not(.henna-js) .henna-branch__chev {
		display: none;
	}
	}
}

/* FAQ Styling */
.henna-pricing-card.is-faq-card {
    padding: 1.2rem 1.8rem;
}

.henna-faq-item {
    color: var(--wp--preset--color--beige);
    border-bottom: 1px solid rgba(201, 164, 76, 0.2);
    padding: 0.8rem 0;
    position: relative;
    margin-bottom: 0;
}
.henna-faq-item:last-child {
    border-bottom: none;
}
.henna-faq-item summary {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.1rem;
    color: var(--wp--preset--color--gold-light);
    cursor: pointer;
    list-style: none;
    position: relative;
    z-index: 2;
    padding-right: 2rem;
    font-weight: 500;
}
.henna-faq-item summary::-webkit-details-marker {
  display: none;
}
.henna-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wp--preset--color--gold);
    font-size: 1.4rem;
}
.henna-faq-item[open] summary::after {
    content: '−';
}
.henna-faq-item p {
    margin-top: 0.75rem;
    color: var(--wp--preset--color--beige);
    position: relative;
    z-index: 2;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* ---------- Sand background ----------
   A warmer, deeper beige than the page cream, used on the services intro and
   the reviews block so those two sections sit forward of the rest. The mehndi
   pattern still paints over it. */
:root {
	--henna-sand: #EFE3D4;
}

#services.wp-block-group,
#services.wp-block-group.has-cream-background-color,
.henna-testimonials-section {
	background-color: var(--henna-sand) !important;
}

/* ---------- Client Love review card (hcl) ----------
   Exact rebuild of the original site's testimonial block: one wide card,
   photo on the left with a circular badge tucked into its lower-left corner,
   copy on the right, carousel dots centred beneath. */
.hcl {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: clamp(1.8rem, 2vw, 2rem) clamp(2rem, 2.3vw, 2.3rem) clamp(1.5rem, 1.7vw, 1.7rem);
	background: rgba(22, 36, 29, 0.95);
	color: var(--wp--preset--color--gold);
	border: none;
	border-radius: 12px;
	box-sizing: border-box;
	overflow: visible;
}

.hcl.hcl {
	max-width: min(1505px, 92vw);
	margin-inline: auto;
}

/* Ornate gold frame overlay - same plaque used on the pricing boxes. */
.hcl::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 28px solid transparent;
	border-image-source: url("../images/frame-plaque-bold.svg");
	border-image-slice: 60;
	border-image-width: 28px;
	border-image-repeat: stretch;
	opacity: 1;
	z-index: 3;
}

.hcl__viewport {
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.hcl__track {
	display: flex;
	align-items: stretch;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

html.henna-reduced-motion .hcl__track {
	transition: none;
}

.hcl__slide {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 23%) minmax(0, 1fr);
	gap: clamp(1.3rem, 2.2vw, 2rem);
	align-items: center;
}

/* Without JS every slide is visible, stacked - still readable. */
html.henna-js .hcl__track > .hcl__slide { }

/* ----- photo ----- */
.hcl__media {
	position: relative;
	line-height: 0;
}

.hcl__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 8px;
}

.hcl__badge {
	position: absolute;
	left: 12px;
	bottom: 12px;
	width: 26%;
	max-width: 72px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 4px solid #FBF6EC;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hcl__badge img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ----- copy ----- */
.hcl__body {
	max-width: 560px;
	align-self: center;
	margin: 0 auto;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
}

.hcl__eyebrow {
	margin: 0 0 0.4rem;
	text-align: center;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-transform: uppercase;
	color: #C9A15A;
	line-height: 1.3;
}

.hcl__orn {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 20px;
	margin: 0 0 1rem;
}

.hcl__rule {
	display: block;
	width: 32px;
	height: 1px;
	background: #C9A15A;
}

.hcl__heart {
	display: block;
	font-size: 0.95rem;
	line-height: 1;
	color: #C9A15A;
	transform: translateY(-10px);
}

.hcl__quote {
	display: block;
	font-size: 1.5rem;
	line-height: 0.6;
	color: rgba(201, 161, 90, 0.75);
	margin: 0 auto 0.9rem;
}

.hcl__title {
	margin: 0 0 0.8rem;
	font-family: inherit;
	font-size: clamp(1.3rem, 1.9vw, 1.75rem);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: 0;
	color: #F7F1E6;
}

.hcl__text {
	margin: 0 auto 1.15rem;
	max-width: 30em;
	font-family: inherit;
	font-size: clamp(0.93rem, 1.05vw, 1rem);
	line-height: 1.7;
	color: rgba(247, 241, 230, 0.86);
}

.hcl__stars {
	margin: 0 0 0.55rem;
	font-size: 1.05rem;
	line-height: 1;
	letter-spacing: 0.12em;
	color: #C9A15A;
}

.hcl__name,
.hcl__meta {
	margin: 0;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.5;
}

.hcl__name {
	color: #F7F1E6;
}

.hcl__meta {
	color: #C9A15A;
}

/* ----- Google review link ----- */
.hcl__actions {
	display: flex;
	justify-content: center;
	margin-top: clamp(0.9rem, 1.3vw, 1.2rem);
	position: relative;
	z-index: 4;
}

.hcl__google {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.65rem 1.15rem;
	border: 1px solid rgba(201, 161, 90, 0.55);
	border-radius: 3px;
	background: rgba(201, 161, 90, 0.08);
	color: #F0E4CB;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	transition: background 250ms ease, border-color 250ms ease, color 250ms ease;
}

.hcl__google:hover,
.hcl__google:focus-visible {
	background: rgba(201, 161, 90, 0.2);
	border-color: #C9A15A;
	color: #FBF6EC;
}

.hcl__google-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #FBF6EC;
	flex: 0 0 auto;
}

.hcl__google-go {
	transition: transform 250ms ease;
}

.hcl__google:hover .hcl__google-go {
	transform: translateX(4px);
}

/* ----- dots ----- */
.hcl__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 13px;
	position: relative;
	z-index: 4;
}

.hcl__dot {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	padding: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(201, 161, 90, 0.4);
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.hcl__dot:hover {
	background: #C9A15A;
}

.hcl__dot.is-active {
	background: #C9A15A;
}

.hcl__dot:focus-visible {
	outline: 2px solid #C9A15A;
	outline-offset: 3px;
}

/* ----- responsive ----- */
@media (max-width: 1100px) {
	.hcl::before {
		border-width: 24px;
		border-image-width: 24px;
	}
	.hcl__slide {
		gap: 32px;
	}
	.hcl__body {
		max-width: none;
	}
}

@media (max-width: 860px) {
	.hcl {
		padding: 1.9rem 1.5rem 1.6rem;
		border-radius: 10px;
	}
	.hcl::before {
		border-width: 20px;
		border-image-width: 20px;
	}
	.hcl__slide {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.hcl__photo {
		aspect-ratio: 4 / 3;
	}
	.hcl__badge {
		width: 64px;
		left: 12px;
		bottom: 12px;
		border-width: 4px;
	}
	.hcl__google {
		font-size: 0.75rem;
		padding: 0.75rem 1.1rem;
		gap: 0.55rem;
	}
	.hcl__quote {
		font-size: 1.5rem;
	}
	.hcl__title {
		font-size: clamp(1.5rem, 6.2vw, 1.95rem);
	}
	.hcl__text {
		font-size: 1rem;
		margin-bottom: 1.5rem;
	}
}

/* ---------- Carousel inside the About "See the Work" column ----------
   Same coverflow as the homepage, but it lives in a half-width column here,
   so the stage is shorter and the slides narrower to suit. */
.henna-carousel--about {
	padding: 0;
}

.henna-carousel--about .henna-carousel__track {
	height: clamp(300px, 26vw, 400px);
}

.henna-carousel--about .henna-carousel__slide {
	width: clamp(180px, 15vw, 250px);
}

@media (max-width: 900px) {
	.henna-carousel--about .henna-carousel__track {
		height: 320px;
	}
	.henna-carousel--about .henna-carousel__slide {
		width: 58%;
	}
}

/* =================================================
   MOBILE HERO – Arch Layout (hmh-mobile)
   ================================================= */
.hmh-mobile {
	display: none;
}

@media (max-width: 768px) {
	.henna-hero--full {
		display: none !important;
	}

	.hmh-mobile {
		display: block;
		width: 100%;
		height: 100svh; /* Enforce strict one-screen layout */
		background: #0a1310;
		position: relative;
		overflow: hidden;
		padding-top: 60px; /* Reduced from 85px to pull everything closer to the logo */
	}

	/* Top Text */
	.hmh-top-text {
		text-align: center;
		padding: 0 5%;
		margin-bottom: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		position: relative;
		z-index: 2;
	}

	.hmh-headline {
		font-family: var(--wp--preset--font-family--heading, 'Playfair Display', serif);
		font-size: clamp(1.8rem, 8vw, 2.3rem);
		font-weight: 500;
		color: #f8f5ee;
		line-height: 1.15;
		margin: 0;
		text-align: center;
	}

	.hmh-headline em {
		font-style: italic;
		color: #c9a44c;
	}

	.hmh-sub {
		font-size: 0.9rem;
		color: #d1c8ba;
		line-height: 1.4;
		margin: 0;
		text-align: center;
	}

	/* Center Arch Image -> Changed to 2-Layer Pop-out Circle */
	.hmh-visual-wrapper {
		width: 100%;
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: center;
		height: 48vh; /* Fixed height container */
		min-height: 380px;
		margin-bottom: 20px;
	}

	.hmh-circle-layer {
		position: absolute;
		top: 0;
		width: 90%;
		max-width: 380px;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		border: 2px solid #c9a44c;
		overflow: hidden;
	}
	
	.hmh-circle-layer img {
		width: 100%;
		height: 135%; /* Stretch height to match the hand layer below */
		object-fit: cover;
		object-position: center top;
	}

	.hmh-hand-layer {
		position: absolute;
		top: 0;
		width: 90%;
		max-width: 380px;
		height: 135%; /* This layer extends downwards */
		clip-path: url(#hand-only-mask);
		-webkit-clip-path: url(#hand-only-mask);
	}

	.hmh-hand-layer img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}

	/* Bottom Content Area (Fixed to bottom of screen) */
	.hmh-bottom-content {
		position: absolute;
		bottom: 15px; /* Locked to the absolute bottom edge with small padding */
		left: 0;
		width: 100%;
		z-index: 3;
		padding: 0 5%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px; /* Tighter gap */
	}

	.hmh-horizontal-label {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		color: #c9a44c;
	}

	.hmh-asterisk {
		font-size: 1rem;
		line-height: 1;
	}

	.hmh-vt-text {
		font-size: 0.6rem;
		letter-spacing: 0.25em;
		text-transform: uppercase;
		font-weight: 500;
	}

	/* Google Badge - Made smaller to fit the frame safely */
	.hmh-badge-wrapper {
		margin-top: 0;
		display: flex;
		justify-content: center;
	}

	.hmh-google-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px; /* Reduced gap */
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 8px;
		padding: 0.4rem 0.8rem; /* Tighter padding */
		text-decoration: none;
		backdrop-filter: blur(5px);
	}

	.hmh-g-icon {
		font-family: Arial, sans-serif;
		font-size: 1.2rem; /* Smaller G logo */
		font-weight: 700;
		color: #4285F4;
		line-height: 1;
	}

	.hmh-g-right {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1px;
	}

	.hmh-g-score {
		font-size: 0.7rem;
		font-weight: 600;
		color: #fff;
	}

	.hmh-g-on {
		font-weight: 400;
		color: #a0a0a0;
		font-size: 0.6rem;
	}

	.hmh-g-stars {
		font-size: 0.65rem;
		color: #fbbc05;
		letter-spacing: 1px;
	}

	.hmh-g-count {
		color: #a0a0a0;
		font-size: 0.55rem;
		letter-spacing: 0;
		margin-left: 4px;
	}

	.hmh-g-link {
		font-size: 0.5rem;
		color: #8ab4f8;
		margin-top: 1px;
	}

	/* Bottom CTA */
	.hmh-cta-bar {
		display: block;
		width: 100%;
		max-width: 320px;
		background: #e4ddd3;
		border-radius: 8px;
		padding: 3px;
		text-decoration: none;
		box-shadow: 0 4px 15px rgba(0,0,0,0.5);
	}

	.hmh-cta-inner {
		border: 1px solid rgba(201, 164, 76, 0.6);
		border-radius: 6px;
		padding: 0.8rem; /* Tighter padding */
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
	}

	.hmh-cta-title {
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 0.15em;
		color: #1a1a1a;
	}

	.hmh-cta-sub {
		font-size: 0.7rem;
		color: #555;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
	}

	.hmh-cta-arrow {
		color: #c9a44c;
		font-size: 0.8rem;
	}

	/* Scroll hint */
	.hmh-scroll-hint {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		margin-top: 0;
	}

	.hmh-scroll-text {
		font-size: 0.5rem;
		letter-spacing: 0.25em;
		color: #999;
		text-transform: uppercase;
		font-weight: 500;
	}

	.hmh-scroll-arrow {
		font-size: 1.2rem;
		color: #c9a44c;
		line-height: 1;
		animation: hmh-bounce 2s infinite ease-in-out;
	}

	@keyframes hmh-bounce {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(5px); }
	}
}

/* =========================================================================
   Mobile hero — "Designed for You. Brought to You."
   Phones and small tablets only; the wide hero takes over from 901px up.
   ========================================================================= */
.hmh-mobile-new {
	display: none;
}

@media (max-width: 900px) {
	.henna-hero--full {
		display: none !important;
	}

	.hmh-mobile-new {
		display: block;
		width: 100%;
		box-sizing: border-box;
		margin: 0;
		padding: clamp(1.5rem, 4svh, 2.5rem) 5vw clamp(1.25rem, 3svh, 2rem);
		background: #09120F;
		text-align: center;
		overflow: hidden;
	}

	/* ----- headline ----- */
	.hmh-mn-text {
		margin-bottom: clamp(1rem, 2.5svh, 1.75rem);
	}

	.hmh-mn-title {
		margin: 0 0 0.5rem;
		color: #FFFFFF;
		font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
		font-size: clamp(1.9rem, 8.6vw, 2.6rem);
		font-weight: 400;
		line-height: 1.18;
	}

	.hmh-mn-title em {
		display: block;
		color: #D9B87C;
		font-style: italic;
	}

	.hmh-mn-sub {
		margin: 0;
		color: #E7E2D8;
		font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
		font-size: clamp(0.95rem, 4.2vw, 1.1rem);
		line-height: 1.4;
	}

	/* ----- arch image -----
	   The gold arch frame and the hand breaking past its base are painted into
	   the artwork itself, on a matching dark background. So this needs no
	   border and no offset: sizing it and centring it is the whole job. Any
	   frame added in CSS would double up, and positioning it absolutely made
	   it ride up over the headline. */
	.hmh-mn-image-wrapper {
		width: 100%;
		margin: 0 auto;
		line-height: 0;
		text-align: center;
	}

	.hmh-mn-image {
		display: inline-block;
		width: min(66vw, 310px);
		max-width: 100%;
		height: auto;
	}

	/* ----- lower block ----- */
	.hmh-mn-bottom {
		position: relative;
		z-index: 2;
		margin-top: clamp(0.25rem, 1svh, 0.75rem);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(0.7rem, 1.8svh, 1.1rem);
	}

	/* ----- Google badge ----- */
	.hmh-mn-google {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		width: 100%;
		max-width: 340px;
		padding: 0.8rem 1rem;
		border-radius: 8px;
		background: #1B211D;
		box-sizing: border-box;
		text-decoration: none;
	}

	.hmh-mn-g-icon {
		display: inline-flex;
		flex: 0 0 auto;
		width: 34px;
		height: 34px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #FFFFFF;
	}

	.hmh-mn-g-icon svg {
		width: 22px;
		height: 22px;
	}

	.hmh-mn-g-text {
		flex: 1 1 auto;
		text-align: left;
		font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
	}

	.hmh-mn-g-top {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin-bottom: 0.15rem;
	}

	.hmh-mn-g-brand {
		color: #FFFFFF;
		font-size: 1rem;
		font-weight: 600;
	}

	.hmh-mn-g-stars {
		color: #E8A020;
		font-size: 0.95rem;
		letter-spacing: 0.04em;
	}

	.hmh-mn-g-bot {
		display: flex;
		align-items: center;
		gap: 0.45rem;
		font-size: 0.78rem;
	}

	.hmh-mn-g-score {
		color: #FFFFFF;
		font-weight: 700;
	}

	.hmh-mn-g-pipe {
		color: rgba(255, 255, 255, 0.35);
	}

	.hmh-mn-g-desc {
		color: rgba(255, 255, 255, 0.75);
	}

	/* ----- gold CTA bar ----- */
	.hmh-mn-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		width: 100%;
		max-width: 340px;
		padding: 1rem 1.1rem;
		border-radius: 6px;
		background: #C9A15A;
		box-sizing: border-box;
		color: #14201A;
		text-decoration: none;
		font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
		font-size: clamp(0.95rem, 4.2vw, 1.1rem);
		font-weight: 700;
		line-height: 1;
		transition: background 250ms ease;
	}

	.hmh-mn-cta:hover,
	.hmh-mn-cta:focus-visible {
		background: #D9B87C;
	}

	.hmh-mn-cta-icon {
		font-size: 1.05em;
		line-height: 1;
	}

	.hmh-mn-trust-text {
		margin: 0;
		color: rgba(255, 255, 255, 0.82);
		font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
		font-size: clamp(0.75rem, 3.4vw, 0.9rem);
		line-height: 1.3;
	}

	.hmh-mn-shield {
		margin-right: 0.15rem;
	}

	/* ----- three trust icons ----- */
	.hmh-mn-icons {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.5rem;
		width: 100%;
		max-width: 340px;
		margin-top: clamp(0.3rem, 1svh, 0.8rem);
	}

	.hmh-mn-icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}

	.hmh-mn-icon-circle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: clamp(48px, 14vw, 60px);
		height: clamp(48px, 14vw, 60px);
		border: 1px solid rgba(201, 161, 90, 0.7);
		border-radius: 50%;
	}

	.hmh-mn-icon-circle img {
		width: 45%;
		height: auto;
	}

	.hmh-mn-icon-item p {
		margin: 0;
		color: rgba(255, 255, 255, 0.85);
		font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
		font-size: clamp(0.65rem, 3vw, 0.78rem);
		line-height: 1.35;
	}

	/* ----- scroll hint ----- */
	.hmh-mn-scroll {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.35rem;
		margin-top: clamp(0.5rem, 2svh, 1.25rem);
		color: rgba(255, 255, 255, 0.7);
		text-decoration: none;
	}

	.hmh-mn-scroll-flourish {
		width: 110px;
		height: auto;
		opacity: 0.9;
	}

	.hmh-mn-scroll p {
		margin: 0;
		font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
		font-size: 0.65rem;
		font-weight: 500;
		letter-spacing: 0.18em;
	}

	.hmh-mn-scroll-arrow {
		font-size: 0.9rem;
		line-height: 1;
		color: #C9A15A;
	}
}

/* =========================================================================
   Package quiz (hpq)
   Three questions, then a full prescription panel: price, ten detail rows,
   Choose button and the alternatives either side.
   ========================================================================= */
.hpq {
	--hpq-gold: #C9A15A;
	--hpq-gold-bright: #E4C888;
	--hpq-ink: #0B1512;
	position: relative;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.1rem, 5vw, 2rem);
	background:
		radial-gradient(ellipse at 50% 45%, rgba(30, 68, 54, 0.55) 0%, rgba(11, 21, 18, 0) 62%),
		#0B1512;
	text-align: center;
	overflow: hidden;
}

/* ----- intro ----- */
.hpq__heading {
	max-width: 16ch;
	margin: 0 auto 0.75rem;
	color: var(--hpq-gold);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: clamp(2rem, 7vw, 3.1rem);
	font-weight: 400;
	line-height: 1.14;
}

.hpq__subheading {
	margin: 0 auto clamp(1.5rem, 4vw, 2.25rem);
	max-width: 34ch;
	color: #F0E7D8;
	font-size: clamp(0.95rem, 2.4vw, 1.1rem);
	line-height: 1.45;
}

/* ----- progress track ----- */
.hpq__track {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0 auto clamp(1.5rem, 4vw, 2.25rem);
	padding: 0;
	list-style: none;
}

.hpq__track-step {
	display: flex;
	align-items: center;
}

.hpq__track-step + .hpq__track-step::before {
	content: '';
	display: block;
	width: clamp(46px, 14vw, 120px);
	height: 1px;
	background: rgba(201, 161, 90, 0.35);
}

.hpq__track-step.is-done + .hpq__track-step::before,
.hpq__track-step.is-current::before {
	background: var(--hpq-gold);
}

.hpq__track-num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(201, 161, 90, 0.4);
	border-radius: 50%;
	color: rgba(201, 161, 90, 0.6);
	font-size: 0.85rem;
	line-height: 1;
	transition: color 250ms ease, border-color 250ms ease;
}

.hpq__track-step.is-current .hpq__track-num {
	border-color: var(--hpq-gold);
	color: var(--hpq-gold);
}

.hpq__track-step.is-done .hpq__track-num {
	border-color: var(--hpq-gold);
	color: transparent;
	position: relative;
}

/* Completed steps become a tick rather than a number. */
.hpq__track-step.is-done .hpq__track-num::after {
	content: '';
	position: absolute;
	top: 44%;
	left: 50%;
	width: 11px;
	height: 6px;
	border-left: 1.6px solid var(--hpq-gold);
	border-bottom: 1.6px solid var(--hpq-gold);
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ----- card ----- */
.hpq__card {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.1rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2.25rem);
	border: 1px solid rgba(201, 161, 90, 0.55);
	border-radius: 18px;
	background: rgba(9, 20, 16, 0.75);
	box-sizing: border-box;
	animation: hpq-in 340ms ease both;
}

@keyframes hpq-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

html.henna-reduced-motion .hpq__card {
	animation: none;
}

/* Lotus ornament at the top of every card. */
.hpq__ornament {
	display: block;
	width: 46px;
	height: 26px;
	margin: 0 auto 1.1rem;
	background: url("../images/hero-flourish.svg") center / contain no-repeat;
	opacity: 0.95;
}

.hpq__question {
	margin: 0 0 clamp(1.1rem, 3vw, 1.6rem);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
	font-size: clamp(1.25rem, 4.2vw, 1.6rem);
	font-weight: 700;
	line-height: 1.25;
}

/* ----- answer buttons ----- */
.hpq__options {
	display: grid;
	gap: clamp(0.6rem, 1.8vw, 0.85rem);
}

.hpq__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.05rem 1.25rem;
	border: 1px solid rgba(201, 161, 90, 0.55);
	border-radius: 10px;
	background: transparent;
	color: #F5EFE3;
	font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
	font-size: clamp(0.95rem, 2.6vw, 1.05rem);
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.hpq__option:hover,
.hpq__option:focus-visible {
	background: rgba(201, 161, 90, 0.14);
	border-color: var(--hpq-gold);
	transform: translateY(-1px);
}

.hpq__option.is-chosen {
	background: rgba(201, 161, 90, 0.2);
	border-color: var(--hpq-gold);
}

.hpq__chev {
	color: var(--hpq-gold);
	font-size: 1.3em;
	line-height: 1;
}

.hpq__back {
	margin-top: 1.1rem;
	padding: 0.4rem 0.6rem;
	border: 0;
	background: none;
	color: rgba(240, 231, 216, 0.65);
	font-size: 0.82rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hpq__back:hover {
	color: var(--hpq-gold);
}

/* ----- result ----- */
.hpq__eyebrow {
	margin: 0 0 0.35rem;
	color: #F0E7D8;
	font-size: clamp(0.8rem, 2.2vw, 0.92rem);
}

.hpq__pkg-name {
	margin: 0;
	color: var(--hpq-gold-bright);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: clamp(2.3rem, 8vw, 3.4rem);
	font-weight: 400;
	line-height: 1.05;
}

.hpq__pkg-tagline {
	margin: 0.1rem 0 0;
	color: var(--hpq-gold);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: clamp(1.5rem, 5.5vw, 2.3rem);
	font-weight: 400;
	line-height: 1.15;
}

.hpq__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.5rem;
	margin: 0.5rem 0 0.9rem;
	color: var(--hpq-gold-bright);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
}

.hpq__price-from {
	font-size: clamp(1rem, 3vw, 1.3rem);
	color: #F0E7D8;
}

.hpq__price-value {
	font-size: clamp(2rem, 7vw, 2.9rem);
	line-height: 1;
}

.hpq__pkg-sub {
	max-width: 36ch;
	margin: 0 auto clamp(1.1rem, 3vw, 1.6rem);
	color: #F0E7D8;
	font-size: clamp(0.92rem, 2.5vw, 1.05rem);
	line-height: 1.5;
}

/* ----- detail rows ----- */
.hpq__rows {
	display: grid;
	gap: 0.5rem;
	text-align: left;
	margin-bottom: clamp(1.1rem, 3vw, 1.5rem);
}

.hpq__row {
	border: 1px solid rgba(201, 161, 90, 0.45);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.02);
	overflow: hidden;
}

.hpq__row-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1rem;
	color: #F5EFE3;
	font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
	font-size: clamp(0.88rem, 2.4vw, 1rem);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.hpq__row-label::-webkit-details-marker {
	display: none;
}

/* Chevron, rotating when the row is open. */
.hpq__row-label::after {
	content: '';
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 1.6px solid var(--hpq-gold);
	border-bottom: 1.6px solid var(--hpq-gold);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 220ms ease;
}

.hpq__row[open] .hpq__row-label::after {
	transform: rotate(-135deg) translateY(-2px);
}

.hpq__row-value {
	padding: 0 1rem 0.95rem;
	color: rgba(240, 231, 216, 0.85);
	font-size: clamp(0.85rem, 2.3vw, 0.97rem);
	line-height: 1.55;
}

/* ----- choose ----- */
.hpq__choose {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.05rem 1.5rem;
	border-radius: 8px;
	background: linear-gradient(180deg, #E4C888 0%, #C9A15A 55%, #A8813C 100%);
	color: #14201A;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: clamp(1.1rem, 3.6vw, 1.4rem);
	line-height: 1;
	transition: filter 220ms ease, transform 220ms ease;
}

.hpq__choose:hover,
.hpq__choose:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.hpq__choose .hpq__chev {
	color: #14201A;
}

/* ----- alternatives ----- */
.hpq__alts {
	margin-top: clamp(1.1rem, 3vw, 1.6rem);
	padding-top: clamp(0.9rem, 2.5vw, 1.2rem);
	border-top: 1px solid rgba(201, 161, 90, 0.25);
	text-align: left;
}

.hpq__alt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	color: #F0E7D8;
	font-size: clamp(0.85rem, 2.3vw, 0.97rem);
	line-height: 1.4;
}

.hpq__alt-mark {
	color: var(--hpq-gold);
}

.hpq__alt-link {
	flex: 1 1 auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hpq-gold-bright);
	font: inherit;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hpq__alt-link:hover {
	color: #FFFFFF;
}

.hpq__compare {
	margin: 0.4rem 0 0;
	text-align: center;
}

.hpq__compare a {
	color: var(--hpq-gold-bright);
	font-size: clamp(0.85rem, 2.3vw, 0.97rem);
	text-underline-offset: 3px;
}

.hpq__restart {
	margin: 0.75rem 0 0;
	text-align: center;
}

.hpq__restart button {
	border: 0;
	background: none;
	color: rgba(240, 231, 216, 0.6);
	font-size: 0.82rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hpq__restart button:hover {
	color: var(--hpq-gold);
}

.hpq__noscript {
	color: #F0E7D8;
}

.hpq__noscript a {
	color: var(--hpq-gold-bright);
}

/* =========================================================================
   Booking form — carried-over recommendation and the add-a-person flow
   ========================================================================= */
.hbm-from-quiz {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid rgba(201, 161, 90, 0.55);
	border-radius: 8px;
	background: rgba(201, 161, 90, 0.1);
}

.hbm-from-quiz__tick {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #C9A15A;
	color: #14201A;
	font-size: 0.85rem;
	line-height: 1;
}

.hbm-from-quiz__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.95rem;
}

.hbm-from-quiz__price {
	color: #C9A15A;
	font-weight: 700;
}

.hbm-from-quiz__note {
	opacity: 0.75;
	font-size: 0.85rem;
}

/* ----- the two questions ----- */
.hbm-person-q {
	margin: 0 0 1rem;
}

.hbm-person-q-label {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.hbm-person-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.hbm-person-choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgba(201, 161, 90, 0.5);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font-size: 0.9rem;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	transition: background 200ms ease, border-color 200ms ease;
}

.hbm-person-choice:hover,
.hbm-person-choice:focus-visible,
.hbm-person-choice.is-chosen {
	background: rgba(201, 161, 90, 0.15);
	border-color: #C9A15A;
}

.hbm-person-choice-price {
	flex: 0 0 auto;
	color: #C9A15A;
	font-weight: 700;
	font-size: 0.9rem;
}

/* ----- the prescription ----- */
.hbm-person-result {
	margin: 0 0 1rem;
	padding: 1.1rem;
	border: 1px solid rgba(201, 161, 90, 0.5);
	border-radius: 8px;
	background: rgba(201, 161, 90, 0.08);
}

.hbm-person-result-eyebrow {
	margin: 0 0 0.3rem;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.8;
}

.hbm-person-result-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: 1.3rem;
	line-height: 1.2;
}

.hbm-person-result-price {
	margin: 0.2rem 0 0.5rem;
	color: #C9A15A;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.hbm-person-result-sub {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	line-height: 1.5;
	opacity: 0.9;
}

/* The line that removes what they do not need. */
.hbm-person-result-unsell {
	margin: 0;
	padding: 0.75rem 0.9rem;
	border-left: 2px solid #C9A15A;
	background: rgba(0, 0, 0, 0.12);
	font-size: 0.88rem;
	line-height: 1.55;
}

.hbm-person-change {
	margin-top: 0.75rem;
	padding: 0.3rem 0.5rem;
	border: 0;
	background: none;
	color: inherit;
	font-size: 0.82rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	opacity: 0.75;
}

.hbm-person-change:hover {
	opacity: 1;
}

@media (max-width: 520px) {
	.hbm-person-choices {
		grid-template-columns: 1fr;
	}
}

/* Feasibility verdict on group bookings: the guest-numbers-against-hours
   arithmetic the customer never does for themselves. */
.hpq__verdict {
	max-width: 40ch;
	margin: 0 auto clamp(1rem, 3vw, 1.4rem);
	padding: 0.85rem 1rem;
	border-left: 2px solid var(--hpq-gold);
	border-radius: 4px;
	background: rgba(201, 161, 90, 0.1);
	color: #F0E7D8;
	font-size: clamp(0.85rem, 2.3vw, 0.95rem);
	line-height: 1.55;
	text-align: left;
}

.hpq__verdict.is-warning {
	border-left-color: #E8A020;
	background: rgba(232, 160, 32, 0.12);
}

/* The line under the à la carte tables explaining what a package adds. */
.henna-alacarte-note {
	max-width: 60ch;
	margin-inline: auto;
	opacity: 0.85;
}

/* =========================================================================
   Services page — package cards
   Reuses the .henna-pricing-card plaque so these sit in the same visual
   family as the rate-card tables rather than looking like a bolted-on grid.
   ========================================================================= */
.henna-pkgcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: stretch;
}

.henna-pkgcard {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.henna-pkgcard__head {
	position: relative;
	z-index: 2;
	padding-bottom: 0.9rem;
	margin-bottom: 0.9rem;
	border-bottom: 1px solid rgba(201, 161, 90, 0.3);
}

.henna-pkgcard__name {
	margin: 0;
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
	font-weight: 400;
	line-height: 1.1;
}

.henna-pkgcard__tagline {
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--gold, #C9A15A);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: clamp(1rem, 1.8vw, 1.15rem);
	line-height: 1.2;
}

.henna-pkgcard__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: clamp(1.7rem, 3vw, 2.1rem);
	line-height: 1;
}

.henna-pkgcard__from {
	color: rgba(240, 231, 216, 0.75);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.henna-pkgcard__sub {
	position: relative;
	z-index: 2;
	margin: 0 0 1rem;
	color: rgba(240, 231, 216, 0.88);
	font-size: 0.92rem;
	line-height: 1.55;
}

.henna-pkgcard__facts {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 0.55rem;
	margin: 0 0 1rem;
	text-align: left;
}

.henna-pkgcard__fact dt {
	color: var(--wp--preset--color--gold, #C9A15A);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.henna-pkgcard__fact dd {
	margin: 0.15rem 0 0;
	color: rgba(240, 231, 216, 0.9);
	font-size: 0.9rem;
	line-height: 1.45;
}

/* Naming what a package leaves out is what stops the wrong one being booked. */
.henna-pkgcard__not {
	position: relative;
	z-index: 2;
	margin: 0 0 1.2rem;
	padding: 0.7rem 0.85rem;
	border-left: 2px solid rgba(201, 161, 90, 0.6);
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.18);
	color: rgba(240, 231, 216, 0.82);
	font-size: 0.82rem;
	line-height: 1.5;
	text-align: left;
}

.henna-pkgcard__not span {
	display: block;
	color: var(--wp--preset--color--gold, #C9A15A);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.henna-pkgcard__btn {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 0.9rem 1.2rem;
	border-radius: 3px;
	background: var(--wp--preset--color--gold, #C9A15A);
	color: #122A20;
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	transition: background 220ms ease;
}

.henna-pkgcard__btn:hover,
.henna-pkgcard__btn:focus-visible {
	background: var(--wp--preset--color--gold-light, #E4C888);
	color: #122A20;
}

/* ----- services page chrome ----- */
.henna-svc-jump a {
	color: var(--wp--preset--color--gold-light, #E4C888);
	text-underline-offset: 4px;
}

.henna-svc-jump a:hover {
	color: #FFFFFF;
}

.henna-services-signpost .section-title {
	margin-bottom: 0.9rem;
}

/* The recommended package on each service card. Derived from the same rules
   the quiz uses, so the card and the quiz never disagree about what suits a
   given category. */
.henna-branch__pick {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.15rem 0.75rem;
	margin: 0.9rem 0 1.1rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid rgba(201, 161, 90, 0.45);
	border-radius: 6px;
	background: rgba(201, 161, 90, 0.09);
}

.henna-branch__pick-label {
	grid-column: 1 / -1;
	color: var(--wp--preset--color--gold, #C9A15A);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.henna-branch__pick-name {
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: 1.02rem;
	line-height: 1.25;
}

.henna-branch__pick-price {
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: right;
}

.henna-branch__pick-note {
	grid-column: 1 / -1;
	color: rgba(240, 231, 216, 0.75);
	font-size: 0.8rem;
	line-height: 1.4;
}

.henna-signpost-list a {
	color: var(--wp--preset--color--gold-deep, #8A6520);
	font-weight: 600;
	white-space: nowrap;
	text-underline-offset: 4px;
}

.henna-signpost-list a:hover {
	color: var(--wp--preset--color--gold, #C9A15A);
}

/* Bundle value on the quiz result: what it includes, and the cash saving. */
.hpq__saving {
	display: inline-block;
	margin: 0 auto 0.75rem;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	background: rgba(201, 161, 90, 0.18);
	color: var(--hpq-gold-bright, #E4C888);
	font-size: clamp(0.8rem, 2.2vw, 0.92rem);
	font-weight: 600;
}

.hpq__includes {
	max-width: 42ch;
	margin: 0 auto clamp(1rem, 3vw, 1.4rem);
	text-align: left;
}

/* Bundle value and the Most Booked flag on package cards. An unmarked ladder
   pushes people to the cheapest option or to none at all. */
.henna-pkgcard__saving {
	position: relative;
	z-index: 2;
	margin: 0 0 0.75rem;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	background: rgba(201, 161, 90, 0.18);
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-size: 0.8rem;
	font-weight: 600;
}

.henna-pkgcard__includes {
	position: relative;
	z-index: 2;
	margin: 0 0 1rem;
	color: rgba(240, 231, 216, 0.82);
	font-size: 0.85rem;
	line-height: 1.55;
	text-align: left;
}

.henna-pkgcard.is-featured {
	outline: 1px solid rgba(201, 161, 90, 0.7);
	outline-offset: 4px;
}

.henna-pkgcard__flag {
	position: absolute;
	top: -0.7rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gold, #C9A15A);
	color: #122A20;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* =========================================================================
   Rate card — individual service prices, rendered from the catalogue so the
   list can never disagree with the quiz or the booking form.
   ========================================================================= */
.henna-ratecard {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: start;
}

.henna-ratecard__group {
	padding: clamp(1.4rem, 2.2vw, 2rem) clamp(1.1rem, 1.8vw, 1.6rem);
}

.henna-ratecard__head {
	position: relative;
	z-index: 2;
	margin-bottom: 0.6rem;
}

.henna-ratecard__title {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	font-weight: 400;
	text-align: center;
}

.henna-ratecard__labels {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(201, 161, 90, 0.3);
	color: var(--wp--preset--color--gold, #C9A15A);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.henna-ratecard__rows {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 0;
	list-style: none;
}

.henna-ratecard__row + .henna-ratecard__row {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* The whole row is the link — a price you cannot tap is a dead end. */
.henna-ratecard__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0.2rem;
	color: inherit;
	text-decoration: none;
	transition: background 200ms ease;
}

.henna-ratecard__link:hover,
.henna-ratecard__link:focus-visible {
	background: rgba(201, 161, 90, 0.1);
}

.henna-ratecard__name {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	color: #F5EFE3;
	font-size: 0.95rem;
	line-height: 1.35;
}

.henna-ratecard__time {
	color: rgba(240, 231, 216, 0.55);
	font-size: 0.78rem;
	font-style: italic;
}

.henna-ratecard__price {
	flex: 0 0 auto;
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: 1.15rem;
	font-weight: 700;
}

.henna-ratecard__note {
	grid-column: 1 / -1;
	max-width: 70ch;
	margin: 0.5rem auto 0;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.65;
	opacity: 0.85;
}

/* ---------- Services page: add-ons and the how-it-works steps ---------- */
.henna-addons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.1rem);
}

/* .henna-pricing-card supplies the dark plaque and the gold ornate frame, so
   these only need their own layout on top of it. */
.henna-addon {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.2rem 1rem;
	align-content: start;
	padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.1rem, 1.6vw, 1.4rem);
}

.henna-addon > * {
	position: relative;
	z-index: 2;
}

.henna-addon__name {
	color: #F5EFE3;
	font-weight: 600;
	line-height: 1.3;
}

.henna-addon__price {
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: 1.15rem;
	font-weight: 700;
	white-space: nowrap;
}

.henna-addon__note {
	grid-column: 1 / -1;
	color: rgba(240, 231, 216, 0.8);
	font-size: 0.86rem;
	line-height: 1.5;
}

.henna-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: henna-step;
}

.henna-step {
	padding: clamp(1.6rem, 2.2vw, 2.1rem) clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.4rem, 2vw, 1.8rem);
	text-align: center;
}

.henna-step > * {
	position: relative;
	z-index: 2;
}

.henna-step__num {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0 auto 0.75rem;
	border: 1px solid var(--wp--preset--color--gold, #C9A15A);
	border-radius: 50%;
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: 1.1rem;
}

.henna-step__title {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.25;
}

.henna-step p {
	margin: 0;
	color: rgba(240, 231, 216, 0.88);
	font-size: 0.92rem;
	line-height: 1.6;
}

.henna-step a {
	color: var(--wp--preset--color--gold-light, #E4C888);
	text-underline-offset: 3px;
}



/* Field hint under the email input. Saying what an address will be used for
   raises completion more than an asterisk does. */
.hbm-field-hint {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	line-height: 1.45;
	opacity: 0.75;
}

/* =========================================================================
   Package list — the collapsible variant used on the services page.
   Names and prices first; the detail opens for whichever one they care about.
   ========================================================================= */
.henna-pkglist {
	max-width: 860px;
	margin-inline: auto;
	padding: clamp(1rem, 1.8vw, 1.6rem) clamp(0.9rem, 1.6vw, 1.4rem);
}

.henna-pkglist__item {
	position: relative;
	z-index: 2;
}

.henna-pkglist__item + .henna-pkglist__item {
	border-top: 1px solid rgba(201, 161, 90, 0.25);
}

.henna-pkglist__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 0.6rem;
	cursor: pointer;
	list-style: none;
}

.henna-pkglist__row::-webkit-details-marker {
	display: none;
}

.henna-pkglist__label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.6rem;
}

.henna-pkglist__name {
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	line-height: 1.2;
}

.henna-pkglist__tagline {
	color: rgba(240, 231, 216, 0.7);
	font-size: 0.88rem;
}

.henna-pkglist__flag {
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gold, #C9A15A);
	color: #122A20;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.henna-pkglist__price {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex: 0 0 auto;
	color: var(--wp--preset--color--gold-light, #E4C888);
	font-family: var(--wp--preset--font-family--heading, "Aref Ruqaa", Georgia, serif);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
}

/* Chevron, rotating when open. */
.henna-pkglist__price::after {
	content: '';
	width: 9px;
	height: 9px;
	border-right: 1.6px solid var(--wp--preset--color--gold, #C9A15A);
	border-bottom: 1.6px solid var(--wp--preset--color--gold, #C9A15A);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 220ms ease;
}

.henna-pkglist__item[open] .henna-pkglist__price::after {
	transform: rotate(-135deg) translateY(-2px);
}

.henna-pkglist__body {
	padding: 0 0.6rem 1.4rem;
	text-align: left;
}

.henna-pkglist__sub {
	margin: 0 0 0.9rem;
	color: rgba(240, 231, 216, 0.88);
	font-size: 0.95rem;
	line-height: 1.6;
}

.henna-pkglist__includes {
	margin: 0 0 1rem;
	color: rgba(240, 231, 216, 0.85);
	font-size: 0.9rem;
	line-height: 1.6;
}

.henna-pkglist__includes strong {
	color: var(--wp--preset--color--gold, #C9A15A);
}

/* Inside the list the facts read better in two columns than stacked. */
.henna-pkglist__body .henna-pkgcard__facts {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 0.75rem 1.5rem;
}

.henna-pkglist__body .henna-pkgcard__btn {
	display: inline-block;
	margin-top: 0.4rem;
}

@media (max-width: 560px) {
	.henna-pkglist__row {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.4rem;
	}
	.henna-pkglist__price {
		align-self: stretch;
		justify-content: space-between;
		width: 100%;
	}
}

/* =========================================================================
   Services page — category accordion.
   The heading is the toggle; one category open at a time.
   ========================================================================= */
.henna-svc-heading {
	margin-bottom: 0 !important;
}

.henna-svc-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.6rem, 1.4vw, 1.1rem);
	width: 100%;
	padding: 0.4rem 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.henna-svc-chevron {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	border-right: 2px solid var(--wp--preset--color--gold, #C9A15A);
	border-bottom: 2px solid var(--wp--preset--color--gold, #C9A15A);
	transform: rotate(45deg) translateY(-3px);
	transition: transform 260ms ease;
}

.henna-svc-accordion.is-open .henna-svc-chevron {
	transform: rotate(-135deg) translateY(-3px);
}

/* Closed sections collapse to just their heading. */
.henna-svc-accordion:not(.is-open) {
	padding-top: clamp(1.4rem, 2.4vw, 2rem) !important;
	padding-bottom: clamp(1.4rem, 2.4vw, 2rem) !important;
}

.henna-svc-panel {
	animation: henna-svc-open 300ms ease both;
}

@keyframes henna-svc-open {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

html.henna-reduced-motion .henna-svc-panel {
	animation: none;
}

.henna-svc-panel > :first-child {
	margin-top: clamp(0.9rem, 2vw, 1.4rem);
}

/* A closed heading should still look tappable. */
.henna-svc-toggle:hover .henna-svc-chevron,
.henna-svc-toggle:focus-visible .henna-svc-chevron {
	border-color: var(--wp--preset--color--gold-light, #E4C888);
}

.henna-svc-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold, #C9A15A);
	outline-offset: 6px;
	border-radius: 6px;
}

/* =========================================================================
   "What's included" — a plain ticked list on every package. Someone choosing
   between two prices is trying to work out exactly what the extra buys, and a
   run-on sentence makes that hard to do.
   ========================================================================= */
.henna-includes {
	position: relative;
	z-index: 2;
	margin: 0 0 1.1rem;
	text-align: left;
}

.henna-includes__title {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--gold, #C9A15A);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.henna-includes__title--sub {
	margin-top: 1rem;
	opacity: 0.75;
}

/*
 * "Everything in Celebration, plus" — the line that makes the ladder legible.
 * Given a rule and a little more room than the plain heading, because it is
 * doing real work: it tells someone the dearer package is the cheaper one and
 * more, rather than a different thing at a different price.
 */
.henna-includes__title--builds {
	margin: 0 0 0.65rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(201, 161, 90, 0.28);
	letter-spacing: 0.08em;
	text-transform: none;
	font-size: 0.82rem;
	font-weight: 500;
	color: rgba(240, 231, 216, 0.72);
}

.henna-includes__title--builds strong {
	color: var(--wp--preset--color--gold, #C9A15A);
	font-weight: 600;
}

.henna-includes__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

.henna-includes__list li {
	position: relative;
	padding-left: 1.5rem;
	color: rgba(240, 231, 216, 0.9);
	font-size: 0.88rem;
	line-height: 1.5;
}

/* Hand-drawn tick rather than a bullet, to match the gold detailing. */
.henna-includes__list li::before {
	content: '';
	position: absolute;
	left: 0.15rem;
	top: 0.42em;
	width: 8px;
	height: 4px;
	border-left: 1.6px solid var(--wp--preset--color--gold, #C9A15A);
	border-bottom: 1.6px solid var(--wp--preset--color--gold, #C9A15A);
	transform: rotate(-45deg);
}

.henna-includes__list--sub li {
	color: rgba(240, 231, 216, 0.68);
	font-size: 0.82rem;
}

/* What each individual service covers, under its name in the rate card. */
.henna-ratecard__inc {
	color: rgba(240, 231, 216, 0.6);
	font-size: 0.78rem;
	line-height: 1.45;
}

/* =========================================================================
   Cookie consent

   A bar at the bottom rather than a modal. Analytics is already denied by
   default via Consent Mode, so there is no compliance reason to block the
   page — and putting a wall between someone and the henna they came to look
   at costs bookings.
   ========================================================================= */
.henna-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--wp--preset--color--deep-green, #122A20);
	border-top: 1px solid rgba(201, 161, 90, 0.45);
	color: var(--wp--preset--color--cream, #FBF6EC);
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
	transform: translateY(100%);
	transition: transform 0.35s ease;
}

.henna-consent.is-open {
	transform: translateY(0);
}

/* No transition for anyone who has asked not to see movement. */
@media (prefers-reduced-motion: reduce) {
	.henna-consent {
		transition: none;
	}
}

.henna-consent__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.1rem clamp(1rem, 4vw, 2rem);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.henna-consent__copy {
	flex: 1 1 auto;
	min-width: 0;
}

.henna-consent__title {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--gold, #C9A15A);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.henna-consent__text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: rgba(251, 246, 236, 0.9);
}

.henna-consent__text a {
	color: var(--wp--preset--color--gold, #C9A15A);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.henna-consent__actions {
	flex: 0 0 auto;
	display: flex;
	gap: 0.6rem;
}

.henna-consent__btn {
	border-radius: 3px;
	border: 1px solid transparent;
	padding: 0.75rem 1.5rem;
	/* 44px, so the buttons clear the minimum comfortable tap target. */
	min-height: 44px;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.18s ease, color 0.18s ease;
}

.henna-consent__btn--accept {
	background: var(--wp--preset--color--gold, #C9A15A);
	color: var(--wp--preset--color--deep-green, #122A20);
}

.henna-consent__btn--accept:hover {
	background: var(--wp--preset--color--gold-light, #E4C888);
}

/*
 * "Essential only" is given equal weight, not hidden as a faint link. A reject
 * option that is harder to find than accept is not a real choice, and the ICO
 * has been explicit about that.
 */
.henna-consent__btn--ghost {
	background: transparent;
	border-color: rgba(251, 246, 236, 0.5);
	color: var(--wp--preset--color--cream, #FBF6EC);
}

.henna-consent__btn--ghost:hover {
	background: rgba(251, 246, 236, 0.12);
}

.henna-consent__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-light, #E4C888);
	outline-offset: 2px;
}

/* The footer link back in. */
.henna-consent-reopen {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.85rem;
	color: inherit;
	opacity: 0.75;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.henna-consent-reopen:hover {
	opacity: 1;
}

/* Stacked on phones, with the WhatsApp bubble nudged clear of the bar. */
@media (max-width: 720px) {
	.henna-consent__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0.9rem;
		padding: 1rem 1.1rem 1.2rem;
	}

	.henna-consent__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.henna-consent__btn {
		width: 100%;
		padding: 0.8rem 0.75rem;
	}

	body:has(.henna-consent.is-open) .henna-whatsapp-float,
	body:has(.henna-consent.is-open) .hmh-whatsapp-float {
		bottom: 12.5rem;
	}
}

/* The strip holding the "Cookie settings" link, coloured to continue the
   footer above it. */
.henna-consent-bar {
	background: var(--wp--preset--color--deep-green, #122A20);
	color: rgba(251, 246, 236, 0.7);
	text-align: center;
	padding: 0 0 1.4rem;
	margin: 0;
}