/**
 * Forest Remedy — Sessions with Leni. Added 2026-10-02.
 * The three session pages (/sessions/ and its two child pages) and the homepage band.
 * Loaded by inc/sessions-pages.php on those pages only. Reads fr-tokens.css; no colour is written here.
 * To undo: delete this file and inc/sessions-pages.php.
 */

/* ----------------------------------------------------------
 * Shared pieces: eyebrow, price, the arch photo, buttons.
 * ---------------------------------------------------------- */
.fr-sessions__eyebrow {
	margin: 0 0 4px;
	font-family: var(--fr-font-accent);
	font-size: 1.7em;
	line-height: 1.2;
	color: var(--fr-mid);
}

.fr-sessions-price__now {
	font-weight: 700;
	color: var(--fr-deep);
}

.fr-sessions-price__regular {
	color: var(--fr-ink-3);
}

/* The arch from Leni's poster and flyer: a tall photo with a rounded top. */
.fr-sessions-photo .img-inner {
	border-radius: 999px 999px var(--fr-radius) var(--fr-radius);
	overflow: hidden;
	box-shadow: var(--fr-shadow-1);
}

.fr-sessions-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.fr-sessions-photo--bodywork img {
	object-position: 50% 58%;
}

.fr-sessions-photo--consultation img {
	object-position: 50% 62%;
}

/* ----------------------------------------------------------
 * Page top: mist band with the title.
 * ---------------------------------------------------------- */
.fr-sessions-hero {
	background: var(--fr-mist);
}

.fr-sessions-hero .col {
	padding-bottom: 0;
}

.fr-sessions__back {
	margin: 0 0 14px;
	font-size: 0.9em;
}

.fr-sessions__back a {
	color: var(--fr-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fr-sessions__back a:hover {
	color: var(--fr-mid-hover);
}

.fr-sessions-hero .fr-sessions__title {
	margin: 0 0 12px;
	font-size: 2.5em;
	line-height: 1.12;
	letter-spacing: 0.005em;
	color: var(--fr-deep);
}

.fr-sessions__sub {
	margin: 0 0 16px;
	font-size: 1.15em;
	line-height: 1.5;
	color: var(--fr-ink);
}

.fr-sessions__lead {
	max-width: 34em;
	margin: 0 0 16px;
	font-size: 1.15em;
	line-height: 1.6;
	color: var(--fr-ink);
}

.fr-sessions-hero--centre .fr-sessions__lead {
	margin-left: auto;
	margin-right: auto;
}

.fr-sessions__meta {
	margin: 0 0 22px;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fr-ink-2);
}

.fr-sessions-hero .button {
	margin-bottom: 0;
}

/* ----------------------------------------------------------
 * /sessions/: the two sessions side by side.
 * ---------------------------------------------------------- */
.fr-sessions-card .col-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 26px 26px 22px;
	border: 1px solid var(--fr-line-3);
	border-radius: var(--fr-radius-lg);
	background: var(--fr-white);
}

.fr-sessions-card .fr-sessions-photo {
	width: 62%;
	max-width: 280px;
	margin: 0 auto 22px;
}

.fr-sessions-card__title {
	margin: 0 0 6px;
	font-size: 1.55em;
	line-height: 1.2;
	color: var(--fr-deep);
}

.fr-sessions-card__price {
	margin: 0 0 14px;
	font-size: 1.02em;
	line-height: 1.5;
	color: var(--fr-ink);
}

.fr-sessions-card p {
	line-height: 1.6;
}

.fr-sessions-card__for {
	padding: 12px 16px;
	border-left: 3px solid var(--fr-soft);
	border-radius: 0 var(--fr-radius-sm) var(--fr-radius-sm) 0;
	background: var(--fr-mist);
	color: var(--fr-ink);
}

.fr-sessions-card__actions {
	margin: auto 0 0;
	padding-top: 6px;
}

.fr-sessions-card__actions .button {
	margin: 0 8px 8px 0;
}

/* ----------------------------------------------------------
 * Landing pages: plain blocks with a heading each.
 * ---------------------------------------------------------- */
.fr-sessions-block__title {
	margin: 0 0 12px;
	font-size: 1.45em;
	line-height: 1.25;
	color: var(--fr-deep);
}

.fr-sessions-block p,
.fr-sessions-block li {
	line-height: 1.6;
	color: var(--fr-ink);
}

.fr-sessions-block ul,
.fr-sessions-block ol {
	margin: 0 0 14px 1.2em;
}

.fr-sessions-block li {
	margin-bottom: 8px;
}

.fr-sessions-panel .col-inner {
	height: 100%;
	padding: 24px 26px 12px;
	border-radius: var(--fr-radius-lg);
	background: var(--fr-mist);
}

.fr-sessions-panel__price {
	margin: 0 0 10px;
	font-size: 1.3em;
	line-height: 1.35;
}

.fr-sessions-panel__price .fr-sessions-price__regular {
	display: block;
	font-size: 0.72em;
}

.fr-sessions-panel__price .fr-sessions-price__sep {
	display: none;
}

/* ----------------------------------------------------------
 * Where and when + how to book: the forest band (same green as the market band).
 * ---------------------------------------------------------- */
.fr-sessions-where {
	background: var(--fr-deep);
	color: var(--fr-on-deep-2);
}

.fr-sessions-where .fr-sessions-where__title {
	margin: 0 0 14px;
	font-size: 1.6em;
	line-height: 1.2;
	color: var(--fr-on-deep);
}

.fr-sessions-where p,
.fr-sessions-where li {
	line-height: 1.6;
	color: var(--fr-on-deep-2);
}

.fr-sessions-where strong {
	color: var(--fr-on-deep);
}

.fr-sessions-facts {
	margin: 0;
	padding: 20px 24px 8px;
	border: 1px solid var(--fr-on-deep-rule);
	border-radius: var(--fr-radius);
	background: rgba(255, 255, 255, 0.05);
	list-style: none;
}

.fr-sessions-where ul.fr-sessions-facts,
.fr-sessions-where ul.fr-sessions-facts li {
	margin-left: 0;
}

.fr-sessions-facts li {
	display: flex;
	flex-direction: column;
	margin: 0 0 12px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--fr-on-deep-rule);
}

.fr-sessions-facts li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.fr-sessions-facts__label {
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fr-on-deep-2);
}

.fr-sessions-facts__value {
	font-size: 1.08em;
	color: var(--fr-on-deep);
}

.fr-sessions-steps {
	margin: 0 0 14px 1.3em;
}

.fr-sessions-steps li {
	margin-bottom: 8px;
	padding-left: 4px;
}

.fr-sessions-where a,
.fr-sessions-where .fr-sessions__text-line a {
	color: var(--fr-on-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----------------------------------------------------------
 * The request form.
 * ---------------------------------------------------------- */
.fr-sessions-request__title {
	margin: 0 0 6px;
	font-size: 1.8em;
	line-height: 1.2;
	color: var(--fr-deep);
	scroll-margin-top: 120px;
}

.fr-sessions__form {
	padding: 26px 26px 10px;
	border: 1px solid var(--fr-line-3);
	border-radius: var(--fr-radius-lg);
	background: var(--fr-white);
	box-shadow: var(--fr-shadow-1);
}

.fr-sessions__form .fr-sessions-form__intro {
	margin: 0 0 6px;
	line-height: 1.6;
	color: var(--fr-ink);
}

.fr-sessions__form .fr-sessions-form__health {
	margin: 4px 0 0;
	padding: 12px 16px;
	border-left: 3px solid var(--fr-mid);
	border-radius: 0 var(--fr-radius-sm) var(--fr-radius-sm) 0;
	background: var(--fr-mist);
	line-height: 1.55;
	color: var(--fr-ink);
}

.fr-sessions__form .frm-fluent-form .ff-el-input--label label {
	font-weight: 700;
	color: var(--fr-ink);
}

.fr-sessions__form .frm-fluent-form .ff-el-help-message {
	font-size: 0.9em;
	color: var(--fr-moss-ink);
}

.fr-sessions__form .frm-fluent-form .ff-el-form-check-label {
	color: var(--fr-ink);
}

.fr-sessions__form .frm-fluent-form input.ff-el-form-control,
.fr-sessions__form .frm-fluent-form select.ff-el-form-control,
.fr-sessions__form .frm-fluent-form textarea.ff-el-form-control {
	border: 1px solid var(--fr-line-4);
	border-radius: var(--fr-radius-sm);
	background-color: var(--fr-white);
	color: var(--fr-ink);
}

.fr-sessions__form .frm-fluent-form .ff-el-form-control:focus {
	border-color: var(--fr-mid);
	box-shadow: 0 0 0 2px var(--fr-mid-tint);
}

.fr-sessions__form .frm-fluent-form .ff-btn-submit {
	padding: 12px 26px;
	font-weight: 700;
}

.fr-sessions__form .ff-message-success {
	border: 1px solid var(--fr-line-4);
	border-radius: var(--fr-radius);
	background: var(--fr-mist);
	box-shadow: none;
	color: var(--fr-ink);
}

.fr-sessions-request__after {
	margin: 16px 0 0;
	font-size: 0.92em;
	line-height: 1.55;
	color: var(--fr-ink-3);
}

.fr-sessions-request__after a {
	color: var(--fr-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fr-sessions-request__after a:hover {
	color: var(--fr-mid-hover);
}

/* The regular price sits on its own line under the offer wherever the price is in a heading line. */
.fr-sessions-card__price .fr-sessions-price__regular,
.fr-sessions__sub .fr-sessions-price__regular {
	display: block;
	font-size: 0.9em;
}

.fr-sessions-card__price .fr-sessions-price__sep,
.fr-sessions__sub .fr-sessions-price__sep {
	display: none;
}

/* ----------------------------------------------------------
 * Homepage band, between the market band and "Browse our range".
 * ---------------------------------------------------------- */
.fr-sessions-band {
	background: var(--fr-mist);
}

.fr-sessions-band .col {
	padding-bottom: 0;
}

.fr-sessions-band .fr-sessions-band__title {
	margin: 0 0 12px;
	font-size: 2.1em;
	line-height: 1.15;
	color: var(--fr-deep);
}

.fr-sessions-band__text {
	max-width: 32em;
	margin: 0 0 14px;
	font-size: 1.05em;
	line-height: 1.6;
	color: var(--fr-ink);
}

.fr-sessions-band__list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.fr-sessions-band ul.fr-sessions-band__list,
.fr-sessions-band ul.fr-sessions-band__list li {
	margin-left: 0;
}

.fr-sessions-band__list li {
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--fr-line-3);
	line-height: 1.5;
	color: var(--fr-ink);
}

.fr-sessions-band__list li:last-child {
	border-bottom: 0;
}

.fr-sessions-band__name {
	display: block;
	font-weight: 700;
	color: var(--fr-deep);
}

.fr-sessions-band__photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: end;
}

.fr-sessions-band__photos .fr-sessions-photo:first-child {
	margin-bottom: 26px;
}

@media (max-width: 849px) {
	.fr-sessions-band__photos {
		max-width: 420px;
		margin: 26px auto 0;
	}
}

@media (max-width: 549px) {
	.fr-sessions-hero .fr-sessions__title {
		font-size: 1.9em;
	}

	.fr-sessions-band .fr-sessions-band__title {
		font-size: 1.7em;
	}

	.fr-sessions-card .col-inner,
	.fr-sessions__form {
		padding: 20px 18px 12px;
	}

	.fr-sessions-request__title {
		font-size: 1.5em;
	}

	.fr-sessions-hero .fr-sessions-photo {
		max-width: 260px;
		margin: 24px auto 0;
	}
}

/* ==========================================================
 * Polish pass, 2 Oct 2026 (later). Jeremy: "nice and clean" but "lacking"; "a bit like a funnel".
 * The landing pages now run: hero, sound familiar, what it is, how it goes, price, questions,
 * Leni, where and when, the request form, the other session. Same palette, same arch, same type.
 * Every section has one place for the eye to land: the quote cards, the pull line, the numbered
 * steps, the price card. Grounds alternate white and mist, with the forest band before the form.
 * ========================================================== */

/* Section headings: the script kicker from the flyer, then a plain forest heading. */
.fr-sessions-kicker {
	margin: 0 0 2px;
	font-family: var(--fr-font-accent);
	font-size: 1.7em;
	line-height: 1.2;
	color: var(--fr-mid);
}

.fr-sessions-h2 {
	margin: 0 0 14px;
	font-size: 2em;
	line-height: 1.18;
	color: var(--fr-deep);
}

.fr-sessions-h2--small {
	font-size: 1.45em;
}

.fr-sessions-intro {
	max-width: 38em;
	margin: 0 auto 8px;
	font-size: 1.1em;
	line-height: 1.6;
	color: var(--fr-ink);
}

/* Under the hero button: the one worry a first-time visitor has about a booking form. */
.fr-sessions__assure {
	margin: 14px 0 0;
	font-size: 0.92em;
	line-height: 1.5;
	color: var(--fr-ink-3);
}

/* "Introductory offer" pill, as on the October poster. Printed by [fr_sessions_offer] in October only. */
.fr-sessions-offer {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--fr-deep);
	color: var(--fr-on-deep);
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ----------------------------------------------------------
 * "Sound familiar?": the visitor's own words, one card each.
 * ---------------------------------------------------------- */
.section ul.fr-sessions-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.section ul.fr-sessions-quotes li {
	position: relative;
	margin: 0;
	padding: 50px 22px 22px;
	border-radius: var(--fr-radius-lg);
	background: var(--fr-mist);
	font-size: 1.08em;
	font-style: italic;
	line-height: 1.5;
	color: var(--fr-ink);
}

.section ul.fr-sessions-quotes li::before {
	content: "“";
	position: absolute;
	top: 10px;
	left: 18px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.6em;
	font-style: normal;
	line-height: 1;
	color: var(--fr-soft);
}

.fr-sessions-turn {
	max-width: 34em;
	margin: 30px auto 0;
	font-size: 1.25em;
	line-height: 1.5;
	color: var(--fr-ink);
}

.fr-sessions-turn strong {
	color: var(--fr-deep);
}

/* ----------------------------------------------------------
 * "What it is": the pull line, then a row of tiles.
 * ---------------------------------------------------------- */
.fr-sessions-what .col,
.fr-sessions-leave .col {
	padding-bottom: 0;
}

.fr-sessions-pull {
	max-width: 31em;
	margin: 4px auto 12px;
	font-size: 1.35em;
	line-height: 1.5;
	color: var(--fr-deep);
}

.fr-sessions-what__note {
	margin: 0;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fr-ink-2);
}

.fr-sessions-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
	margin: 26px 0 30px;
	text-align: left;
}

.fr-sessions-tile {
	padding: 22px 22px 8px;
	border: 1px solid var(--fr-line-3);
	border-top: 3px solid var(--fr-soft);
	border-radius: var(--fr-radius-lg);
	background: var(--fr-white);
}

.fr-sessions-tiles--plain .fr-sessions-tile {
	border-color: transparent;
	border-top-color: var(--fr-soft);
	background: var(--fr-mist);
}

.fr-sessions-tile .fr-sessions-tile__title {
	margin: 0 0 8px;
	font-size: 1.18em;
	line-height: 1.3;
	color: var(--fr-deep);
}

.fr-sessions-tile p {
	line-height: 1.6;
	color: var(--fr-ink);
}

/* ----------------------------------------------------------
 * "How it goes": numbered steps. A column on a phone, a row on a desk, joined by a line.
 * ---------------------------------------------------------- */
.section ol.fr-sessions-journey {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	max-width: 30em;
	margin: 28px auto 0;
	padding: 0;
	list-style: none;
	counter-reset: fr-step;
	text-align: left;
}

.section ol.fr-sessions-journey li {
	position: relative;
	min-height: 44px;
	margin: 0;
	padding: 0 0 0 60px;
	counter-increment: fr-step;
}

.section ol.fr-sessions-journey li::before {
	content: counter(fr-step);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--fr-deep);
	color: var(--fr-on-deep);
	font-size: 1.05em;
	font-weight: 700;
}

.section ol.fr-sessions-journey li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 48px;
	bottom: -16px;
	left: 21px;
	width: 2px;
	background: var(--fr-line-4);
}

.fr-sessions-journey__title {
	display: block;
	margin-bottom: 2px;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fr-deep);
}

.fr-sessions-journey__text {
	display: block;
	line-height: 1.55;
	color: var(--fr-ink);
}

@media (min-width: 850px) {
	.section ol.fr-sessions-journey {
		grid-template-columns: repeat(var(--fr-steps, 3), minmax(0, 1fr));
		gap: 22px;
		max-width: none;
		text-align: center;
	}

	.section ol.fr-sessions-journey--3 {
		--fr-steps: 3;
		max-width: 46em;
	}

	.section ol.fr-sessions-journey--5 {
		--fr-steps: 5;
	}

	.section ol.fr-sessions-journey li {
		padding: 58px 0 0;
	}

	.section ol.fr-sessions-journey li::before {
		left: 50%;
		transform: translateX(-50%);
	}

	.section ol.fr-sessions-journey li:not(:last-child)::after {
		top: 21px;
		bottom: auto;
		left: calc(50% + 30px);
		width: calc(100% - 60px + 22px);
		height: 2px;
	}
}

.fr-sessions-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 16px;
	margin: 32px 0 0;
}

.fr-sessions-cta .button {
	margin: 0;
}

.fr-sessions-cta__note {
	font-size: 0.95em;
	color: var(--fr-ink-3);
}

/* ----------------------------------------------------------
 * Price card beside the short list of things to know.
 * ---------------------------------------------------------- */
.fr-sessions-priceband .col {
	padding-bottom: 0;
}

.fr-sessions-pricecard {
	margin: 0 0 30px;
	padding: 30px 28px 24px;
	border: 1px solid var(--fr-line-3);
	border-radius: var(--fr-radius-lg);
	background: var(--fr-white);
	box-shadow: var(--fr-shadow-1);
	text-align: center;
}

.fr-sessions-pricecard .fr-sessions-offer {
	margin-bottom: 16px;
}

.fr-sessions-pricecard__name {
	margin: 0 0 4px;
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fr-deep);
}

.fr-sessions-pricecard__what {
	margin: 0 0 14px;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fr-ink-2);
}

.fr-sessions-pricecard__price {
	margin: 0 0 10px;
	line-height: 1.2;
}

.fr-sessions-pricecard__price .fr-sessions-price__now {
	display: block;
	font-size: 2.3em;
}

.fr-sessions-pricecard__price .fr-sessions-price__sep {
	display: none;
}

.fr-sessions-pricecard__price .fr-sessions-price__regular {
	display: block;
	margin-top: 6px;
	font-size: 1em;
}

.fr-sessions-pricecard__pay {
	margin: 0;
	color: var(--fr-ink);
}

.section ul.fr-sessions-ticks {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.section ul.fr-sessions-ticks li {
	position: relative;
	margin: 0;
	padding: 11px 0 11px 32px;
	border-bottom: 1px solid var(--fr-line-3);
	line-height: 1.5;
	color: var(--fr-ink);
}

.section ul.fr-sessions-ticks li:last-child {
	border-bottom: 0;
}

.section ul.fr-sessions-ticks li::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 4px;
	width: 13px;
	height: 7px;
	border-bottom: 2px solid var(--fr-mid);
	border-left: 2px solid var(--fr-mid);
	transform: rotate(-45deg);
}

/* ----------------------------------------------------------
 * Questions (the theme's accordion, as on the Contact page).
 * ---------------------------------------------------------- */
.fr-sessions-faq .fr-sessions-kicker,
.fr-sessions-faq .fr-sessions-h2 {
	text-align: center;
}

.fr-sessions-faq .accordion {
	margin-top: 22px;
}

.fr-sessions-faq .accordion-title {
	font-size: 1.05em;
	font-weight: 700;
	color: var(--fr-deep);
}

.fr-sessions-faq .accordion-title.active {
	background: transparent;
	color: var(--fr-deep);
}

.fr-sessions-faq .accordion-inner p {
	line-height: 1.6;
	color: var(--fr-ink);
}

.fr-sessions-faq .accordion-inner a {
	color: var(--fr-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----------------------------------------------------------
 * Leni: her portrait in the flyer's arch, and two lines.
 * ---------------------------------------------------------- */
.fr-sessions-leni .col {
	padding-bottom: 0;
}

.fr-sessions-leni .fr-sessions-photo {
	max-width: 230px;
	margin: 0 auto 24px;
}

.fr-sessions-photo--leni img {
	object-position: 50% 28%;
}

.fr-sessions-leni .fr-sessions-intro {
	margin-left: 0;
}

.fr-sessions-leni p {
	line-height: 1.6;
	color: var(--fr-ink);
}

.fr-sessions-leni__links a {
	font-weight: 700;
	color: var(--fr-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fr-sessions-leni__links a:hover {
	color: var(--fr-mid-hover);
}

/* ----------------------------------------------------------
 * Where and when, as one row of four facts above the form.
 * ---------------------------------------------------------- */
.fr-sessions-where .col {
	padding-bottom: 0;
}

.fr-sessions-where .fr-sessions-where__title {
	text-align: center;
}

.fr-sessions-where ul.fr-sessions-facts--row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: 0;
	padding: 4px 22px;
}

.fr-sessions-where ul.fr-sessions-facts--row li {
	margin: 0;
	padding: 14px 0;
}

@media (min-width: 850px) {
	.fr-sessions-where ul.fr-sessions-facts--row {
		grid-template-columns: 1fr 1.25fr 0.8fr 1.5fr;
		padding: 0;
	}

	.fr-sessions-where ul.fr-sessions-facts--row li {
		padding: 18px 22px;
		border-right: 1px solid var(--fr-on-deep-rule);
		border-bottom: 0;
	}

	.fr-sessions-where ul.fr-sessions-facts--row li:last-child {
		padding-bottom: 18px;
		border-right: 0;
	}
}

/* ----------------------------------------------------------
 * The request form's lead-in, and the link to the other session.
 * ---------------------------------------------------------- */
.fr-sessions-request__lead {
	margin: 0 0 6px;
	line-height: 1.6;
	color: var(--fr-ink);
}

.fr-sessions-request__stall,
.fr-sessions-request .fr-sessions__text-line {
	margin: 0;
	line-height: 1.6;
	color: var(--fr-ink-3);
}

.fr-sessions-request .fr-sessions__text-line a {
	color: var(--fr-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fr-sessions-next .col {
	padding-bottom: 0;
}

a.fr-sessions-other {
	position: relative;
	display: block;
	padding: 22px 64px 22px 26px;
	border: 1px solid var(--fr-line-4);
	border-radius: var(--fr-radius-lg);
	background: var(--fr-white);
	color: var(--fr-ink);
	text-decoration: none;
	transition: border-color var(--fr-dur-fast) var(--fr-ease), box-shadow var(--fr-dur-fast) var(--fr-ease);
}

a.fr-sessions-other:hover,
a.fr-sessions-other:focus-visible {
	border-color: var(--fr-mid);
	box-shadow: var(--fr-shadow-1);
	color: var(--fr-ink);
}

a.fr-sessions-other::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: 26px;
	transform: translateY(-50%);
	font-size: 1.6em;
	line-height: 1;
	color: var(--fr-mid);
}

.fr-sessions-other__label {
	display: block;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fr-ink-3);
}

.fr-sessions-other__name {
	display: block;
	margin: 2px 0 4px;
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fr-deep);
}

.fr-sessions-other__text {
	display: block;
	line-height: 1.55;
}

@media (max-width: 549px) {
	.fr-sessions-h2 {
		font-size: 1.6em;
	}

	.fr-sessions-pull {
		font-size: 1.18em;
	}

	.fr-sessions-turn {
		font-size: 1.12em;
	}

	.fr-sessions-pricecard {
		padding: 24px 20px 20px;
	}
}

/* Four quotes sit two by two (three and one left an orphan). */
@media (min-width: 550px) {
	.section ul.fr-sessions-quotes--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 46em;
		margin-left: auto;
		margin-right: auto;
	}
}

/* The four things in the bodywork hour, in Leni's own words, as a row of chips. */
.section ul.fr-sessions-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 18px 0 18px;
	padding: 0;
	list-style: none;
}

.section ul.fr-sessions-chips li {
	margin: 0;
	padding: 9px 18px;
	border: 1px solid var(--fr-line-4);
	border-radius: 999px;
	background: var(--fr-white);
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fr-deep);
}

/* The other-session link closes the white request section. */
.fr-sessions-next {
	padding-bottom: 56px !important;
}

/* ==========================================================
 * Version 3, 2 Oct 2026 (afternoon). Jeremy on v2: "plain and boring and just become wordy… you lose
 * focus and interest very quick"; he wanted "simple but modern", photos, "a vibe to the page and
 * story", and some motion. So: a photo or a moving thing in nearly every section, a third of the
 * words, and motion that is slow and quiet (a breath, a drift, things settling as you scroll).
 * Motion never hides anything: it moves things a little, and it is off for anyone who has asked their
 * device for less motion. The quote cards, tiles and five-step row from v2 are no longer placed on a
 * page; their rules above are left in case a later page wants them.
 * ========================================================== */

/* ----------------------------------------------------------
 * The "sound familiar?" moment: one dark band, one line, a few quiet phrases.
 * ---------------------------------------------------------- */
.fr-sessions-moment {
	overflow: hidden;
	text-align: center;
}

.fr-sessions-moment .col {
	padding-bottom: 0;
}

.fr-sessions-moment .col-inner {
	position: relative;
}

.fr-sessions-moment .fr-sessions-kicker {
	position: relative;
	color: var(--fr-on-deep-2);
}

.fr-sessions-moment .fr-sessions-moment__title {
	position: relative;
	margin-bottom: 22px;
	font-size: 2.7em;
	line-height: 1.12;
	color: var(--fr-on-deep);
}

.fr-sessions-moment__turn {
	position: relative;
	max-width: 30em;
	margin: 26px auto 0;
	font-size: 1.3em;
	line-height: 1.5;
	color: var(--fr-on-deep);
}

.section ul.fr-sessions-chips--quiet {
	position: relative;
	margin: 0;
}

.section ul.fr-sessions-chips--quiet li {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.08);
	font-style: italic;
	font-weight: 400;
	color: var(--fr-on-deep);
}

/* The breathing rings behind the bodywork page's line: three circles that open slowly and fade. */
.fr-sessions-breath {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
}

.fr-sessions-breath span {
	position: absolute;
	top: -210px;
	left: -210px;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
}

.fr-sessions-breath span:nth-child(1) { transform: scale(0.8); }
.fr-sessions-breath span:nth-child(2) { transform: scale(1.35); opacity: 0.7; }
.fr-sessions-breath span:nth-child(3) { transform: scale(1.9); opacity: 0.4; }

/* ----------------------------------------------------------
 * A photo beside a few words.
 * ---------------------------------------------------------- */
.fr-sessions-split .col {
	padding-bottom: 0;
}

.fr-sessions-split__photo .fr-sessions-photo {
	max-width: 400px;
	margin: 0 auto 28px;
}

.fr-sessions-photo--towel img { object-position: 50% 40%; }
.fr-sessions-photo--stall img { object-position: 60% 30%; }
.fr-sessions-photo--jar img { object-position: 50% 50%; }

.fr-sessions-split__text .fr-sessions-h2 {
	font-size: 2.2em;
}

.fr-sessions-split__text ul.fr-sessions-chips {
	justify-content: flex-start;
	margin: 6px 0 14px;
}

.fr-sessions-split__text ul.fr-sessions-chips li {
	padding: 7px 15px;
	background: var(--fr-mist);
	font-size: 0.98em;
}

.fr-sessions-split__text ul.fr-sessions-ticks {
	margin-bottom: 26px;
}

.fr-sessions-split__text ul.fr-sessions-ticks li {
	font-size: 1.08em;
}

.fr-sessions-split__cta {
	margin: 0 0 28px;
}

.fr-sessions-split__cta .button {
	margin: 0;
}

@media (min-width: 850px) {
	.fr-sessions-split--flip .row {
		flex-direction: row-reverse;
	}

	.fr-sessions-split__photo .fr-sessions-photo {
		margin-bottom: 0;
	}

	.fr-sessions-split__text > .col-inner {
		padding: 0 10px 0 24px;
	}

	.fr-sessions-split--flip .fr-sessions-split__text > .col-inner {
		padding: 0 24px 0 10px;
	}
}

/* ----------------------------------------------------------
 * The price card, beside who the session is with.
 * ---------------------------------------------------------- */
.fr-sessions-pricecard__button {
	margin: 18px 0 0;
}

.fr-sessions-pricecard__button .button {
	margin: 0;
}

.fr-sessions-with > .col-inner {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	column-gap: 24px;
	align-items: center;
	margin-bottom: 30px;
}

.fr-sessions-with .fr-sessions-photo {
	grid-row: 1 / span 3;
	width: 132px;
	margin: 0;
}

.fr-sessions-with .fr-sessions-kicker {
	align-self: end;
	font-size: 1.45em;
}

.fr-sessions-with .fr-sessions-h2 {
	margin-bottom: 6px;
}

.fr-sessions-with .fr-sessions-intro {
	align-self: start;
	margin: 0;
	font-size: 1.02em;
}

/* ----------------------------------------------------------
 * The other session: a small arch photo, then the words.
 * ---------------------------------------------------------- */
a.fr-sessions-other {
	display: flex;
	align-items: center;
	gap: 20px;
}

.fr-sessions-other__thumb {
	flex: 0 0 auto;
	width: 76px;
	height: 95px;
	border-radius: 999px 999px 6px 6px;
	object-fit: cover;
}

.fr-sessions-other__words {
	display: block;
	min-width: 0;
}

/* ----------------------------------------------------------
 * Cards that answer the hand: a small lift, and the photo leans in.
 * ---------------------------------------------------------- */
.fr-sessions-card .col-inner {
	transition: transform var(--fr-dur) var(--fr-ease), box-shadow var(--fr-dur) var(--fr-ease), border-color var(--fr-dur) var(--fr-ease);
}

.fr-sessions-card .fr-sessions-photo img,
.fr-sessions-split__photo .fr-sessions-photo img {
	transition: transform var(--fr-dur-slow) var(--fr-ease);
}

@media (hover: hover) {
	.fr-sessions-card .col-inner:hover {
		border-color: var(--fr-line-4);
		box-shadow: var(--fr-shadow-1);
		transform: translateY(-4px);
	}

	.fr-sessions-card .col-inner:hover .fr-sessions-photo img,
	.fr-sessions-split__photo .fr-sessions-photo:hover img {
		transform: scale(1.04);
	}
}

/* The outline behind the hero photo. Still by default; it breathes when motion is welcome. */
.fr-sessions-photo--halo {
	position: relative;
}

.fr-sessions-photo--halo::before {
	content: "";
	position: absolute;
	inset: -12px;
	border: 1px solid var(--fr-soft);
	border-radius: 999px 999px 16px 16px;
	pointer-events: none;
}

/* ----------------------------------------------------------
 * Motion. Slow, small, and only for people who have not asked for less.
 * Nothing here changes whether something can be seen: it only moves it.
 * ---------------------------------------------------------- */
@keyframes fr-breath {
	0% { transform: scale(0.55); opacity: 0; }
	18% { opacity: 1; }
	100% { transform: scale(2.1); opacity: 0; }
}

@keyframes fr-halo {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.035); }
}

@keyframes fr-drift {
	from { transform: scale(1); }
	to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
}

@keyframes fr-rise {
	from { transform: translate3d(0, 38px, 0); }
	to { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.fr-sessions-breath span {
		opacity: 0;
		animation: fr-breath 10.5s cubic-bezier(0.3, 0.1, 0.4, 1) infinite;
	}

	.fr-sessions-breath span:nth-child(2) { animation-delay: 3.5s; }
	.fr-sessions-breath span:nth-child(3) { animation-delay: 7s; }

	.fr-sessions-photo--halo::before {
		animation: fr-halo 7s ease-in-out infinite;
	}

	/* The photo behind the consultation's line drifts very slowly. */
	.fr-sessions-moment--photo .section-bg {
		animation: fr-drift 28s ease-in-out infinite alternate;
		transform-origin: 50% 60%;
	}

	/* Things settle into place as they scroll into view, where the browser can tie motion to scrolling. */
	@supports (animation-timeline: view()) {
		.fr-rise,
		.section ol.fr-sessions-journey li {
			animation: fr-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}

		.section ol.fr-sessions-journey li:nth-child(2) { animation-range: entry 12% entry 67%; }
		.section ol.fr-sessions-journey li:nth-child(3) { animation-range: entry 24% entry 79%; }
	}
}

@media (max-width: 549px) {
	.fr-sessions-moment .fr-sessions-moment__title {
		font-size: 1.9em;
	}

	.fr-sessions-moment__turn {
		font-size: 1.12em;
	}

	.fr-sessions-split__text .fr-sessions-h2 {
		font-size: 1.7em;
	}

	.fr-sessions-with > .col-inner {
		grid-template-columns: 104px minmax(0, 1fr);
		column-gap: 16px;
	}

	.fr-sessions-with .fr-sessions-photo {
		width: 104px;
	}

	a.fr-sessions-other {
		padding: 18px 46px 18px 18px;
		gap: 14px;
	}

	a.fr-sessions-other::after {
		right: 16px;
	}
}

/* ==========================================================
 * Final pass, 2 Oct 2026 (late afternoon), before Leni's review. Small things only:
 * lines that broke badly, a lead-in above the form, a slightly larger portrait beside the
 * price, and the last of the motion (the hero arriving, the phrases and facts settling).
 * ========================================================== */

/* Headings and short lines break evenly instead of leaving one word alone. */
.fr-sessions__title,
.fr-sessions-h2,
.fr-sessions-moment__turn,
.fr-sessions-turn,
.fr-sessions-journey__title,
.fr-sessions-journey__text,
.fr-sessions-card__title,
.fr-sessions-pricecard__name,
.fr-sessions-other__name {
	text-wrap: balance;
}

.fr-sessions__lead,
.fr-sessions-intro,
.fr-sessions-other__text {
	text-wrap: pretty;
}

/* On a desk the three steps sit side by side, so each line is kept short; on a phone it runs the full width. */
@media (min-width: 850px) {
	.fr-sessions-journey__text {
		max-width: 17em;
		margin-left: auto;
		margin-right: auto;
	}
}

/* The lead-in above "Request a time". */
.fr-sessions-request .fr-sessions-kicker {
	margin-bottom: 0;
}

/* Leni beside the price: a little larger. */
.fr-sessions-with > .col-inner {
	grid-template-columns: 156px minmax(0, 1fr);
	column-gap: 26px;
}

.fr-sessions-with .fr-sessions-photo {
	width: 156px;
}

@media (max-width: 549px) {
	.fr-sessions-with > .col-inner {
		grid-template-columns: 112px minmax(0, 1fr);
		column-gap: 16px;
	}

	.fr-sessions-with .fr-sessions-photo {
		width: 112px;
	}
}

/* ----------------------------------------------------------
 * Motion, last additions. Same rules as before: it moves things, it never hides them,
 * and it is off for anyone who has asked for less motion.
 * ---------------------------------------------------------- */
@keyframes fr-arrive {
	from { transform: translate3d(0, 16px, 0); }
	to { transform: none; }
}

@keyframes fr-arrive-photo {
	from { transform: translate3d(0, 22px, 0) scale(0.975); }
	to { transform: none; }
}

@keyframes fr-settle {
	from { transform: translate3d(0, 14px, 0) scale(0.95); }
	to { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	/* The hero arrives: the words step up one after another, the photo last. */
	.fr-sessions-hero .col:first-child > .col-inner > * {
		animation: fr-arrive 0.8s var(--fr-ease) both;
	}

	.fr-sessions-hero .col:first-child > .col-inner > :nth-child(2) { animation-delay: 0.06s; }
	.fr-sessions-hero .col:first-child > .col-inner > :nth-child(3) { animation-delay: 0.12s; }
	.fr-sessions-hero .col:first-child > .col-inner > :nth-child(4) { animation-delay: 0.18s; }
	.fr-sessions-hero .col:first-child > .col-inner > :nth-child(5) { animation-delay: 0.24s; }
	.fr-sessions-hero .col:first-child > .col-inner > :nth-child(n + 6) { animation-delay: 0.3s; }

	.fr-sessions-hero .fr-sessions-photo .img-inner {
		animation: fr-arrive-photo 1.1s var(--fr-ease) 0.1s both;
	}

	@supports (animation-timeline: view()) {
		/* The quiet phrases settle one after another; so do the four facts and the words beside a photo. */
		.section ul.fr-sessions-chips li,
		.fr-sessions-where ul.fr-sessions-facts--row li,
		.fr-sessions-split__text > .col-inner,
		.fr-sessions-with > .col-inner {
			animation: fr-settle linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}

		.section ul.fr-sessions-chips li:nth-child(2),
		.fr-sessions-where ul.fr-sessions-facts--row li:nth-child(2) { animation-range: entry 8% entry 68%; }
		.section ul.fr-sessions-chips li:nth-child(3),
		.fr-sessions-where ul.fr-sessions-facts--row li:nth-child(3) { animation-range: entry 16% entry 76%; }
		.section ul.fr-sessions-chips li:nth-child(4),
		.fr-sessions-where ul.fr-sessions-facts--row li:nth-child(4) { animation-range: entry 24% entry 84%; }

		.fr-sessions-split__text > .col-inner {
			animation-name: fr-rise;
			animation-range: entry 10% entry 70%;
		}
	}
}

/* ==========================================================
 * Stockists & wholesale (/stockists/), 2 Oct 2026 (evening).
 * That page is built from the pieces above (the mist hero, the kicker, the cards, the tick lists,
 * the form card, the same motion) and from the market band in fr-site.css. This block holds only
 * what those did not already have. inc/stockists-page.php asks for this file on that page.
 * To undo: delete this block and inc/stockists-page.php.
 * ========================================================== */

/* The market-stall photo is wide; the arch shows its right-hand third. */
.fr-stockists-photo--stall img {
	object-position: 88% 50%;
}

.fr-stockists-photo--range img {
	object-position: 50% 62%;
}

/* Two buttons in the hero: a gap between them when they wrap on a phone. */
.fr-stockists-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 22px 0 0;
}

.fr-stockists-hero__buttons .button {
	margin: 0;
}

/* The two headings the hero buttons jump to stop clear of the sticky header. */
.fr-stockists-list .fr-sessions-h2,
.fr-stockists-wholesale .fr-sessions-h2 {
	scroll-margin-top: 120px;
}

/* The shops: the session card, without a photo, with a pin beside the town. */
.fr-stockists-card .col-inner {
	border-top: 3px solid var(--fr-soft);
}

.fr-stockists-card .fr-sessions__meta {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 8px;
}

.fr-stockists-card .fr-sessions__meta::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background-color: var(--fr-mid);
	-webkit-mask: var(--fr-pin) center / contain no-repeat;
	mask: var(--fr-pin) center / contain no-repeat;
	--fr-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}

.fr-stockists-card .fr-sessions-card__title {
	margin-bottom: 8px;
}

.section .fr-stockists-card ul.fr-sessions-ticks {
	margin-bottom: 0;
}

.fr-stockists-card .fr-sessions-ticks a,
.fr-stockists-note a {
	color: var(--fr-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fr-stockists-card .fr-sessions-ticks a:hover,
.fr-stockists-note a:hover {
	color: var(--fr-mid-hover);
}

.fr-stockists-note {
	margin: 0;
	line-height: 1.6;
	color: var(--fr-ink-3);
}

.fr-stockists-list .row:last-child .col {
	padding-bottom: 0;
}

/* The market Saturdays: the homepage's band, made slim. One line, then the days side by side on a desk. */
.fr-stockists-market .col {
	padding-bottom: 0;
}

.fr-market.fr-stockists-market .fr-market__title {
	margin-bottom: 18px;
	font-size: 1.6em;
	text-align: center;
	text-wrap: balance;
}

@media (min-width: 850px) {
	.fr-market.fr-stockists-market ul.fr-find-us {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		padding: 0;
	}

	.fr-market.fr-stockists-market .fr-find-us li {
		margin: 0;
		padding: 18px 22px;
		border-right: 1px solid var(--fr-on-deep-rule);
		border-bottom: 0;
	}

	.fr-market.fr-stockists-market .fr-find-us li:last-child {
		border-right: 0;
	}
}

/* Stocking the range: a small arch and a few words beside the enquiry form. */
.fr-stockists-wholesale__words .fr-sessions-photo {
	max-width: 220px;
	margin: 0 auto 22px;
}

.fr-stockists-wholesale__words .fr-sessions-intro {
	margin-left: 0;
}

.section .fr-stockists-wholesale__words ul.fr-sessions-ticks {
	margin-bottom: 26px;
}

@media (min-width: 850px) {
	.fr-stockists-wholesale__words .fr-sessions-photo {
		max-width: 280px;
		margin-left: 0;
	}

	.fr-stockists-wholesale__words > .col-inner {
		padding-right: 24px;
	}
}

@media (max-width: 549px) {
	.fr-market.fr-stockists-market .fr-market__title {
		font-size: 1.35em;
	}
}

/*
 * The enquiry form's error lines and required stars. Fluent Forms' own red is pale: 2.9:1 on white at
 * 12px (measured 2 Oct). They only show after a send that failed, so check-contrast.mjs never sees
 * them. Darker on this form only (6.5:1); the session and Contact forms still carry the pale red, and
 * the same line on .fr-sessions__form would fix the session form. fr-tokens.css has no red yet, so the
 * one value is written here. A field with an error also gets its border back (the rule above that
 * colours every field's border outranked Fluent Forms' own).
 */
.fr-wholesale__form {
	--fluentform-danger: #b3261e;
}

.fr-wholesale__form .frm-fluent-form .ff-el-is-error .text-danger {
	font-size: 13px;
}

.fr-wholesale__form .frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: var(--fluentform-danger);
}