/*!
Theme Name: DermaCare
Theme URI: https://dermacaremd.softixs.com/
Author: DermaCare
Author URI: https://dermacaremd.softixs.com/
Description: Custom theme for DermaCare.
Version: 1.1.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dermacare
Tags: custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Design tokens (values taken from the Figma file, 1440px frame)
   ========================================================================== */

:root {
	--c-cream: #fcf8f5;
	--c-light: #fbf6f1;
	--c-mint: #d1e4d9;
	--c-beige: #d5cabf;
	--c-sand: #d6cbc0;
	--c-line: #c7b7aa;
	--c-brown: #674426;
	--c-brown-dark: #57331a;
	--c-brown-warm: #6d3c16;
	--c-muted: #af9d89;
	--c-star: #9d683e;
	--c-white: #fff;
	--c-heading: var(--c-brown);

	--font-body: "Red Hat Display", -apple-system, "Segoe UI", sans-serif;
	--font-ui: var(--font-body);

	--container: 1200px;
	--gutter: 24px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable; /* keeps the page from shifting when the menu locks scrolling */
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--c-cream);
	color: var(--c-brown);
	font: 500 16px/1.7 var(--font-body);
	-webkit-font-smoothing: antialiased;
}

body.nav-open {
	overflow: hidden;
}

.site {
	position: relative;
	overflow-x: clip;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

p {
	margin: 0;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 400;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--c-brown);
	outline-offset: 3px;
}

.icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* 1200px content column (x = 120px on the 1440px Figma frame). */
.container {
	width: min(var(--container), 100% - var(--gutter) * 2);
	margin-inline: auto;
}

/* Shown in place of an image until the file is added to assets/images/. */
.img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 60px;
	padding: 8px;
	background: repeating-linear-gradient(45deg, #ece3db 0 10px, #e4d9cf 10px 20px);
	color: var(--c-muted);
	font: 500 12px/1.3 var(--font-body);
	text-align: center;
	word-break: break-all;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto !important;
	width: auto;
	height: auto;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--c-white);
	color: var(--c-brown);
}

/* ==========================================================================
   3. Typography & UI components
   ========================================================================== */

/* Section heading, 52px (e.g. "Expertise for the details…"). */
.h1 {
	font-family: var(--font-display);
	font-size: 52px;
	line-height: 1.1;
	letter-spacing: 1.04px;
}

/* Panel heading, 42px (e.g. "Care begins with listening."). */
.h2 {
	font-family: var(--font-display);
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: 0.84px;
}

.text {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
	text-align: justify;
}

/* 15px uppercase label with a 50px rule. Line height is the cap height (Figma trims the text box). */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	white-space: nowrap;
}

.eyebrow--line::after {
	content: "";
	width: 50px;
	height: 2px;
	flex-shrink: 0;
	border-radius: 100px;
	background: currentColor;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7.7px;
	padding: 11.5px 23px;
	border: 1px solid transparent;
	font-size: 12px;
	font-weight: 700;
	line-height: 15.4px;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn .icon {
	width: 14.44px;
	height: 14.44px;
	transition: transform 0.2s;
}

.btn:hover .icon {
	transform: translateX(3px);
}

.btn--mint {
	border-color: var(--c-mint);
	background: var(--c-mint);
	color: var(--c-brown);
}

.btn--mint:hover {
	border-color: #bfd8c9;
	background: #bfd8c9;
}

.btn--brown {
	border-color: var(--c-brown);
	background: var(--c-brown);
	color: var(--c-white);
}

.btn--brown:hover {
	background: var(--c-brown-dark);
}

.btn--outline {
	border-color: var(--c-brown);
	color: var(--c-brown);
}

.btn--outline:hover {
	background: var(--c-brown);
	color: var(--c-white);
}

.btn--outline-light {
	border-color: var(--c-light);
	color: var(--c-light);
}

.btn--outline-light:hover {
	background: var(--c-light);
	color: var(--c-brown);
}

.btn--block {
	width: 100%;
}

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.section-head--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	text-align: center;
}

.social {
	display: flex;
	gap: 10px;
}

.social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: background-color 0.2s, color 0.2s;
}

.social .icon {
	width: 16px;
	height: 16px;
}

.social--light {
	color: var(--c-white);
}

.social--light a:hover {
	background: var(--c-white);
	color: var(--c-brown);
}

/* ==========================================================================
   4. Header
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 20;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: var(--c-brown);
	color: var(--c-light);
}

.site-header--overlay {
	position: absolute;
	inset: 0 0 auto;
	background: transparent;
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 24px 40px;
}

.site-header__phone {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 1.44px;
}

.site-header__phone small {
	display: block;
	margin-bottom: 1px;
	font-size: 13px;
	line-height: normal;
	letter-spacing: 0.78px;
}

.site-header__phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.1);
}

.site-header__phone-icon .icon {
	width: 30px;
	height: 30px;
}

.site-header__logo img,
.site-header__logo .img-placeholder {
	width: 294px;
}

.site-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 34px;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 41px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.1);
	color: var(--c-light);
}

.menu-toggle .icon {
	width: 24px;
	height: 24px;
}

/* Light header on pages without a full-screen hero. */
.site-header--light {
	background: #f9f3ec;
	color: var(--c-brown);
}

.site-header--light .site-header__phone-icon,
.site-header--light .menu-toggle {
	background: rgba(103, 68, 38, 0.1);
	color: var(--c-brown);
}

@media (min-width: 1101px) {
	.site-header--light .site-header__logo img {
		width: 300.6px;
	}
}

/* ==========================================================================
   5. Side navigation
   ========================================================================== */

.side-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(60, 35, 15, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 0.35s;
}

.nav-open .side-nav-overlay {
	opacity: 1;
}

.side-nav {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 100;
	display: flex;
	flex-direction: column;
	width: 531px;
	max-width: 100%;
	background: #faf5ef;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.4s ease, visibility 0s 0.4s;
}

.nav-open .side-nav {
	transform: none;
	visibility: visible;
	transition: transform 0.4s ease;
}

.side-nav__panel {
	position: relative;
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 43px 23px 40px 37px;
	isolation: isolate;
}

/* Palm shadow behind the logo, fading out at 313px. */
.side-nav__panel::before,
.side-nav__panel::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	height: 313px;
}

.side-nav__panel::before {
	background: url("assets/images/home/palm-shadow.jpg") no-repeat center / cover;
	opacity: 0.14;
	transform: scaleX(-1);
}

.side-nav__panel::after {
	background: linear-gradient(180deg, rgba(250, 245, 239, 0) 66.8%, #faf5ef 100%);
}

.side-nav__close,
.side-nav__back {
	position: absolute;
	top: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 41px;
	padding: 0;
	border: 0;
	background: rgba(103, 68, 38, 0.08);
	color: var(--c-brown-dark);
}

.side-nav__close {
	right: 23px;
}

.side-nav.is-sub .side-nav__close {
	right: 30px;
}

.side-nav__back {
	left: 30px;
}

.side-nav__back[hidden] {
	display: none;
}

.side-nav__close .icon,
.side-nav__back .icon {
	width: 24px;
	height: 24px;
}

.side-nav__logo {
	display: block;
	width: 217px;
	margin: 0 auto 18px;
}

.side-nav__menu {
	margin-right: 0;
	animation: dermacare-nav-in 0.2s ease;
}

.side-nav__menu li {
	border-bottom: 1px solid rgba(199, 183, 170, 0.45);
}

/* Lower screens sit 7px further left and start with a line, as in Figma. */
.side-nav__menu--sub {
	margin: 19px 7px 0 -7px;
	border-top: 1px solid rgba(199, 183, 170, 0.45);
}

.side-nav__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	color: var(--c-brown-dark);
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 13.4px;
	transition: color 0.2s;
}

.side-nav__menu a:hover,
.side-nav__menu .current-menu-item > a,
.side-nav__menu .current-menu-ancestor > a {
	color: var(--c-star);
}

/* Keep the menu below the WordPress admin bar when logged in. */
.admin-bar .side-nav {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .side-nav {
		top: 46px;
	}
}

.side-nav__arrow {
	width: 14.44px;
	height: 14.44px;
}

@keyframes dermacare-nav-in {
	from {
		opacity: 0;
		transform: translateX(10px);
	}
}

.side-nav__footer {
	padding: 17px 30px;
	background: var(--c-brown-dark) url("assets/images/home/side-nav-bottom-bg.png") no-repeat center / cover;
}

/* ==========================================================================
   6. Hero (Figma: 1440 x 816, content 70px from the left and 71px from the bottom)
   ========================================================================== */

.hero {
	position: relative;
	min-height: max(720px, 100vh);
	min-height: max(720px, 100svh);
	overflow: hidden;
	background: #784f30;
	color: var(--c-light);
}

.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(109, 60, 22, 0.85) 0%, rgba(109, 60, 22, 0.45) 65.434%, rgba(109, 60, 22, 0) 130.87%);
}

.hero__content {
	position: absolute;
	left: 70px;
	bottom: 71px;
	z-index: 2;
	width: 764px;
	max-width: calc(100% - 140px);
}

.hero__mark {
	width: 65.56px;
	height: 81.65px;
	margin-bottom: 39px;
}

.hero__eyebrow {
	font-size: 13px;
	font-weight: 700;
	line-height: 15.4px;
	letter-spacing: 2.89px;
	text-transform: uppercase;
}

.hero__title {
	margin-top: 15px;
	color: var(--c-cream);
	font-family: var(--font-display);
	font-size: 84px;
	line-height: 77.18px;
	text-transform: capitalize;
	white-space: nowrap;
}

.hero__text {
	margin-top: 38px;
	padding-block: 27px;
	border-top: 1px solid rgba(251, 246, 241, 0.4);
	font-size: 18px;
	font-weight: 500;
	line-height: 26.95px;
	letter-spacing: 0.9px;
}

.hero__explore {
	position: absolute;
	right: 70px;
	bottom: 69px;
	z-index: 2;
	width: 95.73px;
	height: 95.73px;
	color: var(--c-light);
}

.hero__explore > svg {
	width: 100%;
	height: 100%;
	animation: dermacare-spin 22s linear infinite;
}

.hero__explore text {
	fill: currentColor;
	font: 500 9.5px var(--font-body);
	letter-spacing: 0.25em;
}

.hero__explore-arrow {
	position: absolute;
	inset: 20.9px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(251, 246, 241, 0.5);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
}

.hero__explore-arrow .icon {
	width: 17.3px;
	height: 17.3px;
}

@keyframes dermacare-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   7. Brand logos & values
   ========================================================================== */

.brands {
	background: #f8f6f2;
}

.brands__list {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-block: 57px;
}

.brands__list li {
	width: 141px;
}

.brands__list img {
	width: 100%;
	height: auto;
}

.values__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-block: 1px solid var(--c-line);
}

.values__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 264px;
	padding: 40px 36px;
	border-right: 1px solid var(--c-line);
	text-align: center;
}

.values__title {
	max-width: 287px;
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.31;
	letter-spacing: 0.48px;
}

.values__text {
	margin-top: 12px;
	line-height: 1.32;
}

/* ==========================================================================
   8. "Care begins with listening" (boxed, mint)
   ========================================================================== */

.experience {
	padding-top: 100px;
}

.experience__box {
	display: grid;
	grid-template-columns: 565px 1fr;
	height: 668px;
	overflow: hidden;
	border: 1px solid var(--c-beige);
	background: var(--c-mint);
}

.experience__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.experience__body {
	align-self: center;
	width: 479px;
	margin-left: 80px;
}

.experience__body .h2 {
	margin-top: 35px;
}

.experience__body .text {
	margin-top: 40px;
}

.experience__body .btn-group {
	margin-top: 40px;
}

/* ==========================================================================
   9. Popular treatments (cards start at the content edge and run off the right side)
   ========================================================================== */

.treatments {
	position: relative;
	padding-block: 120px 121px;
}

.treatments::before,
.skincare::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/images/home/palm-shadow.jpg") no-repeat center / cover;
	opacity: 0.08;
}

.treatments::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, var(--c-cream) 0%, rgba(252, 248, 245, 0) 15.3%);
}

.treatments,
.skincare {
	isolation: isolate;
}

.treatments__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	margin-top: 30px;
}

.treatments__intro {
	max-width: 780px;
	margin-top: 24px;
}

.treatments__track {
	display: flex;
	margin-top: 59px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-left: max(var(--gutter), (100% - var(--container)) / 2);
	scroll-padding-left: max(var(--gutter), (100% - var(--container)) / 2);
}

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

.treatment-card {
	position: relative;
	display: flex;
	flex: 0 0 494.33px;
	flex-direction: column;
	justify-content: space-between;
	height: 567px;
	overflow: hidden;
	padding: 40px 36px;
	scroll-snap-align: start;
	border-block: 1px solid var(--c-line);
	border-right: 1px solid var(--c-line);
	background: var(--c-cream);
}

.treatment-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.08;
	transition: opacity 0.4s;
}

/* Active card: dark fade at the top, mint fade behind the text. */
.treatment-card::before,
.treatment-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	transition: opacity 0.4s;
}

.treatment-card::before {
	top: 0;
	height: 196px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0) 100%);
}

.treatment-card::after {
	bottom: 0;
	height: 264px;
	background: linear-gradient(180deg, rgba(209, 228, 217, 0) 0%, var(--c-mint) 73.3%);
}

.treatment-card__top,
.treatment-card__body {
	position: relative;
	z-index: 1;
}

.treatment-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #765a46;
	font: 400 16px/16px "Helvetica Neue", Helvetica, Arial, sans-serif;
	transition: color 0.4s;
}

.treatment-card__top .icon {
	width: 20px;
	height: 20px;
}

.treatment-card__body {
	width: 403px;
	max-width: 100%;
}

.treatment-card__title {
	color: var(--c-brown-dark);
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: 0.64px;
	white-space: nowrap;
}

.treatment-card__text {
	margin-top: 20px;
	font-weight: 600;
	line-height: 24px;
}

.treatment-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-size: 12px;
	font-weight: 800;
	line-height: 15.4px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.treatment-card__link .icon {
	width: 14.44px;
	height: 14.44px;
}

.treatment-card__link::before {
	content: "";
	position: absolute;
	inset: -600px -40px -40px;
}

.treatment-card.is-active .treatment-card__image,
.treatment-card.is-active::before,
.treatment-card.is-active::after {
	opacity: 1;
}

.treatment-card.is-active .treatment-card__top {
	color: var(--c-white);
}

/* ==========================================================================
   10. "Curated aesthetics" (full width: 706px photo + brown panel)
   ========================================================================== */

.approach {
	display: grid;
	grid-template-columns: 49.03% 1fr;
	min-height: 650px;
}

.approach__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.approach__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 77px;
	background: var(--c-brown);
	color: var(--c-white);
}

.approach__body {
	width: 550px;
	max-width: 100%;
}

.approach__title {
	margin-top: 23px;
	font-family: var(--font-display);
	font-size: 42px;
	line-height: 72px;
}

.approach__body .text {
	margin-top: 20px;
}

.approach__body .text + .text {
	margin-top: 27.2px;
}

.approach__signoff {
	margin-top: 38.5px;
	padding-top: 30.8px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.approach__name {
	font: 400 23.1px/30.8px Georgia, "Times New Roman", serif;
}

.approach__role {
	margin-top: 3.85px;
	color: rgba(255, 255, 255, 0.6);
	font: 700 11.55px/15.4px "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}

/* ==========================================================================
   11. Associations & "Treatments, tailored."
   ========================================================================== */

.associations__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 52px 53px;
}

.associations__list img {
	width: auto;
	max-width: 190px;
	height: auto;
	max-height: 70px;
}

.tailored {
	position: relative;
	aspect-ratio: 1438 / 1296;
	overflow: hidden;
	background: var(--c-beige);
	text-align: center;
}

.tailored__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom center;
}

.tailored::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--c-beige) 19.986%, rgba(213, 202, 191, 0) 43.729%);
}

.tailored__intro {
	position: absolute;
	top: 75.4px;
	left: 50%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateX(-50%);
}

.tailored__mark {
	width: 53.19px;
	height: 66.25px;
	margin-bottom: 41px;
}

.tailored .h1 {
	margin-top: 30px;
}

.tailored .text {
	max-width: 590px;
	margin-top: 30px;
	text-align: center;
}

/* ==========================================================================
   12. Founder (490px photo, 640px text column, 120px apart)
   ========================================================================== */

.founder {
	padding-block: 120px;
}

.founder__grid {
	display: grid;
	grid-template-columns: 490px 640px;
	align-items: end;
	column-gap: 120px;
	width: min(1250px, 100% - var(--gutter) * 2);
	margin-left: max(var(--gutter), (100% - var(--container)) / 2);
}

.founder__photo {
	position: relative;
	isolation: isolate;
}

.founder__ring {
	position: absolute;
	top: 97px;
	left: -115px;
	z-index: -1;
	width: 690px;
	max-width: none;
	transform: rotate(-69.87deg);
	pointer-events: none;
}

.founder__image {
	width: 490px;
	height: 687px;
	object-fit: cover;
	box-shadow: -5px 3px 7px rgba(201, 176, 156, 0.37), -21px 13px 12.5px rgba(201, 176, 156, 0.32), -48px 30px 17px rgba(201, 176, 156, 0.19), -84px 54px 20px rgba(201, 176, 156, 0.06), -132px 84px 22px rgba(201, 176, 156, 0.01);
}

/* Figma bottom-aligns this column 100px above the photo's bottom edge; the signature hangs below its 145px button row. */
.founder__body {
	padding-bottom: 100px;
}

.founder__body .eyebrow {
	margin-bottom: 33px;
	color: var(--c-brown-warm);
}

.founder__title {
	font-family: var(--font-display);
	font-size: 52px;
	line-height: 52px;
	white-space: nowrap;
}

.founder__text {
	margin-top: 8px;
	line-height: 28px;
	text-align: justify;
}

.founder__list {
	display: grid;
	grid-template-columns: 320px 320px;
	row-gap: 19px;
	height: 102px;
	margin-top: 23px;
	font-weight: 600;
	line-height: 24px;
}

.founder__list li {
	display: flex;
	align-items: center;
	gap: 4px;
}

.founder__list .icon {
	width: 15px;
	height: 15px;
}

.founder__body > .btn {
	margin-top: 45.3px;
}

.founder__signature {
	margin: 10px 0 -67.7px;
	padding: 24px 12px 0;
}

.founder__signature img,
.founder__signature .img-placeholder {
	width: 297px;
	margin-block: 17.6px;
}

.founder__signature p {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

/* ==========================================================================
   13. Membership (1200 x 688 card)
   ========================================================================== */

.membership {
	padding-bottom: 120px;
}

.membership__box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 60px;
	min-height: 688px;
	padding: 70px;
	border: 1px solid var(--c-beige);
	background: #f1eae2 url("assets/images/home/membership-bg.jpg") no-repeat center / cover;
	box-shadow: 0 15px 32px rgba(201, 176, 156, 0.1), 0 59px 59px rgba(201, 176, 156, 0.09), 0 133px 80px rgba(201, 176, 156, 0.05), 0 236px 95px rgba(201, 176, 156, 0.01);
}

.membership__body .h2 {
	margin-top: 35px;
}

.membership__body .text {
	margin-top: 24px;
}

.membership__body .btn {
	margin-top: 40px;
}

.vip-card {
	width: 100%;
	max-width: 496px;
	margin-left: auto;
	padding: 36px 40px 40px;
	border-radius: 24px;
	background: rgba(239, 235, 226, 0.9);
	box-shadow: 0 20px 50px rgba(103, 68, 38, 0.12);
	text-align: center;
}

.vip-card__logo {
	width: min(320px, 100%);
	margin: 0 auto 36px;
}

.vip-card__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-family: var(--font-serif);
	font-size: 28px;
	text-transform: uppercase;
}

.vip-card__label::before,
.vip-card__label::after {
	content: "";
	width: 36px;
	height: 1px;
	background: currentColor;
}

/* ==========================================================================
   14. Testimonials
   ========================================================================== */

.testimonials {
	padding-block: 100px 128px;
	background: linear-gradient(180deg, var(--c-mint) 0%, rgba(209, 228, 217, 0) 100%);
}

.testimonials .section-head {
	margin-bottom: 60px;
}

.slider {
	border: 1px solid var(--c-beige);
	background: var(--c-white);
}

.slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(100% / 3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

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

.review {
	display: flex;
	flex-direction: column;
	height: 399px;
	margin: 0;
	padding: 51.5px 40px;
	scroll-snap-align: start;
	border-right: 1px solid var(--c-beige);
}

.review__stars {
	display: flex;
	color: var(--c-star);
}

.review__stars .icon {
	width: 24px;
	height: 24px;
}

.review__quote {
	min-height: 165px;
	margin: 24px 0 32px;
	font-size: 22px;
	font-weight: 600;
	line-height: 33px;
}

.review__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.review__name {
	display: block;
	margin-bottom: 4px;
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: 0.4px;
}

.review__date {
	display: block;
	color: var(--c-brown-dark);
	font-weight: 400;
	line-height: 26px;
}

.review__source {
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	font-size: 0;
}

.slider__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 400px;
	max-width: 100%;
	height: 79px;
	margin-inline: auto;
	padding-inline: 0;
}

.slider {
	position: relative;
}

.slider__nav::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 79px;
	border-top: 1px solid var(--c-beige);
}

.slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 41px;
	padding: 0;
	border: 1px solid var(--c-beige);
	background: var(--c-white);
	color: var(--c-brown-dark);
}

.slider__btn--dark {
	border-color: var(--c-brown-dark);
	background: var(--c-brown-dark);
	color: var(--c-white);
}

.slider__btn .icon {
	width: 24px;
	height: 24px;
}

.slider__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.slider__dots {
	display: flex;
	gap: 14px;
}

.slider__dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	background: rgba(87, 51, 26, 0.1);
}

.slider__dots button[aria-current="true"] {
	background: var(--c-brown-dark);
}

.google-rating {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 140px;
	margin-top: 34px;
	padding: 29px 35px;
	border: 1px solid var(--c-beige);
	background: linear-gradient(rgba(252, 248, 245, 0.7), rgba(252, 248, 245, 0.7)), url("assets/images/home/texture.jpg") no-repeat center / cover;
	font-family: "Inter", var(--font-body);
}

.google-rating__title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #1a1a1a;
	font-size: 24px;
	font-weight: 500;
	line-height: 30px;
}

.google-rating__logo {
	width: 122px;
	height: 40px;
	min-height: 0;
}

.google-rating__score {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	color: #000;
	font-size: 16px;
	font-weight: 500;
	line-height: 15px;
}

.google-rating__score strong {
	color: #1a1a1a;
	font-weight: 600;
	line-height: 20px;
}

.google-rating__stars {
	width: 136px;
	height: 24px;
}

/* ==========================================================================
   15. Social grid (4 x 285px columns, 301px rows, 20px gaps)
   ========================================================================== */

.insta__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 301px;
	grid-auto-flow: dense;
	gap: 20px;
}

.insta__item {
	display: block;
	overflow: hidden;
	border: 1px solid var(--c-beige);
	background: var(--c-sand);
}

.insta__item > * {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.insta__item:hover > img {
	transform: scale(1.04);
}

.insta__feature {
	grid-column: 2 / span 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 27.6px;
	padding: 47px 20px 0;
	border: 1px solid var(--c-beige);
	background: linear-gradient(rgba(252, 248, 245, 0.7), rgba(252, 248, 245, 0.7)), url("assets/images/home/texture.jpg") no-repeat center / cover;
	text-align: center;
}

.insta__title {
	max-width: 382.5px;
	font-family: var(--font-display);
	font-size: 38.92px;
	line-height: 1.1;
	letter-spacing: 0.78px;
}

.insta__handle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	background: var(--c-sand);
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.insta__handle .icon {
	width: 16px;
	height: 17.33px;
}

/* ==========================================================================
   16. Skincare products
   ========================================================================== */

.skincare {
	position: relative;
	padding-block: 120px 113px;
}

.skincare::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, var(--c-cream) 1.8%, rgba(252, 248, 245, 0) 10.16%), linear-gradient(180deg, var(--c-cream) 0%, rgba(252, 248, 245, 0) 15.3%);
}

.skincare__head .h1 {
	margin-top: 30px;
}

.skincare__intro {
	max-width: 519px;
	margin-top: 24px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-align: justify;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 60px;
}

.product__image {
	width: 100%;
	aspect-ratio: 387 / 481;
	object-fit: cover;
	border: 1px solid var(--c-beige);
	background: var(--c-sand);
}

.product__tag {
	margin-top: 20px;
	color: var(--c-muted);
	font-size: 15px;
	font-weight: 500;
	line-height: 11px;
	letter-spacing: 2.1px;
	text-transform: uppercase;
}

.product__title {
	margin-top: 8px;
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: 0.56px;
}

.product__text {
	margin-top: 4px;
	overflow: hidden;
	font-weight: 400;
	line-height: 24px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product .btn {
	margin-top: 16px;
}

/* ==========================================================================
   17. Visit us (652px mint panel, map running off to the right)
   ========================================================================== */

.visit__inner {
	position: relative;
	min-height: 736px;
}

.visit__map {
	position: absolute;
	top: 14px;
	left: 434px;
	display: block;
	width: 886px;
	height: 707px;
}

.visit__map-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

.visit__pin {
	position: absolute;
	top: 259px;
	left: 365px;
	width: 77.76px;
	height: 77.76px;
}

.visit__pin-icon {
	position: relative;
	z-index: 1;
	width: 100%;
}

.visit__pin-mark {
	position: absolute;
	top: 21px;
	left: 50%;
	z-index: 2;
	width: 19.21px;
	transform: translateX(-50%);
}

.visit__pin-shadow {
	position: absolute;
	top: 54px;
	left: 20px;
	width: 37px;
	max-width: none;
}

.visit__panel {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 652px;
	min-height: 736px;
	padding: 40px 57.5px;
	border: 1px solid var(--c-beige);
	background: var(--c-mint);
}

.visit__body {
	width: 537px;
	max-width: 100%;
	color: var(--c-brown-warm);
}

.visit__body .h2 {
	margin-top: 35px;
}

.visit__text {
	margin-top: 35px;
	color: var(--c-brown);
	line-height: 28px;
	text-align: justify;
}

.visit__phone {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: 46px;
	color: var(--c-brown);
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.4px;
}

.visit__phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 1px solid var(--c-brown-warm);
	color: var(--c-brown-warm);
}

.visit__phone-icon .icon {
	width: 32px;
	height: 32px;
}

.visit__note {
	margin-top: 24px;
	color: var(--c-brown);
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.4px;
}

.visit .btn-group {
	gap: 19px;
	margin-top: 54px;
}

.visit .btn {
	height: 50px;
}

/* ==========================================================================
   18. Contact ("Feel more confident in your skin.")
   ========================================================================== */

.contact {
	padding-block: 120px 103px;
}

.contact__box {
	position: relative;
	display: grid;
	grid-template-columns: 478px 517px;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	min-height: 668px;
	overflow: hidden;
	padding: 40px 70px;
	border: 1px solid var(--c-beige);
	background: var(--c-mint);
}

.contact__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contact__body,
.contact-form {
	position: relative;
}

.contact__body .text {
	margin-top: 24px;
}

.contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 40px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.contact-form__hp {
	position: absolute;
	left: -9999px;
}

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

.field--full,
.form-status {
	grid-column: 1 / -1;
}

.field input,
.field select {
	width: 100%;
	height: 46px;
	padding: 4px 14px;
	border: 1px solid #e7e7e7;
	border-radius: 0;
	background: var(--c-white);
	color: var(--c-brown);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	appearance: none;
}

.field select {
	padding-right: 40px;
}

.field input::placeholder {
	color: var(--c-brown);
	opacity: 1;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--c-brown);
}

.field--select .icon {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	pointer-events: none;
}

.field--message {
	padding: 12px 14px 0;
	border: 1px solid #e7e7e7;
	background: var(--c-white);
}

.field__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	line-height: normal;
}

.field--message textarea {
	display: block;
	width: 100%;
	height: 74px;
	padding: 6px 0 0;
	border: 0;
	background: none;
	color: var(--c-brown);
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	resize: none;
}

.field textarea::placeholder {
	color: #b0b0b0;
	opacity: 1;
}

.contact-form .btn--block {
	margin-top: 8px;
}

.form-status {
	padding: 12px 14px;
	background: var(--c-white);
	font-size: 14px;
}

.form-status--sent {
	border-left: 3px solid #5c8f6f;
}

.form-status--error,
.form-status--invalid {
	border-left: 3px solid #b0413e;
}

/* ==========================================================================
   18b. Gallery page (Template: Gallery)
   ========================================================================== */

.transformations {
	padding-block: 120px 145px;
}

.transformations__head {
	text-align: center;
}

.transformations__text {
	margin-top: 24px;
	line-height: 1.7;
}

.compare {
	margin-top: 23px;
}

/* 1200 x 454 beige box; the photos sit centred at 906px wide. */
.compare__box {
	position: relative;
	aspect-ratio: 1200 / 454.4;
	overflow: hidden;
	border-radius: 16px;
	background: #f5efe6;
}

.compare__slide {
	--pos: 50%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 75.5%;
	margin: 0;
	transform: translateX(-50%);
}

.compare__before,
.compare__after {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.compare__before {
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.compare__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 5.3px;
	background: var(--c-white);
	transform: translateX(-50%);
	pointer-events: none;
}

.compare__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 75px;
	height: 75px;
	border-radius: 50%;
	background: var(--c-white);
	color: #1a1a1a;
	transform: translate(-50%, -50%);
}

.compare__handle .icon {
	width: 14px;
	height: 14px;
}

.compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
}

.compare__slide:has(.compare__range:focus-visible) .compare__handle {
	outline: 2px solid var(--c-brown);
	outline-offset: 3px;
}

.compare__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 400px;
	max-width: 100%;
	margin: 8.4px auto 0;
}

.results__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 20px;
}

.results__item {
	height: 193px;
	overflow: hidden;
}

.results__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.results__more {
	display: flex;
	width: fit-content;
	margin: 40px auto 0;
}

.page-template-gallery .contact {
	padding-bottom: 120px;
}

/* ==========================================================================
   18c. Legal pages (Template: Legal page)
   ========================================================================== */

/* 600px tall from y = 88 on the Figma frame, so it starts just under the header's bottom edge. */
.legal-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 600px;
	margin-top: -10.42px;
	overflow: hidden;
	background: #f1eae2;
	isolation: isolate;
}

.legal-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/images/home/palm-shadow.jpg") no-repeat center / cover;
	opacity: 0.18;
	transform: scaleX(-1);
}

.legal-banner__content {
	width: 764px;
	max-width: calc(100% - 140px);
	margin-left: 70px;
}

.legal-banner__mark {
	width: 65.56px;
	height: 81.65px;
	margin-bottom: 39px;
}

.legal-banner__eyebrow {
	font-size: 13px;
	font-weight: 700;
	line-height: 15.4px;
	letter-spacing: 2.89px;
	text-transform: uppercase;
}

.legal-banner__title {
	margin-top: 15px;
	font-family: var(--font-display);
	font-size: 84px;
	line-height: 77.18px;
	text-transform: capitalize;
}

.legal-banner__text {
	margin-top: 38px;
	padding-block: 27px;
	border-top: 1px solid #a79486;
	font-size: 18px;
	line-height: 26.95px;
	letter-spacing: 0.9px;
}

.legal-banner__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 25px;
	border-top: 1px solid rgba(211, 196, 186, 0.4);
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.55px;
}

.legal-banner__meta .icon {
	width: 10.67px;
	height: 13.33px;
}

/* 341px contents box, 48px gap, 811px text column. */
.legal {
	display: grid;
	grid-template-columns: 341.33px minmax(0, 811px);
	align-items: start;
	justify-content: space-between;
	padding-block: 120px;
}

.legal__toc {
	position: sticky;
	top: 24px;
	padding: 32px;
	border: 1px solid var(--c-line);
	background: var(--c-white);
}

.legal__toc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(211, 196, 186, 0.3);
}

.legal__toc-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 1.1px;
}

.legal__toc-count {
	color: #81756d;
	font-size: 12px;
	font-weight: 400;
	line-height: 15px;
	white-space: nowrap;
}

.legal__toc-list {
	display: grid;
	gap: 12px;
	margin: 16px -4px 0 0;
	padding: 0 0 16px;
	list-style: none;
}

.legal__toc-list a {
	display: flex;
	gap: 12px;
	color: var(--c-brown-warm);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0.26px;
}

/* Looks medium-weight without changing the text width, so rows never re-wrap when the highlight moves. */
.legal__toc-list a.is-active {
	color: var(--c-brown);
	-webkit-text-stroke: 0.25px currentColor;
}

.legal__toc-list a:hover {
	color: var(--c-brown);
}

.legal__toc-number {
	flex-shrink: 0;
	color: #81756d;
	font-family: "Manrope", var(--font-body);
	font-size: 11px;
}

.legal__section {
	scroll-margin-top: 24px;
}

.legal__section + .legal__section {
	margin-top: 60px;
}

.legal__content {
	margin-top: 16px;
	line-height: 27px;
	text-align: justify;
}

.legal__content > * + * {
	margin-top: 16px;
}

.legal__content > h3 {
	margin-top: 27px;
	font-family: var(--font-display);
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: 0.72px;
	text-align: left;
}

/* Tighter 12px spacing inside a subheading's block. */
.legal__content > h3 ~ * {
	margin-top: 12px;
}

.legal__content ul,
.legal__content ol {
	margin-bottom: 0;
	padding-left: 24px;
}

.legal__content ul {
	list-style: disc;
}

.legal__content ol {
	list-style: decimal;
}

.legal__content a {
	text-decoration: underline;
}

/* ==========================================================================
   18d. VIP Membership page (Template: VIP Membership)
   ========================================================================== */

/* Figma keeps "of" lowercase here and anchors the photo to the bottom. */
.page-template-membership .hero__title {
	text-transform: none;
}

.page-template-membership .hero__image {
	object-position: center bottom;
}

.page-template-membership .contact {
	padding-bottom: 120px;
}

.vip-intro {
	padding-top: 120px;
}

/* 659px text column, 42px gap, 496px card. */
.vip-intro__inner {
	display: flex;
	align-items: center;
	gap: 42px;
	padding-left: 1px;
}

.vip-intro__body {
	flex: 0 0 659px;
	max-width: 659px;
}

.vip-intro__mark {
	width: 53.19px;
	height: 66.25px;
	margin-bottom: 33px;
}

.vip-intro__body .eyebrow {
	color: var(--c-brown-warm);
}

.vip-intro__body .h1 {
	margin-top: 15px;
}

.vip-intro__body .text {
	margin-top: 20px;
}

.vip-intro__body .btn {
	margin-top: 20px;
}

.member-card {
	display: flex;
	flex: 0 0 496.48px;
	flex-direction: column;
	align-items: center;
	height: 321.25px;
	padding-top: 38px;
	overflow: hidden;
	border-radius: 31.15px;
	background: #efebe2;
	box-shadow: 0 3px 27.8px 6px rgba(0, 0, 0, 0.04);
}

.member-card__logo {
	width: 314.75px;
}

.member-card__label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 63px;
	font-family: var(--font-display);
	font-size: 25.96px;
	font-weight: 300;
	line-height: 27.26px;
	text-transform: uppercase;
	white-space: nowrap;
}

.member-card__label img {
	width: 35px;
}

.member-card__flourish-right {
	transform: scaleX(-1);
}

.plans {
	padding-top: 135px;
}

.plans__inner {
	width: min(1206px, 100% - var(--gutter) * 2);
	margin-inline: auto;
}

.plans__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 387px));
	justify-content: center;
	gap: 20px;
}

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 40px 36px;
	border: 1px solid var(--c-line);
	background: var(--c-cream);
}

.plan--featured {
	isolation: isolate;
	box-shadow: 0 10px 22.7px 3px rgba(103, 68, 38, 0.15);
}

.plan--featured::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/images/home/texture.jpg") no-repeat 61.6% 0 / 300.31% 100%;
	opacity: 0.3;
}

.plan__badge {
	position: absolute;
	top: -16.11px;
	left: 50%;
	padding: 8px 12px;
	background: #593f2b;
	color: #fff8f5;
	font-size: 12px;
	font-weight: 400;
	line-height: 13.5px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateX(-50%);
}

.plan__name {
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1.31;
	letter-spacing: 0.64px;
}

.plan__price {
	margin-top: 8px;
	font-size: 36px;
	font-weight: 400;
	line-height: 44px;
}

.plan__price span {
	color: #81756d;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
}

.plan__summary {
	margin-top: 12px;
	font-size: 14px;
	line-height: normal;
}

.plan__credit {
	margin-top: 16px;
	font-weight: 700;
	line-height: normal;
}

.plan__benefits-title {
	margin-top: 40px;
	color: #402917;
	font-size: 14px;
	font-weight: 600;
	line-height: 15px;
	letter-spacing: 1px;
}

.plan__benefits {
	display: grid;
	gap: 12px;
	margin-top: 16px;
	margin-bottom: 40px;
	font-weight: 400;
	line-height: 24px;
}

.plan__benefits li {
	display: flex;
	gap: 8px;
}

.plan__benefits li::before {
	content: "\2022";
	flex-shrink: 0;
	color: #402917;
	font: 700 12px/16px "Manrope", var(--font-body);
}

.plan .btn {
	width: 100%;
	margin-top: auto;
}

.plans__note {
	margin-top: 29px;
	line-height: 1.7;
	text-align: center;
}

/* ==========================================================================
   18e. About Us page (Template: About Us)
   ========================================================================== */

/* Figma lets this hero's text run wider than the other pages (1042px). */
@media (min-width: 701px) {
	.page-template-about .hero__content {
		width: 1042px;
	}
}

.page-template-about .hero__image {
	object-position: center;
}

.about-title {
	font-family: var(--font-display);
	font-size: 52px;
	line-height: 52px;
}

/* 1200 x 441 mint card, 565px photo on the right. */
.about-founder {
	padding-top: 120px;
}

.about-founder__box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 565px;
	min-height: 441px;
	overflow: hidden;
	border: 1px solid var(--c-beige);
	background: var(--c-mint);
}

.about-founder__body {
	max-width: 552px;
	padding: 78.5px 0 40px 73px;
}

.about-founder__body .text {
	margin-top: 22px;
}

.about-founder__body .btn {
	margin-top: 15.6px;
	color: var(--c-mint);
}

.about-founder__image {
	width: 100%;
	height: 439px;
	object-fit: cover;
}

.experts {
	padding-top: 120px;
}

.experts__list {
	display: grid;
	gap: 40px;
	margin-top: 40px;
}

/* 391px photo, 25px gap, 784px text. */
.expert {
	display: grid;
	grid-template-columns: 391px 784px;
	align-items: center;
	column-gap: 25px;
}

.expert__image {
	width: 100%;
	height: 533px;
	object-fit: cover;
}

.expert__name {
	margin-top: 19px;
	font-family: var(--font-display);
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: 0.72px;
}

.expert__bio {
	margin-top: 19px;
}

.expert__bio .text + .text {
	margin-top: 11px;
}

.expert__fact {
	font-style: italic;
}

.expert__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 68px;
	margin-top: 32px;
	line-height: normal;
	letter-spacing: 0.32px;
}

.expert__contact a {
	display: flex;
	align-items: center;
	gap: 16px;
}

.expert__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-brown-warm);
}

.expert__icon img {
	width: 24px;
	height: 24px;
}

.expertise {
	padding-top: 120px;
}

.expertise__grid {
	display: grid;
	grid-template-columns: repeat(4, 278px);
	justify-content: space-between;
	row-gap: 29px;
	margin-top: 40px;
}

.exp-card {
	display: flex;
	flex-direction: column;
	transition: filter 0.25s;
}

.exp-card__image {
	width: 100%;
	height: 215px;
	object-fit: cover;
}

.exp-card__body {
	position: relative;
	display: block;
	flex: 1;
	overflow: hidden;
	padding: 12px;
	border: 1px solid #efe8e2;
	border-top: 0;
	background: var(--c-white);
	isolation: isolate;
}

/* Hover state from Figma's second card: soft shadow and a faint palm. */
.exp-card__body::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(250, 245, 239, 0) 66.8%, #faf5ef 100%), url("assets/images/home/palm-shadow.jpg") no-repeat center / cover;
	opacity: 0;
	transition: opacity 0.25s;
}

.exp-card:hover,
.exp-card:focus-visible {
	filter: drop-shadow(0 10px 11px rgba(103, 68, 38, 0.15));
}

.exp-card:hover .exp-card__body::before,
.exp-card:focus-visible .exp-card__body::before {
	opacity: 0.18;
}

.exp-card__title {
	display: block;
	color: var(--c-brown-dark);
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.32px;
	text-transform: capitalize;
}

.exp-card__text {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
}

.exp-card__link {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-size: 12px;
	font-weight: 800;
	line-height: 15.4px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.exp-card__link .icon {
	width: 14.44px;
	height: 14.44px;
}

.about-results {
	padding-block: 120px;
}

.about-results__text {
	margin-top: 13px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 1.6px;
}

.about-results .results__grid {
	margin-top: 34px;
}

.about-results .btn {
	margin-top: 34px;
}

/* ==========================================================================
   18f. Services page (Template: Services)
   ========================================================================== */

.page-template-services .contact {
	padding-bottom: 120px;
}

.services {
	padding-top: 120px;
}

/* 304px filters, 28px gap, three 278px cards. */
.services__layout {
	display: grid;
	grid-template-columns: 304px minmax(0, 1fr);
	align-items: start;
	column-gap: 28px;
}

.filters {
	display: grid;
	gap: 12px;
}

.filters__title {
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.31;
	letter-spacing: 0.48px;
}

.filters__rule {
	height: 1px;
	background: rgba(17, 34, 17, 0.25);
}

.filters__rule--first {
	background: rgba(199, 183, 170, 0.25);
}

.filters__group summary,
.filters__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 1.31;
	letter-spacing: 0.36px;
}

.filters__group summary {
	list-style: none;
	cursor: pointer;
}

.filters__group summary::-webkit-details-marker {
	display: none;
}

.filters__group summary img {
	width: 15px;
	height: 15px;
	transition: transform 0.2s;
}

.filters__group[open] summary img {
	transform: rotate(180deg);
}

.filters__options {
	display: grid;
	gap: 8.83px;
	margin-top: 17.66px;
}

.filters__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8.83px;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
}

.filters__option input {
	position: absolute;
	width: 26.49px;
	height: 26.49px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.filters__box {
	position: relative;
	flex: 0 0 26.49px;
	height: 26.49px;
	background: url("assets/images/services/checkbox.svg") no-repeat center / contain;
}

.filters__option input:checked + .filters__box {
	background-image: url("assets/images/services/checkbox-on.svg");
}

.filters__option input:checked + .filters__box::after {
	content: "";
	position: absolute;
	inset: 15.1% 16.96% 20.74% 18.87%;
	background: url("assets/images/services/check.svg") no-repeat center / contain;
}

.filters__option input:focus-visible + .filters__box {
	outline: 2px solid var(--c-brown);
	outline-offset: 2px;
}

.services__results {
	transition: opacity 0.2s;
}

.services__results.is-loading {
	opacity: 0.5;
}

.services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 278px));
	justify-content: space-between;
	gap: 29px 17px;
	margin-top: 11px;
}

.services__empty {
	margin-top: 11px;
}

.exp-card__image--empty {
	display: block;
	flex: 0 0 215px;
	background: var(--c-sand);
}

.services__pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 400px;
	max-width: 100%;
	margin-top: 44px;
}

.services__pager .slider__btn[aria-disabled="true"] {
	opacity: 0.4;
	pointer-events: none;
}

.services__pager .slider__dots a {
	display: block;
	width: 10px;
	height: 10px;
	background: rgba(87, 51, 26, 0.1);
}

.services__pager .slider__dots a[aria-current="page"] {
	background: var(--c-brown-dark);
}

/* ==========================================================================
   18g. Service detail page (single-service.php)
   ========================================================================== */

.single-service .contact {
	padding-bottom: 120px;
}

/* 913px cream panel + 527px photo, 719px tall. */
.svc-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 36.6%;
	min-height: 719px;
	background: #f1eae2;
	isolation: isolate;
}

.svc-hero::before {
	content: "";
	position: absolute;
	inset: 0 36.6% 0 0;
	z-index: -1;
	background: url("assets/images/home/palm-shadow.jpg") no-repeat center / cover;
	opacity: 0.18;
}

.svc-hero__body {
	align-self: center;
	width: 785px;
	max-width: calc(100% - 110px);
	margin-left: 70px;
	padding-block: 40px;
}

.svc-hero__title {
	font-family: var(--font-display);
	font-size: 64px;
	line-height: 1.1;
	letter-spacing: 1.28px;
	text-transform: capitalize;
}

.svc-hero__text {
	margin-top: 8px;
}

.svc-hero__text .text + .text {
	margin-top: 9px;
}

.svc-hero .btn {
	margin-top: 20px;
}

.svc-hero__media,
.svc-cost__media,
.svc-how__media {
	position: relative;
	overflow: hidden;
}

.svc-hero__media img,
.svc-cost__media img,
.svc-how__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.svc-facts {
	margin: 20px 0 0;
}

.svc-facts div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 9px 20px;
	border: 1px solid var(--c-beige);
	background: #f9f3ec;
	line-height: 22px;
}

.svc-facts dt {
	flex-shrink: 0;
	font-weight: 900;
}

.svc-facts dd {
	margin: 0;
	text-align: right;
}

.svc-concerns {
	padding-top: 120px;
}

.svc-concerns__head {
	text-align: center;
}

.svc-concerns__intro {
	margin-top: 24px;
	line-height: 1.7;
}

/* 387px cards from x = 117 on the 1440px frame. */
.svc-concerns__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 387px));
	gap: 20px;
	width: min(1206px, 100% - var(--gutter) * 2);
	margin: 35px auto 0;
}

.svc-concern {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 374px;
	padding: 40px 36px;
	border: 1px solid var(--c-line);
	background: var(--c-cream);
	isolation: isolate;
	transition: box-shadow 0.25s;
}

.svc-concern::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/images/home/texture.jpg") no-repeat 61.6% 0 / 300.31% 100%;
	opacity: 0;
	transition: opacity 0.25s;
}

/* Figma shows the middle card highlighted; the highlight follows the mouse. */
.svc-concern:nth-child(2),
.svc-concern:hover {
	box-shadow: 0 10px 22.7px 3px rgba(103, 68, 38, 0.15);
}

.svc-concern:nth-child(2)::before,
.svc-concern:hover::before {
	opacity: 0.3;
}

.svc-concerns__grid:hover .svc-concern:nth-child(2):not(:hover) {
	box-shadow: none;
}

.svc-concerns__grid:hover .svc-concern:nth-child(2):not(:hover)::before {
	opacity: 0;
}

.svc-concern__title {
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1.31;
	letter-spacing: 0.64px;
}

.svc-concern__text {
	margin-top: 12px;
	line-height: normal;
}

.svc-concern__note {
	margin-top: auto;
	padding-top: 17px;
	border-top: 1px solid rgba(227, 215, 200, 0.4);
	color: #7a6e65;
	font-size: 12px;
	font-style: italic;
	font-weight: 400;
	line-height: 16px;
}

.svc-cost {
	padding-top: 120px;
}

/* 1200 x 668 mint box, 565px photo on the right. */
.svc-cost__box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 565px;
	min-height: 668px;
	overflow: hidden;
	border: 1px solid var(--c-beige);
	background: var(--c-mint);
}

.svc-cost__body {
	align-self: center;
	width: 479px;
	max-width: calc(100% - 92px);
	margin-left: 45px;
	padding-block: 40px;
}

.svc-cost__title {
	font-family: var(--font-display);
	font-size: 42px;
	line-height: 1.24;
	letter-spacing: 0.84px;
}

.svc-cost__body .text {
	margin-top: 8px;
}

.svc-cost__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 11px;
}

.svc-cost__pills li {
	display: flex;
	align-items: center;
	height: 30px;
	padding: 0 13px;
	border: 1px solid rgba(227, 215, 200, 0.7);
	border-radius: 9999px;
	background: var(--c-beige);
	color: #6e4e32;
	font-size: 12px;
	line-height: 16px;
	white-space: nowrap;
}

.svc-cost__pills li::before {
	content: "\2713\00a0";
}

.svc-cost .btn,
.svc-glance .btn {
	height: 50px;
}

.svc-cost .btn {
	margin-top: 40px;
}

.svc-glance {
	padding-top: 120px;
}

.svc-glance__inner {
	padding-left: 2px;
}

.svc-glance .eyebrow {
	margin-bottom: 33px;
	color: var(--c-brown-warm);
}

.svc-glance__table {
	margin: 31px 0;
	padding: 7px 0 1px;
	border-block: 1px solid rgba(227, 215, 200, 0.7);
	font-family: "Plus Jakarta Sans", var(--font-body);
}

.svc-glance__table div {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding-block: 14px;
}

.svc-glance__table div + div {
	border-top: 1px solid rgba(227, 215, 200, 0.7);
}

.svc-glance__table dt {
	flex-shrink: 0;
	min-width: 120px;
	color: #241f1c;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.svc-glance__table dd {
	margin: 0;
	color: #382e28;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: right;
}

/* Full width: 624px photo + 816px brown panel, 650px tall. */
.svc-how {
	display: grid;
	grid-template-columns: 43.33% minmax(0, 1fr);
	min-height: 650px;
	margin-top: 120px;
}

.svc-how__panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	background: #694729;
	color: var(--c-white);
	isolation: isolate;
}

.svc-how__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/images/home/palm-shadow.jpg") no-repeat center / cover;
	opacity: 0.04;
}

.svc-how__body {
	width: 626px;
	max-width: 100%;
}

.svc-how__title {
	font-family: var(--font-display);
	font-size: 42px;
	line-height: 58px;
}

.svc-how__body .text {
	margin-top: 8px;
}

.svc-how__title + .text {
	margin-top: 12px;
}

.svc-how .btn {
	margin-top: 24px;
}

.svc-faqs {
	padding-top: 120px;
}

.svc-faqs__inner {
	width: min(800px, 100% - var(--gutter) * 2);
	margin-inline: auto;
	text-align: center;
}

.svc-faqs__list {
	display: grid;
	gap: 16px;
	margin-top: 38px;
	text-align: left;
}

.svc-faq {
	padding: 20px;
	border: 1px solid rgba(227, 215, 200, 0.7);
	background: rgba(255, 255, 255, 0.7);
}

.svc-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 46px;
}

summary.svc-faq__question {
	list-style: none;
	cursor: pointer;
}

summary.svc-faq__question::-webkit-details-marker {
	display: none;
}

.svc-faq__icon {
	position: relative;
	flex: 0 0 32px;
	height: 32px;
	border: 1px solid #e3d7c8;
	border-radius: 50%;
}

/* A plus drawn with two lines; the vertical one turns flat to make the minus. */
.svc-faq__icon::before,
.svc-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.2px;
	background: #7a6e65;
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease;
}

.svc-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

details[open]:not(.is-closing) > .svc-faq__question .svc-faq__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.svc-faq__panel {
	overflow: hidden;
}

.svc-faq__answer {
	line-height: 1.7;
}

/* ==========================================================================
   19. Footer
   ========================================================================== */

.site-footer {
	padding-top: 50px;
	overflow: hidden;
	background: var(--c-brown);
	color: var(--c-white);
}

.site-footer__grid {
	display: flex;
	gap: 95px;
	padding-bottom: 61px;
}

.site-footer__about {
	flex: 0 0 344px;
}

.site-footer__mark {
	width: 45px;
	height: 56px;
}

.site-footer__about p {
	margin-block: 22px;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0.36px;
	opacity: 0.8;
}

.site-footer__about .social {
	opacity: 0.8;
}

.site-footer__cols {
	display: flex;
	flex: 0 1 761px;
	justify-content: space-between;
	gap: 24px;
}

.site-footer__col {
	width: 170px;
}

.site-footer__col--contact {
	width: 189px;
}

.site-footer__col--contact,
.site-footer__col--hours {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-footer__col--hours {
	width: auto;
	white-space: nowrap;
}

.site-footer__label {
	color: var(--c-beige);
	font-size: 13px;
	font-weight: 500;
	line-height: 2.2;
	letter-spacing: 0.39px;
	text-transform: uppercase;
}

.site-footer__value,
.footer__menu a {
	font-size: 20px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: 2px;
	opacity: 0.8;
}

.footer__menu a {
	line-height: 2.2;
}

.footer__menu a:hover,
.site-footer__value a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.site-footer__bottom {
	border-top: 1px solid rgba(213, 202, 191, 0.25);
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: min(1222px, 100% - var(--gutter) * 2);
	margin: 25px auto 0;
	color: var(--c-beige);
	font-size: 18px;
	line-height: 1.38;
	letter-spacing: 0.36px;
}

.site-footer__credit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.site-footer__credit img,
.site-footer__credit .img-placeholder {
	width: 194px;
	height: 42px;
	min-height: 0;
}

.site-footer__watermark {
	width: 100%;
	margin-top: 47px;
	pointer-events: none;
	user-select: none;
}

/* ==========================================================================
   20. Default templates (blog, pages, 404)
   ========================================================================== */

.site-main:not(.site-main--sections) {
	width: min(860px, 100% - var(--gutter) * 2);
	margin-inline: auto;
	padding-block: 80px;
}

.site-main:not(.site-main--sections) p {
	margin-bottom: 1.25em;
}

.site-main:not(.site-main--sections) h1,
.site-main:not(.site-main--sections) h2 {
	margin-bottom: 20px;
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
}

.site-main:not(.site-main--sections) a {
	text-decoration: underline;
}

.site-main:not(.site-main--sections) article + article {
	margin-top: 60px;
}

.alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.aligncenter {
	margin-inline: auto;
}

/* ==========================================================================
   21. Responsive (the Figma file is desktop only; below 1440px the layout adapts)
   ========================================================================== */

@media (max-width: 1360px) {
	.founder__grid {
		grid-template-columns: 490px 1fr;
		column-gap: 80px;
	}

	.founder__title {
		white-space: normal;
	}

	.founder__list {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 1250px) {
	.svc-hero__title {
		font-size: 52px;
	}

	.svc-hero__body {
		margin-left: 40px;
		max-width: calc(100% - 80px);
	}

	.svc-cost__box {
		grid-template-columns: minmax(0, 1fr) 42%;
	}

	.expert {
		grid-template-columns: 340px minmax(0, 1fr);
	}

	.expertise__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 20px;
	}

	.site-header__inner {
		padding-inline: 24px;
	}

	.hero__title {
		font-size: 68px;
		line-height: 64px;
	}

	.experience__box {
		grid-template-columns: 45% 1fr;
	}

	.experience__body {
		width: auto;
		margin-inline: 60px;
	}

	.approach__panel {
		padding: 60px 40px;
	}

	.site-footer__grid {
		gap: 48px;
	}

	.site-footer__about {
		flex-basis: 300px;
	}

	.contact__box {
		grid-template-columns: 1fr minmax(0, 517px);
		gap: 40px;
		padding-inline: 40px;
	}

	.visit__map {
		left: auto;
		right: -24px;
	}
}

@media (max-width: 1100px) {
	.svc-hero,
	.svc-cost__box,
	.svc-how {
		grid-template-columns: minmax(0, 1fr);
	}

	.svc-hero::before {
		inset: 0;
	}

	.svc-hero__body {
		width: auto;
	}

	.svc-hero__media {
		height: 480px;
	}

	.svc-cost__body {
		width: auto;
		max-width: none;
		margin-inline: 40px;
	}

	.svc-cost__media,
	.svc-how__media {
		height: 420px;
	}

	.svc-concerns__grid {
		grid-template-columns: minmax(0, 1fr);
		justify-items: stretch;
	}

	.svc-concern {
		min-height: 0;
	}

	.svc-concern__note {
		margin-top: 32px;
	}

	.services__layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.services__grid {
		margin-top: 0;
	}

	.about-founder__box,
	.expert {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-founder__body {
		max-width: none;
		padding: 48px 40px;
	}

	.about-founder__image {
		height: 441px;
	}

	.expert {
		row-gap: 24px;
	}

	.expert__image {
		max-width: 391px;
	}

	.expertise__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vip-intro__inner {
		flex-direction: column;
		align-items: flex-start;
		padding-left: 0;
	}

	.vip-intro__body {
		flex-basis: auto;
	}

	.member-card {
		flex-basis: auto;
		width: min(496.48px, 100%);
		align-self: center;
	}

	.plans__grid {
		grid-template-columns: minmax(0, 420px);
		gap: 40px;
	}

	.legal {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.legal__toc {
		position: static;
	}

	.site-header__logo img {
		width: 220px;
	}

	.site-header__phone {
		font-size: 18px;
	}

	.values__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.values__item {
		min-height: 200px;
	}

	.values__item:nth-child(-n + 2) {
		border-bottom: 1px solid var(--c-line);
	}

	.brands__list,
	.associations__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: 32px 48px;
	}

	.experience__box,
	.approach,
	.founder__grid,
	.membership__box,
	.contact__box {
		grid-template-columns: minmax(0, 1fr);
	}

	.experience__box {
		height: auto;
	}

	.experience__image {
		height: 420px;
	}

	.experience__body {
		margin: 56px 40px;
	}

	.approach__image {
		max-height: 560px;
	}

	.founder__grid {
		row-gap: 56px;
		width: auto;
		margin-inline: var(--gutter);
	}

	.founder__photo {
		justify-self: center;
	}

	.founder__ring {
		display: none;
	}

	.founder__body {
		padding-bottom: 0;
	}

	.founder__signature {
		margin-bottom: 0;
	}

	.founder__list {
		height: auto;
	}

	.vip-card {
		margin-inline: auto;
	}

	.insta__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.insta__feature {
		grid-column: 1 / -1;
		grid-row: auto;
		order: -1;
	}

	.visit__inner {
		display: flex;
		flex-direction: column;
	}

	.visit__panel {
		width: 100%;
		min-height: 0;
		padding: 56px 40px;
	}

	.visit__map {
		position: relative;
		inset: auto;
		order: 2;
		width: 100%;
		height: 420px;
	}

	.visit__pin {
		top: 40%;
		left: 45%;
	}

	.contact__box {
		padding: 56px 40px;
	}

	.site-footer__grid {
		flex-wrap: wrap;
	}

	.site-footer__about {
		flex-basis: 100%;
	}

	.site-footer__cols {
		flex-basis: 100%;
		flex-wrap: wrap;
	}

	.tailored {
		aspect-ratio: auto;
		min-height: 900px;
	}
}

@media (max-width: 900px) {
	.site-header__actions .btn {
		display: none;
	}

	.services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.results__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero__title {
		font-size: 52px;
		line-height: 52px;
		white-space: normal;
	}

	.hero__title br {
		display: none;
	}

	.treatments__row {
		flex-direction: column;
	}

	.slider__track {
		grid-auto-columns: 100%;
	}

	.review {
		border-right: 0;
	}

	.google-rating {
		flex-wrap: wrap;
	}

	.product-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
	}
}

@media (max-width: 700px) {
	.site-header__inner {
		grid-template-columns: auto 1fr auto;
		gap: 12px;
		padding: 16px var(--gutter);
	}

	.site-header__phone-text {
		display: none;
	}

	.site-header__phone-icon,
	.menu-toggle {
		width: 40px;
		height: 40px;
	}

	.site-header__logo {
		justify-self: center;
	}

	.site-header__logo img {
		width: 170px;
	}

	.hero {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 100vh;
		min-height: 100svh;
	}

	.hero__content {
		position: relative;
		left: auto;
		bottom: auto;
		width: auto;
		max-width: none;
		margin-inline: var(--gutter);
		padding-block: 97px 130px;
	}

	.hero__mark {
		width: 48px;
		height: 60px;
		margin-bottom: 20px;
	}

	.hero__eyebrow {
		font-size: 11px;
		letter-spacing: 1.8px;
	}

	.hero__title {
		font-size: 40px;
		line-height: 42px;
	}

	.hero__text {
		margin-top: 24px;
		padding-block: 20px;
		font-size: 16px;
		line-height: 1.6;
	}

	.hero__explore {
		right: var(--gutter);
		bottom: 24px;
	}

	.h1,
	.founder__title {
		font-size: 38px;
		line-height: 1.1;
	}

	.h2,
	.approach__title {
		font-size: 32px;
		line-height: 1.15;
	}

	.eyebrow {
		font-size: 13px;
		letter-spacing: 2px;
		white-space: normal;
		line-height: 1.4;
	}

	.values__list {
		grid-template-columns: 1fr;
	}

	.values__item {
		min-height: 0;
		border-right: 0;
		border-bottom: 1px solid var(--c-line);
	}

	.values__item:last-child {
		border-bottom: 0;
	}

	.experience,
	.membership {
		padding-bottom: 0;
	}

	.experience__body {
		margin: 40px 24px;
	}

	.treatments,
	.skincare,
	.testimonials {
		padding-block: 72px;
	}

	.treatment-card {
		flex-basis: 85vw;
		height: 480px;
		padding: 28px 24px;
	}

	.treatment-card__title {
		font-size: 26px;
		white-space: normal;
	}

	.approach__panel {
		padding: 48px 24px;
	}

	.founder {
		padding-block: 72px;
	}

	.founder__image {
		width: 100%;
		height: auto;
		aspect-ratio: 490 / 687;
	}

	.founder__list {
		grid-template-columns: 1fr;
	}

	.founder__signature img {
		width: 240px;
	}

	.membership {
		padding-block: 0 72px;
	}

	.membership__box {
		padding: 40px 24px;
	}

	.review {
		height: auto;
		padding: 40px 24px;
	}

	.slider__nav {
		padding-inline: 24px;
	}

	.review__quote {
		min-height: 0;
		font-size: 19px;
		line-height: 1.5;
	}

	.google-rating {
		padding: 24px;
	}

	.insta__grid {
		grid-auto-rows: 220px;
		gap: 12px;
	}

	.insta__feature {
		padding-top: 32px;
	}

	.insta__title {
		font-size: 30px;
	}

	.visit__panel,
	.contact__box {
		padding: 40px 24px;
	}

	.visit__map {
		height: 320px;
	}

	.contact {
		padding-block: 72px;
	}

	.contact-form {
		grid-template-columns: 1fr;
		padding: 24px;
	}

	.site-footer__col,
	.site-footer__col--contact {
		width: 100%;
	}

	.transformations {
		padding-block: 72px;
	}

	.svc-concerns,
	.svc-cost,
	.svc-glance,
	.svc-faqs {
		padding-top: 72px;
	}

	.svc-how {
		margin-top: 72px;
	}

	.single-service .contact {
		padding-bottom: 72px;
	}

	.svc-hero__body {
		max-width: none;
		margin-inline: var(--gutter);
	}

	.svc-hero__title {
		font-size: 38px;
	}

	.svc-hero__media {
		height: 320px;
	}

	.svc-facts div,
	.svc-glance__table div {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.svc-facts dd,
	.svc-glance__table dd {
		text-align: left;
	}

	.svc-concern {
		padding: 32px 24px;
	}

	.svc-concern__title {
		font-size: 28px;
	}

	.svc-cost__body {
		margin-inline: 24px;
	}

	.svc-cost__title,
	.svc-how__title {
		font-size: 32px;
		line-height: 1.2;
	}

	.svc-cost__pills li {
		height: auto;
		min-height: 30px;
		padding-block: 6px;
		white-space: normal;
	}

	.svc-cost__media,
	.svc-how__media {
		height: 320px;
	}

	.svc-glance__inner {
		padding-left: 0;
	}

	.svc-faq__question {
		line-height: 1.3;
	}

	.services {
		padding-top: 72px;
	}

	.page-template-services .contact {
		padding-bottom: 72px;
	}

	.services__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-founder,
	.experts,
	.expertise {
		padding-top: 72px;
	}

	.about-results {
		padding-block: 72px;
	}

	.about-title {
		font-size: 38px;
		line-height: 1.1;
	}

	.about-founder__body {
		padding: 40px 24px;
	}

	.about-founder__image {
		height: 320px;
	}

	.expert__image {
		max-width: none;
		height: auto;
		aspect-ratio: 391 / 533;
	}

	.expert__name {
		font-size: 30px;
	}

	.expert__contact {
		flex-direction: column;
	}

	.expert__contact a {
		overflow-wrap: anywhere;
	}

	.expertise__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-results__text {
		letter-spacing: 0.5px;
	}

	.page-template-membership .contact {
		padding-bottom: 72px;
	}

	.vip-intro {
		padding-top: 72px;
	}

	.plans {
		padding-top: 88px;
	}

	.member-card {
		height: auto;
		padding: 28px 16px 32px;
	}

	.member-card__logo {
		width: min(240px, 80%);
	}

	.member-card__label {
		gap: 10px;
		margin-top: 28px;
		font-size: 20px;
	}

	.plan {
		padding: 36px 24px;
	}

	.legal {
		padding-block: 72px;
	}

	.legal-banner {
		min-height: 0;
		padding-block: 48px;
	}

	.legal-banner__content {
		width: auto;
		max-width: none;
		margin-inline: var(--gutter);
	}

	.legal-banner__title {
		font-size: 44px;
		line-height: 46px;
	}

	.legal-banner__text {
		margin-top: 24px;
		padding-block: 20px;
		font-size: 16px;
		line-height: 1.6;
	}

	.legal-banner__meta {
		align-items: flex-start;
		padding-top: 20px;
	}

	.legal__toc {
		padding: 24px;
	}

	.legal__content > h3 {
		font-size: 28px;
	}

	.compare__box {
		aspect-ratio: 4 / 3;
	}

	.compare__slide {
		width: 100%;
	}

	.compare__handle {
		width: 56px;
		height: 56px;
	}

	.results__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.results__item {
		height: auto;
		aspect-ratio: 387 / 193;
	}

	.page-template-gallery .contact {
		padding-bottom: 72px;
	}

	.tailored {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding-top: 48px;
	}

	.tailored::after {
		display: none;
	}

	.tailored__intro {
		position: static;
		width: calc(100% - var(--gutter) * 2);
		margin-inline: auto;
		transform: none;
	}

	.tailored__image {
		position: static;
		order: 2;
		height: auto;
		margin-top: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}