/*
 * Refresh Wellbeing - brand typography.
 *
 * Applies FT Overpass across the site and softens the inherited styling: the
 * theme leaned on heavy weights, tight leading and hard uppercase, which reads
 * blocky. For a wellness studio the aim is calm and open - hierarchy carried
 * by size, colour and space rather than weight.
 *
 * The !important flags are deliberate. Elementor emits a font-family rule per
 * element into its generated stylesheets, so a normal cascade override cannot
 * reach them without recreating every one of those selectors.
 */

/*
 * The supplied FT Overpass is the free release: the letterforms are all there,
 * but every numeral 0-9 is a placeholder glyph rather than a digit. Phone
 * numbers, the street number and the postcode would all render as nonsense.
 *
 * The unicode-range below covers everything EXCEPT U+0030-0039, so digits are
 * never taken from this face and fall through to the next family in the stack.
 * Quicksand is used for them - already loaded by the theme, and rounded
 * geometric like FT Overpass, so the two sit together without a visible seam.
 */
@font-face {
	font-family: 'FT Overpass';
	src: url('fonts/ft-overpass-regular.woff2') format('woff2'),
	     url('fonts/ft-overpass-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0-2F, U+3A-10FFFF;
}

/*
 * Museo Sans, for long-form reading copy and the homepage headline.
 *
 * The family names its weights on its own scale, which is not the CSS scale -
 * Museo Sans 500 is the regular. Each face is declared at the CSS weight its
 * own usWeightClass reports, so `font-weight: 400` picks up Museo Sans 500,
 * 600 picks up Museo Sans 700 and 700 picks up Museo Sans 900. Unlike FT
 * Overpass these faces carry real numerals, so digits are not farmed out.
 */
@font-face {
	font-family: 'Museo Sans';
	src: url('fonts/museo-sans-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Museo Sans';
	src: url('fonts/museo-sans-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Museo Sans';
	src: url('fonts/museo-sans-400-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Museo Sans';
	src: url('fonts/museo-sans-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Museo Sans';
	src: url('fonts/museo-sans-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--rw-font: 'FT Overpass', 'Quicksand', ui-sans-serif, system-ui,
	           -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	/* Long-form copy is kept on its own variable so the reading face can be
	   changed without touching headings, navigation or buttons. It currently
	   resolves to the same stack; put a face in front of it and every
	   paragraph on the site follows. */
	--rw-body-font: 'Museo Sans', var(--rw-font);
	--rw-ink: #432D1A;
	--rw-accent: #CA925C;
}

/* ---------- family ---------- */

body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
p, li, a, span, div,
.elementor-heading-title,
.elementor-button,
.elementor-widget-text-editor,
.wl_hf-menu-item,
.wl_hf-sub-menu-item {
	font-family: var(--rw-font) !important;
}

/* ---------- reading face ----------
 *
 * Running text, as distinct from headings, navigation, buttons and labels -
 * those stay on the display face above.
 */

p,
blockquote,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.rw-classes__intro,
.rw-classes__intro > p,
.rw-class__desc,
.rw-quote__text,
.rw-enquiry__intro,
.rw-acuity__intro,
.rw-dash__notice,
.rw-form__done-body {
	font-family: var(--rw-body-font) !important;
}

/* ---------- weight ----------
 * FT Overpass ships a single 400 weight, so anything asking for 600/700 gets a
 * synthesised bold - thick and slightly smeared at heading sizes. Headings are
 * pinned to 400 and given room instead.
 */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-weight: 400;
	font-synthesis-weight: none;
	color: var(--rw-ink);
}

/* ---------- rhythm ----------
 * The theme sets `h2 { line-height: 1.5px }` - a unit typo for `1.5`. It is
 * invisible while a heading sits on one line and collapses the lines on top of
 * each other the moment one wraps.
 */

h1, .elementor-heading-title {
	line-height: 1.22;
	letter-spacing: -0.005em;
}

h2, h3, h4, h5, h6 {
	line-height: 1.3 !important;
	letter-spacing: 0;
}

body {
	line-height: 1.75;
	letter-spacing: 0.004em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p,
.elementor-widget-text-editor {
	line-height: 1.78;
}

p {
	margin-bottom: 1.15em;
}

/* ---------- softened uppercase ----------
 * Uppercase set tight reads as a wall. Opened up, it reads as considered.
 */

.wl_hf-menu-item,
.wl_hf-sub-menu-item,
.elementor-button,
.rw-nav-list a,
.rw-nav-sub-toggle {
	font-weight: 400;
	letter-spacing: 0.09em;
}

/* ---------- rounded, less blocky ---------- */

.elementor-button,
button,
input[type="submit"],
.wpforms-submit {
	border-radius: 12px !important;
	font-weight: 400;
}

/* Keep the drawer's own controls consistent with the softer buttons. */
.rw-nav-cta {
	font-weight: 400;
}

/* =====================================================================
 * Mobile overflow guards
 *
 * Three pages scrolled sideways on a phone. Two causes, both fixed here
 * rather than by editing the content.
 * ===================================================================== */

@media (max-width: 767px) {

	/* Bare URLs pasted into posts are single unbreakable "words" and pushed
	   the page wider than the screen. Let them wrap mid-string. */
	p,
	li,
	dd,
	blockquote,
	.post-content,
	.blog-text,
	.elementor-widget-text-editor,
	.elementor-heading-title {
		overflow-wrap: anywhere;
	}

	/* Anything that carries its own intrinsic width stays inside the column. */
	img,
	video,
	iframe,
	table,
	pre {
		max-width: 100%;
	}

	/* The private-classes cards are authored as width:100% *plus* a 10px
	   margin, so they came to 20px wider than the viewport. Let the width be
	   derived from the space actually available instead. */
	.elementor-element-4473066,
	.elementor-element-e672c16 {
		width: auto !important;
	}
}

/* =====================================================================
 * Page background
 *
 * The theme painted pages #FEFEFE, with #F8F8F8 and #FFFFFF panels on the
 * blog - a cold white against the warm cream (#FBF4EE) the content sections
 * already use, so those pages read as a different site. Standardised on the
 * cream that was already in the palette.
 *
 * Form fields are deliberately left white: they are input affordances rather
 * than page background, and tinting them flattens the distinction.
 * ===================================================================== */

:root {
	--rw-cream: #FBF4EE;
}

body {
	background-color: var(--rw-cream);
}

/* Blog listing and article panels. */
.bdp_blog_template.news,
.preloader,
li.trackback,
.author-box,
.accordion-content,
.blog-post,
.post-content,
.posts-container,
.content-side {
	background-color: var(--rw-cream);
}

/*
 * The blog plugin paints its own panels white, and does it from a <style>
 * block injected into the body - which lands after this stylesheet in
 * document order, so ordinary specificity cannot reach it. Hence the
 * !important here, scoped tightly to the plugin's own containers.
 */
.blog-text,
.content-typography,
.blog_template,
.bdp_blog_template,
.bdp_blog_template.news {
	background-color: var(--rw-cream) !important;
}

/* Headings and links inside those cards were inheriting an opaque white
   patch of their own; let the card colour show through instead. */
.bdp_blog_template .title,
.bdp_blog_template .title a,
.bdp_blog_template p,
.bdp_blog_template .bdp-post-content,
h2.title,
h2.title a {
	background-color: transparent !important;
}

/* The plugin also sets `background: #fff !important` on its post-title links
   from that same body-injected block, at a higher specificity than the rule
   above. Prefixing with `body` outranks it without resorting to an id. */
body .bdp_blog_template .blog_header h2 a,
body .bdp_blog_template .blog_header h2,
body .bdp_blog_template h2.title a,
body .bdp_blog_template h2.title {
	background-color: transparent !important;
}

/* =====================================================================
 * Testimonials - autoscrolling marquee
 *
 * The three quotes used to stack, running the section to roughly 1348px on a
 * phone for three paragraphs. They now sit in a single row that scrolls itself,
 * slowly and on a loop.
 *
 * The track holds two identical runs of the cards and travels exactly one run
 * before repeating, so the seam never shows. That only stays exact if each card
 * carries its own trailing margin rather than the row using `gap`: with `gap`
 * the two halves differ by one gap and the loop drifts a little further out of
 * step on every pass.
 * ===================================================================== */

.rw-quotes {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 40px 0 46px;
	background-color: #2A1A0D;
}

.rw-quotes__head {
	max-width: 1140px;
	margin: 0 auto 22px;
	padding: 0 20px;
}

.rw-quotes__title {
	margin: 0;
	color: var(--rw-accent, #CA925C) !important;
	font-size: clamp(1.1rem, 2.6vw, 1.5rem) !important;
	line-height: 1.3 !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
}

.rw-quotes__viewport {
	overflow: hidden;
	/* No edge mask: it was tuned to fade the cards into a matching dark brown
	   page background. Now that the page is cream and the cards stay brown,
	   the same fade showed as a pale haze washing over the card edges rather
	   than a clean dissolve, and it clipped the edge cards' text mid-line. */
}

.rw-quotes__track {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	/* No-JavaScript fallback only - rw-quotes.js sets .is-js and takes the
	   transform over. Like the script's old pacing this is a fixed duration
	   for the whole track, so it runs faster the more testimonials there
	   are; 726s keeps 34 of them near the script's per-card pace. */
	animation: rw-marquee 726s linear infinite;
}

@keyframes rw-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* The row never stops - not on hover, not on tap. rw-quotes.js takes the
   transform over and lets a swipe or a scroll shove it along instead; the
   keyframes above stay as the no-JavaScript fallback. A keyframe animation
   cannot have its speed changed mid-flight without jumping, which is why the
   script drives it directly rather than rewriting the duration. */
.rw-quotes__track.is-js {
	animation: none;
	will-change: transform;
}

/* A horizontal drag over the row is the row's, not the page's. */
.rw-quotes__viewport { touch-action: pan-y; }

.rw-quotes__track > .rw-quote {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	width: 300px;
	/* The trailing margin is the gap - see the note above. */
	margin: 0 16px 0 0;
	padding: 22px 22px 20px;
	list-style: none;
	border-radius: 18px;
	background-color: rgba(251, 244, 238, 0.05);
	box-shadow: inset 0 0 0 1px rgba(202, 146, 92, 0.18);
}

/* The theme dresses every `blockquote` as a pull-quote: white ground, a grey
   ink and 35px of padding. All three are reset here, or the cream text would
   sit invisibly on a white slab inside the card. */
.rw-quote__text {
	padding: 0;
	border: 0;
	background: none;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 14px;
	color: rgba(251, 244, 238, 0.86);
	font-size: 0.86rem;
	line-height: 1.65;
}

.rw-quote__name {
	margin: 0;
	color: var(--rw-accent, #CA925C);
	font-size: 0.82rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

/* Centred at every width, phones included. */
.rw-quote__text,
.rw-quote__name { text-align: center; }

.rw-quote__name::before { content: '\2014\00a0'; }

@media (max-width: 778px) {
	.rw-quotes { padding: 30px 0 34px; }
	.rw-quotes__head { padding: 0 16px; margin-bottom: 16px; }
	.rw-quotes__track > .rw-quote { width: 258px; margin-right: 12px; padding: 18px 18px 16px; }
	.rw-quote__text { font-size: 0.82rem; -webkit-line-clamp: 6; }
}

/* With motion turned down the row stops moving and becomes a plain swipe. */
@media (prefers-reduced-motion: reduce) {
	.rw-quotes__track { animation: none; }

	.rw-quotes__viewport {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.rw-quotes__viewport::-webkit-scrollbar { display: none; }
}

/* =====================================================================
 * Wordmark band under the hero
 *
 * The band below the video is the brand brown rather than cream, with the
 * name set as a script wordmark in tan.
 * ===================================================================== */

.elementor-element-3f890d8 {
	background-color: #2A1A0D !important;
	padding-top: 26px;
	padding-bottom: 46px;
}

/* Elementor's own container padding puts 60px above the wordmark and 30px
   below, which left it floating in the middle of the band with a wide empty
   gap over it. Spacing is driven from the band itself instead, so the
   wordmark sits up near the top of the brown. */
.elementor-element-3f890d8 > .e-con-inner {
	padding-top: 0;
	padding-bottom: 0;
}

/* Elementor emits `.elementor-11 .elementor-element.elementor-element-511bd81`
   for this heading - three classes, which beats a two-class selector. Matching
   that shape and adding the heading class puts this one above it. */
.elementor-11 .elementor-element.elementor-element-511bd81 .elementor-heading-title,
.elementor-element-3f890d8 .elementor-heading-title {
	color: #CA925C;
	font-family: 'Classic Roots', 'Pacifico', cursive !important;
	font-size: clamp(2rem, 7vw, 3rem);
	line-height: 1.2;
	text-align: center;
}


/* =====================================================================
 * Acuity Scheduling embeds
 *
 * The class booking on the Yoga page and the vouchers on the Gift Vouchers
 * page are both frames served from the studio's own Acuity account. Acuity's
 * embed.js measures the frame's contents and sets its height, so the height
 * attribute in the markup is only a starting value and there must be no
 * fixed height here to fight it.
 * ===================================================================== */

.rw-acuity {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px 8px;
}

.rw-acuity iframe {
	display: block;
	width: 100%;
	min-height: 620px;
	border: 0;
	border-radius: 18px;
	background-color: #FBF4EE;
}

.rw-acuity__intro,
.rw-acuity__fallback {
	max-width: 1140px;
	margin: 0 auto 22px;
	padding: 0 20px;
	text-align: center;
	line-height: 1.7;
}

@media (max-width: 778px) {
	.rw-acuity { padding: 0 14px 4px; }

	.rw-acuity iframe {
		min-height: 560px;
		border-radius: 14px;
	}

	.rw-acuity__intro,
	.rw-acuity__fallback { padding: 0 14px; }
}


/* =====================================================================
 * Yoga class listing
 *
 * The classes, durations, prices and descriptions are the studio's own,
 * transcribed from its Acuity account so the page reads in the site's
 * typography rather than inside a grey booking frame. Each card books
 * straight into that appointment type; the live timetable frame sits below.
 * ===================================================================== */

.rw-classes {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

.rw-classes__intro,
.rw-classes__note {
	max-width: 640px;
	margin: 0 auto 18px;
	text-align: center;
	line-height: 1.75;
}

/* The intro is set as separate blocks so the blank lines between them are real
   paragraph breaks rather than stacked <br>s, and the address stays on its own
   line under the sentence that introduces it. */
.rw-classes__intro > p {
	margin: 0 0 1.1em;
	line-height: 1.75;
}

.rw-classes__intro > p:last-child { margin-bottom: 0; }

.rw-classes__note { margin-bottom: 18px; }

/* Set as a section label rather than a heading. The kit styles bare `h3` at a
   specificity a lone class cannot reach, which was quietly rendering these at
   15px - the size of body copy, so the groups read as unlabelled. Rather than
   escalate a size fight, they are now deliberately small, uppercase and tan,
   matching the TESTIMONIALS label on the home page. */
.rw-classes__group {
	margin: 20px 0 12px !important;
	text-align: center;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	line-height: 1.3 !important;
	color: var(--rw-accent-ink, #8A5A2B) !important;
}

.rw-classes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The theme paints list bullets and margins on `li` site-wide. */
.rw-classes__grid > .rw-class {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 26px 24px 24px;
	list-style: none;
	background-color: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 2px 18px rgba(67, 45, 26, 0.07);
}

.rw-class__name {
	margin: 0 0 10px;
	font-size: 1.18rem;
	line-height: 1.35;
	color: var(--rw-ink, #432D1A);
}

/* When and where a class actually runs - the one thing a timetable frame
   further down the page cannot tell someone at a glance. */
.rw-class__when {
	margin: 0 0 8px;
	color: var(--rw-ink, #432D1A);
	font-size: 0.92rem;
	line-height: 1.45;
}

.rw-class__meta {
	display: flex;
	gap: 14px;
	align-items: baseline;
	margin: 0 0 14px;
	font-size: 0.95rem;
	color: var(--rw-accent, #CA925C);
}

.rw-class__price { font-weight: 600; }

.rw-class__desc {
	margin: 0 0 20px;
	font-size: 0.96rem;
	line-height: 1.7;
}

/* Pushes the button to the bottom edge so cards of differing description
   length still line their buttons up. */
.rw-class__book {
	align-self: flex-start;
	margin-top: auto;
	padding: 11px 26px;
	border-radius: 999px;
	background-color: var(--rw-ink, #432D1A);
	color: #FBF4EE !important;
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 160ms ease;
}

.rw-class__book:hover,
.rw-class__book:focus { background-color: var(--rw-accent, #CA925C); }

/* Names the class for a screen reader without repeating it on screen. */
.rw-class__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.rw-passes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.rw-passes > .rw-pass {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 14px 20px;
	list-style: none;
	background-color: #FFFFFF;
	border-radius: 14px;
}

.rw-pass__price {
	color: var(--rw-accent, #CA925C);
	font-weight: 600;
}

.rw-classes__cta { text-align: center; }

.rw-classes__cta .rw-class__book { align-self: center; display: inline-block; }

@media (max-width: 778px) {
	.rw-classes { padding: 0 14px; }

	/* The intro inherits 20px from the theme, which broke "…by the water."
	   onto a line of its own. Sized in vw instead, so the text keeps the same
	   proportion of the column at every phone width and the wrap lands in the
	   same place - checked at 320, 360, 390 and 430. */
	/* On the paragraphs, not just the wrapper: the theme sets `p { font-size:
	   1rem }` as a bare element rule, and a directly-matching rule beats an
	   inherited value however specific the ancestor's selector is. */
	.rw-classes__intro,
	.rw-classes__intro > p {
		font-size: 3.85vw;
		line-height: 1.65;
	}

	.rw-classes__grid { grid-template-columns: 1fr; gap: 14px; }

	.rw-classes__grid > .rw-class { padding: 22px 20px 20px; }

	.rw-passes { grid-template-columns: 1fr; }
}

/* The timetable heading sits outside .rw-classes, so it carries its own
   column width. */
.rw-timetable__title {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
}

/* Page banner, matching the one the Yoga page inherits from Elementor
   (brown #432D1A, white uppercase 38px centred). Written out here so pages
   whose Elementor container was never a banner can carry the same one.
   line-height is explicit because the theme sets `h2 { line-height: 1.5px }`,
   which collapses any heading that inherits it. */
/* The bottom padding here is the single control for the gap between a page
   title and the line under it - .rw-treatments-body contributes nothing, so
   there is one number to change rather than two that add up. It reads about
   6px larger than it measures: the title's line-height leaves leading below
   the glyphs, and the subtitle's leaves some above. */
.rw-pagebanner {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 40px 20px 14px;
	background-color: #432D1A;
}

/* Elementor emits `.elementor-kit-7 h2` at (0,1,1), which beats a lone class
   and pulls both the colour and the size back to the page defaults. */
.rw-pagebanner__title {
	margin: 0;
	color: #FFFFFF !important;
	font-size: clamp(1.75rem, 5vw, 38px) !important;
	line-height: 1.3 !important;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-align: center;
	text-transform: uppercase;
}

@media (max-width: 778px) {
	.rw-pagebanner { padding: 26px 16px 9px; }
}

/* Cards stretch to the tallest in their row so the Book buttons line up along
   a common baseline - with descriptions clamped below, the difference between
   the longest and shortest card is a line or two rather than a void. */
.rw-classes__grid { align-items: stretch; }

.rw-classes__grid > .rw-class { display: flex; flex-direction: column; }

/* A treatment's description is a taster; the full copy lives on the booking
   page. Clamping keeps one wordy entry from setting the height of its row. */
.rw-class__desc {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =====================================================================
 * Homepage category circles
 *
 * Sits directly under the wordmark and carries the same brown, so the two
 * read as one continuous band. Each circle is a button first and a photograph
 * second: the image is desaturated and darkened, then a brown wash is laid
 * over it, so the photo reads as texture behind the word rather than as a
 * picture competing with it. The label sits on top in cream.
 * ===================================================================== */

.rw-circles-band {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 4px 16px 56px;
	background-color: #2A1A0D;
}

.rw-circles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* The theme paints bullets and margins onto `li` site-wide. */
.rw-circles > .rw-circles__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rw-circle {
	position: relative;
	display: block;
	text-decoration: none;
}

.rw-circle__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 50%;
	background-color: #43301E;
	/* A hairline of the brand tan, so the circle has an edge against the
	   brown without needing a hard border. */
	box-shadow: inset 0 0 0 1px rgba(202, 146, 92, 0.28);
}

.rw-circle__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* No colour filter: the photographs show as shot. They used to be pushed
	   through a sepia monotone so three pictures taken in different light read
	   as one set, which is a job the wash below now does on its own. */
	transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The brown wash. Slightly deeper at the foot of the circle, which seats the
   label without needing a hard scrim behind the text. */
.rw-circle__media::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		/* A band across the middle, where the label sits. Two of these photos
		   have white uniforms exactly there, and lifting the wash enough to
		   cover them everywhere would have dimmed the whole picture; this
		   leaves the top and bottom of each circle at full brightness. */
		linear-gradient(to bottom,
			rgba(42, 26, 13, 0) 20%,
			rgba(42, 26, 13, 0.40) 40%,
			rgba(42, 26, 13, 0.40) 60%,
			rgba(42, 26, 13, 0) 80%),
		radial-gradient(circle at 50% 40%,
			rgba(42, 26, 13, 0.30) 0%,
			rgba(42, 26, 13, 0.44) 64%,
			rgba(42, 26, 13, 0.58) 100%);
	transition: opacity 320ms ease;
}

.rw-circle__label {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 5%;
	color: #FBF4EE;
	/* "TREATMENTS" is the constraint: ten caps at roughly 0.64em apiece is
	   about 6.4em of line, and it has to sit inside a circle that is a third
	   of the viewport. These bounds put it as large as fits at both ends. */
	font-size: clamp(0.82rem, 3.9vw, 2.05rem);
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	/* A real halo, not a soft drop. Two of these photographs put white
	   uniforms and towels directly behind the caps, where cream on cream
	   measured barely 2:1 once the sepia stopped darkening them. */
	text-shadow: 0 1px 3px rgba(26, 15, 6, 0.9),
	             0 2px 14px rgba(26, 15, 6, 0.7);
}

.rw-circle__note {
	display: block;
	margin-top: 6px;
	color: rgba(251, 244, 238, 0.72);
	font-size: 0.66em;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: none;
}

/* Hover lifts the wash a little and eases the photograph up - enough to read
   as pressable, not enough to turn back into a picture. */
a.rw-circle:hover .rw-circle__media img,
a.rw-circle:focus-visible .rw-circle__media img {
	transform: scale(1.05);
}

a.rw-circle:hover .rw-circle__media::after,
a.rw-circle:focus-visible .rw-circle__media::after { opacity: 0.72; }

a.rw-circle:focus-visible .rw-circle__media {
	box-shadow: inset 0 0 0 2px rgba(202, 146, 92, 0.85);
}

@media (max-width: 480px) {
	.rw-circles-band { padding: 2px 12px 40px; }
	.rw-circles { gap: 10px; }
	.rw-circle__label { padding: 0 4%; letter-spacing: 0.02em; }
}


/* =====================================================================
 * Enquiry form (retreats)
 * ===================================================================== */

.rw-enquiry {
	max-width: 560px;
	margin: 0 auto;
	padding: 0 20px 10px;
}

.rw-enquiry__intro {
	margin: 0 0 30px;
	text-align: center;
	line-height: 1.75;
}

/* One line at every phone width. The sentence is a shade under 21em wide, so
   the size has to track the viewport rather than sit at a fixed value -
   anything that fits a 320px screen is too small on a 430px one. 4.1vw keeps
   it on one line down to 320px with room to spare, and the 20px ceiling is
   the size it already was, which fits on one line from 500px up.

   Written as a child selector to clear Elementor's `.elementor-widget-container
   p { font-size: inherit }`, which at (0,1,1) outranks a lone class and was
   pulling the size back to the 20px its container carries. */
.rw-enquiry > .rw-enquiry__intro {
	font-size: clamp(13px, 4.1vw, 20px);
}

.rw-field { margin: 0 0 22px; }

.rw-field__label {
	display: block;
	margin: 0 0 8px;
	font-size: 0.94rem;
	color: var(--rw-ink, #432D1A);
}

.rw-field__input {
	display: block;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(67, 45, 26, 0.22);
	border-radius: 14px;
	background-color: #FFFFFF;
	color: var(--rw-ink, #432D1A);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.rw-field__input::placeholder { color: rgba(67, 45, 26, 0.38); }

.rw-field__input:focus {
	outline: none;
	border-color: var(--rw-accent, #CA925C);
	box-shadow: 0 0 0 3px rgba(202, 146, 92, 0.24);
}

.rw-field__input[aria-invalid="true"] { border-color: #A2442B; }

.rw-field__error {
	margin: 8px 0 0;
	color: #A2442B;
	font-size: 0.87rem;
	line-height: 1.5;
}

/* Segmented control. Radios stay in the DOM and keep their semantics; the
   visible face is the sibling span. */
.rw-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 6px;
	border-radius: 999px;
	background-color: rgba(67, 45, 26, 0.08);
}

.rw-tab { display: block; margin: 0; cursor: pointer; }

.rw-tab__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.rw-tab__face {
	display: block;
	padding: 11px 10px;
	border-radius: 999px;
	color: var(--rw-ink, #432D1A);
	font-size: 0.95rem;
	line-height: 1;
	text-align: center;
	transition: background-color 180ms ease, color 180ms ease;
}

.rw-tab__input:checked + .rw-tab__face {
	background-color: var(--rw-ink, #432D1A);
	color: #FBF4EE;
}

.rw-tab__input:focus-visible + .rw-tab__face {
	box-shadow: 0 0 0 3px rgba(202, 146, 92, 0.55);
}

.rw-form__submit {
	display: block;
	width: 100%;
	margin: 30px 0 0;
	padding: 15px 26px;
	border: 0;
	border-radius: 999px;
	background-color: var(--rw-ink, #432D1A);
	color: #FBF4EE;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.rw-form__submit:hover,
.rw-form__submit:focus-visible { background-color: var(--rw-accent, #CA925C); }

.rw-form__privacy {
	margin: 14px 0 0;
	color: rgba(67, 45, 26, 0.62);
	font-size: 0.85rem;
	line-height: 1.6;
	text-align: center;
}

.rw-form__done {
	padding: 30px 24px;
	border-radius: 20px;
	background-color: #FFFFFF;
	text-align: center;
	box-shadow: 0 2px 18px rgba(67, 45, 26, 0.07);
}

.rw-form__done-title { margin: 0 0 10px; font-size: 1.3rem; }
.rw-form__done-body  { margin: 0 0 20px; line-height: 1.7; }

.rw-form__mailto {
	display: inline-block;
	padding: 13px 28px;
	border-radius: 999px;
	background-color: var(--rw-ink, #432D1A);
	color: #FBF4EE !important;
	font-size: 0.98rem;
	line-height: 1;
	text-decoration: none;
}

.rw-form__mailto:hover,
.rw-form__mailto:focus-visible { background-color: var(--rw-accent, #CA925C); }

@media (max-width: 778px) {
	.rw-enquiry { padding: 0 16px 8px; }
}


/* =====================================================================
 * Dashboard (/dash)
 *
 * Counts are hero numbers; the two rankings are single-hue horizontal bars
 * with the value written on each row, so neither needs a legend or an axis.
 * The bar hue is the brand tan carrying magnitude only - it never encodes
 * identity, so there is no categorical palette here to keep separable.
 * ===================================================================== */

.rw-dash {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px 20px;
}

.rw-dash__notice {
	margin: 0 0 32px;
	padding: 18px 20px;
	border-left: 3px solid var(--rw-accent, #CA925C);
	border-radius: 0 14px 14px 0;
	background-color: rgba(202, 146, 92, 0.10);
	font-size: 0.92rem;
	line-height: 1.7;
}

.rw-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.rw-stats > .rw-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 22px 20px;
	list-style: none;
	background-color: #FFFFFF;
	border-radius: 18px;
	box-shadow: 0 2px 18px rgba(67, 45, 26, 0.07);
}

.rw-stat__value {
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	line-height: 1.1;
	color: var(--rw-ink, #432D1A);
}

.rw-stat__label {
	font-size: 0.86rem;
	line-height: 1.4;
	color: rgba(67, 45, 26, 0.62);
}

.rw-dash__section { margin: 38px 0 0; }

.rw-dash__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.rw-dash__title {
	margin: 0 0 16px;
	font-size: 1.2rem;
	line-height: 1.3;
}

.rw-dash__head .rw-dash__title { margin-bottom: 16px; }

.rw-dash__btn {
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background-color: var(--rw-ink, #432D1A);
	color: #FBF4EE;
	font-family: inherit;
	font-size: 0.88rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.rw-dash__btn:hover,
.rw-dash__btn:focus-visible { background-color: var(--rw-accent, #CA925C); }

.rw-dash__btn--quiet {
	background-color: transparent;
	border: 1px solid rgba(67, 45, 26, 0.28);
	color: rgba(67, 45, 26, 0.75);
}

.rw-dash__btn--quiet:hover,
.rw-dash__btn--quiet:focus-visible {
	background-color: #A2442B;
	border-color: #A2442B;
	color: #FBF4EE;
}

.rw-dash__empty {
	margin: 0;
	padding: 22px 20px;
	border-radius: 16px;
	background-color: rgba(67, 45, 26, 0.05);
	color: rgba(67, 45, 26, 0.68);
	font-size: 0.92rem;
	line-height: 1.7;
}

/* ---- ranked bars ---- */

.rw-bars { margin: 0; padding: 0; list-style: none; }

.rw-bars > .rw-bar {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.rw-bar__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 6px;
}

.rw-bar__label {
	overflow: hidden;
	font-size: 0.94rem;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The count is text, in ink - the bar beside it carries the magnitude. */
.rw-bar__value {
	flex: none;
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--rw-ink, #432D1A);
}

.rw-bar__track {
	height: 8px;
	border-radius: 999px;
	background-color: rgba(67, 45, 26, 0.08);
}

.rw-bar__fill {
	height: 100%;
	border-radius: 999px;
	background-color: var(--rw-accent, #CA925C);
}

.rw-bar__sub {
	margin: 5px 0 0;
	overflow: hidden;
	color: rgba(67, 45, 26, 0.5);
	font-size: 0.78rem;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- enquiries table ---- */

.rw-table__scroll { overflow-x: auto; }

.rw-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.rw-table th {
	padding: 10px 14px 10px 0;
	border-bottom: 1px solid rgba(67, 45, 26, 0.16);
	color: rgba(67, 45, 26, 0.62);
	font-weight: 400;
	text-align: left;
	white-space: nowrap;
}

.rw-table td {
	padding: 13px 14px 13px 0;
	border-bottom: 1px solid rgba(67, 45, 26, 0.08);
	line-height: 1.5;
	vertical-align: top;
}

.rw-table__when { color: rgba(67, 45, 26, 0.6); white-space: nowrap; }

.rw-table__tag {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	background-color: rgba(202, 146, 92, 0.18);
	color: rgba(67, 45, 26, 0.72);
	font-size: 0.74rem;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.rw-dash { padding: 0 16px 16px; }
	.rw-stats { grid-template-columns: 1fr; }
}


/* =====================================================================
 * iOS Safari: the areas above and below the page
 *
 * Safari paints its overscroll areas - behind the status bar at the top and
 * the home indicator at the bottom - with the canvas colour, which it takes
 * from `html` (or from `body` when `html` has none). The body is cream, so
 * both strips came out cream against a site whose header and footer bars are
 * brown. Giving `html` the brown fixes both ends; body keeps the cream for
 * the page content itself.
 *
 * The matching `theme-color` meta tag in each page's head tints Safari's own
 * toolbars to match.
 * ===================================================================== */

html { background-color: #2A1A0D; }

/* =====================================================================
 * Homepage closing image band
 *
 * It was an empty container at `min-height: 100vh` - a whole screen of
 * photograph with nothing in it - pinned with `background-attachment: fixed`.
 * iOS Safari has never supported fixed attachment properly: it sizes the
 * image to the viewport rather than the element and leaves it misaligned as
 * the page scrolls, which is most of why this section looked broken on a
 * phone. Scrolls with the page now, at a height that reads as a band rather
 * than a screen of its own.
 * ===================================================================== */

.elementor-11 .elementor-element.elementor-element-5e1acfc {
	--min-height: 300px;
	min-height: 300px;
	background-attachment: scroll !important;
}

@media (min-width: 779px) {
	.elementor-11 .elementor-element.elementor-element-5e1acfc {
		--min-height: 420px;
		min-height: 420px;
	}
}


/* =====================================================================
 * Contact page
 *
 * The form is WPForms' markup with its own stylesheet: 3px corners, a hairline
 * black border and a stock blue submit button. Restyled here to the same
 * language as the retreat form - rounded, white on the brown, tan focus ring,
 * brown pill button.
 *
 * Font size stays at 16px on the inputs on purpose: below that, iOS Safari
 * zooms the page in when a field takes focus and does not zoom back out.
 * ===================================================================== */

.wpforms-container .wpforms-field-medium,
.wpforms-container .wpforms-field-large,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container textarea {
	width: 100% !important;
	max-width: 100% !important;
	padding: 14px 16px !important;
	border: 1px solid rgba(202, 146, 92, 0.34) !important;
	border-radius: 14px !important;
	background-color: #FFFFFF !important;
	color: var(--rw-ink, #432D1A) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.wpforms-container textarea { min-height: 130px !important; resize: vertical; }

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder { color: rgba(67, 45, 26, 0.42); }

.wpforms-container input:focus,
.wpforms-container textarea:focus {
	outline: none;
	border-color: var(--rw-accent, #CA925C) !important;
	box-shadow: 0 0 0 3px rgba(202, 146, 92, 0.28) !important;
}

.wpforms-container input[aria-invalid="true"],
.wpforms-container textarea[aria-invalid="true"] { border-color: #E0A38C !important; }

/* The number field's spinners have no business on a phone number. */
.wpforms-container input[type="number"] { -moz-appearance: textfield; }
.wpforms-container input[type="number"]::-webkit-outer-spin-button,
.wpforms-container input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wpforms-container .wpforms-field { padding: 0 0 16px !important; }

.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-sublabel {
	color: rgba(251, 244, 238, 0.78) !important;
	font-size: 0.88rem !important;
	font-weight: 400 !important;
}

.rw-formerr {
	margin: 8px 0 0;
	color: #E8B4A0;
	font-size: 0.85rem;
	line-height: 1.5;
}

.wpforms-container .wpforms-submit,
.wpforms-container button[type="submit"] {
	width: 100%;
	padding: 15px 30px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var(--rw-accent, #CA925C) !important;
	color: #2A1A0D !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-submit:focus-visible {
	background-color: #FBF4EE !important;
}

/* The confirmation panel sits on the brown, unlike the retreats one. */
.rw-contact__done {
	background-color: rgba(251, 244, 238, 0.06);
	box-shadow: inset 0 0 0 1px rgba(202, 146, 92, 0.22);
}

.rw-contact__done .rw-form__done-title,
.rw-contact__done .rw-form__done-body { color: #FBF4EE; }

.rw-contact__done .rw-form__privacy { color: rgba(251, 244, 238, 0.6); }

.rw-contact__done .rw-form__mailto {
	background-color: var(--rw-accent, #CA925C);
	color: #2A1A0D !important;
}

/* The two social icons were in a one-column grid, which stacked them and left
   one adrift at the right. A row, aligned with the text above them. */
.elementor-element-8cbd5b1 {
	display: flex !important;
	grid-template-columns: none !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 14px !important;
	justify-content: flex-start !important;
	align-items: center;
}

.elementor-element-8cbd5b1 > .elementor-widget { width: auto !important; }

/* The map is decorative here; a full 400px of it on a phone is a lot. */
@media (max-width: 778px) {
	.elementor-element-319c1ef iframe { height: 260px !important; }
}


/* =====================================================================
 * Desktop
 *
 * The phone layout was built first and reads well; these bring the wide
 * layout up to it. Everything here is scoped above the mobile breakpoint so
 * the phone rendering is untouched.
 * ===================================================================== */

@media (min-width: 779px) {

	/* Class and treatment cards sit centred on the page rather than packed to
	   the left, and their contents centre with them. Applied to both listings:
	   the two pages were deliberately built to match. */
	.rw-classes__grid,
	.rw-passes { justify-content: center; }

	.rw-classes__grid > .rw-class { text-align: center; }

	.rw-classes__grid > .rw-class .rw-class__meta { justify-content: center; }

	.rw-classes__grid > .rw-class .rw-class__book { align-self: center; }

	/* The hero headline was capped at 4.4rem, which left it small in a 700px
	   band - about a quarter of its height, against a third on a phone. */
	.rw-hero-video .rw-hero-copy__line { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }

	/* Circles sat at 288px inside a 900px column on a 1440px screen, marooned
	   in the middle of the brown. Same column as the rest of the page now. */
	.rw-circles { max-width: 1140px; gap: 26px; }

	.rw-circles-band { padding: 10px 20px 68px; }

	/* Cards were sized in fractions, so a group with one card in it stretched
	   that card across the full 1140px column and set its description on a
	   1050px measure. Columns are capped instead: rows fill left to right and
	   a lone card stays card-sized. */
	.rw-classes__grid {
		/* auto-fit, not auto-fill: auto-fill keeps generating empty columns to
		   fill the row, so a group holding one card left it sitting in the
		   first of them with nothing for justify-content to centre. auto-fit
		   collapses the empty tracks, so one card centres like a full row. */
		/* 348px, not 360: three of those plus two 18px gaps is 1080px and fits
		   the 1100px column, where 360 forced a second row after two and left
		   360px of the page empty either side. */
		grid-template-columns: repeat(auto-fit, minmax(260px, 348px));
	}

	.rw-passes { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); }

	/* A little more room per quote now there is width to spare. */
	.rw-quotes__track > .rw-quote { width: 360px; margin-right: 20px; }

	/* Long-form copy wants a readable measure, not the full column. */
	.rw-acuity__intro,
	.rw-acuity__fallback { max-width: 640px; }

	/* The footer's two columns were both flush left in a full-width flex row,
	   leaving a third of the footer empty on the right. Centred on the page
	   column, sharing it evenly. */
	.elementor-element-9092221 {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
	}

	.elementor-element-9092221 > .e-con { flex: 1 1 0; max-width: 50%; }
}


/* =====================================================================
 * Large displays (a 27" Mac sits at 2560 logical px)
 *
 * The hero band was a flat 700px at every width above the tablet
 * breakpoint. At 2560 that is a 3.66:1 slot for 16:9 footage - only about
 * half the frame's height survives the crop, and the headline, capped at
 * 5.4rem, shrinks to a detail inside it. The band grows with the viewport
 * here and the type grows with it.
 *
 * Body copy deliberately stays on the 1140px column: a wider measure is
 * harder to read, not grander. Only the full-bleed pieces widen.
 * ===================================================================== */

@media (min-width: 1600px) {
	.rw-hero-video { height: clamp(700px, 44vw, 920px); }

	.rw-hero-video .rw-hero-copy__line { font-size: clamp(3.4rem, 5.2vw, 7rem); }

	/* Keeps the headline from drifting into the middle of a very wide frame. */
	.rw-hero-copy { max-width: 1400px; }

	.rw-circles { max-width: 1400px; gap: 34px; }

	.rw-circles-band { padding: 16px 20px 80px; }

	.rw-quotes__track > .rw-quote { width: 400px; margin-right: 24px; }
}

/* hero.mp4/webm are encoded pre-cropped to the top 880 rows of the frame
   (2.18:1) - everything below was sea that the wide desktop band discarded
   anyway, so the bitrate now goes only on pixels that show. Anchored to the
   top: her raised arm peaks at 4% of the original frame height and her head
   sits at 13-17%, both of which a centred crop was cutting into on a wide
   monitor. No effect on phones, where the band matches the mobile encode's
   aspect exactly and nothing is cropped. */
.rw-hero-video video.rw-hero-video__media { object-position: 50% 0%; }


/* The footer band was painted #EEDBCE - a pinker, darker cream than anything
   else on the page. It now takes the same light cream the cards use, so the
   footer and the cards read as one material. */
.elementor-element-9092221,
.elementor-11 .elementor-element.elementor-element-9092221 {
	background-color: #FFFFFF !important;
}


/* Nothing: the gap under the page banner is set by .rw-pagebanner's own
   padding-bottom, so it stays in one place rather than being the sum of two. */
.rw-treatments-body { padding-top: 0; }


/* =====================================================================
 * Footer enquiry form
 *
 * Replaces the blurb-and-Subscribe-button pair in the footer's right-hand
 * column, which linked out to the contact page. Kept compact deliberately:
 * the brief was to fit the footer's existing height, so the message is a
 * single line rather than a textarea.
 * ===================================================================== */

.rw-footform-wrap {
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	text-align: center;
}

.rw-footform__blurb {
	margin: 0 0 14px;
	font-size: 0.88rem;
	line-height: 1.55;
	color: rgba(67, 45, 26, 0.72);
}

.rw-footform__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.rw-footform__field {
	display: block;
	margin: 0 0 8px;
	text-align: left;
}

/* The labels are there for screen readers; the placeholders carry it visually,
   which is what keeps the form inside the footer's height. */
.rw-footform__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.rw-footform__input {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid rgba(202, 146, 92, 0.42);
	border-radius: 12px;
	background-color: #FFFFFF;
	color: var(--rw-ink, #432D1A);
	font-family: inherit;
	/* 16px: below this iOS zooms the page in on focus and does not zoom back. */
	font-size: 16px;
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.rw-footform__input::placeholder { color: rgba(67, 45, 26, 0.4); }

.rw-footform__input:focus {
	outline: none;
	border-color: var(--rw-accent, #CA925C);
	box-shadow: 0 0 0 3px rgba(202, 146, 92, 0.26);
}

.rw-footform__input[aria-invalid="true"] { border-color: #A2442B; }

.rw-footform__error {
	margin: 0 0 8px;
	color: #A2442B;
	font-size: 0.82rem;
	line-height: 1.45;
	text-align: left;
}

.rw-footform__submit {
	width: 100%;
	margin: 2px 0 0;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	background-color: var(--rw-ink, #432D1A);
	color: #FBF4EE;
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.rw-footform__submit:hover,
.rw-footform__submit:focus-visible { background-color: var(--rw-accent, #CA925C); }

.rw-footform__done {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--rw-ink, #432D1A);
}

.rw-footform__mailto {
	display: inline-block;
	margin-top: 10px;
	padding: 10px 22px;
	border-radius: 999px;
	background-color: var(--rw-ink, #432D1A);
	color: #FBF4EE !important;
	font-size: 0.9rem;
	text-decoration: none;
}

@media (max-width: 520px) {
	.rw-footform__row { grid-template-columns: 1fr; gap: 0; }
}


/* =====================================================================
 * Light scheme
 *
 * The site was cream pages framed by dark brown furniture - header, banners,
 * the homepage bands and the footer. Those panels are cream now, so the brown
 * is carried by type, buttons and the testimonial cards rather than by large
 * fills.
 *
 * Two things stay dark on purpose: buttons, which need to read as pressable
 * against a pale page, and the testimonial cards, which are the one place the
 * brown is still doing work.
 *
 * Ordering note: this block sits last in the file so it lands after the
 * per-section rules it overrides.
 * ===================================================================== */

:root {
	--rw-panel: #FBF4EE;      /* what used to be dark brown */
	--rw-on-panel: #432D1A;   /* type on those panels */
	--rw-accent-ink: #8A5A2B;
	--rw-footer-brown: #2A1A0D; /* the tan, darkened enough to read on cream */
}

/* The header band is html showing through transparent containers, so this is
   what turns the top of every page cream - and the iOS overscroll with it. */
html { background-color: var(--rw-panel) !important; }

/* ---------- header ---------- */

/* The header's colour is not a background at all - Elementor paints it with an
   absolutely positioned ::before filling the container. Two of them, one per
   breakpoint, which is why changing html alone left the phone header dark. */
.elementor-element-bfcad42::before,
.elementor-element-3ca5577::before,
.elementor-106 .elementor-element.elementor-element-bfcad42::before,
.elementor-106 .elementor-element.elementor-element-3ca5577::before {
	background-color: var(--rw-panel) !important;
}

a.wl_hf-menu-item,
a.wl_hf-sub-menu-item {
	background-color: transparent !important;
	color: var(--rw-on-panel) !important;
}

a.wl_hf-menu-item:hover,
a.wl_hf-sub-menu-item:hover { color: var(--rw-accent-ink) !important; }

/* ---------- homepage bands ---------- */

.elementor-element-3f890d8,
.elementor-11 .elementor-element.elementor-element-3f890d8 {
	background-color: var(--rw-panel) !important;
}

.elementor-11 .elementor-element.elementor-element-511bd81 .elementor-heading-title,
.elementor-element-3f890d8 .elementor-heading-title {
	color: var(--rw-accent-ink) !important;
}

.rw-circles-band { background-color: var(--rw-panel); }

/* Labels sit on the photographs, not on the band, so they stay light. */

.rw-quotes { background-color: var(--rw-panel); }

.rw-quotes__title { color: var(--rw-accent-ink) !important; }

/* The cards keep the brown - the one place it is still carrying weight. */
.rw-quotes__track > .rw-quote {
	background-color: #2A1A0D;
	box-shadow: inset 0 0 0 1px rgba(202, 146, 92, 0.22);
}

/* ---------- page banners ---------- */

.rw-pagebanner { background-color: var(--rw-panel); }

.rw-pagebanner__title { color: var(--rw-on-panel) !important; }

/* Yoga and Retreats keep Elementor's own banner container rather than the one
   written into this sheet, so it needs naming separately. */
.elementor-element-457a177,
.elementor .elementor-element.elementor-element-457a177 {
	background-color: var(--rw-panel) !important;
}

.elementor-element-457a177 .elementor-heading-title,
.elementor-element-457a177 h2 {
	color: var(--rw-on-panel) !important;
}

/* Elementor gives this banner a fixed 184px min-height (empty space padded
   above and below a centred title) and the container under it a further
   60px top and bottom - dead air that a solid brown block used to hold
   visually, but which just reads as a gap now the page is cream on cream.
   Both properties and the --padding-top/--min-height custom properties are
   set here: the padding a container actually renders lives on its nested
   .e-con-inner as padding-block-start/end, which Elementor's own base rule
   derives from --padding-top on the .e-con itself and which then inherits
   down - a plain `padding-top` on the outer element never reaches it. */
/* The outer .e-con and its nested .e-con-inner both consume --padding-top/
   --padding-bottom independently (the inner one via Elementor's own
   --padding-block-start: var(--padding-top) mapping), so a value set here
   is applied twice over - halved below to land at the sizes named in the
   comment. */
.elementor-element-457a177 {
	--min-height: 0 !important;
	--padding-top: 20px !important;
	--padding-bottom: 7px !important;
	min-height: 0 !important;
	padding-top: 20px !important;
	padding-bottom: 7px !important;
}

/* Top padding is zero so this banner's own padding-bottom is the only thing
   between title and subtitle, matching how .rw-pagebanner does it. */
.elementor-element-c0cdaf2 {
	--padding-top: 0 !important;
	--padding-bottom: 24px !important;
	padding-top: 0 !important;
	padding-bottom: 24px !important;
}

@media (max-width: 767px) {
	.elementor-element-457a177 {
		--padding-top: 13px !important;
		--padding-bottom: 4px !important;
		padding-top: 13px !important;
		padding-bottom: 4px !important;
	}
	.elementor-element-c0cdaf2 {
		--padding-top: 0 !important;
		--padding-bottom: 16px !important;
		padding-top: 0 !important;
		padding-bottom: 16px !important;
	}
}

/* ---------- contact page ---------- */

.elementor-element-a829182,
.elementor-element-b759712 {
	background-color: var(--rw-panel) !important;
}

.elementor-element-a829182 h1,
.elementor-element-a829182 h2,
.elementor-element-a829182 h3,
.elementor-element-a829182 p,
.elementor-element-a829182 a,
.elementor-element-a829182 span {
	color: var(--rw-on-panel) !important;
}

.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-sublabel {
	color: rgba(67, 45, 26, 0.78) !important;
}

.rw-contact__done {
	background-color: #FFFFFF;
	box-shadow: inset 0 0 0 1px rgba(202, 146, 92, 0.3);
}

.rw-contact__done .rw-form__done-title,
.rw-contact__done .rw-form__done-body { color: var(--rw-on-panel); }

.rw-contact__done .rw-form__privacy { color: rgba(67, 45, 26, 0.62); }

/* ---------- footer strip ---------- */

.elementor-element-c89e253,
.elementor-11 .elementor-element.elementor-element-c89e253 {
	background-color: var(--rw-panel) !important;
	border-top: 1px solid rgba(67, 45, 26, 0.12);
}

.elementor-element-c89e253 a,
.elementor-element-c89e253 span,
.elementor-element-c89e253 p,
.elementor-element-c89e253 .elementor-heading-title,
.elementor-element-c89e253 i,
.elementor-element-c89e253 svg {
	color: var(--rw-on-panel) !important;
	fill: var(--rw-on-panel) !important;
}

/* ---------- mobile bar and drawer ---------- */

.elementor-element-33e391c,
.elementor-11 .elementor-element.elementor-element-33e391c {
	background-color: rgba(251, 244, 238, 0.96) !important;
	border-top: 1px solid rgba(67, 45, 26, 0.14);
	backdrop-filter: saturate(1.1) blur(8px);
}

.elementor-element-33e391c a,
.elementor-element-33e391c i,
.elementor-element-33e391c svg {
	color: var(--rw-on-panel) !important;
	fill: var(--rw-on-panel) !important;
}

.rw-nav-panel { background-color: var(--rw-panel); }

.rw-nav-backdrop { background-color: rgba(67, 45, 26, 0.32); }

.rw-nav-panel a,
.rw-nav-panel .rw-nav-panel__brand,
.rw-nav-close {
	color: var(--rw-on-panel) !important;
}

/* The Spa Treatments accordion is a <button>, not a link, so the rule above
   never reached it and it kept --rw-nav-fg (#F6EFE7) - the foreground from
   when this drawer was brown. Cream on cream: the row rendered blank. */
.rw-nav-panel .rw-nav-sub-toggle {
	color: var(--rw-on-panel) !important;
}

/* Its submenu links were set at 82% of that same cream. */
.rw-nav-panel .rw-nav-sub a {
	color: rgba(67, 45, 26, 0.78) !important;
}

/* The expanded panel was inset with 18% black to darken the brown drawer.
   Against cream that reads as grey, so it becomes a warm tan wash instead. */
.rw-nav-panel .rw-nav-sub {
	background: rgba(202, 146, 92, 0.10);
}

/* Both hover states washed white over the row, which showed as nothing once
   the drawer went cream. */
.rw-nav-panel .rw-nav-sub-toggle:hover,
.rw-nav-panel .rw-nav-sub-toggle:focus-visible,
.rw-nav-panel .rw-nav-sub a:hover,
.rw-nav-panel .rw-nav-sub a:focus-visible {
	background: rgba(67, 45, 26, 0.07);
	color: var(--rw-accent-ink, #8A5A2B) !important;
}

.rw-nav-close { background-color: rgba(67, 45, 26, 0.08) !important; }

/* The burger is an SVG stroked with currentColor, so it follows the button's
   colour rather than any background of its own. */
.wl_hf-nav-menu__toggle,
.wl_hf-nav-menu__toggle .wl_hf-nav-menu-icon,
.rw-burger-icon {
	color: var(--rw-on-panel) !important;
}

.rw-burger-icon { stroke: currentColor; }

/* Elementor gives the burger a solid #432D1A chip with padding and a radius.
   No backing at all now - just the three strokes on the cream. The padding is
   kept as the tap target, which stays 44px even though nothing is drawn
   around it. */
.wl_hf-nav-menu__toggle .wl_hf-nav-menu-icon {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* Thicker than the 2 the markup sets, and the brand's dark brown rather than
   whatever the toggle happens to inherit. Set on the SVG itself so it beats
   the presentation attribute. */
.wl_hf-nav-menu__toggle .rw-burger-icon {
	stroke: var(--rw-ink, #432D1A) !important;
	stroke-width: 2.6 !important;
	color: var(--rw-ink, #432D1A) !important;
}

/* The legacy /private-classes/ page is no longer in the menu but is still
   reachable from the blog and category archives, and it carries its own brown
   title band with white text. Brought across with the rest of the site. */
.elementor-element-57a6f5b {
	background-color: var(--rw-panel) !important;
}

.elementor-element-57a6f5b .elementor-heading-title {
	color: var(--rw-on-panel) !important;
}

/* The tan reads at 2.7:1 on a white card - fine as a large flourish, too weak
   for the small duration and price chips. Darkened for those only; the tan is
   untouched everywhere it sits on brown. */
.rw-class__meta,
.rw-class__len,
.rw-class__price,
.rw-pass__price {
	color: var(--rw-accent-ink) !important;
}


/* =====================================================================
 * Footer: a brown band over the cream strip
 *
 * The Contact / Stay updated band (9092221) takes the brown; the icon strip
 * below it (c89e253) keeps the page cream, so the footer reads as one dark
 * block sitting on the same cream the rest of the site uses. The brown is
 * the testimonial cards' #2A1A0D rather than the button ink, so the two dark
 * elements on the homepage are the same colour.
 *
 * Both containers are hidden on mobile - phones get the fixed bar (33e391c)
 * instead - so this is a desktop and tablet change only.
 * ===================================================================== */

.elementor-element-9092221 {
	background-color: var(--rw-footer-brown) !important;
}

/* Elementor colours each widget at (0,2,0) and the kit sets bare `h2` at
   (0,1,1), so every text role in the band has to be named explicitly. */
.elementor-element-9092221,
.elementor-element-9092221 p,
.elementor-element-9092221 a,
.elementor-element-9092221 h2,
.elementor-element-9092221 .elementor-heading-title,
.elementor-element-9092221 .elementor-icon-list-text {
	color: var(--rw-panel) !important;
}

/* The rule above catches the button too, since it is an anchor - put it back
   as cream-on-brown reversed out. */
.elementor-element-9092221 .elementor-button {
	background-color: var(--rw-panel) !important;
	color: var(--rw-footer-brown) !important;
}

.elementor-element-9092221 .elementor-button .elementor-button-text {
	color: inherit !important;
}

.elementor-element-9092221 .elementor-button:hover,
.elementor-element-9092221 .elementor-button:focus-visible {
	background-color: var(--rw-accent) !important;
	color: var(--rw-ink) !important;
}

.elementor-element-9092221 .elementor-divider-separator {
	border-top-color: rgba(251, 244, 238, 0.28) !important;
}

/* The Stay updated form, reversed out onto the brown. */
.elementor-element-9092221 .rw-footform__blurb {
	color: rgba(251, 244, 238, 0.72);
}

.elementor-element-9092221 .rw-footform__input {
	background-color: rgba(251, 244, 238, 0.09);
	border-color: rgba(251, 244, 238, 0.34);
	color: var(--rw-panel);
}

.elementor-element-9092221 .rw-footform__input::placeholder {
	color: rgba(251, 244, 238, 0.56);
}

.elementor-element-9092221 .rw-footform__input:focus {
	border-color: var(--rw-accent);
	box-shadow: 0 0 0 3px rgba(202, 146, 92, 0.30);
}

/* Chrome and Safari paint their own near-white fill on an autofilled input,
   which would punch a light box into the band. */
.elementor-element-9092221 .rw-footform__input:-webkit-autofill,
.elementor-element-9092221 .rw-footform__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--rw-panel);
	-webkit-box-shadow: 0 0 0 1000px #3A2413 inset;
	caret-color: var(--rw-panel);
}

.elementor-element-9092221 .rw-footform__input[aria-invalid="true"] {
	border-color: #E7A08C;
}

/* #A2442B is a mid brown-red - it disappears on this band. */
.elementor-element-9092221 .rw-footform__error {
	color: #E7A08C;
}

.elementor-element-9092221 .rw-footform__submit,
.elementor-element-9092221 .rw-footform__mailto {
	background-color: var(--rw-panel);
	color: var(--rw-footer-brown) !important;
}

.elementor-element-9092221 .rw-footform__submit:hover,
.elementor-element-9092221 .rw-footform__submit:focus-visible {
	background-color: var(--rw-accent);
	color: var(--rw-ink) !important;
}

.elementor-element-9092221 .rw-footform__done {
	color: var(--rw-panel);
}


/* =====================================================================
 * Class and treatment cards - Museo Sans
 *
 * The product name carries Museo Sans 500 and everything else on the card -
 * duration, price, description, when it runs - carries Museo Sans 300.
 *
 * Museo Sans numbers its weights on its own scale, not the CSS one, so those
 * are `font-weight: 400` and `font-weight: 300` here: 400 resolves to the
 * face named Museo Sans 500. Synthesis is off so a missing weight falls back
 * to a real face rather than a smeared one.
 * ===================================================================== */

.rw-class__name,
.rw-class__meta,
.rw-class__len,
.rw-class__price,
.rw-class__when,
.rw-class__desc,
.rw-class__book,
.rw-pass,
.rw-pass__name,
.rw-pass__price {
	font-family: var(--rw-body-font) !important;
	font-synthesis-weight: none;
}

/* The name is an h4, and the kit pins every heading to 400 at (0,1,1) - a
   lone class cannot reach it. */
.rw-class__name,
.rw-pass__name,
.rw-class__book {
	font-weight: 400 !important;   /* Museo Sans 500 */
}

.rw-class__meta,
.rw-class__len,
.rw-class__price,
.rw-class__when,
.rw-class__desc,
.rw-pass__price {
	font-weight: 300 !important;   /* Museo Sans 300 */
}


/* =====================================================================
 * Spa treatment categories
 *
 * The hub page sends visitors to massage, facials or the sauna rather than
 * running all fourteen treatments down one page. Same card language as the
 * treatments themselves so the two read as one system.
 * ===================================================================== */

.rw-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	max-width: 1140px;
	margin: 0 auto 8px;
	padding: 0;
	list-style: none;
}

.rw-cat { margin: 0; padding: 0; list-style: none; }
.rw-cat::marker { content: none; }

.rw-cat__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: 26px 20px;
	background-color: #FFFFFF;
	border-radius: 14px;
	text-align: center;
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.rw-cat__link:hover,
.rw-cat__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(67, 45, 26, 0.12);
}

.rw-cat__name {
	font-size: 1.06rem;
	color: var(--rw-ink, #432D1A);
}

.rw-cat__meta {
	font-size: 0.82rem;
	font-weight: 300;
	color: var(--rw-accent-ink, #8A5A2B);
}

/* Back out of a subpage to the hub. */
.rw-back {
	display: inline-block;
	margin-top: 6px;
	color: var(--rw-accent-ink, #8A5A2B) !important;
	font-size: 0.88rem;
	text-decoration: none;
}

.rw-back:hover { text-decoration: underline; }

@media (max-width: 778px) {
	.rw-cats { grid-template-columns: 1fr; gap: 12px; }
	.rw-cat__link { padding: 20px 18px; }
}


/* =====================================================================
 * Spa Treatments dropdown (desktop)
 *
 * The mobile drawer builds its own accordion from this same markup - see
 * rw-mobile-menu.js, which turns any nav item holding a <ul> into a toggle.
 * Because that toggle replaces the parent link, "All Spa Treatments" is the
 * first entry in the list: without it the hub would be unreachable on a
 * phone.
 *
 * Opened on hover and on focus-within, so a keyboard tab through the nav
 * reveals it exactly as a mouse does. The bridge on ::before covers the gap
 * between the menu item and the panel, which otherwise closed the moment the
 * pointer crossed it.
 * ===================================================================== */

.wl_hf-nav-menu > li { position: relative; }

.rw-subnav {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	z-index: 60;
	min-width: 208px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--rw-panel, #FBF4EE);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(67, 45, 26, 0.16);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}

.rw-subnav::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

.wl_hf-nav-menu > li:hover > .rw-subnav,
.wl_hf-nav-menu > li:focus-within > .rw-subnav {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.rw-subnav__item { margin: 0; padding: 0; list-style: none; }
.rw-subnav__item::marker { content: none; }

.rw-subnav__link {
	display: block;
	padding: 9px 14px;
	border-radius: 8px;
	color: var(--rw-ink, #432D1A) !important;
	font-size: 0.82rem;
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

.rw-subnav__link:hover,
.rw-subnav__link:focus-visible {
	background-color: rgba(202, 146, 92, 0.16);
	color: var(--rw-accent-ink, #8A5A2B) !important;
}

/* The drawer builds its own markup, so this copy would otherwise show up
   inside it as a second, unstyled list. */
@media (max-width: 1024px) {
	.rw-subnav { display: none; }
}

/* =====================================================================
 * Acuity booking embed
 *
 * Acuity's own embed.js resizes the frame to its content, so the height
 * attribute is only the pre-load reservation - without it the page jumps
 * once the scheduler renders.
 * ===================================================================== */

.rw-booking {
	max-width: 1140px;
	margin: 0 auto 12px;
}

.rw-booking__frame {
	display: block;
	width: 100%;
	min-height: 760px;
	border: 0;
	border-radius: 14px;
	background-color: #FFFFFF;
}

@media (max-width: 778px) {
	.rw-booking__frame { min-height: 900px; border-radius: 10px; }
}