/*
 * Camden's House — main stylesheet.
 * The .ch- prefix applies without exception. Tokens come from theme.json; we do not declare them here.
 * Section order matters: base → layout → components → pages.
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; }

:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.ch-skip {
	position: absolute;
	left: -9999px;
}
.ch-skip:focus {
	left: var(--wp--preset--spacing--20);
	top: var(--wp--preset--spacing--20);
	z-index: 100;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--white);
}

/* ---------- layout ---------- */
.ch-main { padding-block: var(--wp--preset--spacing--50); }
.ch-main:has(> .ch-band:first-child) { padding-block: 0; }

/* Content width on the front end. In a classic theme, `layout` in theme.json only drives the
   editor canvas, so the container reads the same value from the variable. */
.ch-container {
	width: 100%;
	/* Content is wideSize wide (1280 px) and the padding sits outside it: at 1440 px this gives the
	   80 px margins from the design. */
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--20));
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

/* Background bands. On dark ones, text and links turn white. */
.ch-band { padding-block: var(--wp--preset--spacing--50); }
.ch-band--navy       { background: var(--wp--preset--color--navy);       color: var(--wp--preset--color--white); }
.ch-band--sage       { background: var(--wp--preset--color--sage);       color: var(--wp--preset--color--white); }
.ch-band--sand       { background: var(--wp--preset--color--sand); }
.ch-band--off-white  { background: var(--wp--preset--color--off-white); }
.ch-band--white      { background: var(--wp--preset--color--white); }
.ch-band--sage-light { background: var(--wp--preset--color--sage-light); color: var(--wp--preset--color--navy); }
.ch-band--navy a:not(.ch-btn),
.ch-band--sage a:not(.ch-btn) { color: inherit; }
.ch-band--navy :focus-visible,
.ch-band--sage :focus-visible { outline-color: var(--wp--preset--color--white); }

@media (min-width: 768px) {
	.ch-container {
		max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--40));
		padding-inline: var(--wp--preset--spacing--40);
	}
	.ch-band { padding-block: var(--wp--preset--spacing--60); }
}

/* ---------- components ---------- */
.ch-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
}

.ch-lead { font-size: var(--wp--preset--font-size--body); font-weight: 500; }
.ch-text-small { font-size: var(--wp--preset--font-size--sm); }

.ch-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.ch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--button--min-height);
	padding: var(--wp--custom--button--padding-block) var(--wp--custom--button--padding-inline);
	border: 1px solid transparent;
	border-radius: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
/* Solid navy: the main action on a light background. */
.ch-btn--primary {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
/* On hover it turns sage: navy-soft differed from navy by only a few shades and hardly showed. */
.ch-btn--primary:hover { background: var(--wp--preset--color--sage); }
/* Solid light: the main action on a dark background (Book your visit, Buy a gift card). */
.ch-btn--light {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}
.ch-btn--light:hover { background: var(--wp--preset--color--mist); }
/* Outline on a dark background. */
.ch-btn--outline-light {
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}
.ch-btn--outline-light:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}
/* Outline on a light background. */
.ch-btn--outline-dark {
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}
.ch-btn--outline-dark:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
/* Accent on a dark background: submitting the footer form (Send enquiry). */
.ch-btn--accent {
	background: var(--wp--preset--color--sage-light);
	color: var(--wp--preset--color--navy);
}
.ch-btn--accent:hover { background: var(--wp--preset--color--white); }

.ch-card {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
}
.ch-card > :first-child { margin-top: 0; }
.ch-card > :last-child { margin-bottom: 0; }

/* Form fields on a dark background: just a line under the field, as in the design's footer. */
.ch-fields {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}
.ch-field { margin: 0; }
.ch-field__label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
}
.ch-field__input {
	width: 100%;
	padding: var(--wp--preset--spacing--10) 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--ink-muted);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
}
.ch-field--checkbox {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	align-items: flex-start;
}
.ch-field--checkbox .ch-field__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: normal;
	text-transform: none;
}
.ch-field__checkbox {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
	accent-color: var(--wp--preset--color--sage-light);
}

@media (min-width: 768px) {
	.ch-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ch-field--wide { grid-column: 1 / -1; }
}

.ch-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- frame: top bar and header ---------- */
.ch-topbar {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
.ch-topbar__text {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: var(--wp--custom--letter-spacing--body);
	text-align: center;
	text-transform: uppercase;
}

.ch-header {
	position: relative;
	z-index: 10;
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--mist);
}
.ch-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--20);
}
.ch-header__brand { margin-right: auto; }
.ch-header__logo {
	display: block;
	width: auto;
	height: 2rem;
}
.ch-header__cta { order: 2; }

.ch-nav-toggle {
	order: 1;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--navy);
	background: none;
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	cursor: pointer;
}

/* On phones the menu takes the whole row under the logo and opens with the button. */
.ch-nav {
	order: 3;
	flex-basis: 100%;
}
.ch-js .ch-nav { display: none; }
.ch-js .ch-nav-toggle[aria-expanded="true"] ~ .ch-nav { display: block; }

.ch-nav__list,
.ch-nav .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ch-nav__list > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-top: 1px solid var(--wp--preset--color--mist);
}
.ch-nav__list > li > a {
	flex: 1;
	padding-block: var(--wp--preset--spacing--20);
}
.ch-nav a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.ch-nav a:hover { color: var(--wp--preset--color--navy); text-decoration: underline; }
.ch-nav__list > li > a {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--nav);
	text-transform: uppercase;
}

.ch-nav__toggle {
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}
.ch-nav__toggle::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.15s ease;
}
.ch-nav__toggle[aria-expanded="true"]::before { transform: translateY(25%) rotate(225deg); }

.ch-nav__list > li > .sub-menu {
	flex-basis: 100%;
	padding-bottom: var(--wp--preset--spacing--20);
}
.ch-js .ch-nav__list > li > .sub-menu { display: none; }
.ch-js .ch-nav__toggle[aria-expanded="true"] + .sub-menu { display: block; }
.ch-nav .sub-menu a {
	display: block;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
}
.ch-nav__panel-title { display: none; }
.ch-nav__heading {
	display: block;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20) 0;
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
}

/* Home page: the header leaves the flow and stays under the top bar, so it sits on the hero photo
   without measuring heights. On phones the open menu gets navy behind the white text. */
.ch-header--on-hero {
	position: absolute;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: 0;
	color: var(--wp--preset--color--white);
}
.ch-header--on-hero :focus-visible { outline-color: var(--wp--preset--color--white); }
.ch-header--on-hero .ch-nav-toggle,
.ch-header--on-hero .ch-nav__toggle,
.ch-header--on-hero .ch-nav a { color: var(--wp--preset--color--white); }
.ch-header--on-hero .ch-nav-toggle { border-color: var(--wp--preset--color--white); }
.ch-header--on-hero .ch-nav {
	margin-inline: calc(-1 * var(--wp--preset--spacing--20));
	padding-inline: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--navy);
}
.ch-header--on-hero .ch-nav__list > li { border-top-color: color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent); }
.ch-header--on-hero .ch-nav__heading { color: var(--wp--preset--color--sage-light); }

/* Horizontal menu from 1280 px: the logo, five items and Book Now take about 1200 px in one line
   (measured 25 Sep). Narrower windows get the menu behind the button, because at 1100 px the items
   wrapped onto two lines. Up to 1440 px the logo is shorter and leaves room for the Windows scrollbar. */
@media (min-width: 1280px) {
	.ch-header__inner { flex-wrap: nowrap; }
	.ch-header__brand { flex: none; }
	.ch-header__logo { height: 2.25rem; }
	.ch-header__cta { white-space: nowrap; }
	.ch-nav__list > li > a { white-space: nowrap; }
	.ch-header--on-hero .ch-header__inner { padding-block: var(--wp--preset--spacing--40); }
	.ch-header--on-hero .ch-nav {
		margin-inline: 0;
		padding-inline: 0;
		background: transparent;
	}
	.ch-header--on-hero .ch-nav .sub-menu a { color: var(--wp--preset--color--ink); }
	.ch-header--on-hero .ch-nav .ch-nav__heading { color: var(--wp--preset--color--sage); }
	.ch-header--on-hero .ch-nav__list > li > a:hover { color: var(--wp--preset--color--white); }
	.ch-nav-toggle,
	.ch-nav__footer,
	.ch-header__logo--in-menu { display: none; }
	.ch-js .ch-nav,
	.ch-nav {
		display: block;
		order: 0;
		flex-basis: auto;
	}
	.ch-header__cta { order: 0; }

	.ch-nav__list { display: flex; gap: var(--wp--preset--spacing--20); }
	.ch-nav__list > li {
		position: relative;
		flex-wrap: nowrap;
		border-top: 0;
	}
	.ch-nav__list > li > a { padding-block: var(--wp--preset--spacing--10); }
	.ch-nav__toggle { width: 28px; }

	/* Submenu as a panel under its item. Smart Beauty lays out its Menu headings in columns. */
	.ch-nav__list > li > .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 16rem;
		padding: var(--wp--preset--spacing--20) 0;
		background: var(--wp--preset--color--white);
		box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
	}
	.ch-nav__list > li > .sub-menu:has(> .ch-menu-heading) {
		display: grid;
		grid-template-columns: repeat(3, minmax(11rem, 1fr));
	}
	.ch-js .ch-nav__list > li > .sub-menu:has(> .ch-menu-heading) { display: none; }
	.ch-js .ch-nav__toggle[aria-expanded="true"] + .sub-menu:has(> .ch-menu-heading) { display: grid; }

	/* Section panel (corrections of 28 Sep): light grey across the full menu width, the Section name in
	   sage, items in three columns. Modern Health fills columns of three Treatments; the other Section
	   sets its Menu headings side by side with vertical dividers. */
	.ch-nav__list { position: relative; }
	.ch-nav__list > li.menu-item-type-taxonomy { position: static; }
	.ch-nav__list > li.menu-item-type-taxonomy > .sub-menu {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto repeat(3, auto);
		grid-auto-flow: column;
		column-gap: var(--wp--preset--spacing--30);
		top: calc(100% + var(--wp--preset--spacing--10));
		min-width: 47rem;
		padding: var(--wp--preset--spacing--20) 2.25rem var(--wp--preset--spacing--30);
		background: color-mix(in srgb, var(--wp--preset--color--white) 84%, var(--wp--preset--color--ink));
		box-shadow: none;
		font-size: var(--wp--preset--font-size--sm);
	}
	.ch-nav__list > li.menu-item-type-taxonomy > .sub-menu:has(> .ch-menu-heading) {
		grid-template-rows: none;
		grid-auto-flow: row;
	}
	.ch-js .ch-nav__list > li.menu-item-type-taxonomy > .sub-menu { display: none; }
	.ch-js .ch-nav__list > li.menu-item-type-taxonomy > .ch-nav__toggle[aria-expanded="true"] + .sub-menu { display: grid; }
	.ch-nav__list > li.menu-item-type-taxonomy > .sub-menu a { padding: 0.125rem 0; }
	.ch-nav__panel-title {
		display: block;
		grid-column: 1 / -1;
		grid-row: 1;
		margin-bottom: var(--wp--preset--spacing--20);
	}
	.ch-nav .ch-nav__panel-title a,
	.ch-header--on-hero .ch-nav .ch-nav__panel-title a {
		color: var(--wp--preset--color--sage);
		font-size: var(--wp--preset--font-size--heading-xs);
		font-weight: 500;
	}
	.ch-nav__list > li.menu-item-type-taxonomy .ch-menu-heading + .ch-menu-heading {
		padding-left: var(--wp--preset--spacing--30);
		border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent);
	}
	/* The design gives the labels sage (3.71:1 on the grey panel, too little for 11 px), so they use a
	   darker sage at 6.08:1. The Section name (24 px) is large text and sage is enough. */
	.ch-nav__list > li.menu-item-type-taxonomy .ch-nav__heading,
	.ch-header--on-hero .ch-nav__list > li.menu-item-type-taxonomy .ch-nav__heading {
		padding: 0 0 var(--wp--preset--spacing--10);
		color: color-mix(in srgb, var(--wp--preset--color--sage) 70%, var(--wp--preset--color--ink));
		font-size: var(--wp--preset--font-size--xs);
	}
	/* The open menu item is underlined, as in the design. */
	.ch-nav__list > li > a:has(+ .ch-nav__toggle[aria-expanded="true"]) {
		text-decoration: underline;
		text-underline-offset: 0.5em;
	}
}
@media (min-width: 1440px) {
	.ch-header__logo { height: 2.75rem; }
}

/* ---------- frame: footer ---------- */
.ch-footer {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--off-white);
}
/* Target of /#contact (the old Contact page redirects here). */
.ch-footer { scroll-margin-top: var(--wp--preset--spacing--40); }
.ch-footer a { color: inherit; }
.ch-footer :focus-visible { outline-color: var(--wp--preset--color--white); }

.ch-footer__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}
.ch-footer__brand { display: inline-block; }
.ch-footer__logo {
	display: block;
	width: min(100%, 37.5rem);
	height: auto;
}
.ch-footer__intro-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}
/* The corrections of 28 Sep set the intro in full white (previously 34% opacity, 2.65:1 on navy). */
.ch-footer__intro {
	flex: 1 1 16rem;
	max-width: 22rem;
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
}
.ch-footer__social {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ch-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid var(--wp--preset--color--off-white);
}
.ch-footer__social svg { width: 100%; height: 100%; }
.ch-footer__social a:hover {
	background: var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--navy);
}

.ch-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.9;
}
.ch-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-transform: uppercase;
}
.ch-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ch-footer__list a,
.ch-footer__address a { text-decoration: none; }
.ch-footer__list a:hover,
.ch-footer__address a:hover { text-decoration: underline; }
.ch-footer__address { font-style: normal; }
.ch-footer__address p { margin: 0 0 var(--wp--preset--spacing--10); }
.ch-footer__address p:first-child { line-height: 1.35; }
.ch-hours { border-collapse: collapse; }
.ch-hours th {
	padding: 0 var(--wp--preset--spacing--30) 0 0;
	font-weight: inherit;
	text-align: left;
	white-space: nowrap;
}
.ch-hours td {
	padding: 0;
	text-align: right;
	white-space: nowrap;
}

.ch-footer__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--heading-sm);
}
.ch-footer__newsletter-text { font-size: var(--wp--preset--font-size--lg); }

.ch-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}
.ch-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
}
.ch-footer__credit {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
}
.ch-footer__credit a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.ch-footer__credit a:hover,
.ch-footer__credit a:focus-visible { color: var(--wp--preset--color--white); }
/* Reopens the cookie settings (inc/consent.php): a button that reads as the legal line's link. */
.ch-footer__cookies.twc-open {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink-muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--xs);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
.ch-footer__cookies.twc-open:hover,
.ch-footer__cookies.twc-open:focus-visible { color: var(--wp--preset--color--white); }
.ch-footer__legal {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
}

@media (min-width: 768px) {
	.ch-footer__columns {
		grid-template-columns: repeat(3, auto);
		justify-content: space-between;
	}
}

@media (min-width: 1024px) {
	.ch-footer { padding-top: var(--wp--preset--spacing--60); }
	.ch-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}
	.ch-footer__info {
		padding-right: var(--wp--preset--spacing--50);
		border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--off-white) 30%, transparent);
	}
	.ch-footer__newsletter { padding-left: var(--wp--preset--spacing--50); }
}

/* Until 1280 px the half-width footer has no room for three columns: Information's seven links
   (two documents since 14 Oct) broke onto two lines each, so it moves under Contact us. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.ch-footer__columns { grid-template-columns: repeat(2, auto); }
}

/* Footer forms (Fluent Forms). The plugin's default styling is off and field classes come from the
   theme (ch-field, ch-field__input); overrides are scoped to .ch-enquiry .fluentform because the
   plugin's structural stylesheet loads after the theme's. */
.ch-enquiry fieldset {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30) !important;
}
.ch-enquiry .fluentform .ff-el-group { margin: 0; }
.ch-enquiry .fluentform .ff-el-input--label { margin-bottom: var(--wp--preset--spacing--10); }
.ch-enquiry .fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}
.ch-enquiry .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: inherit; }
/* Framed fields, as in the OPEN version. The plugin's grey placeholder (#868e96) has 3.5:1 on navy. */
.ch-enquiry .ch-field__input {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--off-white) 30%, transparent);
	resize: vertical;
}
.ch-enquiry .fluentform .ff-el-form-control::placeholder { color: var(--wp--preset--color--ink-muted); }
.ch-enquiry .fluentform .ff-el-tc label.ff_tc_label {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}
.ch-enquiry .fluentform .ff-el-tc label.ff_tc_label > span { padding-top: 0.15rem !important; }
.ch-enquiry .ff_gdpr_field {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--wp--preset--color--sage-light);
}
/* The plugin's red error colour lacks contrast on navy, so the message is white. */
.ch-enquiry .fluentform .text-danger,
.ch-enquiry .fluentform .ff-el-is-error .ff-el-form-check-label {
	color: var(--wp--preset--color--white);
	font-weight: 600;
}
.ch-enquiry .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--white); }
.ch-enquiry .ff-message-success {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--sage-light);
	box-shadow: none;
}

@media (min-width: 768px) {
	.ch-enquiry fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ch-enquiry .ch-field--wide,
	.ch-enquiry .ff_submit_btn_wrapper { grid-column: 1 / -1; }
}

/* ---------- pages ---------- */

/* Home page per the OPEN version (25 Sep). Dimensions from the IDML, tokens from theme.json. */
.ch-actions--center { justify-content: center; }
.ch-section-title {
	margin: 0;
	text-align: center;
}
.ch-band--sand .ch-eyebrow,
.ch-band--off-white .ch-eyebrow,
.ch-band--white .ch-eyebrow { color: var(--wp--preset--color--sage); }

/* Underlined link in capitals: "Read more", "See the price list". */
.ch-link-more {
	display: inline-block;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid currentColor;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
}
.ch-link-more {
	transition: color 0.25s ease, border-color 0.25s ease;
}
.ch-link-more:hover {
	border-bottom-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--navy);
}

/* Hero: a full-width photo under the header, darkened at the top behind the navigation
   (black in Multiply mode in the design) and on the left behind the text. */
.ch-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(36rem, 57vw, 51.5rem);
	padding-block: 11rem var(--wp--preset--spacing--50);
	overflow: hidden;
}
.ch-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ch-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent), transparent 45%),
		linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent), transparent 65%);
}
.ch-hero__title {
	max-width: 38rem;
	margin-block: 0 var(--wp--preset--spacing--30);
}
.ch-hero__lead {
	max-width: 34rem;
	margin: 0;
}
.ch-hero .ch-actions { margin-top: var(--wp--preset--spacing--40); }

/* Features band under the hero. */
.ch-features { padding-block: var(--wp--preset--spacing--30); }
.ch-features__list {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-align: center;
	text-transform: uppercase;
}

.ch-about__inner { text-align: center; }
.ch-about__title {
	margin-block: 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--heading-lg);
	line-height: var(--wp--custom--line-height--heading-sm);
}
.ch-about__inner > p:not(.ch-eyebrow),
.ch-philosophy__inner > p:not(.ch-eyebrow) {
	max-width: 63rem;
	margin-inline: auto;
}
.ch-about .ch-actions { margin-top: var(--wp--preset--spacing--40); }

/* Stats band from v2: not in the OPEN version's list of bands; the template stays pending the client's decision. */
.ch-stats__list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ch-stats__item {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* Section cards: photo and an off-white panel, every other card mirrored. */
.ch-section-cards__title { margin-bottom: var(--wp--preset--spacing--50); }
.ch-section-card {
	display: grid;
	background: var(--wp--preset--color--off-white);
}
.ch-section-card + .ch-section-card { margin-top: var(--wp--preset--spacing--50); }
/* A warm tone in the frame while the photo loads, instead of a white gap. */
.ch-section-card__media { background: var(--wp--preset--color--sand); }
.ch-section-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ch-section-card__body { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); }
.ch-section-card__title {
	margin-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--heading-lg);
	line-height: var(--wp--custom--line-height--heading-sm);
}
.ch-section-card .ch-btn { margin-top: var(--wp--preset--spacing--20); }

/* Journal: heading on the left, button on the right, cards with a topic and a link. The button
   comes after the list in the HTML and the grid moves it to the first row. */
.ch-journal__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--wp--preset--spacing--20);
}
.ch-journal__title {
	grid-area: 1 / 1;
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-xl);
}
.ch-journal__more { grid-area: 1 / 2; }
.ch-journal__list {
	display: grid;
	grid-column: 1 / -1;
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}
.ch-journal__item {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 4px color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
}
.ch-journal__image {
	display: block;
	width: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
}
.ch-journal__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30);
}
.ch-journal__topic {
	margin: 0;
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 300;
	text-transform: uppercase;
}
.ch-journal__item-title {
	margin-block: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--heading-sm);
}
.ch-journal__excerpt {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.67;
}
.ch-journal__body .ch-link-more {
	align-self: flex-start;
	margin-top: auto;
}

/* Prices and memberships (corrections of 28 Sep): the background fades from sand to white, white
   cards with a sage bar, the price between two rules and a comparison of terms. */
.ch-prices { background: linear-gradient(var(--wp--preset--color--sand), var(--wp--preset--color--white) 55%); }
.ch-prices__head { text-align: center; }
/* Comparison rows need about 315 px in a card, so three cards fit side by side from 1280 px.
   Narrower windows stack the cards. */
.ch-prices__list {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: 36rem;
	margin: var(--wp--preset--spacing--50) auto 0;
	padding: 0;
	list-style: none;
}
/* Subgrid aligns the title, description, price, terms and link across cards, as in the design. */
.ch-price-card {
	display: grid;
	grid-row: span 5;
	grid-template-rows: subgrid;
	row-gap: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 75%, transparent);
	border-top: 12px solid var(--wp--preset--color--sage);
	background: var(--wp--preset--color--white);
}
.ch-price-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--heading-sm);
}
.ch-price-card__text {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.65;
}
.ch-price-card__offer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-block: var(--wp--preset--spacing--20);
	border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 35%, transparent);
}
.ch-price-card__price {
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: 700;
	line-height: 1.3;
}
/* The membership fee's credit note (the client's comments of 11 Oct), smaller under "per month". */
.ch-price-card__credit {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}
.ch-price-card__terms {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--lg);
}
.ch-price-card__term {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--10);
}
.ch-price-card__term + .ch-price-card__term { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 35%, transparent); }
.ch-price-card__term dt { color: var(--wp--preset--color--sage); }
.ch-price-card__term dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}
.ch-price-card .ch-link-more {
	justify-self: start;
	align-self: end;
	margin-top: var(--wp--preset--spacing--50);
}

/* Journey: sage with text and a photo bleeding to the window edge. */
.ch-journey {
	display: grid;
	padding-block: 0;
}
.ch-journey__text { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20); }
.ch-journey__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 32rem;
	object-fit: cover;
}
.ch-journey__title {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--heading-xl);
}
/* Journey accordion: rules in 12% white, plus and minus on the right as in the design. */
.ch-accordion {
	max-width: 34.25rem;
	margin-top: var(--wp--preset--spacing--40);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
}
.ch-accordion__item { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent); }
.ch-accordion__summary {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding-block: 0.25rem;
	cursor: pointer;
	list-style: none;
}
.ch-accordion__summary::-webkit-details-marker { display: none; }
/* The plus is two thin bars; when the item opens, the upright one draws in and leaves the minus
   (assets/js/accordion.js eases the panel itself). */
.ch-accordion__summary::after {
	content: "";
	flex: none;
	align-self: center;
	width: 0.75rem;
	height: 0.75rem;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
	transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ch-accordion__item[open]:not(.ch-accordion__item--closing) > .ch-accordion__summary::after { background-size: 100% 1.5px, 1.5px 0; }
.ch-accordion__body {
	padding-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.8;
}
.ch-accordion__body p { margin: 0; }
.ch-accordion__body p + p { margin-top: var(--wp--preset--spacing--20); }
.ch-accordion__body .ch-link-more {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--10);
}
/* An item can end in more than one link (All Treatments: both Sections), side by side. */
.ch-accordion__body .ch-accordion__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--10);
}

/* Gift cards (corrections of 28 Sep): a short navy band, the designer's icon in 10% white, a
   title with a subtitle and an outline button. */
.ch-gift { padding-block: var(--wp--preset--spacing--50); }
.ch-gift__inner {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--30);
}
.ch-gift__icon {
	width: 4.5rem;
	height: auto;
	color: var(--wp--preset--color--white);
	opacity: 0.1;
}
.ch-gift__title { margin: 0; }
.ch-gift__text { margin: var(--wp--preset--spacing--20) 0 0; }

.ch-philosophy__inner { text-align: center; }
.ch-philosophy__inner h2 { margin-block: 0 var(--wp--preset--spacing--40); }

/* Testimonials carousel: native scrolling with snap, no library. The script adds the buttons, so
   without JS they stay hidden and the testimonials scroll by touch and keyboard. */
.ch-testimonials { overflow-x: clip; }
.ch-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}
.ch-carousel__head .ch-carousel__title { flex: 1; }
.ch-carousel__title { margin: 0; text-align: center; }
/* Arrows as in the design: a 35 px sage square (4.53:1 on sand; WCAG 1.4.11 requires 3:1).
   The 36 px touch target meets WCAG 2.5.8 (24 px). */
.ch-carousel__button {
	display: none;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--sage);
	background: none;
	color: var(--wp--preset--color--sage);
	cursor: pointer;
}
.ch-js .ch-carousel__button { display: inline-flex; align-items: center; justify-content: center; }
.ch-carousel__button svg { width: 100%; height: 100%; }
.ch-carousel__button:disabled { opacity: 0.35; cursor: default; }

.ch-carousel__track {
	/* Containing block for the visually hidden labels with position: absolute. Without it they are
	   positioned against the document, the track's scrolling does not clip them and the page grows
	   sideways (1107 px at 390). */
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(32rem, 85%);
	gap: var(--wp--preset--spacing--40);
	/* The track spans the full window width with the first card on the container line, so cards run
	   past the edge as in the design. The inset is computed from the window width because a percentage
	   in scroll-padding refers to the track itself. The band's `overflow-x: clip` trims the 100vw
	   overshoot (scrollbar). */
	--ch-carousel-inset: max(var(--wp--preset--spacing--20), (100vw - var(--wp--style--global--wide-size)) / 2);
	margin: var(--wp--preset--spacing--40) calc(50% - 50vw) 0;
	padding: 0 var(--ch-carousel-inset) var(--wp--preset--spacing--10);
	scroll-padding-inline: var(--ch-carousel-inset);
	/* The buttons and dots replace the scrollbar, which the design does not have. */
	scrollbar-width: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	list-style: none;
}
.ch-carousel__track::-webkit-scrollbar { display: none; }
.ch-carousel__slide { scroll-snap-align: start; }

.ch-testimonial {
	height: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}
.ch-testimonial__rating {
	margin: 0 0 var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--sage);
	letter-spacing: var(--wp--custom--letter-spacing--rating);
}
.ch-testimonial__quote {
	margin: 0;
	/* Manrope has no italic, so the design sets the quote in the Light weight instead of slanting it. */
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	line-height: 1.67;
}
.ch-testimonial__quote p { margin: 0; }
.ch-testimonial__quote p::before { content: "“"; }
.ch-testimonial__quote p::after { content: "”"; }
/* The design has the author in light grey #b1b6af (2.06:1 on white), so it uses sage (5.39:1). */
.ch-testimonial__author {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.ch-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-top: var(--wp--preset--spacing--20);
}
.ch-carousel__dot {
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	cursor: pointer;
}
.ch-carousel__dot::before {
	content: "";
	display: block;
	width: 0.625rem;
	height: 0.625rem;
	margin: auto;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent);
}
.ch-carousel__dot[aria-current="true"]::before { background: var(--wp--preset--color--sage); }


/* Partners band: logos on a white band drift past the window edges as in the design. The list is
   in the HTML twice (the second copy hidden from screen readers), so shifting by half closes the loop.
   Motion stops on mouse hover, and with prefers-reduced-motion the band stands still and scrolls.
   There is no pause button (decision of 25 Sep), so WCAG 2.2.2 is not met for keyboard and touch. */
.ch-partners {
	padding-block: var(--wp--preset--spacing--50);
	overflow-x: clip;
}
.ch-partners__viewport { overflow: hidden; }
.ch-partners__track {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: ch-marquee 45s linear infinite;
}
.ch-partners__viewport:hover .ch-partners__track { animation-play-state: paused; }
.ch-partners__item {
	display: flex;
	flex: none;
	align-items: center;
	height: 7.5rem;
	margin-right: calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--20));
}
/* --ch-logo-scale is the square root of the logo's aspect ratio (band template). Logo box: 8rem × 8rem from 1024 px. */
.ch-partners__logo {
	display: block;
	width: calc(var(--ch-logo-scale, 2) * 6rem);
	max-width: none;
	height: auto;
}
@keyframes ch-marquee {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ch-partners__viewport { overflow-x: auto; }
	.ch-partners__track { animation: none; }
	.ch-partners__item[aria-hidden="true"] { display: none; }
}

@media (min-width: 768px) {
	.ch-carousel__track { --ch-carousel-inset: max(var(--wp--preset--spacing--40), (100vw - var(--wp--style--global--wide-size)) / 2); }
	/* As many equal columns as there are promises: two since 9 Oct ("Free consultation" went, as
	   consultations are paid), three again if the client's new copy brings a third. */
	.ch-features__list {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
	.ch-features__item + .ch-features__item { border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent); }
	.ch-journal__list,
	.ch-stats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.ch-hero { padding-bottom: var(--wp--preset--spacing--60); }
	.ch-journey--with-image { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Text starts on the container line, as in the design (80 px at 1440). */
	.ch-journey__text {
		align-self: center;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) max(var(--wp--preset--spacing--40), (100vw - var(--wp--style--global--wide-size)) / 2);
	}
	/* The photo is as tall as the band at its tallest (assets/js/accordion.js), so opening an item
	   uncovers more of it while it stays still. Filling the band's current height rescaled the
	   cropped photo with every item opened or closed. */
	.ch-journey__media {
		position: relative;
		overflow: hidden;
	}
	.ch-journey__media img {
		position: absolute;
		inset: 0 0 auto;
		height: var(--ch-journey-photo-height, 100%);
		max-height: none;
	}

	.ch-section-card--with-image {
		grid-template-columns: 51fr 49fr;
		min-height: 32rem;
	}
	.ch-section-card:nth-of-type(even) .ch-section-card__media { order: 2; }
	/* In the design the card title (518 px at 47.4 px) just fits on one line, so the right padding is narrower. */
	.ch-section-card__body {
		align-self: center;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	}
	.ch-gift__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--wp--preset--spacing--50);
	}
	.ch-gift__icon { width: 7rem; }
	.ch-partners__logo { width: calc(var(--ch-logo-scale, 2) * 8rem); }
}

/* Style guide: palette swatches. */
.ch-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ch-swatch { display: grid; gap: 0.25rem; }
.ch-swatch__chip {
	display: block;
	height: 4rem;
	border: 1px solid var(--wp--preset--color--mist);
}
.ch-swatch__name { font-weight: 600; }
.ch-swatch__hex { font-size: var(--wp--preset--font-size--sm); }

@media (min-width: 1280px) {
	.ch-prices__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: none;
	}
}
@media (min-width: 1440px) {
	.ch-price-card { padding-inline: var(--wp--preset--spacing--40); }
}

/* Home page band spacing on desktop per the IDML "Home Page FINAL" (28 Sep), measured at 1440 px
   against the text positions in the design. Mobile awaits the design of 29 Sep. */
@media (min-width: 1024px) {
	.ch-about { padding-block: 9rem 3.5rem; }
	.ch-about__title { margin-bottom: 3rem; }
	.ch-about .ch-actions { margin-top: 4.75rem; }
	.ch-section-cards { padding-bottom: 2.5rem; }
	.ch-price-card { padding-top: 1.75rem; }
	/* Below the price cards the design has 179 px of white before the testimonials' sand. */
	.ch-prices { padding-bottom: 11rem; }
	.ch-testimonials { padding-block: 4.75rem 4.5rem; }
	/* Card text indented 38 px as in the design; at 40 px the second testimonial wrapped onto four lines. */
	.ch-testimonial { padding: 1.75rem 2.375rem; }
	/* The journey intro fits in three lines, as in the design. */
	.ch-journey__text { padding-top: 5rem; padding-right: var(--wp--preset--spacing--40); }
	.ch-journal { padding-bottom: 5rem; }
	.ch-journal__list { margin-top: 3rem; }
	.ch-accordion { margin-top: var(--wp--preset--spacing--20); }
	.ch-footer { padding-block: 7.5rem var(--wp--preset--spacing--60); }
	.ch-footer__columns { line-height: 1.85; }
	.ch-footer__bottom { margin-top: var(--wp--preset--spacing--40); }
}

/* Phones per the IDML "HOME PAGE_MOBILE" (29 Sep): text on the theme's scale (design × ~1.45, agreed
   with the designer), alignment from the file's paragraph settings. Only below 768 px, because the
   design does not cover tablets. */
@media (max-width: 767px) {
	/* Hero centred; darkened across the whole frame as in the design (41% black, Multiply), because
	   the centred text also sits on the light part of the photo. */
	.ch-hero__content { text-align: center; }
	.ch-hero__title,
	.ch-hero__lead { margin-inline: auto; }
	.ch-hero .ch-actions {
		flex-direction: column;
		align-items: center;
	}
	.ch-hero .ch-actions .ch-btn { width: min(100%, 16rem); }
	.ch-hero::before { background: color-mix(in srgb, var(--wp--preset--color--ink) 41%, transparent); }

	/* Testimonials scroll by touch only, without arrows or dots (the designer, 29 Sep). */
	.ch-js .ch-carousel__button,
	.ch-carousel__dots { display: none; }

	/* Journey: the house photo above the text, in the design's proportions (360 × 235). */
	.ch-journey__media { order: -1; }
	.ch-journey__media img {
		height: auto;
		aspect-ratio: 360 / 235;
	}

	.ch-gift__inner {
		justify-items: center;
		text-align: center;
	}

	/* Journal: title and button centred, cards scroll sideways with snap and the edge of the next card
	   peeking in at the screen edge. */
	.ch-journal__inner { grid-template-columns: minmax(0, 1fr); }
	.ch-journal__title { text-align: center; }
	.ch-journal__more {
		grid-area: auto;
		justify-self: center;
		margin-top: var(--wp--preset--spacing--40);
	}
	/* position: relative as on the testimonials track: the hidden "Read more" labels have position: absolute
	   and without it would be positioned against the document, widening the page by about 325 px. */
	.ch-journal__list {
		position: relative;
		grid-auto-flow: column;
		grid-auto-columns: 76%;
		gap: var(--wp--preset--spacing--20);
		margin-inline: calc(-1 * var(--wp--preset--spacing--20));
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--preset--spacing--20);
		scrollbar-width: none;
	}
	.ch-journal__list::-webkit-scrollbar { display: none; }
	.ch-journal__item { scroll-snap-align: start; }

	.ch-newsletter .ff_submit_btn_wrapper,
	.ch-footer__legal { text-align: center; }
	.ch-footer__bottom,
	.ch-footer__meta { justify-content: center; }

	/* Partners: a shorter band; logos in the design are 20–63 px tall (× 1.45 up to 90 px). */
	.ch-partners { padding-block: var(--wp--preset--spacing--40); }
	.ch-partners__item { height: 5rem; }
}

/* Header and menu below 1280 px per the mobile IDML with the open menu (29 Sep): one row with the
   menu icon, the logo centred and a small Book Now; the open menu fills the screen on sand, items
   with rules, Sections drill down to a submenu with a back arrow, the tagline and profiles at the bottom. */
@media (max-width: 1279px) {
	/* Logo centred between the menu icon and Book Now; at 360 px it has about 180 px. */
	.ch-header__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--wp--preset--spacing--10);
	}
	/* Explicit grid areas: the menu comes before Book Now in the HTML and takes the second row when open. */
	.ch-nav-toggle {
		grid-area: 1 / 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		justify-self: start;
		order: 0;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
	}
	.ch-header--on-hero .ch-nav-toggle { border: 0; }
	/* Three bars, a cross when open. */
	.ch-nav-toggle__icon,
	.ch-nav-toggle__icon::before,
	.ch-nav-toggle__icon::after {
		display: block;
		width: 1.625rem;
		height: 2px;
		background: currentColor;
		transition: transform 0.15s ease, background-color 0.15s ease;
	}
	.ch-nav-toggle__icon { position: relative; }
	.ch-nav-toggle__icon::before,
	.ch-nav-toggle__icon::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.ch-nav-toggle__icon::before { top: -0.5rem; }
	.ch-nav-toggle__icon::after { top: 0.5rem; }
	.ch-nav-toggle[aria-expanded="true"] .ch-nav-toggle__icon { background: transparent; }
	.ch-nav-toggle[aria-expanded="true"] .ch-nav-toggle__icon::before { transform: translateY(0.5rem) rotate(45deg); }
	.ch-nav-toggle[aria-expanded="true"] .ch-nav-toggle__icon::after { transform: translateY(-0.5rem) rotate(-45deg); }
	.ch-header__brand {
		grid-area: 1 / 2;
		justify-self: center;
		margin: 0;
	}
	.ch-header__logo { height: 1.5rem; }
	.ch-header__logo--in-menu { display: none; }
	.ch-header__cta {
		grid-area: 1 / 3;
		justify-self: end;
		order: 0;
		min-height: 2.25rem;
		padding: 0.375rem 0.875rem;
		font-size: var(--wp--preset--font-size--xs);
		white-space: nowrap;
	}
	.ch-nav {
		grid-area: 2 / 1 / 3 / -1;
		order: 0;
	}

	/* Open menu: full-screen header, sand, navy. */
	html:has(.ch-nav-toggle[aria-expanded="true"]) { overflow: hidden; }
	.ch-header:has(.ch-nav-toggle[aria-expanded="true"]) {
		position: fixed;
		inset: 0;
		z-index: 100;
		overflow-y: auto;
		background: var(--wp--preset--color--sand);
		border: 0;
		color: var(--wp--preset--color--navy);
	}
	.ch-header:has(.ch-nav-toggle[aria-expanded="true"]) .ch-header__logo--on-photo { display: none; }
	.ch-header:has(.ch-nav-toggle[aria-expanded="true"]) .ch-header__logo--in-menu { display: block; }
	.ch-header:has(.ch-nav-toggle[aria-expanded="true"]) .ch-nav-toggle,
	.ch-header:has(.ch-nav-toggle[aria-expanded="true"]) .ch-nav a,
	.ch-header:has(.ch-nav-toggle[aria-expanded="true"]) .ch-nav__toggle { color: var(--wp--preset--color--navy); }
	.ch-header:has(.ch-nav-toggle[aria-expanded="true"]) .ch-header__cta {
		border-color: var(--wp--preset--color--navy);
		background: transparent;
		color: var(--wp--preset--color--navy);
	}
	.ch-header:has(.ch-nav-toggle[aria-expanded="true"]) :focus-visible { outline-color: var(--wp--preset--color--navy); }
	.ch-header--on-hero .ch-nav {
		margin-inline: 0;
		padding-inline: 0;
		background: transparent;
	}

	/* Items: rules between items, a "›" arrow next to Sections. */
	.ch-nav__list { margin-top: var(--wp--preset--spacing--30); }
	.ch-nav__list > li,
	.ch-header--on-hero .ch-nav__list > li { border-top: 0; }
	.ch-nav__list > li + li { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 20%, transparent); }
	.ch-nav__list > li > a {
		padding-block: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--xl);
	}
	.ch-nav__toggle::before { transform: rotate(-45deg); }
	.ch-nav__toggle[aria-expanded="true"]::before { transform: rotate(135deg); }

	/* A Section's submenu replaces the list: back arrow and Section name at the top, items with rules. */
	.ch-nav__list:has(> li > .ch-nav__toggle[aria-expanded="true"]) > li:not(:has(> .ch-nav__toggle[aria-expanded="true"])) { display: none; }
	.ch-nav__list > li > .ch-nav__toggle[aria-expanded="true"] {
		order: -1;
		margin-left: -0.75rem;
	}
	.ch-nav .sub-menu { padding-bottom: 0; }
	.ch-nav .sub-menu li { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 20%, transparent); }
	.ch-nav .sub-menu .ch-menu-heading { border-top: 0; }
	/* The Section name above its submenu says where its items belong, so its copy stays hidden here.
	   About Us lists its own page first, as Prices lists Price List: two pages, two items (Kaya, 14 Oct). */
	.ch-nav__list > li:not(.menu-item-type-taxonomy) > .sub-menu > .ch-nav__panel-title { display: block; }
	.ch-nav .sub-menu a {
		padding: var(--wp--preset--spacing--20) 0;
		font-size: var(--wp--preset--font-size--lg);
	}
	.ch-nav__heading,
	.ch-header--on-hero .ch-nav__heading {
		padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--10);
		color: color-mix(in srgb, var(--wp--preset--color--sage) 70%, var(--wp--preset--color--ink));
	}

	/* Bottom of the menu: tagline on the left, profiles on the right. */
	.ch-nav__footer {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--20);
		margin-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--40);
	}
	.ch-nav__tagline {
		flex: 1 1 12rem;
		max-width: 16rem;
		margin: 0;
		font-size: var(--wp--preset--font-size--sm);
		line-height: 1.5;
	}
	.ch-nav__social {
		display: flex;
		gap: var(--wp--preset--spacing--10);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.ch-nav__social a {
		display: inline-flex;
		width: 2.75rem;
		height: 2.75rem;
		border: 1px solid currentColor;
	}
	.ch-nav__social svg { width: 100%; height: 100%; }
}
@media (min-width: 768px) and (max-width: 1279px) {
	.ch-header__logo { height: 1.75rem; }
}

/* Section page (Modern Health / Smart Beauty): a split hero like the home Section cards, the
   treatment cards in the price-card language (sage bar, light frame) and a consultation call to
   action. Our design in the home page's visual language. */
.ch-section-hero__inner {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}
.ch-section-hero__title { margin: 0 0 var(--wp--preset--spacing--30); }
.ch-section-hero__text p {
	max-width: 36rem;
	margin: 0 0 var(--wp--preset--spacing--20);
}
.ch-section-hero .ch-actions { margin-top: var(--wp--preset--spacing--40); }
.ch-section-hero__media { order: -1; }
.ch-section-hero__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ch-treatments__title { margin: 0; text-align: center; }
.ch-treatments__list {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}
.ch-treatments__item {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 35%, transparent);
	border-top: 6px solid var(--wp--preset--color--sage);
	background: var(--wp--preset--color--white);
	scroll-margin-top: var(--wp--preset--spacing--40);
}
/* Arriving from the menu: the treatment's card is marked until its own page is ready. */
.ch-treatments__item:target {
	outline: 2px solid var(--wp--preset--color--sage);
	outline-offset: 4px;
}
/* Optional photo: flush with the card edges when a treatment gets one. */
.ch-treatments__image {
	display: block;
	width: calc(100% + 2 * var(--wp--preset--spacing--30));
	max-width: none;
	margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--30)) var(--wp--preset--spacing--30);
	aspect-ratio: 8 / 5;
	object-fit: cover;
}
.ch-treatments__number {
	margin: 0;
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
}
.ch-treatments__name {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: var(--wp--custom--line-height--heading-sm);
}
.ch-treatments__excerpt { margin: var(--wp--preset--spacing--20) 0 0; }
.ch-treatments__phrase { white-space: nowrap; }
.ch-treatments__more {
	align-self: flex-start;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
}

.ch-section-cta__inner {
	max-width: 48rem;
	text-align: center;
}
.ch-section-cta__title { margin: 0; }
.ch-section-cta__text { margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--40); }

/* Side by side from tablet up: stacked, the photo filled most of a portrait tablet's first screen
   and pushed the description and button below the fold. The narrow column gets a portrait crop. */
@media (min-width: 768px) {
	.ch-section-hero--with-image { padding-block: var(--wp--preset--spacing--50); }
	.ch-section-hero--with-image .ch-section-hero__inner {
		grid-template-columns: 51fr 49fr;
		align-items: center;
	}
	.ch-section-hero__media { order: 0; }
	.ch-section-hero__image { aspect-ratio: 4 / 5; }
	.ch-treatments__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ch-section-hero--with-image .ch-section-hero__inner { gap: var(--wp--preset--spacing--50); }
	.ch-section-hero__image { aspect-ratio: 629 / 515; }
	.ch-treatments__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- content pages (generic template) ---------- */
.ch-entry__title { margin: 0 0 var(--wp--preset--spacing--40); }
.ch-entry__content { max-width: 48rem; }
.ch-entry > .ch-actions { margin-top: var(--wp--preset--spacing--40); }

/* ---------- prices (Price List, Packages; template-parts/content/prices.php) ----------
   A sticky bar of jump links, each Section in its own band, every table a card under its own
   heading (the client's request of 5 Oct). The card repeats the treatment cards on the Section
   pages; member price columns carry a sage tint so the saving shows at a glance. */
.ch-price-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	padding-block: var(--wp--preset--spacing--20);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 25%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--white) 94%, transparent);
	backdrop-filter: blur(6px);
}
.ch-price-nav__list { justify-content: center; }
.ch-chip[aria-current="true"] {
	border-color: var(--wp--preset--color--sage);
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--white);
}
.ch-price-group__title,
.ch-price-panel,
.ch-price-table__title { scroll-margin-top: 6rem; }
.ch-price-group__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--heading-lg);
	line-height: var(--wp--custom--line-height--heading);
	text-align: center;
}
.ch-price-group__cards {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: 64rem;
	margin-inline: auto;
}
/* Narrow tables (a name and one price) stack in one column of their own width. On wide screens they
   split into two columns of about equal height (ch_price_columns in inc/prices.php), each a stack of
   whole cards; below that the column wrappers drop out of the layout and the cards stack as before. */
.ch-price-group__cards--narrow { max-width: 40rem; }
.ch-price-group__column { display: contents; }
.ch-price-panel {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 35%, transparent);
	border-top: 6px solid var(--wp--preset--color--sage);
	background: var(--wp--preset--color--white);
}
.ch-price-table__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: var(--wp--custom--line-height--heading-sm);
}
/* A Smart Beauty table's title with the treatment's three descriptors beside it, as on its card on
   the Section page (Robert's comments of 11 Oct); below it where the line is too short. */
.ch-price-table__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--20);
}
.ch-price-table__head .ch-price-table__title { margin: 0; }
.ch-price-table__descriptors {
	margin: 0;
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--lg);
}
.ch-price-table {
	width: 100%;
	border-collapse: collapse;
}
/* Every price table in the client's colours on phones and wide screens alike: labels on the brand's
   charcoal, Monthly on a light green, Weekly in sage (Robert's comments of 11 Oct, after the style
   of her Instagram price card chosen on 9 Oct), names and prices left-aligned in every column
   (Kaya's comments of 12 Oct), prices in tabular figures. The columns keep
   the same widths in every table, the name taking 40% and the prices sharing the rest equally, so
   tables one under another line up (fixed layout); a table with one price gives the name 65%.
   Cells would otherwise inherit the body line-height (1.85) and letter-spacing (0.05em). */
.ch-price-table { table-layout: fixed; }
.ch-price-table thead th:first-child { width: 40%; }
.ch-price-table:not(.ch-price-table--wide) thead th:first-child { width: 65%; }
.ch-price-table :is(th, td) {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 20%, transparent);
	line-height: var(--wp--custom--line-height--heading-sm);
	letter-spacing: normal;
	text-align: left;
	vertical-align: middle;
}
.ch-price-table tbody tr:last-child > * { border-bottom: 0; }
.ch-price-table thead :is(th, th.ch-price-table__member) {
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	line-height: 1.25;
	text-transform: uppercase;
}
/* Two-column tables keep the label and the price on one line. A broken label ("Packages of / 6")
   made one card's label row taller than its neighbour's, so the rows of paired cards no longer
   lined up. A long name wraps instead, without leaving one word on its own line. */
.ch-price-table:not(.ch-price-table--wide) :is(thead th, td) { white-space: nowrap; }
.ch-price-table tbody th {
	color: var(--wp--preset--color--navy);
	font-weight: 500;
	text-wrap: pretty;
}
.ch-price-table td { font-variant-numeric: tabular-nums; }
.ch-price-table td.ch-price-table__member--monthly { background: color-mix(in srgb, var(--wp--preset--color--sage-light) 35%, var(--wp--preset--color--white)); }
.ch-price-table td.ch-price-table__member--weekly {
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--white) 25%, transparent);
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--white);
}
/* Row highlight only where there is a pointer to hover with (a tap on a phone would leave it on).
   The whole row lights up: the plain cells in sand, each member column a shade deeper in its own
   colour, so the row reads across while Monthly and Weekly stay recognisable. */
@media (hover: hover) and (min-width: 768px) {
	.ch-price-table tbody tr:hover > :not(.ch-price-table__member) { background-color: color-mix(in srgb, var(--wp--preset--color--sand) 70%, transparent); }
	.ch-price-table tbody tr:hover > td.ch-price-table__member--monthly { background-color: color-mix(in srgb, var(--wp--preset--color--sage-light) 60%, var(--wp--preset--color--white)); }
	.ch-price-table tbody tr:hover > td.ch-price-table__member--weekly { background-color: color-mix(in srgb, var(--wp--preset--color--sage) 82%, var(--wp--preset--color--navy)); }
}
.ch-price-group__note {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
}
/* The membership comparison on Memberships Explained stands alone, without a card around it. */
.ch-page-table .ch-price-table {
	border-top: 6px solid var(--wp--preset--color--sage);
	background: var(--wp--preset--color--white);
}
@media (max-width: 767px) {
	/* On phones the jump links stay on one line and scroll sideways, so the sticky bar stays short.
	   The nav class raises specificity over the generic .ch-chips rule further down. */
	.ch-price-nav { padding-block: var(--wp--preset--spacing--10); }
	.ch-price-nav .ch-price-nav__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.ch-price-nav .ch-price-nav__list > li { flex: none; }
}
@media (min-width: 1024px) {
	/* The last card of each column stretches, so both columns end on one line: whatever the split
	   leaves over (about a row) shows as space inside the last card, never as a hole beside it. */
	.ch-price-group__cards--columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 64rem;
	}
	.ch-price-group__column {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
	}
	.ch-price-group__column > :last-child { flex-grow: 1; }
}
@media (max-width: 767px) {
	/* On phones the same tables, tighter, so four columns fit a 360 px screen: the labels a size
	   smaller and without their tracking ("PACKAGES", "TREATMENT"). */
	.ch-price-panel { padding-inline: 0.5rem; }
	.ch-price-table :is(th, td) {
		padding: 0.5rem 0.3125rem;
		font-size: var(--wp--preset--font-size--md);
	}
	.ch-price-table :is(th, td):first-child { padding-left: 0.5rem; }
	.ch-price-table thead :is(th, th.ch-price-table__member) {
		padding-block: 0.625rem;
		font-size: var(--wp--preset--font-size--xs);
		letter-spacing: normal;
	}
}
@media (max-width: 374px) {
	/* The smallest phones (320 px): a size smaller and tighter, and a long label may break inside a
	   word, so four columns still fit without the page scrolling sideways. */
	.ch-price-panel { padding-inline: 0.25rem; }
	.ch-price-table :is(th, td) {
		padding-inline: 0.25rem;
		font-size: var(--wp--preset--font-size--sm);
	}
	.ch-price-table thead th { overflow-wrap: anywhere; }
	/* A long word in a name ("(Pressotherapy)") is wider than the name column here: it hyphenates. */
	.ch-price-table tbody th {
		hyphens: auto;
		overflow-wrap: anywhere;
	}
}

/* Tables inside page copy (the privacy policy); a price table in the copy keeps its own look. On
   phones each row restacks into labelled blocks: the copy carries data-ch-label on every cell and
   explicit roles for Safari. */
.ch-entry__content table:not(.ch-price-table) {
	width: 100%;
	margin-block: var(--wp--preset--spacing--30);
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}
.ch-entry__content table:not(.ch-price-table) :is(th, td) {
	padding: 0.75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 35%, transparent);
	text-align: left;
	vertical-align: top;
}
.ch-entry__content table:not(.ch-price-table) thead th { border-bottom: 2px solid var(--wp--preset--color--sage); }
.ch-entry__content table:not(.ch-price-table) td p { margin: 0 0 0.5rem; }
.ch-entry__content table:not(.ch-price-table) td p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
	.ch-entry__content table:not(.ch-price-table):has(td[data-ch-label]),
	.ch-entry__content table:not(.ch-price-table):has(td[data-ch-label]) tbody,
	.ch-entry__content table:not(.ch-price-table):has(td[data-ch-label]) tr,
	.ch-entry__content table:not(.ch-price-table) td[data-ch-label] { display: block; }
	.ch-entry__content table:not(.ch-price-table):has(td[data-ch-label]) thead tr {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.ch-entry__content table:not(.ch-price-table):has(td[data-ch-label]) tr {
		padding-block: 0.75rem;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 35%, transparent);
	}
	.ch-entry__content table:not(.ch-price-table) td[data-ch-label] {
		padding: 0.25rem 0;
		border: 0;
	}
	.ch-entry__content table:not(.ch-price-table) td[data-ch-label]::before {
		content: attr(data-ch-label);
		display: block;
		font-weight: 600;
	}
}
.ch-entry__content .ch-price-table { margin-block: var(--wp--preset--spacing--40); }

/* ---------- content pages built from bands (inc/pages.php) ----------
   The client's copy split into the home page's band rhythm: intro on sand, text in a readable
   column (with a photo beside it when there is one), a statement on sage, a closing band. */
.ch-page-intro__lead {
	max-width: 48rem;
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--heading-xs);
	line-height: 1.5;
}
/* Headings and statements break into lines of similar length, so no word stands alone on the
   last line ("born." on Our Story); paragraphs avoid a single word on their last line. */
.ch-page-intro .ch-section-hero__title,
.ch-page-text__title,
.ch-page-text__lead,
.ch-page-statement__text,
.ch-page-statement__lead,
.ch-page-firsts__title,
.ch-page-story__lead,
.ch-page-cards__title,
.ch-page-cta .ch-section-cta__title,
.ch-price-group__title { text-wrap: balance; }
:is(.ch-page-text__body, .ch-page-firsts__aside, .ch-page-story__text, .ch-page-cards__text, .ch-page-statement__after, .ch-section-cta__text) { text-wrap: pretty; }
/* Without a photo the intro is centred, like the about band on the home page. */
.ch-page-intro:not(.ch-section-hero--with-image) .ch-section-hero__body {
	max-width: 52rem;
	margin-inline: auto;
	text-align: center;
}
.ch-page-intro:not(.ch-section-hero--with-image) .ch-page-intro__lead { margin-inline: auto; }
.ch-page-intro:not(.ch-section-hero--with-image) .ch-actions { justify-content: center; }

.ch-page-text__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}
.ch-page-text__body {
	width: 100%;
	max-width: 42rem;
	margin-inline: auto;
}
.ch-page-text__body p { margin: 0 0 var(--wp--preset--spacing--30); }
.ch-page-text__body p:last-child { margin-bottom: 0; }
.ch-page-text__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--heading-lg);
	line-height: var(--wp--custom--line-height--heading);
}
.ch-page-text__lead {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: var(--wp--custom--line-height--heading-sm);
}
.ch-page-text__media { order: -1; }
/* With a photo: the photo fills half the band edge to edge, as in the journey band on the home
   page, and the text sits in the other half on the container line. On phones the photo comes
   first at full width. */
.ch-page-text--with-image { padding-block: 0; }
.ch-page-text--with-image .ch-page-text__inner { gap: 0; }
.ch-page-text--with-image .ch-page-text__body {
	max-width: none;
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
}
.ch-page-text--with-image .ch-page-text__body > * { max-width: 36rem; }
.ch-page-text--with-image .ch-page-text__media {
	overflow: hidden;
	background: var(--wp--preset--color--sand);
}

/* Split: heading and lead on the left under a sage rule (the card border of the Section pages),
   paragraphs on the right; optionally every Treatment as a linked label, grouped by Section. */
.ch-page-text--split .ch-page-text__inner { gap: var(--wp--preset--spacing--40); }
.ch-page-text--split .ch-page-text__aside {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 6px solid var(--wp--preset--color--sage);
}
.ch-page-text--split .ch-page-text__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-md);
	line-height: var(--wp--custom--line-height--heading);
}
.ch-page-text--split .ch-page-text__body {
	max-width: none;
	margin: 0;
}
.ch-page-text__menu {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}
.ch-page-text__menu-title {
	margin: 0 0 var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
}
.ch-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ch-chip {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 35%, transparent);
	color: inherit;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ch-chip:hover,
.ch-chip:focus-visible {
	border-color: var(--wp--preset--color--sage);
	background: color-mix(in srgb, var(--wp--preset--color--sage-light) 25%, transparent);
}
.ch-page-text__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ch-page-statement__text {
	max-width: 52rem;
	margin: 0 auto;
	font-size: var(--wp--preset--font-size--heading-lg);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--heading);
	text-align: center;
}

.ch-page-statement__lead {
	max-width: 40rem;
	margin: 0 auto var(--wp--preset--spacing--30);
	text-align: center;
	opacity: 0.85;
}

/* The steps hang on a path: a sage line on the left with a diamond (the logo's lattice) at every
   step. The line runs to the bottom of the band, into the sage statement where the story lands. */
.ch-page-story { --ch-path-x: 0.5rem; --ch-path-gutter: 2.25rem; }
.ch-page-story__steps {
	position: relative;
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 0 0 var(--ch-path-gutter);
	list-style: none;
	view-timeline-name: --ch-story;
}
.ch-page-story__steps::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: calc(-1 * var(--wp--preset--spacing--50));
	left: calc(var(--ch-path-x) - 1px);
	width: 2px;
	background: var(--wp--preset--color--sage);
	transform-origin: top;
}
.ch-page-story__step { view-timeline-name: --ch-step; }
.ch-page-story__number { position: relative; }
.ch-page-story__number::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--ch-path-x) - var(--ch-path-gutter) - 0.4375rem);
	width: 0.875rem;
	height: 0.875rem;
	border: 2px solid var(--wp--preset--color--sage);
	background: var(--wp--preset--color--sage);
	transform: translateY(-50%) rotate(45deg);
}
.ch-page-story__step {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 35%, transparent);
}
.ch-page-story__step:first-child { padding-top: 0; border-top: 0; }
.ch-page-story__step:last-child { padding-bottom: 0; }
.ch-page-story__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: var(--wp--custom--line-height--heading-sm);
}
.ch-page-story__number {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
}
.ch-page-story__text { margin: 0; }

.ch-page-statement__after {
	max-width: 40rem;
	margin: var(--wp--preset--spacing--30) auto 0;
	text-align: center;
	opacity: 0.85;
}

/* The gift icon in place of a photo: large, navy, centred in its column. */
.ch-page-intro__icon {
	display: block;
	width: min(60%, 14rem);
	height: auto;
	margin-inline: auto;
	color: var(--wp--preset--color--navy);
}

.ch-page-cards__heading { margin-bottom: var(--wp--preset--spacing--50); }
.ch-page-cards__list {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ch-page-cards__item {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 35%, transparent);
	border-top: 6px solid var(--wp--preset--color--sage);
	background: var(--wp--preset--color--white);
}
.ch-page-cards__number {
	margin: 0;
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
}
.ch-page-cards__title {
	margin: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: var(--wp--custom--line-height--heading-sm);
}
.ch-page-cards__text { margin: 0; }

/* FAQ: the journey accordion of the home page. On sage (Memberships Explained) it keeps the journey's
   white rules; on a light band its rules turn sage. */
.ch-page-faq__inner { max-width: 48rem; }
.ch-page-faq__title { margin-bottom: var(--wp--preset--spacing--40); }
.ch-page-faq .ch-accordion {
	max-width: none;
	margin-top: 0;
}
.ch-page-faq:not(.ch-band--sage) .ch-accordion { border-bottom-color: color-mix(in srgb, var(--wp--preset--color--sage) 30%, transparent); }
.ch-page-faq:not(.ch-band--sage) .ch-accordion__item { border-top-color: color-mix(in srgb, var(--wp--preset--color--sage) 30%, transparent); }
/* The question leads, a size above its answer. */
.ch-page-faq .ch-accordion__summary {
	padding-block: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
}
.ch-page-faq .ch-accordion__body { font-size: var(--wp--preset--font-size--lg); }

.ch-page-table__inner { max-width: 56rem; }
.ch-page-table__title { margin-bottom: var(--wp--preset--spacing--40); }

.ch-page-facts__list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--heading-xs);
	line-height: 1.45;
	text-align: center;
}
.ch-page-facts .ch-actions { margin-top: var(--wp--preset--spacing--40); }

.ch-page-text__body .ch-actions { margin-top: var(--wp--preset--spacing--40); }
/* Under a heading the split band's lead steps down a size, so the heading leads. */
.ch-page-text--split .ch-page-text__title + .ch-page-text__lead {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--heading-xs);
	line-height: 1.45;
}

/* Firsts: the claims as a ruled list on navy. The words that make each claim a first stand as a
   label in a sage outline, the rest of the sentence large below it; a claim about a Treatment ends
   in the designer's carousel arrow and leads to it. */
.ch-page-firsts { padding-block: var(--wp--preset--spacing--60); }
.ch-page-firsts__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}
.ch-page-firsts__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--heading-lg);
	line-height: var(--wp--custom--line-height--heading);
}
.ch-page-firsts__aside p { margin: 0 0 var(--wp--preset--spacing--20); }
.ch-page-firsts__aside p:last-child { margin-bottom: 0; }
.ch-page-firsts__label {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--sage-light);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
}
.ch-page-firsts__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 22%, transparent);
	list-style: none;
}
.ch-page-firsts__item { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 22%, transparent); }
.ch-page-firsts__claim {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	color: inherit;
	text-decoration: none;
}
.ch-page-firsts__lead {
	grid-column: 1 / -1;
	justify-self: start;
	margin-bottom: 0.75rem;
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--wp--preset--color--sage-light);
	color: var(--wp--preset--color--sage-light);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.4;
}
.ch-page-firsts__text {
	grid-column: 1;
	font-size: var(--wp--preset--font-size--heading-xs);
	line-height: var(--wp--custom--line-height--heading-sm);
	letter-spacing: normal;
}
.ch-page-firsts__arrow {
	grid-column: 2;
	grid-row: 2;
	width: 2.25rem;
	height: 2.25rem;
	transition: translate 0.2s ease;
}
.ch-page-firsts__claim--link:is(:hover, :focus-visible) .ch-page-firsts__arrow { translate: 0.375rem 0; }
.ch-page-firsts__claim--link:is(:hover, :focus-visible) .ch-page-firsts__text {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
.ch-page-firsts__closing {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--heading-xs);
	line-height: var(--wp--custom--line-height--heading-sm);
}

@media (max-width: 767px) {
	.ch-page-firsts { padding-block: var(--wp--preset--spacing--50); }
	.ch-page-firsts__title { font-size: var(--wp--preset--font-size--heading-md); }
	.ch-page-firsts__text { font-size: var(--wp--preset--font-size--xl); }
	.ch-page-firsts__arrow { width: 1.75rem; height: 1.75rem; }
}
@media (min-width: 1024px) {
	/* The heading and its paragraphs stay in view while the claims pass beside them. */
	.ch-page-firsts__inner {
		grid-template-columns: 5fr 7fr;
		column-gap: var(--wp--preset--spacing--60);
		align-items: start;
	}
	.ch-page-firsts__aside {
		position: sticky;
		top: var(--wp--preset--spacing--50);
	}
	.ch-page-firsts__text { font-size: var(--wp--preset--font-size--heading-sm); }
}
/* Each claim rises in as it reaches the screen (assets/js/reveal.js); where the browser supports
   scroll-driven animation its label then fills with sage as the claim passes the middle of the
   screen, so the list lights up as it is read. The fill switches in one step: a gradual one passed
   through a frame where text and background were the same colour. Without the script or with
   reduced motion everything stands still, labels in outline. */
.ch-reveal .ch-page-firsts__item {
	opacity: 0;
	translate: 0 0.75rem;
	transition: opacity 0.9s cubic-bezier(0.37, 0, 0.63, 1), translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.ch-reveal .ch-page-firsts__item.ch-in-view {
	opacity: 1;
	translate: 0 0;
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ch-page-firsts__item { view-timeline-name: --ch-first; }
		.ch-page-firsts__lead {
			animation: ch-first-fill steps(1) both;
			animation-timeline: --ch-first;
			animation-range: cover 35% cover 50%;
		}
	}
}
@keyframes ch-first-fill {
	from { background: transparent; color: var(--wp--preset--color--sage-light); }
	to { background: var(--wp--preset--color--sage-light); color: var(--wp--preset--color--navy); }
}

@media (max-width: 767px) {
	.ch-page-intro__lead { font-size: var(--wp--preset--font-size--body); }
	.ch-page-intro__icon { width: 7rem; }
}
@media (min-width: 768px) {
	.ch-page-text--with-image .ch-page-text__body { padding-inline: var(--wp--preset--spacing--40); }
	.ch-page-cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ch-page-facts__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.ch-page-facts__item { padding-inline: var(--wp--preset--spacing--30); }
	.ch-page-facts__item + .ch-page-facts__item { border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent); }
	.ch-page-story { --ch-path-gutter: 3.5rem; }
	.ch-page-story__steps::before { bottom: calc(-1 * var(--wp--preset--spacing--60)); }
}
/* Drawn as the reader scrolls, where the browser supports scroll-driven animation; elsewhere, and
   with reduced motion, the path simply stands complete. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ch-page-story__steps::before {
			animation: ch-path-draw linear both;
			animation-timeline: --ch-story;
			animation-range: entry 10% cover 65%;
		}
		.ch-page-story__number::before {
			animation: ch-path-mark linear both;
			animation-timeline: --ch-step;
			animation-range: entry 30% entry 90%;
		}
	}
}
/* Text bands reveal once they come into view (assets/js/reveal.js): the photo fades in, slowly
   enough to finish after the text, the text rises in, and Treatment labels follow one by one. While
   a photo band crosses the screen the photo eases out of a slight close-up, scroll-driven where
   supported. Opacity leads and nothing travels more than 0.75rem, to suit a calm place. Without
   the script or with reduced motion everything stands still. */
.ch-reveal .ch-page-text--with-image .ch-page-text__media {
	opacity: 0;
	transition: opacity 1.4s cubic-bezier(0.37, 0, 0.63, 1);
}
.ch-reveal .ch-page-text :is(.ch-page-text__aside, .ch-page-text__body) > *,
.ch-reveal .ch-page-text .ch-chips > li {
	opacity: 0;
	translate: 0 0.75rem;
	transition: opacity 0.9s cubic-bezier(0.37, 0, 0.63, 1), translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.ch-reveal .ch-page-text .ch-page-text__body > :nth-child(2) { transition-delay: 0.12s; }
.ch-reveal .ch-page-text .ch-page-text__body > :nth-child(n + 3) { transition-delay: 0.24s; }
.ch-reveal .ch-page-text .ch-chips > li {
	translate: 0 0.75rem;
	transition-delay: calc(0.35s + var(--ch-i, 0) * 0.05s);
}
.ch-reveal .ch-page-text.ch-in-view .ch-page-text__media { opacity: 1; }
.ch-reveal .ch-page-text.ch-in-view :is(.ch-page-text__aside, .ch-page-text__body) > *,
.ch-reveal .ch-page-text.ch-in-view .ch-chips > li {
	opacity: 1;
	translate: 0 0;
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ch-page-text--with-image { view-timeline-name: --ch-photo; }
		.ch-page-text--with-image .ch-page-text__image {
			animation: ch-photo-drift linear both;
			animation-timeline: --ch-photo;
			animation-range: cover 0% cover 100%;
		}
	}
}
/* ---------- photo slots (inc/media.php, never on production) ----------
   The frame of a photo the client is yet to choose, in the crop of the photo it stands for: a sand
   field with a dashed sage edge, saying what to send. */
.ch-photo-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: var(--wp--preset--spacing--20);
	border: 2px dashed color-mix(in srgb, var(--wp--preset--color--sage) 55%, transparent);
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--sage);
	text-align: center;
}
.ch-photo-slot__label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
}
.ch-photo-slot__size {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
}
/* A frame drifts no closer like a photo: its text would grow and shrink. */
.ch-page-text--with-image .ch-page-text__image.ch-photo-slot { animation: none; }
.ch-photo-slot__note {
	max-width: 22rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

/* ---------- reveal on scroll, site-wide (assets/js/reveal.js) ----------
   An element marked data-ch-reveal is hidden until it comes into view, then arrives once:
   - rise: fades in while rising 0.75rem (0.9 s);
   - fade: fades in without moving (0.9 s), for scrolling tracks that a rise would make scroll;
   - photo: fades in slowly (1.4 s), without waiting for its neighbours;
   - stagger: its direct children rise in turn, 0.12 s apart (with fade, they only fade);
   - band: only watched, the band's own CSS above does the rest (text bands, firsts claims).
   Units arriving together follow each other (--ch-order, set by the script); no unit waits more
   than 0.36 s. The keyframes give only the starting point, so every element ends on its own values
   (the gift icon's faint opacity, a disabled carousel arrow) and keeps its own transitions (button
   hovers). An element with an animation of its own is never marked: its container is. Only the
   html.ch-reveal class hides anything, and it is absent with reduced motion, without the script, on
   an address with an anchor, and once a keyboard user tabs into content not yet shown. */
[data-ch-reveal] { --ch-delay: min(calc(var(--ch-order, 0) * 0.12s), 0.36s); }
[data-ch-reveal~="stagger"] > * { --ch-delay: min(calc((var(--ch-order, 0) + var(--ch-step, 0)) * 0.12s), 0.36s); }
[data-ch-reveal~="stagger"] > :nth-child(2) { --ch-step: 1; }
[data-ch-reveal~="stagger"] > :nth-child(n + 3) { --ch-step: 2; }
.ch-reveal :is([data-ch-reveal~="rise"], [data-ch-reveal~="photo"], [data-ch-reveal~="fade"]:not([data-ch-reveal~="stagger"])):not(.ch-in-view),
.ch-reveal [data-ch-reveal~="stagger"]:not(.ch-in-view) > * { opacity: 0; }
.ch-reveal [data-ch-reveal~="rise"].ch-in-view,
.ch-reveal [data-ch-reveal~="stagger"]:not([data-ch-reveal~="fade"]).ch-in-view > * {
	animation:
		ch-reveal-fade 0.9s cubic-bezier(0.37, 0, 0.63, 1) var(--ch-delay) backwards,
		ch-reveal-lift 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--ch-delay) backwards;
}
.ch-reveal [data-ch-reveal~="fade"]:not([data-ch-reveal~="stagger"]).ch-in-view,
.ch-reveal [data-ch-reveal~="stagger"][data-ch-reveal~="fade"].ch-in-view > * {
	animation: ch-reveal-fade 0.9s cubic-bezier(0.37, 0, 0.63, 1) var(--ch-delay) backwards;
}
.ch-reveal [data-ch-reveal~="photo"].ch-in-view { animation: ch-reveal-fade 1.4s cubic-bezier(0.37, 0, 0.63, 1) backwards; }
@keyframes ch-reveal-fade { from { opacity: 0; } }
@keyframes ch-reveal-lift { from { translate: 0 0.75rem; } }
@keyframes ch-photo-drift {
	from { scale: 1.12; }
	to { scale: 1; }
}
@keyframes ch-path-draw {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}
@keyframes ch-path-mark {
	from { background: var(--wp--preset--color--white); transform: translateY(-50%) rotate(45deg) scale(0.6); }
	to { background: var(--wp--preset--color--sage); transform: translateY(-50%) rotate(45deg) scale(1); }
}
@media (min-width: 1024px) {
	.ch-page-story__step {
		grid-template-columns: 5fr 7fr;
		column-gap: var(--wp--preset--spacing--60);
		align-items: start;
	}
}
@media (min-width: 1024px) {
	.ch-page-text--with-image .ch-page-text__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-height: 34rem;
	}
	.ch-page-text--with-image .ch-page-text__body {
		align-self: center;
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) max(var(--wp--preset--spacing--40), (100vw - var(--wp--style--global--wide-size)) / 2);
	}
	.ch-page-text--image-left .ch-page-text__body {
		padding-right: max(var(--wp--preset--spacing--40), (100vw - var(--wp--style--global--wide-size)) / 2);
		padding-left: var(--wp--preset--spacing--50);
	}
	.ch-page-text--with-image .ch-page-text__media {
		position: relative;
		order: 0;
		overflow: hidden;
	}
	.ch-page-text--image-left .ch-page-text__media { order: -1; }
	.ch-page-text--with-image .ch-page-text__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}
	.ch-page-text--split .ch-page-text__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--60);
		align-items: start;
	}
}