/* ==========================================================================
   SCV page heroes - the standard hero on Experiences (40), Wellness (42),
   Getting Here (44) and Contact Us (45).

   The same hero the About Us / Accommodation / Dining / villa pages carry: the
   photo runs edge to edge and sits UNDER the transparent sticky header
   (margin-top: -1 * --scv-header-h, the variable the header snippet publishes),
   the caption band is rgba(0,0,0,.3) - 130px, 110px at <=820, 36px at <=526 -
   and the H1 is the site's own H1 default (Optima 400, 75px desktop and tablet,
   40px on a phone), white, 3rem (1rem on a phone) off the right edge.

   Two deliberate differences from the other pages' heroes:

   1. The band's height is a MINIMUM. A title long enough to wrap - Getting
      Here's "Travel Guide To Swahili" between 768 and ~860px, and on a phone -
      grows the dark strip instead of spilling out of it; white type outside the
      band would be invisible on the page background. A one-line title renders
      exactly 130px / 110px, i.e. identical to the standard.

   2. Nothing else on these pages is touched. The hero is the only element that
      goes full width; every other section keeps its own inset.

   The selectors are Elementor's own data-ids (stable across rebuilds, unlike
   the generated e-<hash> class names) and every rule carries !important,
   because the pages' own local class styles are what these override.
   ========================================================================== */

/* --- Experiences (40) ----------------------------------------------------
   hero section d8fa12b > img 96ec268 + band 506840e > h1 f4efc4e            */

.elementor-40 [data-id="52dd33e"] {
	padding-block-start: 0 !important; /* Elementor's 10px base - it held the hero 10px down */
}

.elementor-40 [data-id="d8fa12b"] {
	position: relative !important;
	width: calc(100% + 20px) !important;
	max-width: none !important;
	margin-top: calc(-1 * var(--scv-header-h, 197px)) !important;
	margin-left: -10px !important;
	margin-right: -10px !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.elementor-40 [data-id="96ec268"] {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 809px !important;
	object-fit: cover !important;
	/* The photo is 3:2 and the band it fills is ~1.75:1, so cover crops ~8% off
	   it. Centred - the default - it took half of that off the TOP, which is why
	   the top of the picture (the woman's raised hands and the sky above them)
	   was cut. Anchored to the top the photo's own top edge sits on the top edge
	   of the page and every pixel of the crop comes off the bottom instead.
	   Nearly a no-op at <=767px, where the band is already 3:2. */
	object-position: 50% 0 !important;
}

.elementor-40 [data-id="506840e"] {
	position: absolute !important;
	inset: auto 0 4px 0 !important;
	width: 100% !important;
	height: auto !important;
	min-height: 130px !important;
	margin: 0 !important;
	padding: 21px 0 !important;
	background-color: rgba(0, 0, 0, 0.3) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	z-index: 3 !important;
}

.elementor-40 [data-id="f4efc4e"] {
	font-family: Optima, serif !important;
	font-weight: 400 !important;
	font-size: 75px !important;
	line-height: 1.16 !important;
	color: #FFFFFF !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	width: auto !important;
	margin: 0 3rem 0 0 !important;
}

/* The slow hero zoom: the same pull-back the About Us, Accommodation and
   Gallery heroes carry - scale 1.15 down to 1 over 8s on load, once, linear.
   The section clips it (overflow: hidden above), so the extra 15% never
   reaches the layout, and it is off entirely for anyone whose device asks
   for reduced motion. The zoom is what the villa pages call Ken Burns. */

@media (prefers-reduced-motion: no-preference) {
	@keyframes scvExperiencesHeroZoom {
		from { transform: scale(1.15); }
		to   { transform: scale(1); }
	}

	.elementor-40 [data-id="96ec268"] {
		animation: scvExperiencesHeroZoom 8s linear both !important;
		transform-origin: center center;
	}
}

/* --- Getting Here (44) --------------------------------------------------- */

.elementor-44 [data-id="getting-page"] {
	padding-block-start: 0 !important;
}

.elementor-44 [data-id="getting-hero"] {
	position: relative !important;
	width: calc(100% + 20px) !important;
	max-width: none !important;
	margin-top: calc(-1 * var(--scv-header-h, 197px)) !important;
	margin-left: -10px !important;
	margin-right: -10px !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.elementor-44 [data-id="getting-hero-image"] {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 809px !important;
	object-fit: cover !important;
}

.elementor-44 [data-id="getting-hero-overlay"] {
	position: absolute !important;
	inset: auto 0 4px 0 !important;
	width: 100% !important;
	height: auto !important;
	min-height: 130px !important;
	margin: 0 !important;
	padding: 21px 0 !important;
	background-color: rgba(0, 0, 0, 0.3) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	z-index: 3 !important;
}

.elementor-44 [data-id="getting-hero-title"] {
	font-family: Optima, serif !important;
	font-weight: 400 !important;
	font-size: 75px !important;
	line-height: 1.16 !important;
	color: #FFFFFF !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	width: auto !important;
	margin: 0 3rem 0 0 !important;
}

/* --- Contact Us (45) ----------------------------------------------------- */

.elementor-45 [data-id="contact-page"] {
	padding-block-start: 0 !important;
}

.elementor-45 [data-id="contact-hero"] {
	position: relative !important;
	width: calc(100% + 20px) !important;
	max-width: none !important;
	margin-top: calc(-1 * var(--scv-header-h, 197px)) !important;
	margin-left: -10px !important;
	margin-right: -10px !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.elementor-45 [data-id="contact-hero-image"] {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 809px !important;
	object-fit: cover !important;
}

.elementor-45 [data-id="contact-hero-overlay"] {
	position: absolute !important;
	inset: auto 0 4px 0 !important;
	width: 100% !important;
	height: auto !important;
	min-height: 130px !important;
	margin: 0 !important;
	padding: 21px 0 !important;
	background-color: rgba(0, 0, 0, 0.3) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	z-index: 3 !important;
}

.elementor-45 [data-id="contact-hero-title"] {
	font-family: Optima, serif !important;
	font-weight: 400 !important;
	font-size: 75px !important;
	line-height: 1.16 !important;
	color: #FFFFFF !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	width: auto !important;
	margin: 0 3rem 0 0 !important;
}

/* --- Wellness (42) -------------------------------------------------------
   The hero's media is the page's own media-carousel widget (6 slides, fade,
   autoplay) with the swiper's bullets under it. The band is drawn with the
   hero's ::after - the page has no band element - and the title is the h1 that
   was sitting at the top left. Both are placed against --scv-band-h, so the
   title stays centred in the band at every tier.                            */

.elementor-42 [data-id="wellness-hero"] {
	--scv-band-h: 130px;
	position: relative !important;
	width: 100% !important;
	max-width: none !important;
	margin-top: calc(-1 * var(--scv-header-h, 197px)) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important; /* the dots row is hidden, so the photo reaches the band */
	min-height: 0 !important;
	height: auto !important;
	overflow: hidden !important;
}

.elementor-42 [data-id="wellness-hero"] .elementor-element-wellness-hero-slider {
	width: 100% !important;
	height: auto !important;
}

.elementor-42 .elementor-element-wellness-hero-slider .elementor-main-swiper {
	height: 809px !important;
	padding: 0 !important;
}

.elementor-42 .elementor-element-wellness-hero-slider .elementor-carousel-image {
	height: 100% !important;
	background-size: cover !important;
	background-position: center !important;
}

.elementor-42 .elementor-element-wellness-hero-slider .swiper-pagination {
	/* hidden: no dots wanted under this hero (the bullet rules below are kept
	   so the row can be switched back on by deleting this rule). */
	display: none !important;
}

.elementor-42 .elementor-element-wellness-hero-slider .swiper-pagination-bullet {
	width: 10px !important;
	height: 10px !important;
	border-radius: 9999px !important;
	background-color: rgba(166, 83, 60, 0.28) !important;
	opacity: 1 !important;
	margin: 0 !important;
}

.elementor-42 .elementor-element-wellness-hero-slider .swiper-pagination-bullet-active {
	background-color: #A6533C !important;
	transform: scale(1.3) !important;
}

.elementor-42 [data-id="wellness-hero"]::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 4px !important; /* the standard 4px off the photo - the dots row is gone */
	top: auto !important;
	height: var(--scv-band-h) !important;
	background-color: rgba(0, 0, 0, 0.3) !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

.elementor-42 [data-id="wellness-hero-title"] {
	font-family: Optima, serif !important;
	font-weight: 400 !important;
	font-size: 75px !important;
	line-height: 1.16 !important;
	color: #FFFFFF !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	position: absolute !important;
	top: auto !important;
	left: auto !important;
	right: 3rem !important;
	bottom: calc(4px + (var(--scv-band-h) - 1.16em) / 2) !important;
	margin: 0 !important;
	z-index: 3 !important;
	width: auto !important;
}

/* --- the tiers, widest first --------------------------------------------- */

@media (max-width: 1024px) {
	.elementor-40 [data-id="96ec268"],
	.elementor-44 [data-id="getting-hero-image"],
	.elementor-45 [data-id="contact-hero-image"] {
		height: auto !important;
		max-height: 575px !important;
		aspect-ratio: 1400 / 809 !important;
	}
	.elementor-42 .elementor-element-wellness-hero-slider .elementor-main-swiper {
		height: auto !important;
		max-height: 575px !important;
		aspect-ratio: 1400 / 809 !important;
	}
}

@media (max-width: 820px) {
	.elementor-40 [data-id="506840e"],
	.elementor-44 [data-id="getting-hero-overlay"],
	.elementor-45 [data-id="contact-hero-overlay"] {
		min-height: 110px !important;
		padding-block: 11px !important;
	}
	.elementor-42 [data-id="wellness-hero"] {
		--scv-band-h: 110px;
	}
}

@media (max-width: 767px) {
	.elementor-40 [data-id="96ec268"],
	.elementor-44 [data-id="getting-hero-image"],
	.elementor-45 [data-id="contact-hero-image"] {
		height: auto !important;
		max-height: none !important;
		aspect-ratio: 738 / 496 !important;
	}
	.elementor-42 .elementor-element-wellness-hero-slider .elementor-main-swiper {
		max-height: none !important;
		aspect-ratio: 738 / 496 !important;
	}
	.elementor-40 [data-id="f4efc4e"],
	.elementor-44 [data-id="getting-hero-title"],
	.elementor-45 [data-id="contact-hero-title"] {
		font-size: 40px !important;
		margin-right: 1rem !important;
	}
	.elementor-42 [data-id="wellness-hero-title"] {
		font-size: 40px !important;
		right: 1rem !important;
	}
}

@media (max-width: 526px) {
	.elementor-40 [data-id="96ec268"],
	.elementor-44 [data-id="getting-hero-image"],
	.elementor-45 [data-id="contact-hero-image"] {
		aspect-ratio: 370 / 251 !important;
	}
	.elementor-42 .elementor-element-wellness-hero-slider .elementor-main-swiper {
		aspect-ratio: 370 / 251 !important;
	}
	.elementor-40 [data-id="506840e"],
	.elementor-44 [data-id="getting-hero-overlay"],
	.elementor-45 [data-id="contact-hero-overlay"] {
		min-height: 36px !important;
		padding-block: 0 !important;
	}
	.elementor-42 [data-id="wellness-hero"] {
		--scv-band-h: 36px;
	}
}

/* --- Special Events (43) -------------------------------------------------
   The page was blank, so this hero was BUILT for it (elementor
   build-composition): hero 6b1c4cf3 > image 49b6ee60 + band 7cd08e17 > h1
   643d381a, carrying the kit's own scv-villa-hero / -media / -band / -title
   hooks. The photo is attachment 1382 (DSC05585, 2048x1369) - the villa's
   rooftop terrace at golden hour with a champagne bucket and a laid table,
   i.e. the venue ready for a private event. Same values as the rest of the
   standard hero; the section is the document root here, so it needs no
   article-padding correction.                                            */

.elementor-43 .scv-villa-hero {
	position: relative !important;
	width: 100% !important;
	max-width: none !important;
	margin-top: calc(-1 * var(--scv-header-h, 197px)) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.elementor-43 .scv-villa-hero .scv-villa-hero-media {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 809px !important;
	object-fit: cover !important;
}

.elementor-43 .scv-villa-hero .scv-villa-hero-band {
	position: absolute !important;
	inset: auto 0 4px 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: auto !important;
	min-height: 130px !important;
	margin: 0 !important;
	padding: 21px 0 !important;
	background-color: rgba(0, 0, 0, 0.3) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	z-index: 3 !important;
}

.elementor-43 .scv-villa-hero .scv-villa-hero-title {
	font-family: Optima, serif !important;
	font-weight: 400 !important;
	font-size: 75px !important;
	line-height: 1.16 !important;
	color: #FFFFFF !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	width: auto !important;
	margin: 0 3rem 0 0 !important;
}

@media (max-width: 1024px) {
	.elementor-43 .scv-villa-hero .scv-villa-hero-media {
		height: auto !important;
		max-height: 575px !important;
		aspect-ratio: 1400 / 809 !important;
	}
}

@media (max-width: 820px) {
	.elementor-43 .scv-villa-hero .scv-villa-hero-band {
		min-height: 110px !important;
		padding-block: 11px !important;
	}
}

@media (max-width: 767px) {
	.elementor-43 .scv-villa-hero .scv-villa-hero-media {
		height: auto !important;
		max-height: none !important;
		aspect-ratio: 738 / 496 !important;
	}
	.elementor-43 .scv-villa-hero .scv-villa-hero-title {
		font-size: 40px !important;
		margin-right: 1rem !important;
	}
}

@media (max-width: 526px) {
	.elementor-43 .scv-villa-hero .scv-villa-hero-media {
		aspect-ratio: 370 / 251 !important;
	}
	.elementor-43 .scv-villa-hero .scv-villa-hero-band {
		min-height: 36px !important;
		padding-block: 0 !important;
	}
}


/* --- WELLNESS (42): hero Ken Burns pull-back, the house standard ---------
  8s, 1.15 -> 1, linear, once, on the carousel's active slide so every slide
  animates as it becomes active - the same shape as the villa pages' 5s
  version and the homepage's 8s version. This hero is Elementor's
  media-carousel, so the picture is the slide's inner .elementor-carousel-image
  box; animating that leaves swiper's own transforms alone. Swiper clips the
  overflow, so the extra 15% never reaches the layout.                       */
@media (prefers-reduced-motion: no-preference) {
	@keyframes scvWellnessHeroZoom {
		from { transform: scale(1.15); }
		to   { transform: scale(1); }
	}
	.elementor-42 [data-id="wellness-hero"] .swiper-slide-active .elementor-carousel-image,
	.elementor-42 [data-id="wellness-hero"] .swiper-slide-duplicate-active .elementor-carousel-image {
		transform-origin: center center;
		animation: scvWellnessHeroZoom 8s linear both !important;
		will-change: transform;
	}
}