@layer pages {
	/* ─── Homepage Hero ─── */
	.hero--home {
		/* TODO: Replace gradient with Figma hero image via .hero__bg */
		background-image: linear-gradient(135deg, var(--uw-primary) 0%, var(--uw-fg) 100%);
	}

	.hero__inner--home {
		text-align: center;
		align-items: center;
		justify-content: center;
	}

	/* Trust cluster on the dark hero: light text, centered horizontal row */
	.hero .trust-cluster {
		margin-block-start: var(--uw-space-8);
	}

	.hero .trust-cluster__item {
		color: var(--uw-bg);
	}

	.hero__tripadvisor {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: var(--uw-space-8);
		width: 100px;
		height: auto;
		z-index: 1;
	}

	/* ─── Experiences carousel ─── */
	.experiences {
		background-color: var(--uw-bg);
	}

	.experiences__header {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--uw-space-8);
		margin-block-end: var(--uw-space-12);
	}

	.experiences__eyebrow {
		display: block;
		font-family: var(--uw-font-heading);
		font-style: italic;
		font-size: var(--uw-text-lg);
		color: var(--uw-accent);
		margin-block-end: var(--uw-space-3);
	}

	.experiences__title {
		margin-block-end: var(--uw-space-4);
	}

	.experiences__lead {
		max-width: 48ch;
		opacity: 0.75;
		text-wrap: pretty;
		margin-block-end: 0;
	}

	.experiences__controls {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--uw-space-4);
		flex-shrink: 0;
	}

	.experiences__link {
		font-family: var(--uw-font-body);
		font-size: var(--uw-text-sm);
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--uw-fg);
		text-decoration: underline;
		text-underline-offset: 4px;
		white-space: nowrap;
		transition: opacity var(--uw-transition-fast);
	}

	.experiences__link:hover {
		opacity: 0.7;
	}

	.experiences__nav {
		display: flex;
		gap: var(--uw-space-2);
	}

	.experiences__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: var(--uw-radius-pill);
		border: 1px solid rgba(14, 20, 24, 0.2);
		color: var(--uw-fg);
		background: none;
		cursor: pointer;
		opacity: 0.6;
		transition:
			opacity var(--uw-transition-fast),
			border-color var(--uw-transition-fast);
	}

	.experiences__arrow:hover {
		opacity: 1;
		border-color: var(--uw-fg);
	}

	.experiences__arrow:disabled {
		opacity: 0.2;
		cursor: default;
	}

	/* Viewport + track */
	.experiences__viewport {
		overflow: hidden;
		position: relative;
	}

	.experiences__track {
		list-style: none;
		display: flex;
		gap: var(--uw-space-4);
		/* Scroll on X only — letting overflow-y compute to auto would trap
		   the vertical wheel and stop the page from scrolling. */
		overflow: auto hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		margin: 0;
		/* Contain horizontal overscroll only; keep vertical chaining to the page. */
		overscroll-behavior-x: contain;
	}

	.experiences__track::-webkit-scrollbar {
		display: none;
	}

	/* Carousel item sizing (the card visuals live in components.css) */
	.experience-card {
		flex: 0 0 calc((100% - 2 * var(--uw-space-6)) / 3 - var(--uw-space-8));
		scroll-snap-align: start;
	}

	@media (max-width: 900px) {
		.experience-card {
			flex-basis: calc((100% - var(--uw-space-6)) / 2 - var(--uw-space-8));
		}
	}

	@media (max-width: 640px) {
		.experiences__header {
			flex-direction: column;
			align-items: flex-start;
		}

		.experiences__controls {
			align-items: flex-start;
		}

		/* Touch users swipe the carousel — the arrows aren't needed. */
		.experiences__nav {
			display: none;
		}

		/* Full-bleed the carousel to the screen edges so the next card peeks
		   all the way to the edge instead of being clipped by the container
		   padding. The track's own padding keeps the first/last card aligned
		   with the content. (Desktop keeps the container padding.) */
		.experiences__viewport {
			margin-inline: calc(-1 * var(--uw-container-padding));
		}

		.experiences__track {
			padding-inline: var(--uw-container-padding);
			scroll-padding-inline: var(--uw-container-padding);
		}

		.experience-card {
			flex-basis: 85%;
		}
	}

	/* ─── Intro section (text + image, 2-col) ─── */
	.intro__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--uw-space-16);
		align-items: center;
		color: var(--uw-bg);
	}

	.intro__heading {
		margin-block-end: var(--uw-space-6);
	}

	.intro__copy {
		font-size: var(--uw-text-base);
		opacity: 0.75;
		margin-block-end: var(--uw-space-4);
	}

	.intro__link {
		display: inline-flex;
		align-items: center;
		gap: var(--uw-space-2);
		font-family: var(--uw-font-body);
		font-size: var(--uw-text-sm);
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--uw-bg);
		text-decoration: underline;
		text-underline-offset: 4px;
		transition: opacity var(--uw-transition-fast);
		margin-bottom: var(--uw-space-12);
	}

	.intro__link:hover {
		opacity: 0.7;
	}

	.intro__badge-wrapper {
		display: flex;
		justify-content: center;
		margin-block-start: var(--uw-space-4);
	}

	.intro__badge {
		display: flex;
		align-items: center;
		gap: var(--uw-space-3);
		width: 220px;
		text-align: center;
		line-height: 1.2;
	}

	.intro__badge span {
		font-family: var(--uw-font-heading);
		font-size: var(--uw-text-sm);
		letter-spacing: 0.0125em;
		text-transform: uppercase;
		font-weight: 500;
	}

	.wheat-icon {
		width: 24px;
		height: auto;
		flex-shrink: 0;
	}

	.wheat-icon--mirrored {
		transform: scaleX(-1);
	}

	/* ─── Upsell ─── */
	.upsell {
		position: relative;
		/* No overflow: hidden — required for sticky to work */
	}

	.upsell__bg {
		position: sticky;
		top: 0;
		width: 100%;
		height: 100svh;
		object-fit: cover;
		object-position: center;
		display: block;
		z-index: 0;
	}

	.upsell__inner {
		position: relative;
		z-index: 1;
		/* No negative margin — inner flows after the image.
		   As it scrolls into the image area, z-index keeps it on top
		   while the sticky image stays locked behind it. */
		height: 100svh;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-inline: 0;
		width: unset;
	}

	.upsell__logo {
		width: 80px;
		height: auto;
	}

	.upsell__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		color: var(--uw-bg);
		gap: var(--uw-space-6);
		max-width: 480px;
		text-wrap: pretty;
	}

	.upsell__heading {
		color: var(--uw-bg);
		text-wrap: balance;
	}

	.upsell__body {
		font-weight: 300;
		font-size: var(--uw-text-sm);
	}

	.upsell__link {
		font-family: var(--uw-font-body);
		font-size: var(--uw-text-sm);
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--uw-bg);
		text-decoration: underline;
		text-underline-offset: 4px;
		transition: opacity var(--uw-transition-fast);
	}

	.upsell__link:hover {
		opacity: 0.7;
	}

	/* ─── Inclusions ─── */
	.inclusions {
		background-color: var(--uw-bg);
	}

	.inclusions__inner {
		display: flex;
		justify-content: center;
	}

	.inclusions__card {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		border: 1px solid var(--uw-primary);
		padding: var(--uw-space-12) var(--uw-space-16);
		max-width: 560px;
		width: 100%;
		gap: var(--uw-space-8);
	}

	/* Image only shows on desktop (see min-width rule below) */
	.inclusions__media {
		display: none;
	}

	/* Absolutely-positioned image so it doesn't contribute its own height —
	   the cell stretches to the card's height and the image fills it. */
	.inclusions__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	@media (min-width: 769px) {
		.inclusions__inner {
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-items: stretch;
			gap: var(--uw-space-12);
		}

		.inclusions__card {
			max-width: none;
		}

		.inclusions__media {
			display: block;
			position: relative;
		}
	}

	.inclusions__heading {
		font-size: var(--uw-text-xl);
	}

	.inclusions__logo {
		width: 80px;
		height: auto;
	}

	.inclusions__list {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: var(--uw-space-4);
		text-align: left;
		width: 100%;
	}

	.inclusions__list li {
		display: flex;
		gap: var(--uw-space-3);
		font-size: var(--uw-text-base);
		color: var(--uw-fg);
		line-height: 1.5;
		letter-spacing: -0.0125em;
		text-wrap: pretty;
	}

	.inclusions__list li::before {
		content: "–";
		color: var(--uw-primary);
		flex-shrink: 0;
		font-weight: 500;
	}

	@media (max-width: 640px) {
		.inclusions__card {
			padding: var(--uw-space-8) var(--uw-space-6);
		}
	}

	/* ─── Photo Strip ─── */
	.photo-strip {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		background-color: var(--uw-bg);
	}

	.photo-strip__img {
		display: block;
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	@media (max-width: 900px) {
		.photo-strip {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 640px) {
		.photo-strip {
			grid-template-columns: 1fr;
		}
	}

	/* ─── CTA Band ─── */
	.cta-band {
		background-color: var(--uw-primary);
		color: var(--uw-bg);
	}

	.cta-band__heading {
		color: var(--uw-bg);
		margin-block-end: var(--uw-space-4);
	}

	.cta-band__body {
		color: var(--uw-bg);
		opacity: 0.75;
		font-size: var(--uw-text-lg);
		max-width: 48ch;
		margin-inline: auto;
		margin-block-end: var(--uw-space-8);
	}

	/* ─── Responsive ─── */
	@media (max-width: 768px) {
		.intro__inner {
			grid-template-columns: 1fr;
			gap: var(--uw-space-8);
		}
	}

	/* ─── Testimonials section ─── */
	.testimonials {
		background-color: var(--uw-fg);
	}

	.testimonials__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: var(--uw-bg);
		text-align: center;
		gap: var(--uw-space-12);
	}

	/* ─── Slider ─── */
	.testimonials__slider {
		width: 100%;
		max-width: 720px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--uw-space-10);
	}

	.testimonials__track {
		display: grid;
		width: 100%;
	}

	.testimonial {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--uw-space-6);
		opacity: 0;
		transform: translateY(10px);
		transition:
			opacity var(--uw-transition-slow),
			transform var(--uw-transition-slow);
		pointer-events: none;
	}

	.testimonial.is-active {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.testimonial__quote {
		font-family: var(--uw-font-heading);
		font-size: var(--uw-text-2xl);
		font-style: italic;
		font-weight: 400;
		line-height: 1.5;
		color: var(--uw-bg);
		max-width: 50ch;
		margin: 0;
		text-wrap: pretty;
	}

	.testimonial__author {
		display: block;
		font-family: var(--uw-font-body);
		font-size: var(--uw-text-sm);
		font-style: normal;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--uw-accent-light);
	}

	/* ─── Controls (arrows + dots) ─── */
	.testimonials__controls {
		display: flex;
		align-items: center;
		gap: var(--uw-space-6);
	}

	.testimonials__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: var(--uw-radius-pill);
		border: 1px solid rgba(245, 242, 236, 0.2);
		color: var(--uw-bg);
		opacity: 0.5;
		transition:
			opacity var(--uw-transition-fast),
			border-color var(--uw-transition-fast);
		flex-shrink: 0;
	}

	.testimonials__arrow:hover {
		opacity: 1;
		border-color: rgba(245, 242, 236, 0.6);
	}

	.testimonials__dots {
		display: flex;
		gap: var(--uw-space-2);
		align-items: center;
	}

	.testimonials__dot {
		width: 6px;
		height: 6px;
		border-radius: var(--uw-radius-pill);
		background-color: var(--uw-bg);
		opacity: 0.25;
		transition:
			opacity var(--uw-transition-fast),
			width var(--uw-transition-fast);
	}

	.testimonials__dot.is-active {
		opacity: 1;
		width: 20px;
	}

	/* ─── Responsive ─── */
	@media (max-width: 640px) {
		.testimonial__quote {
			font-size: var(--uw-text-xl);
		}
	}

	.intro {
		background-color: var(--uw-fg);
	}

	.upsell__bg {
		position: sticky;
		top: 0;
		height: 100svh;
		object-fit: cover;
	}

	.upsell__inner {
		height: 100svh;
		backdrop-filter: blur(8px);
		background-color: rgba(0, 0, 0, 0.2);
		z-index: 1;
	}
}