/* ==========================================================================
   Lumoni Spa & Wellness — main stylesheet
   ========================================================================== */

:root {
	/* Color — high-contrast bone / ink with a muted ochre accent (Kin-style).
	   Names kept from the previous palette so every existing rule re-skins. */
	--c-cream:        #E9E4DA;  /* page background — warm bone            */
	--c-cream-2:      #E2DBCE;  /* slightly deeper bone                   */
	--c-card:         #F2EEE7;  /* lightest surface                       */
	--c-green:        #17160F;  /* was the olive accent → now ink (buttons)*/
	--c-green-dark:   #0F0E09;  /* deepest ink                            */
	--c-green-deep:   #1A1912;  /* dark section background (CTA / footer)  */
	--c-gold:         #A9803B;  /* muted ochre accent                     */
	--c-gold-soft:    #C89C50;  /* lighter ochre (on dark)                */
	--c-text:         #17160F;  /* primary ink text                       */
	--c-text-light:   rgba(23,22,15,0.58); /* secondary ink               */
	--c-cream-text:   #F0EBE1;  /* light text on ink                      */
	--c-cream-text-soft: rgba(240,235,225,0.64);
	--c-line:         rgba(23,22,15,0.16);

	/* Type — one grotesque family, display + body (Kin uses a single face). */
	--font-serif: 'Archivo', 'Helvetica Neue', Arial, sans-serif; /* display */
	--font-sans:  'Archivo', 'Helvetica Neue', Arial, sans-serif; /* body    */
	--font-hand:  'Sacramento', cursive; /* handwritten accent — eyebrows + emphasized heading words */

	/* Layout */
	--container: 1360px;
	--header-h: 104px;

	/* ---- Design system tokens (brief: one reusable system, no component
	   invents its own style). Every spacing, radius, shadow, easing and
	   overlay value below is referenced by name from here on — a component
	   hard-coding its own numbers is a bug, not a style choice. ---- */

	/* Spacing scale — a 4px base, so vertical rhythm stays consistent
	   across every section instead of each one picking its own padding. */
	--s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
	--s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
	--s-9: 6rem;     --s-10: 8rem;

	/* Section rhythm — the single source of truth for how much air sits
	   between major page sections. */
	--section-pad-y: clamp(4rem, 9vw, 8rem);
	--section-pad-x: clamp(1.25rem, 4vw, 3rem);

	/* Radii */
	--r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-pill: 100px;

	/* Elevation — a deliberate 3-step ramp rather than ad-hoc shadows. */
	--shadow-1: 0 2px 10px rgba(15,14,9,0.06);
	--shadow-2: 0 14px 36px -12px rgba(15,14,9,0.22);
	--shadow-3: 0 34px 70px -22px rgba(15,14,9,0.38);

	/* Motion — shared easings and durations so every transition on the site
	   feels like it came from the same hand. */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 0.25s;  --dur-mid: 0.45s;  --dur-slow: 0.8s;

	/* Image overlays — the gradient language for full-image cards and heroes.
	   Photography is the product, so overlays exist to make type legible on
	   top of it, never to hide it. */
	--overlay-card: linear-gradient(to top, rgba(15,14,9,0.88) 0%, rgba(15,14,9,0.45) 42%, rgba(15,14,9,0.05) 78%);
	--overlay-card-hover: linear-gradient(to top, rgba(15,14,9,0.94) 0%, rgba(15,14,9,0.58) 48%, rgba(15,14,9,0.15) 85%);
	--overlay-hero: linear-gradient(to top, rgba(15,14,9,0.82) 0%, rgba(15,14,9,0.30) 55%, rgba(15,14,9,0.18) 100%);

	/* Glass / frosted surfaces.
	   Originally restricted to nav + badges, now the site-wide treatment for
	   every light surface once a background video/image is set: the footage
	   must stay visible THROUGH the UI rather than being covered by slabs of
	   opaque cream. Three depths so a full-screen overlay and a small chip
	   don't get identical blur. */
	--glass-bg: rgba(233,228,218,0.52);
	--glass-bg-strong: rgba(233,228,218,0.68);  /* small chips, form fields */
	--glass-bg-soft: rgba(233,228,218,0.34);    /* large panels / sections  */
	--glass-border: rgba(255,255,255,0.35);
	--glass-blur: 18px;
	--glass-blur-lg: 26px;
	--glass-shadow: 0 8px 30px rgba(15,14,9,0.12);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--c-text);
	background: var(--c-cream); /* fallback when no bg video is set in the Customizer */
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
body.has-bg-video {
	/* An opaque body background paints over a fixed, z-index:-1 element,
	   so it must be transparent whenever the video wrap is present. */
	background: transparent;
}

/* ---------- Fixed background video (covers hero through footer) ----------
   Lazy-loaded: video has no src until JS attaches it (skipped entirely for
   prefers-reduced-motion / Save-Data users). Poster shows immediately;
   video crossfades in once .is-ready is added by JS, on "playing"/"canplay". */
.site-bg-video-wrap {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--c-green-dark);
	/* `position: fixed` + a negative z-index is, on its own, unreliable on
	   mobile Safari/Chrome: without its own compositing layer the element
	   can get flattened out and end up invisible behind the page's base
	   background instead of behind the content, which is why the video
	   (and even its poster) was never showing up on phones. Forcing a
	   dedicated GPU layer here fixes that on mobile without changing
	   anything about how it paints on desktop. */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
}
.site-bg-video,
.site-bg-video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* intentionally no filter/blur here — the video stays sharp */
}
/* Own compositing layer on the <video> itself too, not just the wrapper —
   ported from a mobile fix in another theme's video background: without
   this, frame updates can force CPU-side repaints of the surrounding DOM
   on weaker mobile GPUs, which is what caused stuttering/freezing there.
   The wrapper's own translateZ(0) (above) isn't a substitute for this;
   they promote two different layers. */
.site-bg-video { transform: translateZ(0); -webkit-transform: translateZ(0); z-index: 0; opacity: 0; transition: opacity 0.4s ease; }
.site-bg-video-poster { z-index: 1; opacity: 1; transition: opacity 0.4s ease; }
.site-bg-video-wrap.is-ready .site-bg-video { opacity: 1; }
.site-bg-video-wrap.is-ready .site-bg-video-poster { opacity: 0; }
.site-bg-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.site-bg-overlay--none   { background: transparent; }
.site-bg-overlay--light  { background: rgba(20,22,14,0.18); }
.site-bg-overlay--medium { background: rgba(20,22,14,0.34); }
.site-bg-overlay--dark   { background: rgba(20,22,14,0.5); }

/* The video plays at all screen sizes, including mobile. This class
   (name kept for back-compat) applies when the visitor has
   prefers-reduced-motion OR Data Saver (navigator.connection.saveData)
   enabled — JS skips the video entirely in either case and the poster
   stays up as a still frame. */
.site-bg-video-wrap.is-mobile .site-bg-video { opacity: 0; }
.site-bg-video-wrap.is-mobile .site-bg-video-poster { opacity: 1; }


/* ---------- Glass utility ----------
   Translucent bone-tinted panel + hairline border + real backdrop blur.
   The blur was deliberately omitted in the first build so footage read
   through cleanly; it's back now because "translucent but unblurred" makes
   busy video fight the text sitting on top of it. Frosting keeps the
   background legible AS BACKGROUND — you can still see it moving, but it
   stops competing with the copy. Alpha stays high enough for dark ink to
   pass contrast over any frame. */
.glass {
	position: relative;
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	border: 1px solid rgba(255,255,255,0.28);
	box-shadow: var(--glass-shadow);
}
.glass--dark {
	background: rgba(15,14,9,0.42);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
	backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
	border: 1px solid rgba(240,235,225,0.16);
	box-shadow: 0 8px 30px rgba(15,14,9,0.18);
	color: var(--c-cream-text);
}

/* Safari/iOS and any engine without backdrop-filter would render the rules
   above as near-transparent panels with unreadable text over the video.
   Fall back to a much more opaque surface there — less pretty, still
   legible, which is the correct trade. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass { background: rgba(233,228,218,0.90); }
	.glass--dark { background: rgba(15,14,9,0.86); }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 600;
	letter-spacing: -0.018em;
	margin: 0;
	color: var(--c-text);
}
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

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

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

.icon { width: 1em; height: 1em; }

/* ---------- Shared bits ---------- */
.eyebrow {
	font-family: var(--font-hand);
	font-size: clamp(1.9rem, 2.4vw, 2.3rem); /* bumped from a flat 1.7rem — Sacramento's thin cursive strokes read noticeably smaller than the number suggests */
	font-weight: 400;
	letter-spacing: 0.015em;
	text-transform: none;
	color: var(--c-gold);
	margin: 0 0 0.4rem;
	position: relative;
	padding-top: 0.9rem;
	line-height: 1;
}
.eyebrow::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 32px;
	height: 1px;
	background: var(--c-gold);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 1.05rem 2.3rem;
	border-radius: 100px;
	border: 1px solid var(--c-gold-soft);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	white-space: nowrap;
	position: relative;
	box-shadow: 0 0 0 1px rgba(169,128,59,0.25), 0 0 8px 1px rgba(200,156,80,0.3);
}
.btn:hover {
	border-color: var(--c-gold);
	box-shadow: 0 0 0 1px rgba(169,128,59,0.45), 0 0 12px 1px rgba(200,156,80,0.45);
}
.btn--dark { background: var(--c-green); color: var(--c-cream-text); }
.btn--dark:hover { background: var(--c-gold); color: var(--c-green-dark); }
.btn--gold { background: var(--c-gold); color: var(--c-green-dark); }
.btn--gold:hover { background: var(--c-cream-text); color: var(--c-green-dark); }
.btn--outline-light { background: transparent; color: var(--c-cream-text); border: 1px solid var(--c-gold-soft); }
.btn--outline-light:hover { background: rgba(240,235,225,0.14); border-color: var(--c-gold); }

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--font-sans);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text);
	border-bottom: 1px solid var(--c-line);
	padding-bottom: 0.35em;
	transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}
.text-link:hover { color: var(--c-gold); border-color: var(--c-gold); gap: 0.8em; }
.text-link--sm { font-size: 0.68rem; }
.text-link .icon--arrow { width: 1.15em; height: 0.7em; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	height: var(--header-h);
	background: var(--c-cream);
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: 1px solid var(--c-line);
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Transparent-over-video header, applied before scrolling, on any page
   that has a background video set. Pages with no video keep the header
   solid from first paint — no reliance on JS timing, no flash/race. */
body.has-bg-video .site-header:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}
.site-header__inner {
	max-width: var(--container);
	margin: 0 auto;
	height: 100%;
	padding: 0 3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.brandmark { display: flex; flex-direction: column; align-items: flex-start; }
.brandmark__name {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 1.45rem;
	letter-spacing: 0.005em;
	color: var(--c-text);
}
.brandmark__o { color: var(--c-gold); }
.brandmark__sub {
	font-family: var(--font-sans);
	font-size: 0.6rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--c-text-light);
	margin-top: 0.2rem;
}
.brandmark--footer .brandmark__name,
.brandmark--footer .brandmark__sub { color: var(--c-cream-text); }
.brandmark--footer .brandmark__sub { color: var(--c-cream-text-soft); }

/* Bundled logo image (header.php fallback + WP custom_logo output) —
   height-constrained, width follows naturally so it never distorts. */
.site-header__logo img,
.brandmark--image .site-logo-img { display: block; height: 76px; width: auto; max-width: 260px; }
@media (max-width: 640px) {
	.site-header__logo img,
	.brandmark--image .site-logo-img { height: 60px; }
}

/* Nav is a hamburger-triggered dropdown at every screen size now (was
   inline-on-desktop / hamburger-under-900px before). This also removes the
   old horizontal-overflow problem entirely — there's no inline row for
   labels to wrap inside anymore, so the nowrap/white-space hack that fix
   needed is no longer load-bearing but left in place; it's harmless.

   Anchored as a contained card under the toggle (not a flat, edge-to-edge
   band) — solid --c-card rather than translucent: this is primary
   navigation, not a badge, so it gets the same confident, legible
   treatment as any other content card on the site, using the existing
   radius/shadow/spacing tokens rather than inventing new numbers. */
.site-nav {
	position: fixed;
	top: calc(var(--header-h) + var(--s-3));
	right: var(--section-pad-x);
	left: auto;
	width: min(320px, calc(100vw - 2 * var(--section-pad-x)));
	max-height: calc(100vh - var(--header-h) - var(--s-6));
	overflow-y: auto;
	background: var(--c-card);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-3);
	padding: var(--s-3) var(--s-6);
	transform-origin: top right;
	transform: translateY(-6px) scale(0.98);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nav-menu { display: flex; flex-direction: column; }
.nav-menu li { white-space: nowrap; border-bottom: 1px solid var(--c-line); }
.nav-menu li:last-child { border-bottom: none; }
.nav-menu a {
	display: block;
	padding: var(--s-4) 0;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text);
	transition: color var(--dur-fast) ease, padding-left var(--dur-fast) var(--ease-out);
}
.nav-menu a:hover { color: var(--c-gold); padding-left: var(--s-2); }
/* The dropdown always has its own solid card background, but on the home
   page the header itself (and its base link color) stays transparent/light
   until scrolled — force the dropdown's links back to ink so they're
   readable against that card, at every screen size. */
body.has-bg-video .site-header:not(.is-scrolled) .nav-menu a { color: var(--c-text); }

.site-header__actions { display: flex; align-items: center; gap: 1.4rem; }
.site-header__book { padding: 0.85rem 1.7rem; }

.nav-toggle {
	display: flex; /* always visible now, not just under the old 900px breakpoint */
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 26px;
	height: 20px;
	background: transparent;
	border: none;
	padding: 0;
}
.nav-toggle__bar { display: block; width: 100%; height: 1.5px; background: var(--c-text); transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* The toggle keeps the dark ink bar color even while its own panel is open
   and sitting on a light card — it's read against the header, not the
   panel, so it should never flip to cream/invisible while open. */
body.has-bg-video .site-header:not(.is-scrolled) .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: var(--c-cream-text); }

/* ==========================================================================
   Hero — full-bleed, big editorial type over the backdrop (no card)
   ========================================================================== */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	padding: calc(var(--header-h) + 3rem) 3rem 4.5rem;
	overflow: hidden;
}
/* Fallback backdrop for when no Customizer bg video is set yet: without this,
   the hero was just the plain cream body background + the dark scrim below,
   which made the white/cream heading, lede, and button invisible — only the
   gold eyebrow line showed. Scoped to :not(.has-bg-video) so it never paints
   over the real .site-bg-video-wrap once a video IS configured (same pattern
   already used for .page-header / .generic-page further down this file). */
body:not(.has-bg-video) .hero {
	background-image: url('../images/hero.jpg');
	background-size: cover;
	background-position: center;
}
/* Legibility scrim — a soft directional wash, not a box. */
.hero::after {
	content: "";
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(20,22,14,0.60) 0%, rgba(20,22,14,0.22) 42%, rgba(20,22,14,0) 68%),
		linear-gradient(0deg, rgba(20,22,14,0.55) 0%, rgba(20,22,14,0) 42%);
}
.hero__content { position: relative; z-index: 1; max-width: min(1150px, 100%); }
.hero .eyebrow { color: var(--c-gold-soft); }
.hero__heading {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(3.4rem, 11vw, 10rem);
	line-height: 0.92;
	letter-spacing: -0.035em;
	color: var(--c-cream-text);
	margin-bottom: 1.8rem;
	text-shadow: 0 6px 44px rgba(20,22,14,0.35);
}
.hero__heading em { font-family: var(--font-hand); font-style: normal; font-weight: 400; font-size: 1.15em; color: var(--c-gold-soft); }
.hero__lede {
	font-size: clamp(1rem, 1.35vw, 1.32rem);
	line-height: 1.55;
	color: rgba(242,238,226,0.84);
	max-width: 46ch;
	margin-bottom: 2.4rem;
}

.hero__scroll {
	position: absolute;
	left: 3rem;
	bottom: 2.6rem;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	color: var(--c-cream-text);
	text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.hero__scroll-line { width: 1px; height: 42px; background: currentColor; opacity: 0.6; }
.hero__scroll-label { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; }

/* ---- Header text/control colors while transparent over the hero ---- */
/* Nav links themselves are excluded here on purpose: .nav-menu only ever
   renders inside the opaque --c-card dropdown now (see .site-nav), so
   forcing it cream to match the transparent header would make it
   invisible against that panel. The dark-text override just above
   (body.has-bg-video .site-header:not(.is-scrolled) .nav-menu a) is what
   actually applies to it. */
body.has-bg-video .site-header:not(.is-scrolled) .brandmark__name { color: var(--c-cream-text); }
body.has-bg-video .site-header:not(.is-scrolled) .brandmark__sub { color: var(--c-cream-text-soft); }
body.has-bg-video .site-header:not(.is-scrolled) .brandmark__o { color: var(--c-gold-soft); }
body.has-bg-video .site-header:not(.is-scrolled) .nav-toggle__bar { background: var(--c-cream-text); }
body.has-bg-video .site-header:not(.is-scrolled) .site-header__book {
	background: transparent;
	color: var(--c-cream-text);
	border: 1px solid rgba(242,238,226,0.5);
}
body.has-bg-video .site-header:not(.is-scrolled) .site-header__book:hover { background: rgba(242,238,226,0.12); }

/* ==========================================================================
   Philosophy / Services
   ========================================================================== */
.philosophy { background: var(--c-cream); padding: 8.5rem 3rem; position: relative; }
.philosophy__intro { padding: 0; border-radius: 0; }
.philosophy__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.85fr 1.6fr;
	gap: 5rem;
	align-items: start;
}
.philosophy__heading { font-size: clamp(2rem, 3.2vw, 3.1rem); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 1.6rem; }
.philosophy__heading em { font-family: var(--font-hand); font-style: normal; font-weight: 400; font-size: 1.2em; color: var(--c-gold); }
.philosophy__text { color: var(--c-text-light); margin-bottom: 2rem; max-width: 40ch; }

.philosophy__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.service-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	padding-bottom: 0;
	border-radius: 0;
	overflow: hidden;
}
.service-card__media { position: relative; width: 100%; aspect-ratio: 4 / 4.4; overflow: hidden; margin-bottom: 1.4rem; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.service-card:hover .service-card__media img { transform: scale(1.04); }
.service-card__icon { display: none; } /* the floating badge reads too "spa-template" */
.service-card__index {
	position: absolute; top: 1rem; left: 1.1rem; z-index: 3;
	font-family: var(--font-serif); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em;
	color: var(--c-cream-text); text-shadow: 0 1px 10px rgba(20,22,14,0.5);
}
.service-card__title {
	margin-top: 0;
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.05;
	text-transform: none;
	color: var(--c-text);
	margin-bottom: 0.7rem;
}
.service-card__text {
	font-size: 0.92rem;
	color: var(--c-text-light);
	max-width: 32ch;
	margin-bottom: 1.2rem;
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { background: var(--c-green-deep); color: var(--c-cream-text); padding: 8rem 3rem; }
.cta-band__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.7fr 1fr;
	gap: 3.5rem;
	align-items: center;
}

.cta-band__quote { display: flex; flex-direction: column; gap: 1.1rem; padding: 0; border-radius: 0; }
.cta-band__lotus { color: var(--c-gold-soft); font-size: 1.8rem; line-height: 1; }
.cta-band__quote blockquote { margin: 0; }
.cta-band__quote p {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.3rem, 1.9vw, 1.75rem);
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--c-cream-text);
}
.cta-band__quote cite {
	display: block;
	margin-top: 0.8rem;
	font-style: normal;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-cream-text-soft);
}

.cta-band__points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	padding: 0;
	border-radius: 0;
	border-left: 1px solid rgba(240,235,225,0.14);
	border-right: 1px solid rgba(240,235,225,0.14);
	padding-left: 3rem;
	padding-right: 3rem;
}
.trust-point { text-align: left; }
.trust-point__icon { display: inline-flex; color: var(--c-gold-soft); font-size: 1.5rem; margin-bottom: 0.9rem; }
.trust-point h4 {
	font-family: var(--font-sans);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--c-cream-text);
	margin-bottom: 0.5rem;
}
.trust-point p { font-size: 0.84rem; color: var(--c-cream-text-soft); line-height: 1.5; }

.cta-band__action { position: relative; text-align: left; padding: 0; border-radius: 0; }
.cta-band__action h3 { font-size: clamp(1.6rem, 2vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 1.6rem; color: var(--c-cream-text); }
.cta-band__decor {
	position: absolute;
	right: 0.5rem;
	bottom: 100%;
	margin-bottom: 1.5rem;
	width: 88px; height: 88px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid rgba(240,235,225,0.25);
	opacity: 0.9;
}
.cta-band__decor img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Site footer (below the front-page CTA band)
   ========================================================================== */
.site-footer { background: var(--c-green-dark); color: var(--c-cream-text-soft); padding: 5rem 3rem 0; border-radius: 0; }
.site-footer__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(242,238,226,0.12);
}
.site-footer__tagline { margin-top: 1rem; font-size: 0.86rem; max-width: 28ch; }
.site-footer h4 {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-cream-text);
	margin-bottom: 1.2rem;
}
.site-footer__col p, .site-footer__col a { font-size: 0.86rem; display: block; margin-bottom: 0.6rem; }
.footer-menu { display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__bottom {
	max-width: var(--container);
	margin: 0 auto;
	padding: 1.6rem 0;
	font-size: 0.75rem;
	text-align: center;
	color: var(--c-cream-text-soft);
}

/* ==========================================================================
   Generic interior pages (About, Contact, blog index, etc.)
   ========================================================================== */
.page-header { padding: calc(var(--header-h) + 6rem) 3rem 0; text-align: left; }
.page-header__inner { max-width: var(--container); margin: 0 auto; padding: 0 0 2.6rem; border-radius: 0; border-bottom: 1px solid var(--c-line); }
.page-header .eyebrow::before { left: 0; transform: none; }
.page-header h1 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 700; letter-spacing: -0.035em; line-height: 0.94; max-width: 18ch; }

.generic-page { min-height: 60vh; position: relative; }
.generic-page__inner { max-width: var(--container); margin: 0 auto; padding: 4rem 3rem 5rem; position: relative; z-index: 1; }
.generic-page--no-band .generic-page__inner { padding-top: calc(var(--header-h) + 4rem); }

/* No video set: interior pages stay on solid bone, as before. */
body:not(.has-bg-video) .page-header,
body:not(.has-bg-video) .generic-page { background: var(--c-cream); }

/* Video set: the video now runs the FULL page length, not just the top
   hero band — interior pages sit transparently over the fixed
   .site-bg-video-wrap the whole way down. Because of that, all the shared
   body-copy components below get a light/cream palette + a soft text-shadow
   (the same legibility trick the homepage hero already uses) instead of
   their normal dark-on-cream colors, which would otherwise vanish into the
   footage. Small opaque UI (cards, form fields, buttons) already carries
   its own background and needs no change. */
body.has-bg-video .page-header,
body.has-bg-video .generic-page,
body.has-bg-video .services-wrap { background: transparent; }

body.has-bg-video .page-header h1,
body.has-bg-video .page-header .eyebrow,
body.has-bg-video .generic-page .eyebrow {
	color: var(--c-cream-text);
	text-shadow: 0 2px 20px rgba(20,22,14,0.45);
}
body.has-bg-video .page-header .eyebrow { color: var(--c-gold-soft); }

body.has-bg-video .rich-content h2,
body.has-bg-video .rich-content h3,
body.has-bg-video .service-item__title,
body.has-bg-video .service-item__price,
body.has-bg-video .service-item__style-strip strong,
body.has-bg-video .service-empty__title {
	color: var(--c-cream-text);
	text-shadow: 0 1px 14px rgba(20,22,14,0.4);
}
body.has-bg-video .rich-content p,
body.has-bg-video .rich-content li,
body.has-bg-video .service-item__text,
body.has-bg-video .service-item__duration,
body.has-bg-video .service-empty__text {
	color: var(--c-cream-text-soft);
	text-shadow: 0 1px 10px rgba(20,22,14,0.4);
}
body.has-bg-video .rich-content a { color: var(--c-gold-soft); }
body.has-bg-video .service-item,
body.has-bg-video .page-header__inner,
body.has-bg-video .generic-page__inner--intro { border-color: rgba(240,235,225,0.25); }
body.has-bg-video .filter-btn { border-color: rgba(240,235,225,0.4); color: var(--c-cream-text-soft); }
body.has-bg-video .filter-btn:hover { border-color: var(--c-cream-text); color: var(--c-cream-text); }

body.has-bg-video .page-header__inner {
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(240,235,225,0.28);
	border-radius: 0;
	padding: 0 0 2.6rem;
	box-shadow: none;
}
body.has-bg-video .rich-content {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}

/* Editor content (About / Services / etc.) */
.rich-content { max-width: 820px; }
.rich-content > * + * { margin-top: 1.4rem; }
.rich-content h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin-top: 3rem; }
.rich-content h3 { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 2.2rem; }
.rich-content p, .rich-content li { color: var(--c-text-light); line-height: 1.75; }
.rich-content a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 3px; }
.rich-content img, .rich-content figure { margin: 2.6rem 0; width: 100%; }
.rich-content figure img { margin: 0; }
.rich-content blockquote {
	margin: 2.4rem 0; padding-left: 1.6rem; border-left: 2px solid var(--c-gold);
	font-family: var(--font-serif); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--c-text);
}

.single-thumb { margin: 0 0 2.8rem; overflow: hidden; }
.single-thumb img { width: 100%; height: auto; display: block; }
.generic-page__inner p { margin-bottom: 1.2rem; color: var(--c-text-light); }
.generic-post { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--c-line); }

/* ---------- Services page (page-services.php) ---------- */
.generic-page__inner--intro { padding-bottom: 1rem; }
.generic-page__inner--intro .rich-content { max-width: 700px; }
.generic-page__inner--intro .rich-content p { color: var(--c-text-light); }

.services-wrap { max-width: var(--container); margin: 0 auto; padding: 1rem 3rem 6rem; }

.service-filter, .staff-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.6rem; }
.filter-btn {
	font-family: var(--font-sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em;
	padding: 0.6rem 1.3rem; border-radius: 100px; border: 1px solid var(--c-line);
	background: transparent; color: var(--c-text-light);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-btn:hover { border-color: var(--c-text); color: var(--c-text); }
.filter-btn.is-active { background: var(--c-green); border-color: var(--c-green); color: var(--c-cream-text); }

.service-list { border-top: 1px solid var(--c-line); }
.service-item { padding: 2rem 0; border-bottom: 1px solid var(--c-line); transition: opacity 0.35s ease; }
.service-item.is-filtered-out { display: none; }
.service-item__row {
	display: grid;
	grid-template-columns: 2.6rem 84px 1fr auto auto;
	align-items: center;
	gap: 1.8rem;
}

.service-item__index {
	font-family: var(--font-serif); font-weight: 600; font-size: 0.85rem;
	color: var(--c-text-light);
}
.service-item__media {
	width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
	background: var(--c-cream-2); flex-shrink: 0;
}
.service-item__media img { width: 100%; height: 100%; object-fit: cover; }
.service-item__media--empty { display: flex; align-items: center; justify-content: center; color: var(--c-gold); font-size: 1.4rem; }

.service-item__body { min-width: 0; }
.service-item__title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.service-item__text { font-size: 0.86rem; color: var(--c-text-light); line-height: 1.55; max-width: 46ch; }

.service-item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; white-space: nowrap; }
.service-item__duration { font-size: 0.76rem; color: var(--c-text-light); letter-spacing: 0.02em; }
.service-item__price { font-family: var(--font-serif); font-weight: 600; font-size: 1rem; color: var(--c-text); }

/* Dual-currency prices — lumoni_price_html() always renders both spans;
   which one shows is decided purely by html[data-currency], set by
   assets/js/currency.js (and, before first paint, the inline snippet in
   header.php). Default/no-JS state is TZS. */
.dual-price .price-usd { display: none; }
html[data-currency="usd"] .dual-price .price-tzs { display: none; }
html[data-currency="usd"] .dual-price .price-usd { display: inline; }

/* Coming Soon — fallback shown by lumoni_price_html()/lumoni_package_price_html()
   wherever no real price has been entered yet, instead of a fabricated figure. */
.price-coming-soon {
	font-style: italic;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.7;
}

/* ---- Header currency toggle ---- */
.currency-toggle {
	display: flex; align-items: center; border: 1px solid var(--c-line); border-radius: 100px;
	padding: 0.2rem; gap: 0.15rem; flex-shrink: 0;
}
.currency-toggle__btn {
	padding: 0.4rem 0.75rem; border-radius: 100px; border: none; background: transparent;
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: var(--c-text-light);
	white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease;
}
.currency-toggle__btn:hover { color: var(--c-text); }
.currency-toggle__btn.is-active { background: var(--c-green); color: var(--c-cream-text); }
body.has-bg-video .site-header:not(.is-scrolled) .currency-toggle { border-color: rgba(240,235,225,0.35); }
body.has-bg-video .site-header:not(.is-scrolled) .currency-toggle__btn { color: rgba(240,235,225,0.7); }
body.has-bg-video .site-header:not(.is-scrolled) .currency-toggle__btn:hover { color: var(--c-cream-text); }
body.has-bg-video .site-header:not(.is-scrolled) .currency-toggle__btn.is-active { background: rgba(240,235,225,0.16); color: var(--c-cream-text); }

/* The nav-dropdown copy of the toggle (site-nav__currency, inserted at the
   top of the mobile menu in header.php) is hidden by default — desktop has
   room for the header-row version above, so showing both would be
   redundant. Below 900px the two swap: the header row doesn't have room
   for a currency toggle AND Book Now AND the menu icon side by side once
   the labels read "Local"/"Foreigner" rather than "TZS"/"USD", so the
   toggle moves into the dropdown instead of fighting for that space. */
.site-nav__currency { display: none; }
@media (max-width: 900px) {
	.site-header__actions > .currency-toggle { display: none; }
	.site-nav__currency {
		display: flex; width: 100%; margin-bottom: var(--s-3);
		padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line);
	}
	.site-nav__currency .currency-toggle__btn { flex: 1; text-align: center; }
}

.service-item__cta { padding: 0.75rem 1.5rem; font-size: 0.66rem; }

/* ---- Details toggle + expandable includes/excludes/process panel ---- */
.service-item__detail-toggle {
	display: inline-flex; align-items: center; gap: 0.3em;
	margin-top: 0.6rem; padding: 0; border: none; background: none;
	font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em;
	color: var(--c-gold); cursor: pointer;
}
.service-item__detail-toggle span { font-size: 1em; transition: transform 0.25s ease; }
.service-item__detail-toggle:hover { color: var(--c-text); }
.service-item__detail-toggle[aria-expanded="true"] span { transform: rotate(45deg); }

.service-item__detail {
	overflow: hidden; height: 0; opacity: 0;
	transition: height 0.35s ease, opacity 0.3s ease;
}
.service-item__detail.is-open { opacity: 1; }
.service-item__style-strip {
	display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.6rem;
	font-size: 0.82rem; color: var(--c-text-light);
}
.service-item__style-strip strong { color: var(--c-text); font-weight: 600; }
.service-item__detail-inner {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
	padding-top: 1.8rem; margin-top: 0.4rem; border-top: 1px solid var(--c-line);
}
.service-item__detail-col h4 {
	font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--c-text); margin-bottom: 0.8rem;
}
.service-item__detail-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.service-item__detail-col li {
	font-size: 0.84rem; line-height: 1.5; color: var(--c-text-light); padding-left: 1.1rem; position: relative;
}
.service-item__detail-col li::before {
	content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold);
}

.service-empty {
	text-align: center; padding: 4.5rem 2rem; border: 1px dashed var(--c-line); border-radius: 4px;
}
.service-empty__title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 0.7rem; }
.service-empty__text { color: var(--c-text-light); max-width: 46ch; margin: 0 auto 1.8rem; line-height: 1.6; }
.generic-post h2 { font-size: 1.6rem; margin-bottom: 0.8rem; }
.generic-post h2 a:hover { color: var(--c-gold); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.philosophy__inner { grid-template-columns: 1fr; }
	.philosophy__cards { grid-template-columns: repeat(3, 1fr); }
	.cta-band__inner { grid-template-columns: 1fr; text-align: center; }
	.cta-band__points { padding: 2rem 1.5rem; }
	.cta-band__action { text-align: center; }
	.cta-band__decor { position: static; margin: 0 auto 1.5rem; }
}

@media (max-width: 900px) {
	.site-header__inner { padding: 0 1.5rem; }
	.site-header__actions { gap: 0.5rem; }
	.site-header__book { padding: 0.65rem 0.95rem; }

	.hero { min-height: 100svh; padding: calc(var(--header-h) + 2.5rem) 1.5rem 3rem; }
	.hero__scroll { display: none; }

	.philosophy { padding: 4.5rem 1.5rem; }
	.philosophy__cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

	.cta-band { padding: 3.5rem 1.5rem; }
	.cta-band__points { grid-template-columns: 1fr; gap: 2.2rem; }

	.site-footer { padding: 3.5rem 1.5rem 0; }
	.site-footer__inner { grid-template-columns: 1fr 1fr; }

	.page-header { padding: calc(var(--header-h) + 3.5rem) 1.5rem 0; }
	.generic-page__inner, .services-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }

	.service-item__row {
		grid-template-columns: 64px 1fr;
		grid-template-areas:
			"media title"
			"media text"
			"meta  meta"
			"cta   cta";
		row-gap: 0.5rem;
	}
	.service-item__index { display: none; }
	.service-item__media { grid-area: media; width: 64px; height: 64px; }
	.service-item__body { grid-area: title; }
	.service-item__text { grid-area: text; }
	.service-item__meta { grid-area: meta; flex-direction: row; align-items: baseline; gap: 0.6rem; text-align: left; margin-top: 0.4rem; }
	.service-item__cta { grid-area: cta; margin-top: 0.8rem; justify-self: flex-start; }

	.service-item__detail-inner { grid-template-columns: 1fr; gap: 1.4rem; }
}

@media (max-width: 520px) {
	.site-footer__inner { grid-template-columns: 1fr; }
	.service-filter, .staff-filter { gap: 0.5rem; }
	.filter-btn { padding: 0.5rem 1rem; font-size: 0.7rem; }
}

/* ==========================================================================
   Motion layer  (GSAP + ScrollTrigger + Lenis)
   Everything below is gated on html.lumoni-anim — added before paint only
   when motion is wanted. No flag (reduce-motion / no-JS) = plain static page.
   ========================================================================== */

/* ---- Lenis smooth scroll (recommended baseline) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* Lenis manages scroll position; the CSS smooth-scroll would fight it. */
html.has-lenis { scroll-behavior: auto; }

/* ---- Reveal "from" states (pre-JS, so nothing flashes in) ----
   Each hidden state also gets a pure-CSS fallback animation (below) that
   is completely independent of GSAP/ScrollTrigger. If the JS-side reveal
   fails to fire for a given element for any reason — a stale
   ScrollTrigger position after a layout shift is the classic cause —
   this guarantees the content still becomes visible on a fixed timer
   rather than staying stuck invisible indefinitely. It only ever matters
   as a safety net: every real stagger delay in anim.js is well under
   0.3s, so in the normal/working case GSAP always finishes first and
   this fallback has nothing left to do. */
html.lumoni-anim [data-reveal] { opacity: 0; transform: translateY(22px); animation: lumoni-reveal-fallback 0.6s var(--ease-out) 1.8s forwards; }
html.lumoni-anim [data-lines]  { opacity: 0; animation: lumoni-fade-fallback 0.6s var(--ease-out) 1.8s forwards; }
html.lumoni-anim .reveal-img   { clip-path: inset(0 0 100% 0); animation: lumoni-clip-fallback 0.6s var(--ease-out) 1.8s forwards; }

/* Interior editor content — hidden pre-JS so it reveals without a flash. */
html.lumoni-anim .generic-page__inner :is(h2, h3, h4, p, ul, ol, blockquote, .wp-block-quote) { opacity: 0; transform: translateY(20px); animation: lumoni-reveal-fallback 0.6s var(--ease-out) 1.8s forwards; }
html.lumoni-anim .generic-page__inner img,
html.lumoni-anim .single-thumb img { clip-path: inset(0 0 100% 0); animation: lumoni-clip-fallback 0.6s var(--ease-out) 1.8s forwards; }

@keyframes lumoni-reveal-fallback { to { opacity: 1; transform: none; } }
@keyframes lumoni-fade-fallback   { to { opacity: 1; } }
@keyframes lumoni-clip-fallback   { to { clip-path: inset(0 0 0 0); } }
@keyframes lumoni-word-fallback   { to { transform: translateY(0); } }

/* Per-line masks produced by splitLines() */
.r-line   { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.r-line__i { display: block; will-change: transform; }

/* Per-word masks produced by splitWords() (big hero type) */
.r-word   { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.r-word__i { display: inline-block; will-change: transform; }
html.lumoni-anim [data-words] { opacity: 0; animation: lumoni-fade-fallback 0.6s var(--ease-out) 1.8s forwards; }
html.lumoni-anim .r-word__i { transform: translateY(110%); animation: lumoni-word-fallback 0.6s var(--ease-out) 1.8s forwards; }

/* Image reveal wrapper — fills the media box, leaves the icon un-clipped */
.service-card__media .reveal-img { position: absolute; inset: 0; overflow: hidden; }
.reveal-img { overflow: hidden; }
.reveal-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Preloader ---- */
.lumoni-loader {
	position: fixed; inset: 0; z-index: 200;
	display: none;
	flex-direction: column; align-items: center; justify-content: center;
	background: var(--c-cream); color: var(--c-text);
	will-change: transform;
}
html.lumoni-anim .lumoni-loader { display: flex; }

.lumoni-loader__inner {
	display: flex; flex-direction: column; align-items: center;
	gap: var(--s-5);
	text-align: center;
}

.lumoni-loader__mark { align-items: center; }
.lumoni-loader__logo {
	display: block;
	height: clamp(56px, 9vw, 108px);
	width: auto;
	max-width: 68vw;
	opacity: 0; /* GSAP fades/scales this in — see runLoader() in anim.js */
	filter: drop-shadow(0 0 26px rgba(200,156,80,0.38));
}

/* The rotating words are stacked in one fixed-height slot so the layout
   never shifts as they swap — a jumping counter underneath would undo the
   calm the words are there to create. Only the active word is rendered. */
.lumoni-loader__words {
	position: relative; display: block;
	height: 2.1em; width: 100%;
}
.lumoni-loader__word {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-serif); font-style: italic; font-weight: 500;
	font-size: clamp(1.3rem, 3.4vw, 2rem);
	letter-spacing: -0.01em; color: var(--c-gold);
	opacity: 0; pointer-events: none;
}
.lumoni-loader__word.is-active { opacity: 1; }

.lumoni-loader__tagline {
	position: absolute; left: 0; right: 0; bottom: var(--s-7);
	text-align: center; font-size: 0.7rem; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--c-text-light);
	padding: 0 var(--s-5);
}

.lumoni-loader__bar {
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 2px; background: var(--c-line);
}
.lumoni-loader__bar-fill {
	display: block; height: 100%; width: 100%;
	transform: scaleX(0); transform-origin: 0 50%;
	background: var(--c-gold);
}

/* ---- Scroll-progress line (top edge) ---- */
.scroll-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 2px;
	background: var(--c-gold); transform: scaleX(0); transform-origin: 0 50%;
	z-index: 60; pointer-events: none;
}

/* ---- Section index numbers on service cards ---- */
.service-card { position: relative; }
.service-card__index {
	position: absolute; top: 0.9rem; left: 1.1rem; z-index: 3;
	font-family: var(--font-serif); font-size: 0.95rem; letter-spacing: 0.14em;
	color: var(--c-cream-text); text-shadow: 0 1px 8px rgba(20,22,14,0.45);
}

/* ---- Header hide-on-scroll-down ---- */
.site-header { transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), background-color 0.25s ease, box-shadow 0.25s ease; }
.site-header.is-hidden { transform: translateY(-100%); }

/* ---- Animated nav underline (Kin-style) ---- */
/* Old underline-sweep hover removed here — it was built for the previous
   inline horizontal nav; the current row-based dropdown already gets its
   own hover feedback (color shift + indent) from the rules near .nav-menu
   above, and a bottom-edge underline would visually collide with each
   row's divider border. */

/* ---- Motion-layer responsive / safety ---- */
@media (max-width: 900px) {
	.service-card__index { top: 0.7rem; left: 0.9rem; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
	/* Belt-and-braces: even if the flag slipped through, never hide content. */
	[data-reveal], [data-lines], [data-words], .reveal-img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.lumoni-loader { display: none !important; }
}

/* ==========================================================================
   Cinematic scenes — marquee + page-transition curtain
   ========================================================================== */

/* ---- Scroll-reactive keyword marquee ---- */
.marquee { background: var(--c-cream); overflow: hidden; padding: 2.6rem 0; position: relative; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; transform-origin: center; }
.marquee__word {
	font-family: var(--font-serif); font-style: italic; font-weight: 500;
	font-size: clamp(2rem, 5.5vw, 4.4rem); line-height: 1;
	letter-spacing: -0.02em;
	color: var(--c-text); padding: 0 1.4rem;
}
.marquee__sep { color: var(--c-gold); font-size: clamp(0.8rem, 1.6vw, 1.3rem); opacity: 0.9; }

/* ---- Page-transition curtain ---- */
.page-curtain {
	position: fixed; inset: 0; z-index: 205; display: none;
	align-items: center; justify-content: center;
	background: var(--c-cream); color: var(--c-text);
	transform: translateY(100%); will-change: transform;
}
.page-curtain__inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.page-curtain__mark { align-items: center; opacity: 0; }
.page-curtain__mark .brandmark__name { font-size: 2rem; }
.page-curtain__title {
	font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.02em;
	font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--c-gold); opacity: 0;
	overflow: hidden; text-align: center;
}
.page-curtain__title .r-word { display: inline-block; overflow: hidden; vertical-align: top; }
.page-curtain__title .r-word__i { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
	.marquee__track { transform: none !important; }
	.page-curtain { display: none !important; }
}

/* ==========================================================================
   Booking widget — request form, overlay panel, time-slot strip
   ========================================================================== */

/* ---- Overlay shell (Flip morphs the panel in from the trigger button) ---- */
.booking-overlay {
	position: fixed; inset: 0; z-index: 220;
	display: none; align-items: center; justify-content: center;
	padding: 2rem; background: rgba(15,14,9,0.55);
	backdrop-filter: blur(6px); /* §14: "blur background" */
}
.booking-overlay.is-open { display: flex; }
body.booking-open { overflow: hidden; }

.booking-overlay__panel {
	position: relative; width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
	background: var(--c-card); border-radius: 6px; padding: 2.6rem 2.4rem;
	box-shadow: 0 40px 80px -30px rgba(0,0,0,0.5);
}
.booking-overlay__close {
	position: absolute; top: 1.1rem; right: 1.2rem; width: 34px; height: 34px;
	border-radius: 50%; border: 1px solid var(--c-line); background: transparent;
	font-size: 1.3rem; line-height: 1; color: var(--c-text-light);
}
.booking-overlay__close:hover { background: var(--c-cream-2); color: var(--c-text); }
.booking-overlay__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.6rem; }

/* ---- Form layout (shared by overlay + the inline /book-now page) ---- */
.booking-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.booking-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
.booking-form__field label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--c-text-light); }
.booking-form__field input,
.booking-form__field select {
	font-family: var(--font-sans); font-size: 0.92rem; padding: 0.75rem 0.9rem;
	border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-cream); color: var(--c-text);
}
.booking-form__field input:focus, .booking-form__field select:focus { outline: 2px solid var(--c-gold); outline-offset: 1px; }
.booking-form__fixed { padding: 0.75rem 0.9rem; border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-cream-2); font-size: 0.92rem; }
.booking-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.time-slots {
	display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.2rem 0.1rem 0.5rem;
	scrollbar-width: thin;
}
.time-slots__empty { font-size: 0.85rem; color: var(--c-text-light); padding: 0.6rem 0; }
.time-slot {
	flex: 0 0 auto; padding: 0.55rem 0.9rem; border-radius: 100px; border: 1px solid var(--c-line);
	background: var(--c-cream); font-size: 0.8rem; white-space: nowrap; color: var(--c-text);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.time-slot:hover { border-color: var(--c-text); }
.time-slot.is-selected { background: var(--c-green); border-color: var(--c-green); color: var(--c-cream-text); }

.booking-form__submit { width: 100%; margin-top: 0.4rem; }
.booking-form__fineprint { font-size: 0.74rem; color: var(--c-text-light); text-align: center; margin-top: 0.9rem; }
.booking-form__status { font-size: 0.82rem; text-align: center; margin-top: 0.6rem; min-height: 1.2em; color: var(--c-text); }
.booking-form__done { text-align: center; padding: 2rem 1rem; font-size: 1.05rem; overflow: hidden; }
.booking-form__done-check {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin: 0 auto 1.1rem; border-radius: 50%;
	background: var(--c-green); color: var(--c-cream-text); font-size: 1.6rem;
}

@media (max-width: 640px) {
	.booking-form__row { grid-template-columns: 1fr; }
	.booking-overlay__panel { padding: 2.2rem 1.4rem; }
}

/* ==========================================================================
   Team page (page-team.php) — staff cards + initials-avatar placeholder
   ========================================================================== */
.staff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2rem; }
.staff-card { text-align: left; }
.staff-card__media { aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; margin-bottom: 1.1rem; }
.staff-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder shown until a real photo is uploaded — deliberately not a
   stock photo (see inc/staff.php header comment for why). */
.staff-card__avatar {
	aspect-ratio: 1/1; border-radius: 8px; margin-bottom: 1.1rem;
	display: flex; align-items: center; justify-content: center;
	background: var(--c-green); color: var(--c-cream-text);
	font-family: var(--font-serif); font-size: 2.2rem; font-weight: 600; letter-spacing: 0.02em;
}

.staff-card__name { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.2rem; }
.staff-card__role { font-size: 0.78rem; color: var(--c-gold); font-weight: 600; margin-bottom: 0.6rem; }
.staff-card__bio { font-size: 0.85rem; color: var(--c-text-light); line-height: 1.55; margin-bottom: 0.8rem; }
.staff-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.staff-card__tag {
	font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.3rem 0.7rem;
	border-radius: 100px; border: 1px solid var(--c-line); color: var(--c-text-light);
}

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

/* ---- Booking widget — category-specific selectors ---- */
.booking-form__field--full { grid-column: 1 / -1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.pill-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill-btn {
	padding: 0.55rem 1rem; border-radius: 100px; border: 1px solid var(--c-line);
	background: var(--c-cream); font-size: 0.8rem; color: var(--c-text);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pill-btn:hover { border-color: var(--c-text); }
.pill-btn.is-selected { background: var(--c-green); border-color: var(--c-green); color: var(--c-cream-text); }

.swatch-picker { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.swatch {
	width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--c-line);
	padding: 0; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-selected { border-color: var(--c-text); box-shadow: 0 0 0 2px var(--c-cream), 0 0 0 4px var(--c-text); }
.swatch-picker__selected { font-size: 0.78rem; color: var(--c-text-light); margin-top: 0.6rem; }

/* ==========================================================================
   Products page (page-products.php) — grid + sticky order cart
   ========================================================================== */
.products-layout { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.product-card {
	display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid var(--c-line); border-radius: 6px;
	transition: box-shadow 0.2s ease;
}
.product-card:hover { box-shadow: 0 12px 30px -18px rgba(20,20,10,0.25); }
.product-card__media { aspect-ratio: 1/1; border-radius: 4px; overflow: hidden; margin-bottom: 1rem; background: var(--c-cream-2); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__media--empty { display: flex; align-items: center; justify-content: center; color: var(--c-gold); font-size: 1.6rem; }
.product-card__title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.2rem; }
.product-card__size { font-size: 0.72rem; color: var(--c-text-light); margin-bottom: 0.5rem; }
.product-card__desc { font-size: 0.82rem; color: var(--c-text-light); line-height: 1.5; margin-bottom: 1rem; flex-grow: 1; }
.product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.product-card__price { font-family: var(--font-serif); font-weight: 600; }
.product-card__add { font-size: 0.66rem; padding: 0.65rem 1.1rem; }

.products-sidebar { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.order-cart { border: 1px solid var(--c-line); border-radius: 6px; padding: 1.6rem; transition: box-shadow 0.3s ease; }
.products-sidebar#orderPanel.is-highlighted .order-cart { box-shadow: 0 0 0 3px var(--c-gold); }
.order-cart h3 { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.8rem; }
.order-cart__empty { font-size: 0.82rem; color: var(--c-text-light); }
.order-cart__list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.order-cart__item { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; gap: 0.6rem; }
.order-cart__name { flex-grow: 1; }
.order-cart__qty { display: flex; align-items: center; gap: 0.5rem; }
.order-cart__step { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--c-line); background: transparent; font-size: 0.9rem; line-height: 1; }
.order-cart__step:hover { background: var(--c-cream-2); }
.order-cart #orderForm { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 0.9rem; }
.order-cart #orderForm .booking-form__field label { display: block; margin-bottom: 0.3rem; }
.order-cart #orderForm input, .order-cart #orderForm textarea {
	width: 100%; font-family: var(--font-sans); font-size: 0.88rem; padding: 0.6rem 0.75rem;
	border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-cream);
}

@media (max-width: 1100px) {
	.products-layout { grid-template-columns: 1fr; }
	.products-sidebar { position: static; }
	.product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) { .product-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Juice Bar page (page-juice-bar.php)
   ========================================================================== */
.menu-section-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.6rem; }

.juice-order { max-width: 820px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.checkbox-pill {
	display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem;
	border: 1px solid var(--c-line); border-radius: 100px; font-size: 0.82rem; cursor: pointer;
}
.checkbox-pill input { accent-color: var(--c-green); }

.menu-shisha { margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--c-line); }
.menu-shisha__notice {
	display: inline-block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em;
	padding: 0.4rem 0.9rem; border-radius: 100px; background: var(--c-cream-2); color: var(--c-text-light);
	margin-bottom: 1.6rem;
}
.shisha-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-bottom: 2rem; }
.shisha-categories h4 { font-family: var(--font-serif); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.4rem; }
.shisha-cat__desc { font-size: 0.78rem; color: var(--c-text-light); line-height: 1.5; }

.juice-summary { font-size: 0.9rem; font-weight: 600; color: var(--c-text); padding: 1rem; background: var(--c-cream-2); border-radius: 4px; margin: 1.6rem 0; }

@media (max-width: 1100px) {
	.shisha-categories { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.shisha-categories { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Experience Packages — card grid + hover polish (brand strategy §5, §12)
   ========================================================================== */
.package-card-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem;
}
/* ---- Full-image package card (brief: every card is a full-image card —
   image, gradient overlay, category, title, description, badge, CTA. No
   white content boxes.) The photograph fills the whole card and the copy
   sits on top of it over a gradient, rather than the old split of a picture
   on top and a cream panel underneath. ---- */
.package-card {
	position: relative;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--c-green-deep); /* shows through before the image loads */
	aspect-ratio: 3 / 4;
	box-shadow: var(--shadow-1);
	transition: transform var(--dur-mid) var(--ease-out),
	            box-shadow var(--dur-mid) var(--ease-out),
	            opacity var(--dur-fast) var(--ease-out);
	will-change: transform;
}
.package-card.is-filtered-out { display: none; }
/* Sibling cards dim on hover — toggled by JS, see buildPackageCardFx(). */
.package-card-grid.is-hovering .package-card:not(.is-hovered) { opacity: 0.5; }

.package-card:hover, .package-card.is-hovered {
	transform: translateY(-8px);
	box-shadow: var(--shadow-3);
}

.package-card__link {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: var(--s-6) var(--s-5) var(--s-5);
	color: var(--c-cream-text);
}

.package-card__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.package-card__media img { width: 100%; height: 100%; object-fit: cover; }
.package-card__media--empty {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	background: var(--c-green-deep); color: var(--c-gold); font-size: 2rem;
}
/* The gradient that makes type legible over any photograph. Sits between the
   image and the copy, and deepens on hover so the text gains contrast exactly
   when the description expands into view. */
.package-card__media::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: var(--overlay-card);
	transition: background var(--dur-mid) var(--ease-out);
}
.package-card:hover .package-card__media::after,
.package-card.is-hovered .package-card__media::after { background: var(--overlay-card-hover); }

.package-card__badge {
	position: absolute; top: var(--s-4); left: var(--s-4); z-index: 3;
	font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	padding: var(--s-2) var(--s-3); border-radius: var(--r-pill);
	background: var(--glass-bg); color: var(--c-text);
	backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
}

.package-card__body { position: relative; }
/* Gold rule that draws in on hover, above the title. */
.package-card__body::before {
	content: ""; position: absolute; top: calc(var(--s-3) * -1); left: 0; width: 48px; height: 2px;
	background: var(--c-gold); transform: scaleX(0); transform-origin: 0 50%;
	transition: transform var(--dur-mid) var(--ease-out);
}
.package-card:hover .package-card__body::before,
.package-card.is-hovered .package-card__body::before { transform: scaleX(1); }

.package-card__title {
	font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700;
	letter-spacing: -0.02em; line-height: 1.1;
	color: var(--c-cream-text); margin-bottom: var(--s-1);
	transform: translateY(0);
	transition: transform var(--dur-mid) var(--ease-out);
}
.package-card:hover .package-card__title,
.package-card.is-hovered .package-card__title { transform: translateY(-2px); }

.package-card__subtitle {
	font-size: 0.8rem; font-style: italic; color: var(--c-gold-soft);
	margin-bottom: var(--s-2);
}
.package-card__desc {
	font-size: 0.85rem; color: rgba(240,235,225,0.82); line-height: 1.5;
	max-height: 0; opacity: 0; overflow: hidden;
	transition: max-height var(--dur-mid) var(--ease-out),
	            opacity var(--dur-fast) var(--ease-out),
	            margin var(--dur-mid) var(--ease-out);
}
.package-card:hover .package-card__desc,
.package-card.is-hovered .package-card__desc { max-height: 7em; opacity: 1; margin-bottom: var(--s-3); }

.package-card__meta { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.package-card__price {
	font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem;
	color: var(--c-cream-text);
	transition: color var(--dur-fast) var(--ease-out);
}
.package-card:hover .package-card__price,
.package-card.is-hovered .package-card__price { color: var(--c-gold-soft); }
.package-card__duration { font-size: 0.76rem; color: rgba(240,235,225,0.65); }

.package-card__cta {
	display: inline-flex; align-items: center; gap: 0.4em;
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--c-cream-text); opacity: 0;
	transform: translateX(-8px);
	transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.package-card:hover .package-card__cta, .package-card.is-hovered .package-card__cta { transform: translateX(0); opacity: 1; }

@media (max-width: 1100px) { .package-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  {
	.package-card-grid { grid-template-columns: 1fr; }
	/* Touch devices: no hover state, so keep the description visible always */
	.package-card__desc { max-height: none; opacity: 1; margin-bottom: 1rem; }
}

/* ==========================================================================
   Single Experience Package page
   ========================================================================== */
.package-hero { position: relative; min-height: 62vh; display: flex; align-items: flex-end; overflow: hidden; }
.package-hero__media { position: absolute; inset: 0; z-index: 0; }
.package-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.package-hero__media--empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--c-green-deep); color: var(--c-gold); font-size: 3rem; }
.package-hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(0deg, rgba(15,14,9,0.82) 0%, rgba(15,14,9,0.25) 55%, rgba(15,14,9,0.15) 100%);
}
.package-hero__content { position: relative; z-index: 2; padding: calc(var(--header-h) + 3rem) 3rem 3.5rem; max-width: 900px; color: var(--c-cream-text); }
.package-hero__title { font-family: var(--font-serif); font-size: clamp(2.4rem, 5.5vw, 4.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 0.98; margin-bottom: 0.8rem; }
.package-hero__subtitle { font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; color: var(--c-gold-soft); margin-bottom: 1.4rem; max-width: 50ch; }
.package-hero__meta { display: flex; gap: 1.4rem; font-size: 0.92rem; color: var(--c-cream-text-soft); margin-bottom: 1.8rem; }
.package-hero__meta span { padding-right: 1.4rem; border-right: 1px solid rgba(240,235,225,0.3); }
.package-hero__meta span:last-child { border-right: none; }
.package-hero__cta { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.package-body { max-width: var(--container); margin: 0 auto; padding: 4.5rem 3rem; display: grid; grid-template-columns: 1fr 320px; gap: 4rem; align-items: start; }
.package-section { margin-bottom: 3.2rem; }
.package-section h2 { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.2rem; }
.package-story p { color: var(--c-text-light); line-height: 1.75; }
.package-ideal-for { margin-top: 1.2rem; font-size: 0.9rem; color: var(--c-text-light); }

.package-services-grid { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.package-service-chip {
	display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem;
	border: 1px solid var(--c-line); border-radius: 100px; font-size: 0.84rem;
}
.package-service-chip__dur { color: var(--c-text-light); font-size: 0.76rem; }

.package-bullet-list, .package-tag-list { display: flex; flex-direction: column; gap: 0.6rem; }
.package-bullet-list li { position: relative; padding-left: 1.2rem; font-size: 0.92rem; color: var(--c-text-light); line-height: 1.5; }
.package-bullet-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold); }
.package-tag-list { flex-direction: row; flex-wrap: wrap; }
.package-tag-list li { font-size: 0.8rem; padding: 0.5rem 1rem; border: 1px solid var(--c-line); border-radius: 100px; color: var(--c-text-light); }

.package-timeline { display: flex; flex-direction: column; gap: 0; border-left: 2px solid var(--c-line); padding-left: 1.6rem; }
.package-timeline__step { position: relative; padding-bottom: 1.6rem; }
.package-timeline__step::before { content: ""; position: absolute; left: -1.65rem; top: 0.2rem; width: 9px; height: 9px; border-radius: 50%; background: var(--c-gold); }
.package-timeline__time { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 0.85rem; color: var(--c-text); margin-bottom: 0.2rem; }
.package-timeline__desc { font-size: 0.88rem; color: var(--c-text-light); }

.package-faq__item { border-bottom: 1px solid var(--c-line); }
.package-faq__q {
	width: 100%; text-align: left; padding: 1.1rem 0; background: none; border: none;
	display: flex; justify-content: space-between; align-items: center;
	font-family: var(--font-serif); font-size: 1rem; font-weight: 600; cursor: pointer;
}
.package-faq__q span { color: var(--c-gold); transition: transform 0.25s ease; }
.package-faq__q[aria-expanded="true"] span { transform: rotate(45deg); }
.package-faq__a { overflow: hidden; height: 0; opacity: 0; transition: height 0.3s ease, opacity 0.25s ease; }
.package-faq__a.is-open { opacity: 1; }
.package-faq__a p { padding-bottom: 1.2rem; font-size: 0.9rem; color: var(--c-text-light); line-height: 1.6; }

.package-body__sidebar { position: sticky; top: calc(var(--header-h) + 2rem); }
.package-sidebar-card { border: 1px solid var(--c-line); border-radius: 8px; padding: 1.8rem; background: var(--c-card); }
.package-sidebar-card__price { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--c-text); margin-bottom: 0.5rem; }
.package-sidebar-card__disclaimer { font-size: 0.72rem; color: var(--c-text-light); line-height: 1.5; margin-bottom: 1.1rem; }
.package-sidebar-card__row { font-size: 0.86rem; margin-bottom: 1.2rem; }
.package-sidebar-card__book { width: 100%; margin-bottom: 0.9rem; }
.package-sidebar-card__link { display: block; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--c-text-light); padding: 0.5rem 0; }
.package-sidebar-card__link:hover { color: var(--c-gold); }

.package-related { background: var(--c-cream-2); padding: 4.5rem 3rem; }
.package-related__inner { max-width: var(--container); margin: 0 auto; }
.package-related h2 { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; margin-bottom: 2rem; }

@media (max-width: 1000px) {
	.package-body { grid-template-columns: 1fr; }
	.package-body__sidebar { position: static; }
	.package-hero__content { padding: calc(var(--header-h) + 2rem) 1.5rem 2.5rem; }
	.package-related, .package-body { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ==========================================================================
   Reviews & Testimonials
   ========================================================================== */
.package-rating-summary { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.6rem; font-size: 0.95rem; }
.package-rating-summary__stars { color: var(--c-gold); font-size: 1.1rem; letter-spacing: 0.05em; }
.package-section__empty { font-size: 0.88rem; color: var(--c-text-light); margin-bottom: 1.6rem; }

.review-card-list { display: flex; flex-direction: column; gap: 1.6rem; margin-bottom: 2.2rem; }
.review-card { padding: 1.4rem 1.6rem; border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-card); }
.review-card__stars { display: block; color: var(--c-gold); font-size: 0.95rem; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.review-card__text { font-family: var(--font-serif); font-style: italic; font-size: 0.98rem; line-height: 1.55; color: var(--c-text); margin-bottom: 0.6rem; }
.review-card__author { font-size: 0.8rem; color: var(--c-text-light); }

/* ---- Review submission form ---- */
.review-form-mount { margin-top: 1rem; }
.review-form { max-width: 520px; }
.review-form__about { font-size: 0.82rem; color: var(--c-gold); font-weight: 600; margin-bottom: 1rem; }
.review-form__field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.review-form__field label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--c-text-light); }
.review-form__field input, .review-form__field textarea {
	font-family: var(--font-sans); font-size: 0.92rem; padding: 0.7rem 0.9rem;
	border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-cream); color: var(--c-text); resize: vertical;
}
.review-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.review-stars { display: flex; gap: 0.3rem; }
.review-star {
	background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--c-line);
	cursor: pointer; padding: 0; transition: color 0.15s ease;
}
.review-star.is-filled { color: var(--c-gold); }
.review-star:hover ~ .review-star { color: var(--c-line); } /* visual hint only; click sets the real value */

.review-form__submit { width: 100%; margin-top: 0.4rem; }
.review-form__fineprint { font-size: 0.74rem; color: var(--c-text-light); text-align: center; margin-top: 0.8rem; }
.review-form__status { font-size: 0.82rem; text-align: center; margin-top: 0.5rem; min-height: 1.2em; }
.review-form__done { text-align: center; padding: 1.8rem 1rem; font-size: 1rem; max-width: 520px; }

@media (max-width: 640px) { .review-form__row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Gallery Lightbox (brand strategy §13)
   ========================================================================== */
.lightbox-overlay {
	position: fixed; inset: 0; z-index: 230; display: none;
	align-items: center; justify-content: center; padding: 4rem 2rem;
	background: rgba(10,9,6,0.92); backdrop-filter: blur(6px);
}
.lightbox-overlay.is-open { display: flex; }
body.lightbox-open { overflow: hidden; }

.lightbox-overlay__img {
	max-width: min(88vw, 1100px); max-height: 82vh;
	width: auto; height: auto; object-fit: contain;
	border-radius: 4px; box-shadow: 0 40px 90px -20px rgba(0,0,0,0.6);
	will-change: transform, opacity;
}
.lightbox-overlay__close {
	position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2;
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(240,235,225,0.35);
	background: transparent; color: var(--c-cream-text); font-size: 1.6rem; line-height: 1;
}
.lightbox-overlay__close:hover { background: rgba(240,235,225,0.14); }
.lightbox-overlay__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(240,235,225,0.35);
	background: rgba(15,14,9,0.4); color: var(--c-cream-text); font-size: 1.8rem; line-height: 1;
}
.lightbox-overlay__nav:hover { background: rgba(240,235,225,0.18); }
.lightbox-overlay__nav--prev { left: 1.5rem; }
.lightbox-overlay__nav--next { right: 1.5rem; }
.lightbox-overlay__counter {
	position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
	font-size: 0.78rem; letter-spacing: 0.04em; color: var(--c-cream-text-soft);
}

/* Hover zoom hint on content images before they're opened */
.rich-content img, .package-story img {
	transition: transform 0.4s ease, filter 0.3s ease; cursor: zoom-in;
}
.rich-content img:hover, .package-story img:hover { transform: scale(1.015); filter: brightness(1.03); }

@media (max-width: 640px) {
	.lightbox-overlay { padding: 1.5rem; }
	.lightbox-overlay__nav { width: 38px; height: 38px; font-size: 1.4rem; }
	.lightbox-overlay__nav--prev { left: 0.5rem; }
	.lightbox-overlay__nav--next { right: 0.5rem; }
}

/* ==========================================================================
   Image auto-fill attribution (Pexels / Wikimedia Commons credits)
   ========================================================================== */
.image-credit {
	position: absolute; bottom: 0.6rem; right: 0.8rem; z-index: 2;
	font-size: 0.65rem; color: rgba(240,235,225,0.75); background: rgba(15,14,9,0.4);
	padding: 0.25rem 0.6rem; border-radius: 100px; backdrop-filter: blur(3px);
}
.image-credit a { color: inherit; text-decoration: underline; }

.image-credits-block {
	max-width: var(--container); margin: 2rem auto 0; padding: 1rem 3rem;
	font-size: 0.7rem; color: var(--c-text-light);
}
.image-credits-block__label { font-weight: 600; margin-bottom: 0.4rem; }
.image-credits-block ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.image-credits-block a { color: var(--c-text-light); text-decoration: underline; }

@media (max-width: 900px) { .image-credits-block { padding: 1rem 1.5rem; } }

/* ==========================================================================
   Audit fixes — classes that were used in real markup but had no CSS
   ========================================================================== */

/* WordPress widget areas (Appearance → Widgets → footer sidebar) — these
   wrapper classes come from register_sidebar()'s before_widget/before_title
   in functions.php, and had zero styling; without this, any widget the site
   owner adds would render as unstyled default browser output in the middle
   of the otherwise-designed dark footer. */
.footer-widget { margin-bottom: 1.8rem; }
.footer-widget__title {
	font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700;
	letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-cream-text);
	margin-bottom: 1rem;
}
.footer-widget ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-widget a { color: var(--c-cream-text-soft); font-size: 0.86rem; }
.footer-widget a:hover { color: var(--c-gold-soft); }

/* Standalone /book-now page — the inline form mount and its loading message
   had no layout of their own. */
.booking-inline-wrap { max-width: 620px; margin: 0 auto; padding: 1rem 0 4rem; }
.booking-inline-fallback { text-align: center; color: var(--c-text-light); padding: 3rem 0; }

/* Audience filter tags (Men/Women/Couples/Solo/Luxury/Traditional/Trending/
   Popular) get a subtle dashed-border treatment to visually read as a
   different filter dimension than the Collection tabs next to them, rather
   than looking identical and implying they're the same kind of filter. */
.filter-btn--audience { border-style: dashed; }
.filter-btn--audience.is-active { border-style: solid; }

/* Service name should read more prominently than its duration alongside it. */
.package-service-chip__name { font-weight: 600; }

/* Blog archive excerpts (index.php) — match the rest of the site's body-text
   treatment instead of falling back to bare default paragraph styling. */
.generic-post__excerpt { color: var(--c-text-light); line-height: 1.7; margin-top: 0.6rem; }

/* ==========================================================================
   Nail Studio configurator — built on the shared token layer, no local
   spacing/radius/easing values invented here.
   ========================================================================== */
.nail-config { background: var(--c-cream); padding: var(--section-pad-y) var(--section-pad-x); }
.nail-config__inner {
	max-width: var(--container); margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start;
}

/* ---- Live preview ---- */
.nail-config__preview {
	position: sticky; top: calc(var(--header-h) + var(--s-5));
	background: var(--c-card); border-radius: var(--r-lg);
	padding: var(--s-7) var(--s-6) var(--s-6);
	box-shadow: var(--shadow-2); text-align: center;
}
.nail-preview {
	display: flex; align-items: flex-end; justify-content: center;
	gap: var(--s-2); min-height: 200px; margin-bottom: var(--s-5);
}
.nail-preview__finger { width: 46px; }
.nail-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 10px rgba(15,14,9,0.16)); }

.nail-config__summary {
	font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem;
	letter-spacing: -0.01em; color: var(--c-text); margin-bottom: var(--s-2);
}
.nail-config__note { font-size: 0.74rem; color: var(--c-text-light); line-height: 1.5; max-width: 40ch; margin: 0 auto; }

/* ---- Controls ---- */
.nail-config__group { margin-bottom: var(--s-6); }
.nail-config__group h3 {
	font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--c-text-light); margin-bottom: var(--s-3);
}

.nail-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.nail-pill {
	font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600;
	padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
	border: 1px solid var(--c-line); background: transparent; color: var(--c-text-light);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out),
	            color var(--dur-fast) var(--ease-out),
	            border-color var(--dur-fast) var(--ease-out);
}
.nail-pill:hover { border-color: var(--c-text); color: var(--c-text); }
.nail-pill.is-selected { background: var(--c-green); border-color: var(--c-green); color: var(--c-cream-text); }

.nail-swatches { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.nail-swatch {
	width: 38px; height: 38px; padding: 3px; border-radius: 50%;
	border: 2px solid transparent; background: transparent; cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nail-swatch:hover { transform: scale(1.12); }
.nail-swatch.is-selected { border-color: var(--c-gold); }
.nail-swatch__dot {
	display: block; width: 100%; height: 100%; border-radius: 50%;
	background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14);
}

.nail-config__book { width: 100%; margin-top: var(--s-3); }

/* ---- No-JS fallback reference ---- */
.nail-fallback { max-width: var(--container); margin: 0 auto; }
.nail-fallback h2 { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; margin-bottom: var(--s-5); }
.nail-fallback__swatches { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-5); }
.nail-fallback__swatch { display: flex; align-items: center; gap: var(--s-2); font-size: 0.82rem; color: var(--c-text-light); }
.nail-fallback__chip { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); }
.nail-fallback__meta { font-size: 0.85rem; color: var(--c-text-light); line-height: 1.9; }

@media (max-width: 900px) {
	.nail-config__inner { grid-template-columns: 1fr; }
	.nail-config__preview { position: static; }
}

/* ==========================================================================
   Unified card language — Team, Products, Juice Bar
   Brought onto the same full-image treatment as the package cards, and onto
   the shared token layer. Nothing below invents its own spacing, radius,
   easing or shadow value.
   ========================================================================== */

/* ---------- Team ---------- */
.staff-card {
	position: relative;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--c-green-deep);
	aspect-ratio: 3 / 4;
	box-shadow: var(--shadow-1);
	transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.staff-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }

.staff-card__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.staff-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.staff-card:hover .staff-card__media img { transform: scale(1.06); }
.staff-card__media::after {
	content: ""; position: absolute; inset: 0;
	background: var(--overlay-card);
	transition: background var(--dur-mid) var(--ease-out);
}
.staff-card:hover .staff-card__media::after { background: var(--overlay-card-hover); }

/* No photo yet: the initials avatar becomes the whole card face rather than
   a small circle floating above white space — same silhouette as a real
   portrait card, so a half-populated team page still looks deliberate. */
.staff-card__avatar {
	position: absolute; inset: 0; z-index: 0;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(155deg, var(--c-green-deep), var(--c-green-dark));
	color: var(--c-gold-soft);
	font-family: var(--font-serif); font-size: 3.2rem; font-weight: 700; letter-spacing: 0.04em;
	border-radius: 0; margin: 0; aspect-ratio: auto;
}

/* The copy layer sits on top of whichever face the card has. */
.staff-card__name,
.staff-card__role,
.staff-card__bio,
.staff-card__availability,
.staff-card__tags { position: relative; z-index: 2; }

.staff-card__name {
	font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700;
	letter-spacing: -0.015em; color: var(--c-cream-text);
	padding: 0 var(--s-5); margin: 0 0 var(--s-1);
}
.staff-card__role { color: var(--c-gold-soft); font-size: 0.76rem; font-weight: 600; padding: 0 var(--s-5); margin-bottom: var(--s-2); }
.staff-card__bio {
	color: rgba(240,235,225,0.8); font-size: 0.82rem; line-height: 1.5;
	padding: 0 var(--s-5); margin-bottom: var(--s-2);
	max-height: 0; opacity: 0; overflow: hidden;
	transition: max-height var(--dur-mid) var(--ease-out), opacity var(--dur-fast) var(--ease-out), margin var(--dur-mid) var(--ease-out);
}
.staff-card:hover .staff-card__bio { max-height: 8em; opacity: 1; margin-bottom: var(--s-3); }
.staff-card__availability { color: var(--c-gold-soft); font-size: 0.72rem; font-weight: 600; padding: 0 var(--s-5); margin-bottom: var(--s-3); }
.staff-card__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--s-5) var(--s-5); }
.staff-card__tag {
	font-size: 0.64rem; font-weight: 600; letter-spacing: 0.04em;
	padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
	background: rgba(240,235,225,0.14); color: var(--c-cream-text);
	border: 1px solid rgba(240,235,225,0.22);
}
/* Push the whole copy stack to the bottom of the card face. */
.staff-card { display: flex; flex-direction: column; justify-content: flex-end; }
.staff-card > .staff-card__media,
.staff-card > .staff-card__avatar { position: absolute; }

/* ---------- Products ---------- */
.product-card {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	border-radius: var(--r-md); overflow: hidden;
	background: var(--c-green-deep); aspect-ratio: 4 / 5;
	box-shadow: var(--shadow-1);
	transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }
.product-card__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__media::after {
	content: ""; position: absolute; inset: 0;
	background: var(--overlay-card);
	transition: background var(--dur-mid) var(--ease-out);
}
.product-card:hover .product-card__media::after { background: var(--overlay-card-hover); }
.product-card__media--empty {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(155deg, var(--c-green-deep), var(--c-green-dark));
	color: var(--c-gold); font-size: 2rem;
}
.product-card__title,
.product-card__size,
.product-card__desc,
.product-card__footer { position: relative; z-index: 2; }
.product-card__title {
	font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700;
	color: var(--c-cream-text); padding: 0 var(--s-5); margin: 0 0 var(--s-1);
}
.product-card__size { font-size: 0.72rem; color: var(--c-gold-soft); padding: 0 var(--s-5); margin-bottom: var(--s-2); }
.product-card__desc {
	font-size: 0.8rem; line-height: 1.5; color: rgba(240,235,225,0.8);
	padding: 0 var(--s-5);
	max-height: 0; opacity: 0; overflow: hidden;
	transition: max-height var(--dur-mid) var(--ease-out), opacity var(--dur-fast) var(--ease-out), margin var(--dur-mid) var(--ease-out);
}
.product-card:hover .product-card__desc { max-height: 7em; opacity: 1; margin-bottom: var(--s-3); }
.product-card__footer {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
	padding: 0 var(--s-5) var(--s-5); margin-top: var(--s-3);
}
.product-card__price { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--c-cream-text); }
.product-card__add { padding: var(--s-2) var(--s-4); font-size: 0.64rem; }

@media (max-width: 640px) {
	.staff-card, .product-card { aspect-ratio: 4 / 5; }
	.staff-card__bio, .product-card__desc { max-height: none; opacity: 1; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-5);
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--section-pad-x);
}
.contact-card {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-6);
	background: var(--c-card);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.contact-card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.contact-card--accent { background: var(--c-green-deep); border-color: transparent; }
.contact-card--accent .contact-card__title,
.contact-card--accent .contact-card__value { color: var(--c-cream-text); }
.contact-card--accent .contact-card__body,
.contact-card--accent .contact-card__note { color: var(--c-cream-text-soft); }
.contact-card--accent .contact-card__icon { color: var(--c-gold-soft); }

.contact-card__icon { color: var(--c-gold); }
.contact-card__icon svg { width: 26px; height: 26px; }
.contact-card__title { font-family: var(--font-serif); font-size: 1.15rem; margin: 0; }
.contact-card__body {
	display: flex; flex-direction: column; gap: var(--s-2);
	margin: 0; font-style: normal; color: var(--c-text-light); font-size: 0.92rem; line-height: 1.6;
}
.contact-card__value {
	font-size: 1.05rem; color: var(--c-text); font-weight: 600;
	text-decoration: none; word-break: break-word;
}
a.contact-card__value:hover { color: var(--c-gold); }
.contact-card__value--sm { font-size: 0.9rem; font-weight: 500; }
.contact-card__note { font-size: 0.82rem; color: var(--c-text-light); line-height: 1.55; margin: 0; }

.contact-hours { list-style: none; margin: 0; padding: 0; width: 100%; }
.contact-hours li {
	display: flex; justify-content: space-between; gap: var(--s-4);
	padding: 0.4rem 0; font-size: 0.9rem;
	border-bottom: 1px solid var(--c-line);
}
.contact-hours li:last-child { border-bottom: none; }
.contact-hours li span:first-child { color: var(--c-text-light); }
.contact-hours li span:last-child { font-weight: 600; }

.contact-directions {
	display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-7);
	align-items: start;
	max-width: var(--container); margin: var(--s-9) auto 0;
	padding: var(--s-8) var(--section-pad-x);
	border-top: 1px solid var(--c-line);
}
.contact-directions__text h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: var(--s-2) 0 var(--s-4); }
.contact-directions__text p { color: var(--c-text-light); line-height: 1.75; max-width: 54ch; margin-bottom: var(--s-5); }
.contact-directions__text .btn { margin-right: var(--s-4); }
.contact-directions__aside {
	background: var(--c-cream-2); border-radius: var(--r-md); padding: var(--s-6);
}
.contact-directions__label {
	font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--c-text-light); margin: 0 0 0.3rem;
}
.contact-directions__landmark { font-family: var(--font-serif); font-size: 1.1rem; margin: 0 0 var(--s-5); }
.contact-directions__aside p:last-child { margin-bottom: 0; }

.contact-form-section {
	max-width: var(--container); margin: 0 auto;
	padding: var(--s-8) var(--section-pad-x) var(--s-9);
	border-top: 1px solid var(--c-line);
}
.contact-form-section__intro { max-width: 60ch; margin-bottom: var(--s-6); }
.contact-form-section__intro h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: var(--s-2) 0 var(--s-3); }
.contact-form-section__intro p { color: var(--c-text-light); line-height: 1.7; }
.contact-form .booking-form__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

@media (max-width: 900px) {
	.contact-directions { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* Over the background video/image: same light-text treatment interior
   pages already use, so contact copy never sinks into the footage. */
body.has-bg-video .contact-directions__text h2,
body.has-bg-video .contact-form-section__intro h2 {
	color: var(--c-cream-text); text-shadow: 0 1px 14px rgba(20,22,14,0.4);
}
body.has-bg-video .contact-directions__text p,
body.has-bg-video .contact-form-section__intro p {
	color: var(--c-cream-text-soft); text-shadow: 0 1px 10px rgba(20,22,14,0.4);
}
body.has-bg-video .contact-directions,
body.has-bg-video .contact-form-section { border-color: rgba(240,235,225,0.25); }
body.has-bg-video .contact-directions__aside { background: rgba(15,14,9,0.55); }
body.has-bg-video .contact-directions__aside .contact-directions__landmark { color: var(--c-cream-text); }
body.has-bg-video .contact-directions__aside .contact-directions__label { color: var(--c-cream-text-soft); }

/* ==========================================================================
   Wellness page — profile quiz, tips, aftercare
   ========================================================================== */
.wellness-quiz {
	display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s-8);
	align-items: start;
	max-width: var(--container); margin: 0 auto;
	padding: 0 var(--section-pad-x) var(--s-9);
}
.wellness-quiz__intro h2 { font-family: var(--font-serif); font-size: clamp(1.7rem, 4vw, 2.6rem); margin: var(--s-2) 0 var(--s-4); }
.wellness-quiz__intro p { color: var(--c-text-light); line-height: 1.75; max-width: 46ch; }

.wellness-quiz__panel {
	background: var(--c-card); border: 1px solid var(--c-line);
	border-radius: var(--r-lg); padding: var(--s-7);
	box-shadow: var(--shadow-1); min-height: 380px;
	display: flex; flex-direction: column;
}
.wellness-quiz__progress {
	height: 2px; background: var(--c-line); border-radius: var(--r-pill); overflow: hidden;
}
.wellness-quiz__progress-fill {
	display: block; height: 100%; width: 0;
	background: var(--c-gold); transition: width var(--dur-mid) var(--ease-out);
}
.wellness-quiz__step {
	font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--c-text-light); margin: var(--s-4) 0 var(--s-2);
}
.wellness-quiz__stage { flex: 1; }
.wellness-quiz__question {
	font-family: var(--font-serif); font-size: clamp(1.2rem, 2.4vw, 1.55rem);
	line-height: 1.3; margin: 0 0 var(--s-5);
}
.wellness-quiz__options { display: flex; flex-direction: column; gap: var(--s-3); }
.wellness-quiz__option {
	text-align: left; width: 100%; cursor: pointer;
	font-family: var(--font-sans); font-size: 0.95rem; color: var(--c-text);
	background: transparent; border: 1px solid var(--c-line);
	border-radius: var(--r-sm); padding: 0.9rem 1.1rem;
	transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wellness-quiz__option:hover {
	background: var(--c-cream-2); border-color: var(--c-gold); transform: translateX(4px);
}
.wellness-quiz__option.is-selected { border-color: var(--c-gold); background: var(--c-cream-2); }
.wellness-quiz__nav { display: flex; gap: var(--s-5); margin-top: var(--s-5); }
.wellness-quiz__nav button { background: none; border: none; cursor: pointer; padding: 0; }

.wellness-result { text-align: left; }
.wellness-result__icon { color: var(--c-gold); display: block; margin-bottom: var(--s-3); }
.wellness-result__icon svg { width: 34px; height: 34px; }
.wellness-result__title { font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: var(--s-2) 0 var(--s-3); }
.wellness-result__summary { color: var(--c-text-light); line-height: 1.7; margin-bottom: var(--s-4); }
.wellness-result__ritual {
	background: var(--c-cream-2); border-left: 2px solid var(--c-gold);
	padding: var(--s-4); border-radius: var(--r-sm);
	font-size: 0.92rem; line-height: 1.65; margin-bottom: var(--s-5);
}
.wellness-result__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.wellness-result__note { font-size: 0.82rem; color: var(--c-text-light); line-height: 1.6; }
.wellness-result__note a { color: var(--c-gold); }

.wellness-tips {
	max-width: var(--container); margin: 0 auto;
	padding: var(--s-8) var(--section-pad-x);
	border-top: 1px solid var(--c-line);
}
.wellness-tips__head { max-width: 62ch; margin-bottom: var(--s-7); }
.wellness-tips__head h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: var(--s-2) 0 var(--s-3); }
.wellness-tips__head p { color: var(--c-text-light); line-height: 1.7; }
.wellness-tips__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--s-6);
}
.wellness-tip {
	padding-top: var(--s-5); border-top: 1px solid var(--c-line);
}
.wellness-tip__icon { color: var(--c-gold); display: block; margin-bottom: var(--s-3); }
.wellness-tip__icon svg { width: 24px; height: 24px; }
.wellness-tip__title { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.35; margin: 0 0 var(--s-3); }
.wellness-tip__body { color: var(--c-text-light); font-size: 0.9rem; line-height: 1.7; margin: 0; }

.wellness-aftercare {
	display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s-8);
	max-width: var(--container); margin: 0 auto;
	padding: var(--s-8) var(--section-pad-x);
	border-top: 1px solid var(--c-line);
}
.wellness-aftercare__text h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: var(--s-2) 0 var(--s-3); }
.wellness-aftercare__text p { color: var(--c-text-light); line-height: 1.7; }
.wellness-aftercare__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.wellness-aftercare__list li {
	display: flex; gap: var(--s-5); padding: var(--s-5) 0;
	border-bottom: 1px solid var(--c-line);
}
.wellness-aftercare__list li:last-child { border-bottom: none; }
.wellness-aftercare__num {
	font-family: var(--font-serif); font-size: 0.8rem; font-weight: 600;
	color: var(--c-gold); flex-shrink: 0; padding-top: 0.25rem;
}
.wellness-aftercare__list h3 { font-family: var(--font-serif); font-size: 1.02rem; margin: 0 0 var(--s-2); }
.wellness-aftercare__list p { color: var(--c-text-light); font-size: 0.9rem; line-height: 1.7; margin: 0; }

.wellness-note {
	max-width: 74ch; margin: 0 auto;
	padding: var(--s-7) var(--section-pad-x) var(--s-9);
}
.wellness-note p {
	font-size: 0.85rem; line-height: 1.75; color: var(--c-text-light);
	border-left: 2px solid var(--c-line); padding-left: var(--s-5); margin: 0;
}

@media (max-width: 900px) {
	.wellness-quiz { grid-template-columns: 1fr; gap: var(--s-6); }
	.wellness-quiz__panel { padding: var(--s-5); min-height: 0; }
	.wellness-aftercare { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* Over the background video/image */
body.has-bg-video .wellness-quiz__intro h2,
body.has-bg-video .wellness-tips__head h2,
body.has-bg-video .wellness-aftercare__text h2,
body.has-bg-video .wellness-tip__title,
body.has-bg-video .wellness-aftercare__list h3 {
	color: var(--c-cream-text); text-shadow: 0 1px 14px rgba(20,22,14,0.4);
}
body.has-bg-video .wellness-quiz__intro p,
body.has-bg-video .wellness-tips__head p,
body.has-bg-video .wellness-aftercare__text p,
body.has-bg-video .wellness-tip__body,
body.has-bg-video .wellness-aftercare__list p,
body.has-bg-video .wellness-note p {
	color: var(--c-cream-text-soft); text-shadow: 0 1px 10px rgba(20,22,14,0.4);
}
body.has-bg-video .wellness-tips,
body.has-bg-video .wellness-aftercare,
body.has-bg-video .wellness-tip,
body.has-bg-video .wellness-aftercare__list li,
body.has-bg-video .wellness-note p { border-color: rgba(240,235,225,0.25); }

/* ==========================================================================
   FROSTED SURFACES
   Once a background video (or per-page fallback image) is set, every light
   surface on the site becomes frosted glass instead of opaque cream. The
   point is that the background stays VISIBLE everywhere — previously the
   header, nav panel, philosophy band, cards, form fields and the preloader
   were all solid --c-cream, which meant that on most of the site the
   footage was completely painted over and only peeked through in gaps.

   Scoped under body.has-bg-video throughout: with no background set there
   is nothing to see through, and blurring flat cream against flat cream
   would just cost GPU for no visual gain.
   ========================================================================== */

/* ---- Fixed chrome: header + nav panel ---- */
body.has-bg-video .site-header {
	background: var(--glass-bg-soft);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	border-bottom-color: rgba(255,255,255,0.20);
}
body.has-bg-video .site-header.is-scrolled {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.2);
	backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.2);
}
body.has-bg-video .nav-panel {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.2);
	backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.2);
	border-color: rgba(255,255,255,0.28);
}

/* ---- Full-bleed sections that were solid cream ---- */
body.has-bg-video .philosophy,
body.has-bg-video .marquee,
body.has-bg-video .nail-config,
body.has-bg-video .package-related { background: transparent; }
body.has-bg-video .marquee {
	background: var(--glass-bg-soft);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	border-color: rgba(255,255,255,0.20);
}

/* ---- Cards and panels ---- */
body.has-bg-video .service-card,
body.has-bg-video .product-card,
body.has-bg-video .contact-card,
body.has-bg-video .review-card,
body.has-bg-video .wellness-quiz__panel,
body.has-bg-video .package-sidebar-card,
body.has-bg-video .booking-overlay__panel,
body.has-bg-video .nail-config__panel,
body.has-bg-video .trust-strip {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	border: 1px solid rgba(255,255,255,0.26);
	box-shadow: var(--glass-shadow);
}
/* .glass already frosts itself — don't double-stack a second blur layer on
   the philosophy cards, which carry both classes. */
body.has-bg-video .service-card.glass {
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
}

/* ---- Small opaque chips: pills, filters, price tags, summaries ---- */
/* NOTE: .filter-btn, .juice-tag and .juice-summary are deliberately NOT in
   this list. They carry light cream TEXT over background media (set further
   up in the has-bg-video block), so giving them a light cream BACKGROUND
   here made them light-on-light and effectively invisible. They get the
   dark-scrim treatment at the bottom of this file instead. */
body.has-bg-video .booking-form__fixed,
body.has-bg-video .service-item__media,
body.has-bg-video .product-card__media,
body.has-bg-video .contact-directions__aside,
body.has-bg-video .wellness-result__ritual,
body.has-bg-video .order-cart__step {
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* ---- Form controls ----
   Inputs stay noticeably more opaque than panels: text being typed has to
   stay readable against moving footage, and a field that reads as "empty
   space" invites people to miss it entirely. */
body.has-bg-video .booking-form__field input,
body.has-bg-video .booking-form__field select,
body.has-bg-video .booking-form__field textarea,
body.has-bg-video .review-form input,
body.has-bg-video .review-form textarea,
body.has-bg-video .order-cart input,
body.has-bg-video .order-cart select {
	background: rgba(242,238,231,0.82);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-color: rgba(23,22,15,0.22);
}

/* ---- Preloader + page-transition curtain ----
   Both are full-screen and were solid cream, so the very first thing a
   visitor saw was the video being hidden. Frosted, the footage is already
   playing behind the logo before the page even reveals. */
.lumoni-loader,
.page-curtain {
	background: rgba(233,228,218,0.62);
	-webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.2);
	backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lumoni-loader, .page-curtain { background: var(--c-cream); }
}

/* Blur is genuinely expensive on low-end phones — a dozen blurred layers
   scrolling at once is where cheap Androids drop frames. Mobile keeps the
   frosted look on the few surfaces that overlap the video most visibly and
   goes flat-translucent elsewhere. */
@media (max-width: 700px) {
	body.has-bg-video .service-card,
	body.has-bg-video .product-card,
	body.has-bg-video .contact-card,
	body.has-bg-video .review-card,
	body.has-bg-video .wellness-quiz__panel,
	body.has-bg-video .package-sidebar-card,
	body.has-bg-video .trust-strip {
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		background: rgba(233,228,218,0.72);
	}
	body.has-bg-video .order-cart__step {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(233,228,218,0.86);
	}
}

/* Reduced-motion users often also want reduced visual noise; and a blurred
   pane over paused footage is pure cost. Keep the translucency, drop blur. */
@media (prefers-reduced-motion: reduce) {
	.glass, .lumoni-loader, .page-curtain,
	body.has-bg-video .site-header,
	body.has-bg-video .nav-panel,
	body.has-bg-video .service-card,
	body.has-bg-video .contact-card,
	body.has-bg-video .wellness-quiz__panel {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(233,228,218,0.88);
	}
}

/* ==========================================================================
   TRUST STRIP — rotating review slides
   Full-bleed image with the review sitting inside it. Slides advance left
   to right on a timer, and each slide's photo is a live fallback image
   (inc/image-fallback.php) until real client photography replaces it.
   ========================================================================== */
.trust {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--section-pad-y) var(--section-pad-x);
}
.trust__head { max-width: 60ch; margin-bottom: var(--s-6); }
.trust__head h2 {
	font-family: var(--font-serif);
	font-size: clamp(1.6rem, 3.5vw, 2.5rem);
	margin: var(--s-2) 0 var(--s-3);
}
.trust__head p { color: var(--c-text-light); line-height: 1.7; }

.trust-slider {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 21 / 9;
	min-height: 340px;
	background: var(--c-green-deep);
	box-shadow: var(--shadow-2);
}
.trust-slide {
	position: absolute; inset: 0;
	display: flex; align-items: flex-end;
	opacity: 0;
	transform: translateX(40px);
	transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
	pointer-events: none;
}
.trust-slide.is-active {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}
/* The outgoing slide exits to the LEFT while the incoming one enters from
   the right — that's what makes the set read as travelling left-to-right. */
.trust-slide.is-leaving {
	opacity: 0;
	transform: translateX(-40px);
}
.trust-slide__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.trust-slide__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: var(--overlay-card);
}
.trust-slide__body {
	position: relative; z-index: 2;
	padding: clamp(1.6rem, 4vw, 3.4rem);
	max-width: 62ch;
	color: var(--c-cream-text);
}
.trust-slide__stars {
	display: flex; gap: 0.2rem; margin-bottom: var(--s-3);
	color: var(--c-gold-soft);
}
.trust-slide__stars svg { width: 15px; height: 15px; }
.trust-slide__quote {
	font-family: var(--font-serif);
	font-size: clamp(1.05rem, 2.2vw, 1.6rem);
	line-height: 1.45;
	margin: 0 0 var(--s-4);
	text-shadow: 0 2px 18px rgba(15,14,9,0.5);
}
.trust-slide__author {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
	font-size: 0.85rem;
}
.trust-slide__name { font-weight: 600; }
.trust-slide__meta { color: var(--c-cream-text-soft); }

.trust-slider__nav {
	position: absolute; z-index: 3;
	left: clamp(1.6rem, 4vw, 3.4rem);
	bottom: clamp(1.1rem, 2.5vw, 1.8rem);
	display: flex; gap: 0.5rem;
}
.trust-slider__dot {
	width: 28px; height: 3px; padding: 0;
	border: none; border-radius: var(--r-pill);
	background: rgba(240,235,225,0.35);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out);
}
.trust-slider__dot.is-active { background: var(--c-gold-soft); }
.trust-slider__dot:hover { background: rgba(240,235,225,0.65); }

.trust-note {
	margin-top: var(--s-5);
	font-size: 0.78rem;
	color: var(--c-text-light);
	line-height: 1.6;
}

@media (max-width: 700px) {
	.trust-slider { aspect-ratio: 4 / 5; min-height: 0; }
	.trust-slide { align-items: flex-end; }
}

body.has-bg-video .trust__head h2 {
	color: var(--c-cream-text); text-shadow: 0 1px 14px rgba(20,22,14,0.4);
}
body.has-bg-video .trust__head p,
body.has-bg-video .trust-note {
	color: var(--c-cream-text-soft); text-shadow: 0 1px 10px rgba(20,22,14,0.4);
}

/* ==========================================================================
   LEGIBILITY OVER BACKGROUND MEDIA
   Recolouring text to cream and adding a text-shadow is not enough on its
   own: the background video/photo is bright in some regions and dark in
   others, so ANY single text colour disappears somewhere on the page —
   cream text vanishes against a sunlit window or pale foliage exactly the
   way ink text vanishes against dark footage.

   The fix is to stop relying on the backdrop being predictable and give
   text its own backing instead. Every text-bearing row gets a translucent
   dark scrim, so contrast is guaranteed regardless of what frame the video
   happens to be on. Scoped to body.has-bg-video — with no background media
   there is nothing to fight, and the normal bone/ink palette applies.
   ========================================================================== */

/* ---- Service rows ---- */
body.has-bg-video .service-item {
	background: rgba(18,17,12,0.46);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	backdrop-filter: blur(14px) saturate(1.1);
	border-radius: var(--r-md);
	padding: 1.1rem 1.3rem;
	margin-bottom: 0.5rem;
	border-color: rgba(240,235,225,0.16);
}

/* The row header text. --c-cream-text on the scrim above clears contrast
   on every frame, so the shadow is only a softener now, not the mechanism. */
body.has-bg-video .service-item__title,
body.has-bg-video .service-item__price,
body.has-bg-video .service-item__index {
	color: var(--c-cream-text);
	text-shadow: 0 1px 10px rgba(15,14,9,0.55);
}
body.has-bg-video .service-item__text,
body.has-bg-video .service-item__duration {
	color: var(--c-cream-text-soft);
	text-shadow: 0 1px 8px rgba(15,14,9,0.5);
}

/* Gold on a dark scrim is legible; gold on bright footage is not. The
   softer tint holds up in both places. */
body.has-bg-video .service-item__detail-toggle { color: var(--c-gold-soft); }
body.has-bg-video .service-item__detail-toggle:hover { color: var(--c-cream-text); }

/* ---- Expanded "Details" panel ----
   This was the worst offender in practice: it sits outside the row's own
   background, so three columns of ink-coloured body copy were landing
   directly on the video with nothing behind them at all. */
body.has-bg-video .service-item__detail-inner {
	border-top-color: rgba(240,235,225,0.20);
}
body.has-bg-video .service-item__detail-col h4 {
	color: var(--c-gold-soft);
	text-shadow: 0 1px 8px rgba(15,14,9,0.5);
}
body.has-bg-video .service-item__detail-col li {
	color: var(--c-cream-text-soft);
	text-shadow: 0 1px 8px rgba(15,14,9,0.5);
}
body.has-bg-video .service-item__detail-col li::before { background: var(--c-gold-soft); }
body.has-bg-video .service-item__style-strip { color: var(--c-cream-text-soft); }
body.has-bg-video .service-item__style-strip strong { color: var(--c-cream-text); }

/* ---- Same treatment for the other list-style pages ---- */
body.has-bg-video .juice-summary,
body.has-bg-video .juice-tag {
	color: var(--c-cream-text-soft);
	border-color: rgba(240,235,225,0.22);
}

/* ---- Empty state ---- */
body.has-bg-video .service-empty { border-color: rgba(240,235,225,0.28); }
body.has-bg-video .service-empty__title { color: var(--c-cream-text); }
body.has-bg-video .service-empty__text { color: var(--c-cream-text-soft); }

/* ---- Generic prose ---- */
body.has-bg-video .rich-content strong,
body.has-bg-video .rich-content h4,
body.has-bg-video .rich-content h5 { color: var(--c-cream-text); }
body.has-bg-video .image-credit { color: var(--c-cream-text-soft); }

/* Where backdrop-filter is unavailable the scrim has to carry the contrast
   by itself, so it goes noticeably more opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.has-bg-video .service-item { background: rgba(18,17,12,0.72); }
}

/* Phones: keep the scrim (it is what makes the text readable) but drop the
   blur, which is the expensive half. */
@media (max-width: 700px) {
	body.has-bg-video .service-item {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(18,17,12,0.66);
		padding: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.has-bg-video .service-item {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(18,17,12,0.70);
	}
}

/* ==========================================================================
   READABILITY HARDENING — expanded service "Details" panel
   The panel sits outside the row's own scrim, so on a bright frame three
   columns of body copy had nothing behind them. Giving the panel its own
   scrim (rather than relying on text-shadow alone) means contrast holds on
   any frame, including near-white ones like an overexposed sky or a pale
   treatment room.
   ========================================================================== */
body.has-bg-video .service-item__detail {
	background: rgba(18,17,12,0.52);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	backdrop-filter: blur(14px) saturate(1.1);
	border-radius: var(--r-md);
	padding: 0.2rem 1.1rem 1rem;
	margin-top: 0.6rem;
}
body.has-bg-video .service-item__detail-col h4 {
	color: var(--c-gold-soft);
	text-shadow: 0 1px 6px rgba(15,14,9,0.6);
}
/* Body copy in the panel goes to full cream rather than the softened tint —
   these are short bullet fragments at small size, which is exactly where a
   reduced-opacity text colour stops being readable first. */
body.has-bg-video .service-item__detail-col li {
	color: var(--c-cream-text);
	text-shadow: 0 1px 6px rgba(15,14,9,0.6);
}

/* Price and duration sit far right, away from the row scrim's densest area
   and often over the brightest part of a photo. Their own small scrim costs
   nothing and removes the worst remaining collision. */
body.has-bg-video .service-item__meta {
	background: rgba(18,17,12,0.42);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: var(--r-sm);
	padding: 0.35rem 0.7rem;
}
body.has-bg-video .service-item__price { color: var(--c-cream-text); }
body.has-bg-video .service-item__duration { color: var(--c-gold-soft); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.has-bg-video .service-item__detail { background: rgba(18,17,12,0.80); }
	body.has-bg-video .service-item__meta { background: rgba(18,17,12,0.72); }
}
@media (max-width: 700px) {
	body.has-bg-video .service-item__detail {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(18,17,12,0.74);
	}
	body.has-bg-video .service-item__meta {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: transparent;
		padding: 0;
	}
}

/* ==========================================================================
   PACKAGE CARD — overflow hardening
   The card was built around short, poetic titles ("Serengeti Sunset") and
   used a fixed 3/4 aspect ratio with the copy bottom-aligned. The wedding
   and volunteer packages have long, literal names ("Bridesmaid & Groomsmen
   Express Package") plus a subtitle, and once the copy is taller than the
   card, a flex container with justify-content:flex-end overflows out of its
   TOP edge — which is why the title collided with the category badge and
   appeared above the image instead of over it.

   Fixed by removing the hard aspect ratio in favour of a minimum height the
   card can grow past, and clamping each text block to a predictable number
   of lines so no single long field can blow the layout out again.
   ========================================================================== */
.package-card {
	aspect-ratio: auto;
	min-height: 420px;
	display: flex;
}
.package-card__link {
	position: relative;
	inset: auto;
	width: 100%;
	min-height: 100%;
	/* Space between pushes the badge row up and the copy down without
	   relying on flex-end, so there is no overflow direction to fall out of. */
	justify-content: flex-end;
	padding-top: calc(var(--s-8) + var(--s-4));
}
.package-card__media { z-index: 0; }

/* Two lines is enough for every title in the catalogue; a third would start
   crowding the subtitle on the narrowest column. */
.package-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1.2rem;
}
.package-card__subtitle {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* The badge is absolutely positioned over the card, so the padding-top above
   is what keeps the copy clear of it even at the tallest title. */
.package-card__badge { max-width: calc(100% - var(--s-8)); }

/* Price and duration wrap instead of forcing the row wider than the card
   when a package carries both currencies and a long duration string
   ("One week + wedding day"). */
.package-card__meta { flex-wrap: wrap; row-gap: var(--s-1); }

@media (max-width: 900px) {
	.package-card { min-height: 380px; }
}

/* ==========================================================================
   CONTRAST PASS — everything that sits directly on background media
   Written last on purpose so it wins without needing !important.

   The rule throughout: over photography, light surfaces lose. A cream pill
   with cream text is invisible; a cream panel behind dark ink competes with
   whatever is in the frame behind it. Anything floating on the background
   therefore gets a DARK scrim with cream/gold type, which holds on both a
   bright frame (an overexposed sky) and a dark one (a candlelit room).
   ========================================================================== */

/* ---- Category filter pills ---- */
body.has-bg-video .filter-btn {
	background: rgba(18,17,12,0.55);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	backdrop-filter: blur(10px) saturate(1.1);
	border-color: rgba(240,235,225,0.45);
	color: var(--c-cream-text);
	font-weight: 600;
	text-shadow: 0 1px 4px rgba(15,14,9,0.55);
}
body.has-bg-video .filter-btn:hover {
	background: rgba(18,17,12,0.72);
	border-color: var(--c-gold-soft);
	color: var(--c-cream-text);
}
/* The active pill has to be unmistakable at a glance — gold fill with dark
   ink, the inverse of the resting state rather than a subtle tint of it. */
body.has-bg-video .filter-btn.is-active {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: #1a1a14;
	text-shadow: none;
}

/* ---- Juice bar chips + summary ---- */
body.has-bg-video .juice-tag,
body.has-bg-video .juice-summary {
	background: rgba(18,17,12,0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--c-cream-text);
	border-color: rgba(240,235,225,0.28);
}

/* ---- "Details +" toggle ----
   Was gold-on-photo at 0.74rem, which is the smallest and lowest-contrast
   text on the page. Gets a scrim of its own so it reads as a real control. */
body.has-bg-video .service-item__detail-toggle {
	color: var(--c-gold-soft);
	background: rgba(18,17,12,0.5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	padding: 0.3rem 0.7rem;
	border-radius: var(--r-pill);
	text-shadow: 0 1px 4px rgba(15,14,9,0.6);
}
body.has-bg-video .service-item__detail-toggle:hover {
	color: var(--c-cream-text);
	background: rgba(18,17,12,0.7);
}

/* ---- Expanded detail panel ----
   Higher specificity than the earlier hardening block (which the live site
   showed was still losing to the base .service-item__detail-col rules on
   some builds), and it now covers the style strip and its <strong> labels,
   which were left as dark ink. */
body.has-bg-video .service-list .service-item__detail {
	background: rgba(18,17,12,0.58);
	-webkit-backdrop-filter: blur(16px) saturate(1.1);
	backdrop-filter: blur(16px) saturate(1.1);
	border-radius: var(--r-md);
}
body.has-bg-video .service-list .service-item__detail-inner {
	border-top-color: rgba(240,235,225,0.22);
	padding-left: 1.1rem;
	padding-right: 1.1rem;
}
body.has-bg-video .service-list .service-item__detail-col h4 {
	color: var(--c-gold-soft);
	text-shadow: 0 1px 5px rgba(15,14,9,0.6);
}
body.has-bg-video .service-list .service-item__detail-col li {
	color: var(--c-cream-text);
	text-shadow: 0 1px 5px rgba(15,14,9,0.6);
}
body.has-bg-video .service-list .service-item__style-strip {
	color: var(--c-cream-text-soft);
	padding: 0 1.1rem;
	text-shadow: 0 1px 5px rgba(15,14,9,0.6);
}
body.has-bg-video .service-list .service-item__style-strip strong {
	color: var(--c-gold-soft);
}

/* ---- Page header ----
   The eyebrow ("Treatments") is script-face gold at small size — the single
   hardest thing to read on a bright frame anywhere on the site. */
body.has-bg-video .page-header .eyebrow {
	color: var(--c-gold-soft);
	text-shadow: 0 2px 10px rgba(15,14,9,0.65);
}
body.has-bg-video .page-header h1 {
	text-shadow: 0 2px 22px rgba(15,14,9,0.55);
}

/* ---- Section headings and body copy on interior pages ---- */
body.has-bg-video .section-head h2,
body.has-bg-video .section-head .eyebrow,
body.has-bg-video .rich-content h2,
body.has-bg-video .rich-content h3 {
	color: var(--c-cream-text);
	text-shadow: 0 1px 14px rgba(20,22,14,0.45);
}
body.has-bg-video .rich-content p,
body.has-bg-video .rich-content li,
body.has-bg-video .section-head p {
	color: var(--c-cream-text-soft);
	text-shadow: 0 1px 10px rgba(20,22,14,0.45);
}

/* ---- Ghost buttons ----
   A hairline dark border on photography disappears entirely. Over media the
   ghost variant becomes a light outline with its own faint scrim. */
body.has-bg-video .btn--ghost {
	border-color: rgba(240,235,225,0.6);
	color: var(--c-cream-text);
	background: rgba(18,17,12,0.35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
body.has-bg-video .btn--ghost:hover {
	background: var(--c-cream-text);
	border-color: var(--c-cream-text);
	color: #1a1a14;
}

/* ---- Text links ---- */
body.has-bg-video .text-link {
	color: var(--c-gold-soft);
	text-shadow: 0 1px 6px rgba(15,14,9,0.6);
}
body.has-bg-video .text-link:hover { color: var(--c-cream-text); }

/* ---- Empty states and dashed borders ---- */
body.has-bg-video .service-empty {
	border-color: rgba(240,235,225,0.3);
	color: var(--c-cream-text-soft);
	background: rgba(18,17,12,0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: var(--r-md);
}

/* Without backdrop-filter every scrim above would be a flat wash that still
   lets a busy frame through. Opacity goes up across the board instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.has-bg-video .filter-btn,
	body.has-bg-video .juice-tag,
	body.has-bg-video .juice-summary,
	body.has-bg-video .service-item__detail-toggle,
	body.has-bg-video .btn--ghost { background: rgba(18,17,12,0.82); }
	body.has-bg-video .service-list .service-item__detail { background: rgba(18,17,12,0.86); }
}

/* Blur is the expensive part, not the scrim. Phones keep the contrast and
   drop the blur. */
@media (max-width: 700px) {
	body.has-bg-video .filter-btn,
	body.has-bg-video .juice-tag,
	body.has-bg-video .juice-summary,
	body.has-bg-video .service-item__detail-toggle,
	body.has-bg-video .btn--ghost,
	body.has-bg-video .service-list .service-item__detail {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	body.has-bg-video .filter-btn { background: rgba(18,17,12,0.78); }
	body.has-bg-video .service-list .service-item__detail { background: rgba(18,17,12,0.82); }
}

/* ==========================================================================
   Staff pop-up features — spotlight carousel, hover popovers, "Meet the
   Specialist" mini-card, and the booking-flow confirmation card.
   ========================================================================== */

/* ---------- Homepage spotlight carousel ---------- */
.staff-spotlight-section { padding: var(--section-pad-y) var(--section-pad-x); }
.staff-spotlight-section__inner { max-width: var(--container); margin: 0 auto; }
.staff-spotlight-section__intro { text-align: center; max-width: 640px; margin: 0 auto var(--s-7); }
.staff-spotlight-section__intro h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: var(--s-2) 0 0; }
.staff-spotlight-section__cta { display: flex; justify-content: center; margin-top: var(--s-6); }

.staff-spotlight { max-width: 620px; margin: 0 auto; }
.staff-spotlight__viewport { overflow: hidden; border-radius: var(--r-lg); }
.staff-spotlight__track { display: flex; transition: transform var(--dur-slow) var(--ease-out); }
.staff-spotlight__slide {
	flex: 0 0 100%;
	display: flex; align-items: center; gap: var(--s-6);
	padding: var(--s-6);
	background: var(--glass-bg-soft);
	border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
	backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
}
.staff-spotlight__media {
	flex: 0 0 auto; width: 108px; height: 108px; border-radius: 50%;
	overflow: hidden; box-shadow: var(--shadow-2);
}
.staff-spotlight__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.staff-spotlight__avatar {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	background: var(--c-green); color: var(--c-cream-text); font-family: var(--font-serif);
	font-size: 1.6rem; font-weight: 600;
}
.staff-spotlight__name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; margin: 0; }
.staff-spotlight__role { margin: var(--s-1) 0 0; color: var(--c-gold); font-weight: 600; font-size: 0.92rem; }
.staff-spotlight__specialty { margin: var(--s-2) 0 0; color: var(--c-text-light); font-size: 0.86rem; }

.staff-spotlight__dots { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-5); }
.staff-spotlight__dot {
	width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
	background: var(--c-line); cursor: pointer; transition: background var(--dur-fast), transform var(--dur-fast);
}
.staff-spotlight__dot.is-active { background: var(--c-gold); transform: scale(1.3); }

@media (max-width: 640px) {
	.staff-spotlight__slide { flex-direction: column; text-align: center; gap: var(--s-4); }
}

/* ---------- Hover popover on [lumoni_staff] mentions in content ---------- */
.staff-mention {
	cursor: pointer; font-weight: 600; color: var(--c-gold);
	border-bottom: 1px dashed var(--c-gold); transition: color var(--dur-fast);
}
.staff-mention:hover, .staff-mention:focus { color: var(--c-green); }

.staff-popover {
	position: absolute; z-index: 999; width: 280px; max-width: calc(100vw - 24px);
	display: flex; gap: var(--s-3); padding: var(--s-4);
	background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
	border-radius: var(--r-md); box-shadow: var(--shadow-3);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	opacity: 0; transform: translateY(6px) scale(0.97);
	transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
	pointer-events: none;
}
.staff-popover.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.staff-popover--flip { transform-origin: top center; }
.staff-popover__media { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; }
.staff-popover__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.staff-popover__avatar {
	width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	background: var(--c-green); color: var(--c-cream-text); font-weight: 700; font-size: 0.95rem;
}
.staff-popover__name { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 0.98rem; }
.staff-popover__role { margin: 2px 0 0; color: var(--c-gold); font-size: 0.8rem; font-weight: 600; }
.staff-popover__bio { margin: var(--s-2) 0 0; font-size: 0.8rem; color: var(--c-text-light); line-height: 1.4; }
.staff-popover__link { display: inline-block; margin-top: var(--s-2); font-size: 0.78rem; font-weight: 600; color: var(--c-green); }

/* ---------- "Meet the Specialist" mini-card on Services page ---------- */
.service-specialist {
	display: inline-flex; align-items: center; gap: var(--s-3);
	margin-top: var(--s-4); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
	background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
	border-radius: var(--r-pill);
	-webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
	opacity: 0; transform: translateY(10px) scale(0.96);
	transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.service-specialist.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.service-specialist__photo, .service-specialist__avatar {
	width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
}
.service-specialist__avatar {
	display: flex; align-items: center; justify-content: center;
	background: var(--c-green); color: var(--c-cream-text); font-weight: 700; font-size: 0.78rem;
}
.service-specialist__text { display: flex; flex-direction: column; line-height: 1.25; }
.service-specialist__eyebrow { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-light); }
.service-specialist__name { font-weight: 700; font-size: 0.88rem; }

/* ---------- Booking flow: "X will be your specialist" confirmation ---------- */
.booking-form__field--staff { position: relative; }
.staff-popup {
	display: flex; align-items: center; gap: var(--s-3);
	margin-top: var(--s-3); padding: var(--s-3);
	background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
	border-radius: var(--r-md);
	-webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
	opacity: 0; transform: translateX(-8px);
	transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.staff-popup.is-visible { opacity: 1; transform: translateX(0); }
.staff-popup__media, .staff-popup__avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.staff-popup__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.staff-popup__avatar {
	display: flex; align-items: center; justify-content: center;
	background: var(--c-green); color: var(--c-cream-text); font-weight: 700; font-size: 0.8rem;
}
.staff-popup__eyebrow { margin: 0; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-light); }
.staff-popup__name { margin: 1px 0 0; font-weight: 700; font-size: 0.9rem; }
.staff-popup__role { margin: 1px 0 0; font-size: 0.78rem; color: var(--c-gold); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.staff-popover, .staff-popup, .service-specialist { transition: none; }
	.service-specialist { opacity: 1; transform: none; }
}

/* ==========================================================================
   Consultation Form page (page-consultation.php)
   Reuses .booking-form / .checkbox-group / .checkbox-pill from the booking
   and juice-order forms above rather than introducing a parallel system —
   only the layout wrappers below are new.
   ========================================================================== */
.consult-form { max-width: 820px; }
.consult-section { padding: 2rem 0; border-top: 1px solid var(--c-line); }
.consult-section:first-of-type { border-top: none; padding-top: 0; }
.consult-section__title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.consult-section__hint { font-size: 0.82rem; color: var(--c-text-light); margin-bottom: 1.2rem; }

.consult-yesno-grid { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.2rem; }
.consult-yesno-row {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 0.7rem 0; border-bottom: 1px solid var(--c-line); flex-wrap: wrap;
}
.consult-yesno-row span { font-size: 0.9rem; }
.consult-yesno-row .checkbox-group { gap: 0.5rem; }

.consult-conditions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2rem; margin-bottom: 1.2rem; }
.consult-condition-group h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.6rem; }
.consult-condition-group .checkbox-group { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.consult-condition-group .checkbox-pill { border: none; padding: 0.1rem 0; font-size: 0.82rem; border-radius: 0; }

.consult-consent {
	display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--c-text-light);
	padding: 1rem 1.1rem; border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-card); margin-bottom: 1.2rem;
}
.consult-consent input { margin-top: 0.2rem; accent-color: var(--c-green); }

@media (max-width: 640px) {
	.consult-conditions-grid { grid-template-columns: 1fr; }
	.consult-yesno-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}