


		/* =================================================
		   ROOT
		   ================================================= */

		.sapon-hero-slider-widget {
			--sapon-green: #173F35;
			--sapon-olive: #66704A;
			--sapon-earth: #8A5A3C;
			--sapon-cream: #F7F2E8;

			position: relative;
			width: 100%;
			height: clamp(540px, 68vh, 720px);
			min-height: 540px;

			overflow: hidden;

			background: var(--sapon-cream);
			color: var(--sapon-green);
		}


		/* =================================================
		   SLIDES
		   ================================================= */

		.sapon-hero-slider-widget .sapon-hero-slide {

			position: absolute;
			inset: 0;

			display: flex;
			align-items: center;

			opacity: 0;
			visibility: hidden;

			transition:
				opacity 1s ease,
				visibility 1s ease;

			z-index: 1;
		}


		.sapon-hero-slider-widget .sapon-hero-slide.is-active {

			opacity: 1;
			visibility: visible;

			z-index: 2;
		}


		/* =================================================
		   IMAGE
		   ================================================= */

		.sapon-hero-slider-widget .sapon-hero-image {

			position: absolute;
			inset: 0;

			width: 100%;
			height: 100%;

			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;

			transform: scale(1.025);

			transition: transform 7s ease;
		}


		.sapon-hero-slider-widget
		.sapon-hero-slide.is-active
		.sapon-hero-image {

			transform: scale(1);
		}


		/* =================================================
		   SAPON OVERLAY
		   ================================================= */

		.sapon-hero-slider-widget
		.sapon-hero-slide::after {

			content: "";

			position: absolute;
			inset: 0;

			background:
				linear-gradient(
					90deg,
					rgba(247,242,232,.98) 0%,
					rgba(247,242,232,.94) 24%,
					rgba(247,242,232,.74) 43%,
					rgba(247,242,232,.28) 59%,
					rgba(247,242,232,.04) 74%,
					transparent 100%
				);

			z-index: 1;
			pointer-events: none;
		}


		/* =================================================
		   CONTENT
		   ================================================= */

		.sapon-hero-slider-widget .sapon-hero-container {

			position: relative;

			z-index: 3;

			width: min(
				1180px,
				calc(100% - 48px)
			);

			margin: 0 auto;
		}


		.sapon-hero-slider-widget .sapon-hero-content {

			width: min(580px, 54%);

			transform: translateY(15px);

			opacity: 0;

			transition:
				transform .8s ease .15s,
				opacity .8s ease .15s;
		}


		.sapon-hero-slider-widget
		.sapon-hero-slide.is-active
		.sapon-hero-content {

			transform: translateY(0);
			opacity: 1;
		}


		/* =================================================
		   EYEBROW
		   ================================================= */

		.sapon-hero-slider-widget .sapon-hero-eyebrow {

			display: flex;
			align-items: center;
			gap: 12px;

			margin: 0 0 18px;

			color: var(--sapon-earth);

			font-size: 12px;
			font-weight: 700;

			letter-spacing: .18em;

			text-transform: uppercase;
		}


		.sapon-hero-slider-widget
		.sapon-hero-eyebrow::before {

			content: "";

			width: 30px;
			height: 1px;

			background: var(--sapon-earth);
		}


		/* =================================================
		   TITLE
		   ================================================= */

		.sapon-hero-slider-widget h1,
		.sapon-hero-slider-widget h2 {

			margin: 0 0 20px;

			color: var(--sapon-green);

			font-size: clamp(
				48px,
				5vw,
				72px
			);

			font-weight: 700;

			line-height: 1.02;

			letter-spacing: -.045em;
		}


		.sapon-hero-slider-widget
		.sapon-hero-script {

			display: block;

			color: var(--sapon-earth);

			font-family: Georgia, serif;

			font-weight: 400;
			font-style: italic;

			letter-spacing: -.025em;
		}


		/* =================================================
		   TEXT
		   ================================================= */

		.sapon-hero-slider-widget .sapon-hero-text {

			max-width: 510px;

			margin: 0;

			color: #50605A;

			font-size: 17px;
			line-height: 1.7;
		}


		/* =================================================
		   BUTTONS
		   ================================================= */

		.sapon-hero-slider-widget .sapon-hero-actions {

			display: flex;
			flex-wrap: wrap;

			gap: 12px;

			margin-top: 30px;
		}


		.sapon-hero-slider-widget .sapon-hero-btn {

			display: inline-flex;

			align-items: center;
			justify-content: center;

			min-height: 50px;

			padding: 0 25px;

			border: 1px solid var(--sapon-green);
			border-radius: 999px;

			font-size: 14px;
			font-weight: 700;

			text-decoration: none !important;

			transition:
				background .25s ease,
				color .25s ease,
				border-color .25s ease,
				transform .25s ease;
		}


		.sapon-hero-slider-widget
		.sapon-hero-btn:hover {

			transform: translateY(-2px);
		}


		.sapon-hero-slider-widget
		.sapon-hero-btn-primary {

			background: var(--sapon-green);

			color: #FFFFFF !important;
		}


		.sapon-hero-slider-widget
		.sapon-hero-btn-primary:hover {

			background: #0F3028;

			border-color: #0F3028;

			color: #FFFFFF !important;
		}


		.sapon-hero-slider-widget
		.sapon-hero-btn-secondary {

			background:
				rgba(247,242,232,.62);

			color:
				var(--sapon-green) !important;

			backdrop-filter: blur(4px);
		}


		.sapon-hero-slider-widget
		.sapon-hero-btn-secondary:hover {

			background: #FFFFFF;

			color:
				var(--sapon-green) !important;
		}


		/* =================================================
		   NAVIGATION ARROWS
		   ================================================= */

		.sapon-hero-slider-widget .sapon-hero-arrow {

			position: absolute;

			top: 50%;

			z-index: 10;

			width: 46px;
			height: 46px;

			display: flex;

			align-items: center;
			justify-content: center;

			padding: 0;

			border:
				1px solid
				rgba(23,63,53,.20);

			border-radius: 50%;

			background:
				rgba(247,242,232,.82);

			color: var(--sapon-green);

			font-size: 25px;

			line-height: 1;

			cursor: pointer;

			transform:
				translateY(-50%);

			backdrop-filter: blur(6px);

			transition:
				background .2s ease,
				color .2s ease;
		}


		.sapon-hero-slider-widget
		.sapon-hero-arrow:hover {

			background:
				var(--sapon-green);

			color: #FFFFFF;
		}


		.sapon-hero-slider-widget
		.sapon-hero-prev {

			left: 22px;
		}


		.sapon-hero-slider-widget
		.sapon-hero-next {

			right: 22px;
		}

		/* =================================================
		   MOBILE


		/* =================================================
		   MOBILE
		   ================================================= */

		@media (max-width: 767px) {

			.sapon-hero-slider-widget {

				height: 640px;
				min-height: 640px;
			}


			.sapon-hero-slider-widget
			.sapon-hero-slide {

				align-items: flex-end;
			}


			.sapon-hero-slider-widget
			.sapon-hero-image {

				background-position:
					center top;
			}


			.sapon-hero-slider-widget
			.sapon-hero-slide::after {

				background:

					linear-gradient(
						180deg,
						rgba(247,242,232,.02) 0%,
						rgba(247,242,232,.08) 28%,
						rgba(247,242,232,.55) 49%,
						rgba(247,242,232,.94) 64%,
						#F7F2E8 80%,
						#F7F2E8 100%
					);
			}


			.sapon-hero-slider-widget
			.sapon-hero-container {

				width:
					calc(100% - 30px);

				padding-bottom: 56px;
			}


			.sapon-hero-slider-widget
			.sapon-hero-content {

				width: 100%;
			}


			.sapon-hero-slider-widget
			.sapon-hero-eyebrow {

				margin-bottom: 11px;

				font-size: 10px;
			}


			.sapon-hero-slider-widget h1,
			.sapon-hero-slider-widget h2 {

				margin-bottom: 13px;

				font-size: 40px;

				line-height: 1.02;
			}


			.sapon-hero-slider-widget
			.sapon-hero-text {

				font-size: 15px;

				line-height: 1.55;
			}


			.sapon-hero-slider-widget
			.sapon-hero-actions {

				display: grid;

				gap: 8px;

				margin-top: 18px;
			}


			.sapon-hero-slider-widget
			.sapon-hero-btn {

				width: 100%;

				min-height: 46px;

				padding: 0 15px;
			}


			.sapon-hero-slider-widget
			.sapon-hero-arrow {

				top: 34%;

				width: 38px;
				height: 38px;

				font-size: 21px;
			}


			.sapon-hero-slider-widget
			.sapon-hero-prev {

				left: 10px;
			}


			.sapon-hero-slider-widget
			.sapon-hero-next {

				right: 10px;
			}
		}



		/* =================================================
		   DRAG / SWIPE
		   ================================================= */

		.sapon-hero-slider-widget {
			touch-action: pan-y;
			user-select: none;
		}

		.sapon-hero-slider-widget.is-dragging {
			cursor: grabbing;
		}

		.sapon-hero-slider-widget.is-dragging .sapon-hero-slide {
			transition: none;
		}

		/* =================================================
		   REDUCED MOTION
		   ================================================= */

		@media (
			prefers-reduced-motion:
			reduce
		) {

			.sapon-hero-slider-widget *,
			.sapon-hero-slider-widget *::before,
			.sapon-hero-slider-widget *::after {

				transition: none !important;
			}
		}

	

		/* V2 performance helpers — do not change the V1.2 visual design */
		.sapon-hero-slider-widget .sapon-hero-picture {
			position: absolute;
			inset: 0;
			display: block;
			width: 100%;
			height: 100%;
		}

		.sapon-hero-slider-widget .sapon-hero-picture img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}

		@media (max-width: 767px) {
			.sapon-hero-slider-widget .sapon-hero-picture img {
				object-position: center top;
			}
		}

	
.sapon-hero-slider-widget{--sapon-hero-desktop-height:clamp(540px,68vh,720px);height:var(--sapon-hero-desktop-height)}
@media(max-width:767px){.sapon-hero-slider-widget{height:var(--sapon-hero-mobile-height,640px);min-height:0}}
.sapon-hero-slider-widget .sapon-hero-slide[aria-hidden="true"]{pointer-events:none}
.sapon-hero-slider-widget .sapon-hero-picture{pointer-events:none}
.sapon-hero-slider-widget .sapon-hero-picture img{transform:scale(1.025);transition:transform 7s ease}
.sapon-hero-slider-widget .sapon-hero-slide.is-active .sapon-hero-picture img{transform:scale(1)}
.sapon-hero-slider-widget .sapon-hero-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:11;display:flex;gap:9px}
.sapon-hero-slider-widget .sapon-hero-dot{border:0;width:8px;height:8px;border-radius:50%;padding:0;background:rgba(23,63,53,.35);cursor:pointer}
.sapon-hero-slider-widget .sapon-hero-dot[aria-current="true"]{background:#173f35}
.sapon-hero-slider-widget[data-arrows="no"] .sapon-hero-arrow,.sapon-hero-slider-widget[data-dots="no"] .sapon-hero-dots{display:none}

/* V1.0.1: reliable off-state and per-slide mobile focal point */
.sapon-hero-slider-widget:not([data-dots="yes"]) .sapon-hero-dots{display:none!important}
.sapon-hero-slider-widget:not([data-arrows="yes"]) .sapon-hero-arrow{display:none!important}
@media(max-width:767px){.sapon-hero-slider-widget .sapon-hero-slide .sapon-hero-picture img{object-position:var(--sapon-mobile-x,55%) var(--sapon-mobile-y,0%)}}
