/* =========================================================
	INGRID LOHMAN
	SITE 2026
========================================================= */


/* =========================================================
	THEME
========================================================= */

:root {
	--color-primary: #A59586;
	--color-primary-dark: #7D6E61;
	--color-primary-light: #C9BDB3;
	--color-primary-soft: #F1ECE8;
	--color-secondary: #89905E;
	--color-secondary-dark: #5F644D;
	--color-secondary-light: #B0B974;
	--color-secondary-soft: #EEF0E8;
}



/* =========================================================
	GENERAL
========================================================= */

.container,
.container-fluid {
	position: relative;
	z-index: 2;
}

.reveal--animating {
	transition: none !important;
}

.section--advice,
.section--brands,
.section--footer,
.section--method,
.section--philosophy,
.section--research,
.section--store {
	padding-bottom: 6rem;
	padding-top: 6rem;
}


.section--intro,
.section--recognition,
.section--treatments {
	padding-bottom: 8rem;
	padding-top: 8rem;
}



/* =========================================================
	FLOATING ACTIONS
========================================================= */

.floating--actions {
	align-items: flex-end;
	bottom: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	position: fixed;
	right: 1.5rem;
	z-index: 1100;
}

.floating--button {
	align-items: center;
	border-radius: 1rem;
	box-shadow: var(--shadow-medium);
	display: inline-flex;
	justify-content: center;
	transition: var(--transition);
}

.floating--button:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-3px);
}

.floating--button--booking {
	background-color: var(--color-primary);
	border: 1.5px solid var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-family-heading);
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
	padding: .8rem 1.25rem .75rem;
}

.floating--button--booking:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
}

.floating--button--whatsapp {
	background-color: #25D366;
	color: var(--color-white);
	font-size: 1.85rem;
	height: 56px;
	padding: 0;
	width: 56px;
}

.floating--button--whatsapp:hover {
	background-color: #1FB958;
	color: var(--color-white);
}



/* =========================================================
	HEADER
========================================================= */

.section--header {
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 8px 30px rgba(41, 39, 37, .05);
	left: 0;
	position: sticky;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1040;
}

.header--wrapper {
	margin-left: auto;
	margin-right: auto;
	max-width: 1920px;
	padding-left: 2rem;
	padding-right: 2rem;
}

.header--inner {
	align-items: center;
	display: flex;
	gap: 2rem;
	min-height: 110px;
	width: 100%;
}

.header--logo {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
	max-width: 255px;
	width: 100%;
}

.header--logo img {
	display: block;
	height: 70px;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
	width: auto;
}

.header--navigation {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: 1.25rem;
	justify-content: flex-end;
	min-width: 0;
}

.header--navigation--link {
	align-items: center;
	color: var(--color-black);
	display: inline-flex;
	font-family: var(--font-family-heading);
	font-size: 1.3rem;
	font-weight: var(--font-weight-bold);
	justify-content: center;
	letter-spacing: -.01rem;
	line-height: 1;
	padding: 1rem .65rem;
	position: relative;
	transition: var(--transition);
	white-space: nowrap;
}

.header--navigation--link::after {
	background-color: var(--color-primary);
	bottom: .45rem;
	content: '';
	height: 2px;
	left: .65rem;
	opacity: 0;
	position: absolute;
	right: .65rem;
	transform: scaleX(.35);
	transition: var(--transition);
}

.header--navigation--link:hover {
	color: var(--color-primary-dark);
}

.header--navigation--link:hover::after {
	opacity: .45;
	transform: scaleX(1);
}

.header--navigation--link.active,
.header--navigation--link[aria-current='page'] {
	color: var(--color-primary-dark);
}

.header--navigation--link.active::after,
.header--navigation--link[aria-current='page']::after {
	opacity: 1;
	transform: scaleX(1);
}

.header--actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: .75rem;
	justify-content: flex-end;
}

.button--header {
	align-items: center;
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 1.125rem;
	justify-content: center;
	letter-spacing: -.025rem;
	min-height: 48px;
	padding-left: 1rem;
	padding-right: 1rem;
	transform: none;
	white-space: nowrap;
	width: auto;
}

.button--header:hover,
.button--header:focus {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
	transform: none;
}

.button--whatsapp {
	background-color: #25D366;
	border-color: #25D366;
	color: var(--color-white);
}

.button--whatsapp:hover,
.button--whatsapp:focus {
	background-color: #1FB958;
	border-color: #1FB958;
	color: var(--color-white);
}

.header--menu {
	align-items: center;
	background-color: var(--color-primary-soft);
	border: 1px solid var(--color-primary-light);
	border-radius: 1rem;
	color: var(--color-primary-dark);
	display: inline-flex;
	flex: 0 0 44px;
	font-size: 1.2rem;
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: var(--transition);
	width: 44px;
}

.header--menu:hover,
.header--menu:focus {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}



/* ============================
	HEADER DROPDOWN
============================ */

.header--navigation--dropdown {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	position: relative;
}

.header--navigation--toggle {
	background-color: transparent;
	border: 0;
	gap: .4rem;
	margin: 0;
}

.header--navigation--toggle:hover,
.header--navigation--toggle:focus,
.header--navigation--toggle:active {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	outline: 0;
}

.header--navigation--toggle i {
	font-size: .72rem;
	margin-top: .1rem;
	transition: var(--transition);
}

.header--navigation--toggle[aria-expanded='true'] {
	color: var(--color-primary-dark);
}

.header--navigation--toggle[aria-expanded='true']::after {
	opacity: 1;
	transform: scaleX(1);
}

.header--navigation--toggle[aria-expanded='true'] i {
	transform: rotate(180deg);
}

.header--dropdown {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-medium);
	margin-top: .35rem !important;
	min-width: 285px;
	padding: .5rem;
	z-index: 1050;
}

.header--dropdown--link {
	border-radius: var(--radius-sm);
	color: var(--color-brown-dark);
	font-family: var(--font-family-heading);
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.35;
	padding: .8rem .9rem;
	transition: var(--transition);
	white-space: normal;
}

.header--dropdown--link:hover,
.header--dropdown--link:focus {
	background-color: var(--color-primary-soft);
	color: var(--color-primary-dark);
}

.header--dropdown--link.active,
.header--dropdown--link:active {
	background-color: var(--color-primary);
	color: var(--color-white);
}



/* =========================================================
	OFFCANVAS NAVIGATION
========================================================= */

.offcanvas {
	background-color: var(--color-off-white);
	border-left: 1px solid var(--color-border);
	max-width: 390px;
	width: 100%;
}

.offcanvas-header {
	align-items: center;
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	justify-content: space-between;
	padding: 1.25rem;
}

.offcanvas-header .header--logo {
	max-width: 220px;
}

.offcanvas-header .header--logo img {
	height: 52px;
}

.offcanvas-header .btn-close {
	box-shadow: none;
	margin: 0;
	opacity: .65;
}

.offcanvas-header .btn-close:hover,
.offcanvas-header .btn-close:focus {
	box-shadow: none;
	opacity: 1;
}

.offcanvas-body {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
}

.offcanvas--navigation {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.offcanvas--navigation--link {
	align-items: center;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-brown-dark);
	display: flex;
	font-family: var(--font-family-heading);
	font-size: 1.075rem;
	font-weight: var(--font-weight-bold);
	justify-content: space-between;
	line-height: 1.3;
	padding-bottom: 1rem;
	padding-top: 1rem;
	transition: var(--transition);
	width: 100%;
}

.offcanvas--navigation--link:hover,
.offcanvas--navigation--link.active,
.offcanvas--navigation--link[aria-current='page'] {
	color: var(--color-primary-dark);
	padding-left: .35rem;
}

.offcanvas--actions {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin-top: 2rem;
	width: 100%;
}

.offcanvas--actions .button {
	width: 100%;
}



/* ============================
	OFFCANVAS SUBNAVIGATION
============================ */

.offcanvas--navigation--group {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 1rem;
	padding-top: 1rem;
	width: 100%;
}

.offcanvas--navigation--title {
	color: var(--color-brown-dark);
	display: block;
	font-family: var(--font-family-heading);
	font-size: 1.075rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	margin-bottom: .75rem;
}

.offcanvas--navigation--children {
	border-left: 2px solid var(--color-primary-light);
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding-left: 1rem;
}

.offcanvas--navigation--child {
	color: var(--color-text);
	display: block;
	font-size: .975rem;
	line-height: 1.45;
	padding: .45rem 0;
	transition: var(--transition);
	width: 100%;
}

.offcanvas--navigation--child:hover,
.offcanvas--navigation--child:focus,
.offcanvas--navigation--child.active {
	color: var(--color-primary-dark);
	padding-left: .25rem;
}


.offcanvas--navigation--title:hover,
.offcanvas--navigation--title:focus,
.offcanvas--navigation--title.active,
.offcanvas--navigation--title[aria-current='page'] {
	color: var(--color-primary-dark);
}

.offcanvas--footer {
	border-top: 1px solid var(--color-border);
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	width: 100%;
}

.offcanvas--socials {
	display: grid;
	gap: .65rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.offcanvas--social-link {
	align-items: center;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-brown-dark);
	display: inline-flex;
	font-family: var(--font-family-heading);
	font-size: .9rem;
	font-weight: var(--font-weight-bold);
	gap: .55rem;
	justify-content: center;
	min-height: 44px;
	padding: .65rem .75rem;
	transition: var(--transition);
}

.offcanvas--social-link:hover,
.offcanvas--social-link:focus {
	border-color: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.offcanvas--social-link i {
	font-size: 1.05rem;
	line-height: 1;
}

.offcanvas--legal {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem .85rem;
	margin-top: 1rem;
}

.offcanvas--legal a {
	color: var(--color-text);
	font-size: .8rem;
	line-height: 1.45;
	transition: var(--transition);
}

.offcanvas--legal a:hover,
.offcanvas--legal a:focus {
	color: var(--color-primary-dark);
}



/* =========================================================
	HOMEPAGE — HERO
========================================================= */

.section--hero {
	align-items: center;
	display: flex;
	min-height: calc(100vh - 154px);
	overflow: hidden;
	padding-bottom: 5rem;
	padding-top: 5rem;
	position: relative;
}

.hero--media {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

.hero--media picture,
.hero--media img {
	display: block;
	height: 100%;
	width: 100%;
}

.hero--media img {
	object-fit: cover;
	object-position: center center;
	transform: scale(1.02);
}

.hero--overlay {
	background: linear-gradient(90deg,
			rgba(63, 51, 43, .7) 0%,
			rgba(63, 51, 43, .38) 42%,
			rgba(63, 51, 43, .06) 68%,
			rgba(63, 51, 43, 0) 76%);
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.hero--container {
	padding-bottom: 4rem;
	padding-top: 4rem;
	position: relative;
	z-index: 2;
}

.hero--content {
	max-width: 800px;
	position: relative;
	text-align: left;
}

.hero--subtitle,
.hero--text,
.hero--title {
	color: var(--color-white);
}

.hero--title {
	font-size: 4.35rem;
	font-weight: var(--font-weight-heading);
	letter-spacing: -.065rem;
	line-height: 1;
	margin-bottom: 1.1rem;
	text-shadow: 0 12px 30px rgba(41, 39, 37, .2);
}

.hero--subtitle {
	font-size: 1.75rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.035rem;
	line-height: 1.2;
	margin-bottom: 1.2rem;
	max-width: 720px;
	text-shadow: 0 8px 24px rgba(41, 39, 37, .18);
}

.hero--text {
	font-size: 1.2rem;
	line-height: 1.75;
	max-width: 750px;
	text-shadow: 0 8px 20px rgba(41, 39, 37, .16);
}

.hero--actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: flex-start;
	margin-top: 2rem;
}

.hero--actions .button {
	font-size: 1.1rem;
	min-height: 56px;
	padding: .9rem 1.45rem .85rem;
}

.button--hero {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	box-shadow: 0 12px 30px rgba(41, 39, 37, .12);
	color: var(--color-white);
}

.button--hero:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
}

.button--hero--ghost {
	background-color: var(--color-white);
	border-color: var(--color-white);
	box-shadow: 0 12px 30px rgba(41, 39, 37, .12);
	color: var(--color-brown-dark);
}

.button--hero--ghost:hover {
	background-color: var(--color-brown-dark);
	border-color: var(--color-brown-dark);
	color: var(--color-white);
}



/* =========================================================
	HOMEPAGE — ROUTES
========================================================= */

.section--routes {
	background-color: var(--color-white);
	padding-bottom: 4rem;
	padding-top: 4rem;
	position: relative;
	z-index: 5;
}

.section--routes h2 {
	font-size: 1.75rem;
	margin-bottom: .75rem;
}

.route--card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	overflow: hidden;
	padding: 1.65rem;
	position: relative;
	transition: var(--transition);
}

.route--card:hover {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}

.route--icon {
	align-items: center;
	background-color: color-mix(in srgb, var(--color-secondary-light) 40%, transparent);
	border: 1px solid var(--color-secondary);
	border-radius: var(--radius-sm);
	color: var(--color-secondary-dark);
	display: inline-flex;
	font-size: 1.45rem;
	height: 54px;
	justify-content: center;
	width: 54px;
}

.route--content h3 {
	color: var(--color-brown-dark);
	font-size: 1.55rem;
	letter-spacing: 0;
	line-height: 1.1;
	margin-bottom: .55rem;
}

.route--content p {
	color: var(--color-text);
	font-size: 1.02rem;
	line-height: 1.6;
}

.route--link {
	color: var(--color-primary-dark);
	display: inline-flex;
	font-family: var(--font-family-heading);
	font-size: 1.025rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	margin-top: auto;
}



/* =========================================================
	HOMEPAGE — INTRO
========================================================= */

.section--intro {
	background-color: var(--color-grey-warm-soft);
	padding-bottom: 8rem;
	padding-top: 8rem;
}

.intro--title {
	font-size: 2.75rem;
	line-height: 1.08;
	margin-bottom: 1.15rem;
}

.intro--text {
	color: var(--color-text);
	font-size: 1.15rem;
	line-height: 1.8;
	margin-bottom: 1rem;
}

.intro--actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.8rem;
}

.intro--image {
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	position: relative;
}

.intro--image picture,
.intro--image img {
	display: block;
	height: 100%;
	width: 100%;
}

.intro--image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center center;
}

.section--intro .button--ghost {
	background-color: var(--color-white);
	border-color: var(--color-primary);
	color: var(--color-brown-dark);
}

.section--intro .button--ghost:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}



/* =========================================================
	HOMEPAGE — RECOGNITION
========================================================= */

.section--recognition {
	background-color: var(--color-white);
	padding-bottom: 8rem;
	padding-top: 9rem;
}

.recognition--title {
	font-size: 2.5rem;
	line-height: 1.1;
	margin-bottom: .65rem;
}

.recognition--intro {
	color: var(--color-text);
	font-size: 1.15rem;
	line-height: 1.75;
	margin: 0 auto;
	max-width: 1000px;
}

.recognition--card {
	background-color: color-mix(in srgb, var(--color-secondary-light) 28%, var(--color-white));
	border: 1px solid var(--color-secondary-light);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 24px rgba(41, 39, 37, .04);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	transition: var(--transition);
}

.recognition--card:hover {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}

.recognition--content {
	flex: 1 1 auto;
	padding: 1.75rem;
}

.recognition--label {
	color: var(--color-primary-dark);
	display: inline-flex;
	font-family: var(--font-family-heading);
	font-size: 1.05rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.01rem;
	line-height: 1.2;
	margin-bottom: .75rem;
}

.recognition--content h3 {
	font-size: 1.4rem;
	line-height: 1.2;
	margin-bottom: .75rem;
}

.recognition--content p {
	color: var(--color-text);
	font-size: 1.025rem;
	line-height: 1.7;
}

.recognition--need {
	background-color: rgba(255, 255, 255, .72);
	border-top: 1px solid var(--color-secondary-light);
	padding: 1.35rem 1.75rem 1.5rem;
}

.recognition--need span {
	color: var(--color-primary-dark);
	display: block;
	font-family: var(--font-family-heading);
	font-size: .82rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	margin-bottom: .45rem;
}

.recognition--need strong {
	color: var(--color-brown-dark);
	display: block;
	font-family: var(--font-family-text);
	font-size: .975rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
}



/* =========================================================
	HOMEPAGE — PHILOSOPHY
========================================================= */

.section--philosophy {
	background-color: var(--color-white);
	padding-bottom: 9rem;
	padding-top: 2rem;
}

.philosophy--gallery {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.philosophy--image {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	position: relative;
}

.philosophy--image picture,
.philosophy--image img {
	display: block;
	height: 100%;
	width: 100%;
}

.philosophy--image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center center;
	transition: var(--transition-slow);
}

.philosophy--image:hover img {
	transform: scale(1.025);
}

.philosophy--content {
	padding-left: 1rem;
}

.philosophy--title {
	font-size: 2.45rem;
	line-height: 1.1;
	margin-bottom: 1rem;
}

.philosophy--text {
	color: var(--color-text);
	font-size: 1.1rem;
	line-height: 1.8;
	margin-bottom: 1rem;
}

.philosophy--content .button {
	margin-top: .85rem;
}



/* =========================================================
	HOMEPAGE — METHOD
========================================================= */

.section--method {
	background-color: var(--color-grey-warm-soft);
	padding-bottom: 5rem;
	padding-top: 6rem;
}

.method--title {
	font-size: 2.45rem;
	line-height: 1.1;
	margin-bottom: .65rem;
}

.method--intro {
	color: var(--color-text);
	font-size: 1.2rem;
	line-height: 1.7;
	margin: 0 auto;
	max-width: 1080px;
}

.method--card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: var(--transition);
}

.method--card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-5px);
}

.method--image {
	background-color: var(--color-white);
	overflow: hidden;
	padding: 1.1rem;
}

.method--image picture,
.method--image img {
	display: block;
	height: 100%;
	width: 100%;
}

.method--image img {
	aspect-ratio: 4 / 3.5;
	border-radius: var(--radius-md);
	object-fit: cover;
	object-position: center center;
	transition: var(--transition-slow);
}

.method--card:hover .method--image img {
	transform: scale(1.035);
}

.method--content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: .35rem 1.5rem 1.5rem;
}

.method--content h3 {
	font-size: 1.35rem;
	line-height: 1.2;
	margin-bottom: .65rem;
}

.method--content p {
	color: var(--color-text);
	font-size: 1rem;
	line-height: 1.65;
	margin-bottom: 1rem;
}

.method--content span {
	background-color: var(--color-secondary);
	border-radius: var(--radius-sm);
	color: var(--color-white);
	display: inline-flex;
	font-family: var(--font-family-heading);
	font-size: .9rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	margin-top: auto;
	padding: .4rem .65rem .35rem .65rem;
	width: fit-content;
}



/* =========================================================
	SHARED — TREATMENTS
========================================================= */

.section--treatments {
	background-color: var(--color-white);
	padding-bottom: 8rem;
	padding-top: 8rem;
}

.treatments--title {
	font-size: 2.45rem;
	line-height: 1.1;
	margin-bottom: .65rem;
}

.treatments--intro {
	color: var(--color-text);
	font-size: 1.2rem;
	line-height: 1.7;
	margin: 0 auto;
	max-width: 1080px;
}

.treatments--list {
	height: 100%;
}

.treatment--item {
	background: linear-gradient(90deg,
			#FAF8F6 0%,
			#FDFCFB 72%,
			var(--color-white) 100%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 6px 18px rgba(41, 39, 37, .03);
	cursor: pointer;
	padding: 1.2rem 1.25rem;
	transition: var(--transition);
}

.treatment--item+.treatment--item {
	margin-top: 1rem;
}

.treatment--item:hover {
	background: linear-gradient(90deg,
			#F8F5F2 0%,
			#FCFBFA 70%,
			var(--color-white) 100%);
	border-color: var(--color-primary-light);
	box-shadow: 0 10px 24px rgba(41, 39, 37, .06);
	transform: translateY(-1px);
}

.treatment--item.open {
	background: linear-gradient(90deg,
			#F8F5F2 0%,
			var(--color-white) 78%);
	border-color: var(--color-primary-light);
	box-shadow: 0 12px 28px rgba(41, 39, 37, .07);
}

.treatment--question {
	gap: 1rem;
	position: relative;
}

.treatment--heading {
	flex: 1 1 auto;
	min-width: 0;
}

.treatment--heading h3 {
	font-size: 1.2rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.015rem;
	line-height: 1.3;
	padding-right: .25rem;
}

.treatment--icon {
	align-items: center;
	background-color: var(--color-white);
	border: 1px solid var(--color-secondary-light);
	border-radius: var(--radius-sm);
	color: var(--color-secondary-dark);
	display: inline-flex;
	flex: 0 0 2.2rem;
	height: 2.2rem;
	justify-content: center;
	position: relative;
	transition: var(--transition);
	width: 2.2rem;
}

.treatment--item:hover .treatment--icon {
	background-color: var(--color-secondary-soft);
	border-color: var(--color-secondary-light);
	color: var(--color-secondary-dark);
}

.treatment--item.open .treatment--icon {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	color: var(--color-white);
}

.treatment--icon .ico {
	align-items: center;
	display: flex;
	font-size: .9rem;
	height: 100%;
	inset: 0;
	justify-content: center;
	line-height: 1;
	margin: auto;
	position: absolute;
	transition: opacity .2s ease;
	width: 100%;
}

.treatment--icon .ico-minus {
	opacity: 0;
}

.treatment--icon .ico-plus {
	opacity: 1;
}

.treatment--item.open .treatment--icon .ico-minus {
	opacity: 1;
}

.treatment--item.open .treatment--icon .ico-plus {
	opacity: 0;
}

.treatment--answer {
	display: none;
	overflow: hidden;
	padding-right: 2.75rem;
}

.treatment--answer p {
	color: var(--color-text);
	font-size: 1.025rem;
	line-height: 1.7;
	margin: 0;
	padding-top: .95rem;
}

.section--treatments .button--grey {
	background-color: var(--color-grey-warm);
	border-color: var(--color-grey-warm);
	color: var(--color-brown-dark);
}

.section--treatments .button--grey:hover {
	background-color: var(--color-grey-light);
	border-color: var(--color-grey-light);
	color: var(--color-brown-dark);
}

.section--treatments .button--pink {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.section--treatments .button--pink:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
}



/* =========================================================
	SHARED — STORE
========================================================= */

.section--store {
	background-color: var(--color-grey-warm-soft);
}

.section--store+.section--store {
	background-color: var(--color-white);
}

.store--panel {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	padding: 2rem;
}

.store--content {
	padding: 1rem 0 1rem .5rem;
}

.store--title {
	font-size: 2.45rem;
	line-height: 1.1;
	margin-bottom: 1rem;
}

.store--text {
	color: var(--color-text);
	font-size: 1.1rem;
	line-height: 1.8;
	margin-bottom: 1rem;
}

.store--info {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 1.75rem;
	margin-top: 1.5rem;
}

.store--info p {
	background-color: var(--color-grey-warm-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	flex: 1 1 240px;
	font-size: .975rem;
	line-height: 1.65;
	padding: 1.15rem;
}

.store--info strong {
	color: var(--color-brown-dark);
	font-family: var(--font-family-heading);
	font-size: 1.05rem;
	font-weight: var(--font-weight-bold);
}

.store--image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
}

.store--image picture,
.store--image img {
	display: block;
	height: 100%;
	width: 100%;
}

.store--image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center center;
}

.section--store .button--ghost {
	background-color: var(--color-white);
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
}

.section--store .button--ghost:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}



/* =========================================================
	SHARED — PROGRAM
========================================================= */

.section--program {
	background-color: var(--color-grey-soft);
	padding-bottom: 8rem;
	padding-top: 8rem;
}

.program--content {
	max-width: 580px;
}

.program--title {
	font-size: 2.55rem;
	line-height: 1.08;
	margin-bottom: 1.15rem;
}

.program--text {
	color: var(--color-text);
	font-size: 1.1rem;
	line-height: 1.8;
	margin-bottom: 1rem;
}

.program--actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.8rem;
}

.program--steps {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	padding: 1.25rem;
}

.program--step {
	background-color: var(--color-grey-warm-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 230px;
	padding: 1.5rem;
	transition: var(--transition);
}

.program--step:hover {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-soft);
	transform: translateY(-3px);
}

.program--steps .col-12:nth-child(2) .program--step,
.program--steps .col-12:nth-child(3) .program--step {
	background-color: var(--color-secondary-soft);
	border-color: var(--color-secondary-light);
}

.program--step-number {
	align-items: center;
	background-color: var(--color-primary);
	border-radius: var(--radius-full);
	color: var(--color-white);
	display: inline-flex;
	font-family: var(--font-family-heading);
	font-size: .9rem;
	font-weight: var(--font-weight-bold);
	height: 2.5rem;
	justify-content: center;
	margin-bottom: 1.1rem;
	width: 2.5rem;
}

.program--steps .col-12:nth-child(2) .program--step-number,
.program--steps .col-12:nth-child(3) .program--step-number {
	background-color: var(--color-secondary);
}

.program--step h3 {
	font-size: 1.3rem;
	line-height: 1.2;
	margin-bottom: .65rem;
}

.program--step p {
	color: var(--color-text);
	font-size: 1rem;
	line-height: 1.65;
	margin: 0;
}



/* ============================
	PROGRAM PREVIEW
============================ */

.section--program-preview {
	background-color: var(--color-grey-warm-soft);
	padding-bottom: 7rem;
	padding-top: 7rem;
}

.program-preview {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft-equal);
	overflow: hidden;
}

.program-preview--content {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 4rem;
}

.program-preview--title {
	color: var(--color-brown-dark);
	font-size: clamp(2.35rem, 2.8vw, 3.25rem);
	font-weight: var(--font-weight-bold);
	letter-spacing: -.055rem;
	line-height: 1.06;
	margin: 1rem 0 1.5rem;
	max-width: 850px;
}

.program-preview--intro {
	color: var(--color-brown-dark);
	font-size: 1.18rem;
	line-height: 1.7;
	margin: 0 0 1rem;
	max-width: 820px;
}

.program-preview--intro strong {
	color: var(--color-brown-dark);
	display: block;
	font-weight: var(--font-weight-bold);
}

.program-preview--text {
	color: #4f5148;
	font-size: 1.12rem;
	line-height: 1.78;
	margin: 0;
	max-width: 820px;
}

.program-preview--meta {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 2.25rem 0 2rem;
}

.program-preview--meta-item {
	background-color: var(--color-grey-warm-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
	padding: 1.25rem;
}

.program-preview--meta-item span {
	color: var(--color-text-muted);
	font-family: var(--font-family-heading);
	font-size: .9rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: .075rem;
	line-height: 1.3;
	text-transform: uppercase;
}

.program-preview--meta-item strong {
	color: var(--color-brown-dark);
	font-size: 1.15rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
}

.program-preview--highlights {
	display: grid;
	gap: .85rem;
	list-style: none;
	margin: 0 0 2.15rem;
	padding: 0;
}

.program-preview--highlights li {
	align-items: flex-start;
	color: var(--color-text);
	display: flex;
	font-size: 1rem;
	gap: .75rem;
	line-height: 1.65;
	margin: 0;
	padding: 0;
}

.program-preview--highlights li i {
	align-items: center;
	background-color: var(--color-secondary);
	border-radius: var(--radius-sm);
	color: var(--color-white);
	display: inline-flex;
	flex: 0 0 1.4rem;
	font-size: .68rem;
	height: 1.4rem;
	justify-content: center;
	margin-top: .15rem;
	width: 1.4rem;
}

.program-preview--highlights li span {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.program-preview--actions {
	margin-top: auto;
}

.program-preview--image {
	height: 100%;
	min-height: 100%;
	overflow: hidden;
}

.program-preview--image img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: var(--transition-slow);
	width: 100%;
}

.program-preview:hover .program-preview--image img {
	transform: scale(1.02);
}



/* =========================================================
	SHARED — RESEARCH CARDS
========================================================= */

.section--research {
	background-color: var(--color-grey-soft);
	padding-bottom: 4.5rem;
	padding-top: 5.5rem;
}

.research--heading {
	max-width: 620px;
}

.research--title {
	font-size: 2.75rem;
	line-height: 1.05;
	margin: 0;
}

.research--introduction {
	margin-left: auto;
}

.research--intro {
	color: var(--color-text);
	font-size: 1.15rem;
	line-height: 1.7;
	margin: 0;
}

.research--card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	height: 100%;
	overflow: hidden;
	transition: var(--transition);
}

.research--card:hover {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-hover);
	transform: translateY(-3px);
}

.research--card>.row {
	height: 100%;
}

.research--image {
	height: 100%;
	min-height: 280px;
	overflow: hidden;
	position: relative;
}

.research--image img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: var(--transition-slow);
	width: 100%;
}

.research--card:hover .research--image img {
	transform: scale(1.025);
}

.research--content {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem;
}

.research--meta {
	color: var(--color-primary-dark);
	display: block;
	font-family: var(--font-family-heading);
	font-size: .975rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	margin-bottom: .55rem;
}

.research--content h3 {
	color: var(--color-brown-dark);
	font-size: 1.65rem;
	line-height: 1.2;
	margin-bottom: .65rem;
}

.research--content>p {
	color: var(--color-text);
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0;
}

.research--footer {
	border-top: 1px solid var(--color-border);
	margin-top: auto;
	padding-top: 1.5rem;
}

.research--link {
	align-items: center;
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-sm);
	color: var(--color-white);
	display: inline-flex;
	font-family: var(--font-family-heading);
	font-size: .95rem;
	font-weight: var(--font-weight-bold);
	gap: .55rem;
	justify-content: center;
	line-height: 1.2;
	padding: .75rem 1rem;
	transition: var(--transition);
}

.research--link:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
}

.research--link i {
	font-size: .85rem;
	transition: var(--transition);
}

.research--link:hover i {
	transform: translateX(4px);
}

.button--research {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	border-radius: var(--radius-sm);
	color: var(--color-white);
}

.button--research:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
}



/* =========================================================
	SHARED — BRANDS
========================================================= */

.section--brands {
	background-color: var(--color-grey-warm-soft);
	padding-bottom: 8rem;
	padding-top: 8rem;
}

.brands--title {
	font-size: 2.45rem;
	line-height: 1.1;
	margin-bottom: .65rem;
}

.brands--intro {
	color: var(--color-text);
	font-size: 1.15rem;
	line-height: 1.75;
	margin: 0 auto;
	max-width: 1080px;
}

.brand--card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: var(--transition);
}

.brand--card:hover {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}

.brand--image {
	align-items: center;
	background-color: var(--color-white);
	display: flex;
	justify-content: center;
	overflow: hidden;
	padding: 1.5rem;
}

.brand--image picture {
	display: block;
	width: 100%;
}

.brand--image img {
	aspect-ratio: 4 / 3;
	display: block;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	transition: var(--transition-slow);
	width: 100%;
}

.brand--card:hover .brand--image img {
	transform: scale(1.025);
}

.brand--content {
	border-top: 1px solid var(--color-border-soft);
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.5rem;
}

.brand--content h3 {
	font-size: 1.35rem;
	line-height: 1.2;
	margin-bottom: .7rem;
}

.brand--content p {
	color: var(--color-text);
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 1.15rem;
}

.brand--link {
	color: var(--color-primary-dark);
	display: inline-flex;
	font-family: var(--font-family-heading);
	font-size: .95rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	margin-top: auto;
	transition: var(--transition);
}

.brand--link:hover {
	color: var(--color-brown-dark);
}



/* =========================================================
	SHARED — PRODUCT HIGHLIGHT
========================================================= */

.section--product-highlight {
	background-color: var(--color-white);
	padding-bottom: 9rem;
	padding-top: 9rem;
}

.product-highlight--panel {
	background-color: var(--color-white);
	/*border: 1px solid var(--color-border);*/
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft-equal);
	overflow: hidden;
	padding: 2.5rem;
}

.product-highlight--image {
	background-color: var(--color-white);
	/*border: 1px solid var(--color-border);*/
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
}

.product-highlight--image picture,
.product-highlight--image img {
	display: block;
	height: 100%;
	width: 100%;
}

.product-highlight--image img {
	aspect-ratio: 6 / 6;
	object-fit: cover;
	object-position: center center;
	transition: var(--transition-slow);
}

.product-highlight--panel:hover .product-highlight--image img {
	transform: scale(1.025);
}

.product-highlight--badge {
	background-color: var(--color-secondary);
	border-radius: var(--radius-sm);
	color: var(--color-white);
	font-family: var(--font-family-heading);
	font-size: .82rem;
	font-weight: var(--font-weight-bold);
	left: 1.25rem;
	line-height: 1;
	padding: .7rem .85rem .65rem;
	position: absolute;
	top: 1.25rem;
}

.product-highlight--content {
	padding-right: .5rem;
}

.product-highlight--category {
	color: var(--color-primary-dark);
	display: block;
	font-family: var(--font-family-heading);
	font-size: .95rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	margin-bottom: .75rem;
}

.product-highlight--title {
	font-size: 2.6rem;
	line-height: 1.08;
	margin-bottom: 1.25rem;
}

.product-highlight--text {
	color: var(--color-text);
	font-size: 1.075rem;
	line-height: 1.8;
	margin-bottom: 1rem;
}

.product-highlight--facts {
	display: grid;
	gap: .75rem;
	margin-bottom: 1.75rem;
	margin-top: 1.5rem;
}

.product-highlight--fact {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1rem 1.15rem;
}

.product-highlight--fact strong {
	color: var(--color-brown-dark);
	display: block;
	font-family: var(--font-family-heading);
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.35;
	margin-bottom: .2rem;
}

.product-highlight--fact span {
	color: var(--color-text);
	display: block;
	font-size: .95rem;
	line-height: 1.55;
}

.product-highlight--actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.product-highlight--actions .button {
	flex: 1 1 180px;
	white-space: nowrap;
}

.product-highlight--actions .button--ghost {
	background-color: var(--color-white);
	border-color: var(--color-primary);
	color: var(--color-brown-dark);
}

.product-highlight--actions .button--ghost:hover,
.product-highlight--actions .button--ghost:focus {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.product-highlight--actions .button--green {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	color: var(--color-white);
}

.product-highlight--actions .button--green:hover,
.product-highlight--actions .button--green:focus {
	background-color: var(--color-secondary-dark);
	border-color: var(--color-secondary-dark);
	color: var(--color-white);
}



/* =========================================================
	FAQ
========================================================= */

.section--faq {
	background-color: var(--color-white);
	padding-bottom: 9rem;
	padding-top: 9rem;
}

.faq--content {
	padding-right: 0;
}

.faq--head {
	max-width: 900px;
}

.faq--title {
	font-size: 2.5rem;
	line-height: 1.1;
	margin-bottom: .75rem;
}

.faq--intro {
	color: var(--color-text);
	font-size: 1.15rem;
	line-height: 1.7;
	margin: 0;
	max-width: 880px;
}

.faq--wrapper {
	border-top: 1px solid var(--color-border);
}

.faq--item {
	border-bottom: 1px solid var(--color-border);
	padding: 1.55rem 0;
	transition: var(--transition);
}

.faq--item:last-child {
	border-bottom: 0;
}

.faq--question {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 1.25rem;
	justify-content: space-between;
}

.faq--question h3 {
	color: var(--color-brown-dark);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -.02rem;
	line-height: 1.2;
	margin: 0;
}

.faq--icon {
	color: var(--color-primary);
	flex: 0 0 auto;
	font-size: 1.25rem;
	transition: var(--transition);
}

.faq--answer {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(-6px);
	transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
}

.faq--answer p {
	color: var(--color-text);
	font-size: 1.04rem;
	line-height: 1.8;
	margin: 0;
	padding: 1rem 3.25rem 0 0;
}

.faq--item.is-open .faq--answer {
	opacity: 1;
	transform: translateY(0);
}

.faq--item.is-open .faq--icon {
	transform: rotate(45deg);
}

.faq--aside {
	margin-top: 3rem;
	padding-left: 0;
	position: relative;
}

.faq--image {
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	position: relative;
}

.faq--image picture,
.faq--image img {
	display: block;
	height: 100%;
	width: 100%;
}

.faq--image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center center;
}

.faq--signature {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	margin-left: auto;
	margin-right: auto;
	margin-top: -2.25rem;
	max-width: 82%;
	padding: 1.25rem 1.35rem 1.35rem;
	position: relative;
	text-align: center;
	z-index: 2;
}

.faq--signature--intro {
	color: var(--color-taupe-deep);
	display: block;
	font-family: var(--font-family-script);
	font-size: 1.55rem;
	line-height: 1.35;
	margin-bottom: .1rem;
}

.faq--signature--name {
	color: var(--color-taupe-deep);
	display: inline-block;
	font-family: var(--font-family-script);
	font-size: 2.75rem;
	font-weight: 400;
	line-height: 1;
	/*transform: rotate(-3deg);*/
	transform-origin: center center;
}



/* =========================================================
	BIG CTA
========================================================= */

.section--advice {
	background: linear-gradient(180deg,
			#4E3C35 0%,
			#6B5B52 100%);
	padding-bottom: 5rem;
	padding-top: 5rem;
}

.section--advice--soft {
	background-color: var(--color-grey-warm);
}

.advice--panel {
	background-color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--radius-xl);
	box-shadow: 0 22px 60px rgba(41, 39, 37, .2);
	overflow: hidden;
	padding: 3.25rem;
}

.advice--content {
	max-width: 780px;
}

.section--advice .section--label {
	color: var(--color-primary-dark);
	margin-bottom: .85rem;
}

.advice--title {
	color: var(--color-brown-dark);
	font-size: clamp(2.15rem, 2.8vw, 3rem);
	font-weight: var(--font-weight-heading);
	letter-spacing: -.025rem;
	line-height: 1.05;
	margin-bottom: 1rem;
}

.advice--text {
	color: var(--color-text);
	font-size: 1.15rem;
	line-height: 1.76;
	margin: 0;
	max-width: 760px;
}

.advice--actions {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	width: 100%;
}

.advice--actions .button {
	align-items: center;
	border-width: 1px;
	display: inline-flex;
	font-size: 1.2rem;
	justify-content: center;
	letter-spacing: -.025rem;
	min-height: 54px;
	padding: .8rem 1.25rem;
	transform: none;
	width: 100%;
}

.advice--actions .button:hover,
.advice--actions .button:focus {
	transform: none;
}

.advice--actions .button--dark {
	background-color: var(--color-brown-dark);
	border-color: var(--color-brown-dark);
	color: var(--color-white);
}

.advice--actions .button--dark:hover,
.advice--actions .button--dark:focus {
	background-color: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

.advice--actions .button:not(.button--dark):not(.button--soft) {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.advice--actions .button:not(.button--dark):not(.button--soft):hover,
.advice--actions .button:not(.button--dark):not(.button--soft):focus {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
}

.advice--actions .button--soft {
	background-color: var(--color-grey-warm-soft);
	border-color: var(--color-border);
	color: var(--color-brown-dark);
}

.advice--actions .button--soft:hover,
.advice--actions .button--soft:focus {
	background-color: var(--color-grey-light);
	border-color: var(--color-grey-light);
	color: var(--color-brown-dark);
}



/* =========================================================
	REVIEWS
========================================================= */

.section--reviews {
	background-color: var(--color-grey-warm-soft);
	overflow: hidden;
	padding-bottom: 4rem;
	padding-top: 4.5rem;
}

.reviews--header {
	max-width: 850px;
}

.section--reviews .section--label {
	color: var(--color-primary-dark);
	margin-bottom: .85rem;
}

.reviews--title {
	font-size: 2.45rem;
	letter-spacing: -.035rem;
	line-height: 1.1;
	margin-bottom: .85rem;
}

.reviews--intro {
	color: var(--color-text);
	font-size: 1.15rem;
	line-height: 1.7;
	margin: 0;
	max-width: 900px;
}

.reviews--controls {
	align-items: center;
	display: flex;
	gap: .65rem;
	justify-content: flex-end;
}

.reviews--control {
	align-items: center;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-brown-dark);
	display: inline-flex;
	font-size: 1rem;
	height: 50px;
	justify-content: center;
	transition: var(--transition);
	width: 50px;
}

.reviews--control:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.reviews--control:disabled {
	cursor: default;
	opacity: .35;
	pointer-events: none;
}

.reviews--slider {
	--reviews-gap: 1.5rem;
	--reviews-visible: 3;
	position: relative;
	width: 100%;
}

.reviews--viewport {
	box-sizing: border-box;
	overflow: hidden;
	padding: 1rem .375rem;
	width: 100%;
}

.reviews--track {
	align-items: stretch;
	display: flex;
	gap: var(--reviews-gap);
	position: relative;
	transition: transform .5s ease;
	width: 100%;
	will-change: transform;
}

.reviews--slide {
	flex: 0 0 calc((100% - (var(--reviews-gap) * (var(--reviews-visible) - 1))) / var(--reviews-visible));
	min-width: 0;
}

.review--card {
	background: linear-gradient(0deg,
			#F6F1ED 0%,
			#FBF8F5 16%,
			var(--color-white) 28%,
			var(--color-white) 100%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft-equal);
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 395px;
	padding: 2rem;
	transition: var(--transition);
}

.review--card:hover {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-soft);
	transform: translateY(-2px);
}

.review--meta {
	align-items: center;
	display: flex;
	gap: .5rem;
	margin-bottom: 1.5rem;
}

.review--number {
	align-items: center;
	background-color: color-mix(in srgb, var(--color-secondary-light) 40%, transparent);
	border: 1px solid var(--color-secondary-light);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	display: inline-flex;
	flex: 0 0 42px;
	font-family: var(--font-family-heading);
	font-size: .975rem;
	font-weight: var(--font-weight-bold);
	height: 42px;
	justify-content: center;
	line-height: 1;
	padding-top: 2px;
	width: 42px;
}

.review--rating {
	align-items: center;
	/*background-color: rgba(216, 163, 26, .08);
	border: 1px solid rgba(216, 163, 26, .22);*/
	border-radius: var(--radius-sm);
	color: #E2AB1E;
	display: inline-flex;
	gap: .1rem;
	height: 42px;
	justify-content: center;
	line-height: 1;
	padding: 0 .5rem;
	white-space: nowrap;
}

.review--rating i {
	font-size: 1.125rem;
	line-height: 1;
}

.review--text {
	color: var(--color-text);
	font-family: var(--font-family-text);
	font-size: 1.05rem;
	font-style: normal;
	line-height: 1.7;
	margin: 0;
	padding-bottom: 1.5rem;
}

.review--footer {
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin-top: auto;
	padding-top: 1.4rem;
}

.review--name {
	color: var(--color-brown-dark);
	font-family: var(--font-family-heading);
	font-size: 1.05rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

.review--subject {
	color: var(--color-brown);
	font-size: .9rem;
	line-height: 1.4;
}



/* =========================================================
	FOOTER
========================================================= */

.section--footer {
	background: linear-gradient(0deg, #4e3c35 0%, #6B5B52 100%);
	color: var(--color-white);
	overflow: hidden;
	padding-bottom: 0;
	padding-top: 1.5rem;
	position: relative;
}

.footer--container {
	max-width: 1650px;
}

.footer--grid {
	display: grid;
	gap: 2.5rem 2rem;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	width: 100%;
}

.footer--column {
	min-width: 0;
}

.footer--top {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-bottom: 4.5rem;
}

.footer--logo {
	display: inline-flex;
	line-height: 0;
	max-width: 370px;
}

.footer--logo img {
	display: block;
	height: auto;
	object-fit: contain;
	object-position: center center;
	width: 100%;
}

.footer--main {
	padding-bottom: 5rem;
}

.footer--title {
	color: var(--color-white);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -.025rem;
	line-height: 1.25;
	margin-bottom: 1.35rem;
}

.footer--list {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer--list li {
	color: rgba(255, 255, 255, .7);
	font-size: 1.05rem;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

.footer--list a {
	color: rgba(255, 255, 255, .7);
	display: inline-flex;
	font-size: 1.05rem;
	line-height: 1.5;
	transition: var(--transition);
	white-space: normal;
}

.footer--list a:hover {
	color: var(--color-white);
}

/* =========================================================
	FOOTER - NETWORK LINKS
========================================================= */

.footer--network-link {
	align-items: center;
	display: inline-flex;
	gap: .5rem;
	line-height: 1.5;
}

.footer--network-link i {
	align-items: center;
	display: inline-flex;
	flex: 0 0 1.1rem;
	font-size: .95em;
	height: 1.5em;
	justify-content: center;
	line-height: 1;
	margin: 0;
	text-align: center;
	width: 1.1rem;
}

.footer--network-link span {
	display: inline-block;
	line-height: 1.5;
	margin: 0;
}


/* =========================================================
	FOOTER - CONTACT / REGISTRATION
========================================================= */

.footer--contact {
	border-top: 1px solid rgba(255, 255, 255, .16);
	padding-bottom: 2rem;
	padding-top: 2rem;
}

.footer--registration {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
}

.footer--registration span {
	color: rgba(255, 255, 255, .68);
	font-size: .925rem;
	line-height: 1.5;
	white-space: nowrap;
}

.footer--registration strong {
	color: var(--color-white);
	font-weight: 700;
	margin-right: .3rem;
}

/* =========================================================
	FOOTER - LEGAL
========================================================= */

.footer--legal {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer--legal li {
	margin: 0;
	padding: 0;
}

.footer--legal a {
	color: rgba(255, 255, 255, .68);
	font-size: .925rem;
	line-height: 1.5;
	transition: var(--transition);
}

.footer--legal a:hover {
	color: var(--color-white);
}

/* =========================================================
	FOOTER - BOTTOM
========================================================= */

.footer--bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-bottom: 1.4rem;
	padding-top: 1.4rem;
	width: 100%;
}

.footer--bottom p {
	color: rgba(255, 255, 255, .7);
	font-size: .85rem;
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

.footer--bottom i {
	color: rgba(255, 255, 255, .88);
	margin-left: .15rem;
	margin-right: .15rem;
}



/* =========================================================
	FOOTER COMMENTS
========================================================= */

.footer--comments {
	border-top: 1px solid rgba(255, 255, 255, .1);
	margin-top: 2.5rem;
	padding-bottom: 1.5rem;
	padding-top: 1.5rem;
}

.footer--comments-text {
	align-items: center;
	color: rgba(255, 255, 255, .7);
	display: flex;
	flex-wrap: wrap;
	font-size: .875rem;
	gap: .5rem 1.5rem;
	justify-content: center;
	line-height: 1.5;
}

.footer--comments-text span {
	align-items: center;
	display: inline-flex;
}

.footer--comments-text span:not(:last-child)::after {
	content: "·";
	margin-left: 1.5rem;
	opacity: .45;
}


/* =========================================================
   FOOTER SOCIALS & COMMENTS - MOBILE
========================================================= */

@media (max-width: 575.98px) {

	.footer--comments {
		margin-top: 2rem;
		padding-bottom: 1.25rem;
		padding-top: 1.25rem;
	}

	.footer--comments-text {
		flex-direction: column;
		gap: .25rem;
	}

	.footer--comments-text span:not(:last-child)::after {
		content: none;
		margin-left: 0;
	}

}



/* END CSS */