/* Zen Alchemy Spa – public styles. One DOM for all screen sizes; layout adapts with CSS only. */

/* Self-hosted brand fonts (Latin subset, OFL). `swap` shows text immediately in the fallback font. */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/cormorant-garamond-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url("/assets/fonts/outfit-300-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks: until the brand fonts arrive, text is set in a local font scaled to the same
   average glyph width and vertical metrics, so the swap doesn't rewrap headings and shift the layout (CLS).
   Values measured against Times New Roman / Arial for the weights the site uses (Cormorant 500, Outfit 300 and 600). The serif width is tuned on the
   60 page H1s (above the fold, so they drive CLS) at phone to desktop widths: 89.5% wraps like the brand
   font in 476 of 480 cases, incl. the homepage H1 on 412px phones. Android has neither local font and
   falls back as before. */
@font-face {
	font-family: "Cormorant Garamond Fallback";
	font-weight: 400 600;
	src: local("Times New Roman"), local("TimesNewRomanPSMT");
	size-adjust: 96.5%;
	ascent-override: 95.75%;
	descent-override: 29.74%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Outfit Fallback";
	font-weight: 300 500;
	src: local("Arial"), local("ArialMT");
	size-adjust: 97.77%;
	ascent-override: 102.28%;
	descent-override: 26.59%;
	line-gap-override: 0%;
}
/* Bold labels and buttons (Outfit 600): real Arial Bold, width measured against Outfit 600 on the site's labels. */
@font-face {
	font-family: "Outfit Fallback";
	font-weight: 600 700;
	src: local("Arial Bold"), local("Arial-BoldMT");
	size-adjust: 94.5%;
	ascent-override: 105.82%;
	descent-override: 27.51%;
	line-gap-override: 0%;
}

/* ==== Design system (Phase 18) ======================================================================
   Structure after the owner's "Wellnest" reference; colours, curves and fonts from Zen Alchemy.
   Colours measured from the Framer site. Text contrast (WCAG AA): terracotta on cream 5.1:1, white on
   terracotta 5.6:1, slate on cream 4.7:1. Soft terracotta is decorative only. */
:root {
	--terracotta: #b3431b;
	--terracotta-dark: #933614;
	--terracotta-tint: #f4e3da;
	--navy: #232a56;
	--sand: #dbcfbf;
	--sand-light: #ece4da;
	--cream: #f6f3f0;
	--paper: #fffdfb;
	--charcoal: #232e3a;
	--slate: #616f7d;
	--ink: #2b2f36;
	--soft: #c67253;
	--line: #e6ddd2;
	--focus: #0b57d0;
	--r-sm: 12px;
	--r-md: 20px;
	--r-lg: 28px;
	--r-xl: 44px;
	--r-image: var(--r-lg);
	--shadow: 0 1px 2px rgba(35, 46, 58, .05), 0 12px 32px -12px rgba(35, 46, 58, .18);
	--wrap: min(1160px, 100% - 32px);
	--gutter: max(16px, (100% - 1160px) / 2);
	--serif: "Cormorant Garamond", "Cormorant Garamond Fallback", Georgia, "Times New Roman", serif;
	--sans: "Outfit", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ink);
	background: var(--cream);
	font: 300 17px/1.65 var(--sans);
	-webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; overflow-x: clip; }
img, iframe, video { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--terracotta); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; color: var(--navy); letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); margin: .2em 0 .35em; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); margin: 0 0 .45em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 1.1em 0 .35em; }
h4, h5, h6 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: .9em 0 .3em; color: var(--ink); }
p { margin: 0 0 1em; }
strong, b { font-weight: 600; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 14px; z-index: 20; border-radius: var(--r-sm); }
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Buttons ---- */
.button, .page-home section > p > a:only-child {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
	padding: 12px 24px; border-radius: 999px; border: 1.5px solid var(--terracotta);
	background: var(--terracotta); color: #fff; text-decoration: none;
	font: 500 .8rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
	transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.button:hover, .page-home section > p > a:only-child:hover { background: var(--terracotta-dark); border-color: var(--terracotta-dark); }
.button:active { transform: translateY(1px); }
.button-ghost { background: transparent; color: var(--terracotta); }
.button-ghost:hover { background: var(--terracotta); color: #fff; }

/* ---- Header ---- */
.site-header {
	position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
	padding: 14px var(--gutter); background: rgba(246, 243, 240, .94); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
.logo { order: 0; }
.logo img { height: 30px; width: auto; }
.site-nav { order: 2; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav > ul { display: flex; gap: 6px 22px; list-style: none; margin: 0; padding: 0; align-items: center; }
.site-nav a, .site-nav summary { color: var(--ink); text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .14em; white-space: nowrap; cursor: pointer; padding: 6px 0; display: inline-block; }
.site-nav a:hover, .site-nav summary:hover { color: var(--terracotta); }
.site-nav a[aria-current="page"] { color: var(--terracotta); box-shadow: inset 0 -2px 0 currentColor; }
.has-menu { position: relative; }
.has-menu summary { list-style: none; }
.has-menu summary::-webkit-details-marker { display: none; }
.has-menu summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); }
.has-menu details ul { list-style: none; margin: 0; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); position: absolute; top: calc(100% + 6px); left: -10px; display: grid; gap: 2px; min-width: 230px; z-index: 11; }
.has-menu details ul a { color: var(--ink); display: block; padding: 8px 12px; border-radius: var(--r-sm); }
.has-menu details ul a:hover { background: var(--cream); }
.nav-cta { order: 1; margin-left: auto; min-height: 40px; padding: 10px 18px; }
@media (min-width: 1200px) {
	.site-nav { order: 1; flex: 1 1 auto; display: flex; justify-content: center; overflow: visible; }
	.nav-cta { order: 2; margin-left: 0; }
}

/* Homepage: the header sits on the hero */
.photo-hero .site-header { position: absolute; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom: 0; }
.photo-hero .site-header .logo img { filter: brightness(0) invert(1); }
.photo-hero .site-header > .site-nav > ul > li > a, .photo-hero .site-header > .site-nav summary { color: #fff; }
.photo-hero .site-header > .site-nav > ul > li > a:hover, .photo-hero .site-header > .site-nav summary:hover { color: var(--sand); }

/* ---- Main layout ---- */
main { display: block; padding-bottom: 72px; }
main > .breadcrumbs, main > article, main > .closing-cta { width: var(--wrap); margin-inline: auto; }
main > article:not(.page-home) { padding-top: clamp(24px, 4vw, 48px); }
main > .breadcrumbs { padding-top: 20px; }
main > .page-home { width: 100%; }
.page > p, .page > section > p, .treatment-body > p { max-width: 68ch; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--slate); }
.eyebrow, .spaced { font: 600 .78rem/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 .9em; }
h2.spaced, h3.spaced { font-size: .9rem; color: var(--slate); letter-spacing: .3em; }
.notice { font-size: .9rem; color: var(--slate); }
figure { margin: 20px 0; }
.page > section { margin-top: clamp(40px, 6vw, 72px); }
.hero-image img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r-xl); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 32px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-image); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; font-size: .85rem; color: var(--slate); }
.breadcrumbs a { color: var(--slate); }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; }
.display-price { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500; color: var(--terracotta); margin: .1em 0; }

/* ---- Cards (treatment menu, image tiles) ---- */
.cards { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-2px); }
.card h3, .card h4 { margin: 0; font-family: var(--serif); font-size: 1.35rem; color: var(--navy); }
.card h3 a, .card h4 a { color: inherit; text-decoration: none; }
.card p { margin: 0; color: var(--slate); }
.card .price { color: var(--terracotta); font-weight: 600; margin-top: auto; padding-top: 8px; }
.card .more { font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.mobile-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.media-cards { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.media-card { background: var(--paper); border-radius: var(--r-lg); padding: 10px 10px 18px; box-shadow: var(--shadow); text-align: center; }
.media-card figure { margin: 0; }
.media-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-image); }
.media-card h3, .media-card h4 { margin: 14px 8px 0; font-size: 1.3rem; }
.category-nav ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 8px; }
.category-nav a { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: .9rem; }
.category-nav a:hover { border-color: var(--terracotta); color: var(--terracotta); }
.menu-section { scroll-margin-top: 110px; }

/* ---- Treatment page (after Framer, measured at 1440/390px) ----
   1000px column: back link, then text (520px) beside the door-arch photo (400×480; arches are owner-approved
   here and in the Corporate Wellness splits only). "More …" links below, as built before. */
main > .treatment { width: min(1000px, 100% - 32px); }
main > article.treatment { padding-top: 32px; }
.treatment-back { margin: 0 0 32px; }
.treatment-back .back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: #333941; font: 300 16px/1.5 var(--sans); letter-spacing: 0; text-transform: none; text-decoration: none; }
.treatment-back .back svg { color: var(--navy); transition: transform .2s; }
.treatment-back .back:hover svg { transform: translateX(-3px); }
.treatment-main { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 400px); justify-content: space-between; column-gap: 60px; align-items: start; padding: 0 0 0 20px; }
.treatment.no-image .treatment-main { grid-template-columns: minmax(0, 680px); }
.treatment-header { margin: 0 0 25px; }
.treatment-category { margin: 0 0 8px; font: 500 20px/1.4 var(--serif); color: var(--charcoal); }
.treatment-header h1 { margin: 0 0 8px; font-size: clamp(36px, 3.3vw, 47.2px); line-height: 1.3; color: var(--navy); }
.treatment-subtitle { margin: 0; font: 600 16px/1.4 var(--sans); color: #333941; }
.treatment-body > p, .treatment-body > ul { max-width: none; margin: 0 0 24px; font-size: 16px; line-height: 1.5; color: #333941; }
.treatment-body h2, .treatment-body .prices h3 { margin: 24px 0 8px; font-size: 22.4px; line-height: 1.3; color: var(--navy); }
.treatment-body .prices { margin: 0 0 44px; }
.treatment-body .prices > p { margin: 0 0 8px; font-size: 15.2px; color: #333941; }
.treatment .price-table { width: auto; margin: 0 0 8px; background: none; border-radius: 0; }
.treatment .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.treatment .price-table th, .treatment .price-table td { padding: 0 40px 8px 0; border: 0; font: 300 16px/1.5 var(--sans); color: var(--navy); vertical-align: top; }
.treatment .price-table td { min-width: 80px; }
.treatment .price-table .price { padding-right: 0; font-weight: 600; color: #333941; white-space: nowrap; }
.treatment .actions { margin: 0 0 24px; }
.treatment .actions .button { min-height: 50px; padding: 13px 33px; border-color: var(--navy); border-radius: 24px; background: var(--navy); color: var(--cream); font: 600 16px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.treatment .actions .button:hover { background: #171c3d; border-color: #171c3d; }
.treatment .notice { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--slate); }
.treatment .guide-link { margin: 12px 0 0; font-size: 15.2px; }
.treatment-image { margin: 0; }
.treatment-image img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 400 / 480; object-fit: cover; border-radius: 50% 50% 4px 4px / 41.667% 41.667% 4px 4px; }
.treatment > .related-treatments { margin: 80px 20px 0; }
@media (max-width: 899px) {
	.treatment-main { grid-template-columns: 1fr; padding: 0; }
	.treatment-image { order: -1; margin-bottom: 24px; }
	.treatment-back { margin-bottom: 20px; }
	.treatment-header h1 { font-size: 33.6px; }
	.treatment .actions .button { width: 100%; }
	.treatment > .related-treatments { margin: 56px 0 0; }
}
.prices h2, .prices h3 { font-size: 20.8px; margin-top: 1.2em; }
.price-table { border-collapse: separate; border-spacing: 0; margin: 10px 0 14px; width: min(460px, 100%); background: var(--cream); border-radius: var(--r-md); overflow: hidden; }
.price-table th, .price-table td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.price-table tr:last-child > * { border-bottom: 0; }
.price-table thead th { font-size: 11.52px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); font-weight: 600; }
.price-table .price { font-weight: 600; color: var(--terracotta); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.feature-treatment { background: var(--paper); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); margin: 20px 0; box-shadow: var(--shadow); }
.guide-link a { font-weight: 600; }
.back { font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* ---- Steps, accordion ---- */
.steps { list-style: none; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.steps > li { background: var(--paper); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
.step-number { display: block; font: 500 2.4rem/1 var(--serif); color: var(--terracotta); margin-bottom: 8px; }
.steps h3, .steps h4 { margin-top: 0; }
/* One accordion design for every FAQ and T&C list (owner, 2026-09-30): rounded card, semi-bold questions, + in a soft
   terracotta circle on the right, thin lines between items. White card on beige sections, beige card on white ones. */
.accordion { max-width: 860px; margin: 16px auto 0; background: var(--paper); border-radius: var(--r-lg); padding: 6px clamp(14px, 3vw, 28px); box-shadow: var(--shadow); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion details:last-child { border-bottom: 0; }
.accordion summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font-weight: 600; position: relative; color: var(--ink); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--terracotta-tint) linear-gradient(var(--terracotta), var(--terracotta)) center / 10px 1.5px no-repeat; }
.accordion summary::before { content: ""; position: absolute; right: 14.25px; top: 50%; width: 1.5px; height: 10px; margin-top: -5px; background: var(--terracotta); z-index: 1; transition: transform .2s; }
.accordion details[open] summary::before { transform: scaleY(0); }
.accordion .answer { padding: 0 0 18px; color: var(--slate); }
.accordion .answer ul { padding-left: 20px; }

/* ---- Spa Pass pricing: see "Spa Pass (/spa-pass)" below (.pass-cards, also on the homepage) ---- */

/* ---- Promotions, embeds, links page ---- */
.embed { margin: 16px 0; }
.embed iframe { border: 0; border-radius: var(--r-lg); width: 100%; }
.embed-video iframe { aspect-ratio: 16 / 9; height: auto; }
.embed-map iframe { aspect-ratio: 4 / 3; height: auto; max-height: 460px; }
/* ---- Links page (/links), after the Framer design (measured at 390/1440px): charcoal page, sand logo and lines,
   one outlined 60px button per row (400px wide on desktop), terracotta icon on the left. Buttons are edited in the
   CMS under "Link buttons". */
body.type-links { background: var(--charcoal); }
.type-links main { max-width: 1336px; margin: 0 auto; padding: 46px 20px 80px; text-align: center; }
.type-links main > article { width: 100%; padding-top: 0; }
.links-logo { margin: 0 auto; display: flex; justify-content: center; }
.links-logo img { height: 55px; width: auto; max-width: 100%; }
.links-intro { margin: 40px 0 73px; }
.links-intro p { max-width: none; margin: 0; font: 500 22px/1.5 var(--sans); color: var(--sand); }
.link-buttons { list-style: none; max-width: 400px; margin: 0 auto; padding: 0; display: grid; gap: 10px; }
.link-btn { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 2px 52px; border: 1px solid #eeefef; border-radius: 32px; color: var(--cream); font: 600 18px/27px var(--sans); text-decoration: none; transition: background-color .2s, color .2s; }
.link-btn:hover { background: rgba(246, 243, 240, .08); }
.link-btn:focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; }
.link-icon { position: absolute; left: 22px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); color: var(--soft); }
@media (max-width: 599px) {
	.links-logo img { height: 43px; }
	.links-intro { margin: 40px 0; }
	.links-intro p { font-size: 18px; }
}
.links-404 { line-height: 2; }

/* ---- Internal links ---- */
.related { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); grid-column: 1 / -1; }
.related h2 { font-size: 1.5rem; }
.related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.related a { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; }
.related a:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* ==== Homepage ======================================================================================= */
.page-home > section { padding: clamp(56px, 8vw, 104px) var(--gutter); margin: 0; }
.page-home > section > h2 { max-width: 20ch; }

/* Hero: poster (LCP) + video behind a gradient; curved bottom edge */
.hero { position: relative; isolation: isolate; min-height: min(100svh, 860px); display: flex; align-items: flex-end; color: #fff; border-radius: 0 0 var(--r-xl) var(--r-xl); overflow: hidden; background: var(--charcoal); }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video { opacity: 0; transition: opacity 1s ease; }
.hero-media.is-playing .hero-video { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 18, 15, .82) 0%, rgba(24, 18, 15, .55) 42%, rgba(24, 18, 15, .12) 78%), linear-gradient(0deg, rgba(24, 18, 15, .6) 0%, transparent 45%); }
.hero-inner { width: 100%; padding: 150px var(--gutter) clamp(40px, 6vw, 72px); display: grid; gap: 28px; align-items: end; }
.hero-content { max-width: 640px; }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 5.4vw, 4rem); margin: 0 0 .35em; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.hero .lead { color: rgba(255, 255, 255, .9); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 30px; }
.hero .button-ghost { color: #fff; border-color: rgba(255, 255, 255, .8); }
.hero .button-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.social-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.social-proof p { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .9); }
.social-proof strong { font: 500 1rem/1 var(--sans); letter-spacing: .01em; color: #fff; margin-right: 4px; }
.avatars { display: inline-flex; }
.avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sand); display: grid; place-items: center; color: #fff; margin-left: -13px; overflow: hidden; }
.avatar svg { width: 17px; height: 17px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar:first-child { margin-left: 0; }
.avatar-0 { background: var(--terracotta); }
.avatar-1 { background: var(--soft); }
.avatar-2 { background: var(--navy); }
.avatar-3 { background: #8a7a66; }
.proof-rating .stars { color: #f2c46b; letter-spacing: 2px; margin-right: 4px; }
.award-card { justify-self: start; display: flex; align-items: center; gap: 14px; max-width: 340px; padding: 14px 18px 14px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(12px); order: -1; }
.award-card p { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .18em; line-height: 1.5; color: #fff; }
.award-seal { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, #f7e2b0, #d8a95a); color: var(--navy); box-shadow: 0 0 0 4px rgba(247, 226, 176, .25); }
@media (min-width: 900px) {
	.hero-inner { grid-template-columns: minmax(0, 640px) 1fr; }
	.award-card { order: 0; justify-self: end; }
}

/* Treatment tiles */
.page-home .section-cards { text-align: center; }
.page-home .section-cards > h2, .page-home .section-cards > p { margin-inline: auto; }
.page-home .section-cards > p:not(:has(a)) { color: var(--slate); max-width: 64ch; }
.page-home .section-cards .media-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 36px 0 32px; }

/* Core features: text column + list */
.section-features { background: var(--paper); border-radius: var(--r-xl); margin-inline: clamp(0px, 2vw, 24px) !important; }
@media (min-width: 900px) {
	.page-home .section-features { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 64px; align-content: start; }
	.section-features > :not(.feature-list) { grid-column: 1; }
	.section-features > .feature-list { grid-column: 2; grid-row: 1 / span 6; }
}
.section-features > p:not(.eyebrow) { color: var(--slate); }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; }
.feature { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.feature:last-child { border-bottom: 0; }
.feature-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--terracotta-tint); color: var(--terracotta); }
.feature h3, .feature h4 { margin: 2px 0 4px; font-size: 1.3rem; }
.feature p { margin: 0; color: var(--slate); }

/* About: text + image, with the soft circle from the Framer site */
@media (min-width: 900px) {
	.page-home .section-split { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 72px; align-items: center; }
	.section-split > :not(.split-image) { grid-column: 1; }
	.section-split > .split-image { grid-column: 2; grid-row: 1 / span 6; }
}
.section-split > p:not(.eyebrow) { color: var(--slate); }
.split-image { position: relative; margin: 24px 0 0; }
.split-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-image); }
.split-image::after { content: ""; position: absolute; width: 84px; height: 84px; border-radius: 50%; background: var(--soft); right: -14px; bottom: 28px; z-index: -1; }

/* Instagram reels */
.section-reels { text-align: center; }
.section-reels > h2 { margin-inline: auto; }
/* Owner: these homepage headings stay on one line; on the smallest phones the size shrinks to fit (~10em per line). */
.page-home :is(.section-reels, .section-pricing) > h2 { max-width: none; white-space: nowrap; font-size: min(clamp(1.8rem, 3.8vw, 2.7rem), calc((100vw - 56px) / 10.2)); }
.reels { list-style: none; padding: 4px 2px 12px; margin: 28px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.reels > li { scroll-snap-align: start; }
.reel, .reel-frame { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--sand); width: 100%; border: 0; }
video.reel-frame { object-fit: cover; background: #000; }
.reel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
/* With JS (site.js adds .is-carousel): a looping carousel, 3 at a time on wider screens (the middle one larger), one
   with peeks on phones; arrows at the sides. The cards are reordered with `order`; the track slides by --shift. */
.reel-carousel.is-carousel { --reel-w: 62%; --reel-mid: 3; position: relative; margin: 28px auto 0; max-width: 1040px; }
.is-carousel .reel-viewport { overflow-x: clip; touch-action: pan-y; }
.is-carousel .reels { display: flex; gap: 0; margin: 0; padding: 10px 0 18px; overflow: visible; scroll-snap-type: none; transform: translateX(calc(50% - (var(--reel-mid) + .5 - var(--shift, 0)) * var(--reel-w))); transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.is-carousel .reels > li { flex: 0 0 var(--reel-w); padding-inline: 8px; box-sizing: border-box; transform: scale(.84); transform-origin: 50% 45%; opacity: .75; transition: transform .45s cubic-bezier(.3, .7, .2, 1), opacity .45s; }
.is-carousel .reels > li.is-active { transform: none; opacity: 1; }
.is-carousel .reels :is(a, img) { -webkit-user-drag: none; user-select: none; }
.is-carousel .reels > li:not(.is-active) .reel-play { transform: scale(.85); }
.reel-arrow { position: absolute; z-index: 2; top: calc(50% - 28px); width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--terracotta); box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center; transition: background-color .2s, color .2s; }
.reel-arrow:hover { background: var(--terracotta); color: #fff; }
.reel-arrow svg { width: 20px; height: 20px; }
.reel-prev { left: 6px; }
.reel-next { right: 6px; }
@media (min-width: 700px) {
	.reel-carousel.is-carousel { --reel-w: 33.333%; padding-inline: 64px; }
	.is-carousel .reels > li { padding-inline: 12px; }
	.reel-arrow { width: 48px; height: 48px; }
	.reel-prev { left: 0; }
	.reel-next { right: 0; }
}
@media (prefers-reduced-motion: reduce) { .is-carousel .reels, .is-carousel .reels > li { transition: none; } }
.is-init .reels, .is-init .reels > li { transition: none !important; }
/* The Instagram link under the videos is a secondary (outline) button. */
.page-home .section-reels > p:last-child { margin: 28px auto 0; }
.page-home .section-reels > p > a:only-child { background: transparent; color: var(--terracotta); }
.page-home .section-reels > p > a:only-child:hover { background: var(--terracotta); color: #fff; }
.reel:hover img { transform: scale(1.03); }
.reel-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.reel-play::after { content: ""; position: absolute; left: 23px; top: 18px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--terracotta); }

/* Spa Pass on the homepage */
.page-home .section-pricing { background: var(--sand-light); border-radius: var(--r-xl); margin-inline: clamp(0px, 2vw, 24px) !important; text-align: center; }
.page-home .section-pricing > h2, .page-home .section-pricing > p { margin-inline: auto; }

/* Google reviews (filled in by site.js when the section scrolls into view) */
.review-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.review-list:empty { display: none; }
.review-card { background: var(--paper); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.review-head { display: flex; align-items: center; gap: 12px; }
.review-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.review-initial { display: grid; place-items: center; background: var(--terracotta-tint); color: var(--terracotta); font-weight: 600; }
.review-author { margin: 0; line-height: 1.3; }
.review-author a, .review-author > span:first-child { color: var(--ink); font-weight: 600; text-decoration: none; display: block; }
.review-when { display: block; font-size: .82rem; color: var(--slate); }
.review-card .stars { color: #d69e2e; letter-spacing: 2px; }
.review-text { margin: 0; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.review-source { margin-top: auto; font-size: .82rem; font-weight: 600; }
.reviews-note { font-size: .85rem; color: var(--slate); }

/* FAQ */
.page-home .section-faq > h2 { text-align: center; margin-inline: auto; }

/* ==== Closing call to action + footer (as on the current Zen Alchemy site) =============================
   Band: cream → sand gradient. Card: photo left (~45%), navy panel right, 16px corners. Footer: flat
   charcoal, beige logo left, columns from ~60% of the width, round outline social icons, centred ©. */
:root { --band: calc(100% - 2 * clamp(16px, 4.8vw, 96px)); }
main:has(> .closing-cta) { padding-bottom: 0; }
main > .closing-cta { width: 100%; }
.closing-cta { margin-top: clamp(48px, 7vw, 96px); padding: 24px 0 48px; background: linear-gradient(180deg, var(--cream) 0%, #dcd0c1 100%); }
.closing-card { width: var(--band); margin: 0 auto; display: grid; grid-template-columns: 1fr; border-radius: 16px; overflow: hidden; background: var(--navy); }
.closing-image { margin: 0; }
.closing-image img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; }
.closing-body { padding: clamp(32px, 6vw, 100px) clamp(24px, 5vw, 96px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 28px; }
.closing-body h2 { margin: 0; color: #fff; font-size: clamp(2rem, 3.4vw, 3.3rem); max-width: none; }
@media (min-width: 800px) {
	.closing-card { grid-template-columns: 45% 1fr; min-height: 356px; }
	.closing-image img { aspect-ratio: auto; position: absolute; inset: 0; }
	.closing-image { position: relative; }
}

.site-footer { background: var(--charcoal); color: rgba(246, 243, 240, .86); padding: clamp(56px, 7vw, 104px) 0 32px; font-size: .875rem; }
.footer-inner { width: var(--band); margin: 0 auto; display: grid; gap: 40px; justify-items: center; text-align: center; }
.footer-logo img { height: 46px; width: auto; }
.footer-cols { display: grid; gap: 32px; justify-items: center; }
.footer-cols h2 { font: 400 .8rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #8e97a3; margin: 0 0 22px; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px 64px; }
.footer-cols a { color: rgba(246, 243, 240, .88); text-decoration: none; font-weight: 400; letter-spacing: .06em; }
.footer-cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-wide ul { grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
.social-icons { grid-auto-flow: column; gap: 18px !important; }
.social-icons a { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid rgba(246, 243, 240, .8); border-radius: 50%; }
.social-icons a:hover { background: rgba(246, 243, 240, .1); text-decoration: none; }
.copyright { margin: clamp(48px, 7vw, 96px) 0 0; text-align: center; color: rgba(246, 243, 240, .8); font-size: .8rem; }
/* Desktop, as on the current site (owner, 2026-09-30; measured on Framer at 1440px): 80px padding (24px under the
   copyright), logo 244×44 at left; fixed-width columns ending 80px from the right: Locations 160, Quick links 144 + 160
   (3 rows, "About" as a 4th row under Promotions), Social 120; 12px slate headings, 20px to 12px/300 sand capitals
   every 26px; 32px social rings 50px apart; copyright 12px/300 cream, centred, 88px below the columns. Below 1440px
   the columns narrow in proportion. */
@media (min-width: 900px) {
	.site-footer { padding: clamp(56px, 5.56vw, 80px) 0 24px; }
	.footer-inner { width: calc(100% - 2 * clamp(40px, 5.56vw, 80px)); grid-template-columns: 1fr auto; gap: 40px; align-items: start; justify-items: stretch; text-align: left; }
	.footer-logo { align-self: start; line-height: 0; }
	.footer-logo img { height: 44px; }
	.footer-cols { grid-auto-flow: column; grid-template-columns: clamp(96px, 11.11vw, 160px) clamp(196px, 21.11vw, 304px) clamp(84px, 8.33vw, 120px); gap: 0; justify-items: start; }
	.footer-cols h2 { margin: 0 0 20px; font: 300 12px/18px var(--sans); letter-spacing: 0; text-transform: none; color: var(--slate); }
	.footer-cols ul { gap: 8px 0; }
	.footer-wide ul { grid-template-columns: clamp(96px, 10vw, 144px) clamp(100px, 11.11vw, 160px); grid-template-rows: repeat(3, auto); }
	.footer-wide li:nth-child(n + 7) { grid-column: 1; grid-row: 4; }
	.footer-cols li { font-size: 12px; line-height: 18px; }
	.footer-cols a { font: 300 12px/18px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--sand); }
	.footer-cols a:hover { color: #fff; }
	.footer-cols .social-icons { gap: 18px !important; }
	.social-icons a { width: 32px; height: 32px; border-width: 1px; color: var(--cream); }
	.social-icons svg { width: 20px; height: 20px; }
	.copyright { margin: 88px 0 0; font-size: 12px; line-height: 18px; font-weight: 300; color: var(--cream); }
}

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

/* ==== Phones ========================================================================================= */
@media (max-width: 699px) {
	.logo img { height: 26px; }
	.nav-cta { min-height: 36px; padding: 8px 14px; font-size: .7rem; letter-spacing: .1em; }
	.hero-media::after { background: linear-gradient(0deg, rgba(24, 18, 15, .85) 0%, rgba(24, 18, 15, .62) 55%, rgba(24, 18, 15, .45) 100%); }
	.hero-inner { padding-top: 140px; }
	.media-cards, .page-home .section-cards .media-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.media-card { padding: 6px 6px 12px; border-radius: var(--r-md); }
	.media-card h3, .media-card h4 { font-size: 1.05rem; margin-top: 10px; }
}
.section-pricing .eyebrow { color: var(--terracotta-dark); }
@media (max-width: 699px) {
	/* Full-width buttons: the font swap can't re-wrap them (no layout shift). */
	.hero-actions .button { flex: 1 1 100%; }
}
@media (max-width: 699px) {
	/* Phones (owner, 2026-10-01): no customer photos; "10k+ Satisfied customers" and "★★★★★ 5.0" on ONE fixed row, so
	   the font swap can't change how the proof line wraps (the hero is bottom-anchored). */
	.social-proof { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding-left: 14px; } /* starts where the button's round end stops (owner) */
	.social-proof .avatars { display: none; }
	.proof-rating { white-space: nowrap; }
	/* The row is ~13.5em wide ("10k+ customers ★★★★★ 5.0"): on the narrowest phones the text scales so it always fits. */
	.social-proof p { font-size: min(.95rem, 4.6vw); }
	.social-proof strong { font-size: 1.05em; }
}
@media (max-width: 699px) {
	/* A size at which the brand serif and its fallback wrap the H1 identically on 360–430px phones (no shift on swap). */
	.hero h1 { font-size: 2.5rem; }
}
/* Same box before and after the font swap (the letter-spaced label can wrap to 3 lines in the fallback). */
.award-card { min-height: 90px; }
.proof-customers { white-space: nowrap; }

/* ==== Revision (owner review, 2026-09-29) ============================================================ */
/* Labels with a phone variant (Framer's phone menu wording) */
.lbl-narrow { display: none; }
.nav-mobile-only { display: none; }
.menu-toggle { display: none; }
.menu-lock { overflow: hidden; }

@media (max-width: 1199px) {
	.lbl-wide { display: none; }
	.lbl-narrow { display: inline; }
	/* Phones and tablets: logo · BOOK · menu button (Framer's phone header) */
	.site-header { border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 6px 20px -12px rgba(35, 46, 58, .35); }
	.photo-hero .site-header { box-shadow: none; }
	.js .site-nav { display: none; }
	.js .menu-toggle { display: inline-grid; place-items: center; order: 2; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; color: var(--navy); cursor: pointer; }
	.photo-hero .menu-toggle { color: #fff; }
	.menu-icon, .menu-icon::before { display: block; width: 26px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s; }
	.menu-icon { position: relative; background: none; }
	.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; width: 26px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s; }
	.menu-icon::before { top: -5px; }
	.menu-icon::after { top: 5px; }
	.js .nav-cta { order: 1; }

	/* Open: full-screen navy menu */
	.site-header.menu-open { position: fixed; inset: 0; z-index: 50; align-content: flex-start; background: var(--navy); border-radius: 0; overflow-y: auto; backdrop-filter: none; }
	.menu-open .logo img { filter: brightness(0) invert(1); opacity: .9; }
	.menu-open .nav-cta { display: none; }
	.menu-open .menu-toggle { color: #fff; margin-left: auto; }
	.menu-open .menu-icon::before { top: 0; transform: rotate(45deg); }
	.menu-open .menu-icon::after { top: 0; transform: rotate(-45deg); }
	.menu-open .site-nav { display: block; order: 3; flex: 1 1 100%; overflow: visible; padding: 48px 0 32px; }
	.menu-open .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.menu-open .site-nav > ul > li { order: var(--mo, 50); text-align: center; }
	.menu-open .site-nav a, .photo-hero .menu-open .site-nav > ul > li > a { display: block; padding: 17px 0; color: #f6f3f0; font-size: 1rem; font-weight: 400; letter-spacing: .16em; }
	.menu-open .site-nav a[aria-current="page"] { color: var(--sand); box-shadow: none; }
	.menu-open .nav-mobile-only { display: block; }
	.menu-open .has-menu { order: 0 !important; padding: 0; margin: 0; }
	.menu-open .has-menu summary, .photo-hero .menu-open .site-nav summary { pointer-events: none; display: block; padding: 17px 0; color: #9ea4bf; font-size: 1rem; line-height: inherit; letter-spacing: .14em; }
	.menu-open .has-menu summary::after { display: none; }
	.menu-open .has-menu details ul { position: static; display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; }
	.menu-open .has-menu details ul li { order: var(--mo, 50); }
	.menu-open .has-menu details ul a:hover { background: none; }
}

/* Services (Wellnest layout): heading left, intro + button right, card carousel with dots */
.page-home .section-services > p:not(:has(> a:only-child)) { color: var(--slate); }
@media (min-width: 900px) {
	.page-home .section-services { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; align-items: end; }
	.section-services > h2 { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; }
	.section-services > p:not(:has(> a:only-child)) { grid-column: 2; grid-row: 1; margin: 0 0 16px; }
	.section-services > p:has(> a:only-child) { grid-column: 2; grid-row: 2; margin: 0; }
	.section-services > .service-carousel { grid-column: 1 / -1; grid-row: 3; }
}
.service-carousel { margin: 40px 0 24px; }
.service-cards { list-style: none; margin: 0; padding: 4px 2px 18px; display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.service-cards::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .service-cards { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (min-width: 1000px) { .service-cards { grid-auto-columns: calc((100% - 40px) / 3); } }
.service-card { position: relative; isolation: isolate; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.service-card figure { margin: 0; }
.service-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.service-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; }
.service-card h3, .service-card h4 { margin: 0; font-size: 1.55rem; }
.service-card h3 a, .service-card h4 a { color: inherit; text-decoration: none; }
.service-card h3 a::after, .service-card h4 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.service-summary { margin: 0; color: var(--slate); font-size: .95rem; }
.service-name { color: var(--ink); font-weight: 500; }
.service-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.service-foot .price { margin: 0; font: 500 1.6rem/1 var(--serif); color: var(--terracotta); }
.service-foot .button { position: relative; z-index: 2; }
.button-small { min-height: 40px; padding: 9px 16px; font-size: .7rem; letter-spacing: .12em; }
/* The middle card is the highlighted one, with its photo filling the card (as in the reference) */
.service-cards > .service-card:nth-child(2) { color: #fff; background: var(--charcoal); }
.service-cards > .service-card:nth-child(2) figure { position: absolute; inset: 0; z-index: -1; }
.service-cards > .service-card:nth-child(2) img { height: 100%; aspect-ratio: auto; }
.service-cards > .service-card:nth-child(2) figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 18, 15, .88) 0%, rgba(24, 18, 15, .45) 55%, rgba(24, 18, 15, .15) 100%); }
.service-cards > .service-card:nth-child(2) .service-body { justify-content: flex-end; padding-top: 180px; }
.service-cards > .service-card:nth-child(2) :is(h3, h4, .service-name) { color: #fff; }
.service-cards > .service-card:nth-child(2) .service-summary { color: rgba(255, 255, 255, .85); }
.service-cards > .service-card:nth-child(2) .price { color: #f2c9a6; }
.service-dots { display: flex; justify-content: center; margin-top: 4px; }
.service-dots[hidden] { display: none; }
/* 24px tap targets around small dots */
.service-dots button { min-width: 24px; height: 24px; padding: 0 4px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.service-dots button::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--sand); transition: width .2s, background-color .2s; }
.service-dots button[aria-current="true"]::before { width: 26px; background: var(--terracotta); }
.service-foot { flex-wrap: wrap; row-gap: 12px; }
.service-foot .price, .service-foot .button { white-space: nowrap; }
.service-foot .price { font-size: 1.45rem; }

/* ==== Header, desktop (owner reference, 2026-09-29) ===================================================
   Logo left; the nav in a translucent pill; the booking button as a separate pill with a round arrow.
   Measured from the reference at 1448px: ~70px side margins, pills 52px tall starting 8px from the top,
   12px between the nav pill and the button, ~34px between nav items. */
.cta-icon { display: none; }
@media (min-width: 1200px) {
	:root { --edge: max(24px, (100% - 1308px) / 2); }
	.site-header { padding: 8px var(--edge); gap: 12px; background: var(--cream); border-bottom: 0; backdrop-filter: none; min-height: 68px; }
	.logo { margin-right: auto; display: flex; align-items: center; }
	.logo img { height: 31px; } /* Framer's header logo is 30.6px tall at every desktop width (owner, 2026-10-01) */
	.site-nav { flex: 0 1 auto; justify-content: flex-end; order: 1; }
	.site-nav > ul { height: 52px; padding: 0 28px; gap: 34px; border-radius: 999px; background: rgba(35, 42, 86, .06); }
	.site-nav a, .site-nav summary { font-size: .8rem; font-weight: 400; letter-spacing: .08em; padding: 0; }
	.site-nav a[aria-current="page"] { box-shadow: none; color: var(--terracotta); }
	.has-menu details ul { top: calc(100% + 18px); left: -18px; }
	.nav-cta { order: 2; height: 52px; min-height: 52px; padding: 0 6px 0 24px; gap: 14px; font-size: .78rem; letter-spacing: .1em; }
	.cta-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--terracotta); }

	/* Over the homepage hero: frosted dark pill, white button with a terracotta arrow (as in the reference) */
	.photo-hero .site-header { background: transparent; }
	.photo-hero .site-header .site-nav > ul { background: rgba(24, 18, 15, .28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
	.photo-hero .site-header .nav-cta { background: #fff; border-color: #fff; color: var(--terracotta); }
	.photo-hero .site-header .nav-cta:hover { background: var(--cream); border-color: var(--cream); }
	.photo-hero .site-header .cta-icon { background: var(--terracotta); color: #fff; }
	.type-home .hero-inner { padding-left: var(--edge); padding-right: var(--edge); }
}
/* The hero sets its own insets: no outer section padding (phones keep the same 2 × gutter text inset). */
.page-home > .hero { padding: 0; }
.hero-inner { padding-left: calc(var(--gutter) * 2); padding-right: calc(var(--gutter) * 2); }
@media (min-width: 1200px) {
	.type-home .hero-inner { padding-left: var(--edge); padding-right: var(--edge); }
}
@media (max-width: 899px) { .footer-wide ul { grid-template-rows: repeat(4, auto); column-gap: 48px; } }

/* ==== About page (owner, 2026-09-29): story, what the name means, the elements ====================== */
/* Intro order: heading, lead, then the wide photo (the renderer places the photo right after the H1). */
main > .page-about { width: 100%; padding-top: 0; display: flex; flex-direction: column; }
.page-about > * { order: 3; }
.page-about > h1 { order: 1; }
.page-about > .hero-image + p { order: 1; }
.page-about > .hero-image { order: 2; }
.page-about > h1, .page-about > .hero-image + p { width: var(--wrap); margin-inline: auto; text-align: center; }
.page-about > h1 { margin-top: clamp(32px, 6vw, 72px); margin-bottom: .3em; font-size: clamp(2.6rem, 6vw, 4.4rem); }
.page-about > .hero-image + p { max-width: 46ch; margin-bottom: 0; color: var(--slate); font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.page-about > .hero-image { width: var(--band); margin: clamp(28px, 4vw, 48px) auto 0; }
.page-about > .related { width: var(--wrap); margin-inline: auto; }
.page-about .about-elements { margin-top: 24px !important; }
.page-about > .hero-image img { aspect-ratio: 21 / 9; max-height: none; border-radius: var(--r-xl); }
@media (max-width: 699px) { .page-about > .hero-image img { aspect-ratio: 4 / 3; } }
.page-about > section { padding: clamp(56px, 8vw, 104px) var(--gutter); margin: 0; }

/* Story + discover: text beside a photo; the photo side alternates */
.page-about .section-split > p:not(.eyebrow):not(:has(> a:only-child)) { color: var(--slate); }
.page-about .section-split > p > a:only-child { display: inline-flex; align-items: center; min-height: 46px; padding: 12px 24px; border-radius: 999px; background: var(--terracotta); color: #fff; text-decoration: none; font: 500 .8rem/1.2 var(--sans); letter-spacing: .14em; }
@media (min-width: 900px) {
	.page-about .section-split { display: grid; grid-template-columns: 1.05fr .95fr; column-gap: 80px; align-items: center; }
	.page-about .section-split > :not(.split-image) { grid-column: 1; }
	.page-about .section-split > .split-image { grid-column: 2; grid-row: 1 / span 6; }
	.page-about .section-split:last-of-type { grid-template-columns: .95fr 1.05fr; }
	.page-about .section-split:last-of-type > :not(.split-image) { grid-column: 2; }
	.page-about .section-split:last-of-type > .split-image { grid-column: 1; }
	.page-about .section-split:last-of-type > .split-image::after { right: auto; left: -14px; }
}

/* What the name means: navy band, the two words set large */
.page-about .about-name { background: var(--navy); color: #e8eaf3; text-align: center; border-radius: var(--r-xl); margin-inline: clamp(0px, 2vw, 24px) !important; }
.about-name h2 { color: #fff; margin-inline: auto; }
.about-name .eyebrow { color: var(--sand); }
.about-name > p:not(.eyebrow) { color: #c9cde0; max-width: 56ch; margin-inline: auto; }
.name-cards { list-style: none; padding: 0; margin: 40px auto 0; max-width: 980px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.name-card { padding: clamp(28px, 4vw, 44px); border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); text-align: left; }
.name-card h3, .name-card h4 { margin: 0 0 12px; color: var(--sand); font-size: clamp(2.8rem, 5vw, 4rem); line-height: 1; }
.name-card p { margin: 0; color: #e8eaf3; font-size: 1.05rem; }

/* The elements: photo cards */
.page-about .about-elements { text-align: center; }
.about-elements > h2, .about-elements > p { margin-inline: auto; }
.about-elements > p:not(.eyebrow) { color: var(--slate); max-width: 56ch; }
.element-cards { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); text-align: left; }
.element-card { background: var(--paper); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.element-card figure { margin: 0; }
.element-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.element-body { padding: 22px 24px 26px; }
.element-card h3, .element-card h4 { margin: 0 0 8px; font-size: 1.7rem; }
.element-card p { margin: 0; color: var(--slate); }

/* Sections fade in as they scroll into view (site.js adds .reveal only below the fold, never without JS) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 699px) {
	/* Element cards: photo beside the text, so three cards don't make a very long column */
	.element-card { display: grid; grid-template-columns: 38% 1fr; }
	.element-card img { height: 100%; aspect-ratio: auto; min-height: 140px; }
	.element-body { padding: 16px 18px; }
	.element-card h3, .element-card h4 { font-size: 1.4rem; }
	.element-card p { font-size: .95rem; }
}
@media (max-width: 699px) {
	/* A size at which the heading wraps the same in the brand serif and its fallback on 320–600px phones. */
	.page-about > h1 { font-size: 2.4rem; }
}

/* ==== Treatment menus (/services, /mobile-spa-treatments), as on the current site ===================
   Measured on Framer at 1440px: navy title band 260px; tab bar 80px (40px pills); menu 1000px wide,
   60px above the first heading, headings 28px spaced serif, 40px to the cards, 120px between sections;
   cards 320×443 (3 per row) or 490 wide (2 per row), 20px gaps, 240px photos, 20px padding, 4px corners. */
main > .page-listing { width: 100%; padding-top: 0; }
.page-listing > h1 { display: grid; place-items: center; min-height: 260px; margin: 0; padding: 40px 16px; background: var(--navy); color: #fff; text-align: center; font-size: clamp(38.4px, 4.2vw, 57.6px); }
.page-listing > .category-nav { padding: 20px 16px; border-bottom: 1px solid var(--line); background: var(--cream); }
.page-listing > .category-nav ul { justify-content: center; gap: 10px; margin: 0; }
.page-listing > .category-nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 19px; border: 1px solid #c9c1b6; border-radius: 999px; background: transparent; color: var(--ink); font-size: 15.2px; font-weight: 300; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.page-listing > .category-nav a:hover { border-color: var(--navy); }
.page-listing > .category-nav a[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 999px) {
	.page-listing > .category-nav { overflow-x: auto; scrollbar-width: none; }
	.page-listing > .category-nav::-webkit-scrollbar { display: none; }
	.page-listing > .category-nav ul { flex-wrap: nowrap; justify-content: flex-start; width: max-content; margin: 0 auto; }
}
.menu-sections { width: min(1000px, 100% - 32px); margin: 0 auto; padding: 60px 0 100px; display: flex; flex-direction: column; gap: 120px; }
.menu-sections .menu-section { margin: 0; scroll-margin-top: 90px; }
.menu-sections .menu-section > .spaced { margin: 0 0 40px; font: 500 28px/1.4 var(--serif); letter-spacing: .35em; color: var(--navy); text-transform: uppercase; }
.menu-section .cards { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.menu-section.cols-2 .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menu-section .card { padding: 0; gap: 0; border: 0; border-radius: 4px; background: #fff; overflow: hidden; box-shadow: 0 .6px .6px -1.25px rgba(0, 0, 0, .18), 0 2.3px 2.3px -2.5px rgba(0, 0, 0, .16), 0 10px 10px -3.75px rgba(0, 0, 0, .06); }
.menu-section .card:hover { transform: none; }
.menu-section .card-image { margin: 0; }
.menu-section .card-image img { width: 100%; height: 240px; object-fit: cover; }
.menu-section .card-body { flex: 1; display: flex; flex-direction: column; padding: 20px; }
.menu-section .card h3, .menu-section .card h4 { margin: 0 0 12px; font: 500 29.6px/1.3 var(--serif); color: var(--navy); }
.menu-section .card-summary { margin: 0; color: var(--navy); font-size: 14px; font-weight: 600; line-height: 1.55; }
.menu-section .card-foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 24px; }
.menu-section .card .more { display: inline-flex; align-items: center; justify-content: center; height: 50px; min-width: 148px; padding: 0 30px; border: 1px solid var(--navy); border-radius: 999px; color: var(--navy); font-size: 15.2px; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; }
.menu-section .card .more:hover { background: var(--navy); color: #fff; }
.menu-section .card .price { margin: 0; padding: 0; color: var(--navy); font-size: 16px; font-weight: 300; }
.menu-section .card-highlight { background: var(--navy); }
.menu-section .card-highlight :is(h3, h4, .card-summary, .price), .menu-section .card-highlight h3 a { color: #fff; }
.menu-section .card-highlight .more { border-color: #fff; color: #fff; }
.menu-section .card-highlight .more:hover { background: #fff; color: var(--navy); }
@media (max-width: 899px) {
	.menu-section .cards, .menu-section.cols-2 .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.menu-sections { gap: 72px; padding-top: 40px; }
	.menu-sections .menu-section > .spaced { font-size: 20.8px; margin-bottom: 28px; }
	.menu-section .cards, .menu-section.cols-2 .cards { grid-template-columns: 1fr; }
	.menu-section .card-image img { height: auto; aspect-ratio: 4 / 3; }
	.page-listing > h1 { min-height: 200px; }
}
main > article.page-listing { padding-top: 0; }
/* Framer: 28px title (39px line), 8px to the summary */
.menu-section .card h3, .menu-section .card h4 { margin: 0 0 8px; font-size: 28px; line-height: 39px; }
/* Desktop nav: no pill background (owner, 2026-09-29), wider letter-spacing */
@media (min-width: 1200px) {
	.site-nav > ul, .photo-hero .site-header .site-nav > ul { padding: 0 8px; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 30px; }
	.site-nav a, .site-nav summary { letter-spacing: .2em; font-size: 12.48px; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
	/* Keep logo, menu and booking button on one line on smaller laptops */
	.site-nav > ul, .photo-hero .site-header .site-nav > ul { gap: 20px; }
}

/* ==== Sticky header on every page (owner, 2026-09-29) ================================================
   Inner pages: the header is sticky on the cream background. Homepage: fixed over the video, transparent at
   the top, solid once scrolled (.is-scrolled from the inline head script). Colours only change, so no shift. */
.site-header { position: sticky; top: 0; z-index: 20; transition: background-color .3s ease, box-shadow .3s ease; }
.photo-hero .site-header { position: fixed; top: 0; left: 0; right: 0; }
.photo-hero .site-header.is-scrolled:not(.menu-open) { background: rgba(246, 243, 240, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px -12px rgba(35, 46, 58, .35); }
.photo-hero .site-header.is-scrolled:not(.menu-open) .logo img { filter: none; }
.photo-hero .site-header.is-scrolled:not(.menu-open) > .site-nav > ul > li > a,
.photo-hero .site-header.is-scrolled:not(.menu-open) > .site-nav summary { color: var(--ink); }
.photo-hero .site-header.is-scrolled:not(.menu-open) > .site-nav > ul > li > a:hover,
.photo-hero .site-header.is-scrolled:not(.menu-open) > .site-nav summary:hover { color: var(--terracotta); }
.photo-hero .site-header.is-scrolled:not(.menu-open) .menu-toggle { color: var(--navy); }
.photo-hero .site-header.is-scrolled:not(.menu-open) .nav-cta { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.photo-hero .site-header.is-scrolled:not(.menu-open) .cta-icon { background: #fff; color: var(--terracotta); }
@media (max-width: 1199px) {
	.photo-hero .site-header.is-scrolled:not(.menu-open) { border-radius: 0 0 var(--r-md) var(--r-md); }
}

/* ==== Homepage "What We Offer": four large category photos (owner, 2026-09-29) ===========================
   Label with the heading under it on the left, aligned to the top of the paragraph on the right; the
   photos in one row (two per row below 900px); View all treatments centred underneath. */
.page-home .section-categories { display: grid; grid-template-columns: 1fr; }
.section-categories > .eyebrow { grid-row: 1; margin: 0 0 12px; }
.section-categories > h2 { grid-row: 2; margin: 0; }
.section-categories > p:not(.eyebrow):not(:has(> a:only-child)) { grid-row: 3; margin: 24px 0 0; color: var(--slate); }
.section-categories > .category-tiles { grid-row: 4; }
.section-categories > p:has(> a:only-child) { grid-row: 5; margin: 36px 0 0; max-width: none; text-align: center; }
@media (min-width: 900px) {
	/* Row 3 is a flexible spacer that takes the paragraph's extra height, so the heading stays right under the label. */
	.page-home .section-categories { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr auto auto; column-gap: 72px; align-items: start; }
	.section-categories > h2, .section-categories > .eyebrow { grid-column: 1; }
	.section-categories > p:not(.eyebrow):not(:has(> a:only-child)) { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
	.section-categories > .category-tiles { grid-column: 1 / -1; grid-row: 4; }
	.section-categories > p:has(> a:only-child) { grid-column: 1 / -1; grid-row: 5; }
}
.category-tiles { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 899px) { .category-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 36px; } }
.category-tile { position: relative; isolation: isolate; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; padding: 20px; border-radius: var(--r-md); overflow: hidden; background: var(--charcoal); }
.category-tile figure { position: absolute; inset: 0; margin: 0; z-index: -1; }
.category-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.category-tile:hover img { transform: scale(1.04); }
.category-tile figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 18, 15, .72) 0%, rgba(24, 18, 15, .15) 55%, rgba(24, 18, 15, 0) 100%); }
.category-tile h3, .category-tile h4 { margin: 0; font: 500 clamp(1.5rem, 2.6vw, 2.6rem)/1.05 var(--serif); color: #fff; }
.category-tile a { color: inherit; text-decoration: none; }
.category-tile a::after { content: ""; position: absolute; inset: 0; }
.category-tile a:focus-visible { outline: none; }
.category-tile:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 899px) { .category-tile { padding: 14px; } }

/* ==== Branch page (/cyberjaya), after the Framer design ==============================================
   Measured on Framer at 1440px: 80px side margins (1280px content), 12px card radius, 16px gaps. */
main > article.page-branch { width: 100%; padding-top: 0; --loc-wrap: min(1280px, 100% - 2 * clamp(16px, 5.6vw, 80px)); }
.page-branch > :not(.loc-hero) { width: var(--loc-wrap); margin-inline: auto; }

.page-branch > .loc-hero { margin: 0; }
.loc-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(100svh, max(600px, 56.25vw)); color: var(--cream); background: var(--charcoal); }
.loc-hero-media { position: absolute; inset: 0; z-index: -1; margin: 0; }
.loc-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.loc-hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.loc-hero-inner { width: 100%; padding: 120px clamp(20px, 3.1vw, 44px) clamp(24px, 3.1vw, 44px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; }
.loc-hero h1 { margin: 0 0 24px; color: var(--cream); font-size: clamp(38.4px, 4.2vw, 60px); line-height: 1.2; }
.loc-hero .hero-actions { margin: 0; gap: 16px; }
.loc-hero .button-ghost { color: var(--cream); border-color: var(--cream); border-width: 1px; }
.loc-hero .button-ghost:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.hours-card { background: var(--navy); border-radius: 2px; padding: 20px 20px 20px 21px; color: var(--cream); }
.hours-card > * { margin: 0; padding-left: 16px; border-left: 1px solid var(--slate); }
.hours-card h2 { padding-bottom: 10px; font-size: 20px; line-height: 1.4; color: var(--sand); }
.hours-card p { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 16px; line-height: 1.5; }
.hours-card p span { min-width: 140px; }

.loc-intro { margin-top: 80px; padding: 80px clamp(24px, 8.3vw, 120px); border-radius: var(--r-sm); background: var(--sand); text-align: center; }
.loc-intro p { margin: 0 auto; max-width: 1040px; font: 500 24px/1.25 var(--serif); color: #333941; text-wrap: balance; }
.loc-intro::after { content: ""; display: block; width: 100px; height: 2px; margin: 16px auto 0; background: var(--soft); }

.loc-cards { margin-top: 120px; display: grid; grid-template-columns: 515fr 749fr; gap: 16px; }
.loc-card { padding: 40px; border-radius: var(--r-sm); background: #fafafa; }
.loc-card h2, .loc-directions h2 { margin: 0 0 32px; font-size: clamp(35.2px, 3.3vw, 47.2px); line-height: 1.3; }
.loc-address { display: flex; gap: 8px; margin: 0 0 32px; font-size: 16px; line-height: 1.5; font-weight: 300; color: var(--navy); }
.loc-address .loc-icon { flex: none; width: 24px; height: 24px; color: var(--slate); }
.pills { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin: 0; }
.pills-row { flex-direction: row; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 24px; border: 1px solid var(--terracotta); border-radius: 24px; color: var(--navy); font: 300 16px/1.5 var(--sans); text-decoration: none; transition: background-color .2s, color .2s; }
.pill-icon { padding-left: 12px; }
.pill .loc-icon { color: var(--terracotta); }
.pill:hover { background: var(--terracotta); color: #fff; }
.pill:hover .loc-icon { color: #fff; }

.loc-media { margin-top: 16px; display: grid; grid-template-columns: 843fr 421fr; gap: 16px; }
.loc-media .embed { margin: 0; }
.loc-media .embed iframe { display: block; height: 320px; border-radius: var(--r-sm); background: var(--sand-light); }
.loc-shopfront { margin: 0; }
.loc-shopfront img { width: 100%; height: 320px; object-fit: cover; border-radius: var(--r-sm); }

.page-branch > .loc-directions { margin: 16px auto 0; }
.loc-directions { padding: 40px; border-radius: var(--r-sm); background: var(--sand); scroll-margin-top: 96px; }
.loc-directions h2 { margin-bottom: 20px; }
.loc-directions-text p { margin: 0; max-width: 729px; font-size: 18px; line-height: 1.5; color: #333941; }
.loc-directions-text p:nth-child(3) { margin-top: 27px; }
.loc-directions-text .loc-note { margin-top: 20px; font-size: 14px; }
.loc-videos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
.loc-videos h3 { margin: 0 0 12px; font-size: 28px; line-height: 1.4; }
.video-facade, .video-frame { position: relative; display: block; width: 100%; aspect-ratio: 592 / 270; border: 0; border-radius: 8px; overflow: hidden; background: #000; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade .play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 12px; background: rgba(33, 33, 33, .8); transition: background-color .2s; }
.video-facade .play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.video-facade:hover .play, .video-facade:focus-visible .play { background: #f00; }

@media (max-width: 899px) {
	.loc-hero { min-height: min(92svh, 760px); }
	.loc-hero-inner { padding-inline: 20px; padding-bottom: 0; }
	.loc-hero .hero-actions { flex-direction: column; align-items: flex-start; }
	.hours-card { flex: 1 1 100%; padding: 18px 20px; }
	.hours-card p { justify-content: space-between; gap: 24px 12px; font-size: 15.2px; white-space: nowrap; }
	.hours-card p span { min-width: 0; }
	.loc-intro { margin-top: 20px; padding: 32px 24px; }
	.loc-intro p { font-size: 20.8px; }
	.loc-cards { margin-top: 24px; grid-template-columns: 1fr; }
	.loc-card { padding: 28px 24px; }
	.loc-card h2, .loc-directions h2 { margin-bottom: 24px; font-size: 32px; }
	.loc-media { grid-template-columns: 1fr; }
	.loc-media .embed iframe { height: 360px; }
	.loc-shopfront { display: none; }
	.page-branch > .loc-directions { margin-top: 48px; }
	.loc-directions { padding: 0; background: none; }
	.loc-directions-text p { font-size: 16.8px; }
	.loc-videos { grid-template-columns: 1fr; gap: 24px; }
	.loc-videos h3 { font-size: 24px; }
	.video-facade, .video-frame { aspect-ratio: 16 / 9; }
}

/* ==== Corporate Wellness (/corporate-wellness), after the Framer design ==============================
   Shares the branch page's photo hero and 1280px width. Measured on Framer at 1440px and 390px. */
.loc-hero-lead { max-width: 600px; margin: 0 0 24px; font: 500 22px/1.5 var(--sans); color: var(--cream); }
.page-corporate .loc-hero h1 { max-width: 600px; }
.page-corporate .hours-card p span { min-width: 180px; }

.page-branch > .cw-about { margin-top: 80px; }
.cw-about { padding: 80px 80px 40px; border-radius: 16px; background: var(--sand); }
.cw-about > h2 { margin: 0; text-align: center; color: #333941; font-size: clamp(32px, 3.3vw, 47.2px); line-height: 1.3; }
.cw-split { margin-top: 16px; padding: 20px 0; display: grid; grid-template-columns: 470fr 570fr; gap: 80px; align-items: center; }
.cw-split-flip { grid-template-columns: 570fr 470fr; }
.cw-split-flip .cw-arch { order: 2; }
/* Arch-topped photos: owner-approved for this section and the treatment detail photo only (2026-09-29). Everywhere else photos are rounded rectangles unless the owner asks. */
.cw-arch { margin: 0; }
.cw-arch img { display: block; width: 100%; aspect-ratio: 470 / 480; height: auto; object-fit: cover; border-radius: 300px 300px 12px 12px; }
.cw-split-text { text-align: center; color: var(--charcoal); }
.cw-split-text h3 { text-wrap: wrap; margin: 0 0 24px; font-size: clamp(30.4px, 2.5vw, 36px); line-height: 1.3; color: var(--charcoal); }
.cw-split-text p { margin: 0; font-size: 16px; line-height: 1.5; }
.cw-split-text::after { content: ""; display: block; width: 100px; height: 2px; margin: 24px auto 0; background: var(--soft); }
.cw-why { margin-top: 16px; padding-top: 20px; }
.cw-why > h3 { margin: 0 0 30px; text-align: center; font-size: clamp(30.4px, 2.5vw, 36px); line-height: 1.3; color: var(--charcoal); }
.cw-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cw-benefits li { min-height: 205px; padding: 16px; border-radius: 8px; background: #f0ebe4; color: var(--charcoal); }
.cw-benefits .cw-icon { display: block; color: var(--soft); }
.cw-benefits h4 { margin: 24px 0 9px; font: 500 20px/1.4 var(--serif); color: var(--charcoal); letter-spacing: 0; }
.cw-benefits p { margin: 0; font-size: 14px; line-height: 1.5; }

.cw-rituals, .cw-packages, .cw-faq { text-align: center; }
.page-branch > .cw-rituals { margin-top: 40px; }
.cw-rituals h2, .cw-packages h2, .cw-faq h2 { margin: 0 0 9px; font-size: clamp(32px, 2.5vw, 36px); line-height: 1.3; color: var(--charcoal); }
.page-branch .cw-sub { margin: 0 auto; max-width: 880px; font-size: 16px; line-height: 1.5; color: #333941; }
.cw-ritual-cards { list-style: none; margin: 10px 0 0; padding: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cw-ritual-cards li { background: #fff; }
.cw-ritual-cards figure { margin: 0; }
.cw-ritual-cards img { display: block; width: 100%; height: 250px; object-fit: cover; border-radius: 4px 4px 0 0; }
.cw-ritual-cards h3 { margin: 16px 0 6px; font-size: 20px; line-height: 1.4; color: #333941; }
.cw-ritual-cards p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #333941; }
.cw-ritual-cards .dot { color: var(--terracotta); }

.page-branch > .cw-packages, .page-branch > .cw-faq { width: 100%; padding-inline: max(clamp(16px, 5.6vw, 80px), (100% - 1280px) / 2); }
.page-branch > .cw-packages { margin: 80px 0 0; padding-block: 80px; background: linear-gradient(#f0ebe4 calc(100% - 80px), var(--cream)); }
.cw-package-cards { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cw-package { display: flex; flex-direction: column; padding: 32px 32px 16px; border-radius: 20px; background: #fff; color: #333941; }
.cw-package h3 { margin: 0; font: 600 clamp(30.4px, 2.5vw, 36px)/1.3 var(--serif); color: #333941; }
.cw-package-sub { margin: 0; font-size: 16px; line-height: 1.5; color: var(--charcoal); }
.cw-features { list-style: none; margin: 24px 0 0; padding: 36px 0 0; border-top: 1px solid var(--sand); text-align: left; }
.cw-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.5; font-weight: 400; }
.cw-features li + li { margin-top: 16px; }
.cw-features .cw-icon { flex: none; margin-top: 2px; color: var(--navy); }
.cw-price { margin-top: auto; padding: 16px; border: 1px solid var(--sand); border-radius: 16px; background: var(--cream); }
.cw-package .cw-features { min-height: 164px; margin-bottom: 24px; }
.cw-price p { margin: 0 0 27px; font: 500 20px/1.1 var(--sans); color: var(--navy); }
.cw-price .button { width: 100%; min-height: 44px; }
.cw-package.is-featured { padding-top: 20px; background: var(--soft); color: var(--cream); }
.cw-package.is-featured h3, .cw-package.is-featured .cw-package-sub, .cw-package.is-featured .cw-icon { color: var(--cream); }
.cw-package.is-featured .cw-features { border-top-color: rgba(246, 243, 240, .6); }
.cw-package.is-featured .cw-price { background: #fff; border-color: #fff; }
.cw-badge { align-self: center; margin: 0 0 10px; padding: 4px 16px; border-radius: 999px; background: #fff; color: var(--charcoal); font: 600 14px/1.5 var(--sans); letter-spacing: .03em; }
.page-branch .cw-note { max-width: none; margin: 24px 0 0; font-size: 16px; line-height: 1.5; color: var(--slate); }

.page-branch > .cw-faq { margin: 0; padding-block: 100px; background: #fff; }
.cw-faq h2 { margin-bottom: 40px; }
/* FAQs and T&Cs use the site's one accordion design (owner, 2026-09-30); on these white sections the card is beige.
   The width follows the section (full width here, as on Framer). */
.cw-faq .accordion { max-width: none; margin: 0; background: var(--cream); text-align: left; }

@media (max-width: 1099px) {
	.cw-package-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 899px) {
	.loc-hero-lead { font-size: 18px; }
	.page-corporate .loc-hero h1 { font-size: 42px; line-height: 1.2; }
	.page-corporate .hours-card p { flex-direction: column; }
	.page-branch > .cw-about { margin-top: 20px; }
	.cw-about { padding: 60px 20px 40px; }
	.cw-about > h2 { font-size: 32px; }
	.cw-split, .cw-split-flip { grid-template-columns: 1fr; gap: 40px; margin-top: 12px; }
	.cw-arch img { aspect-ratio: 310 / 350; border-radius: 300px 300px 8px 8px; }
	.cw-benefits { grid-template-columns: 1fr; }
	.cw-ritual-cards { padding: 0; margin-top: 16px; grid-template-columns: 1fr; }
	.cw-ritual-cards h3 { font-size: 22px; }
	.page-branch > .cw-packages { padding-block: 60px; }
	.cw-package-cards { grid-template-columns: 1fr; }
	.page-branch > .cw-faq { padding-block: 60px; }
}

/* ==== Promotions (/promotions, /mobile-spa-promotions) ================================================
   Page after Framer (navy band, pill tabs, 320×430 posters with 20px corners in a 1000px grid). New: each
   poster opens a pop-up with the promotion as text (left) and its posters scrolling on their own (right). */
main > article.page-promotions { width: 100%; padding-top: 0; }
.page-promotions > h1 { display: grid; place-items: center; min-height: 220px; margin: 0; padding: 40px 16px; background: var(--navy); color: var(--cream); text-align: center; font-size: clamp(42px, 4.2vw, 60px); line-height: 1.2; }
.promo-tabs { padding: 28px 16px 0; }
.promo-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.promo-tabs a { display: inline-flex; align-items: center; min-height: 37px; padding: 8px 16px; border: 1px solid var(--soft); border-radius: 24px; color: var(--terracotta); font: 600 14px/1.5 var(--sans); letter-spacing: .03em; text-decoration: none; transition: background-color .2s, color .2s; }
.promo-tabs a:hover { background: var(--terracotta-tint); }
/* Framer fills the current tab with the soft terracotta; white on it is 3.3:1, so the darker terracotta (5.6:1) is used. */
.promo-tabs a[aria-current="page"] { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.page-promotions > .promo-section { width: min(1000px, 100% - 32px); margin: 60px auto 0; padding-bottom: 80px; }
.promo-heading { margin: 0 0 40px; font: 500 28px/1.4 var(--serif); letter-spacing: .35em; color: var(--navy); text-transform: uppercase; }
.promotions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 18px; }
.promo-card { position: relative; display: block; border-radius: 20px; overflow: hidden; background: var(--sand-light); transition: transform .25s ease, box-shadow .25s ease; }
.promo-card img { display: block; width: 100%; aspect-ratio: 320 / 430; height: auto; object-fit: cover; }
.promo-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(35, 42, 86, .55); }
.promo-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.promo-count { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(24, 26, 40, .72); color: #fff; font: 500 .75rem/1.4 var(--sans); letter-spacing: .04em; }

/* Pop-up: text on the left stays put; the posters on the right scroll on their own. */
dialog.promo-modal { width: min(1080px, 100vw - 48px); height: min(760px, 100dvh - 48px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--cream); color: var(--ink); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); }
dialog.promo-modal::backdrop { background: rgba(20, 22, 38, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html:has(dialog.promo-modal[open]) { overflow: hidden; }
.promo-modal-inner { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.promo-text { overflow-y: auto; padding: 48px 44px 36px; overscroll-behavior: contain; }
.promo-tagline { margin: 0 0 10px; font: 600 .78rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--terracotta); }
.promo-text h3 { margin: 0 0 14px; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.15; color: var(--navy); }
.promo-validity { display: inline-flex; margin: 0 0 8px; padding: 6px 14px; border-radius: 999px; background: var(--sand-light); color: var(--navy); font-size: .9rem; font-weight: 400; }
.promo-text h4 { margin: 26px 0 10px; font: 600 .78rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--slate); }
.promo-body p, .promo-terms p { margin: 0 0 6px; line-height: 1.55; color: var(--ink); }
.promo-body ul, .promo-terms ul { margin: 0 0 12px; padding-left: 20px; }
.promo-body li, .promo-terms li { margin: 0 0 2px; line-height: 1.55; }
.promo-body li::marker { color: var(--soft); }
.promo-terms { font-size: .92rem; color: var(--slate); }
.promo-terms li, .promo-terms p { color: var(--slate); }
.promo-cta { margin: 28px 0 0; }
.promo-media { overflow-y: auto; overscroll-behavior: contain; padding: 24px; display: flex; flex-direction: column; gap: 16px; background: var(--navy); }
.promo-media:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.promo-media figure { margin: 0; }
.promo-media img { display: block; width: 100%; height: auto; border-radius: 12px; }
.promo-close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--navy); font: 300 1.9rem/1 var(--sans); text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.promo-close:hover { background: var(--cream); }
/* Without JavaScript the poster link targets the dialog and CSS shows it. */
html:not(.js) dialog.promo-modal:target { display: block; position: fixed; inset: 0; z-index: 50; }

@media (max-width: 899px) {
	.promotions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 799px) {
	dialog.promo-modal { width: 100vw; height: 100dvh; border-radius: 0; }
	.promo-modal-inner { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
	.promo-media { order: -1; flex: none; flex-direction: row; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; padding: 64px 16px 16px; }
	.promo-media figure { flex: 0 0 min(86%, 420px); scroll-snap-align: center; }
	.promo-media figure:only-child { flex-basis: 100%; }
	.promo-text { overflow: visible; padding: 28px 20px 40px; }
}
@media (max-width: 599px) {
	.page-promotions > h1 { min-height: 200px; }
	.promo-tabs { padding-top: 24px; }
	.page-promotions > .promo-section { margin-top: 44px; }
	.promo-heading { margin-bottom: 24px; font-size: 20.8px; }
	.promotions { grid-template-columns: 1fr; gap: 20px; }
	.promo-card img { aspect-ratio: 358 / 480; }
}

/* ==== The Zen Nest Club (/thezennest), after the Framer design ========================================
   Measured on Framer at 1440/390px. Door-arch photos as on Framer (owner: match the original page). An arch's
   vertical corner radius is (width / 2) / height, so its top is a true semicircle at any size. */
main > article.page-zennest { width: 100%; padding-top: 0; }
.page-zennest > section { margin: 0; }
.page-zennest > h1 { display: grid; place-items: center; min-height: 200px; margin: 0; padding: 40px 16px; background: var(--navy); color: var(--cream); text-align: center; font-size: clamp(42px, 4.2vw, 60px); line-height: 1.2; }
.zn-arch { margin: 0; }
.zn-arch img { display: block; width: 100%; height: auto; object-fit: cover; }

.zn-intro { width: min(1280px, 100% - 2 * clamp(16px, 5.6vw, 80px)); margin-inline: auto !important; padding: 40px 0; display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 450px); column-gap: clamp(40px, 12.8vw, 185px); align-items: center; }
.zn-intro .zn-arch img { aspect-ratio: 500 / 700; border-radius: 50% 50% 12px 12px / 35.714% 35.714% 12px 12px; }
.zn-intro-text h2 { margin: 0 0 16px; font-size: clamp(41.6px, 4.2vw, 60px); line-height: 1; color: var(--navy); }
.zn-intro-text p:not(.zn-action) { max-width: 400px; margin: 0; font-size: 18px; line-height: 1.5; color: var(--navy); }
.page-zennest .zn-action { max-width: none; margin: 16px 0 0; }

.zn-included { padding: 80px max(clamp(16px, 5.6vw, 80px), (100% - 1280px) / 2) 100px; background: linear-gradient(var(--cream), var(--sand)); text-align: center; }
.zn-included h2, .zn-terms h2 { margin: 0 0 10px; font-size: clamp(32px, 3.3vw, 47.2px); line-height: 1.3; color: var(--navy); }
.page-zennest .zn-sub { max-width: 780px; margin: 0 auto; font-size: 18px; line-height: 1.5; color: #333941; }
.zn-steps { list-style: none; margin: 60px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: left; }
.zn-steps > li { min-height: 300px; padding: 12px 24px 24px; border-radius: 12px; background: linear-gradient(rgba(246, 243, 240, .92), rgba(246, 243, 240, .45)); }
.zn-step-n { display: block; font: 600 80px/60px var(--serif); color: var(--soft); }
/* Framer wraps these headings normally (no balanced lines). */
.zn-intro-text h2, .zn-steps h3, .zn-reasons h3 { text-wrap: wrap; }
.zn-steps h3 { margin: 40px 0 0; font-size: 28px; line-height: 1.4; color: var(--navy); }
.page-zennest .zn-included .zn-action { margin-top: 60px; }

.zn-why { padding: 40px 16px 60px; text-align: center; }
.zn-why h2 { margin: 0 0 8px; font-size: clamp(32px, 2.5vw, 36px); line-height: 1.3; color: var(--charcoal); }
.zn-why-row { width: min(1040px, 100%); margin: 40px auto 0; display: grid; grid-template-columns: minmax(0, 437px) minmax(0, 523px); justify-content: space-between; column-gap: 40px; align-items: center; text-align: left; }
.zn-why .zn-arch img { aspect-ratio: 437 / 480; border-radius: 50% 50% 12px 12px / 45.52% 45.52% 12px 12px; }
.zn-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.zn-reasons li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 32px; align-items: start; }
.zn-tick { margin-top: 5px; color: var(--soft); }
.zn-reasons h3 { margin: 5px 0 7px; font-size: 24px; line-height: 1.25; color: #333941; }
.zn-reasons p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--charcoal); }

.page-zennest > .cw-faq { width: 100%; padding: 100px max(clamp(16px, 5.6vw, 80px), (100% - 1280px) / 2); background: #fff; }
.zn-terms .zn-sub { margin-bottom: 60px; }
.page-zennest .zn-note { max-width: none; margin: 24px 0 0; font-size: 16px; line-height: 1.5; color: var(--slate); text-align: center; }

@media (max-width: 1099px) {
	.zn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.zn-intro { width: calc(100% - 30px); grid-template-columns: 1fr; row-gap: 40px; padding: 20px 0 40px; }
	.zn-intro .zn-arch img { aspect-ratio: 360 / 400; border-radius: 50% 50% 12px 12px / 45% 45% 12px 12px; }
	.zn-intro-text { padding: 0 12px; }
	.zn-intro-text h2 { font-size: 52px; line-height: 1.1; }
	.zn-intro .zn-action .button { width: 100%; }
	.zn-included { padding: 60px 16px 60px; }
	.zn-steps { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
	.zn-steps > li { min-height: 180px; padding: 24px; }
	.zn-step-n { font-size: 64px; line-height: 48px; }
	.zn-steps h3 { margin-top: 24px; font-size: 20.8px; }
	.page-zennest .zn-included .zn-action { margin-top: 40px; }
	.zn-included .zn-action .button { width: 100%; }
	.zn-why-row { grid-template-columns: 1fr; row-gap: 32px; }
	.zn-why .zn-arch { padding: 0 4px; }
	.zn-why .zn-arch img { aspect-ratio: 350 / 455; border-radius: 50% 50% 8px 8px / 38.46% 38.46% 8px 8px; }
	.zn-reasons li { column-gap: 16px; }
	.zn-reasons h3 { font-size: 22px; }
	.page-zennest > .cw-faq { padding-block: 60px; }
	.zn-terms .zn-sub { margin-bottom: 40px; }
}

/* ==== Mobile Spa (/mobilespa), after the Framer design ================================================
   Measured on Framer at 1440/390px (Framer pixel sizes). Shares the photo hero and the corporate sand card,
   arched splits (arches as on Framer, owner: "exactly like the live website") and photo tiles. */
.ms-about { padding: 80px 120px 40px; }
.ms-about .cw-split { grid-template-columns: 437fr 523fr; }
.ms-about .cw-split-flip { grid-template-columns: 523fr 437fr; }
.ms-about .cw-arch img { aspect-ratio: 437 / 480; border-radius: 50% 50% 12px 12px / 45.52% 45.52% 12px 12px; }
.ms-about .cw-split-text p + p { margin-top: 24px; }
.ms-tiles, .ms-section-head { margin-top: 16px; padding-top: 20px; text-align: center; }
.ms-tiles h2, .ms-section-head h2 { margin: 0 0 30px; font-size: 36px; line-height: 1.3; color: var(--charcoal); }
.page-mobilespa .cw-sub { max-width: none; font-size: 16px; }
.ms-tile-cards { width: min(1000px, 100%); margin: 16px auto 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-tile-cards h3 { margin: 16px 0; }
.ms-tile-cards a { display: block; color: inherit; text-decoration: none; }
.ms-tile-cards a:hover h3 { color: var(--terracotta); }

.ms-promo { width: min(960px, 100%); margin: 36px auto 0; padding: 30px; border-radius: 12px; background: var(--navy); color: var(--cream); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.ms-eyebrow { margin: 0 0 8px; font: 600 12px/1.5 var(--sans); letter-spacing: 4.8px; text-transform: uppercase; color: var(--cream); }
.ms-promo h3 { margin: 0 0 20px; font-size: 47px; line-height: 1.3; color: var(--cream); }
.ms-promo-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ms-promo-rows li { display: grid; grid-template-columns: 80px auto; column-gap: 40px; font-size: 16px; line-height: 1.5; }
.ms-promo-rows strong { font-weight: 600; }
.ms-promo-action { margin: 36px 0 0; }
.ms-price { flex: none; display: grid; place-items: center; align-content: center; width: 266px; min-height: 137px; margin: 0 31px 0 0; padding: 16px 24px; border-radius: 70px; background: linear-gradient(90deg, #a04d4b, #6f4563 55%, #37397f); color: var(--cream); text-align: center; }
.ms-price-label { font: 300 12px/1.5 var(--sans); letter-spacing: .5em; text-indent: .5em; }
.ms-price-amount { font: 700 60px/1.2 var(--serif); font-synthesis: weight; font-variant-numeric: lining-nums; }

.page-mobilespa .mobile-cards { width: min(960px, 100%); margin: 20px auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.page-mobilespa .mobile-cards .card { display: flex; flex-direction: column; min-height: 368px; padding: 20px 30px; border: 0; border-radius: 20px; background: #f0ebe4; box-shadow: none; text-align: left; }
.page-mobilespa .mobile-cards .card:hover { transform: none; }
.page-mobilespa .mobile-cards h3 { margin: 0; font-size: 36px; line-height: 1.3; }
.page-mobilespa .mobile-cards h3 a { color: #333941; text-decoration: none; }
.page-mobilespa .mobile-cards h3 a:hover { color: var(--terracotta); }
.page-mobilespa .mobile-cards .lead { margin: 8px 0 10px; font: 600 14px/1.5 var(--sans); letter-spacing: .03em; color: #333941; }
.page-mobilespa .mobile-cards .card > p:not(.lead) { margin: 0; font-size: 16px; line-height: 1.5; color: #333941; }
.page-mobilespa .mobile-cards .prices { margin-top: auto; padding-top: 24px; }
.page-mobilespa .price-pivot { width: auto; margin: 0; background: none; border-radius: 0; }
.page-mobilespa .price-pivot th, .page-mobilespa .price-pivot td { padding: 0 0 10px; border: 0; font: 600 16px/1.4 var(--sans); color: #333941; text-align: center; text-transform: none; letter-spacing: 0; min-width: 90px; }
.page-mobilespa .price-pivot th:first-child, .page-mobilespa .price-pivot td:first-child { min-width: 130px; font-weight: 300; text-align: left; }
.page-mobilespa .price-pivot .price { color: #333941; }
.page-mobilespa .mobile-cards .button { align-self: flex-start; margin-top: 20px; }
.ms-note { max-width: none !important; margin: 42px 0 0; font-size: 14px; line-height: 1.5; color: var(--charcoal); text-align: center; }

.page-branch > .ms-reviews { width: 100%; margin: 80px 0 0; padding: 40px 0 44px; background: var(--soft); color: var(--charcoal); text-align: center; }
.ms-reviews h2 { margin: 0 0 26px; font-size: 60px; line-height: 1.2; color: var(--cream); }
.review-carousel { position: relative; }
.review-cards { list-style: none; margin: 0; padding: 0 75px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 75px; scrollbar-width: none; }
.review-cards::-webkit-scrollbar { display: none; }
.ms-review { flex: 0 0 422px; min-height: 260px; padding: 20px; border-radius: 12px; background: var(--cream); display: flex; flex-direction: column; text-align: left; scroll-snap-align: start; }
.ms-stars { font-size: 16px; line-height: 19px; letter-spacing: 1px; color: #f68d2e; }
.ms-review-text { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--charcoal); }
.ms-review-name { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--slate); }
.ms-verified { display: flex; align-items: center; gap: 6px; margin: auto 0 0; padding-top: 16px; font: 600 12px/1.5 var(--sans); color: #0576e8; }
.review-carousel .carousel-next { position: absolute; right: 65px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(200, 200, 200, .9); color: #fff; font: 300 24px/1 var(--sans); cursor: pointer; }
.review-carousel .carousel-next[hidden] { display: none; }
.review-carousel .service-dots { margin-top: 20px; }
.review-carousel .service-dots button::before { width: 6px; height: 6px; background: rgba(246, 243, 240, .5); }
.review-carousel .service-dots button[aria-current="true"]::before { width: 6px; background: var(--cream); }

@media (max-width: 899px) {
	.ms-about { padding: 60px 20px 40px; }
	.ms-about .cw-split, .ms-about .cw-split-flip { grid-template-columns: 1fr; }
	.ms-about .cw-arch img { aspect-ratio: 310 / 350; border-radius: 50% 50% 8px 8px / 44.29% 44.29% 8px 8px; }
	.ms-tile-cards { grid-template-columns: 1fr; padding: 0; }
	.ms-promo { flex-direction: column; align-items: stretch; padding: 30px 20px; }
	.ms-promo h3 { font-size: 32px; }
	.ms-promo-rows li { column-gap: 20px; }
	.ms-price { width: 100%; margin: 0; min-height: 120px; }
	.ms-price-amount { font-size: 40px; }
	.page-mobilespa .mobile-cards { grid-template-columns: 1fr; }
	.page-mobilespa .mobile-cards .card { min-height: 0; padding: 20px; }
	.page-mobilespa .mobile-cards h3 { font-size: 32px; }
	.page-mobilespa .price-pivot th, .page-mobilespa .price-pivot td { min-width: 72px; }
	.page-mobilespa .price-pivot th:first-child, .page-mobilespa .price-pivot td:first-child { min-width: 96px; }
	.ms-reviews h2 { font-size: 42px; }
	.review-cards { padding: 0 30px; scroll-padding: 0 30px; }
	.ms-review { flex-basis: 330px; }
	.review-carousel .carousel-next { right: 12px; }
}

/* ==== Company policy pages (/policy, /policy/…) ========================================================
   Structure after Framer (title, tabs between the policies, one text column); styled with the site's design
   system (navy band and pill tabs as on Promotions). Body text uses one weight throughout (owner: easy to read). */
main > article.page-policy { width: 100%; padding-top: 0; }
.page-policy > h1 { display: grid; place-items: center; min-height: 200px; margin: 0; padding: 40px 16px; background: var(--navy); color: var(--cream); text-align: center; font-size: clamp(42px, 4.2vw, 60px); line-height: 1.2; }
.policy-tabs { padding-top: 28px; }
@media (max-width: 899px) {
	.policy-tabs { overflow-x: auto; scrollbar-width: none; }
	.policy-tabs::-webkit-scrollbar { display: none; }
	.policy-tabs ul { flex-wrap: nowrap; justify-content: flex-start; width: max-content; margin: 0 auto; }
	.policy-tabs a { white-space: nowrap; }
}
.policy-panel { width: min(760px, 100% - 32px); margin: 40px auto 80px; padding: clamp(28px, 5vw, 56px); border-radius: 20px; background: var(--paper); box-shadow: 0 1px 2px rgba(35, 42, 86, .05), 0 12px 32px -20px rgba(35, 42, 86, .25); color: var(--ink); font: 400 17px/1.75 var(--sans); }
.policy-panel > * { max-width: none; }
.policy-panel h2 { margin: 0 0 20px; font-size: clamp(30px, 3.2vw, 38px); line-height: 1.2; color: var(--navy); }
.policy-panel h3 { margin: 36px 0 10px; font-size: 24px; line-height: 1.3; color: var(--navy); }
.policy-panel p { margin: 0 0 16px; }
.policy-panel ul, .policy-panel ol { margin: 0 0 20px; padding-left: 22px; }
.policy-panel li { margin: 0 0 8px; padding-left: 4px; }
.policy-panel ul li::marker { color: var(--soft); }
.policy-panel .policy-numbered { list-style: none; padding-left: 0; }
.policy-panel .policy-numbered li { padding-left: 0; }
.policy-panel strong, .policy-panel b { font-weight: inherit; }
.policy-panel a { color: var(--terracotta); }
.policy-panel .policy-note { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--slate); font-size: 15px; line-height: 1.7; }

/* ==== Spa Pass (/spa-pass), after the Framer design ===================================================
   Uses the Zen Nest layout (band, arch split, numbered cards, T&Cs) plus the Spa Pass cards below. The cards'
   look is scoped to .pass-cards; the homepage keeps its own tier cards until the owner approves this design. */
.zn-steps > li p { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--navy); }
.page-spapass .zn-steps h3 { margin-top: 40px; }
.page-spapass .zn-included { padding-bottom: 80px; }
.sp-passes { padding: 80px 16px 80px; text-align: center; scroll-margin-top: 80px; }
.sp-passes h2 { margin: 0 0 10px; font-size: clamp(32px, 3.3vw, 47.2px); line-height: 1.3; color: var(--navy); }
.pass-cards { list-style: none; width: min(1040px, 100%); margin: 60px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: center; }
.pass-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #f0ebe4; }
.pass-head { min-height: 127px; padding: 24px 16px 12px; display: grid; justify-items: center; align-content: start; gap: 4px; }
.pass-head h3 { margin: 0; font: 700 47px/1 var(--serif); font-synthesis: weight; letter-spacing: 0; }
.pass-sessions { margin: 0; padding: 8px 20px; font-size: 16px; line-height: 1.5; font-weight: 300; }
.pass-silver .pass-head { background: linear-gradient(#a8a8a8, #dbdbdb); }
.pass-silver .pass-head h3, .pass-silver .pass-sessions { color: #333941; }
.pass-gold .pass-head { background: linear-gradient(#c39759, #b38332); }
.pass-platinum .pass-head { background: linear-gradient(#0a0f14, #2b3949); }
.pass-gold .pass-head h3, .pass-gold .pass-sessions, .pass-platinum .pass-head h3, .pass-platinum .pass-sessions { color: var(--cream); }
.pass-body { flex: 1; display: flex; flex-direction: column; padding: 40px 24px 16px; }
.pass-price { margin: 0; font: 500 60px/1 var(--sans); color: var(--terracotta); }
.pass-worth { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #333941; }
.pass-features { list-style: none; margin: 48px 0 0; padding: 16px 0 0 10px; border-top: 1px solid var(--sand); display: grid; gap: 20px; text-align: left; }
.pass-features li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.tier-icon { margin-top: 4px; color: var(--navy); }
.pass-feature { margin: 0; font: 400 18px/1.5 var(--sans); color: #333941; }
.pass-detail { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 300; color: #333941; }
.pass-save { margin-top: auto; padding: 12px 24px 12px; border: 1px solid; border-radius: 12px; background: var(--cream); color: #333941; }
.pass-body > .pass-features { margin-bottom: 32px; }
.pass-silver .pass-save { border-color: #a6a6a6; }
.pass-gold .pass-save { border-color: #a68658; }
.pass-platinum .pass-save { border-color: #070c10; }
.pass-save-label { margin: 0; font-size: 12px; line-height: 1.5; font-weight: 300; letter-spacing: 1.92px; }
.pass-save-amount { margin: 4px 0 0; font: 500 16px/1 var(--sans); }
.pass-save-amount strong { font-size: 36px; font-weight: 500; }
.pass-save-basis { margin: 8px 0 12px; font-size: 12px; line-height: 1.5; font-weight: 300; }
.pass-save .button { width: 100%; min-height: 44px; }
.sp-passes .zn-note { margin-top: 24px; }
.page-spapass > .cw-faq .zn-sub, .page-spapass .zn-terms .zn-sub { margin-bottom: 60px; }

@media (max-width: 899px) {
	.zn-steps > li p { font-size: 16px; }
	.page-spapass .zn-steps h3 { margin-top: 24px; }
	.sp-passes { padding: 60px 16px; }
	.pass-cards { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
}

/* ==== Floating WhatsApp button (every page; owner, 2026-09-30) ========================================
   Native <details>: tapping the button shows three options (Settings → Floating WhatsApp button). */
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 30; }
body:has(.site-header.menu-open) .wa-float, html:has(dialog[open]) .wa-float { display: none; }
.wa-float > summary { list-style: none; display: grid; place-items: center; width: 60px; height: 60px; margin-left: auto; border-radius: 50%; background: #25d366; color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: transform .2s, background-color .2s; }
.wa-float > summary::-webkit-details-marker { display: none; }
.wa-float > summary:hover { transform: scale(1.05); background: #1fbe5b; }
.wa-float > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wa-close { display: none; font: 300 34px/1 var(--sans); }
.wa-float[open] > summary svg { display: none; }
.wa-float[open] .wa-close { display: block; }
.wa-panel { position: absolute; right: 0; bottom: 72px; width: min(300px, calc(100vw - 32px)); padding: 16px; border-radius: 16px; background: var(--paper); box-shadow: 0 18px 44px -12px rgba(20, 22, 38, .35), 0 2px 6px rgba(20, 22, 38, .08); }
.wa-title { margin: 0 4px 10px; font: 600 14px/1.4 var(--sans); color: var(--navy); }
.wa-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wa-panel a { position: relative; display: grid; gap: 2px; padding: 12px 40px 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .2s, border-color .2s; }
.wa-panel a::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 22px; color: #25d366; }
.wa-panel a:hover, .wa-panel a:focus-visible { background: var(--cream); border-color: #25d366; }
.wa-option { font: 500 16px/1.3 var(--sans); color: var(--navy); }
.wa-desc { font-size: 13px; line-height: 1.4; color: var(--slate); }
@media (max-width: 599px) {
	.wa-float { right: 16px; bottom: 16px; }
	.wa-float > summary { width: 56px; height: 56px; }
	.wa-panel { bottom: 68px; }
}
/* Homepage: the pricing band is close to the card colour, so the cards get a soft lift there. */
.page-home .pass-card { box-shadow: 0 1px 2px rgba(35, 42, 86, .06), 0 12px 30px -18px rgba(35, 42, 86, .4); }
.page-home .section-pricing .pass-cards { margin-top: 44px; }

/* ==== Careers (/jobs, /jobs/…), after the Framer design ===============================================
   Measured on Framer at 1440/390px: title on the cream page, white section with 1000px job cards (20px corners,
   soft shadow); job page: facts row and one 870px card. English | Bahasa Melayu switch (owner, 2026-09-30). */
main > article.page-job { width: 100%; padding-top: 0; }
.job-band { padding: 60px 16px; text-align: center; }
.job-band h1 { margin: 0; font-size: clamp(42px, 4.2vw, 60px); line-height: 1.2; color: var(--charcoal); }
.job-eyebrow { margin: 0 0 12px; font-size: 14px; line-height: 1.5; letter-spacing: .08em; }
.job-eyebrow a { color: var(--charcoal); text-decoration: none; }
.job-eyebrow a:hover { color: var(--terracotta); text-decoration: underline; }
.job-section { padding: 80px 16px; background: #fff; }
.job-list { list-style: none; width: min(1000px, 100%); margin: 0 auto; padding: 0; display: grid; gap: 20px; }
.job-item { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; min-height: 148px; padding: 35px 30px 30px; border-radius: 20px; background: #fff; box-shadow: 0 .6px 1.6px -1px rgba(0, 0, 0, .14), 0 2.3px 6px -2px rgba(0, 0, 0, .12), 0 10px 26px -4px rgba(0, 0, 0, .08); transition: box-shadow .2s; }
.job-item:hover { box-shadow: 0 .6px 1.6px -1px rgba(0, 0, 0, .14), 0 4px 10px -2px rgba(0, 0, 0, .14), 0 16px 34px -6px rgba(0, 0, 0, .14); }
.job-item h2 { margin: 0; font-size: 28px; line-height: 1.4; color: #333941; }
.job-item h2 a { color: inherit; text-decoration: none; }
.job-item h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.job-item h2 a:focus-visible { outline: none; }
.job-item:has(h2 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.job-loc { margin: 26px 0 0; font-size: 12px; line-height: 1.5; color: #333941; }
.job-view, .job-apply-outline { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; min-height: 50px; padding: 12px 32px; border: 1px solid var(--navy); border-radius: 24px; color: var(--navy); font: 600 16px/1.5 var(--sans); text-decoration: none; transition: background-color .2s, color .2s; }
.job-view:hover, .job-apply-outline:hover { background: var(--navy); color: #fff; }

.job-lang { display: flex; justify-content: center; gap: 0; width: max-content; margin: -40px auto 40px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); }
html:not(.js) .job-lang { display: none; }
.job-lang button { min-height: 40px; padding: 8px 20px; border: 0; border-radius: 999px; background: none; color: #333941; font: 500 15px/1.4 var(--sans); cursor: pointer; }
.job-lang button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.job-lang button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Without JavaScript both versions show, one after the other. With it, the head script picks the language before the
   first paint (html.lang-ms), so switching never moves the page. */
html:not(.js) .job-panel + .job-panel { margin-top: 64px; }
html.js .job-panel[data-lang="ms"], html.js.lang-ms .job-panel[data-lang="en"] { display: none; }
html.js.lang-ms .job-panel[data-lang="ms"] { display: block; }
.job-facts { width: min(1190px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: center; }
.job-facts dt { font: 600 18px/1.5 var(--sans); color: #333941; }
.job-facts dd { margin: 4px 0 0; font-size: 18px; line-height: 1.5; color: #333941; }
.job-facts a { color: inherit; }
.job-card { width: min(870px, 100%); margin: 71px auto 0; padding: 40px 35px; border-radius: 20px; background: #fff; box-shadow: 0 .6px 1.6px -1px rgba(0, 0, 0, .14), 0 2.3px 6px -2px rgba(0, 0, 0, .12), 0 10px 26px -4px rgba(0, 0, 0, .08); color: #333941; font-size: 16px; line-height: 1.5; font-weight: 400; }
.job-card-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.job-card h2 { margin: 42px 0 12px; font-size: 28px; line-height: 1.4; color: #333941; }
.job-card-head h2, .job-card > h2:first-child { margin: 0; }
.job-card p { max-width: none; margin: 0 0 12px; }
.job-card .job-label { margin: 24px 0 6px; font: 500 18px/1.5 var(--sans); color: #333941; letter-spacing: 0; }
.job-card ul { margin: 0 0 8px; padding-left: 20px; }
.job-card li { margin: 0 0 4px; }
.job-card li::marker { color: var(--soft); }
.job-card a:not(.job-apply-outline) { color: var(--terracotta); }
.job-apply { margin: 40px 0 0; text-align: center; }

@media (max-width: 899px) {
	.job-band { padding: 40px 16px; }
	.job-section { padding: 48px 16px; }
	.job-item { flex-direction: column; min-height: 0; padding: 24px 20px; gap: 16px; }
	.job-item h2 { font-size: 24px; }
	.job-loc { margin-top: 10px; }
	.job-lang { margin: -24px auto 32px; }
	.job-facts { grid-template-columns: 1fr; gap: 14px; }
	.job-card { margin-top: 40px; padding: 28px 20px; }
	.job-card-head { flex-direction: column; align-items: flex-start; }
	.job-card h2 { font-size: 24px; }
	.job-apply .button { width: 100%; }
}

/* ==== Referral Program (/referral-program), after the Framer design ===================================
   Zen Nest layout with a wider arch photo (620×700), the accent words in the heading, full-width step rows on a
   solid sand band, and the T&Cs as a plain list. Measured on Framer at 1440/390px. */
.zn-accent { color: var(--soft); }
.page-referral .zn-intro { grid-template-columns: minmax(0, 620px) minmax(0, 400px); column-gap: clamp(40px, 10.4vw, 150px); }
.page-referral .zn-intro .zn-arch img { aspect-ratio: 620 / 700; border-radius: 50% 50% 12px 12px / 44.29% 44.29% 12px 12px; }
.page-referral .zn-intro-text p:not(.zn-action) { margin: 0; }
.page-referral .zn-intro-text h2 { margin-bottom: 16px; }
.page-referral .zn-included { background: var(--sand); padding-bottom: 80px; }
.page-referral .zn-included h2 { color: #333941; }
.page-referral .zn-steps { margin-top: 40px; grid-template-columns: 1fr; gap: 24px; }
.page-referral .zn-steps > li { min-height: 150px; padding: 16px 24px; display: grid; grid-template-columns: 107px minmax(0, 1fr); align-items: center; background: linear-gradient(#f6f3f0, #e8e0d7); }
.page-referral .zn-step-n { line-height: 60px; }
.page-referral .zn-steps h3 { margin: 0 0 12px; font-size: 28px; line-height: 1.4; }
.zn-step-body ul { margin: 0; padding-left: 22px; list-style: disc; }
.zn-step-body li { font-size: 18px; line-height: 1.5; color: var(--navy); }
.zn-step-body li::marker { color: var(--navy); }
.zn-terms-list { width: min(1280px, 100% - 2 * clamp(16px, 5.6vw, 80px)); margin: 0 auto !important; padding: 84px 0 60px; }
.zn-terms-list h2 { margin: 0 0 40px; font-size: 36px; line-height: 1.3; color: #333941; }
.zn-terms-list ul { margin: 0; padding-left: 24px; }
.zn-terms-list li { font-size: 18px; line-height: 1.5; color: #333941; }
@media (max-width: 899px) {
	.page-referral .zn-intro { grid-template-columns: 1fr; }
	.page-referral .zn-intro .zn-arch img { aspect-ratio: 360 / 400; border-radius: 50% 50% 12px 12px / 45% 45% 12px 12px; }
	.page-referral .zn-steps > li { grid-template-columns: 56px minmax(0, 1fr); padding: 20px 16px; min-height: 0; }
	.page-referral .zn-steps h3 { font-size: 22px; }
	.zn-step-body li, .zn-terms-list li { font-size: 16px; }
	.zn-terms-list { padding: 48px 0 40px; }
	.zn-terms-list h2 { margin-bottom: 24px; font-size: 32px; }
}
/* Framer sets these words one step heavier than the body (400 on 300), not full bold. */
.page-referral .zn-intro-text strong, .page-referral .zn-step-body strong { font-weight: 400; }

/* ==== Phone menu, sizes and spacing as on the current site (owner, 2026-09-30) ========================
   Measured on Framer at 390px: logo 31px tall at 20/17, "BRANCHES" 14px slate, links 14px/300 with light tracking,
   one link every 68px, a wider gap after the branches (no divider line: the owner removed it), and a full-width
   BOOK APPOINTMENT button under the links. */
@media (max-width: 1199px) {
	.site-header.menu-open { padding: 10px 20px 40px; gap: 0; }
	.menu-open .logo img, .photo-hero .menu-open .logo img { height: 31px; filter: brightness(0) invert(.7) sepia(.31); opacity: 1; }
	.menu-open .site-nav { padding: 50px 0 0; }
	.menu-open .site-nav a, .photo-hero .menu-open .site-nav > ul > li > a { padding: 23.5px 0; font-size: 14px; line-height: 21px; font-weight: 300; letter-spacing: .07em; }
	.menu-open .has-menu summary, .photo-hero .menu-open .site-nav summary { padding: 0 0 6px; color: var(--slate); font-size: 14px; line-height: 21px; font-weight: 300; letter-spacing: .006em; }
	.menu-open .has-menu { margin-bottom: 21px !important; }
	.menu-open .site-nav a[aria-current="page"] { color: #e6a48c; }
	.menu-open .nav-cta { display: flex; order: 4; flex: 1 1 100%; justify-content: center; min-height: 45px; margin: 6px 0 0; padding: 12px 24px; font-size: 14px; letter-spacing: .1em; }
	.menu-open .nav-cta .lbl-wide { display: inline; }
	.menu-open .nav-cta .lbl-narrow, .menu-open .nav-cta .cta-icon { display: none; }
	.photo-hero .site-header.menu-open .nav-cta { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
}

/* ==== Footer on phones and tablets, as on the current site (owner, 2026-09-30) ========================
   Measured on Framer at 390px: logo 244×44, one centred column, 12px slate headings, 12px/300 sand links in capitals
   every 38px, 60px between groups, 32px social icons, the copyright on two lines. */
.copyright-more { white-space: nowrap; }
@media (max-width: 899px) {
	.site-footer { padding: 40px 16px 33px; }
	.footer-inner { gap: 0; }
	.footer-logo img { height: 44px; }
	.footer-cols { margin-top: 60px; gap: 60px; }
	.footer-cols h2 { margin: 0 0 20px; font: 300 12px/18px var(--sans); letter-spacing: 0; color: var(--slate); }
	.footer-cols ul, .footer-wide ul { grid-auto-flow: row; grid-template-rows: none; gap: 20px; justify-items: center; }
	.footer-cols li { font-size: 12px; line-height: 18px; }
	.footer-cols a { font: 300 12px/18px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--sand); }
	.footer-cols a:hover { color: #fff; }
	.footer-cols .social-icons { grid-auto-flow: column; gap: 27px !important; }
	.social-icons a { width: 32px; height: 32px; border-width: 1px; color: var(--cream); }
	.social-icons svg { width: 18px; height: 18px; }
	.copyright { max-width: 300px; margin: 67px auto 0; font-size: 12px; line-height: 18px; font-weight: 300; color: var(--cream); }
	.copyright-more { display: block; }
}

/* ==== Maternity massage (/maternity-massage), after the Framer design (owner, 2026-10-01) ==============
   Measured on Framer at 1440/390px: 810px photo hero with the review card under the button; centred serif intro with
   the accent rule; navy "recommended treatment" card (arch photo, prices, booking); the Zen Nest numbered cards;
   trimester guide beside an arch photo; two arch photo + text splits. Reuses .loc-hero, .zn-* and .ms-review. */
.page-maternity { --mm-wrap: min(1280px, 100% - 2 * clamp(16px, 5.6vw, 80px)); }
.mm-hero { min-height: min(100svh, max(620px, 56.25vw)); }
.mm-hero .loc-hero-media::after { background: linear-gradient(90deg, rgba(24, 18, 15, .55), rgba(24, 18, 15, .12) 70%); }
.mm-hero .loc-hero-inner { padding-inline: clamp(16px, 5.6vw, 80px); padding-bottom: 40px; }
.mm-hero h1 { margin-bottom: 12px; }
.mm-hero .loc-hero-lead { font: 300 18px/1.5 var(--sans); }
.mm-review { flex: none; width: min(345px, 100%); min-height: 0; margin: 48px 0 0; background: #fff; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); }
.mm-review blockquote { margin: 6px 0 0; }
.mm-review .ms-verified { margin-top: 12px; padding-top: 0; }
.page-maternity > .mm-intro { width: min(1010px, 100% - 48px); margin: 0 auto; padding: 118px 0 110px; border-radius: 0; background: none; }
.mm-intro p { font: 400 24px/1.3 var(--serif); color: var(--charcoal); }
.mm-recommended { width: var(--mm-wrap); margin: 0 auto 60px !important; padding: 40px; border-radius: 8px; background: var(--navy); color: var(--cream); display: grid; grid-template-columns: minmax(0, 432px) minmax(0, 1fr); column-gap: clamp(32px, 7vw, 100px); align-items: center; }
.mm-recommended .zn-arch img { aspect-ratio: 432 / 400; border-radius: 50% 50% 8px 8px / 54% 54% 8px 8px; }
.mm-label { margin: 0 0 10px; font: 600 12px/1.5 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--cream); }
.mm-recommended h2 { margin: 0 0 12px; font-size: clamp(36px, 3.3vw, 47.2px); line-height: 1.2; color: var(--cream); }
.mm-recommended h2 a { color: inherit; text-decoration: none; }
.mm-recommended h2 a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.mm-summary { margin: 0 0 22px; font: 600 16px/1.5 var(--sans); color: var(--cream); }
.mm-recommended .prices { margin: 0 0 20px; }
.mm-recommended .price-table { width: auto; margin: 0; background: none; border-radius: 0; }
.mm-recommended .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mm-recommended .price-table th, .mm-recommended .price-table td { padding: 0 70px 8px 0; border: 0; font: 300 16px/1.5 var(--sans); color: var(--cream); text-align: left; }
.mm-recommended .price-table .price { padding-right: 0; font-weight: 600; color: var(--cream); white-space: nowrap; }
.mm-recommended .actions { margin: 0 0 18px; }
.mm-recommended .notice { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cream); }
.page-maternity .zn-included { padding-top: 90px; }
.page-maternity .zn-steps > li { min-height: 300px; }
.mm-guide { padding: 80px 0 70px; background: #efeae5; }
.mm-guide .zn-why-row { width: var(--mm-wrap); grid-template-columns: minmax(0, 537px) minmax(0, 660px); column-gap: clamp(40px, 6vw, 90px); }
.mm-guide .zn-arch img, .mm-split .zn-arch img { aspect-ratio: 537 / 479; border-radius: 50% 50% 12px 12px / 56% 56% 12px 12px; }
.mm-guide .zn-reasons { gap: 28px; }
.mm-guide .zn-reasons p { margin: 0; }
.mm-guide .zn-reasons li.is-no p { font-weight: 600; color: var(--soft); }
.mm-split { width: var(--mm-wrap); margin: 0 auto !important; padding: 60px 0; display: grid; grid-template-columns: minmax(0, 537px) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 80px); align-items: center; }
.mm-split-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 537px); }
.mm-split-flip .zn-arch { order: 2; }
.mm-split-text { text-align: center; }
.mm-split-text h2 { margin: 0 0 24px; font-size: clamp(32px, 2.5vw, 36px); line-height: 1.3; color: var(--charcoal); }
.mm-split-text p { max-width: 660px; margin: 0 auto; font-size: 16px; line-height: 1.5; color: var(--charcoal); }
.mm-split .zn-arch img { object-position: 50% 80%; }
.page-maternity > .mm-split:last-child { padding-bottom: 40px; }
@media (max-width: 899px) {
	.mm-hero { min-height: 0; }
	.mm-hero .loc-hero-inner { padding: 240px 16px 16px; }
	.mm-hero .loc-hero-media img { object-position: 74% 50%; }
	.mm-hero .loc-hero-text { width: 100%; }
	.mm-hero .loc-hero-lead { font-size: 17px; }
	.mm-review { width: 100%; margin-top: 40px; }
	.page-maternity > .mm-intro { width: calc(100% - 64px); padding: 72px 0 80px; }
	.mm-intro p { font-size: 22px; }
	.mm-recommended { width: calc(100% - 32px); margin-bottom: 40px !important; padding: 32px; grid-template-columns: 1fr; row-gap: 32px; }
	.mm-recommended .zn-arch img { aspect-ratio: 292 / 320; border-radius: 50% 50% 6px 6px / 46% 46% 6px 6px; }
	.mm-recommended h2 { font-size: 32px; }
	.mm-recommended .actions .button { width: 100%; }
	.page-maternity .zn-included { padding-top: 48px; }
	.page-maternity .zn-steps > li { min-height: 180px; }
	.mm-guide { padding: 48px 0; }
	.mm-guide > h2, .mm-guide > .zn-sub { padding-inline: 16px; }
	.mm-guide .zn-why-row { width: calc(100% - 32px); grid-template-columns: 1fr; row-gap: 32px; }
	.mm-guide .zn-arch img, .mm-split .zn-arch img { aspect-ratio: 356 / 348; border-radius: 50% 50% 8px 8px / 51% 51% 8px 8px; }
	.mm-split, .mm-split-flip { width: calc(100% - 32px); grid-template-columns: 1fr; row-gap: 40px; padding: 32px 0 48px; }
	.mm-split-flip .zn-arch { order: 0; }
	.mm-split-text h2 { font-size: 34px; }
}