/* ============================================================
   AUTHENTIC AESTHETICS — Brand Tokens (mirrors src/index.css)
   ============================================================ */
	:root {
		--background: 37 53% 96%;
		/* Warm Ivory #F8F5F0 */
		--foreground: 30 27% 13%;
		/* Warm Charcoal #2A2118 */
		--card: 37 53% 96%;
		--card-foreground: 30 27% 13%;
		--primary: 39 48% 61%;
		/* Heritage Gold #C9A96E */
		--primary-foreground: 30 12% 5%;
		--secondary: 30 12% 5%;
		/* Deep Onyx #0D0C0B */
		--secondary-foreground: 37 53% 96%;
		--muted: 40 10% 90%;
		--muted-foreground: 40 10% 49%;
		/* Soft Stone #888070 */
		--accent: 39 48% 61%;
		--accent-foreground: 30 12% 5%;
		--border: 39 30% 80%;
		--input: 39 30% 80%;
		--ring: 39 48% 61%;
		--radius: 0.25rem;

		--onyx: 30 12% 5%;
		--ivory: 37 53% 96%;
		--gold: 39 48% 61%;
		--charcoal: 30 27% 13%;
		--stone: 40 10% 49%;
		--gold-glow: 39 60% 70%;
	}

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

	html,
	body {
		margin: 0;
		padding: 0;
	}

	body {
		background: hsl(var(--background));
		color: hsl(var(--foreground));
		font-family: 'Raleway', sans-serif;
		font-weight: 300;
		-webkit-font-smoothing: antialiased;
		line-height: 1.5;
	}

	p {
		color: hsl(var(--ivory));
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: 'Cormorant Garamond', serif;
		font-weight: 500;
		margin: 0;
		line-height: 1.15;
	}

	p {
		margin: 0;
	}

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

	img {
		max-width: 100%;
		display: block;
	}

	button {
		font-family: inherit;
		cursor: pointer;
		border: none;
		background: none;
		color: inherit;
	}

	input,
	textarea {
		font-family: inherit;
	}

	/* Layout helpers */
	.container {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 1.5rem;
	}

	@media(min-width:640px) {
		.container {
			padding: 0 2rem;
		}
	}

	.section-pad {
		padding: 5rem 0;
	}

	@media(min-width:1024px) {
		.section-pad {
			padding: 7rem 0;
		}
	}

	/* Color util classes (semantic) */
	.bg-background {
		background: hsl(var(--background));
	}

	.bg-secondary {
		background: hsl(var(--secondary));
	}

	.bg-primary {
		background: hsl(var(--primary));
	}

	.text-ivory {
		color: hsl(var(--ivory));
	}

	.text-stone {
		color: hsl(var(--stone));
	}

	.text-primary {
		color: hsl(var(--primary));
	}

	.text-foreground {
		color: hsl(var(--foreground));
	}

	.text-muted {
		color: hsl(var(--muted-foreground));
	}

	/* Brand motifs */
	.checker-pattern {
		background-image:
			linear-gradient(45deg, hsl(39 48% 61% / 0.06) 25%, transparent 25%),
			linear-gradient(-45deg, hsl(39 48% 61% / 0.06) 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, hsl(39 48% 61% / 0.06) 75%),
			linear-gradient(-45deg, transparent 75%, hsl(39 48% 61% / 0.06) 75%);
		background-size: 40px 40px;
		background-position: 0 0, 0 20px, 20px -20px, -20px 0;
	}

	.gold-line {
		height: 1px;
		background: linear-gradient(90deg, transparent, hsl(var(--gold)), transparent);
	}

	.checker-corner {
		position: relative;
	}

	.checker-corner::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 60px;
		height: 60px;
		opacity: .2;
		background-image:
			linear-gradient(45deg, hsl(var(--gold)) 25%, transparent 25%),
			linear-gradient(-45deg, hsl(var(--gold)) 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, hsl(var(--gold)) 75%),
			linear-gradient(-45deg, transparent 75%, hsl(var(--gold)) 75%);
		background-size: 15px 15px;
		background-position: 0 0, 0 7.5px, 7.5px -7.5px, -7.5px 0;
		-webkit-mask-image: linear-gradient(135deg, transparent 30%, black);
		mask-image: linear-gradient(135deg, transparent 30%, black);
		pointer-events: none;
	}

	/* Typography utilities */
	.font-display {
		font-family: 'Cormorant Garamond', serif;
	}

	.font-body {
		font-family: 'Raleway', sans-serif;
	}

	.italic {
		font-style: italic;
	}

	.uppercase {
		text-transform: uppercase;
	}

	.tracking-wide {
		letter-spacing: .025em;
	}

	.tracking-wider {
		letter-spacing: .05em;
	}

	.tracking-2 {
		letter-spacing: .2em;
	}

	.tracking-3 {
		letter-spacing: .3em;
	}

	.tracking-35 {
		letter-spacing: .35em;
	}

	.tracking-4 {
		letter-spacing: .4em;
	}

	/* Buttons */
	.btn-primary {
		display: inline-block;
		padding: .875rem 2rem;
		background: hsl(var(--primary));
		color: hsl(var(--primary-foreground));
		font-family: 'Raleway', sans-serif;
		font-size: .875rem;
		letter-spacing: .025em;
		transition: background .25s ease;
	}

	.btn-primary:hover {
		background: hsl(var(--gold-glow));
	}

	.btn-outline {
		display: inline-block;
		padding: .875rem 2rem;
		border: 1px solid hsl(var(--primary));
		color: hsl(var(--primary));
		font-family: 'Raleway', sans-serif;
		font-size: .875rem;
		letter-spacing: .025em;
		transition: background .25s ease;
	}

	.btn-outline:hover {
		background: hsl(var(--primary) / 0.1);
	}

	/* Animations */
	@keyframes fadeUp {
		from {
			opacity: 0;
			transform: translateY(30px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Fade-up: visible by default; JS adds .js-ready to body to enable hidden start state */
	.fade-up {
		opacity: 1;
	}

	body.js-ready .fade-up {
		opacity: 0;
	}

	body.js-ready .fade-up.is-visible {
		animation: fadeUp .6s ease-out forwards;
	}

	.delay-100 {
		animation-delay: .1s;
	}

	.delay-200 {
		animation-delay: .2s;
	}

	.delay-300 {
		animation-delay: .3s;
	}

	.delay-400 {
		animation-delay: .4s;
	}

	@keyframes marquee {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}

	.animate-marquee {
		animation: marquee 20s linear infinite;
	}

	@media(max-width:768px) {
		.animate-marquee {
			animation: marquee 5s linear infinite;
		}
	}

	/* ====== NAVBAR ====== */
	.nav-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 50;
		transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
	}

	.nav-header.scrolled {
		background: hsl(var(--secondary) / 0.95);
		backdrop-filter: blur(8px);
		box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
	}

	.nav-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 1.5rem;
		max-width: 1280px;
		margin: 0 auto;
	}

	.brand {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.brand-name {
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.5rem;
		color: hsl(var(--ivory));
		letter-spacing: .02em;
	}

	.brand-tag {
		font-family: 'Raleway', sans-serif;
		font-size: 10px;
		letter-spacing: .4em;
		text-transform: uppercase;
		color: hsl(var(--stone));
		margin-top: 4px;
	}

	.brand .gold-line {
		width: 100%;
		margin-top: 2px;
	}

	.nav-links {
		display: none;
		gap: 2rem;
		align-items: center;
	}

	@media(min-width:1024px) {
		.nav-links {
			display: flex;
		}

		.menu-btn {
			display: none;
		}
	}

	.nav-links a {
		font-family: 'Raleway', sans-serif;
		font-size: .875rem;
		font-weight: 300;
		color: hsl(var(--ivory) / .8);
		transition: color .2s;
		letter-spacing: .025em;
	}

	.nav-links a:hover {
		color: hsl(var(--primary));
	}

	.menu-btn {
		background: none;
		border: none;
		color: hsl(var(--ivory));
		padding: .5rem;
	}

	/* 1. Ensure the parent is the anchor point */
	.nav-treatments {
		position: relative;
	}

	/* 2. Your existing mega-menu styles */
	.mega-menu {
		position: absolute;
		top: 100%;
		/* Sits at the bottom of the trigger */
		margin-top: 20px;
		/* This is the gap causing the issue */
		left: 50%;
		transform: translateX(-50%);
		/* margin-top: .5rem; */
		background: hsl(var(--secondary));
		border: 1px solid hsl(var(--primary) / 0.2);
		padding: 1.5rem 2rem;
		min-width: 460px;
		display: none;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
		box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
	}

	/* 3. THE FIX: The "Invisible Bridge" */
	.mega-menu::before {
		content: "";
		position: absolute;
		top: -20px;
		/* Match your margin-top value exactly */
		left: 0;
		width: 100%;
		height: 20px;
		/* Match your margin-top value exactly */
		background: transparent;
		display: block;
	}

	/* .mega-menu {
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			 margin-top: .5rem; 
			background: hsl(var(--secondary));
			border: 1px solid hsl(var(--primary) / 0.2);
			padding: 1.5rem 2rem;
			min-width: 460px;
			display: none;
			grid-template-columns: 1fr 1fr;
			gap: 1.5rem;
			box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
		} */

	.mega-menu.open {
		display: grid;
	}

	.mega-menu .col-title {
		font-family: 'Raleway', sans-serif;
		font-size: 10px;
		letter-spacing: .3em;
		text-transform: uppercase;
		color: hsl(var(--primary));
		margin-bottom: .75rem;
		display: block;
	}

	.mega-menu a {
		display: block;
		padding: .375rem 0;
		font-size: .875rem;
		color: hsl(var(--ivory) / .7);
	}

	.mega-menu a:hover {
		color: hsl(var(--primary));
	}

	.nav-treatments {
		position: relative;
	}

	.book-btn {
		background: hsl(var(--primary));
		color: hsl(var(--primary-foreground));
		padding: .625rem 1.5rem;
		font-size: .875rem;
		letter-spacing: .025em;
		transition: background .2s;
	}

	.book-btn:hover {
		background: hsl(var(--gold-glow));
	}

	.mobile-menu {
		display: none;
		background: hsl(var(--secondary));
		border-top: 1px solid hsl(var(--primary) / 0.1);
		padding: 1.5rem;
	}

	.mobile-menu.open {
		display: block;
	}

	.mobile-menu a {
		display: block;
		padding: .5rem 0;
		font-size: .875rem;
		color: hsl(var(--ivory) / .8);
	}

	.mobile-menu .book-btn {
		display: block;
		text-align: center;
		margin-top: 1rem;
		padding: .75rem;
	}

	/* ====== HERO ====== */
	.hero {
		position: relative;
		min-height: 100vh;
		background: hsl(var(--secondary));
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.hero-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 3rem;
		align-items: center;
		padding-top: 6rem;
		padding-bottom: 8rem;
	}

	@media(min-width:1024px) {
		.hero-grid {
			grid-template-columns: 1fr 1fr;
		}
	}

	.hero h1 {
		font-size: 3rem;
		color: hsl(var(--ivory));
		line-height: 1.05;
		margin-bottom: 1.5rem;
	}

	@media(min-width:768px) {
		.hero h1 {
			font-size: 4.5rem;
		}
	}

	.hero p.lede {
		font-size: 1rem;
		color: hsl(var(--stone));
		max-width: 32rem;
		margin-bottom: 2.5rem;
		line-height: 1.6;
	}

	.hero-cta {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	@media(min-width:640px) {
		.hero-cta {
			flex-direction: row;
		}
	}

	.hero-image-wrap {
		position: relative;
	}

	.hero-image-wrap img {
		width: 100%;
		height: 500px;
		object-fit: cover;
	}

	@media(min-width:1024px) {
		.hero-image-wrap img {
			height: 600px;
		}
	}

	.hero-image-wrap .grad {
		position: absolute;
		inset: 0;
		background: linear-gradient(to left, transparent, hsl(var(--secondary) / .3));
	}

	.marquee {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: hsl(var(--primary) / .1);
		border-top: 1px solid hsl(var(--primary) / .2);
		padding: .75rem 0;
		overflow: hidden;
	}

	.marquee .track {
		display: flex;
		white-space: nowrap;
	}

	.marquee span {
		font-size: .875rem;
		letter-spacing: .05em;
		color: hsl(var(--primary));
	}

	/* ====== SOCIAL PROOF ====== */
	.proof {
		/* background: hsl(var(--secondary)); */
		padding: 2rem 0;
		border-top: 1px solid hsl(var(--primary) / .1);
		border-bottom: 1px solid hsl(var(--primary) / .1);
	}

	.proof-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 2rem;
	}

	@media(min-width:768px) {
		.proof-row {
			gap: 0;
		}

		.proof-row>div+div {
			border-left: 1px solid hsl(var(--primary) / .3);
		}
	}

	.proof-item {
		text-align: center;
		padding: 0 2rem;
	}

	@media(min-width:768px) {
		.proof-item {
			padding: 0 3rem;
		}
	}

	.proof-item .num {
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.5rem;
		font-style: italic;
		color: hsl(var(--primary));
		display: block;
	}

	@media(min-width:768px) {
		.proof-item .num {
			font-size: 1.875rem;
		}
	}

	.proof-item .lbl {
		display: block;
		font-size: .75rem;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: hsl(var(--stone));
		margin-top: .25rem;
	}

	/* ====== SECTION HEADERS ====== */
	.section-head {
		text-align: center;
		margin-bottom: 4rem;
	}

	.section-head h2 {
		font-size: 2.25rem;
		color: hsl(var(--foreground));
		margin-bottom: 1rem;
	}

	@media(min-width:768px) {
		.section-head h2 {
			font-size: 3rem;
		}
	}

	.section-head p {
		font-size: 1rem;
		color: hsl(var(--muted-foreground));
		max-width: 42rem;
		margin: 0 auto;
	}

	.eyebrow {
		display: block;
		font-size: .75rem;
		letter-spacing: .4em;
		text-transform: uppercase;
		color: hsl(var(--primary));
		margin-bottom: 1rem;
	}

	/* ====== TREATMENT PILLARS ====== */
	.pillars-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
		max-width: 64rem;
		margin: 0 auto;
	}

	@media(min-width:768px) {
		.pillars-grid {
			grid-template-columns: 1fr 1fr;
		}
	}

	.pillar {
		position: relative;
		background: hsl(var(--secondary));
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transition: box-shadow .3s;
		height: 100%;
	}

	.pillar:hover {
		box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
	}

	.pillar-img {
		width: 100%;
		height: 12rem;
		background: hsl(var(--charcoal) / .3);
		overflow: hidden;
	}

	.pillar-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .5s;
	}

	.pillar:hover .pillar-img img {
		transform: scale(1.05);
	}

	.pillar-body {
		padding: 2rem;
		display: flex;
		flex-direction: column;
		flex: 1;
		position: relative;
	}

	.pillar-body .icon {
		width: 2rem;
		height: 2rem;
		color: hsl(var(--primary));
		margin-bottom: 1rem;
	}

	.pillar-body h3 {
		font-size: 1.5rem;
		color: hsl(var(--ivory));
		margin-bottom: .5rem;
	}

	.pillar-body p {
		font-size: .875rem;
		color: hsl(var(--stone));
		line-height: 1.6;
		flex: 1;
		margin-bottom: 1rem;
	}

	.pillar-body .more {
		font-size: .875rem;
		color: hsl(var(--primary));
		letter-spacing: .025em;
	}

	/* ====== PEPTIDES ====== */
	.peptides {
		background: hsl(var(--secondary));
		position: relative;
		overflow: hidden;
	}

	.peptides h2 {
		font-size: 2.25rem;
		color: hsl(var(--ivory));
		line-height: 1.05;
		margin-bottom: 1.5rem;
	}

	@media(min-width:768px) {
		.peptides h2 {
			font-size: 3.75rem;
		}
	}

	.peptides .intro p {
		font-size: 1rem;
		color: hsl(var(--stone));
		line-height: 1.7;
		max-width: 42rem;
		margin-bottom: 3rem;
	}

	.peptide-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-bottom: 3rem;
	}

	@media(min-width:768px) {
		.peptide-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.peptide-card {
		border: 1px solid hsl(var(--primary) / .2);
		padding: 1.5rem;
		transition: all .25s;
		display: block;
	}

	.peptide-card:hover {
		border-color: hsl(var(--primary) / .5);
		background: hsl(var(--primary) / .05);
	}

	.peptide-card h3 {
		font-size: 1.25rem;
		color: hsl(var(--ivory));
		margin-bottom: .5rem;
		transition: color .2s;
	}

	.peptide-card:hover h3 {
		color: hsl(var(--primary));
	}

	.peptide-card p {
		font-size: .875rem;
		color: hsl(var(--stone));
		line-height: 1.6;
	}

	/* ====== GLP-1 FLOW ====== */
	.glp1-hero {
		position: relative;
		width: 100%;
		height: 16rem;
		overflow: hidden;
		margin-bottom: 4rem;
	}

	@media(min-width:768px) {
		.glp1-hero {
			height: 420px;
		}
	}

	.glp1-hero img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.glp1-hero .overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, hsl(var(--background)), hsl(var(--background) / .6), transparent);
	}

	.glp1-hero .text {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		padding: 0 2rem;
	}

	@media(min-width:768px) {
		.glp1-hero .text {
			padding: 0 4rem;
		}
	}

	.glp1-hero .text>div {
		max-width: 32rem;
	}

	.glp1-hero h2 {
		font-size: 1.875rem;
		color: hsl(var(--foreground));
		margin-bottom: 1rem;
		line-height: 1.1;
	}

	@media(min-width:768px) {
		.glp1-hero h2 {
			font-size: 3rem;
		}
	}

	.glp1-team {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
		max-width: 64rem;
		margin: 0 auto 5rem;
	}

	@media(min-width:768px) {
		.glp1-team {
			grid-template-columns: 1fr 1fr;
		}
	}

	.team-card {
		display: flex;
		gap: 1.5rem;
		align-items: flex-start;
	}

	.team-card .avatar {
		width: 7rem;
		height: 7rem;
		flex-shrink: 0;
		overflow: hidden;
	}

	@media(min-width:768px) {
		.team-card .avatar {
			width: 9rem;
			height: 9rem;
		}
	}

	.team-card .avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.team-card h3 {
		font-size: 1.5rem;
		color: hsl(var(--foreground));
		margin-bottom: .25rem;
	}

	.team-card .role {
		font-size: .75rem;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: hsl(var(--primary));
		display: block;
		margin-bottom: .75rem;
	}

	.team-card p {
		font-size: .875rem;
		color: hsl(var(--muted-foreground));
		line-height: 1.6;
	}

	.steps-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	@media(min-width:768px) {
		.steps-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media(min-width:1024px) {
		.steps-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.step {
		background: hsl(var(--secondary));
		padding: 2rem;
		position: relative;
		transition: box-shadow .3s;
	}

	.step:hover {
		box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
	}

	.step .num {
		font-family: 'Cormorant Garamond', serif;
		font-size: 3rem;
		color: hsl(var(--primary) / .2);
		position: absolute;
		top: 1rem;
		right: 1.5rem;
	}

	.step .icon {
		width: 2rem;
		height: 2rem;
		color: hsl(var(--primary));
		margin-bottom: 1.25rem;
	}

	.step h4 {
		font-size: 1.25rem;
		color: hsl(var(--ivory));
		margin-bottom: .5rem;
	}

	.step p {
		font-size: .875rem;
		color: hsl(var(--stone));
		line-height: 1.6;
	}

	/* ====== AUTHENTIC DIFFERENCE ====== */
	.diff-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 3rem;
		max-width: 64rem;
		margin: 0 auto;
	}

	@media(min-width:768px) {
		.diff-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.diff-col {
		text-align: center;
	}

	.diff-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3.5rem;
		height: 3.5rem;
		border: 1px solid hsl(var(--primary) / .3);
		border-radius: 9999px;
		margin-bottom: 1.5rem;
		color: hsl(var(--primary));
	}

	.diff-col h3 {
		font-size: 1.5rem;
		color: hsl(var(--foreground));
		margin-bottom: .75rem;
	}

	.diff-col p {
		font-size: .875rem;
		color: hsl(var(--muted-foreground));
		line-height: 1.6;
	}

	/* ====== TESTIMONIALS ====== */
	.testi {
		/* background: hsl(var(--secondary)); */
	}

	.testi-inner {
		text-align: center;
		max-width: 48rem;
		margin: 0 auto;
	}

	.testi .quote-icon {
		width: 2.5rem;
		height: 2.5rem;
		color: hsl(var(--primary));
		margin: 0 auto 2rem;
	}

	.testi .slot {
		min-height: 200px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.testi .slot p {
		font-family: 'Cormorant Garamond', serif;
		font-style: italic;
		font-size: 1.5rem;
		color: hsl(var(--ivory));
		line-height: 1.5;
		margin-bottom: 2rem;
		transition: opacity .5s;
	}

	@media(min-width:768px) {
		.testi .slot p {
			font-size: 1.875rem;
		}
	}

	.testi .name {
		font-size: .875rem;
		color: hsl(var(--primary));
		letter-spacing: .05em;
		text-transform: uppercase;
	}

	.dots {
		display: flex;
		gap: .5rem;
		justify-content: center;
		margin-top: 2rem;
	}

	.dots button {
		width: 2rem;
		height: 2px;
		background: hsl(var(--primary) / .2);
		transition: background .25s;
	}

	.dots button.active {
		background: hsl(var(--primary));
	}

	/* ====== BEFORE / AFTER ====== */
	.results-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
		max-width: 80rem;
		margin: 0 auto;
	}

	@media(min-width:768px) {
		.results-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.result-card h3 {
		font-size: 1.25rem;
		color: hsl(var(--foreground));
		margin-bottom: .25rem;
		margin-top: 1rem;
	}

	.result-card .treat {
		font-size: .75rem;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: hsl(var(--primary));
	}

	.ba-slider {
		position: relative;
		width: 100%;
		aspect-ratio: 4/5;
		cursor: col-resize;
		user-select: none;
		touch-action: none;
		overflow: hidden;
	}

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

	.ba-slider .before-mask {
		position: absolute;
		inset: 0;
		overflow: hidden;
		width: 50%;
	}

	.ba-slider .before-mask img {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: auto;
		min-width: 100%;
		max-width: none;
	}

	.ba-handle {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 2px;
		background: hsl(var(--primary));
		left: 50%;
		z-index: 10;
	}

	.ba-handle .knob {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		background: hsl(var(--primary));
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
		color: hsl(var(--primary-foreground));
		font-size: 10px;
		font-weight: bold;
		letter-spacing: .05em;
	}

	.ba-tag {
		position: absolute;
		top: .75rem;
		font-size: 10px;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: hsl(var(--foreground));
		background: hsl(var(--secondary) / .8);
		padding: .25rem .5rem;
		z-index: 20;
	}

	.ba-tag.before {
		left: .75rem;
	}

	.ba-tag.after {
		right: .75rem;
	}

	/* ====== SHOP TEASER ====== */
	.shop-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	@media(min-width:640px) {
		.shop-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media(min-width:1024px) {
		.shop-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.product {
		position: relative;
		background: hsl(var(--secondary));
		padding: 1.5rem;
		display: flex;
		flex-direction: column;
		transition: box-shadow .3s;
	}

	.product:hover {
		box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
	}

	.product .thumb {
		width: 100%;
		height: 12rem;
		background: hsl(var(--charcoal) / .5);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1.5rem;
		overflow: hidden;
	}

	.product .thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.product h3 {
		font-size: 1.125rem;
		color: hsl(var(--ivory));
		margin-bottom: .25rem;
	}

	.product .desc {
		font-size: .75rem;
		color: hsl(var(--stone));
		margin-bottom: .75rem;
		flex: 1;
	}

	.product .price {
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.25rem;
		color: hsl(var(--primary));
		margin-bottom: 1rem;
	}

	.product .add {
		width: 100%;
		padding: .625rem;
		background: hsl(var(--primary));
		color: hsl(var(--primary-foreground));
		font-size: .75rem;
		letter-spacing: .025em;
		transition: background .2s;
	}

	.product .add:hover {
		background: hsl(var(--gold-glow));
	}

	/* ====== FOUNDER STORY ====== */
	.founder {
		background: hsl(var(--secondary));
	}

	.founder-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 3.5rem;
		align-items: center;
	}

	@media(min-width:1024px) {
		.founder-grid {
			grid-template-columns: 1fr;
		}
	}

	.founder p {
		font-size: 1rem;
		color: hsl(var(--stone));
		line-height: 1.7;
		margin-bottom: 1.5rem;
	}

	.founder .quote {
		font-style: italic;
		border-left: 2px solid hsl(var(--primary));
		padding-left: 1.25rem;
	}

	.values {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}

	.value {
		border: 1px solid hsl(var(--primary) / .15);
		padding: 1.5rem;
		text-align: center;
		min-height: 160px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: border-color .25s;
	}

	.value:hover {
		border-color: hsl(var(--primary) / .4);
	}

	.value .icon {
		width: 1.5rem;
		height: 1.5rem;
		color: hsl(var(--primary));
		margin-bottom: .75rem;
	}

	.value h4 {
		font-size: 1.125rem;
		color: hsl(var(--ivory));
		margin-bottom: .25rem;
	}

	.value p {
		font-size: .75rem;
		color: hsl(var(--stone));
		line-height: 1.5;
		margin: 0;
	}

	/* ====== FIND US ====== */
	.find-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2.5rem;
		align-items: flex-start;
	}

	@media(min-width:1024px) {
		.find-grid {
			grid-template-columns: 1fr 1fr;
		}
	}

	.loc-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	@media(min-width:640px) {
		.loc-grid {
			grid-template-columns: 1fr 1fr;
		}
	}

	.loc {
		position: relative;
		text-align: left;
		padding: 1.5rem;
		border: 1px solid hsl(var(--border));
		transition: all .3s;
		min-height: 180px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: transparent;
	}

	.loc:hover {
		border-color: hsl(var(--primary) / .4);
	}

	.loc.active {
		border-color: hsl(var(--primary));
		background: hsl(var(--primary) / .05);
		box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
	}

	.loc .flag {
		position: absolute;
		top: .75rem;
		right: .75rem;
		font-size: 10px;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: hsl(var(--primary));
	}

	.loc .pin {
		width: 1.25rem;
		height: 1.25rem;
		color: hsl(var(--muted-foreground));
		margin-bottom: .75rem;
		transition: color .2s;
	}

	.loc.active .pin,
	.loc:hover .pin {
		color: hsl(var(--primary));
	}

	.loc h3 {
		font-size: 1.25rem;
		color: hsl(var(--foreground));
		margin-bottom: .25rem;
	}

	.loc .addr {
		font-size: .875rem;
		color: hsl(var(--muted-foreground));
		line-height: 1.5;
	}

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

	.loc-actions a {
		display: inline-flex;
		align-items: center;
		gap: .375rem;
		font-size: .875rem;
		color: hsl(var(--primary));
	}

	.loc-actions a.dir {
		font-size: .75rem;
		letter-spacing: .025em;
		text-transform: uppercase;
	}

	.map-wrap {
		width: 100%;
		aspect-ratio: 4/3;
		min-height: 400px;
		border: 1px solid hsl(var(--border));
		overflow: hidden;
	}

	@media(min-width:1024px) {
		.map-wrap {
			aspect-ratio: auto;
			height: 100%;
		}
	}

	.map-wrap iframe {
		width: 100%;
		height: 100%;
		min-height: 400px;
		border: 0;
	}

	/* ====== CONTACT FORM ====== */
	.contact-wrap {
		max-width: 42rem;
		margin: 0 auto;
	}

	.contact-form {
		background: hsl(var(--secondary));
		padding: 2rem;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.policy-text {
		font-size: .75rem;
		color: hsl(var(--stone));
		line-height: 1.5;
	}

	.contact-form fieldset {
		margin-top: 1rem;
	}

	.address-pair {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}

	@media (max-width: 639px) {
		.address-pair {
			grid-template-columns: 1fr;
		}
	}

	.contact-form fieldset legend {
		margin-bottom: 1rem;
		font-size: 1.125rem;
		color: hsl(var(--ivory));
		font-weight: bold;
	}

	.form-row {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	@media(min-width:640px) {
		.form-row {
			grid-template-columns: 1fr 1fr;
		}
	}

	.form-field label {
		display: block;
		font-size: .875rem;
		color: hsl(var(--ivory));
		margin-bottom: .5rem;
	}

	.form-field.checkbox-group {
		display: flex;
		align-items: center;
		gap: .625rem;
	}

	.form-field.checkbox-group label {
		display: inline;
		margin-bottom: 0;
	}

	.form-field.checkbox-group input[type="checkbox"] {
		width: auto;
		flex-shrink: 0;
	}

	.form-field input,
	.form-field textarea {
		width: 100%;
		background: hsl(var(--charcoal) / .5);
		border: 1px solid hsl(var(--primary) / .2);
		color: hsl(var(--ivory));
		font-size: .875rem;
		padding: .75rem 1rem;
		transition: border-color .2s;
	}

	.form-field input:focus,
	.form-field textarea:focus {
		outline: none;
		border-color: hsl(var(--primary));
	}

	.form-field textarea {
		min-height: 120px;
		resize: vertical;
	}

	.submit-btn {
		width: 100%;
		padding: .875rem;
		background: hsl(var(--primary));
		color: hsl(var(--primary-foreground));
		font-size: .875rem;
		letter-spacing: .025em;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		transition: background .2s;
	}

	.submit-btn:hover {
		background: hsl(var(--gold-glow));
	}

	/* ====== NEWSLETTER ====== */
	.newsletter {
		/* background: hsl(var(--secondary)); */
		padding: 4rem 0;
	}

	.newsletter-inner {
		max-width: 36rem;
		margin: 0 auto;
		text-align: center;
	}

	.newsletter .mail-icon {
		width: 2rem;
		height: 2rem;
		color: hsl(var(--primary));
		margin: 0 auto 1rem;
	}

	.newsletter h3 {
		font-size: 1.5rem;
		color: hsl(var(--ivory));
		margin-bottom: .5rem;
	}

	.newsletter p {
		font-size: .875rem;
		color: hsl(var(--stone));
		margin-bottom: 1.5rem;
	}

	.newsletter form {
		display: flex;
		gap: .5rem;
	}

	.newsletter input {
		flex: 1;
		padding: .75rem 1rem;
		background: hsl(var(--background) / .1);
		border: 1px solid hsl(var(--primary) / .3);
		color: hsl(var(--ivory));
		font-size: .875rem;
	}

	.newsletter input::placeholder {
		color: hsl(var(--stone));
	}

	.newsletter input:focus {
		outline: none;
		border-color: hsl(var(--primary));
	}

	.newsletter button {
		padding: .75rem 1.5rem;
		background: hsl(var(--primary));
		color: hsl(var(--primary-foreground));
		font-size: .875rem;
		letter-spacing: .025em;
		transition: background .2s;
	}

	.newsletter button:hover {
		background: hsl(var(--gold-glow));
	}

	/* ====== FOOTER ====== */
	footer {
		background: hsl(var(--secondary));
		color: hsl(var(--secondary-foreground));
	}

	.cta-banner {
		position: relative;
		text-align: center;
	}

	.cta-banner h2 {
		font-size: 2.25rem;
		color: hsl(var(--ivory));
		margin-bottom: 1rem;
	}

	@media(min-width:768px) {
		.cta-banner h2 {
			font-size: 3rem;
		}
	}

	.cta-banner p {
		font-size: 1.125rem;
		color: hsl(var(--stone));
		margin-bottom: 2rem;
	}

	.cta-row {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		justify-content: center;
	}

	@media(min-width:640px) {
		.cta-row {
			flex-direction: row;
		}
	}

	.foot-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 3rem;
		padding: 4rem 0;
		border-top: 1px solid hsl(var(--primary) / .1);
	}

	@media(min-width:768px) {
		.foot-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.foot-col h3,
	.foot-col h4 {
		color: hsl(var(--ivory));
		margin-bottom: 1rem;
	}

	.foot-col h3 {
		font-size: 1.5rem;
		margin-bottom: .5rem;
	}

	.foot-col h4 {
		font-size: 1.125rem;
	}

	.foot-col a {
		display: block;
		font-size: .875rem;
		color: hsl(var(--stone));
		margin-bottom: .5rem;
		transition: color .2s;
	}

	.foot-col a:hover {
		color: hsl(var(--primary));
	}

	.foot-tag {
		font-size: .75rem;
		letter-spacing: .3em;
		text-transform: uppercase;
		color: hsl(var(--stone));
	}

	.socials {
		display: flex;
		gap: 1rem;
		margin-top: 1.5rem;
	}

	.socials a {
		color: hsl(var(--stone));
		margin: 0;
	}

	.socials a:hover {
		color: hsl(var(--primary));
	}

	.visit-line {
		display: flex;
		align-items: flex-start;
		gap: .5rem;
		font-size: .875rem;
		color: hsl(var(--stone));
		margin-bottom: .75rem;
	}

	.visit-line svg {
		color: hsl(var(--primary));
		flex-shrink: 0;
		margin-top: 2px;
	}

	.bottom-bar {
		border-top: 1px solid hsl(var(--primary) / .1);
		padding: 1.5rem 0;
	}

	.bottom-bar .row {
		display: flex;
		flex-direction: column;
		sm: flex-row;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		font-size: .75rem;
		color: hsl(var(--stone));
	}

	@media(min-width:640px) {
		.bottom-bar .row {
			flex-direction: row;
		}
	}

	.bottom-bar .links {
		display: flex;
		gap: 1.5rem;
	}

	.mobile-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: hsl(var(--secondary));
		border-top: 1px solid hsl(var(--primary) / .2);
		display: flex;
		z-index: 50;
	}

	@media(min-width:1024px) {
		.mobile-bar {
			display: none;
		}
	}

	.mobile-bar a {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		padding: .75rem;
		font-size: .875rem;
	}

	.mobile-bar a:first-child {
		color: hsl(var(--primary));
		border-right: 1px solid hsl(var(--primary) / .2);
	}

	.mobile-bar a:last-child {
		background: hsl(var(--primary));
		color: hsl(var(--primary-foreground));
	}

	/* WhatsApp button */
	.whatsapp {
		position: fixed;
		bottom: 72px;
		right: 1.5rem;
		z-index: 40;
		background: #25D366;
		color: #fff;
		padding: 1rem;
		border-radius: 50%;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
		transition: transform .2s;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.whatsapp:hover {
		transform: scale(1.1);
	}

	@media(min-width:1024px) {
		.whatsapp {
			bottom: 1.5rem;
		}
	}

	.grecaptcha-badge {
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	.text-ivory\/60 {
		color: hsl(var(--ivory) / .6)
	}

	.px-6 {
		padding-left: 1.5rem;
		padding-right: 1.5rem
	}

	.container {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding-right: 2rem;
		padding-left: 2rem
	}

	.mx-auto {
		margin-left: auto;
		margin-right: auto
	}


	.table_styled {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 2rem;
	}

	.table_styled th,
	.table_styled td {
		border: 1px solid hsl(var(--border));
		padding: 1rem;
		text-align: left;
	}

	.table_styled th {
		background: hsl(var(--secondary));
		color: hsl(var(--ivory));
	}

	.table_styled tbody tr:hover {
		background: hsl(var(--secondary) / .5);
	}

	.loading_spinner {
		width: 48px;
		height: 48px;
		border: 5px solid #FFF;
		border-bottom-color: transparent;
		border-radius: 50%;
		display: inline-block;
		box-sizing: border-box;
		animation: rotation 1s linear infinite;
	}

	@keyframes rotation {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.form-select {
		color: black;
		background: white;
		border: 1px solid hsl(var(--primary) / .2);
		padding: .75rem 1rem;
	}

	.highlight_error_field {
		border-color: red !important;
	}

	input[type="checkbox"].highlight_error_field {
		outline: 2px solid red;
		outline-offset: 2px;
		box-shadow: 0 0 0 2px rgb(255 0 0 / 0.2);
	}

	input[type="checkbox"].highlight_error_field+label {
		color: #ff6b6b;
	}

	.div_main_alert {
		position: fixed;
		top: 1rem;
		left: 50%;
		transform: translateX(-50%);
		background: red;
		color: white;
		padding: 1rem 2rem;
		border-radius: 4px;
		z-index: 1000;
		box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
	}