:root {
	--salt-header-height: 78px;
	--salt-radius: 24px;
	--salt-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 132px;
}

body {
	overflow-x: hidden;
}

body .is-layout-constrained > * {
	margin-block-start: 0;
}

:where(.wp-site-blocks) > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.salt-site-header {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
	color: #fff;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: background 220ms ease, backdrop-filter 220ms ease;
	z-index: 100;
}

.salt-site-header.is-scrolled {
	backdrop-filter: blur(18px);
	background: rgba(0, 0, 0, 0.86);
}

.salt-header-inner {
	box-sizing: border-box;
	min-height: var(--salt-header-height);
	padding: 16px clamp(18px, 4vw, 64px);
	width: 100%;
}

.salt-brand-lockup {
	gap: 16px;
}

.salt-logo-tatweer,
.salt-logo-mark,
.salt-zone-logo {
	margin: 0;
}

.salt-wordmark {
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 2vw, 1.8rem);
	font-weight: 800;
	left: 50%;
	line-height: 1;
	margin: 0;
	position: absolute;
	top: 30px;
	transform: translateX(-50%);
}

.salt-header-actions {
	gap: 12px;
}

.salt-interest-button .wp-block-button__link,
.salt-site-header .wp-block-button__link {
	background: #fff;
	color: #000;
	font-size: 0.75rem;
	padding: 12px 18px;
}

.salt-menu-button {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	display: flex;
	font-size: 1.35rem;
	height: 42px;
	justify-content: center;
	line-height: 1;
	margin: 0;
	width: 42px;
}

.salt-sticky-nav {
	backdrop-filter: blur(18px);
	background: rgba(8, 8, 8, 0.94);
	color: #fff;
	overflow-x: auto;
	position: sticky;
	top: var(--salt-header-height);
	z-index: 80;
}

.salt-sticky-nav-inner {
	gap: 0;
	min-width: max-content;
	padding: 0 clamp(18px, 4vw, 64px);
}

.salt-sticky-nav p {
	margin: 0;
}

.salt-sticky-nav a {
	border-bottom: 2px solid transparent;
	color: rgba(255, 255, 255, 0.76);
	display: block;
	font-size: 0.78rem;
	font-weight: 800;
	padding: 17px 18px 15px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 180ms ease, border-color 180ms ease;
	white-space: nowrap;
}

.salt-sticky-nav a.is-active,
.salt-sticky-nav a:hover {
	border-color: #c8a84e;
	color: #fff;
}

.salt-feature-card::after,
.salt-experience-card::after,
.salt-zone-card::after {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.05) 56%, rgba(0, 0, 0, 0.3));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.salt-kicker {
	color: #c8a84e;
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.salt-standalone-stats h3 {
	font-size: clamp(1.05rem, 2vw, 1.55rem);
	margin: 0;
}

.salt-cta-buttons {
	gap: 10px;
}

.wp-block-button {
	overflow: visible;
}

.wp-block-button .wp-block-button__link {
	background: #080808;
	border: 2px solid #080808;
	color: #ffffff;
	font-size: 0.78rem;
	font-weight: 900;
	padding: 14px 22px;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
	z-index: 1;
	border-radius: 999px;
	transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-button .wp-block-button__link::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background-color: #c8a84e; /* Salt Gold */
	border-radius: 50%;
	z-index: -1;
	visibility: hidden;
	transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.wp-block-button .wp-block-button__link:hover {
	color: #ffffff;
	border-color: #c8a84e;
	box-shadow: 0 12px 30px rgba(200, 168, 78, 0.24);
}

.wp-block-button .wp-block-button__link:hover::after {
	visibility: visible;
	transform: translate(-50%, -50%) scale(60);
}

.wp-block-button .wp-block-button__link:active {
	transform: scale(0.98);
}

.wp-block-button.is-style-salt-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid #080808;
	color: #080808;
}

.wp-block-button.is-style-salt-outline .wp-block-button__link::after {
	background-color: #080808; /* fills with black */
}

.wp-block-button.is-style-salt-outline .wp-block-button__link:hover {
	color: #ffffff;
	border-color: #080808;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.salt-section {
	box-sizing: border-box;
	max-width: none;
	padding: clamp(72px, 9vw, 132px) clamp(18px, 4vw, 64px);
}

.salt-section-title {
	font-size: clamp(2.5rem, 7vw, 6.8rem);
	letter-spacing: 0;
	margin: 0 0 34px;
	text-transform: uppercase;
}

.salt-section-intro {
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	margin: -10px auto 44px;
	max-width: 720px;
}

.salt-card-track {
	display: grid;
	gap: 22px;
	grid-auto-columns: minmax(290px, 380px);
	grid-auto-flow: column;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	padding-bottom: 18px;
	scroll-snap-type: inline mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.salt-card-track::-webkit-scrollbar {
	display: none;
}

.salt-feature-card,
.salt-experience-card,
.salt-zone-card {
	border-radius: var(--salt-radius);
	box-sizing: border-box;
	overflow: hidden;
	scroll-snap-align: start;
}

.salt-feature-card .wp-block-cover__inner-container,
.salt-experience-card .wp-block-cover__inner-container,
.salt-zone-card .wp-block-cover__inner-container {
	align-content: end;
	box-sizing: border-box;
	display: grid;
	height: 100%;
	padding: 28px;
	position: relative;
	z-index: 1;
}

.salt-feature-card h3,
.salt-experience-card h3 {
	color: #fff;
	font-size: 1.75rem;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.salt-feature-card p,
.salt-experience-card p {
	color: rgba(255, 255, 255, 0.86);
	margin: 0;
}

.salt-facts-card {
	background: #111;
	color: #fff;
	min-height: 520px;
	padding: 32px;
}

.salt-facts-card p {
	color: rgba(255, 255, 255, 0.78);
}

.salt-big-number {
	color: #c8a84e !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 3vw, 2.7rem);
	font-weight: 900;
	line-height: 1;
	margin-top: 18px !important;
}

.salt-zones {
	background: #f5f5f5;
}

.salt-zones-grid {
	gap: 24px;
}

.salt-zone-card .wp-block-cover__inner-container {
	align-content: space-between;
}

.salt-zone-card p {
	color: #fff;
	font-size: 1.05rem;
	max-width: 420px;
}

/* Salt zones editorial section */
.salt-zones-editorial {
	background: #f4f5f5;
	color: #050505;
	overflow: hidden;
	padding: clamp(68px, 7vw, 96px) clamp(26px, 4vw, 76px) clamp(78px, 8vw, 118px);
}

.salt-zones-editorial .salt-zones-title {
	color: #050505;
	font-family: Inter, Arial, sans-serif;
	font-size: clamp(1.35rem, 1.45vw, 1.65rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.15;
	margin: 0 0 clamp(58px, 6vw, 72px);
	text-transform: uppercase;
}

.salt-zones-cards {
	align-items: stretch;
	display: grid;
	gap: clamp(24px, 2.4vw, 36px);
	grid-template-columns: repeat(2, minmax(320px, 426px));
	justify-content: start;
	margin: 0;
	max-width: 900px;
	position: relative;
	width: 100%;
}

.salt-zone-showcase {
	border-radius: 28px;
	box-sizing: border-box;
	height: clamp(500px, 33vw, 535px);
	min-height: 0 !important;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.salt-zone-showcase .wp-block-cover__image-background {
	transition: filter 800ms var(--salt-ease), transform 900ms var(--salt-ease);
}

.salt-zone-showcase:hover .wp-block-cover__image-background {
	filter: saturate(1.08) contrast(1.04);
	transform: scale(1.055);
}

.salt-zone-showcase::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 38%, rgba(0, 0, 0, 0.46) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.salt-zone-shore-card {
	border-radius: 28px;
}

.salt-zone-showcase .wp-block-cover__inner-container {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	padding: 42px 38px 38px;
	position: relative;
	z-index: 1;
}

.salt-zone-brand {
	margin: 0;
}

.salt-zone-card-actions {
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
	width: 100%;
}

.salt-zone-card-actions .wp-block-button__link {
	align-items: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.88);
	border-radius: 999px;
	color: #fff;
	display: flex;
	font-size: 0.9rem;
	font-weight: 800;
	height: 50px;
	justify-content: center;
	letter-spacing: 0;
	min-width: 50px;
	padding: 0 28px;
	text-transform: uppercase;
	transition: background 300ms var(--salt-ease), color 300ms var(--salt-ease), transform 300ms var(--salt-ease);
}

.salt-zone-card-actions .wp-block-button__link:hover {
	background: #fff;
	color: #050505;
	transform: translateY(-2px);
}

.salt-zone-card-actions .salt-zone-eoi .wp-block-button__link {
	border-radius: 50%;
	font-size: 0.62rem;
	padding: 0;
	width: 50px;
}

.salt-zone-icon-only {
	justify-content: flex-end;
}

.salt-zone-modal {
	align-items: center;
	background: rgba(0, 0, 0, 0.62);
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: 24px;
	pointer-events: none;
	position: fixed;
	transition: opacity 360ms var(--salt-ease), visibility 360ms var(--salt-ease);
	visibility: hidden;
	z-index: 9998;
}

.salt-zone-modal-open {
	overflow: hidden;
}

.salt-zone-modal.is-open {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.salt-zone-modal-panel {
	background: #fff;
	border-radius: 28px;
	box-shadow: 0 34px 100px rgba(0, 0, 0, 0.32);
	box-sizing: border-box;
	max-height: min(720px, calc(100vh - 48px));
	max-width: 520px;
	overflow: auto;
	position: relative;
	transform: translateY(28px) scale(0.96);
	transition: transform 420ms var(--salt-ease);
	width: min(100%, 520px);
}

.salt-zone-modal.is-open .salt-zone-modal-panel {
	transform: translateY(0) scale(1);
}

.salt-zone-modal-close {
	align-items: center;
	background: transparent;
	border: 0;
	color: #050505;
	cursor: pointer;
	display: flex;
	font-size: 1.8rem;
	font-weight: 300;
	height: 36px;
	justify-content: center;
	line-height: 1;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 24px;
	top: 22px;
	width: 36px;
	z-index: 2;
}

.salt-zone-detail {
	background: #fff;
	border-radius: 28px;
	box-sizing: border-box;
	display: none;
	min-height: 0;
	padding: clamp(32px, 2.5vw, 40px) 36px 36px;
	width: 100%;
}

.salt-zone-detail.is-active {
	display: block;
}

.salt-zone-detail-head {
	margin: 0 0 8px;
}

.salt-zone-detail h3 {
	color: #050505;
	font-family: Inter, Arial, sans-serif;
	font-size: clamp(1.55rem, 1.65vw, 1.95rem);
	font-weight: 700;
	line-height: 1.12;
	margin: 0;
}

.salt-zone-close {
	color: #050505;
	font-size: 1.85rem;
	font-weight: 300;
	line-height: 1;
	margin: 0;
}

.salt-zone-summary {
	color: #4b4b4b;
	font-size: clamp(0.98rem, 0.98vw, 1.08rem);
	font-weight: 600;
	line-height: 1.45;
	margin: 0 0 20px;
	max-width: 410px;
}

.salt-zone-line {
	border: 0;
	border-top: 1px solid rgba(5, 5, 5, 0.32);
	margin: 20px 0 24px;
}

.salt-zone-meta-grid {
	gap: 26px;
	margin: 0 0 22px;
}

.salt-zone-meta-label {
	color: #9c9c9c;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 8px;
}

.salt-zone-meta-value,
.salt-zone-types {
	color: #050505;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
	margin: 0;
}

.salt-zone-types {
	max-height: 52px;
	overflow: hidden;
}

.salt-zone-detail-actions {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
	margin-top: 24px;
}

.salt-zone-detail-actions .wp-block-button {
	width: 100%;
}

.salt-zone-detail-actions .wp-block-button__link {
	align-items: center;
	border-radius: 999px;
	box-sizing: border-box;
	display: flex;
	font-size: 0.98rem;
	font-weight: 800;
	height: 50px;
	justify-content: center;
	letter-spacing: 0;
	padding: 0 24px;
	text-transform: uppercase;
	width: 100%;
}

.salt-zone-interest .wp-block-button__link {
	background: #ff421f;
	color: #fff;
}

.salt-zone-more .wp-block-button__link {
	background: transparent;
	border: 1px solid #050505;
	color: #050505;
}

.salt-zone-slider-dot {
	background: #050505;
	border-radius: 50%;
	height: 9px;
	margin: 42px 10vw 0 auto;
	width: 9px;
}

@media (max-width: 1240px) {
	.salt-zones-cards {
		grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
		width: 100%;
	}
}

@media (max-width: 760px) {
	.salt-zones-editorial {
		padding-inline: 18px;
	}

	.salt-zones-cards {
		grid-template-columns: 1fr;
	}

	.salt-zone-showcase {
		height: 460px;
	}

	.salt-zone-showcase .wp-block-cover__inner-container {
		padding: 32px 26px 28px;
	}

	.salt-zone-detail {
		padding: 30px 24px calc(30px + env(safe-area-inset-bottom));
	}

	.salt-zone-modal {
		align-items: flex-end;
		padding: 18px 14px calc(104px + env(safe-area-inset-bottom));
	}

	.salt-zone-modal-panel {
		border-radius: 24px;
		max-height: calc(100dvh - 132px);
		width: 100%;
	}

	.salt-zone-detail-actions {
		grid-template-columns: 1fr;
		margin-bottom: 8px;
	}

	.salt-zone-slider-dot {
		margin-right: 50%;
	}
}

.salt-location {
	background: #fff;
}

.salt-map-panel {
	background: #f5f5f5;
	border-radius: var(--salt-radius);
	overflow: hidden;
	padding: 22px 22px 34px;
}

.salt-map-visual {
	border-radius: 18px;
	overflow: hidden;
}

.salt-location-pin {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.45rem, 3vw, 2.6rem);
	font-weight: 900;
	line-height: 1;
	margin: 30px 0 8px;
	text-transform: uppercase;
}

/* Location map editorial panel */
.salt-location-editorial {
	background: #f4f5f5;
	padding: clamp(44px, 5vw, 70px) clamp(20px, 3.5vw, 64px);
}

.salt-location-panel {
	background: #fff;
	border-radius: 34px;
	display: grid;
	grid-template-columns: minmax(320px, 410px) minmax(0, 1fr);
	margin: 0 auto;
	max-width: 1704px;
	overflow: hidden;
	width: 100%;
}

.salt-location-copy {
	align-content: start;
	box-sizing: border-box;
	display: grid;
	padding: clamp(58px, 5vw, 94px) clamp(28px, 4vw, 68px);
}

.salt-location-description {
	color: #050505;
	font-size: clamp(1rem, 1.05vw, 1.18rem);
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	max-width: 360px;
}

.salt-location-line {
	border: 0;
	border-top: 1px solid rgba(5, 5, 5, 0.09);
	margin: clamp(34px, 4vw, 42px) 0 clamp(28px, 3vw, 36px);
	width: 100%;
}

.salt-location-road {
	align-items: center;
	color: #050505;
	display: flex;
	font-size: clamp(1rem, 1vw, 1.15rem);
	font-weight: 700;
	gap: 12px;
	line-height: 1.25;
	margin: 0;
}

.salt-location-marker {
	background: #a77ab2;
	border-radius: 999px 999px 999px 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
	display: inline-flex;
	height: 18px;
	transform: rotate(-45deg);
	width: 18px;
}

.salt-location-map-visual {
	aspect-ratio: 2048 / 971;
	background: #f4f5f5;
	border-radius: 0;
	height: auto;
	min-height: clamp(390px, 36vw, 630px) !important;
	overflow: hidden;
}

.salt-location-map-visual .wp-block-cover__image-background {
	height: 100%;
	object-fit: contain;
	object-position: center center;
	width: 100%;
}

.salt-location-map-visual .wp-block-cover__inner-container {
	align-items: end;
	box-sizing: border-box;
	display: flex;
	height: 100%;
	justify-content: flex-end;
	padding: clamp(26px, 3vw, 36px);
	position: relative;
	z-index: 1;
}

.salt-location-actions {
	margin: 0;
}

.salt-location-directions .wp-block-button__link {
	align-items: center;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 16px 42px rgba(0, 0, 0, 0.08);
	color: #050505;
	display: flex;
	font-size: clamp(0.95rem, 0.95vw, 1.06rem);
	font-weight: 800;
	height: 54px;
	justify-content: center;
	letter-spacing: 0;
	min-width: 236px;
	padding: 0 28px;
	text-transform: uppercase;
	transition: transform 300ms var(--salt-ease), box-shadow 300ms var(--salt-ease);
}

.salt-location-directions .wp-block-button__link:hover {
	box-shadow: 0 22px 52px rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}

@media (max-width: 980px) {
	.salt-location-panel {
		grid-template-columns: 1fr;
	}

	.salt-location-copy {
		padding-block: 42px;
	}

	.salt-location-description {
		max-width: 560px;
	}

	.salt-location-map-visual {
		min-height: clamp(340px, 54vw, 520px) !important;
	}
}

@media (max-width: 640px) {
	.salt-location-editorial {
		padding-inline: 18px;
	}

	.salt-location-panel {
		border-radius: 26px;
	}

	.salt-location-copy {
		padding: 34px 24px;
	}

	.salt-location-map-visual {
		aspect-ratio: 1 / 1;
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		width: 100% !important;
	}

	.salt-location-map-visual .wp-block-cover__image-background {
		content: url("../images/location-map-mobile.png");
		display: block !important;
		height: 100% !important;
		inset: 0;
		object-fit: contain;
		object-position: center center;
		position: absolute;
		width: 100% !important;
	}

	.salt-location-map-visual .wp-block-cover__background {
		display: none;
	}

	.salt-location-map-visual .wp-block-cover__inner-container {
		padding: 22px;
	}

	.salt-location-directions .wp-block-button__link {
		min-width: 0;
		width: 100%;
	}
}

.salt-inquiry {
	background: #090909;
	color: #fff;
}

.salt-inquiry-grid {
	gap: clamp(28px, 7vw, 100px);
}

.salt-form {
	background: #ffffff;
	border-radius: var(--salt-radius);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.08), 0 4px 20px rgba(0, 0, 0, 0.02);
	color: #080808;
	display: grid;
	gap: 20px;
	padding: clamp(28px, 5vw, 44px);
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.salt-form label {
	display: grid;
	font-size: 0.72rem;
	font-weight: 800;
	gap: 8px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #080808;
}

.salt-form input,
.salt-form textarea {
	background: #f8f8f8;
	border: 1px solid #e2e2e2;
	border-radius: 14px;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.92rem;
	font-weight: 500;
	padding: 15px 18px;
	width: 100%;
	color: #080808;
	transition: border-color 0.25s var(--salt-ease), background-color 0.25s var(--salt-ease), box-shadow 0.25s var(--salt-ease);
	outline: none;
}

.salt-form input::placeholder,
.salt-form textarea::placeholder {
	color: #888888;
	font-weight: 400;
}

.salt-form input:hover,
.salt-form textarea:hover {
	background: #f3f3f3;
	border-color: #d0d0d0;
}

.salt-form input:focus,
.salt-form textarea:focus {
	background: #ffffff;
	border-color: #c8a84e; /* Salt Gold */
	box-shadow: 0 0 0 4px rgba(200, 168, 78, 0.12);
}

.salt-form button {
	background: #080808;
	border: 2px solid #080808;
	border-radius: 999px;
	color: #ffffff;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0.15em;
	padding: 18px 24px;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.salt-form button::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background-color: #c8a84e; /* Salt Gold */
	border-radius: 50%;
	z-index: -1;
	visibility: hidden;
	transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.salt-form button:hover {
	color: #ffffff;
	border-color: #c8a84e;
	box-shadow: 0 12px 30px rgba(200, 168, 78, 0.24);
}

.salt-form button:hover::after {
	visibility: visible;
	transform: translate(-50%, -50%) scale(60);
}

.salt-form button:active {
	transform: scale(0.98);
}

.salt-inquiry form,
.salt-contact-form {
	background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
	color: #080808;
	max-width: 550px;
	padding: clamp(20px, 3vw, 30px);
}

.salt-inquiry form label,
.salt-contact-form .salt-field {
	display: grid;
	gap: 6px;
	margin: 0;
}

.salt-inquiry form label span,
.salt-contact-form label {
	color: #080808;
	display: block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
}

.salt-inquiry form input,
.salt-inquiry form textarea,
.salt-contact-form input[type="text"],
.salt-contact-form input[type="email"],
.salt-contact-form input[type="tel"],
.salt-contact-form textarea {
	background: #f7f7f4;
	border: 1px solid #dedbd2;
	border-radius: 14px;
	box-shadow: none;
	box-sizing: border-box;
	color: #080808;
	display: block;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	outline: 0;
	padding: 0 14px;
	transition: border-color 0.25s var(--salt-ease), background-color 0.25s var(--salt-ease), box-shadow 0.25s var(--salt-ease);
	width: 100%;
}

.salt-inquiry form input,
.salt-contact-form input[type="text"],
.salt-contact-form input[type="email"],
.salt-contact-form input[type="tel"] {
	height: 46px;
}

.salt-inquiry form input[type="tel"],
.salt-contact-form input[type="tel"] {
	direction: ltr;
	text-align: left;
}

.salt-inquiry form textarea,
.salt-contact-form textarea {
	min-height: 104px;
	padding-bottom: 12px;
	padding-top: 12px;
	resize: vertical;
}

.salt-inquiry form input::placeholder,
.salt-inquiry form textarea::placeholder,
.salt-contact-form input::placeholder,
.salt-contact-form textarea::placeholder {
	color: #8f8a7e;
	font-weight: 500;
	opacity: 1;
}

.salt-inquiry form input:hover,
.salt-inquiry form textarea:hover,
.salt-contact-form input:hover,
.salt-contact-form textarea:hover {
	background: #ffffff;
	border-color: rgba(200, 168, 78, 0.5);
}

.salt-inquiry form input:focus,
.salt-inquiry form textarea:focus,
.salt-contact-form input:focus,
.salt-contact-form textarea:focus {
	background: #ffffff;
	border-color: #c8a84e;
	box-shadow: 0 0 0 4px rgba(200, 168, 78, 0.12);
}

.salt-inquiry form button,
.salt-contact-form input[type="submit"] {
	background: #062735;
	border: 1px solid #062735;
	border-radius: 999px;
	box-shadow: none;
	color: #ffffff;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0;
	margin-top: 4px;
	min-height: 48px;
	overflow: hidden;
	padding: 0 25px;
	position: relative;
	text-transform: none;
	transition: background-color 0.25s var(--salt-ease), border-color 0.25s var(--salt-ease), color 0.25s var(--salt-ease), transform 0.25s var(--salt-ease), box-shadow 0.25s var(--salt-ease);
	width: 100%;
}

.salt-inquiry form button:hover,
.salt-contact-form input[type="submit"]:hover {
	background: #c8a84e;
	border-color: #c8a84e;
	box-shadow: 0 12px 30px rgba(200, 168, 78, 0.24);
	color: #062735;
	transform: translateY(-2px);
}

.salt-inquiry form button::after {
	display: none;
}

.salt-inquiry form .iti,
.salt-form .iti,
.salt-contact-form .iti,
.salt-floating-modal-form .iti {
	display: block;
	width: 100%;
}

.salt-inquiry form .iti input[type="tel"],
.salt-form .iti input[type="tel"],
.salt-contact-form .iti input[type="tel"],
.salt-floating-modal-form .iti input[type="tel"] {
	direction: ltr;
	font-weight: 700;
	padding-left: 116px !important;
	padding-right: 16px !important;
	text-align: left;
}

.salt-inquiry form .iti--allow-dropdown input[type="tel"],
.salt-inquiry form .iti--show-selected-dial-code input[type="tel"],
.salt-form .iti--allow-dropdown input[type="tel"],
.salt-form .iti--show-selected-dial-code input[type="tel"],
.salt-contact-form .iti--allow-dropdown input[type="tel"],
.salt-contact-form .iti--show-selected-dial-code input[type="tel"],
.salt-floating-modal-form .iti--allow-dropdown input[type="tel"],
.salt-floating-modal-form .iti--show-selected-dial-code input[type="tel"] {
	padding-left: 116px !important;
	padding-right: 16px !important;
}

.salt-inquiry form .iti__country-container,
.salt-form .iti__country-container,
.salt-contact-form .iti__country-container,
.salt-floating-modal-form .iti__country-container {
	/* left: 5px; */
	right: auto;
	/* top: 5px; */
	/* bottom: 5px; */
	width: 96px;
}

.salt-inquiry form .iti__selected-country,
.salt-form .iti__selected-country,
.salt-contact-form .iti__selected-country,
.salt-floating-modal-form .iti__selected-country {
	background: #f6f4ee !important;
	border: 1px solid rgba(200, 168, 78, 0.34);
	border-radius: 12px;
	box-sizing: border-box;
	color: #062735;
	gap: 6px;
	height: 100%;
	justify-content: center;
	margin: 0;
	min-width: 0;
	padding: 0 8px;
	transition: background-color 0.25s var(--salt-ease), border-color 0.25s var(--salt-ease);
	width: 96px;
}

.salt-inquiry form .iti__selected-country-primary,
.salt-form .iti__selected-country-primary,
.salt-contact-form .iti__selected-country-primary,
.salt-floating-modal-form .iti__selected-country-primary {
	align-items: center;
	display: flex;
	gap: 7px;
	padding: 0;
}

.salt-inquiry form .iti__selected-country:hover,
.salt-form .iti__selected-country:hover,
.salt-contact-form .iti__selected-country:hover,
.salt-floating-modal-form .iti__selected-country:hover {
	background: #ffffff !important;
	border-color: rgba(200, 168, 78, 0.42);
}

.salt-inquiry form .iti__selected-dial-code,
.salt-form .iti__selected-dial-code,
.salt-contact-form .iti__selected-dial-code,
.salt-floating-modal-form .iti__selected-dial-code {
	color: #062735;
	display: inline-block !important;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	margin-left: 4px;
	white-space: nowrap;
}

.salt-inquiry form .iti__arrow,
.salt-form .iti__arrow,
.salt-contact-form .iti__arrow,
.salt-floating-modal-form .iti__arrow {
	border-top-color: #062735;
	margin-left: 0;
}

.salt-inquiry form .iti__country-list,
.salt-form .iti__country-list,
.salt-contact-form .iti__country-list,
.salt-floating-modal-form .iti__country-list {
	border: 1px solid rgba(6, 39, 53, 0.12);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(6, 39, 53, 0.18);
	color: #080808;
	font-family: inherit;
	font-size: 13px;
	overflow: hidden;
	text-align: left;
	z-index: 10020;
}

.salt-inquiry form .iti__country,
.salt-form .iti__country,
.salt-contact-form .iti__country,
.salt-floating-modal-form .iti__country {
	align-items: center;
	display: flex;
	gap: 8px;
	padding: 9px 12px;
}

.salt-inquiry form .iti__country.iti__highlight,
.salt-form .iti__country.iti__highlight,
.salt-contact-form .iti__country.iti__highlight,
.salt-floating-modal-form .iti__country.iti__highlight {
	background: rgba(200, 168, 78, 0.15);
}

body.rtl .salt-inquiry form .iti,
body.rtl .salt-form .iti,
body.rtl .salt-contact-form .iti,
body.rtl .salt-floating-modal-form .iti,
[dir="rtl"] .salt-inquiry form .iti,
[dir="rtl"] .salt-form .iti,
[dir="rtl"] .salt-contact-form .iti,
[dir="rtl"] .salt-floating-modal-form .iti {
	direction: ltr;
}

@media (max-width: 600px) {
	.salt-inquiry form,
	.salt-contact-form {
		border-radius: 18px;
		padding: 18px 16px;
	}

	.salt-inquiry form input,
	.salt-contact-form input[type="text"],
	.salt-contact-form input[type="email"],
	.salt-contact-form input[type="tel"] {
		height: 44px;
	}

	.salt-inquiry form textarea,
	.salt-contact-form textarea {
		min-height: 96px;
	}

	.salt-inquiry form .iti__country-list,
	.salt-form .iti__country-list,
	.salt-contact-form .iti__country-list,
	.salt-floating-modal-form .iti__country-list {
		max-width: calc(100vw - 42px);
		width: calc(100vw - 42px);
	}

	.salt-inquiry form .iti input[type="tel"],
	.salt-form .iti input[type="tel"],
	.salt-contact-form .iti input[type="tel"],
	.salt-floating-modal-form .iti input[type="tel"] {
		padding-left: 108px !important;
		padding-right: 14px !important;
	}
}


.salt-footer {
	background: #050505;
	color: rgba(255, 255, 255, 0.82);
	max-width: none;
	padding: 64px clamp(18px, 4vw, 64px) 34px;
}

.salt-footer a {
	color: #fff;
}

.salt-footer h3,
.salt-footer h4 {
	color: #fff;
}

.salt-footer-copy {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 36px;
	padding-top: 22px;
}

.salt-page-main {
	padding: 140px clamp(18px, 4vw, 64px) 80px;
}

.salt-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 650ms var(--salt-ease), transform 650ms var(--salt-ease);
}

.salt-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

[dir="rtl"] .salt-card-track {
	direction: rtl;
}

[dir="rtl"] .salt-header-actions,
[dir="rtl"] .salt-brand-lockup {
	direction: ltr;
}

@media (max-width: 900px) {
	.salt-wordmark {
		display: none;
	}

	.salt-header-inner {
		padding-inline: 14px;
	}

	.salt-interest-button {
		display: none;
	}

	.salt-card-track {
		grid-auto-columns: minmax(270px, 82vw);
	}

	.salt-section {
		padding-block: 72px;
	}

	.salt-zone-card,
	.salt-feature-card,
	.salt-experience-card {
		min-height: 460px !important;
	}
}

@media (max-width: 600px) {
	:root {
		--salt-header-height: 66px;
	}

	.salt-logo-tatweer img {
		width: 64px !important;
		height: auto !important;
	}

	.salt-logo-mark img {
		width: 104px !important;
		height: auto !important;
	}

	.salt-brand-lockup {
		gap: 8px;
	}

	.salt-section-title {
		font-size: clamp(2.35rem, 14vw, 4.6rem);
	}
}

/* Reference hero treatment */
.salt-site-header {
	background: transparent;
	border-top: 2px solid rgba(0, 0, 0, 0.35);
}

.salt-site-header.is-scrolled {
	background: rgba(34, 52, 61, 0.72);
}

.salt-header-inner {
	border-bottom: 1px solid rgba(255, 255, 255, 0.24);
	margin-inline: clamp(18px, 3.2vw, 62px);
	min-height: 118px;
	padding: 28px 0 24px;
	width: auto;
}

.salt-brand-lockup {
	gap: 24px;
}

.salt-brand-divider {
	background: rgba(255, 255, 255, 0.45);
	height: 50px;
	margin: 0;
	width: 1px;
}

.salt-logo-tatweer img {
	width: 58px !important;
}

.salt-logo-mark img {
	width: 96px !important;
}

.salt-wordmark {
	color: rgba(255, 255, 255, 0.42);
	font-size: clamp(2rem, 3vw, 3.15rem);
	letter-spacing: 0;
	top: 82px;
}

.salt-wordmark span {
	color: rgba(255, 255, 255, 0.56);
	font-size: 0.16em;
	margin-left: 3px;
	vertical-align: middle;
}

.salt-interest-button .wp-block-button__link,
.salt-site-header .wp-block-button__link {
	background: #fff;
	border: 0;
	color: #0a0a0a;
	font-size: 0.83rem;
	min-width: 146px;
	padding: 14px 22px;
}

.salt-menu-button {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.76);
	font-size: 1.15rem;
	height: 44px;
	width: 44px;
}

.salt-sticky-nav {
	background: rgba(126, 133, 138, 0.58);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	left: 0;
	position: fixed;
	right: 0;
	top: 120px;
	z-index: 90;
}

.salt-sticky-nav-inner {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	justify-content: center;
	margin-inline: clamp(18px, 3.2vw, 62px);
	padding: 14px 0 16px;
}

.salt-sticky-nav a {
	border-bottom: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.26);
	color: #fff;
	font-size: 0.95rem;
	padding: 0 22px;
	text-transform: none;
}

.salt-sticky-nav p:last-child a {
	border-right: 0;
}

.salt-sticky-nav a.is-active,
.salt-sticky-nav a:hover {
	color: #fff;
	text-shadow: 0 0 18px rgba(255, 255, 255, 0.6);
}

@media (max-width: 760px) {
	.salt-header-inner {
		margin-inline: 16px;
		min-height: 78px;
		padding: 18px 0;
	}

	.salt-sticky-nav {
		display: none;
	}

	.salt-wordmark {
		display: none;
	}

	.salt-brand-divider {
		height: 34px;
	}

}

/* Project highlights editorial layout */
.salt-highlights-editorial {
	background: #f3f3f3;
	color: #050505;
	overflow: hidden;
	padding: clamp(72px, 8vw, 102px) 0 clamp(76px, 8vw, 110px) clamp(28px, 5.7vw, 108px);
}

.salt-highlights-header {
	margin-bottom: clamp(38px, 4vw, 58px);
	padding-right: clamp(28px, 4.6vw, 88px);
}

.salt-highlights-title {
	font-family: Inter, Arial, sans-serif;
	font-size: clamp(0.9rem, 1vw, 1.08rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.salt-highlights-arrows {
	gap: 10px;
}

.salt-highlights-arrows .wp-block-button__link {
	align-items: center;
	background: transparent;
	border: 1px solid #c7cbd0;
	color: #b4b8bd;
	display: flex;
	font-size: 1.35rem;
	font-weight: 400;
	height: 38px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 38px;
}

.salt-highlights-row {
	align-items: start;
	display: grid;
	gap: clamp(34px, 2.6vw, 50px);
	grid-auto-flow: column;
	grid-auto-columns: clamp(300px, 21.6vw, 415px);
	grid-template-columns: none;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 clamp(32px, 4.6vw, 88px) 28px 0;
	scroll-behavior: smooth;
	scroll-snap-type: inline mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.salt-highlights-row::-webkit-scrollbar {
	display: none;
}

.salt-highlights-row > .salt-highlight-card {
	min-width: 0;
	scroll-snap-align: start;
}

.salt-highlight-card {
	background: transparent;
	box-sizing: border-box;
	transition: transform 650ms var(--salt-ease);
}

.salt-highlights-editorial .salt-reveal {
	transform: translateY(34px) scale(0.985);
	transition:
		opacity 900ms var(--salt-ease),
		transform 900ms var(--salt-ease);
}

.salt-highlights-editorial .salt-reveal.is-visible {
	transform: translateY(0) scale(1);
}

.salt-highlights-row .salt-highlight-card:nth-child(2) {
	transition-delay: 70ms;
}

.salt-highlights-row .salt-highlight-card:nth-child(3) {
	transition-delay: 140ms;
}

.salt-highlights-row .salt-highlight-card:nth-child(4) {
	transition-delay: 210ms;
}

.salt-highlights-row .salt-highlight-card:nth-child(5) {
	transition-delay: 280ms;
}

.salt-highlight-card figure {
	aspect-ratio: 1 / 1.1;
	border-radius: 32px;
	margin: 0 0 20px;
	overflow: hidden;
	width: 100%;
}

.salt-highlight-card img {
	display: block;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform 900ms var(--salt-ease), filter 900ms var(--salt-ease);
	width: 100%;
}

.salt-highlight-card:hover {
	transform: translateY(-8px);
}

.salt-highlight-card:hover img {
	filter: saturate(1.08) contrast(1.04);
	transform: scale(1.075);
}

.salt-highlight-card h3 {
	color: #030303;
	font-family: Inter, Arial, sans-serif;
	font-size: clamp(0.9rem, 0.86vw, 1rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.25;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.salt-highlight-card p {
	color: #080808;
	font-size: clamp(0.84rem, 0.78vw, 0.94rem);
	font-weight: 500;
	line-height: 1.45;
	margin: 0;
}

.salt-highlight-card-large {
	border-radius: 34px;
	grid-column: span 2;
	min-height: 430px !important;
	overflow: hidden;
}

.salt-highlight-card-large .wp-block-cover__image-background {
	transition: transform 950ms var(--salt-ease), filter 950ms var(--salt-ease);
}

.salt-highlight-card-large:hover .wp-block-cover__image-background {
	filter: saturate(1.08) contrast(1.04);
	transform: scale(1.06);
}

.salt-highlight-card-large::after {
	background:
		linear-gradient(180deg, rgba(120, 150, 170, 0.45), rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.62)),
		linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.salt-highlight-card-large .wp-block-cover__inner-container {
	align-content: space-between;
	box-sizing: border-box;
	display: grid;
	height: 100%;
	padding: clamp(24px, 2.3vw, 38px);
	position: relative;
	z-index: 1;
}

.salt-highlight-card-large h3 {
	color: #fff;
	font-family: Inter, Arial, sans-serif;
	font-size: clamp(1rem, 1vw, 1.13rem);
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
	text-transform: uppercase;
}

.salt-highlight-card-large p {
	color: #fff;
	font-size: clamp(0.82rem, 0.78vw, 0.95rem);
	font-weight: 700;
	line-height: 1.48;
	max-width: 390px;
}

.salt-highlight-facts {
	align-self: end;
	gap: 28px;
	margin-top: auto;
}

.salt-highlight-facts p {
	font-size: clamp(0.78rem, 0.76vw, 0.92rem);
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

.salt-highlight-card-large .wp-block-cover__image-background {
	object-position: center center;
}

@media (max-width: 1400px) {
	.salt-highlights-row {
		grid-auto-columns: clamp(270px, 29vw, 360px);
	}
}

@media (max-width: 760px) {
	.salt-highlights-editorial {
		padding-left: 18px;
	}

	.salt-highlights-row {
		gap: 22px;
		grid-auto-columns: minmax(248px, 78vw);
		padding-right: 18px;
	}

	.salt-highlight-card-large {
		grid-column: span 1;
		min-height: 420px !important;
	}

	.salt-highlight-facts {
		flex-wrap: wrap !important;
		gap: 12px 18px;
	}
}

.salt-highlights-dots {
	gap: 12px;
	margin-top: -14px;
	padding-right: clamp(28px, 4.6vw, 88px);
}

.salt-highlights-dots p {
	background: rgba(0, 0, 0, 0.25);
	border-radius: 999px;
	height: 10px;
	margin: 0;
	width: 10px;
}

.salt-highlights-dots p.is-active {
	background: #050505;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.salt-reveal,
	.salt-highlight-card,
	.salt-experience-card,
	.salt-zone-showcase .wp-block-cover__image-background,
	.salt-experiences-track .wp-block-cover__image-background,
	.salt-highlights-row,
	.salt-experiences-track,
}

/* Experiences editorial carousel */
.salt-experiences-editorial {
	background: #fff;
	color: #050505;
	overflow: hidden;
	padding: clamp(72px, 7vw, 92px) 0 clamp(84px, 7vw, 118px) clamp(28px, 4.5vw, 86px);
}

.salt-experiences-header {
	margin-bottom: clamp(58px, 6vw, 74px);
	padding-right: clamp(28px, 5vw, 96px);
}

.salt-experiences-heading {
	margin: 0;
	max-width: min(760px, 70vw);
}

.salt-experiences-heading h2 {
	color: #050505;
	font-family: Inter, Arial, sans-serif;
	font-size: clamp(1.35rem, 1.45vw, 1.65rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.15;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.salt-experiences-heading p {
	color: #050505;
	font-size: clamp(0.95rem, 0.95vw, 1.12rem);
	font-weight: 600;
	line-height: 1.45;
	margin: 0;
}

.salt-experiences-arrows {
	gap: 12px;
	margin-top: 10px;
}

.salt-experiences-arrows .wp-block-button__link {
	align-items: center;
	background: transparent;
	border: 1px solid #cfd2d5;
	border-radius: 50%;
	color: #b8bdc2;
	display: flex;
	font-size: 1.6rem;
	font-weight: 300;
	height: 50px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	text-transform: none;
	transition: border-color 300ms var(--salt-ease), color 300ms var(--salt-ease), transform 300ms var(--salt-ease);
	width: 50px;
}

.salt-experiences-arrows .salt-experiences-next .wp-block-button__link {
	border-color: #050505;
	color: #050505;
}

.salt-experiences-arrows .wp-block-button__link:hover {
	border-color: #050505;
	color: #050505;
	transform: translateY(-2px);
}

.salt-experiences-track {
	--salt-experiences-gap: clamp(28px, 2.35vw, 44px);
	--salt-experiences-left: clamp(28px, 4.5vw, 86px);
	--salt-experiences-right: clamp(28px, 5vw, 96px);

	display: grid;
	gap: var(--salt-experiences-gap);
	grid-auto-columns: max(300px, calc((100vw - var(--salt-experiences-left) - var(--salt-experiences-right) - var(--salt-experiences-gap) - var(--salt-experiences-gap)) / 3));
	grid-auto-flow: column;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 var(--salt-experiences-right) 18px 0;
	scroll-behavior: smooth;
	scroll-snap-type: inline mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.salt-experiences-track::-webkit-scrollbar {
	display: none;
}

.salt-experiences-track .salt-experience-card {
	border-radius: 32px;
	box-sizing: border-box;
	min-height: clamp(420px, 27vw, 520px) !important;
	overflow: hidden;
	scroll-snap-align: start;
	width: 100%;
}

.salt-experiences-track .salt-experience-card-large {
	grid-column: span 1;
}

.salt-experiences-track .salt-experience-card-small {
	grid-column: span 1;
	min-width: clamp(320px, 22vw, 420px);
}

.salt-experiences-track .salt-experience-card::after {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.02) 20%, rgba(0, 0, 0, 0.28) 56%, rgba(0, 0, 0, 0.72)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.salt-experiences-track .wp-block-cover__image-background {
	transition: transform 950ms var(--salt-ease), filter 950ms var(--salt-ease);
}

.salt-experiences-track .salt-experience-card:hover .wp-block-cover__image-background {
	filter: saturate(1.08) contrast(1.04);
	transform: scale(1.065);
}

.salt-experiences-track .salt-experience-card .wp-block-cover__inner-container {
	align-content: end;
	box-sizing: border-box;
	display: grid;
	height: 100%;
	padding: clamp(28px, 2.4vw, 42px);
	position: relative;
	z-index: 1;
}

.salt-experiences-track .salt-experience-card h3 {
	color: #fff;
	font-family: Inter, Arial, sans-serif;
	font-size: clamp(1.55rem, 1.7vw, 2rem);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.salt-experiences-track .salt-experience-card p {
	color: #fff;
	font-size: clamp(0.95rem, 0.98vw, 1.12rem);
	font-weight: 700;
	line-height: 1.45;
	margin: 0;
	max-width: 780px;
}

@media (max-width: 1180px) {
	.salt-experiences-track {
		grid-auto-columns: max(340px, calc((100vw - var(--salt-experiences-left) - var(--salt-experiences-right) - var(--salt-experiences-gap)) / 2));
	}

	.salt-experiences-heading {
		max-width: 74vw;
	}
}

@media (max-width: 760px) {
	.salt-experiences-editorial {
		padding-left: 18px;
	}

	.salt-experiences-header {
		align-items: flex-start !important;
		display: grid !important;
		gap: 24px;
		padding-right: 18px;
	}

	.salt-experiences-heading {
		max-width: none;
	}

	.salt-experiences-track {
		gap: 22px;
		grid-auto-columns: minmax(280px, 84vw);
		padding-right: 18px;
	}

	.salt-experiences-track .salt-experience-card {
		border-radius: 24px;
		min-height: 420px !important;
	}
}

.salt-lang-toggle {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 30px;
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 3px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	user-select: none;
	width: 88px;
	box-sizing: border-box;
	transition: border-color 0.25s var(--salt-ease), background-color 0.25s var(--salt-ease);
}

.salt-lang-toggle:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.3);
}

.salt-lang-toggle-bg {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 3px;
	width: 39px;
	background: #c8a84e; /* Salt Gold */
	border-radius: 25px;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s var(--salt-ease), box-shadow 0.4s var(--salt-ease);
	box-shadow: 0 4px 10px rgba(200, 168, 78, 0.25);
	z-index: 1;
}

.salt-lang-toggle.is-ar .salt-lang-toggle-bg {
	transform: translateX(41px);
}

.salt-lang-toggle:not(.is-ar):hover .salt-lang-toggle-bg {
	transform: translateX(41px);
	background: #ffffff;
	box-shadow: 0 4px 10px rgba(255, 255, 255, 0.25);
}

.salt-lang-toggle.is-ar:hover .salt-lang-toggle-bg {
	transform: translateX(0);
	background: #ffffff;
	box-shadow: 0 4px 10px rgba(255, 255, 255, 0.25);
}

.salt-lang-option {
	position: relative;
	z-index: 2;
	width: 39px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.45);
	transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	text-align: center;
}

.salt-lang-option.is-active {
	color: #ffffff;
	font-weight: 900;
}

/* EN hover transitions */
.salt-lang-toggle:not(.is-ar):hover .salt-lang-option:first-of-type {
	color: rgba(255, 255, 255, 0.45);
	font-weight: 800;
}

.salt-lang-toggle:not(.is-ar):hover .salt-lang-option:last-of-type {
	color: #000000;
	font-weight: 900;
}

/* AR hover transitions */
.salt-lang-toggle.is-ar:hover .salt-lang-option:first-of-type {
	color: #000000;
	font-weight: 900;
}

.salt-lang-toggle.is-ar:hover .salt-lang-option:last-of-type {
	color: rgba(255, 255, 255, 0.45);
	font-weight: 800;
}

@media (max-width: 760px) {
	:root {
		--salt-header-height: 72px;
	}

	.salt-site-header {
		backdrop-filter: blur(14px);
		background: rgba(5, 12, 16, 0.82);
		border-top: 0;
		position: relative;
		top: auto;
	}

	.salt-header-inner {
		align-items: center !important;
		box-sizing: border-box;
		display: flex !important;
		gap: 12px;
		justify-content: space-between !important;
		margin-inline: 14px;
		min-height: var(--salt-header-height);
		padding: 12px 0;
		width: auto;
	}

	.salt-header-actions {
		flex: 0 0 auto;
		gap: 0;
		min-width: 76px;
	}

	.salt-header-actions > .wp-block-buttons,
	.salt-site-header .salt-interest-button {
		display: none !important;
	}

	.salt-brand-lockup {
		flex: 0 1 auto;
		gap: 10px;
		min-width: 0;
	}

	.salt-brand-divider {
		height: 30px;
	}

	.salt-logo-tatweer img {
		height: auto !important;
		width: 42px !important;
	}

	.salt-logo-mark img {
		height: auto !important;
		width: 74px !important;
	}

	.salt-lang-toggle {
		flex: 0 0 auto;
		height: 34px;
		width: 76px;
	}

	.salt-lang-toggle-bg,
	.salt-lang-option {
		width: 33px;
	}

	.salt-lang-toggle.is-ar .salt-lang-toggle-bg,
	.salt-lang-toggle:not(.is-ar):hover .salt-lang-toggle-bg {
		transform: translateX(35px);
	}

	.salt-lang-toggle.is-ar:hover .salt-lang-toggle-bg {
		transform: translateX(0);
	}
}

.salt-floating-contacts {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: fixed;
	right: 24px;
	bottom: 10%;
	transform: none;
	z-index: 9990;
}

	body.rtl .salt-floating-contacts {
		left: 24px;
		right: auto;
	}

.salt-floating-action {
	align-items: center;
	appearance: none;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
	box-sizing: border-box;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	height: 64px;
	justify-content: center;
	padding: 0;
	text-decoration: none;
	transition: transform 240ms var(--salt-ease), box-shadow 240ms var(--salt-ease), background-color 240ms var(--salt-ease);
	width: 64px;
}

.salt-floating-action:hover,
.salt-floating-action:focus-visible {
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
	outline: 0;
	transform: translateY(-3px);
}

.salt-floating-action:focus-visible {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 18px 38px rgba(0, 0, 0, 0.24);
}

.salt-floating-action svg {
	display: block;
	height: 30px;
	width: 30px;
}

.salt-floating-action svg path {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.15;
}

.salt-floating-whatsapp svg {
	height: 32px;
	width: 32px;
}

.salt-floating-whatsapp svg path {
	fill: currentColor;
	stroke: none;
}

.salt-floating-top,
.salt-floating-message {
	background: #46d6d6;
}

.salt-floating-whatsapp {
	background: #25d366;
}

.salt-floating-phone {
	background: #0b7285;
}

.salt-floating-modal-open {
	overflow: hidden;
}

.salt-floating-modal[hidden] {
	display: none;
}

.salt-floating-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: clamp(18px, 4vw, 64px);
	pointer-events: none;
	position: fixed;
	transition: opacity 260ms var(--salt-ease);
	z-index: 10000;
}

.salt-floating-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.salt-floating-modal-backdrop {
	background: rgba(0, 0, 0, 0.68);
	backdrop-filter: blur(10px);
	inset: 0;
	position: absolute;
}

.salt-floating-modal-panel {
	background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
	border: 1px solid rgba(200, 168, 78, 0.24);
	border-radius: 24px;
	box-shadow: 0 34px 100px rgba(0, 25, 34, 0.34);
	box-sizing: border-box;
	color: #080808;
	max-height: calc(100dvh - 28px);
	max-width: 560px;
	overflow: hidden;
	padding: clamp(22px, 2.2vw, 30px);
	position: relative;
	transform: translateY(24px) scale(0.97);
	transition: transform 300ms var(--salt-ease);
	width: min(100%, 560px);
	z-index: 1;
}

.salt-floating-modal.is-open .salt-floating-modal-panel {
	transform: translateY(0) scale(1);
}

.salt-floating-modal-close {
	align-items: center;
	background: #d7b94f;
	border: 0;
	border-radius: 50%;
	color: #062735;
	cursor: pointer;
	display: inline-flex;
	font-size: 1.55rem;
	height: 40px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 18px;
	top: 18px;
	width: 40px;
}

.salt-floating-modal-panel[dir="rtl"] .salt-floating-modal-close {
	left: 18px;
	right: auto;
}

.salt-floating-modal-panel h2 {
	font-family: Inter, Arial, sans-serif;
	font-size: clamp(1.65rem, 2.4vw, 2.15rem);
	line-height: 1.05;
	margin: 0 52px 8px 0;
}

.salt-floating-modal-panel[dir="rtl"] h2 {
	margin: 0 0 10px 52px;
}

.salt-floating-modal-panel > p {
	color: #555;
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 16px;
}

.salt-floating-modal-form .wpcf7-form {
	display: grid;
	gap: 10px;
}

.salt-floating-modal-form p {
	margin: 0;
}

.salt-floating-modal-form label,
.salt-floating-modal-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.salt-floating-modal-form input:not([type="submit"]),
.salt-floating-modal-form textarea,
.salt-floating-modal-form select {
	background: #fbfaf6;
	border: 1px solid rgba(6, 39, 53, 0.14);
	border-radius: 14px;
	box-sizing: border-box;
	color: #080808;
	font: inherit;
	min-height: 50px;
	padding: 12px 16px;
	width: 100%;
}

.salt-floating-modal-form textarea {
	min-height: 96px;
	resize: none;
}

.salt-floating-modal-form input[type="submit"],
.salt-floating-modal-form button[type="submit"] {
	background: #062735;
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 900;
	min-height: 52px;
	padding: 14px 24px;
	text-transform: uppercase;
	width: 100%;
}

.salt-floating-modal-form .salt-contact-form {
	background: transparent;
	box-shadow: none;
	display: grid;
	gap: 10px;
	max-width: none;
	padding: 0;
	width: 100%;
}

.salt-floating-modal-form .salt-contact-form .salt-field {
	gap: 5px;
}

.salt-floating-modal-form .salt-contact-form label {
	font-size: 12px;
	line-height: 1.2;
}

.salt-floating-modal-form .salt-contact-form input[type="text"],
.salt-floating-modal-form .salt-contact-form input[type="email"],
.salt-floating-modal-form .salt-contact-form input[type="tel"] {
	height: 44px;
}

.salt-floating-modal-form .salt-contact-form textarea {
	min-height: 96px;
	resize: none;
}

.salt-floating-modal-form .salt-contact-form input[type="submit"] {
	min-height: 48px;
}

@media (max-width: 760px) {
	body {
		--salt-floating-mobile-inset: calc(112px + env(safe-area-inset-bottom));
		padding-bottom:0;
	}

	.salt-floating-contacts,
	body.rtl .salt-floating-contacts {
		background: rgba(5, 12, 16, 0.9);
		backdrop-filter: blur(14px);
		border-radius: 26px 26px 0 0;
		bottom: 0;
		box-sizing: border-box;
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		left: 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		right: 0;
		top: auto;
		transform: none;
		width: 100%;
	}

	.salt-floating-action {
		height: 54px;
		margin: 0 auto;
		width: 54px;
	}

	.salt-floating-action svg {
		height: 25px;
		width: 25px;
	}

	.salt-floating-modal {
		align-items: end;
		padding: 16px 12px calc(92px + env(safe-area-inset-bottom));
	}

	.salt-floating-modal-panel {
		border-radius: 22px;
		max-height: calc(100vh - 124px);
		padding: 26px 20px;
	}
}

/* Polished floating contact treatment */
.salt-floating-contacts {
	background: linear-gradient(180deg, rgba(7, 50, 65, 0.92), rgba(4, 37, 50, 0.92));
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	box-shadow: 0 24px 70px rgba(0, 34, 48, 0.28);
	gap: 12px;
	padding: 12px;
}

@media (min-width: 761px) {
	.salt-floating-contacts {
		bottom: 10%;
		top: auto;
		transform: none;
	}
}

.salt-floating-action {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 32px rgba(0, 0, 0, 0.18);
	height: 58px;
	width: 58px;
}

.salt-floating-top,
.salt-floating-message {
	background: linear-gradient(145deg, #f1d879, #c8a84e 58%, #8f6f1e) !important;
	color: #062735;
}

.salt-floating-whatsapp {
	background: linear-gradient(145deg, #2ee675, #18b857);
	color: #ffffff;
}

.salt-floating-phone {
	background: linear-gradient(145deg, #35c2c7, #0b7285 58%, #06475a);
	color: #ffffff;
}

.inner-cursor,
.outer-cursor {
	display: none;
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	z-index: 100000;
}

@media (hover: hover) and (pointer: fine) {
	.salt-custom-cursor-active body {
		cursor: none;
	}

	.salt-custom-cursor-active a,
	.salt-custom-cursor-active button,
	.salt-custom-cursor-active input,
	.salt-custom-cursor-active textarea,
	.salt-custom-cursor-active select,
	.salt-custom-cursor-active label,
	.salt-custom-cursor-active [role="button"] {
		cursor: none;
	}

	.inner-cursor,
	.outer-cursor {
		display: block;
		opacity: 0;
		transition: opacity 180ms ease, width 220ms var(--salt-ease), height 220ms var(--salt-ease), border-color 220ms var(--salt-ease), background-color 220ms var(--salt-ease);
	}

	.salt-custom-cursor-active .inner-cursor,
	.salt-custom-cursor-active .outer-cursor {
		opacity: 1;
	}

	.inner-cursor {
		background: #c8a84e;
		border-radius: 50%;
		box-shadow: 0 0 18px rgba(200, 168, 78, 0.34);
		height: 8px;
		width: 8px;
	}

	.outer-cursor {
		border: 1px solid rgba(200, 168, 78, 0.76);
		border-radius: 50%;
		height: 36px;
		width: 36px;
	}

	.salt-cursor-hover .inner-cursor {
		background: #ffffff;
		height: 6px;
		width: 6px;
	}

	.salt-cursor-hover .outer-cursor {
		background: rgba(200, 168, 78, 0.18);
		border-color: rgba(200, 168, 78, 0.92);
		height: 54px;
		width: 54px;
	}
}

.salt-floating-top {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	visibility: visible;
}

.salt-floating-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	visibility: visible;
}

.salt-floating-top:not(.is-visible):hover,
.salt-floating-top:not(.is-visible):focus-visible {
	transform: translateY(-3px);
}

@media (max-width: 760px) {
	.salt-floating-contacts,
	body.rtl .salt-floating-contacts {
		background: linear-gradient(180deg, rgba(5, 44, 58, 0.94), rgba(4, 33, 45, 0.96));
		border-color: rgba(255, 255, 255, 0.12);
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -18px 46px rgba(0, 20, 28, 0.28);
		padding-top: 10px;
	}

	.salt-floating-action {
		height: 52px;
		width: 52px;
	}

	.salt-floating-top {
		transform: translateY(0) scale(1);
	}

	.salt-floating-top.is-visible {
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 600px) {
	.salt-inquiry {
		overflow-x: hidden;
		padding-bottom: calc(128px + env(safe-area-inset-bottom));
		padding-inline: 14px;
	}

	.salt-inquiry-grid,
	.salt-inquiry-grid > .wp-block-column {
		box-sizing: border-box;
		margin-inline: 0 !important;
		max-width: 100% !important;
		min-width: 0;
		width: 100% !important;
	}

	.salt-inquiry form,
	.salt-form,
	.salt-contact-form {
		border-radius: 18px;
		box-sizing: border-box;
		margin-inline: auto;
		max-width: 100% !important;
		overflow: hidden;
		padding: 18px 14px !important;
		width: 100% !important;
	}

	.salt-inquiry form label,
	.salt-form label,
	.salt-contact-form .salt-field {
		box-sizing: border-box;
		min-width: 0;
		width: 100%;
	}

	.salt-inquiry form input,
	.salt-inquiry form textarea,
	.salt-form input,
	.salt-form textarea,
	.salt-contact-form input[type="text"],
	.salt-contact-form input[type="email"],
	.salt-contact-form input[type="tel"],
	.salt-contact-form textarea {
		box-sizing: border-box;
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 760px) {
	.salt-inquiry .salt-section-title,
	body.rtl .salt-inquiry .salt-section-title {
		font-size: clamp(2.55rem, 12vw, 4.15rem);
		line-height: 0.96;
		max-width: 100%;
		overflow-wrap: normal;
	}

	.salt-floating-modal {
		padding: 14px 12px calc(96px + env(safe-area-inset-bottom));
	}

	.salt-floating-modal-panel {
		background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
		border: 1px solid rgba(200, 168, 78, 0.28);
		border-radius: 24px 24px 18px 18px;
		box-shadow: 0 28px 80px rgba(0, 25, 34, 0.38);
		max-height: calc(100dvh - 104px);
		overflow: hidden;
		padding: 20px 16px 18px;
	}

	.salt-floating-modal-panel::before {
		background: rgba(6, 39, 53, 0.18);
		border-radius: 999px;
		content: "";
		display: block;
		height: 4px;
		margin: 0 auto 12px;
		width: 48px;
	}

	.salt-floating-modal-close {
		background: #d7b94f;
		color: #062735;
		height: 38px;
		width: 38px;
	}

	.salt-floating-modal-panel h2 {
		font-size: clamp(1.45rem, 7vw, 2rem);
		margin-bottom: 8px;
	}

	.salt-floating-modal-panel > p {
		font-size: 0.88rem;
		margin-bottom: 12px;
	}

	.salt-floating-modal-form .wpcf7-form {
		gap: 10px;
	}

	.salt-floating-modal-form input:not([type="submit"]),
	.salt-floating-modal-form textarea,
	.salt-floating-modal-form select {
		border-color: rgba(6, 39, 53, 0.14);
		min-height: 46px;
	}

	.salt-floating-modal-form textarea {
		min-height: 82px;
	}

	.salt-floating-modal-form .salt-contact-form {
		gap: 8px;
	}

	.salt-floating-modal-form .salt-contact-form textarea {
		min-height: 82px;
	}

	.salt-form-focus .salt-floating-contacts,
	html.salt-form-focus body.rtl .salt-floating-contacts {
		opacity: 0;
		pointer-events: none;
		transform: translateY(calc(100% + 18px));
	}
}

/* ---------------------------------------------------------------------------
   Polish added during the pre-launch engineering review.
   Nothing here changes a colour, a size, a spacing value or a position: it
   restores styling that was previously only correct because the elements
   happened to be buttons, and adds the utility the accessible heading needs.
   --------------------------------------------------------------------------- */

/* The language switcher is an <a> now rather than a <button onclick>. A button
   carries no text-decoration and inherits no link colour, so both are pinned
   here to keep the rendering byte-identical to before. */
a.salt-lang-toggle,
a.salt-lang-toggle:hover,
a.salt-lang-toggle:focus,
a.salt-lang-toggle:visited {
	text-decoration: none;
	color: inherit;
}

a.salt-lang-toggle:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Off-screen, not display:none: a hidden heading still has to be reachable by
   a screen reader, and clip-path keeps it out of the layout without creating
   scrollable overflow in either text direction. */
.screen-reader-text:not(:focus):not(:active) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* FAQ ---------------------------------------------------------------------
   Uses the section rhythm, the gold accent and the radius already defined at
   the top of this file, so it reads as part of the existing design rather
   than as something bolted on. */
.salt-faq-list {
	margin-top: 40px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.salt-faq-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.salt-faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	line-height: 1.4;
	transition: color 0.25s var(--salt-ease);
}

.salt-faq-item > summary::-webkit-details-marker {
	display: none;
}

.salt-faq-item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
	transition: transform 0.25s var(--salt-ease);
}

.salt-faq-item[open] > summary::after {
	transform: rotate(45deg);
}

.salt-faq-item > summary:hover,
.salt-faq-item[open] > summary {
	color: var(--wp--preset--color--gold, #c8a84e);
}

.salt-faq-item > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold, #c8a84e);
	outline-offset: 4px;
}

.salt-faq-answer {
	padding: 0 0 24px;
	max-width: 78ch;
	line-height: 1.85;
	opacity: 0.82;
}

[dir="rtl"] .salt-faq-item > summary,
.rtl .salt-faq-item > summary {
	text-align: right;
}

/* ===========================================================================
   Pre-launch polish
   Layout, palette, type scale, spacing scale and section order are untouched.
   What changes here is behaviour under conditions the original CSS did not
   cover: keyboard focus, reduced motion, coarse pointers, and text that has
   to break somewhere.
   =========================================================================== */

/* --- focus -----------------------------------------------------------------
   There were focus rules on 13 selectors and nothing anywhere else, so
   tabbing through the page went invisible for long stretches. One ring, on
   :focus-visible so it never shows for a mouse click, in the brand gold with
   a white companion for dark sections. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold, #c8a84e);
	outline-offset: 3px;
	border-radius: 2px;
}

.salt-hero-slider :where(a, button):focus-visible,
.video-venue-section :where(a, button):focus-visible,
.salt-floating-contacts :where(a, button):focus-visible {
	outline-color: #ffffff;
}

/* iOS paints a grey box on tap that reads as a rendering fault on a dark
   photograph. The focus ring above is the accessible replacement. */
:where(a, button, summary, [role="button"]) {
	-webkit-tap-highlight-color: transparent;
}

/* --- reduced motion --------------------------------------------------------
   The site runs a hero slider, two carousels, scroll animations, a custom
   cursor and 37 transitions. Only two files checked whether the visitor had
   asked for less of that. For a vestibular user this is the difference
   between a usable page and an unusable one. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/* A cursor that lags the pointer is motion. Give the real one back. */
	.salt-custom-cursor-active body,
	.salt-custom-cursor-active a,
	.salt-custom-cursor-active button,
	.salt-custom-cursor-active input,
	.salt-custom-cursor-active textarea,
	.salt-custom-cursor-active select,
	.salt-custom-cursor-active label,
	.salt-custom-cursor-active [role="button"] {
		cursor: auto;
	}

	.inner-cursor,
	.outer-cursor {
		display: none !important;
	}
}

/* Keyboard users get the system cursor back too: the custom one follows the
   pointer, and a pointer is not what they are navigating with. */
.salt-custom-cursor-active:has(:focus-visible) body {
	cursor: auto;
}

/* --- tap targets -----------------------------------------------------------
   Anything a thumb has to hit gets a 44px box. The border stays the visual;
   only the hit area grows, so nothing moves. */
@media (max-width: 781px) {
	.salt-sticky-nav-inner a,
	.salt-lang-toggle,
	.salt-faq-item > summary,
	.wp-block-button__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.salt-faq-item > summary {
		justify-content: space-between;
	}
}

/* --- typography rhythm -----------------------------------------------------
   Headings set in a display face at large sizes strand single words on the
   last line. Balancing the lines is a break-point change only: the box, the
   size and the leading are all unchanged. */
.salt-section-title,
.salt-hero-title,
h1, h2 {
	text-wrap: balance;
}

p, li, .salt-faq-answer {
	text-wrap: pretty;
}

/* Long unbroken strings - a URL, an English product name inside Arabic copy -
   used to widen their container and push the page sideways. */
body {
	overflow-wrap: break-word;
}

/* Weight synthesis is switched ON deliberately, and this is worth explaining
   because the previous round of this stylesheet switched it off.

   The theme ships one real face per family, both of them regular. Every
   heading the design sets at 800 or 900 therefore has no real face to use.
   With synthesis off, those headings render at regular weight and the page
   has no typographic hierarchy at all - which is exactly what it looked
   like. With synthesis on, the browser emboldens them: not as good as a real
   bold, and unmistakably better than a heading that is not bold.

   When the real weights are installed (assets/fonts/README.txt), this can
   go back to `none` and the headings will get sharper again. */
body {
	font-synthesis-weight: auto;
}

/* Synthetic bold widens every glyph slightly, which loosens the tight
   setting the display face is chosen for. A touch of negative tracking at
   display sizes gives that back. Sizes and line heights are untouched. */
.salt-hero-title,
.salt-section-title,
h1,
h2 {
	letter-spacing: -0.015em;
}

/* --- small luxury details --------------------------------------------------
   Selection and scrollbar picked up from the palette instead of the browser
   default blue, which is the one place the brand was still leaking. */
::selection {
	background: var(--wp--preset--color--gold, #c8a84e);
	color: #000000;
}

@media (prefers-reduced-motion: no-preference) {
	.salt-faq-item > summary::after,
	.salt-lang-toggle,
	.wp-block-button__link {
		transition-timing-function: var(--salt-ease);
	}
}

/* --- form spam traps -------------------------------------------------------
   Hidden from sight and from assistive technology, but still in the DOM and
   still submitted, which is the whole mechanism. Not display:none, because
   some bots skip fields that are display:none. */
.salt-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

[dir="rtl"] .salt-hp,
.rtl .salt-hp {
	left: auto;
	right: -9999px;
}

/* --- print -----------------------------------------------------------------
   Someone will print the destination page for a client meeting. */
@media print {
	.salt-floating-contacts,
	.salt-floating-modal,
	.salt-sticky-nav,
	.inner-cursor,
	.outer-cursor,
	.salt-hero-arrows {
		display: none !important;
	}

	.salt-faq-item > summary::after {
		display: none;
	}

	.salt-faq-answer {
		display: block !important;
	}
}


/* ===========================================================================
   Design defects found by measuring the rendered pages
   Each fix below is a defect, not a preference. The layout, the palette and
   the type scale are unchanged except where the measurement says the current
   value is broken, and each of those is called out.
   =========================================================================== */

/* --- 1. the stat values were <h3> with no <h2> above them ------------------
   The hero stat bar jumped the document straight from h1 to h3, and "295
   Acres" is a figure, not a section heading. The markup now uses <p>; this
   restores the exact heading appearance so nothing moves. */
.salt-stat-value {
	font-family: var(--wp--preset--font-family--display, "Inter Tight", "Arial Narrow", Arial, sans-serif);
	font-weight: 800;
	line-height: 0.95;
	margin: 0;
	font-size: inherit;
}

.salt-stat-land .salt-stat-value,
.salt-stat-completion .salt-stat-value {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

/* --- 2. a button label at 9.9px -------------------------------------------
   The "EOI" control rendered at 9.9px, which is below the size at which most
   people can read a word at arm's length. Raised to 11px; the control box is
   unchanged. */
.wp-block-button__link,
.wp-element-button {
	font-size: max(0.6875rem, 1em);
}

/* --- 3. the directions button clipped its own label ------------------------
   Measured at 390px: a 50px box containing 61px of text in English and 74px
   in Arabic, so the label was cut off on every phone. Arabic was worse
   because the string is longer. The button now grows to fit. */
.salt-location-directions .wp-block-button__link,
.salt-location-actions .wp-block-button__link {
	height: auto;
	min-height: 50px;
	white-space: normal;
	line-height: 1.25;
	padding-block: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* --- 4. slider arrows were two different sizes ------------------------------
   The highlights carousel used 38px arrows and the experiences carousel 50px,
   in the same design, on the same page. Unified on the larger of the two,
   which is also the one that clears the 44px touch target. */
.salt-highlights-editorial .wp-block-button__link,
.salt-experiences-editorial .wp-block-button__link {
	min-width: 50px;
	min-height: 50px;
}

/* --- 5. section rhythm ------------------------------------------------------
   Two sections had unequal top and bottom padding - 102/110 and 96/115 on
   desktop - which reads as a section that has drifted rather than as a
   rhythm. Squared up on the larger value of each pair, so no section loses
   breathing room. The overall scale between sections is untouched: that is a
   judgement about the design, not a defect a measurement can settle. */
.salt-highlights-editorial {
	padding-block: 110px;
}

.salt-zones-editorial {
	padding-block: 115px;
}

@media (max-width: 781px) {
	.salt-highlights-editorial {
		padding-block: 76px;
	}

	.salt-zones-editorial {
		padding-block: 84px;
	}
}

/* --- 6. the kicker failed contrast on light sections ------------------------
   #c8a84e at 13px on white measures 2.29:1, well under the 4.5:1 small text
   needs. The brand gold is kept everywhere it works - on charcoal it is
   7.60:1 - and only small text on a light ground uses this darker tone of the
   same hue and saturation. */
.salt-kicker {
	color: #7b6426;
}

.salt-hero-slider .salt-kicker,
.video-venue-section .salt-kicker,
.wp-block-cover .salt-kicker,
[class*="is-dark"] .salt-kicker,
.has-charcoal-background-color .salt-kicker,
.has-black-background-color .salt-kicker,
.has-ink-background-color .salt-kicker {
	color: #c8a84e;
}

/* --- 7. line length ---------------------------------------------------------
   One paragraph measured 161 characters per line at 1440px. Anything past
   about 90 is hard to track back to the start of the next line. Capped only
   where the text is body copy in a constrained layout; full-bleed and
   editorial pull quotes are untouched. */
.salt-section .is-layout-constrained > p,
.salt-faq-answer,
.salt-location-description {
	max-width: 78ch;
}

/* The "EOI" badge is a 50px circle whose label was set at 0.62rem, or 9.9px.
   The circle has room for 11px; the label did not need to be that small. */
.salt-zone-card-actions .salt-zone-eoi .wp-block-button__link {
	font-size: 0.6875rem;
}

/* --- 8. headings were split across two typefaces ----------------------------
   Measured on the rendered page: of 21 visible headings, 14 rendered in the
   BODY face and only 7 in the display face. The split follows no pattern -
   "Salt Zones", "Experience the Marina Salt Lifestyle" and "Marina Salt Ras
   El Hekma Highlights" are all main section titles, and all three were in the
   body face while other headings of the same rank were not.

   The cause is seven rules that hard-code `font-family: Inter, Arial,
   sans-serif` on headings, bypassing the display token that theme.json
   defines for every heading element. That is drift, not a decision: nothing
   distinguishes the headings that opted out from the ones that did not.

   Every heading now resolves through one variable.

   TO REVERT, if you look at it and prefer the old mix, change one line:
       --salt-heading-family: var(--wp--preset--font-family--body);
   Nothing else needs touching. */
:root {
	--salt-heading-family: var(--wp--preset--font-family--display, "Inter Tight", "Arial Narrow", Arial, sans-serif);
}

.salt-zones-editorial .salt-zones-title,
.salt-zone-detail h3,
.salt-highlights-title,
.salt-highlight-card h3,
.salt-highlight-card-large h3,
.salt-experiences-heading h2,
.salt-experiences-track .salt-experience-card h3,
.salt-floating-modal-panel h2 {
	font-family: var(--salt-heading-family);
}

/* ===========================================================================
   Round five — heading scale, vertical rhythm, footer, floating contacts
   Measured, not guessed. Every number below replaces a measured value that
   was wrong, and the measurement is stated.
   =========================================================================== */

/* --- 9. the display headings were 101px ------------------------------------
   `.salt-section-title` was clamp(2.5rem, 7vw, 6.8rem). At 1440px that
   resolves to 100.8px, which put "Start Your Journey at Marina Salt Ras El
   Hekma" onto FIVE lines and the FAQ title onto two. A display face wants to
   be large; it does not want to be a paragraph.

   The new ceiling is 4.25rem (68px). The floor is unchanged, so nothing gets
   smaller on a phone - this only stops the growth on wide screens. */
.salt-section-title {
	font-size: clamp(2.5rem, 4.6vw, 4.25rem);
	line-height: 1.02;
	margin-bottom: 28px;
	max-width: 22ch;
}

.salt-inquiry .salt-section-title {
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	max-width: 18ch;
}

.salt-faq .salt-section-title {
	font-size: clamp(2rem, 3.4vw, 3.25rem);
	max-width: 26ch;
}

@media (max-width: 781px) {
	.salt-section-title {
		font-size: clamp(2rem, 9vw, 2.75rem);
		max-width: none;
	}

	.salt-inquiry .salt-section-title,
	.salt-faq .salt-section-title {
		font-size: clamp(1.85rem, 8vw, 2.5rem);
		max-width: none;
	}
}

body.rtl .salt-section-title,
[dir="rtl"] .salt-section-title {
	line-height: 1.28;
	max-width: 24ch;
}

/* --- 10. vertical rhythm ---------------------------------------------------
   Scanning the rendered page for rows containing no content at all: eight
   bands on the English page and six on the Arabic, up to 261px each, adding
   up to 16% of the total page height on both. That is not generous spacing,
   it is drift - adjacent sections each adding their own 110-130px.

   One scale, four steps, applied through a variable so the whole rhythm can
   be retuned from one place. */
:root {
	--salt-space-section: clamp(56px, 6vw, 88px);
	--salt-space-block: clamp(32px, 3.4vw, 52px);
	--salt-space-tight: clamp(18px, 2vw, 28px);
}

.salt-section,
.salt-highlights-editorial,
.salt-zones-editorial,
.salt-experiences-editorial,
.salt-faq,
.salt-inquiry {
	padding-block: var(--salt-space-section);
}

.salt-section-header,
.salt-highlights-header,
.salt-experiences-heading {
	margin-bottom: var(--salt-space-block);
}

.salt-faq-list {
	margin-top: var(--salt-space-block);
}

/* Full-bleed sections carry their own internal spacing and must stay flush. */
.salt-hero-slider,
.video-venue-section {
	padding-block: 0;
}

@media (max-width: 781px) {
	:root {
		--salt-space-section: clamp(44px, 9vw, 60px);
		--salt-space-block: clamp(24px, 5vw, 34px);
	}
}

/* --- 12. footer -------------------------------------------------------------
   The footer used its own type sizes, its own link colour and its own
   spacing, none of which matched the rest of the site. It now uses the same
   kicker treatment for column titles, the same gold on hover, the same
   rhythm variable, and a contact column built as real tel:/mailto: links
   rather than plain text. */
.salt-footer {
	padding-block: var(--salt-space-section) var(--salt-space-block);
}

.salt-footer h3,
.salt-footer h4 {
	font-family: var(--salt-heading-family);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	margin: 0 0 16px;
	opacity: 0.55;
	text-transform: uppercase;
}

.salt-footer a {
	border-bottom: 1px solid transparent;
	transition: color 0.25s var(--salt-ease), border-color 0.25s var(--salt-ease);
}

.salt-footer a:hover {
	border-bottom-color: currentColor;
	color: var(--wp--preset--color--gold, #c8a84e);
}

.salt-footer ul {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.salt-footer-copy {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.8rem;
	margin-top: var(--salt-space-block);
	opacity: 0.5;
	padding-top: 20px;
}

/* --- 13. the floating contact stack ----------------------------------------
   Four buttons in three visual styles, two of them different sizes. They are
   the most persistent element on the page and they were the least consistent.
   One size, one shape, one motion, and the WhatsApp green kept only as a hover
   so the stack reads as one object at rest. */
.salt-floating-contacts {
	bottom: clamp(16px, 3vw, 28px);
	display: grid;
	gap: 10px;
	inset-inline-end: clamp(16px, 3vw, 28px);
	position: fixed;
	z-index: 60;
}

.salt-floating-action {
	align-items: center;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: rgba(10, 10, 10, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 48px;
	justify-content: center;
	padding: 0;
	transition: background 0.28s var(--salt-ease), border-color 0.28s var(--salt-ease),
		transform 0.28s var(--salt-ease);
	width: 48px;
}

.salt-floating-action svg {
	height: 20px;
	width: 20px;
}

.salt-floating-action:hover,
.salt-floating-action:focus-visible {
	background: var(--wp--preset--color--gold, #c8a84e);
	border-color: var(--wp--preset--color--gold, #c8a84e);
	color: #0a0a0a;
	transform: translateY(-2px);
}

.salt-floating-whatsapp:hover,
.salt-floating-whatsapp:focus-visible {
	background: #25d366;
	border-color: #25d366;
	color: #05320f;
}

/* Back to top is secondary: it only appears once there is something to go
   back up to, and it never competes with the two contact actions. */
.salt-floating-top {
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
}

.salt-floating-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

@media (max-width: 640px) {
	.salt-floating-action {
		height: 46px;
		width: 46px;
	}
}

/* Section intro: the paragraph that supports a heading. Same measure as body
   copy so it reads as prose rather than as a subtitle. */
.salt-section-intro {
	font-size: clamp(0.98rem, 1.05vw, 1.08rem);
	line-height: 1.75;
	margin: 0 0 var(--salt-space-block);
	max-width: 68ch;
	opacity: 0.78;
}

[dir="rtl"] .salt-section-intro,
body.rtl .salt-section-intro {
	line-height: 1.95;
}

/* --- 14. collapse the padding where two sections meet -----------------------
   With every section carrying its own 86px top and bottom, a boundary between
   two of them produced 172px of nothing. One section's worth of space is
   enough to separate them; two is the drift the scan kept finding.

   Measured before this rule: 8 empty bands, 14% of the page. */
.salt-section + .salt-section,
.salt-section + .salt-faq,
.salt-section + .salt-inquiry,
.salt-highlights-editorial + .salt-section,
.salt-zones-editorial + .salt-section,
.salt-experiences-editorial + .salt-section,
.salt-faq + .salt-inquiry {
	padding-block-start: calc(var(--salt-space-section) * 0.45);
}

/* A section that follows a full-bleed photograph needs its full top padding
   back: there is no preceding padding to share with. */
.salt-hero-slider + .salt-section,
.video-venue-section + .salt-section,
.salt-hero-slider + .salt-highlights-editorial,
.video-venue-section + .salt-experiences-editorial {
	padding-block-start: var(--salt-space-section);
}

/* ===========================================================================
   Round six — the header over the hero
   =========================================================================== */

/* --- 15. the header was two opaque bands, not a transparent header ----------
   The <header> element itself is transparent, so it looked correct in code.
   The problem is one layer inside it: .salt-sticky-nav carried
   `background: rgba(126, 133, 138, 0.58)` - a flat grey-blue wash stretched
   across a turquoise photograph. Two stacked bands with a hard bottom edge
   read as a panel pasted over the image rather than as chrome sitting on it,
   and the edge lands exactly where the hero's own composition is.

   Replaced with a single top-down gradient across the whole header. A scrim
   has no bottom edge, so the photograph reads continuously underneath and the
   text stays legible - which is the job the grey wash was doing badly. */
:root {
	--salt-header-scrim: linear-gradient(
		to bottom,
		rgba(6, 20, 26, 0.78) 0%,
		rgba(6, 20, 26, 0.55) 45%,
		rgba(6, 20, 26, 0.28) 78%,
		rgba(6, 20, 26, 0) 100%
	);
}

.salt-site-header,
header.wp-block-template-part,
.salt-header-inner {
	background: transparent;
}

/* One scrim for the whole header, painted behind everything in it. */
.salt-site-header::before,
header.wp-block-template-part::before {
	background: var(--salt-header-scrim);
	content: "";
	inset: 0 0 auto 0;
	height: 210%;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* The nav row loses its own ground entirely: it is inside the scrim now. */
.salt-sticky-nav {
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Legibility no longer comes from a panel behind the text, so it comes from
   the text: a soft shadow holds every weight of the nav against sky, sand or
   water without tinting the photograph. */
.salt-brand-lockup,
.salt-sticky-nav a,
.salt-header-actions .salt-lang-toggle {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.salt-sticky-nav a {
	transition: color 0.25s var(--salt-ease), opacity 0.25s var(--salt-ease);
}

.salt-sticky-nav a:hover {
	color: var(--wp--preset--color--gold, #c8a84e);
}

/* --- 16. the header ate the top of the hero --------------------------------
   The header is fixed and the hero starts at y=0, so the top of the
   photograph sits under it. Tightening the two rows gives that height back:
   the brand row and the nav row were both taller than they needed to be, and
   the hero composition starts right where the second row ended. */
.salt-header-inner {
	padding-block: 14px 0;
}

.salt-brand-lockup {
	padding-block: 6px;
}

.salt-sticky-nav {
	padding-block: 12px;
}

.salt-sticky-nav a {
	padding-block: 6px;
}

/* --- 17. a ground only once there is something to sit on -------------------
   Over the hero the header must stay glass. Past the hero there is no
   photograph to read through, so it takes a real ground - which is also when
   a blur starts being worth its cost. */
.salt-site-header.is-stuck::before,
header.wp-block-template-part.is-stuck::before {
	background: rgba(6, 20, 26, 0.9);
	height: 100%;
}

.salt-site-header.is-stuck,
header.wp-block-template-part.is-stuck {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.salt-site-header.is-stuck .salt-brand-lockup,
.salt-site-header.is-stuck .salt-sticky-nav a,
header.wp-block-template-part.is-stuck .salt-sticky-nav a {
	text-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
	.salt-site-header::before,
	header.wp-block-template-part::before {
		transition: background 0.4s var(--salt-ease), height 0.4s var(--salt-ease);
	}
}

/* --- 18. give the hero composition room under the header -------------------
   The hero photograph has the project name baked into its pixels, so the
   composition cannot be re-centred with object-position - the wordmark is
   where the photographer put it. Nudging the whole slide down by the height
   of the nav row clears it, and because the slide is full-bleed and cropped
   anyway, nothing of consequence leaves the frame. */
.salt-hero-slide .wp-block-cover__image-background {
	object-position: 50% 58%;
}

@media (max-width: 781px) {
	.salt-hero-slide .wp-block-cover__image-background {
		object-position: 50% 62%;
	}
}

/* ===========================================================================
   Round seven — the video modal had no stylesheet at all
   The block ships the markup and the JavaScript toggles `is-open` on the modal
   and `video-modal-open` on <html>, but there was not one rule anywhere in the
   theme for .video-modal, .video-modal-backdrop, .video-modal-inner or
   .video-modal-close. Zero occurrences.

   So the modal opened as an ordinary block in the page flow: no overlay, no
   backdrop, and the close button sitting wherever the document happened to put
   it. That is why the video could be opened and not closed.
   =========================================================================== */
.video-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: clamp(16px, 4vw, 48px);
	pointer-events: none;
	position: fixed;
	visibility: hidden;
	z-index: 200;
}

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

.video-modal.is-open {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.video-modal-backdrop {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background: rgba(4, 12, 16, 0.88);
	inset: 0;
	position: absolute;
}

.video-modal-inner {
	max-width: min(1180px, 100%);
	position: relative;
	width: 100%;
}

/* The close control. Top right of the frame in LTR, top left in RTL, always
   inside the viewport, always the first thing focus lands on. */
.video-modal-close-wrap {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.video-modal-close-button {
	margin: 0;
}

.video-modal .video-modal-close {
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 1.5rem;
	height: 48px;
	justify-content: center;
	line-height: 1;
	min-height: 48px;
	min-width: 48px;
	padding: 0;
	transition: background 0.25s var(--salt-ease), border-color 0.25s var(--salt-ease),
		transform 0.25s var(--salt-ease);
	width: 48px;
}

.video-modal .video-modal-close:hover,
.video-modal .video-modal-close:focus-visible {
	background: var(--wp--preset--color--gold, #c8a84e);
	border-color: var(--wp--preset--color--gold, #c8a84e);
	color: #0a0a0a;
	transform: scale(1.06);
}

.video-modal-ratio {
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.video-modal-ratio > figure,
.video-modal-ratio .wp-block-embed__wrapper {
	height: 100%;
	margin: 0;
	width: 100%;
}

.video-modal-ratio iframe,
.video-modal-ratio video {
	border: 0;
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* The page must not scroll behind an open modal. scrollbar-gutter keeps the
   layout from jumping sideways when the scrollbar is taken away. */
html.video-modal-open {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* The custom cursor has no business being on top of a modal. */
html.video-modal-open .inner-cursor,
html.video-modal-open .outer-cursor {
	display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
	.video-modal {
		transition: opacity 0.3s var(--salt-ease), visibility 0.3s var(--salt-ease);
	}
}

[dir="rtl"] .video-modal-close-wrap,
body.rtl .video-modal-close-wrap {
	justify-content: flex-start;
}

@media (max-width: 640px) {
	.video-modal-close-wrap {
		margin-bottom: 10px;
	}

	.video-modal .video-modal-close {
		height: 44px;
		min-height: 44px;
		min-width: 44px;
		width: 44px;
	}
}

/* ===========================================================================
   Round eight — fixes for what was reported after looking at the live site
   =========================================================================== */

/* --- 19. the FAQ heading was pushed inward --------------------------------
   I added `max-width` to the section titles to stop them running long. Inside
   a constrained layout WordPress gives any child with a max-width automatic
   inline margins, so the heading centred itself away from the kicker above it.
   The max-width was my change, so the max-width goes. The smaller font size
   stays, which was the part that was actually needed. */
.salt-section-title,
.salt-inquiry .salt-section-title,
.salt-faq .salt-section-title {
	margin-inline: 0 auto;
	max-width: none;
	text-align: start;
}

.salt-section-intro {
	margin-inline: 0 auto;
}

/* Long headings are held by character count on the text, not by a box. */
.salt-faq .salt-section-title,
.salt-inquiry .salt-section-title {
	text-wrap: balance;
}

/* --- 20. the nav was what followed the page, not the header ---------------
   Reported: the bar moves on desktop and looks wrong. I made the <header>
   relative, which changed nothing, because `.salt-sticky-nav` is itself
   `position: sticky; top: var(--salt-header-height)` at line 96. And my scrim
   change had removed its background, so it travelled down the page as pale
   text over white content with nothing behind it. That was my doing and it was
   worse than what it replaced.

   On desktop the nav is part of the page and scrolls away with it. On a phone
   it keeps sticking, with its own solid ground, because there a persistent way
   into the sections is worth the space. */
@media (min-width: 782px) {
	.salt-site-header,
	header.wp-block-template-part {
		position: relative;
	}

	.salt-sticky-nav {
		background: rgba(8, 8, 8, 0.94);
		position: static;
		top: auto;
	}

	.salt-site-header::before,
	header.wp-block-template-part::before {
		background: rgba(6, 20, 26, 0.94);
		height: 100%;
	}

	.salt-brand-lockup,
	.salt-sticky-nav a,
	.salt-header-actions .salt-lang-toggle {
		text-shadow: none;
	}

	.salt-hero-slide .wp-block-cover__image-background {
		object-position: 50% 50%;
	}
}

@media (max-width: 781px) {
	/* Sticking, but never invisible. */
	.salt-sticky-nav {
		background: rgba(8, 8, 8, 0.94);
	}
}

/* --- 21. the video modal close control ------------------------------------
   It was a button in a flex row above the frame. If anything upstream changed
   that row's height or overflow, the button left the screen - and it did.
   Pinned to the top corner of the frame itself, inside the modal, so it cannot
   be pushed anywhere. */
.video-modal-inner {
	padding-top: 0;
}

.video-modal-close-wrap {
	inset-block-start: -60px;
	inset-inline-end: 0;
	margin: 0;
	position: absolute;
	z-index: 3;
}

@media (max-width: 900px) {
	/* No room above the frame on a phone: sit it on the frame's corner. */
	.video-modal-close-wrap {
		inset-block-start: 10px;
		inset-inline-end: 10px;
	}
}

.video-modal .video-modal-close {
	background: rgba(10, 10, 10, 0.72);
	border-color: rgba(255, 255, 255, 0.55);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}

/* --- 23. the last block before the footer ---------------------------------
   Six lines of display type stacked above a paragraph, both running the full
   column. Neither needed to. */
.salt-inquiry .salt-section-title {
	font-size: clamp(2rem, 3.2vw, 2.9rem);
	line-height: 1.06;
	margin-bottom: 20px;
}

.salt-inquiry .salt-section-intro,
.salt-inquiry p {
	max-width: 54ch;
}

/* --- 24. footer links were underlined inconsistently ----------------------
   Some links carried an underline and others did not, in the same column. One
   treatment: no underline at rest, gold and underlined on hover. */
.salt-footer a,
.salt-footer ul a,
.salt-footer li a {
	border-bottom: 0;
	text-decoration: none;
}

.salt-footer a:hover,
.salt-footer a:focus-visible {
	color: var(--wp--preset--color--gold, #c8a84e);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.salt-footer li + li {
	margin-top: 10px;
}

/* --- 25. tighter vertical rhythm -----------------------------------------
   Still 12% of the page measured as empty. Taking another step off the scale. */
:root {
	--salt-space-section: clamp(44px, 4.4vw, 64px);
	--salt-space-block: clamp(24px, 2.6vw, 38px);
}

@media (max-width: 781px) {
	:root {
		--salt-space-section: clamp(36px, 7vw, 48px);
		--salt-space-block: clamp(20px, 4vw, 28px);
	}
}

/* An earlier rule set the Arabic enquiry title to clamp(2.55rem, 12vw, 4.15rem)
   with higher specificity, so it stayed at 47px on a phone while the English
   one came down to 32px. Matched to the English scale. */
body.rtl .salt-inquiry .salt-section-title,
[dir="rtl"] .salt-inquiry .salt-section-title {
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	line-height: 1.32;
	margin-inline: 0 auto;
	max-width: none;
}

@media (max-width: 781px) {
	body.rtl .salt-inquiry .salt-section-title,
	[dir="rtl"] .salt-inquiry .salt-section-title {
		font-size: clamp(1.6rem, 6.5vw, 2.1rem);
	}
}

/* --- 26. constrained layout kept centring my text ---------------------------
   WordPress gives any child of a constrained group automatic inline margins
   once it has a max-width. My earlier fix used the same specificity as that
   rule and lost on source order, so the heading was fixed and the paragraph
   beneath it was still pushed into the middle of the column. Section-scoped
   selectors outrank it outright. */
.salt-section .salt-section-title,
.salt-faq .salt-section-title,
.salt-inquiry .salt-section-title,
.salt-section .salt-section-intro,
.salt-faq .salt-section-intro,
.salt-inquiry .salt-section-intro {
	margin-inline-start: 0;
	margin-inline-end: auto;
	text-align: start;
}

/* --- 27. footer link weight was inconsistent -------------------------------
   In the contact column one item rendered heavier than the two beneath it. All
   three are the same kind of thing and now read the same. */
.salt-footer a,
.salt-footer li,
.salt-footer p,
.salt-footer span {
	font-weight: 400;
}

.salt-footer h3,
.salt-footer h4 {
	font-weight: 800;
}

/* --- 28. stop fighting auto margins and remove the mechanism ---------------
   Three rounds went into out-specifying WordPress's constrained-layout rule,
   which gives any child with a max-width automatic inline margins. Each round
   fixed one element and left another centred, because the fight depends on
   selector weight and source order and I kept guessing at both.

   A box at full width has no free space for auto margins to distribute, so the
   rule becomes a no-op instead of an opponent. The line length is held by the
   text, not by the box. */
.salt-section-title,
.salt-section-intro,
.salt-faq .salt-section-title,
.salt-faq .salt-section-intro,
.salt-inquiry .salt-section-title,
.salt-inquiry .salt-section-intro {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

/* Measure comes back as a limit on the line, not on the container. */
.salt-section-intro {
	text-wrap: pretty;
}

.salt-faq .salt-section-intro {
	max-inline-size: 78ch;
}

.salt-inquiry .salt-section-intro,
.salt-inquiry p {
	max-inline-size: 56ch;
}

/* max-inline-size on its own would reintroduce the auto margins, so the start
   edge is pinned explicitly for the two that keep one. */
.salt-faq .salt-section-intro,
.salt-inquiry .salt-section-intro,
.salt-inquiry p {
	margin-inline-end: auto;
	margin-inline-start: 0;
}

/* ===========================================================================
   Round nine
   =========================================================================== */

/* --- 30. the FAQ heading sits hard against the start edge, with its
           paragraph immediately beneath it -------------------------------- */
.salt-faq .salt-kicker,
.salt-faq .salt-section-title,
.salt-faq .salt-section-intro {
	margin-inline: 0;
	max-inline-size: none;
	max-width: none;
	text-align: start;
	width: 100%;
}

.salt-faq .salt-section-title {
	margin-block: 0 10px;
}

/* Directly beneath, not floated into the middle of the column. */
.salt-faq .salt-section-intro {
	margin-block: 0 var(--salt-space-block);
}

/* --- 31. the FAQ marker belongs before the question ------------------------
   `justify-content: space-between` puts the text first and the marker last,
   which in Arabic lands it on the left - after the question instead of before
   it. Reversing the row in RTL puts it back at the reading start. */
[dir="rtl"] .salt-faq-item > summary,
body.rtl .salt-faq-item > summary,
.rtl .salt-faq-item > summary {
	flex-direction: row-reverse;
}

/* --- 32. the three hero calls to action are one size ----------------------
   "I'M INTERESTED", "DOWNLOAD BROCHURE" and the WhatsApp button were three
   different heights and two different type sizes, in both languages. */
.salt-stats-actions .wp-block-button__link,
.salt-brochure-button .wp-block-button__link,
.salt-pay-button .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	font-size: 0.7rem;
	justify-content: center;
	letter-spacing: 0.12em;
	line-height: 1.2;
	min-height: 46px;
	padding: 12px 24px;
	white-space: nowrap;
}

.salt-pay-button .wp-block-button__link span {
	margin-inline-start: 0.35em;
}

@media (max-width: 640px) {
	.salt-stats-actions .wp-block-button__link,
	.salt-brochure-button .wp-block-button__link,
	.salt-pay-button .wp-block-button__link {
		font-size: 0.66rem;
		min-height: 44px;
		padding: 11px 18px;
		white-space: normal;
	}
}

/* --- 33. performance: full-screen blur was the cost -----------------------
   backdrop-filter appears ten times in this stylesheet, and three of those are
   on overlays that cover the whole viewport. A full-screen blur forces the
   compositor to re-filter every pixel behind it on every frame, which is why
   opening the contact modal on a desktop felt heavy. Small elements keep their
   blur - the cost there is negligible and the effect is the point. Full-screen
   surfaces use a solid ground instead, which is visually near-identical over a
   dark scrim and costs nothing. */
.salt-floating-modal,
.salt-zone-modal,
.video-modal-backdrop {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.salt-floating-modal {
	background: rgba(6, 12, 16, 0.94);
}

.video-modal-backdrop {
	background: rgba(4, 12, 16, 0.94);
}

/* Promote only what actually animates, and only while it animates. */
.salt-floating-modal-panel,
.video-modal-inner {
	will-change: auto;
}

.salt-floating-modal.is-open .salt-floating-modal-panel,
.video-modal.is-open .video-modal-inner {
	will-change: transform, opacity;
}

/* A blur that is never seen still costs layout on some engines. */
@media (prefers-reduced-motion: reduce) {
	.salt-sticky-nav,
	.salt-site-header,
	header.wp-block-template-part {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* Footer contact links carry an icon, so they line up on a row. */
.salt-footer-contact-link {
	align-items: center;
	display: inline-flex;
	gap: 8px;
}

.salt-footer-contact-link svg {
	block-size: 16px;
	flex: 0 0 auto;
	inline-size: 16px;
	opacity: 0.75;
}

.salt-footer-contact-link:hover svg {
	opacity: 1;
}

.salt-footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ===========================================================================
   Round ten — the actual cause, and the last of the guessing
   =========================================================================== */

/* --- 34. why four attempts at the FAQ heading failed -----------------------
   WordPress's constrained-layout rule is:

     .wp-container-... > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
       margin-left: auto !important;
       margin-right: auto !important;
     }

   It uses !important. Specificity is irrelevant against that, which is why
   every previous round measured clean locally and stayed broken on the site.

   The heading, kicker and intro now sit inside .salt-faq-head, so the rule
   applies to that wrapper instead of to them. The wrapper is told to be full
   width - with !important, because that is what it takes to answer !important -
   and everything inside it is laid out normally. */
.salt-faq .salt-faq-head {
	margin-inline: 0 !important;
	max-width: none !important;
	width: 100%;
}

.salt-faq-head > * {
	margin-inline: 0;
	max-width: none;
	text-align: start;
	width: auto;
}

.salt-faq-head .salt-kicker {
	margin-block: 0 12px;
}

.salt-faq-head .salt-section-title {
	margin-block: 0 10px;
	text-wrap: pretty;
}

.salt-faq-head .salt-section-intro {
	margin-block: 0 var(--salt-space-block);
	max-inline-size: 80ch;
}

/* --- 35. the marker sits against the question -----------------------------
   space-between pushed the question to one end and the marker to the other.
   They belong together at the reading start, with the question next to it. */
.salt-faq-item > summary {
	gap: 14px;
	justify-content: flex-start;
}

.salt-faq-item > summary > span,
.salt-faq-item > summary > *:not(.salt-faq-chevron):not(i) {
	flex: 1 1 auto;
}

.salt-faq-item > summary::after {
	order: -1;
}

[dir="rtl"] .salt-faq-item > summary,
body.rtl .salt-faq-item > summary,
.rtl .salt-faq-item > summary {
	flex-direction: row;
	justify-content: flex-start;
}


/* ===========================================================================
   The enquiry form, in its own namespace

   Three earlier attempts failed for three different reasons: fighting the
   theme's `.salt-form` rules and losing on specificity, matching their markup
   and still being unable to size the card, and finally discovering that
   WordPress forces a max-width and auto margins on any direct child of a
   constrained container using !important.

   `msf-` appears nowhere else in this theme, and the wrapper carries no legacy
   class. One thing still reached in: the theme styles this form by ELEMENT
   inside the section - `.salt-inquiry form`, `.salt-inquiry form label`,
   `.salt-inquiry form input` - and no namespace escapes a selector that does
   not name a class at all. `.salt-inquiry form` is (0,1,1); a single `.msf-x`
   is (0,1,0), and loses.

   So every selector below is `.msf .msf-x`, which is (0,2,0): two classes beat
   one class plus two elements.

   The properties that decide the form's SIZE also carry !important. Not as a
   shortcut - the specificity is already correct - but because this component is
   namespaced and exclusive, nothing else has any business setting its padding
   or its gap, and five rounds were lost to something in this stylesheet
   quietly doing exactly that. An exclusive component may state its own
   dimensions unconditionally.
   =========================================================================== */
.msf {
	margin-inline: 0 !important;
	max-width: none !important;
	width: 100%;
}

.msf .msf-form {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 16px !important;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	color: #0a0a0a;
	display: grid;
	gap: 12px !important;
	max-width: 480px !important;
	padding: 24px !important;
}

.msf .msf-row {
	display: grid;
	gap: 12px !important;
	grid-template-columns: 1fr 1fr !important;
}

.msf .msf-field {
	display: grid;
	gap: 5px !important;
	margin: 0 !important;
	min-width: 0;
}

.msf .msf-label {
	color: rgba(10, 10, 10, 0.6);
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 0.66rem !important;
	font-weight: 700;
	letter-spacing: 0.1em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
}

.msf .msf-input {
	background: #fafafa !important;
	border: 1px solid #e3e3e3 !important;
	border-radius: 10px !important;
	box-sizing: border-box;
	color: #0a0a0a;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 0.86rem !important;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
	padding: 10px 12px !important;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
}

.msf .msf-input::placeholder {
	color: #9a9a9a;
	font-weight: 400;
}

.msf .msf-input:hover {
	border-color: #cfcfcf;
}

.msf .msf-input:focus {
	background: #ffffff;
	border-color: var(--wp--preset--color--gold, #c8a84e);
	box-shadow: 0 0 0 3px rgba(200, 168, 78, 0.18);
	outline: none;
}

.msf .msf-textarea {
	min-height: 68px !important;
	resize: vertical;
}

.msf .msf-consent {
	align-items: flex-start;
	color: rgba(10, 10, 10, 0.7);
	display: flex;
	font-size: 0.78rem !important;
	gap: 9px !important;
	line-height: 1.5;
	margin: 2px 0 0 !important;
}

.msf .msf-check {
	accent-color: var(--wp--preset--color--gold, #c8a84e);
	block-size: 16px;
	border: 1px solid #b9b9b9;
	flex: 0 0 auto;
	inline-size: 16px;
	margin: 2px 0 0;
	padding: 0;
}

.msf .msf-submit {
	background: #0a0a0a;
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 0.72rem !important;
	font-weight: 800;
	justify-self: start;
	letter-spacing: 0.14em;
	margin-top: 4px;
	min-height: 44px !important;
	padding: 12px 28px !important;
	text-transform: uppercase;
	transition: background 0.2s ease, transform 0.2s ease;
}

.msf .msf-submit:hover {
	background: var(--wp--preset--color--gold, #c8a84e);
	color: #0a0a0a;
	transform: translateY(-1px);
}

.msf .msf-notice {
	border-radius: 10px;
	font-size: 0.86rem;
	line-height: 1.55;
	margin: 0 0 12px;
	max-width: 480px;
	padding: 12px 15px;
}

.msf .msf-notice.is-ok {
	background: rgba(200, 168, 78, 0.14);
	border: 1px solid rgba(200, 168, 78, 0.55);
	color: #4a3b12;
}

.msf .msf-notice.is-error {
	background: rgba(200, 60, 40, 0.1);
	border: 1px solid rgba(200, 60, 40, 0.45);
	color: #7a2418;
}

.msf .msf-hp {
	block-size: 1px;
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* intl-tel-input wraps the phone field and must fill it. */
.msf .iti {
	display: block;
	width: 100%;
}

[dir="rtl"] .msf-input,
body.rtl .msf-input {
	text-align: right;
}

[dir="rtl"] .msf-input[dir="ltr"],
body.rtl .msf-input[dir="ltr"] {
	text-align: left;
}

@media (max-width: 640px) {
	/*
	 * Prefixed and marked !important to match the base rules.
	 *
	 * When the base selectors were raised to `.msf .msf-x` and given
	 * !important, the ones inside this media query were left as `.msf-x` with
	 * no !important - so on a phone the desktop two-column row survived and
	 * every field rendered at half width. A media query adds no specificity of
	 * its own; it only decides when a rule is considered.
	 */
	.msf .msf-row {
		grid-template-columns: 1fr !important;
	}

	.msf .msf-form {
		max-width: none !important;
		padding: 18px !important;
	}

	.msf .msf-submit {
		justify-self: stretch !important;
		text-align: center;
	}
}

/* The section around it comes down to match. */
.salt-inquiry {
	padding-block: clamp(30px, 3vw, 44px) !important;
}

/* The floating contact modal renders the same namespaced form. The modal's own
   form rules are keyed on `.salt-contact-form`, which this form deliberately no
   longer carries, so the few dimensions that differ inside a narrow panel are
   set here. Without this the card kept its 480px cap and its page padding
   inside a panel that is narrower than both. */
.salt-floating-modal-form .msf .msf-form,
.salt-floating-modal .msf .msf-form {
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	gap: 10px;
	max-width: none;
	padding: 0;
}

.salt-floating-modal-form .msf .msf-row,
.salt-floating-modal .msf .msf-row {
	grid-template-columns: 1fr;
}

.salt-floating-modal-form .msf .msf-notice,
.salt-floating-modal .msf .msf-notice {
	max-width: none;
}

.salt-floating-modal-form .msf .msf-submit,
.salt-floating-modal .msf .msf-submit {
	justify-self: stretch;
	text-align: center;
}


/* ---------------------------------------------------------------------------
   The form was being stretched by the column beside it

   The enquiry section is two columns: copy on one side, form on the other. A
   block columns row stretches its children to the tallest one by default, so
   the form was pulled to the height of the heading and its paragraph. Its grid
   rows then shared out the extra height between them - which is why the gaps
   measured 12px in the stylesheet and looked like 60px on the page, and why
   there was 150px of nothing above the first field.

   `row-gap: 12px` was true and irrelevant. The rows were stretching after it.

   Three properties fix it, and they are marked !important for the same reason
   as the rest of this component: nothing outside it should be deciding how it
   is laid out.
   --------------------------------------------------------------------------- */
.msf {
	align-self: start !important;
	justify-self: stretch;
}

.msf .msf-form {
	align-content: start !important;
	display: grid !important;
	height: auto !important;
}

.msf .msf-row {
	align-items: start !important;
	display: grid !important;
}

.msf .msf-field {
	align-content: start !important;
	display: grid !important;
	height: auto !important;
}

/* And the fields had fallen back to an input's intrinsic width - about twenty
   characters - inside a card three times that wide. */
.msf .msf-input,
.msf .msf-textarea {
	box-sizing: border-box !important;
	display: block !important;
	max-width: 100% !important;
	width: 100% !important;
}

.msf .msf-consent {
	align-items: flex-start !important;
	display: flex !important;
}

/* intl-tel-input replaces the phone field with its own wrapper, which has to
   take the width the field would have had. */
.msf .iti,
.msf .iti__tel-input {
	width: 100% !important;
}

/* Footer contact links carry an icon, so they sit on a row. */
.salt-footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.salt-footer-contact li + li {
	margin-top: 10px;
}

.salt-footer-contact-link {
	align-items: center;
	display: inline-flex;
}

.salt-footer-contact-link svg {
	flex: 0 0 auto;
	opacity: 0.75;
}

.salt-footer-contact-link:hover svg {
	opacity: 1;
}