/* 2026 new style sheet */

/* ==========================================================================
   Shared layout
   Content is capped at --content-max and centred, with a side gutter on
   smaller screens. Both .hero__inner and .intro__inner use these, so the
   text lines up between sections. Change the width in one place here.
   ========================================================================== */

:root {
	--content-max: 1180px;
	--content-gutter: clamp(1.25rem, 5vw, 3rem);
}

/* ==========================================================================
   Hero banner
   Override the custom properties below to match the final brand tokens.
   ========================================================================== */

.hero {
	--hero-gold: #b8975a;
	--hero-gold-hover: #a58547;
	--hero-dark: #161616;
	--hero-white: #ffffff;
	--hero-overlay-opacity: 0.35;
	--hero-font-heading: ivyora-display, "Playfair Display", Georgia, serif;
	--hero-font-body: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;

	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: clamp(560px, 85vh, 870px);
	overflow: hidden;
	color: var(--hero-white);
	background-color: var(--hero-dark);
}

/* Background image + overlay ------------------------------------------- */

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Flat black layer so any photo keeps the white text readable.
   Adjust --hero-overlay-opacity (0 to 1) to taste. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: var(--hero-overlay-opacity);
	pointer-events: none;
}

/* Dark gradient on the left so text stays readable. */
.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(22 22 22) 0%, rgb(0 0 0 / 64%) 40%, rgba(22, 22, 22, 0) 75%);
}

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

.hero__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--content-max) + (2 * var(--content-gutter)));
	margin-inline: auto;
	padding: 6rem var(--content-gutter);
}

.hero__content {
	max-width: 36rem;
	text-align: left;
}

.hero__title {
	margin: 0 0 1.5rem;
	font-family: var(--hero-font-heading);
	font-size: clamp(2.75rem, 6vw, 5rem);
	font-weight: 300;
	line-height: 1.05;
	color: var(--hero-white);
}

.hero__text {
	margin: 0 0 2rem;
	font-family: var(--hero-font-body);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.5;
	color: var(--hero-white);
}

.hero__text > :first-child { margin-top: 0; }
.hero__text > :last-child  { margin-bottom: 0; }

/* Buttons --------------------------------------------------------------- */

.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.hero__button {
	display: inline-block;
	padding: 1rem 1.75rem;
	font-family: var(--hero-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hero__button--primary {
	background-color: var(--hero-gold);
	color: var(--hero-dark);
}

.hero__button--primary:hover,
.hero__button--primary:focus-visible {
	background-color: var(--hero-gold-hover);
}

.hero__button--secondary {
	background-color: transparent;
	border-color: var(--hero-white);
	color: var(--hero-white);
}

.hero__button--secondary:hover,
.hero__button--secondary:focus-visible {
	background-color: var(--hero-white);
	color: var(--hero-dark);
}

.hero__button:focus-visible {
	outline: 2px solid var(--hero-white);
	outline-offset: 3px;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.hero__overlay {
		background: linear-gradient(
			90deg,
			rgba(22, 22, 22, 0.88) 0%,
			rgba(22, 22, 22, 0.65) 60%,
			rgba(22, 22, 22, 0.25) 100%
		);
	}
}

@media (max-width: 640px) {
	.hero {
		min-height: 520px;
		align-items: flex-end;
	}

	/* Darken from the bottom, where the text sits on mobile. */
	.hero__overlay {
		background: linear-gradient(
			0deg,
			rgba(22, 22, 22, 0.92) 0%,
			rgba(22, 22, 22, 0.7) 55%,
			rgba(22, 22, 22, 0.2) 100%
		);
	}

	.hero__inner {
		padding-top: 4rem;
		padding-bottom: 3rem;
	}

	.hero__content {
		max-width: none;
	}

	.hero__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__button {
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__button {
		transition: none;
	}
}


/* ==========================================================================
    Fixes
   ========================================================================== */

.white-text, .white-text p { color: #fff; }
.content-width {
    max-width: var(--content-max);
}


/* ==========================================================================
   Fixes
   ========================================================================== */

/* ==========================================================================
   Intro section
   Variables are scoped to .intro so it works independently of .hero.
   (To share them, move these to :root and delete them here.)
   ========================================================================== */

.intro {
	--intro-gold: #b8975a;
	--intro-gold-hover: #a58547;
	--intro-dark: #262626;
	--intro-dark-hover: #000000;
	--intro-white: #ffffff;
	--intro-bg: #f5f5f5;
	--intro-font-heading: ivyora-display, "Playfair Display", Georgia, serif;
	--intro-font-body: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;

	width: 100%;
	background-color: var(--intro-bg);
	color: var(--intro-dark);
}

/* Layout ---------------------------------------------------------------- */

.intro__inner {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 4rem;
	align-items: center;
	box-sizing: border-box;
	max-width: calc(var(--content-max) + (2 * var(--content-gutter)));
	margin-inline: auto;
	padding: 6rem var(--content-gutter);
}

/* No image: text fills the full width. */
.intro--no-image .intro__inner {
	grid-template-columns: 1fr;
}

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

.intro__title {
	margin: 0 0 1.5rem;
	font-family: var(--intro-font-heading);
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	font-weight: 300;
	line-height: 1.1;
	color: var(--intro-dark);
}

.intro__text {
	margin: 0 0 2rem;
	font-family: var(--intro-font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--intro-dark);
}

.intro__text p {
	margin: 0 0 1.25rem;
}

.intro__text > :first-child { margin-top: 0; }
.intro__text > :last-child  { margin-bottom: 0; }

/* If there is no copy above the buttons, drop the extra space. */
.intro__content > :last-child { margin-bottom: 0; }

/* Buttons --------------------------------------------------------------- */

.intro__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.intro__button {
	display: inline-block;
	padding: 1rem 1.75rem;
	font-family: var(--intro-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.intro__button--primary {
	background-color: var(--intro-gold);
	color: var(--intro-dark);
}

.intro__button--primary:hover,
.intro__button--primary:focus-visible {
	background-color: var(--intro-gold-hover);
}

.intro__button--secondary {
	background-color: var(--intro-dark);
	color: var(--intro-white);
}

.intro__button--secondary:hover,
.intro__button--secondary:focus-visible {
	background-color: var(--intro-dark-hover);
}

.intro__button:focus-visible {
	outline: 2px solid var(--intro-dark);
	outline-offset: 3px;
}

/* Image ----------------------------------------------------------------- */

.intro__media {
	margin: 0;
}

.intro__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 10 / 11;
	object-fit: cover;
	border-radius: 6px;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
	.intro__inner {
		grid-template-columns: 1fr;
		gap: 3rem;
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
}

@media (max-width: 640px) {
	.intro__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.intro__button {
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.intro__button {
		transition: none;
	}
}
/* ==========================================================================
   First Review Carousel section
   ========================================================================== */

.reviews-carousel {
	--reviews-dark: #161616;
	--reviews-text-muted: #333333;
	--reviews-bg: #f5f5f5;
	--reviews-card-bg: #ffffff;
	--reviews-font-heading: ivyora-display, "Playfair Display", Georgia, serif;
	--reviews-font-body: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;

	width: 100%;
	background-color: var(--reviews-bg);
	color: var(--reviews-dark);
	padding-top: 6rem;
	padding-bottom: 6rem;
	overflow: hidden;
}

/* Viewport (Full window width) ------------------------------------------ */

.reviews-carousel__viewport {
	width: 100%;
	overflow: hidden !important;
	position: relative;
}

.reviews-carousel__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 2rem;
	width: 100%;
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;

	/* Align Card 1 with left site margin (hero/intro grid edge) */
	padding-left: max(var(--content-gutter), calc((100vw - var(--content-max)) / 2));
}

/* Cards (Sized so 2 cards fill space from left margin to right screen edge) */

.reviews-carousel__card {
	/* Formula: (Viewport Width - Left Grid Margin - Gap) / 2 */
	flex: 0 0 calc((100vw - max(var(--content-gutter), calc((100vw - var(--content-max)) / 2)) - 2rem) / 2) !important;
	width: calc((100vw - max(var(--content-gutter), calc((100vw - var(--content-max)) / 2)) - 2rem) / 2) !important;
	min-width: calc((100vw - max(var(--content-gutter), calc((100vw - var(--content-max)) / 2)) - 2rem) / 2) !important;
	max-width: calc((100vw - max(var(--content-gutter), calc((100vw - var(--content-max)) / 2)) - 2rem) / 2) !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(2.5rem, 4vw, 3.5rem);
	background-color: var(--reviews-card-bg);
	border-radius: 2px;
}

/* Rating Stars ---------------------------------------------------------- */

.reviews-carousel__stars {
	display: flex;
	gap: 0.35rem;
	margin-bottom: 2rem;
	color: var(--reviews-dark);
}

.reviews-carousel__star {
	display: block;
	flex-shrink: 0;
}

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

.reviews-carousel__text {
	margin-bottom: 2.5rem;
	font-family: var(--reviews-font-heading);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 300;
	line-height: 1.35;
	color: var(--reviews-dark);
}

.reviews-carousel__text p {
	margin: 0 0 1rem;
}

.reviews-carousel__text > :first-child { margin-top: 0; }
.reviews-carousel__text > :last-child  { margin-bottom: 0; }

.reviews-carousel__person {
	margin: 0;
	font-family: var(--reviews-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--reviews-text-muted);
}

/* Navigation Controls (Aligned to 1180px content grid) ------------------ */

.reviews-carousel__controls-wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--content-max) + (2 * var(--content-gutter)));
	margin-inline: auto;
	padding-inline: var(--content-gutter);
}

.reviews-carousel__controls {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 2rem;
}

.reviews-carousel__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	color: var(--reviews-dark);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.reviews-carousel__nav:hover,
.reviews-carousel__nav:focus-visible {
	border-color: var(--reviews-dark);
	background-color: var(--reviews-dark);
	color: #ffffff;
}

.reviews-carousel__nav:focus-visible {
	outline: 2px solid var(--reviews-dark);
	outline-offset: 3px;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 768px) {
	.reviews-carousel__track {
		padding-left: var(--content-gutter);
	}

	.reviews-carousel__card {
		flex: 0 0 calc(100vw - (2 * var(--content-gutter))) !important;
		width: calc(100vw - (2 * var(--content-gutter))) !important;
		min-width: calc(100vw - (2 * var(--content-gutter))) !important;
		max-width: calc(100vw - (2 * var(--content-gutter))) !important;
	}
}

@media (max-width: 640px) {
	.reviews-carousel {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reviews-carousel__track {
		transition: none;
	}

	.reviews-carousel__nav {
		transition: none;
	}
}

/* ==========================================================================
   Treatment Carousel section
   ========================================================================== */

.treatment-carousel {
	--treatment-gold: #b8975a;
	--treatment-dark: #161616;
	--treatment-bg: #f5f5f5;
	--treatment-font-heading: ivyora-display, "Playfair Display", Georgia, serif;
	--treatment-font-body: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;

	width: 100%;
	background-color: var(--treatment-bg);
	color: var(--treatment-dark);
	padding-top: 6rem;
	padding-bottom: 6rem;
	overflow: hidden;
}

/* Header (Constrained to content grid) ---------------------------------- */

.treatment-carousel__header-wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--content-max) + (2 * var(--content-gutter)));
	margin-inline: auto;
	padding-inline: var(--content-gutter);
	margin-bottom: 3rem;
}

.treatment-carousel__header {
	max-width: 36rem;
}

.treatment-carousel__title {
	margin: 0 0 1rem;
	font-family: var(--treatment-font-heading);
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	font-weight: 300;
	line-height: 1.1;
	color: var(--treatment-dark);
}

.treatment-carousel__text {
	font-family: var(--treatment-font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #444444;
}

.treatment-carousel__text p {
	margin: 0 0 1rem;
}

.treatment-carousel__text > :last-child {
	margin-bottom: 0;
}

/* Viewport & Track (Bleeds to the right screen edge) -------------------- */

.treatment-carousel__viewport {
	width: 100%;
	overflow: hidden !important;
	position: relative;
}

.treatment-carousel__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 1.5rem;
	width: 100%;
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;

	/* Align Card 1 with left margin, bleed right */
	padding-left: max(var(--content-gutter), calc((100vw - var(--content-max)) / 2));
}

/* Treatment Card (3 cards fit exactly in 1180px grid width) -------------- */

.treatment-card {
	/* Formula: (Content Max - 2 Gaps) / 3 */
	flex: 0 0 calc((min(100vw - (2 * var(--content-gutter)), var(--content-max)) - 3rem) / 3) !important;
	width: calc((min(100vw - (2 * var(--content-gutter)), var(--content-max)) - 3rem) / 3) !important;
	min-width: calc((min(100vw - (2 * var(--content-gutter)), var(--content-max)) - 3rem) / 3) !important;
	max-width: calc((min(100vw - (2 * var(--content-gutter)), var(--content-max)) - 3rem) / 3) !important;
	box-sizing: border-box;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 10 / 12;
}

.treatment-card__link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: var(--treatment-dark);
	position: relative;
}

/* Image ----------------------------------------------------------------- */

.treatment-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.treatment-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.5s ease;
}

/* Gold Overlay (Shows on Hover) ----------------------------------------- */

.treatment-card__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--treatment-gold);
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: 1;
}

/* Card Content Overlay -------------------------------------------------- */

.treatment-card__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.5rem, 3vw, 2rem);
	box-sizing: border-box;
}

.treatment-card__title {
	margin: 0 0 0.5rem;
	font-family: var(--treatment-font-heading);
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	font-weight: 300;
	line-height: 1.2;
	color: var(--treatment-dark);
	transition: transform 0.35s ease;
}

.treatment-card__hover-content {
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

.treatment-card__summary {
	font-family: var(--treatment-font-body);
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--treatment-dark);
	margin-bottom: 1.25rem;
}

.treatment-card__summary p {
	margin: 0 0 0.5rem;
}

.treatment-card__summary > :last-child {
	margin-bottom: 0;
}

.treatment-card__btn {
	display: inline-block;
	font-family: var(--treatment-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--treatment-dark);
	border-bottom: 1.5px solid var(--treatment-dark);
	padding-bottom: 2px;
}

/* Hover Interactions ---------------------------------------------------- */

.treatment-card:hover .treatment-card__overlay,
.treatment-card:focus-within .treatment-card__overlay {
	opacity: 1;
}

.treatment-card:hover .treatment-card__image,
.treatment-card:focus-within .treatment-card__image {
	transform: scale(1.05);
}

.treatment-card:hover .treatment-card__hover-content,
.treatment-card:focus-within .treatment-card__hover-content {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Controls Wrapper ------------------------------------------------------ */

.treatment-carousel__controls-wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--content-max) + (2 * var(--content-gutter)));
	margin-inline: auto;
	padding-inline: var(--content-gutter);
	margin-top: 2.5rem;
}

.treatment-carousel__controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.treatment-carousel__nav-group {
	display: flex;
	gap: 0.75rem;
}

.treatment-carousel__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	color: var(--treatment-dark);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.treatment-carousel__nav:hover,
.treatment-carousel__nav:focus-visible {
	border-color: var(--treatment-dark);
	background-color: var(--treatment-dark);
	color: #ffffff;
}

.treatment-carousel__nav:focus-visible {
	outline: 2px solid var(--treatment-dark);
	outline-offset: 3px;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.treatment-card {
		flex: 0 0 calc((100vw - var(--content-gutter) - 1.5rem) / 2.2) !important;
		width: calc((100vw - var(--content-gutter) - 1.5rem) / 2.2) !important;
		min-width: calc((100vw - var(--content-gutter) - 1.5rem) / 2.2) !important;
		max-width: calc((100vw - var(--content-gutter) - 1.5rem) / 2.2) !important;
	}
}

@media (max-width: 640px) {
	.treatment-carousel {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.treatment-carousel__track {
		padding-left: var(--content-gutter);
	}

	.treatment-card {
		flex: 0 0 calc(100vw - (2 * var(--content-gutter))) !important;
		width: calc(100vw - (2 * var(--content-gutter))) !important;
		min-width: calc(100vw - (2 * var(--content-gutter))) !important;
		max-width: calc(100vw - (2 * var(--content-gutter))) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.treatment-carousel__track,
	.treatment-card__image,
	.treatment-card__overlay,
	.treatment-card__hover-content {
		transition: none;
	}
}