/* ==========================================================================
   Ayulanka Hero Slider
   Typography rules use a strong prefix + !important so theme styles can't
   override them. Motion properties (opacity/transform/clip-path) are NOT
   !important on purpose — !important would block the CSS animations.
   ========================================================================== */

.ayu-slider {
	--ayu-s-gold: #c9a45c;
	--ayu-s-ink: #0b0907;
	--ayu-s-ease: cubic-bezier(.77, 0, .18, 1);
	--ayu-s-out: cubic-bezier(.16, 1, .3, 1);
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--ayu-s-ink);
	color: #fff;
	isolation: isolate;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}
html body .ayu-slider,
html body .ayu-slider * {
	font-family: "EB Garamond", Garamond, Georgia, serif !important;
	box-sizing: border-box;
}
/* Reset: theme rules (even !important ones on span/a/p) must not reach slide text */
html body .ayu-slider :is(span, i, b, strong, em, small, svg) {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	letter-spacing: inherit !important;
	line-height: inherit !important;
	text-transform: inherit !important;
	text-shadow: none !important;
}

/* Full screen width, even inside a boxed page container */
.ayu-slider.is-fullwidth {
	width: calc(100vw - var(--ayu-sbw, 0px));
	max-width: none;
	margin-left: calc(50% - (100vw - var(--ayu-sbw, 0px)) / 2);
	margin-right: 0;
}

.ayu-s-wrap {
	position: relative;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ---------- Track & slides (all slides share one grid cell) ---------- */
.ayu-s-track {
	display: grid;
	height: max(var(--ayu-s-h, 86vh), var(--ayu-s-minh, 560px));
}
.ayu-s-slide {
	grid-area: 1 / 1;
	position: relative;
	visibility: hidden;
	z-index: 0;
	overflow: hidden;
}
.ayu-s-slide.is-active,
.ayu-s-slide.is-out { visibility: visible; }
.ayu-s-slide.is-active { z-index: 2; }
.ayu-s-slide.is-out { z-index: 1; }

/* Media */
.ayu-s-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--ayu-s-ink);
}
.ayu-s-media-inner,
.ayu-s-media picture { position: absolute; inset: 0; display: block; }
.ayu-s-media img.ayu-s-img,
html body .ayu-slider .ayu-s-media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transform-origin: 60% 50%;
	-webkit-user-drag: none;
}

/* Desktop shading — follows the text side */
.ayu-s-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(0deg, rgba(6, 4, 2, .6) 0%, rgba(6, 4, 2, 0) 32%),
		linear-gradient(90deg, rgba(8, 6, 3, .9) 0%, rgba(8, 6, 3, .74) 30%, rgba(8, 6, 3, .34) 52%, rgba(8, 6, 3, 0) 74%);
}
.ayu-s-slide[data-align="right"] .ayu-s-media::after {
	background:
		linear-gradient(0deg, rgba(6, 4, 2, .6) 0%, rgba(6, 4, 2, 0) 32%),
		linear-gradient(270deg, rgba(8, 6, 3, .9) 0%, rgba(8, 6, 3, .74) 30%, rgba(8, 6, 3, .34) 52%, rgba(8, 6, 3, 0) 74%);
}
.ayu-s-slide[data-align="center"] .ayu-s-media::after {
	background: radial-gradient(70% 80% at 50% 50%, rgba(8, 6, 3, .7) 0%, rgba(8, 6, 3, .25) 70%, rgba(8, 6, 3, .1) 100%),
		linear-gradient(0deg, rgba(6, 4, 2, .55) 0%, rgba(6, 4, 2, 0) 32%);
}

/* Content */
.ayu-s-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 40px 0 120px;
}
.ayu-s-content > .ayu-s-wrap { display: flex; }
.ayu-s-slide[data-align="right"] .ayu-s-content > .ayu-s-wrap { justify-content: flex-end; }
.ayu-s-slide[data-align="center"] .ayu-s-content > .ayu-s-wrap { justify-content: center; text-align: center; }
.ayu-s-text { max-width: 600px; }
.ayu-s-slide.is-long .ayu-s-text { max-width: 660px; }

html body .ayu-slider .ayu-s-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 22px !important;
	padding: 0 !important;
	color: var(--ayu-s-gold) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	font-style: normal !important;
	letter-spacing: .38em !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
}
.ayu-s-eyebrow::before {
	content: "";
	width: 44px;
	height: 1px;
	background: currentColor;
}
.ayu-s-slide[data-align="center"] .ayu-s-eyebrow { justify-content: center; }

html body .ayu-slider .ayu-s-title {
	margin: 0 !important;
	padding: 0 !important;
	color: #fff !important;
	font-size: clamp(40px, 4.6vw, 72px) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.06 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .25) !important;
}
html body .ayu-slider .is-long .ayu-s-title {
	font-size: clamp(30px, 3.1vw, 48px) !important;
	line-height: 1.14 !important;
}
/* Word masks for the reveal */
.ayu-s-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: .08em;
	margin-bottom: -.08em;
}
.ayu-s-w > span {
	display: inline-block;
	transform-origin: 0 100%;
	will-change: transform;
}

html body .ayu-slider .ayu-s-caption {
	max-width: 50ch;
	margin: 24px 0 0 !important;
	padding: 0 !important;
	color: rgba(255, 255, 255, .84) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	letter-spacing: .005em !important;
	text-transform: none !important;
}
.ayu-s-slide[data-align="center"] .ayu-s-caption { margin-left: auto !important; margin-right: auto !important; }

html body .ayu-slider .ayu-s-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 36px;
	padding: 17px 32px !important;
	border: 1px solid var(--ayu-s-gold) !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: .2em !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	background: linear-gradient(var(--ayu-s-gold), var(--ayu-s-gold)) left / 0 100% no-repeat;
	transition: background-size .45s var(--ayu-s-out), color .45s var(--ayu-s-out);
}
html body .ayu-slider .ayu-s-btn:hover,
html body .ayu-slider .ayu-s-btn:focus-visible {
	background-size: 100% 100%;
	color: var(--ayu-s-ink) !important;
}
.ayu-s-btn svg { transition: transform .35s var(--ayu-s-out); }
.ayu-s-btn:hover svg { transform: translateX(5px); }

/* ---------- UI: counter, progress, arrows ---------- */
.ayu-s-ui {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 44px;
	z-index: 5;
	pointer-events: none;
}
.ayu-s-ui-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.ayu-s-nav,
.ayu-s-arrows { display: flex; align-items: center; pointer-events: auto; }
.ayu-s-nav { gap: 28px; }

html body .ayu-slider .ayu-s-count {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	color: rgba(255, 255, 255, .6) !important;
	font-size: 15px !important;
	letter-spacing: .12em !important;
	line-height: 1 !important;
}
html body .ayu-slider .ayu-s-cur { color: #fff !important; font-size: 22px !important; }
.ayu-s-count i { display: block; width: 28px; height: 1px; background: rgba(255, 255, 255, .45); }

.ayu-s-dots { display: flex; gap: 6px; }
html body .ayu-slider .ayu-s-dot {
	position: relative;
	width: 46px;
	height: 28px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
}
.ayu-s-dot::before,
.ayu-s-dot i {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
}
.ayu-s-dot::before { right: 0; background: rgba(255, 255, 255, .28); transition: background .3s; }
.ayu-s-dot:hover::before { background: rgba(255, 255, 255, .6); }
.ayu-s-dot i { width: 0; background: var(--ayu-s-gold); }
.ayu-s-dot.is-active i { width: 100%; }
.ayu-slider[data-autoplay="1"] .ayu-s-dot.is-active i {
	animation: ayuProgress var(--ayu-s-delay, 6000ms) linear both;
}
.ayu-slider.is-paused .ayu-s-dot.is-active i { animation-play-state: paused; }

.ayu-s-arrows { gap: 12px; }
html body .ayu-slider .ayu-s-arrow {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, .35) !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, .12) !important;
	color: #fff !important;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--ayu-s-out);
}
html body .ayu-slider .ayu-s-arrow:hover,
html body .ayu-slider .ayu-s-arrow:focus-visible {
	background: var(--ayu-s-gold) !important;
	border-color: var(--ayu-s-gold) !important;
	color: var(--ayu-s-ink) !important;
}
.ayu-s-prev:hover { transform: translateX(-3px); }
.ayu-s-next:hover { transform: translateX(3px); }
.ayu-slider button:focus-visible,
.ayu-slider a:focus-visible { outline: 2px solid var(--ayu-s-gold); outline-offset: 3px; }

.ayu-slider.no-arrows .ayu-s-arrows { display: none; }
.ayu-slider.no-dots .ayu-s-nav { visibility: hidden; }

/* ==========================================================================
   Motion
   ========================================================================== */

/* Incoming slide: curtain wipe in the direction of travel */
.ayu-s-slide.is-in:not(.is-first) { animation: ayuWipeNext 1.15s var(--ayu-s-ease) both; }
.ayu-slider[data-dir="prev"] .ayu-s-slide.is-in:not(.is-first) { animation-name: ayuWipePrev; }

/* Image settles from a zoom, then a slow Ken Burns drift while active */
.ayu-s-slide.is-in .ayu-s-media-inner { animation: ayuZoomIn 1.8s var(--ayu-s-out) both; }
.ayu-s-slide.is-active .ayu-s-media img { animation: ayuKen calc(var(--ayu-s-delay, 6000ms) + 3s) linear both; }

/* Outgoing slide: parallax push + darken, text slips away */
.ayu-s-slide.is-out .ayu-s-media-inner { animation: ayuPushNext 1.15s var(--ayu-s-ease) both; }
.ayu-slider[data-dir="prev"] .ayu-s-slide.is-out .ayu-s-media-inner { animation-name: ayuPushPrev; }
.ayu-s-slide.is-out::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: #000;
	animation: ayuDim 1.15s var(--ayu-s-ease) both;
	pointer-events: none;
}
.ayu-s-slide.is-out .ayu-s-text { animation: ayuTextOut .5s var(--ayu-s-ease) both; }

/* Text: words rise out of masks one by one, then caption & button */
.ayu-s-slide.is-in .ayu-s-w > span {
	animation: ayuWord 1.1s var(--ayu-s-out) both;
	animation-delay: calc(.5s + var(--i, 0) * 60ms);
}
.ayu-s-slide.is-in .ayu-s-eyebrow { animation: ayuRise 1s var(--ayu-s-out) .35s both; }
.ayu-s-slide.is-in .ayu-s-eyebrow::before { animation: ayuLine 1s var(--ayu-s-out) .35s both; transform-origin: left; }
.ayu-s-slide.is-in .ayu-s-caption { animation: ayuRise 1.1s var(--ayu-s-out) both; animation-delay: calc(.75s + var(--n, 4) * 60ms); }
.ayu-s-slide.is-in .ayu-s-btn { animation: ayuRise 1.1s var(--ayu-s-out) both; animation-delay: calc(.9s + var(--n, 4) * 60ms); }

@keyframes ayuWipeNext { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes ayuWipePrev { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ayuZoomIn   { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes ayuKen      { from { transform: scale(1); } to { transform: scale(1.08) translate3d(-1%, -.5%, 0); } }
@keyframes ayuPushNext { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-14%, 0, 0) scale(1.04); } }
@keyframes ayuPushPrev { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(14%, 0, 0) scale(1.04); } }
@keyframes ayuDim      { from { opacity: 0; } to { opacity: .55; } }
@keyframes ayuTextOut  { to { opacity: 0; transform: translate3d(-40px, 0, 0); filter: blur(4px); } }
@keyframes ayuWord     { from { transform: translate3d(0, 110%, 0) rotate(6deg); } to { transform: none; } }
@keyframes ayuRise     { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ayuLine     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ayuProgress { from { width: 0; } to { width: 100%; } }
@keyframes ayuGradient { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }

/* ==========================================================================
   Mobile & tablet: image on top, text below on an animated gradient
   ========================================================================== */
@media only screen and (max-width: 899px) {
	.ayu-s-wrap { padding: 0 22px; }
	.ayu-s-track { height: auto; }
	.ayu-s-slide { display: flex; flex-direction: column; }

	.ayu-s-media {
		position: relative;
		inset: auto;
		flex: none;
		aspect-ratio: var(--ayu-s-ratio, 4/3);
	}
	/* Image melts into the slide's gradient */
	.ayu-s-media::after,
	.ayu-s-slide[data-align] .ayu-s-media::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, var(--g1, #2a1d0f) 100%);
	}

	.ayu-s-content {
		flex: 1;
		height: auto;
		display: block;
		margin-top: -1px;
		padding: 10px 0 104px;
		background: linear-gradient(135deg, var(--g1, #2a1d0f) 0%, var(--g2, #5b3d1c) 50%, var(--g1, #2a1d0f) 100%);
		background-size: 220% 220%;
		animation: ayuGradient 9s ease-in-out infinite alternate;
	}
	.ayu-s-slide[data-align] .ayu-s-content > .ayu-s-wrap { justify-content: flex-start; text-align: left; }
	.ayu-s-text { max-width: none; }

	html body .ayu-slider .ayu-s-eyebrow { justify-content: flex-start; margin-bottom: 16px !important; font-size: 12px !important; }
	html body .ayu-slider .ayu-s-title { font-size: clamp(30px, 7.6vw, 44px) !important; line-height: 1.1 !important; }
	html body .ayu-slider .is-long .ayu-s-title { font-size: clamp(25px, 6.2vw, 34px) !important; line-height: 1.18 !important; }
	html body .ayu-slider .ayu-s-caption { margin: 16px 0 0 !important; font-size: 17.5px !important; max-width: none; }
	html body .ayu-slider .ayu-s-btn { margin-top: 26px; padding: 15px 24px !important; font-size: 13px !important; }

	.ayu-s-ui { bottom: 28px; }
	.ayu-s-nav { gap: 18px; }
	.ayu-s-count i { width: 18px; }
	html body .ayu-slider .ayu-s-dot { width: 26px; }
	html body .ayu-slider .ayu-s-arrow { width: 46px; height: 46px; }

	/* Gentler wipe on small screens */
	.ayu-s-slide.is-in:not(.is-first) { animation-duration: .95s; }
	@keyframes ayuTextOut { to { opacity: 0; transform: translate3d(0, 16px, 0); } }
}

@media only screen and (max-width: 420px) {
	.ayu-s-count { display: none !important; }
}

/* ==========================================================================
   Reduced motion: no movement, simple swap
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ayu-slider *,
	.ayu-slider *::before,
	.ayu-slider *::after,
	.ayu-s-slide { animation: none !important; transition: none !important; }
	.ayu-s-slide.is-out { visibility: hidden; }
}