/*
Theme Name: Mane Techniques
Theme URI: https://www.manetechniques.com/
Author: Mane Techniques
Description: Salon theme for Mane Techniques in Wayne, Pennsylvania. Headings use the supplied Adam family. Body text uses The Seasons from Adobe Fonts kit lsk0dtt.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mane-techniques
*/

@font-face {
	font-family: Adam;
	src: url("assets/fonts/Adam-Light.woff2") format("woff2"), url("assets/fonts/Adam-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: Adam;
	src: url("assets/fonts/Adam-Medium.woff2") format("woff2"), url("assets/fonts/Adam-Medium.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: Adam;
	src: url("assets/fonts/Adam-Bold.woff2") format("woff2"), url("assets/fonts/Adam-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: Quicksand;
	src: url("assets/fonts/Quicksand-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--ink: #313131;
	--sand: #d1c09e;
	--sand-deep: #c4b08a;
	--gold: #c6ae86;
	--cream: #efebe3;
	--value: #d8ccb8;
	--legal: #998c88;
	--paper: #fdfdfd;
	--line: rgba(49, 49, 49, 0.18);
	--head: Adam, "Century Gothic", Futura, sans-serif;
	--body: "the-seasons", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--wrap: 1120px;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.7;
	overflow-x: clip;
}

img, video, iframe, svg { max-width: 100%; height: auto; }
img { display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, .team-name, .btn, .utility a, .primary-nav a, .hub-list a, .section-title, .legal {
	font-family: var(--head);
	font-weight: 400;
	letter-spacing: 0.08em;
}
h1, h2, h3 { line-height: 1.25; font-weight: 400; }
p { margin: 0 0 1rem; }
.screen-reader-text, .hp {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.skip-link {
	position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
	background: var(--ink); color: #fff; padding: 0.5rem 0.8rem;
}
.skip-link:focus { top: 0.5rem; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin: 0 auto; }
.narrow { width: min(46rem, calc(100% - 2.5rem)); }
.center { text-align: center; }
.prose > *:first-child { margin-top: 0; }

.site-header { background: #fff; }
.utility { display: flex; }
.utility-nav .menu, .primary-nav .menu, .footer-menu, .socials, .team-grid, .hub-list {
	list-style: none; margin: 0; padding: 0;
}
.utility-nav .menu { display: flex; flex-wrap: wrap; gap: 2px; }
.utility-nav a {
	display: inline-block;
	background: var(--sand);
	color: var(--ink);
	text-decoration: none;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	padding: 0.55rem 0.85rem;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.utility-nav .menu > li:first-child > a { background: var(--ink); color: #fdfdfd; }
.utility-nav a:hover,
.utility-nav .menu > li:first-child > a:hover {
	background: var(--ink);
	color: #fff;
}
.brand-row { display: flex; justify-content: center; align-items: center; position: relative; padding: 1.1rem 1rem 0.7rem; }
.logo img { width: min(280px, 70vw); height: auto; }
.nav-toggle {
	display: none;
	position: absolute; right: 0.8rem; top: 50%;
	transform: translateY(-50%);
	width: 2.6rem; height: 2.6rem;
	border: 0; background: transparent; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
	display: block; height: 1px; width: 1.4rem; background: var(--ink); position: relative;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-bar { background: var(--sand); }
.primary-nav .menu { display: flex; justify-content: center; flex-wrap: wrap; }
.primary-nav a {
	display: inline-block;
	color: #fdfdfd;
	text-decoration: none;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	padding: 0.85rem 0.85rem;
}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a { text-decoration: underline; text-underline-offset: 0.35rem; }
.primary-nav .menu > li { position: relative; }
.primary-nav .sub-menu {
	display: none;
	position: absolute; left: 0; top: 100%; z-index: 20;
	min-width: 16rem;
	background: #fff;
	box-shadow: 0 10px 24px rgba(49, 49, 49, 0.08);
	padding: 0.4rem 0;
}
.primary-nav .sub-menu a { color: var(--ink); display: block; letter-spacing: 0.08em; font-size: 0.72rem; }
.primary-nav .sub-menu a:hover { background: var(--cream); }
.primary-nav .menu > li:hover > .sub-menu,
.primary-nav .menu > li:focus-within > .sub-menu { display: block; }
.submenu-toggle { display: none; }

.book-now {
	position: fixed; right: 0.8rem; bottom: 0.8rem; top: auto; z-index: 30;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--sand);
	color: var(--ink);
	text-decoration: none;
	font-family: var(--head);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.9rem 1.3rem;
	box-shadow: 0 6px 16px rgba(49, 49, 49, 0.12);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.book-now:hover,
.book-now:focus-visible {
	background: var(--ink);
	color: #fff;
}

.hero {
	position: relative;
	min-height: 68vh;
	background: #1c1c1c center/cover no-repeat;
	overflow: hidden;
}
.hero-video {
	display: block;
	width: 100%;
	height: 68vh;
	object-fit: cover;
}
.hero-copy {
	background: #fff;
	color: var(--ink);
	text-align: center;
	width: min(48rem, calc(100% - 2.5rem));
	margin: 0 auto;
	padding: 3.2rem 0 2.4rem;
}
.hero-copy h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: 0.18em; }
.hero-text { font-size: 1rem; }
.section { padding: 4.5rem 0; }
.section-title, .page-main h1 { text-align: center; letter-spacing: 0.16em; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.gallery-marquee { overflow: hidden; width: 100%; }
.gallery-track { display: flex; width: max-content; animation: mt-marquee 36s linear infinite; }
.gallery-marquee:hover .gallery-track,
.gallery-marquee:focus-within .gallery-track { animation-play-state: paused; }
.gallery-set { display: flex; }
.gallery-set img { width: 320px; height: 420px; object-fit: cover; flex: 0 0 auto; display: block; }
@keyframes mt-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.value-band { background: var(--value); }
.value-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: center; }
.value-title { letter-spacing: 0.14em; font-size: 1.5rem; }
.value-photo img, .value-photo video {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 300px 300px 0 0;
}
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; margin-top: 2.5rem; }
.team-grid a { text-decoration: none; display: grid; justify-items: center; text-align: center; }
.avatar { width: 260px; height: 260px; border-radius: 50%; overflow: hidden; display: block; background: var(--cream); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.avatar.is-home-portrait img { object-position: center center; }
.team-name { display: block; margin-top: 0.9rem; color: var(--gold); letter-spacing: 0.2em; font-size: 1rem; }
.team-role { display: block; margin-top: 0.25rem; font-family: var(--body); font-size: 0.68rem; letter-spacing: 0.12em; font-weight: 400; }
.reviews-band { padding-top: 1rem; }
.reviews-layout { display: grid; grid-template-columns: minmax(220px, 0.7fr) 1.3fr; gap: 1.75rem; align-items: center; }
.reviews-photo { margin: 0; }
.reviews-photo img {
	width: 100%;
	aspect-ratio: 3 / 4.4;
	object-fit: cover;
	object-position: center 20%;
	border-radius: 200px 200px 0 0;
}
.reviews-copy .section-title { text-align: center; }
.reviews-band .carousel { max-width: none; }
.carousel { position: relative; max-width: 40rem; margin: 2rem auto 0; min-height: 18rem; }
.review-card {
	display: none; margin: 0; background: var(--value); padding: 2.2rem 2.4rem; text-align: center;
}
.review-card.is-active { display: block; }
.review-card footer { margin-top: 1.2rem; font-family: var(--head); letter-spacing: 0.16em; }
.carousel-btn {
	position: absolute; top: 50%; transform: translateY(-50%);
	border: 0; background: transparent; font-size: 1.8rem; cursor: pointer; color: var(--ink);
}
.carousel-btn.prev { left: 0.4rem; }
.carousel-btn.next { right: 0.4rem; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	text-decoration: none;
	border: 1px solid var(--sand-deep);
	background: var(--sand);
	color: var(--ink);
	padding: 0.75rem 1.3rem;
	font-size: 1.4rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover,
.btn:focus-visible {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}
.wide { display: flex; }
.stack-links { display: grid; gap: 0.7rem; }
.text-link { font-family: var(--head); letter-spacing: 0.14em; font-size: 0.85rem; }
.check-list, .plain-list { list-style: none; padding: 0; }
.check-list li::before { content: "> "; }
.kicker, .group-label { font-family: var(--head); letter-spacing: 0.14em; font-size: 0.95rem; }
.fine { font-size: 0.92rem; font-style: italic; }
.page-main { padding: 3.5rem 0 4.5rem; }
.page-main h1 { margin: 0 0 1.4rem; }
.gold, .member h1 { color: var(--gold); text-align: left; letter-spacing: 0.04em; font-size: clamp(2rem, 4vw, 2.8rem); }
.team-about, .contact-grid, .careers, .member { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.texture-page { width: min(980px, calc(100% - 2.5rem)); margin: 0 auto; }
.texture-lead { text-align: center; margin: 0 auto 1.25rem; }
.texture-lead h1 {
	font-size: clamp(2.1rem, 4.6vw, 3.75rem);
	line-height: 1.12;
	letter-spacing: 0.01em;
	margin-bottom: 0.9rem;
}
.texture-lead .prose { font-size: 1.125rem; }
.texture-lead .prose p { text-align: center; }
.texture-row {
	display: grid;
	gap: 1.5rem 2rem;
	align-items: center;
	margin: 1.75rem 0 2.75rem;
}
.texture-row.cols-videos { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.95fr); }
.texture-row.cols-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr); }
.texture-row.cols-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.texture-about {
	margin: 0;
	text-align: left;
	font-size: clamp(1.9rem, 3.6vw, 3.5rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
}
.texture-copy { font-size: 1rem; text-align: left; }
.texture-copy p { margin: 0 0 1rem; }
.texture-copy ul { margin: 0 0 1rem 1.2rem; padding: 0; }
.texture-copy li { margin: 0.2rem 0; }
.texture-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.texture-video,
.texture-photo img,
.texture-slides img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	background: #111;
}
.texture-video { aspect-ratio: 9 / 16; }
.texture-photo img { aspect-ratio: 3 / 4; }
.texture-slider { position: relative; }
.texture-slides img { aspect-ratio: 454 / 631; display: none; }
.texture-slides img.is-active { display: block; }
.texture-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 2.4rem;
	line-height: 1;
	cursor: pointer;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
	padding: 0.2rem 0.45rem;
}
.texture-slider-btn.prev { left: 0.15rem; }
.texture-slider-btn.next { right: 0.15rem; }
.team-about {
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	align-items: stretch;
	column-gap: 2.4rem;
}
.team-copy { display: flex; flex-direction: column; min-width: 0; }
.team-collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.15rem 0.9rem;
	align-content: start;
	min-width: 0;
}
.team-frame {
	margin: 0;
	background: #fff;
	border: 1px solid #c6ae86;
	padding: 0.42rem;
}
.team-frame img { display: block; width: 100%; height: auto; }
.team-frame-top {
	grid-column: 1 / -1;
	width: 76%;
	justify-self: end;
	transform: rotate(1.7deg);
	margin: 0.2rem 0.15rem 0.55rem auto;
}
.team-frame-sign {
	transform: rotate(-1.3deg);
	margin-top: 0.45rem;
}
.team-frame-couch {
	transform: rotate(1.6deg);
	margin-top: 1.15rem;
}
.team-frame-sign img,
.team-frame-couch img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 22%;
	height: auto;
}
.team-frame-white {
	grid-column: 1 / -1;
	width: 94%;
	justify-self: end;
	transform: rotate(0.8deg);
	margin: 0.35rem 0 0.2rem auto;
}
.team-frame-black {
	width: min(100%, 26rem);
	margin: 1.15rem 0 0.35rem;
	transform: rotate(-2.5deg);
}
.signoff { font-size: 1.35rem; }
.signoff em { font-style: italic; font-weight: 400; }
.member-photo img { width: 100%; border-radius: 50% 50% 0 0; object-fit: cover; aspect-ratio: 4/5; }
.member-bio { font-size: 1.02rem; }
.service-block { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 1.5rem; margin: 2.5rem 0; align-items: center; }
.service-block:nth-child(even) { grid-template-columns: 1.2fr 0.8fr; }
.service-block:nth-child(even) figure { order: 2; }
.service-block img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.service-card { background: #fff; border: 1px solid var(--line); padding: 1.4rem 1.5rem; }
.service-card h2 { font-size: 1rem; letter-spacing: 0.16em; }
.service-card ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.service-card li { border-bottom: 1px solid var(--line); padding: 0.55rem 0; font-size: 0.82rem; letter-spacing: 0.08em; font-family: var(--head); }
.faq-item { border-bottom: 1px solid var(--line); padding: 0.8rem 0; }
.faq-item summary { cursor: pointer; font-family: var(--head); letter-spacing: 0.04em; }
.faq-item .prose { padding-top: 0.6rem; }
.review-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.quote-card { background: var(--value); margin: 0; padding: 2rem 1.5rem; text-align: center; }
.qmark { font-family: var(--body); font-size: 3rem; line-height: 1; display: block; }
.stars { letter-spacing: 0.2em; }
.review-links { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.5rem; }
.sheet-form, .careers-form { border: 1px solid var(--line); padding: 1.5rem; background: #fff; }
.careers { background: var(--value); padding: 2rem; }
.page-careers { background: linear-gradient(#fff, var(--value) 18% 80%, #fff); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1rem; }
input, textarea, select {
	width: 100%;
	border: 1px solid #cfcfcf;
	background: #fff;
	padding: 0.65rem 0.7rem;
	border-radius: 0;
}
input[type="checkbox"],
input[type="radio"],
input[type="file"] {
	width: auto;
	padding: 0;
	background: transparent;
}
fieldset label, .check label { display: block; }
fieldset input[type="radio"],
.check input[type="checkbox"] {
	margin: 0 0.45rem 0 0;
	vertical-align: -0.1em;
}
textarea { min-height: 6rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.fine { display: block; margin-top: 0.35rem; }
.form-notice { padding: 0.7rem 0.8rem; background: var(--cream); }
.form-notice.is-bad { background: #f6e4e2; }
.hub { max-width: 36rem; text-align: center; }
.hub h1, .hub h2 { font-size: 1rem; letter-spacing: 0.16em; }
.hub-list { display: grid; gap: 0.55rem; margin: 1rem auto; max-width: 16rem; }
.hub-list a {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sand);
	color: var(--ink);
	text-decoration: none;
	padding: 0.7rem 0.8rem;
	letter-spacing: 0.08em;
	font-size: 1.4rem;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hub-list a:hover,
.hub-list a:focus-visible {
	background: var(--ink);
	color: #fff;
}
a.season-btn {
	font-family: var(--body);
	font-weight: 300;
	letter-spacing: 0.02em;
	background: var(--sand);
	color: var(--ink);
	border-color: var(--sand);
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
a.season-btn:hover,
a.season-btn:focus-visible {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}
.icon-row { display: flex; gap: 0.8rem; justify-content: center; font-family: var(--head); }
.icon-row a { text-decoration: none; }
.icon-row-brands { align-items: center; gap: 0.95rem; }
.icon-row-brands a { display: inline-flex; line-height: 0; }
.icon-row-brands svg { width: 1.7rem; height: 1.7rem; }
.icon-row-brands a:nth-child(1) { color: #c13584; }
.icon-row-brands a:nth-child(2) { color: #1877f2; }
.icon-row-brands a:nth-child(3) { color: #0a66c2; }
.icon-row-brands a:nth-child(4) { color: #e60023; }
.gift-hero {
	background: linear-gradient(#f7f1e6, #e7dcc8);
	padding: 5rem 0;
	text-align: center;
}
.page-virtuagift-cards { padding: 0; }
.contact-grid { align-items: center; }
.map { width: 100%; min-height: 360px; border: 0; }
.page-shop-our-favorites { padding-top: 2.4rem; padding-bottom: 4.5rem; }
.page-shop-our-favorites h1,
.page-shop-our-favorites h2 {
	letter-spacing: 0;
	font-weight: 400;
	line-height: 1.05;
	text-align: inherit;
}
.shop {
	width: min(1240px, 100%);
	margin: 0 auto;
	padding: 0 1rem;
	box-sizing: border-box;
	color: #313131;
}
.shop a { text-decoration: none; }
.shop-intro { text-align: center; margin: 0 auto 6.5rem; }
.shop-intro h1 {
	max-width: 16em;
	margin: 0 auto 4.4rem;
	color: #292929;
	font-size: 60px;
	text-align: center;
}
.shop-intro-copy {
	max-width: 50rem;
	margin: 0 auto;
	font-family: Quicksand, "Century Gothic", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: 0;
	color: #313131;
}
.shop-intro-copy p { margin: 0 0 1.7rem; }
.shop-intro-copy p:last-child { margin-bottom: 0; }
.shop-nutra,
.shop-jolie,
.shop-aqua,
.shop-amazon,
.shop-verb {
	display: grid;
	align-items: center;
	column-gap: 3.5rem;
	min-width: 0;
}
.shop-nutra > *,
.shop-jolie > *,
.shop-aqua > *,
.shop-amazon > *,
.shop-verb > * { min-width: 0; }
.shop-nutra { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr); align-items: start; }
.nutra-visual { max-width: 643px; }
.nutra-visual h2 { margin: 0 0 1.15rem; text-align: center; font-size: 60px; color: #292929; }
.nutra-visual h2 a { color: inherit; }
.nutra-collage { position: relative; display: block; aspect-ratio: 643 / 429; }
.nutra-collage img { position: absolute; object-fit: cover; max-width: none; }
.nutra-women { left: 0; top: 0; width: 76.67%; height: 88.58%; }
.nutra-collagen { left: 71.07%; top: 0; width: 28.93%; height: 91.61%; z-index: 2; }
.nutra-men { left: 31.88%; top: 21.68%; width: 68.12%; height: 78.32%; z-index: 3; }
.shop-nutra .shop-copy { padding-top: 4.6rem; max-width: 31rem; }
.shop h2 { margin: 0; color: #313131; font-size: 45px; }
.shop h2.has-rule::after {
	content: "";
	display: block;
	width: 284px;
	max-width: 70%;
	border-top: 1px solid #313131;
	margin-top: 0.7rem;
}
.shop-sub,
.shop-lead,
.shop-blurb {
	display: block;
	font-family: var(--head);
	font-weight: 400;
	letter-spacing: 0;
	color: #626262;
}
.shop-sub { margin: 1.15rem 0 1.45rem; max-width: 26rem; font-size: 35px; line-height: 29.4px; }
.shop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 288px;
	max-width: 100%;
	height: 63px;
	background: #d1c09e;
	color: #fafafa;
	font-family: var(--head);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 1.5px;
	line-height: 1;
	text-transform: uppercase;
}
.shop-btn:hover,
.shop-btn:focus-visible { background: #c4b08a; color: #fafafa; }
.shop-btn-sm { width: 189px; height: 40px; }
.shop-divider { border: 0; border-top: 1px solid rgba(147, 147, 147, 0.35); margin: 3.4rem 0; }
.shop-jolie { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; }
.shop-jolie-copy { max-width: 34rem; margin-left: auto; padding-top: 7.2rem; text-align: right; }
.shop-jolie-copy .has-rule::after { margin-left: auto; }
.shop-lead { margin: 1.15rem 0 1.5rem; font-size: 30px; line-height: 29.4px; }
.jolie-stage { position: relative; max-width: 640px; margin-left: auto; width: 100%; }
.shower-with { margin: 0; text-align: center; font-family: var(--head); font-size: 65px; font-weight: 400; letter-spacing: 0; line-height: 1; color: #313131; }
.jolie-word { width: 182px; height: 105px; margin: 0 auto -0.4rem; position: relative; z-index: 2; object-fit: contain; }
.jolie-products { position: relative; display: block; margin-bottom: 6.5rem; }
.jolie-shower { width: 66%; max-width: 100%; height: auto; }
.jolie-install { position: absolute; width: 38%; left: 63%; top: 62%; height: auto; max-width: 42%; }
.shop-aqua { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr); margin-top: 3.6rem; }
.shop-photo { display: block; }
.shop-photo img { width: 100%; aspect-ratio: 544 / 496; object-fit: cover; }
.shop-aqua .shop-copy h2,
.shop-amazon .shop-copy h2,
.shop-verb .shop-copy h2 { margin-bottom: 1.15rem; }
.shop-aqua .shop-btn,
.shop-amazon .shop-btn,
.shop-verb .shop-btn { margin-top: 0.4rem; }
.shop-amazon { grid-template-columns: minmax(0, 1fr) 430px; }
.shop-blurb { margin: 1.15rem 0 1.5rem; max-width: 27rem; font-size: 30px; line-height: 42px; color: #626262; }
.amazon-cards { display: grid; gap: 18px; }
.amazon-card {
	display: grid;
	grid-template-columns: 156px 1fr;
	align-items: center;
	min-height: 185px;
	padding: 0.7rem 1.15rem 0.7rem 0.45rem;
	background: #fdfdfd;
	border-radius: 15px;
	box-shadow: 0 1px 32px rgba(0, 0, 0, 0.21);
	color: inherit;
}
.amazon-card img { width: 141px; height: 146px; object-fit: contain; margin: 0 auto; }
.amazon-card-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; }
.amazon-name { font-family: var(--head); font-size: 20px; font-weight: 400; letter-spacing: 0; line-height: 28px; color: #626262; }
.shop-verb { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr); margin-top: 3.2rem; }
.verb-logo { width: 271px; height: 100px; object-fit: fill; margin-bottom: 1.15rem; }
.page-linktree { padding-top: 2rem; }
.linktree { text-align: center; }
.linktree-brand { display: inline-block; text-decoration: none; }
.linktree-brand img { width: 230px; margin: 0 auto; }
.linktree-tagline {
	margin: 0.2rem 0 0.9rem;
	font-family: var(--head);
	font-size: 0.58rem;
	letter-spacing: 0.22em;
}
.linktree h1 {
	font-family: var(--head);
	font-weight: 400;
	letter-spacing: 0.08em;
	font-size: 1.45rem;
	margin: 0 0 1.15rem;
}
.linktree .hub-list { max-width: 21.25rem; gap: 0.85rem; }
.linktree .hub-list a {
	font-size: 1.4rem;
	letter-spacing: 0.01em;
	padding: 0.55rem 0.9rem;
}
a[href="#book-now"]::before,
a.follow::before {
	content: "";
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	background-color: currentColor;
	transition: background-color 0.25s ease, color 0.25s ease;
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
a[href="#book-now"]::before {
	-webkit-mask-image: url("assets/images/book-now.png");
	mask-image: url("assets/images/book-now.png");
}
a.follow::before {
	-webkit-mask-image: url("assets/images/instagram.png");
	mask-image: url("assets/images/instagram.png");
}
.linktree-socials {
	display: flex;
	justify-content: center;
	gap: 0.85rem;
	list-style: none;
	margin: 1.35rem 0 1.6rem;
	padding: 0;
}
.linktree-socials a {
	display: grid;
	place-items: center;
	width: 2.45rem;
	height: 2.45rem;
}
.linktree-socials img {
	width: 2.2rem;
	height: 2.2rem;
	display: block;
	object-fit: contain;
}
.linktree-photo { margin: 0; }
.linktree-photo img { width: 100%; height: auto; max-height: none; object-fit: cover; }
.site-footer { background: var(--cream); padding-top: 3rem; }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr 1.1fr; gap: 1.5rem; padding-bottom: 2.5rem; }
.footer-logo img { width: 150px; }
.site-footer h2 { font-size: 0.78rem; letter-spacing: 0.16em; }
.footer-menu a, .site-footer p a { text-decoration: none; }
.footer-menu a:hover, .site-footer p a:hover { text-decoration: underline; }
.socials { display: flex; gap: 0.55rem; margin-top: 0.8rem; }
.socials a { color: #8d8d8d; }
.socials svg, .socials img { width: 22px; height: 22px; display: block; object-fit: contain; }
.legal { margin: 0; background: var(--legal); color: #fff; text-align: center; font-size: 0.62rem; letter-spacing: 0.16em; padding: 0.7rem 1rem; }

@media (max-width: 980px) {
	.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.value-grid, .reviews-layout, .texture-row, .team-about, .contact-grid, .careers, .member, .service-block, .service-block:nth-child(even), .review-columns, .form-grid, .footer-grid {
		grid-template-columns: 1fr;
	}
	.service-block:nth-child(even) figure { order: 0; }
	.team-copy { display: block; }
	.team-frame,
	.team-frame-top,
	.team-frame-sign,
	.team-frame-couch,
	.team-frame-white,
	.team-frame-black {
		transform: none;
		width: auto;
		margin: 0 0 1rem;
		justify-self: stretch;
	}
	.team-frame-black { width: 100%; margin-top: 0.4rem; }
	.footer-grid { text-align: left; }
	.nav-toggle { display: grid; place-items: center; }
	.utility { display: none; }
	.nav-bar { display: none; }
	body.nav-open { overflow: hidden; }
	body.nav-open .utility { display: block; }
	body.nav-open .nav-bar {
		display: block;
		position: fixed; inset: 0; top: 7.5rem;
		background: #fff; z-index: 40; overflow: auto;
		padding-bottom: 5rem;
	}
	body.nav-open .utility { position: fixed; top: 5.2rem; left: 0; right: 0; z-index: 41; background: #fff; }
	.primary-nav .menu { display: block; background: #fff; }
	.primary-nav a { color: var(--ink); display: inline-block; }
	.primary-nav .menu > li { border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; }
	.primary-nav .menu > li > a { flex: 1; }
	.primary-nav .sub-menu > li:has(> .submenu-toggle) { display: flex; flex-wrap: wrap; align-items: center; }
	.primary-nav .sub-menu > li:has(> .submenu-toggle) > a { flex: 1; }
	.primary-nav .sub-menu { position: static; display: none; box-shadow: none; min-width: 0; width: 100%; background: var(--cream); }
	/* The arrow button stays focused after a click, so :hover and :focus-within must not keep a submenu open. */
	.primary-nav .menu > li:hover > .sub-menu,
	.primary-nav .menu > li:focus-within > .sub-menu,
	.primary-nav .sub-menu li:hover > .sub-menu,
	.primary-nav .sub-menu li:focus-within > .sub-menu { display: none; }
	.primary-nav .menu > li.is-open > .sub-menu,
	.primary-nav .sub-menu li.is-open > .sub-menu { display: block; }
	.submenu-toggle {
		display: inline-grid; place-items: center;
		width: 2.5rem; height: 2.5rem; border: 0; background: transparent; cursor: pointer;
	}
	.submenu-toggle::before { content: ""; border: solid var(--ink); border-width: 0 1px 1px 0; display: inline-block; padding: 3px; transform: rotate(45deg); }
	.primary-nav .menu a:active,
	.primary-nav .sub-menu a:active {
		background: var(--ink);
		color: #fff;
		-webkit-tap-highlight-color: transparent;
	}
}
@media (max-width: 980px) {
	.shop { width: 100%; padding: 0 1rem; }
	.shop h1,
	.shop h2,
	.shop-lead,
	.shop-sub,
	.shop-blurb { overflow-wrap: break-word; }
	.shop-intro { margin-bottom: 3.5rem; }
	.shop-intro h1 { font-size: clamp(2rem, 9vw, 2.6rem); max-width: none; }
	.nutra-visual h2,
	.shower-with { font-size: 36px; }
	.jolie-products { margin-bottom: 3rem; }
	.jolie-word { width: 140px; height: 80px; }
	.shop h2 { font-size: 32px; }
	.shop-sub { font-size: 26px; line-height: 1.15; }
	.shop-lead,
	.shop-blurb { font-size: 22px; line-height: 1.25; }
	.shop-nutra,
	.shop-jolie,
	.shop-aqua,
	.shop-amazon,
	.shop-verb { grid-template-columns: 1fr; row-gap: 1.6rem; }
	.shop-nutra .shop-copy,
	.shop-jolie-copy { padding-top: 0; max-width: none; }
	.shop-jolie-copy { text-align: left; margin-left: 0; }
	.shop-jolie-copy .has-rule::after { margin-left: 0; }
	.jolie-stage { margin-left: 0; }
	.jolie-products { min-height: 0; }
	.shop-amazon { grid-template-columns: 1fr; }
	.amazon-card { min-height: 0; }
	.verb-logo { width: min(271px, 80%); height: auto; }
}
@media (max-width: 620px) {
	.team-grid { grid-template-columns: 1fr; }
	.team-collage { grid-template-columns: 1fr; }
	.team-frame-sign img,
	.team-frame-couch img {
		aspect-ratio: auto;
		object-fit: contain;
		height: auto;
	}
}

body.mt-booking-open { overflow: hidden; }
body.mt-booking-open .book-now { visibility: hidden; }
.mt-booking {
	position: fixed;
	inset: 0;
	z-index: 100000;
}
.mt-booking__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(49, 49, 49, 0.45);
}
.mt-booking__dialog {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(34rem, 100%);
	background: #f5f6f7;
	box-shadow: 0 0 24px rgba(49, 49, 49, 0.2);
}
.mt-booking__close {
	align-self: flex-end;
	margin: 0.4rem;
	border: 0;
	background: var(--ink);
	color: #fff;
	font-family: var(--head);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.45rem 0.8rem;
	cursor: pointer;
}
.mt-booking__frame {
	flex: 1;
	width: 100%;
	border: 0;
	background: #f5f6f7;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero-video { display: none; }
	.gallery-track { animation: none; width: 100%; }
	.gallery-set[aria-hidden="true"] { display: none; }
	.gallery-set { width: 100%; }
	.gallery-set img { width: 25%; height: auto; aspect-ratio: 3 / 4; }
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
}