/* ==========================================================================
   Premium Hero Slider
   Elementor controls write CSS custom properties onto .phs / per-slide
   elements; these rules consume them and provide sensible fallbacks.
   ========================================================================== */

.phs,
.phs *,
.phs *::before,
.phs *::after { box-sizing: border-box; }

.phs {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: var(--phs-height, 700px);
	overflow: hidden;
	background: #050508;
	isolation: isolate;
	touch-action: pan-y;             /* horizontal swipe handled in JS, vertical scroll left to the page */
	-webkit-user-select: none;
	user-select: none;
	outline: none;
}

.phs:focus-visible { box-shadow: inset 0 0 0 2px #fff; }

.phs-empty {
	padding: 40px;
	text-align: center;
	color: #666;
	background: #f4f4f4;
}

/* --------------------------------------------------------------------------
   Slides
   -------------------------------------------------------------------------- */

.phs__track,
.phs-slide {
	position: absolute;
	inset: 0;
}

.phs-slide {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	will-change: opacity, transform;
	transition:
		opacity var(--phs-speed, 600ms) ease,
		transform var(--phs-speed, 600ms) cubic-bezier(.4, 0, .2, 1),
		visibility 0s linear var(--phs-speed, 600ms);
}

.phs-slide.is-active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.phs-slide.is-leaving { visibility: visible; }

/* Fade + Scale: image settles from a slight zoom */
.phs--fadescale .phs-slide__media {
	transform: scale(1.06);
	transition: transform calc(var(--phs-speed, 600ms) * 1.8) cubic-bezier(.2, .6, .2, 1);
}
.phs--fadescale .phs-slide.is-active .phs-slide__media { transform: scale(1); }

/* Slide: horizontal push, direction-aware */
.phs--slide .phs-slide { opacity: 1; transform: translateX(100%); }
.phs--slide .phs-slide.is-active { transform: translateX(0); }
.phs--slide .phs-slide.is-leaving { transform: translateX(-100%); }
.phs--slide[data-dir="prev"] .phs-slide { transform: translateX(-100%); }
.phs--slide[data-dir="prev"] .phs-slide.is-active { transform: translateX(0); }
.phs--slide[data-dir="prev"] .phs-slide.is-leaving { transform: translateX(100%); }

/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */

.phs-slide__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background: #050508;
}

.phs-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	margin: 0;
	border: 0;
}

/* --------------------------------------------------------------------------
   Overlay — colours/locations/angle arrive as CSS vars per slide
   -------------------------------------------------------------------------- */

.phs-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	--ov-c1: rgba(5, 5, 8, .92);
	--ov-l1: 0%;
	--ov-c2: rgba(5, 5, 8, .55);
	--ov-l2: 45%;
	--ov-c3: rgba(5, 5, 8, .05);
	--ov-l3: 100%;
	--ov-angle: 90deg;
}

.phs-slide__overlay--gradient {
	background-image: linear-gradient(var(--ov-angle), var(--ov-c1) var(--ov-l1), var(--ov-c2) var(--ov-l2));
}
.phs-slide__overlay--gradient.has-c3 {
	background-image: linear-gradient(var(--ov-angle), var(--ov-c1) var(--ov-l1), var(--ov-c2) var(--ov-l2), var(--ov-c3) var(--ov-l3));
}
.phs-slide__overlay--gradient.is-radial {
	background-image: radial-gradient(ellipse at center, var(--ov-c1) var(--ov-l1), var(--ov-c2) var(--ov-l2));
}
.phs-slide__overlay--gradient.is-radial.has-c3 {
	background-image: radial-gradient(ellipse at center, var(--ov-c1) var(--ov-l1), var(--ov-c2) var(--ov-l2), var(--ov-c3) var(--ov-l3));
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.phs-slide__inner {
	position: relative;
	z-index: 2;
	display: flex;
	height: 100%;
	justify-content: var(--phs-justify, flex-start);
	align-items: var(--phs-align, center);
	padding: 0 6% 110px;
}

.phs-content {
	width: 100%;
	max-width: var(--phs-content-width, 600px);
	text-align: var(--phs-text-align, left);
	transform: translate(var(--phs-off-x, 0), var(--phs-off-y, 0));
	-webkit-user-select: text;
	user-select: text;
}

.phs-content > * + * { margin-top: var(--phs-gap, 22px); }

.phs-eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #c8a45d;
}

.phs-heading {
	margin: 0;
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-size: clamp(38px, 5vw, 68px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: #fff;
	overflow-wrap: break-word;
}

.phs-hl { color: inherit; }

.phs-desc {
	margin: 0;
	max-width: 480px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .82);
}

/* Heading/description follow the content alignment (vars set by the layout control) */
.phs-heading, .phs-desc { margin-left: var(--phs-ml, 0); margin-right: var(--phs-mr, auto); }

/* --------------------------------------------------------------------------
   Buttons — inline on every breakpoint
   -------------------------------------------------------------------------- */

.phs-buttons {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: var(--phs-justify, flex-start);
	gap: 16px;
	max-width: 100%;
}

.phs-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	min-width: 0;
	padding: 16px 32px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	border: 1px solid #ead9b5;
	background-color: #ead9b5;
	color: #111;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--phs-btn-trans, 300ms) ease,
		color var(--phs-btn-trans, 300ms) ease,
		border-color var(--phs-btn-trans, 300ms) ease,
		border-width var(--phs-btn-trans, 300ms) ease,
		border-radius var(--phs-btn-trans, 300ms) ease,
		box-shadow var(--phs-btn-trans, 300ms) ease;
}

.phs-btn--2 {
	background-color: transparent;
	color: #f5efe3;
	border-color: rgba(245, 239, 227, .4);
}

.phs-btn:hover, .phs-btn:focus-visible { text-decoration: none; }
.phs-btn--1:hover, .phs-btn--1:focus-visible { background-color: transparent; color: #f5efe3; }
.phs-btn--2:hover, .phs-btn--2:focus-visible { background-color: #ead9b5; color: #111; border-color: #ead9b5; }

.phs-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.phs-btn__label {
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Shimmer: a soft band of light sweeps left → right. Pure CSS, GPU transform,
   clipped by the button's overflow so it never changes size or causes scroll. */
.phs--shimmer .phs-btn::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: 0;
	width: 45%;
	pointer-events: none;
	background: linear-gradient(
		105deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .28) 45%,
		rgba(255, 255, 255, .28) 55%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: translateX(-150%) skewX(-18deg);
	animation: phs-shimmer var(--phs-shimmer, 3.5s) cubic-bezier(.4, 0, .2, 1) infinite;
	will-change: transform;
}
.phs--shimmer .phs-btn--2::after { animation-delay: calc(var(--phs-shimmer, 3.5s) / 2); }

@keyframes phs-shimmer {
	0%   { transform: translateX(-150%) skewX(-18deg); }
	35%  { transform: translateX(350%)  skewX(-18deg); }
	100% { transform: translateX(350%)  skewX(-18deg); }
}

/* --------------------------------------------------------------------------
   Navigation: 01 / 03  ━━━━━━  ←  →
   -------------------------------------------------------------------------- */

.phs-nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 44px;
	z-index: 5;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 24px;
	padding: 0 6%;
	max-width: 100%;
	pointer-events: none;
}
.phs-nav > * { pointer-events: auto; }

.phs-counter {
	flex: 0 0 auto;
	font-size: 13px;
	line-height: 1;
	letter-spacing: .12em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: rgba(255, 255, 255, .7);
}
.phs-counter__current { color: #fff; }

.phs-progress {
	position: relative;
	flex: 0 1 240px;
	max-width: 240px;
	min-width: 36px;
	height: 2px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, .25);
}

.phs-progress__fill {
	position: absolute;
	inset: 0;
	display: block;
	background-color: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: none;
	will-change: transform;
}
.phs-progress__fill.is-running {
	transform: scaleX(1);
	transition: transform var(--phs-autoplay, 2000ms) linear;
}
.phs--single .phs-progress { display: none; }

.phs-arrows {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
}

.phs-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	font-size: 15px;
	line-height: 1;
	color: #f5efe3;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.phs-arrow:hover, .phs-arrow:focus-visible { color: #c8a45d; }
.phs-arrow:focus-visible { outline: 2px solid #f5efe3; outline-offset: 2px; }

.phs-arrow i { font-size: inherit; line-height: 1; }
.phs-arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.phs { height: var(--phs-height, 600px); }
	.phs-heading { font-size: clamp(34px, 6vw, 56px); }
}

/* --------------------------------------------------------------------------
   Mobile — own layout, not a scaled desktop
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.phs { height: var(--phs-height, 550px); }

	.phs-slide__inner { padding: 0 6% 100px; }
	.phs-content { max-width: var(--phs-content-width, 100%); }
	.phs-content > * + * { margin-top: var(--phs-gap, 16px); }

	.phs-eyebrow { font-size: 11px; letter-spacing: .22em; }
	.phs-heading { font-size: clamp(30px, 9.5vw, 40px); line-height: 1.1; }
	.phs-desc { font-size: 14px; line-height: 1.6; }

	/* Keep both CTAs on one line */
	.phs-buttons { gap: 10px; }
	.phs-btn {
		padding: 12px 14px;
		font-size: 11px;
		letter-spacing: .08em;
		flex: 0 1 auto;
	}

	.phs-nav { bottom: 28px; gap: 14px; padding: 0 20px; }
	.phs-counter { font-size: 12px; letter-spacing: .08em; }
	.phs-progress { flex-basis: 120px; max-width: 120px; }
	.phs-arrow { width: 40px; height: 40px; font-size: 13px; }
	.phs-arrows { gap: 8px; }
}

@media (max-width: 380px) {
	.phs-btn { padding: 11px 10px; font-size: 10px; letter-spacing: .05em; }
	.phs-buttons { gap: 8px; }
	.phs-nav { gap: 10px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — navigation stays functional, decoration goes quiet
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.phs-slide,
	.phs--fadescale .phs-slide__media,
	.phs-btn,
	.phs-arrow {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.phs--fadescale .phs-slide__media { transform: none; }
	.phs--shimmer .phs-btn::after { animation: none; display: none; }
	/* Progress still reflects the timer, just without easing artefacts */
	.phs-progress__fill.is-running { transition-timing-function: linear; }
}

/* --------------------------------------------------------------------------
   Elementor editor niceties
   -------------------------------------------------------------------------- */

.elementor-editor-active .phs { cursor: default; }