/*
Theme Name: Resurs Child Theme
Theme URI: https://resurs.themerex.net/
Description: Resurs is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins.
Author: ThemeREX
Author URI: https://themerex.net/
Version: 1.11.0
Tested up to: 6.6
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
Text Domain: resurs
Template: resurs
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */

/* Appleby design system
==============================================================
Colours, fonts and radii come from the parent theme's CSS custom properties,
so a skin change or a customizer edit carries through here untouched. The only
values defined locally are the spacing rhythm and the section-band tones. */

.appleby_page {
	--appleby-gap: clamp(1rem, 2.5vw, 2rem);
	--appleby-band: clamp(3.5rem, 8vw, 7rem);
	--appleby-radius: var(--theme-var-rad, 12px);
	--appleby-card-bd: var(--theme-color-bd_color);
	--appleby-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -12px rgba(0, 0, 0, .12);
}

/* The parent theme applies border-box per selector rather than globally, so
   anything it does not name inherits content-box and adds its padding outside
   its width. That has now bitten three times - the lightbox dialog, the
   full-screen hero, and the closing CTA panel, which computed 359px of width
   plus 51px of padding and ran 19px off the right of a 393px phone. Declared
   once for the child theme's own components instead of patched per element;
   scoped to appleby_ classes so nothing the parent or a plugin renders inside
   a page is touched. */
.appleby_page [class*="appleby_"],
.appleby_page [class*="appleby_"]:before,
.appleby_page [class*="appleby_"]:after {
	box-sizing: border-box;
}

/* Bands ---------------------------------------------------- */

.appleby_page .appleby_section {
	padding: var(--appleby-band) 0;
	background-color: var(--theme-color-bg_color);
	color: var(--theme-color-text);
}

.appleby_page .appleby_inner {
	width: min(var(--theme-var-page, 1290px), 100% - 2 * var(--appleby-gap));
	margin-inline: auto;
}

.appleby_page .appleby_tone_alt {
	background-color: var(--theme-color-alter_bg_color);
	color: var(--theme-color-alter_text);
}

/* Dark band ------------------------------------------------
Carries "Why choose" and "How treatment works" on every page. Both keep the
card treatment and the staggered entrance; what they no longer have is a dark
surface, so the band now sits on the theme's own alternate tone.

Two soft sage washes sit behind the content - enough depth that the band reads
as a distinct feature rather than another flat panel, and cheap enough to cost
no extra request. */

.appleby_page .appleby_tone_feature {
	--appleby-feature-accent: var(--theme-color-alter_link, #909C87);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: calc(var(--appleby-band) * 1.15);
	background-color: var(--theme-color-alter_bg_color);
	color: var(--theme-color-alter_text);
}

.appleby_page .appleby_tone_feature:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60rem 32rem at 12% -10%, rgba(144, 156, 135, .20), transparent 65%),
		radial-gradient(48rem 28rem at 105% 110%, rgba(144, 156, 135, .13), transparent 60%);
}

/* A hairline of accent along the top edge, so the band starts deliberately
   rather than just changing colour. */
.appleby_page .appleby_tone_feature:after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--appleby-feature-accent), transparent);
	opacity: .8;
}


.appleby_page .appleby_tone_feature .appleby_section_title {
	color: var(--theme-color-alter_dark);
	font-size: clamp(1.85rem, 3.6vw, 2.75rem);
	line-height: 1.15;
	text-wrap: balance;
}

.appleby_page .appleby_tone_feature .appleby_section_intro {
	color: var(--theme-color-text_light);
}

.appleby_page .appleby_tone_feature a {
	color: var(--theme-color-text_link);
}

/* Reveal on scroll -----------------------------------------
The hidden start state is gated on .appleby-reveal-ready, which appleby.js adds
only once it has an IntersectionObserver to reveal them with. No script, no
observer, or reduced motion: the items simply render. */

.appleby-reveal-ready .appleby_page [data-appleby-reveal] > li {
	opacity: 0;
	transform: translateY(1.75rem);
}

.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible > li {
	opacity: 1;
	transform: none;
	transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}

.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible > li:nth-child(2) { transition-delay: .08s; }
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible > li:nth-child(3) { transition-delay: .16s; }
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible > li:nth-child(4) { transition-delay: .24s; }
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible > li:nth-child(5) { transition-delay: .32s; }
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible > li:nth-child(6) { transition-delay: .40s; }
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible > li:nth-child(7) { transition-delay: .48s; }
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible > li:nth-child(n+8) { transition-delay: .56s; }

.appleby_page .appleby_width_narrow .appleby_inner {
	max-width: 46rem;
}

.appleby_page .appleby_width_full .appleby_inner {
	width: 100%;
	max-width: none;
}

/* The slider is edge-to-edge and brings its own height. */
.appleby_page .appleby_slider {
	padding: 0;
}

.appleby_page .appleby_align_center {
	text-align: center;
}

.appleby_page .appleby_align_center .appleby_buttons {
	justify-content: center;
}

/* Headings and rhythm -------------------------------------- */

.appleby_page .appleby_section_title {
	margin: 0 0 .5em;
}

.appleby_page .appleby_section_intro {
	max-width: 46rem;
	margin: 0 0 2em;
	color: var(--theme-color-text_light);
}

.appleby_page .appleby_section > .appleby_inner > p:last-child,
.appleby_page .appleby_section > .appleby_inner > ul:last-child,
.appleby_page .appleby_section > .appleby_inner > ol:last-child {
	margin-bottom: 0;
}

/* Buttons -------------------------------------------------- */

.appleby_page .appleby_buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 2rem 0 0;
}

.appleby_page .appleby_button {
	/* 48px min target: comfortable on touch, per WCAG 2.1 target size. */
	min-height: 48px;
	padding: .75em 2em;
	justify-content: center;
	text-align: center;
}

.appleby_page .appleby_button_secondary {
	background-color: transparent;
	color: var(--theme-color-text_dark);
	box-shadow: inset 0 0 0 2px var(--theme-color-bd_color);
}

.appleby_page .appleby_button_secondary:hover,
.appleby_page .appleby_button_secondary:focus-visible {
	background-color: var(--theme-color-text_dark);
	color: #fff;
	box-shadow: inset 0 0 0 2px var(--theme-color-text_dark);
}

/* Hero ----------------------------------------------------- */

.appleby_page .appleby_hero {
	padding-block: calc(var(--appleby-band) * 1.1);
	background-color: var(--theme-color-alter_bg_color);
	color: var(--theme-color-alter_text);
}

.appleby_page .appleby_hero .appleby_inner {
	max-width: 52rem;
}

.appleby_page .appleby_hero_eyebrow {
	margin: 0 0 1rem;
	color: var(--theme-color-text_link);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .8rem;
}

.appleby_page .appleby_hero_title {
	margin: 0;
	color: var(--theme-color-alter_dark);
	text-wrap: balance;
}

.appleby_page .appleby_hero_lead {
	margin: 1rem 0 0;
	font-size: 1.15rem;
	line-height: 1.6;
}

.appleby_page .appleby_hero.appleby_size_large {
	padding-block: calc(var(--appleby-band) * 1.4);
}

.appleby_page .appleby_hero.appleby_size_large .appleby_hero_title {
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	line-height: 1.08;
}

/* Photo banner hero ----------------------------------------
The picture is absolutely positioned against the band - it is the only
positioned ancestor - so it fills the full bleed while the copy stays inside
the page container. A scrim from the bottom left keeps the text legible
wherever the crop lands. */

.appleby_page .appleby_hero.appleby_tone_banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: min(60vh, 34rem);
	padding-block: calc(var(--appleby-band) * 1.25);
	background-color: #141414;
	color: rgba(255, 255, 255, .82);
}

/* The legibility scrim.

   Not the full-image wash that was removed: this one is anchored to the foot
   of the band, where the copy sits, and has faded out entirely by the top of
   it - so the photograph is still a photograph for two thirds of its height.

   It is not decoration. The heading and lead are white, and half the clinic
   photographs are of a bright room, a made-up couch or a window: without it,
   "Sports Massage" over a white pillow fails 1.4.3 outright, and which
   photograph a page happens to carry is not something the copy can depend on.

   Painted between the picture and the copy: both this and .appleby_hero_media
   sit at z-index -1 inside the band's own stacking context, and equal z-index
   is resolved by tree order, so the later of the two - this one - is on top. */
.appleby_page .appleby_hero.appleby_tone_banner:after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 78%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(10, 12, 9, .88) 0%, rgba(10, 12, 9, .70) 30%, rgba(10, 12, 9, .30) 66%, rgba(10, 12, 9, 0) 100%);
}

.appleby_page .appleby_hero_media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.appleby_page .appleby_hero_media picture,
.appleby_page .appleby_hero_media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

.appleby_page .appleby_hero.appleby_tone_banner .appleby_inner {
	width: min(var(--theme-var-page, 1290px), 100% - 2 * var(--appleby-gap));
	max-width: 52rem;
	margin-inline: auto;
}

.appleby_page .appleby_tone_banner .appleby_hero_eyebrow {
	color: var(--theme-color-alter_link, #909C87);
}

.appleby_page .appleby_tone_banner .appleby_hero_title {
	color: #fff;
	font-size: clamp(2.1rem, 5vw, 3.5rem);
	line-height: 1.1;
}

.appleby_page .appleby_tone_banner .appleby_hero_lead {
	color: rgba(255, 255, 255, .82);
	max-width: 42rem;
}

/* Header ---------------------------------------------------
The two header layouts differ: the home page puts the logo in its own column
with the menu right-aligned beside it, while the inner-page layout keeps the
logo and the menu together in one left-aligned column, so the tabs sit hard
against the logo. Pushing the menu to the end of its column lines the two up.

Only the menu is moved. The home header's left column holds two logo widgets
(standard and sticky), and space-between would have thrown those to opposite
edges; an auto margin on the menu cannot affect a column that has no menu. */

@media (min-width: 1024px) {
	.top_panel .sc_layouts_column_align_left > .elementor-widget-wrap {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.top_panel .sc_layouts_column_align_left > .elementor-widget-wrap > .elementor-widget-trx_sc_layouts_menu {
		margin-left: auto;
		margin-right: 0;
	}
}

/* Logo -----------------------------------------------------
The wordmark ships as black artwork. The theme marks dark surfaces with
scheme_dark - the overlay header on the home page, the mobile menu panel, the
search overlay - so invert it there rather than pinning a variant per page.
Inverting pure black gives pure white and leaves the alpha channel alone. */

.scheme_dark .logo_image,
.scheme_dark .sc_layouts_logo img,
.menu_mobile .logo_image {
	filter: invert(1);
}

/* Size. Each of the header's three logo widgets - standard, sticky, phone -
   carries its own cap in the layout's Elementor data (60px, 50px, 40px), and
   at 60px the wordmark reads lighter than the menu beside it. The artwork is
   420x148, so it has the resolution to carry the header's optical weight.

   Sized per row rather than per widget id: the rows are what the layout swaps
   between, so .sc_layouts_row_fixed and .sc_layouts_hide_on_desktop are stable
   hooks where an Elementor element id is not, and the layout's own hide-on
   classes already do the breakpoint switching - no media queries needed.

   The cap is the one declaration that has to be forced. Elementor emits it as
   `.elementor-<page> .elementor-element.elementor-element-<id> .logo_image`,
   four classes, which no reasonable selector here outranks. Nothing declares
   `height`, so that one lands on specificity alone. */

.top_panel .sc_layouts_row img.logo_image {
	max-height: none !important;
	height: 84px;
	width: auto;
}

/* The theme shrinks the logo as the row sticks; keep that, just proportionally. */
.top_panel .sc_layouts_row_fixed img.logo_image {
	height: 62px;
}

.top_panel .sc_layouts_hide_on_desktop img.logo_image {
	height: 52px;
}

/* Slider --------------------------------------------------- */

.appleby_page .appleby_slider_track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.appleby_page .appleby_slider_track::-webkit-scrollbar {
	display: none;
}

.appleby_page .appleby_slider_slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	line-height: 0;
}

.appleby_page .appleby_slider_slide picture {
	display: block;
}

.appleby_page .appleby_slider_slide img {
	display: block;
	width: 100%;
	/* Full-viewport slides. The header is position_over, so it floats on top
	   and no height needs subtracting. svh tracks the phone browser chrome, so
	   the slide does not jump as the address bar hides; vh is the fallback. */
	height: 100vh;
	height: 100svh;
	object-fit: cover;
	/* Default focal band; slides override it per photo so the signage never
	   crops off the top when the viewport is wider than the 3:2 source. */
	object-position: center 45%;
}

.appleby_page .appleby_slider_widget {
	position: relative;
}

.appleby_page .appleby_slider_dots {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	display: flex;
	gap: .5rem;
	margin: 0;
	padding: .5rem .75rem;
	border-radius: 999px;
	background-color: rgba(0, 0, 0, .35);
	list-style: none;
}

.appleby_page .appleby_slider_dot {
	display: block;
	/* 44px hit area around a 10px dot: tappable without looking heavy. */
	width: 44px;
	height: 44px;
	position: relative;
}

.appleby_page .appleby_slider_dot:before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .55);
	transition: background-color .2s ease, transform .2s ease;
}

.appleby_page .appleby_slider_dot.is-current:before,
.appleby_page .appleby_slider_dot:hover:before {
	background-color: #fff;
	transform: scale(1.3);
}

/* Split: copy beside a photograph ---------------------------
A prose band given a 'media' image lays out as two columns rather than one.

The photograph is positioned absolutely inside its figure on wide screens, so
it contributes no intrinsic height of its own: the row is sized by the copy,
and the picture then fills exactly the box that leaves. Whichever column has
more in it, the two always finish level - which is the point of the layout, and
what an inline <img> beside a paragraph cannot give you.

The min-height is what stops a short paragraph from squashing the photograph
into a letterbox on a wide screen.

Below the two-column breakpoint the figure goes back to a normal block and the
picture to its natural aspect ratio - stacked, it has nothing left to line up
with, so cropping it to a fixed box would only throw away parts of the frame
for no reason. */

.appleby_page .appleby_split {
	display: grid;
	gap: 2rem;
}

.appleby_page .appleby_split_body > :last-child {
	margin-bottom: 0;
}

.appleby_page .appleby_split_media {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--appleby-radius);
	background-color: var(--theme-color-alter_bg_color);
	box-shadow: var(--appleby-shadow);
}

.appleby_page .appleby_split_media img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.appleby_page .appleby_split_media:hover img {
	transform: scale(1.03);
}

/* The credential line over the foot of the photograph. The scrim is part of
   the caption rather than a second element, so there is nothing to keep in
   step with it. */
.appleby_page .appleby_split_caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 3.5rem 1.25rem 1.1rem;
	background: linear-gradient(to top, rgba(8, 10, 6, .82), rgba(8, 10, 6, 0));
	color: #fff;
	font-size: .8125rem;
	line-height: 1.45;
	letter-spacing: .02em;
	text-align: center;
}

@media (min-width: 1024px) {
	.appleby_page .appleby_split {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
		align-items: stretch;
	}

	/* Copy sits centred in whatever height the row settles at. */
	.appleby_page .appleby_split_body {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.appleby_page .appleby_split_media {
		min-height: clamp(22rem, 34vw, 34rem);
	}

	.appleby_page .appleby_split_media picture,
	.appleby_page .appleby_split_media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Photograph on the left. DOM order is untouched, so the heading is still
	   what comes first in reading order. */
	.appleby_page .appleby_split_left .appleby_split_media {
		order: -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.appleby_page .appleby_split_media img {
		transition: none;
	}

	.appleby_page .appleby_split_media:hover img {
		transform: none;
	}
}

/* Gallery -------------------------------------------------- */

.appleby_page .appleby_gallery_items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--appleby-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.appleby_page .appleby_gallery_item {
	overflow: hidden;
	border-radius: var(--appleby-radius);
	line-height: 0;
}

.appleby_page .appleby_gallery_item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .4s ease;
}

.appleby_page .appleby_gallery_item:hover img {
	transform: scale(1.04);
}

/* The whole tile is the link, so it fills the tile. */
.appleby_page .appleby_gallery_link {
	display: block;
	height: 100%;
	cursor: zoom-in;
}

/* Gallery lightbox ----------------------------------------- */

/* Built by appleby.js and appended to <body>, so it sits outside .appleby_page
   and cannot read the page's custom properties - the values here are literal.

   The dialog is the whole overlay, not a panel floating in one: it fills the
   viewport so the arrows have somewhere to sit and the padding around the photo
   is itself a way out. */
.appleby_lightbox {
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;
	max-width: 100vw;
	max-height: 100vh;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 3rem;
	/* The theme applies border-box per selector, not globally, so a dialog
	   inherits content-box: without this the padding is added outside 100vw and
	   the close and next buttons sit off the right of the screen. */
	box-sizing: border-box;
	border: 0;
	background: none;
	cursor: zoom-out;
	overflow: hidden;
}

.appleby_lightbox::backdrop {
	background-color: rgba(12, 14, 11, .82);
	backdrop-filter: blur(4px);
}

/* display lives on [open] only: a plain 'display: flex' would beat the browser's
   own dialog:not([open]) { display: none } and leave the overlay on the page. */
.appleby_lightbox[open] {
	display: flex;
	animation: appleby-fade-in .28s ease;
}

.appleby_lightbox[open]::backdrop {
	animation: appleby-fade-in .28s ease;
}

.appleby_lightbox_figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	/* Same entrance as the service dialog: one motion language for both. */
	animation: appleby-modal-in .32s cubic-bezier(.22, .61, .36, 1);
}

.appleby_lightbox_image {
	display: block;
	max-width: 100%;
	/* The overlay's 3rem padding top and bottom, plus room for the caption, so a
	   short laptop viewport does not push the caption out of the frame. */
	max-height: calc(100vh - 12rem);
	width: auto;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .6);
	/* The photo is the one thing in here that is not a way out. */
	cursor: default;
}

.appleby_lightbox_caption {
	max-width: 44rem;
	margin-top: 1.1rem;
	color: rgba(255, 255, 255, .92);
	font-size: .95rem;
	line-height: 1.5;
	text-align: center;
	cursor: default;
}

.appleby_lightbox_close,
.appleby_lightbox_nav {
	position: absolute;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .16);
	color: #fff;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.appleby_lightbox_close {
	top: 1.25rem;
	right: 1.5rem;
	width: 46px;
	height: 46px;
	font-size: 1.75rem;
}

.appleby_lightbox_close:hover,
.appleby_lightbox_close:focus-visible {
	background-color: var(--theme-color-text_link, #909C87);
	transform: rotate(90deg);
}

.appleby_lightbox_nav {
	top: 50%;
	width: 52px;
	height: 52px;
	font-size: 1.25rem;
	transform: translateY(-50%);
}

.appleby_lightbox_prev {
	left: 1.5rem;
}

.appleby_lightbox_next {
	right: 1.5rem;
}

.appleby_lightbox_nav:hover,
.appleby_lightbox_nav:focus-visible {
	background-color: var(--theme-color-text_link, #909C87);
}

/* A gallery of one has nothing to step to. */
.appleby_lightbox.is-single .appleby_lightbox_nav {
	display: none;
}

.appleby_lightbox_close:focus-visible,
.appleby_lightbox_nav:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.appleby_lightbox {
		padding: 1rem;
	}

	.appleby_lightbox_image {
		max-height: calc(100vh - 8rem);
	}

	.appleby_lightbox_close {
		top: .75rem;
		right: .75rem;
		width: 40px;
		height: 40px;
	}

	.appleby_lightbox_nav {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}

	.appleby_lightbox_prev {
		left: .5rem;
	}

	.appleby_lightbox_next {
		right: .5rem;
	}
}

/* Motion out, feedback in: the fades stay, the scale goes. */
@media (prefers-reduced-motion: reduce) {
	.appleby_lightbox_figure {
		animation: appleby-fade-in .28s ease;
	}

	.appleby_lightbox_close:hover,
	.appleby_lightbox_close:focus-visible {
		transform: none;
	}
}

/* Credentials strip ---------------------------------------- */

.appleby_page .appleby_credentials_items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--appleby-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.appleby_page .appleby_credentials_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	padding: 1.75rem 1rem;
	border-radius: var(--appleby-radius);
	background-color: var(--theme-color-alter_bg_color);
	text-align: center;
}

.appleby_page .appleby_tone_alt .appleby_credentials_item {
	background-color: var(--theme-color-bg_color);
}

.appleby_page .appleby_credentials_icon {
	margin-bottom: .35rem;
	color: var(--theme-color-text_link);
	font-size: 2rem;
	line-height: 1;
}

.appleby_page .appleby_credentials_value {
	color: var(--theme-color-text_dark);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
}

.appleby_page .appleby_credentials_label {
	color: var(--theme-color-text_light);
	font-size: .95rem;
}

/* Lists ---------------------------------------------------- */

.appleby_page .appleby_list_items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.appleby_page .appleby_list_columns {
	columns: 2;
	column-gap: 3rem;
}

.appleby_page .appleby_list_items li {
	position: relative;
	margin: 0 0 .85em;
	padding-left: 2rem;
	break-inside: avoid;
}

.appleby_page .appleby_list_items li:before {
	position: absolute;
	left: 0;
	top: .1em;
	color: var(--theme-color-text_link);
	font-weight: 700;
}

.appleby_page .appleby_list_bullet li:before {
	content: "\2022";
}

.appleby_page .appleby_list_check li:before {
	content: "\2713";
	display: grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background-color: var(--theme-color-text_link);
	color: #fff;
	font-size: .75rem;
}

/* Cards: services and pricing ------------------------------ */

.appleby_page .appleby_services_items,
.appleby_page .appleby_pricing_items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--appleby-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.appleby_page .appleby_services_item,
.appleby_page .appleby_pricing_item {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 2rem;
	border: 1px solid var(--appleby-card-bd);
	border-radius: var(--appleby-radius);
	background-color: var(--theme-color-bg_color);
	transition: transform .25s ease, box-shadow .25s ease;
}

.appleby_page .appleby_tone_alt .appleby_services_item,
.appleby_page .appleby_tone_alt .appleby_pricing_item {
	background-color: var(--theme-color-bg_color);
}

/* One presentation for every card; the hover is what singles one out. */
.appleby_page .appleby_services_item:hover,
.appleby_page .appleby_services_item:focus-within,
.appleby_page .appleby_pricing_item:hover,
.appleby_page .appleby_pricing_item:focus-within {
	transform: translateY(-6px);
	border-color: var(--theme-color-text_link);
	box-shadow: var(--appleby-shadow);
}

/* The card is one click target, so the pointer says so on the whole thing. */
.appleby_page .appleby_services_item {
	cursor: pointer;
}

.appleby_page .appleby_services_icon {
	margin-bottom: 1rem;
	color: var(--theme-color-text_link);
	font-size: 2.25rem;
	line-height: 1;
}

.appleby_page .appleby_services_title {
	margin: 0 0 .5rem;
	font-size: 1.25rem;
}

.appleby_page .appleby_services_title a {
	color: var(--theme-color-text_dark);
}

.appleby_page .appleby_services_title a:hover,
.appleby_page .appleby_services_title a:focus-visible {
	color: var(--theme-color-text_link);
}

.appleby_page .appleby_services_excerpt {
	flex: 1 1 auto;
	margin: 0 0 1.25rem;
	color: var(--theme-color-text_light);
}

.appleby_page .appleby_services_more {
	color: var(--theme-color-text_link);
	font-weight: 700;
}

.appleby_page .appleby_services_more:after {
	content: " \2192";
}

/* Pricing -------------------------------------------------- */

.appleby_page .appleby_pricing_title {
	margin: 0 0 .75rem;
	font-size: 1.2rem;
}

/* Side by side, a title that wraps to two lines pushes its price row a line
   below the neighbours'. Reserving two lines keeps every price and pill on the
   same baseline across the row. Ignored where the cards stack one per row, and
   ignored entirely by a browser without 'lh' - which just leaves the old,
   ragged-but-readable rows. */
@media (min-width: 768px) {
	.appleby_page .appleby_pricing_title {
		min-height: 2lh;
	}
}

/* The pill sits on the middle of the price, not its baseline - baseline on a
   3rem number drops the pill to the bottom edge and reads as misaligned. */
.appleby_page .appleby_pricing_meta {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1rem;
}

.appleby_page .appleby_pricing_price {
	color: var(--theme-color-text_dark);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
}

.appleby_page .appleby_pricing_duration {
	color: var(--theme-color-text_light);
	font-size: .95rem;
}

.appleby_page .appleby_pricing_desc {
	flex: 1 1 auto;
	margin: 0 0 1.5rem;
	color: var(--theme-color-text_light);
}

.appleby_page .appleby_pricing_item .appleby_button {
	align-self: flex-start;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* Hovering the card fills its button, so the whole card reads as active
   without any one card being pre-selected in the markup. */
.appleby_page .appleby_pricing_item:hover .appleby_button_secondary,
.appleby_page .appleby_pricing_item:focus-within .appleby_button_secondary {
	background-color: var(--theme-color-text_dark);
	color: #fff;
	box-shadow: inset 0 0 0 2px var(--theme-color-text_dark);
}

/* Process steps -------------------------------------------- */

.appleby_page .appleby_steps_items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--appleby-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: appleby-step;
}

.appleby_page .appleby_steps_item {
	position: relative;
	padding-top: 3.5rem;
	counter-increment: appleby-step;
}

.appleby_page .appleby_steps_item:before {
	content: counter(appleby-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background-color: var(--theme-color-text_link);
	color: #fff;
	font-weight: 700;
}

.appleby_page .appleby_steps_title {
	margin: 0 0 .5rem;
	font-size: 1.2rem;
}

.appleby_page .appleby_steps_text {
	margin: 0;
	color: var(--theme-color-text_light);
}

/* "Why choose" and "How treatment works" on the dark band
==============================================================
Both are the same list/steps templates, restyled as cards rather than
duplicated into new section types. */

/* Why choose: the ticked list becomes a card grid. Dropping the columns rule
   is what lets grid take over - two columns of a CSS multi-column flow cannot
   be made into equal-height cards. */

.appleby_page .appleby_tone_feature .appleby_list_items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--appleby-gap);
	columns: auto;
}

.appleby_page .appleby_tone_feature .appleby_list_items li {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	margin: 0;
	padding: 1.35rem 1.5rem;
	border: 1px solid var(--appleby-card-bd);
	border-radius: var(--appleby-radius);
	background-color: var(--theme-color-bg_color);
	color: var(--theme-color-text);
	line-height: 1.5;
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.appleby_page .appleby_tone_feature .appleby_list_items li:hover {
	transform: translateY(-4px);
	border-color: var(--appleby-feature-accent);
	box-shadow: var(--appleby-shadow);
}

/* The tick moves from an absolute marker to a flex item, so the card can size
   itself around it. */
.appleby_page .appleby_tone_feature .appleby_list_items li:before {
	position: static;
	flex: 0 0 auto;
	top: auto;
	left: auto;
	margin-top: .1em;
	background-color: var(--appleby-feature-accent);
	color: var(--theme-color-text_dark);
}

/* Steps: numbered cards, read as one sequence. */

.appleby_page .appleby_tone_feature .appleby_steps_items {
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.appleby_page .appleby_tone_feature .appleby_steps_item {
	padding: 5.75rem 1.75rem 1.75rem;
	border: 1px solid var(--appleby-card-bd);
	border-radius: var(--appleby-radius);
	background-color: var(--theme-color-bg_color);
	transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.appleby_page .appleby_tone_feature .appleby_steps_item:hover {
	transform: translateY(-6px);
	border-color: var(--appleby-feature-accent);
	box-shadow: var(--appleby-shadow);
}

.appleby_page .appleby_tone_feature .appleby_steps_item:before {
	top: 1.75rem;
	left: 1.75rem;
	width: 3rem;
	height: 3rem;
	background-color: var(--theme-color-text_dark);
	border: 1px solid var(--theme-color-text_dark);
	color: #fff;
	font-size: 1.05rem;
	transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

.appleby_page .appleby_tone_feature .appleby_steps_item:hover:before {
	background-color: var(--appleby-feature-accent);
	border-color: var(--appleby-feature-accent);
	color: var(--theme-color-text_dark);
}

.appleby_page .appleby_tone_feature .appleby_steps_title {
	/* Clearance from the numeral is padding on the card, not margin here. */
	margin-top: 0;
	color: var(--theme-color-text_dark);
	font-size: 1.3rem;
}

.appleby_page .appleby_tone_feature .appleby_steps_text {
	color: var(--theme-color-text_light);
	line-height: 1.7;
}

/* Service detail dialog
==============================================================
Native <dialog>: the top layer, the backdrop, Esc and the focus trap are all
the browser's job. What is left is the panel, the entrance, and flattening the
section bands that render inside it back into plain document flow. */

.appleby_page .appleby_modal {
	width: min(52rem, 100% - 2rem);
	max-height: min(85vh, 52rem);
	padding: 0;
	border: 0;
	border-radius: calc(var(--appleby-radius) * 1.5);
	background-color: var(--theme-color-bg_color);
	color: var(--theme-color-text);
	box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .45);
	overflow: hidden;
	/* The card sets cursor:pointer; inside the dialog it is ordinary content. */
	cursor: auto;
	text-align: left;
}

.appleby_page .appleby_modal::backdrop {
	background-color: rgba(12, 14, 11, .62);
	backdrop-filter: blur(4px);
}

.appleby_page .appleby_modal[open] {
	animation: appleby-modal-in .32s cubic-bezier(.22, .61, .36, 1);
}

.appleby_page .appleby_modal[open]::backdrop {
	animation: appleby-fade-in .32s ease;
}

@keyframes appleby-modal-in {
	from { opacity: 0; transform: translateY(1.5rem) scale(.97); }
	to   { opacity: 1; transform: none; }
}

@keyframes appleby-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.appleby_page .appleby_modal_panel {
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Zero-height sticky rail: the button stays reachable however far the panel
   has scrolled, without reserving a strip of its own at the top. */
.appleby_page .appleby_modal_dismiss {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	height: 0;
	margin: 0;
}

/* padding:0 is load-bearing. The button sits inside <form method="dialog">, so
   the theme's form-button padding (~1em 3.5em) applies to it, and with
   box-sizing: border-box that padding is a floor on the used width - 44px
   became 114px, and border-radius: 50% drew an ellipse instead of a circle. */
.appleby_page .appleby_modal_close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: .75rem .75rem 0 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .85);
	color: var(--theme-color-text_dark);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.appleby_page .appleby_modal_close:hover,
.appleby_page .appleby_modal_close:focus-visible {
	background-color: var(--theme-color-text_dark);
	color: #fff;
	transform: rotate(90deg);
}

/* Dark header, so the dialog opens with the same accent as the dark bands. */
.appleby_page .appleby_modal_head {
	padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.75rem);
	background-color: var(--appleby-bg-2);
	background-image: radial-gradient(36rem 20rem at 8% -30%, rgba(144, 156, 135, .34), transparent 65%);
	color: var(--appleby-text);
}

.appleby_page .appleby_modal_icon {
	display: block;
	margin-bottom: .85rem;
	color: var(--theme-color-alter_link, #909C87);
	font-size: 2.25rem;
	line-height: 1;
}

.appleby_page .appleby_modal_title {
	margin: 0;
	color: var(--appleby-heading);
	font-size: clamp(1.6rem, 3.5vw, 2.15rem);
	line-height: 1.15;
}

.appleby_page .appleby_modal_lead {
	margin: .85rem 0 0;
	max-width: 44rem;
	line-height: 1.6;
}

.appleby_page .appleby_modal_body {
	padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.75rem) 0;
}

/* Section parts render inside the dialog as-is, so their band padding, band
   background and page-width container are all neutralised here. */
.appleby_page .appleby_modal_body .appleby_section {
	padding: 0 0 1.75rem;
	background: none;
	color: inherit;
}

.appleby_page .appleby_modal_body .appleby_inner {
	width: 100%;
	max-width: none;
}

/* The band divider is a hairline pinned to the top of any section that follows
   another. On the page it lands in the gap between two padded bands; in the
   dialog that padding is zeroed just above, so it landed across the section's
   own heading instead. The dialog separates its sections by rhythm, not rules. */
.appleby_page .appleby_modal_body .appleby_section + .appleby_section:not(.appleby_slider):after {
	content: none;
}

.appleby_page .appleby_modal_body .appleby_section_title {
	font-size: 1.15rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--theme-color-text_dark);
}

.appleby_page .appleby_modal_body .appleby_gallery_items {
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.appleby_page .appleby_modal_actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2.75rem) clamp(1.75rem, 4vw, 2.5rem);
	border-top: 1px solid var(--appleby-card-bd);
	background-color: var(--theme-color-alter_bg_color);
}

.appleby_page .appleby_modal_permalink {
	color: var(--theme-color-text_link);
	font-weight: 700;
}

/* No background scroll behind an open dialog. */
.appleby-dialog-open,
.appleby-dialog-open body {
	overflow: hidden;
}

/* FAQ ------------------------------------------------------ */

.appleby_page .appleby_faq_items {
	max-width: 48rem;
}

.appleby_page .appleby_faq_item {
	border-bottom: 1px solid var(--appleby-card-bd);
}

.appleby_page .appleby_faq_question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/* 48px min target so the whole row is comfortably tappable. */
	min-height: 48px;
	padding: 1.15rem 0;
	color: var(--theme-color-text_dark);
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.appleby_page .appleby_faq_question::-webkit-details-marker {
	display: none;
}

.appleby_page .appleby_faq_question:after {
	content: "+";
	flex: 0 0 auto;
	color: var(--theme-color-text_link);
	font-size: 1.5rem;
	line-height: 1;
	transition: transform .2s ease;
}

.appleby_page .appleby_faq_item[open] .appleby_faq_question:after {
	transform: rotate(45deg);
}

.appleby_page .appleby_faq_answer {
	padding: 0 0 1.25rem;
	color: var(--theme-color-text_light);
}

.appleby_page .appleby_faq_answer p:last-child {
	margin-bottom: 0;
}

/* Contact -------------------------------------------------- */

.appleby_page .appleby_contact_layout {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

.appleby_page .appleby_contact_has_form {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	align-items: start;
}

.appleby_page .appleby_contact_subtitle {
	margin: 0 0 1rem;
	font-size: 1.15rem;
}

.appleby_page .appleby_contact_details dl {
	margin: 0 0 2rem;
}

.appleby_page .appleby_contact_details dt {
	margin-top: 1.25rem;
	color: var(--theme-color-text_light);
	font-size: .85rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.appleby_page .appleby_contact_details dd {
	margin: .25rem 0 0;
	font-size: 1.1rem;
}

.appleby_page .appleby_contact_link {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
}

.appleby_page .appleby_socials {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.appleby_page .appleby_social_link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
}

.appleby_page .appleby_contact_form {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--appleby-card-bd);
	border-radius: var(--appleby-radius);
	background-color: var(--theme-color-bg_color);
	box-shadow: var(--appleby-shadow);
}

.appleby_page .appleby_contact_form input:not([type=submit]),
.appleby_page .appleby_contact_form textarea {
	width: 100%;
}

/* Map ------------------------------------------------------ */

.appleby_page .appleby_map_frame {
	overflow: hidden;
	border-radius: var(--appleby-radius);
	line-height: 0;
}

.appleby_page .appleby_map_frame iframe {
	display: block;
	filter: grayscale(1);
	transition: filter .3s ease;
}

.appleby_page .appleby_map_frame:hover iframe {
	filter: none;
}

/* Call to action ------------------------------------------- */

.appleby_page .appleby_cta .appleby_inner {
	max-width: 42rem;
	padding: clamp(2rem, 5vw, 3.5rem);
	border-radius: var(--appleby-radius);
	background-color: var(--theme-color-alter_bg_color);
	text-align: center;
}

.appleby_page .appleby_cta_text {
	margin: 0;
	color: var(--theme-color-alter_dark);
	font-size: 1.2rem;
	line-height: 1.5;
}

.appleby_page .appleby_cta .appleby_buttons {
	justify-content: center;
}

/* Footer ----------------------------------------------------
Dark band beneath the light page. Colours are literal rather than token-based:
the theme's scheme has no dark surface, and the footer is one. */

.appleby_footer {
	--appleby-footer-bg: #141414;
	--appleby-footer-text: rgba(255, 255, 255, .66);
	--appleby-footer-heading: #fff;
	--appleby-footer-rule: rgba(255, 255, 255, .12);
	padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
	background-color: var(--appleby-footer-bg);
	color: var(--appleby-footer-text);
}

.appleby_footer_inner {
	width: min(var(--theme-var-page, 1290px), 100% - 3rem);
	margin-inline: auto;
}

.appleby_footer a {
	color: var(--appleby-footer-text);
	transition: color .2s ease;
}

.appleby_footer a:hover,
.appleby_footer a:focus-visible {
	color: var(--appleby-footer-heading);
}

.appleby_footer_brand {
	display: inline-block;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.appleby_footer_brand img {
	display: block;
	width: 9.5rem;
	height: auto;
	/* The wordmark artwork is black; the footer is not. */
	filter: invert(1);
}

.appleby_footer_columns {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
}

.appleby_footer_title {
	margin: 0 0 1.5rem;
	color: var(--appleby-footer-heading);
	font-size: 1.15rem;
	line-height: 1.3;
}

.appleby_footer_about p {
	margin: 0 0 1.75rem;
	max-width: 34ch;
	line-height: 1.8;
}

.appleby_footer_socials {
	display: flex;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.appleby_footer_socials a {
	display: grid;
	place-items: center;
	/* 44px target on a 40px chip. */
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1rem;
}

.appleby_footer_socials a:hover,
.appleby_footer_socials a:focus-visible {
	background-color: rgba(255, 255, 255, .1);
}

.appleby_footer_nav ul,
.appleby_footer_contacts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.appleby_footer_nav li + li {
	margin-top: .7rem;
}

.appleby_footer_nav .is-child a:before {
	content: "";
	display: inline-block;
	width: .75rem;
	height: 1px;
	margin-right: .5rem;
	vertical-align: middle;
	background-color: currentColor;
	opacity: .5;
}

.appleby_footer_address {
	margin: 0 0 1.25rem;
}

.appleby_footer_contacts li {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-top: .6rem;
	color: var(--appleby-footer-heading);
	font-weight: 700;
}

.appleby_footer_contacts a {
	color: inherit;
}

.appleby_footer_contacts [class^=icon-] {
	color: var(--theme-color-alter_link, #909C87);
	font-size: .95rem;
}

.appleby_footer_subtitle {
	margin: 1.75rem 0 .9rem;
	color: var(--appleby-footer-heading);
	font-size: 1rem;
	line-height: 1.3;
}

/* Day against time on one row, so the times line up down the column and the
   list stays readable when a day label wraps. */
.appleby_footer_hours {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .45rem 1rem;
	margin: 0;
}

.appleby_footer_hours dt {
	font-weight: 700;
}

.appleby_footer_hours dd {
	margin: 0;
	color: var(--appleby-footer-heading);
}

/* Two sites, one column. Native <details> so each address is one tap away
   without shipping script - and without a hover, which a phone cannot do. */

.appleby_footer_locations {
	margin-top: 1.75rem;
	border-top: 1px solid var(--appleby-footer-rule);
}

.appleby_footer_location {
	border-bottom: 1px solid var(--appleby-footer-rule);
}

.appleby_footer_location_name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/* 48px min target so the whole row is comfortably tappable. */
	min-height: 48px;
	padding: .85rem 0;
	color: var(--appleby-footer-heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.appleby_footer_location_name::-webkit-details-marker {
	display: none;
}

.appleby_footer_location_name:after {
	content: "+";
	flex: 0 0 auto;
	color: var(--theme-color-alter_link, #909C87);
	font-size: 1.4rem;
	line-height: 1;
	transition: transform .2s ease;
}

.appleby_footer_location[open] .appleby_footer_location_name:after {
	transform: rotate(45deg);
}

.appleby_footer_location_body {
	padding-bottom: 1.25rem;
}

.appleby_footer_location_body .appleby_footer_subtitle {
	margin-top: 1.25rem;
}

/* Bottom row */

.appleby_footer_base {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--appleby-footer-rule);
	font-size: .9rem;
}

.appleby_footer_copyright {
	margin: 0 0 .6rem;
	color: var(--appleby-footer-heading);
	font-weight: 700;
}

.appleby_footer_builder {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
}

.appleby_footer_builder a {
	display: inline-flex;
	align-items: center;
}

.appleby_footer_builder img {
	display: block;
	width: 5.5rem;
	height: auto;
	opacity: .9;
	transition: opacity .2s ease;
}

.appleby_footer_builder a:hover img,
.appleby_footer_builder a:focus-visible img {
	opacity: 1;
}

.appleby_footer_legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Focus and motion ----------------------------------------- */

.appleby_page a:focus-visible,
.appleby_page summary:focus-visible,
.appleby_page button:focus-visible,
.appleby_page input:focus-visible,
.appleby_page textarea:focus-visible {
	outline: 3px solid var(--theme-color-text_link);
	outline-offset: 3px;
}

/* The footer is dark, so its focus ring has to be light to be seen. */
.appleby_footer a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* The parent theme unclips .screen-reader-text on :hover and :active as well as
   :focus, and paints it as a grey box with a shadow at top:5px; left:5px of its
   positioned ancestor. On the skip link - a real <a>, which is what that rule was
   written for - that is the point. On a hidden label inside a control it is a
   glitch: hovering "Book this" flashed the appointment name over the button,
   sliced by the button's own overflow. A <span> cannot take focus, so hover on
   one is always this bug and never a visitor reaching the label. Element
   selector, so the skip link keeps its behaviour. */
span.screen-reader-text:hover,
span.screen-reader-text:active {
	/* The theme's rule says clip: auto !important, so this has to match it. */
	clip: rect(1px, 1px, 1px, 1px) !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	background: none;
	box-shadow: none;
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.appleby_page *,
	.appleby_page *::backdrop {
		transition: none !important;
		animation: none !important;
	}
}

/* Cookie consent
==============================================================
Banner and preferences dialog. Accept all and Reject all are styled
identically - the same size, weight and colour - so neither is nudged. */

.appleby_consent {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 999998;
	padding: 1.5rem;
	background: var(--theme-color-bg_color, #fff);
	border-top: 1px solid var(--theme-color-bd_color, #D4D4D4);
	box-shadow: 0 -12px 40px -20px rgba(0, 0, 0, .35);
}

.appleby_consent[hidden],
.appleby_consent_modal[hidden] {
	display: none;
}

.appleby_consent_inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: min(var(--theme-var-page, 1290px), 100%);
	margin-inline: auto;
}

.appleby_consent_copy {
	flex: 1 1 26rem;
}

.appleby_consent_title {
	margin: 0 0 .4rem;
	font-size: 1.05rem;
}

.appleby_consent_copy p {
	margin: 0;
	max-width: 62ch;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--theme-color-text, #80837D);
}

.appleby_consent_actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.appleby_consent_btn {
	/* Identical treatment for accept and reject: no nudging either way. */
	min-height: 48px;
	padding: .7em 1.6em;
	border: 2px solid var(--theme-color-text_dark, #282E24);
	border-radius: 30px;
	background: var(--theme-color-text_dark, #282E24);
	color: var(--theme-color-bg_color, #fff);
	font: inherit;
	font-size: .9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.appleby_consent_btn_alt {
	background: transparent;
	color: var(--theme-color-text_dark, #282E24);
}

.appleby_consent_btn:hover,
.appleby_consent_btn:focus-visible {
	background: var(--theme-color-alter_link, #909C87);
	border-color: var(--theme-color-alter_link, #909C87);
	color: #fff;
}

/* Preferences dialog */

.appleby_consent_modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 1.5rem;
}

.appleby_consent_backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, .55);
}

.appleby_consent_panel {
	position: relative;
	width: min(40rem, 100%);
	max-height: 85vh;
	overflow-y: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--theme-var-rad, 12px);
	background: var(--theme-color-bg_color, #fff);
}

.appleby_consent_intro {
	margin: 0 0 1.5rem;
	color: var(--theme-color-text, #80837D);
	font-size: .95rem;
}

.appleby_consent_categories {
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.appleby_consent_category {
	padding: 1.1rem 0;
	border-top: 1px solid var(--theme-color-bd_color, #D4D4D4);
}

.appleby_consent_category_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.appleby_consent_switch {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	cursor: pointer;
	font-weight: 700;
	color: var(--theme-color-text_dark, #282E24);
}

.appleby_consent_switch input {
	/* Kept in the accessibility tree and focusable, just not painted. */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.appleby_consent_switch_track {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 26px;
	border-radius: 13px;
	background: var(--theme-color-bd_color, #D4D4D4);
	transition: background-color .2s ease;
}

.appleby_consent_switch_track:after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	transition: transform .2s ease;
}

.appleby_consent_switch input:checked + .appleby_consent_switch_track {
	background: var(--theme-color-alter_link, #909C87);
}

.appleby_consent_switch input:checked + .appleby_consent_switch_track:after {
	transform: translateX(18px);
}

.appleby_consent_switch input:disabled + .appleby_consent_switch_track {
	opacity: .6;
}

.appleby_consent_switch input:focus-visible + .appleby_consent_switch_track {
	outline: 3px solid var(--theme-color-text_link, #131411);
	outline-offset: 3px;
}

.appleby_consent_always {
	flex: 0 0 auto;
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--theme-color-text_light, #A5A6AA);
}

.appleby_consent_category_desc {
	margin: .6rem 0 0;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--theme-color-text, #80837D);
}

.appleby_consent_close {
	position: absolute;
	top: .5rem;
	right: .5rem;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--theme-color-text, #80837D);
	cursor: pointer;
}

.appleby_consent a:focus-visible,
.appleby_consent_btn:focus-visible,
.appleby_consent_close:focus-visible {
	outline: 3px solid var(--theme-color-text_link, #131411);
	outline-offset: 3px;
}

/* Footer "Cookie settings" reads as a link, but it opens a dialog. */
.appleby_footer_link_btn {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.appleby_footer_link_btn:hover,
.appleby_footer_link_btn:focus-visible {
	color: #fff;
}

/* Map held back until embedded content is allowed */

.appleby_page .appleby_map_frame[data-appleby-consent-holder] {
	display: grid;
	place-items: center;
	min-height: 20rem;
	padding: 2rem;
	background: var(--theme-color-alter_bg_color, #F9F7F6);
	border: 1px dashed var(--theme-color-bd_color, #D4D4D4);
	text-align: center;
	line-height: 1.6;
}

.appleby_page .appleby_map_frame[data-appleby-consent-holder] iframe {
	display: none;
}

.appleby_page .appleby_map_frame:not([data-appleby-consent-holder]) .appleby_map_gate {
	display: none;
}

.appleby_map_gate p {
	max-width: 42ch;
	margin: 0 auto 1.25rem;
	color: var(--theme-color-text, #80837D);
}

.appleby_map_gate_alt {
	margin: 1rem auto 0;
	font-size: .9rem;
}

/* ==============================================================
   PREMIUM LAYER
   ==============================================================
   Everything above is the structural stylesheet; this is the finish. It sits
   last on purpose - these rules are meant to win - and it is organised the way
   the page is built: tokens, type, motion, cards, then each band's identity.

   The brand is preserved, not replaced. Every colour here resolves to the
   theme's own tokens - #405634 deep green, #909C87 sage, #282E24 ink, #F9F7F6
   off-white - so a customizer change still carries through. Depth comes from
   gradients, shadows, spacing and motion built out of those same colours.

   Three rules kept throughout:
   - Only transform, opacity and filter are animated, so nothing triggers
     layout and the page stays at 60fps.
   - Every hover effect has a :focus-visible or :focus-within twin, so keyboard
     users get the same affordance.
   - Anything decorative is aria-hidden or a pseudo-element, so none of it
     reaches the accessibility tree.
   ============================================================== */

/* 1. Derived tokens ----------------------------------------
Read from the theme, never restated - except the -rgb triples, which exist only
because rgba() cannot take a hex custom property as an argument. They mirror
the same brand colours. */

.appleby_page {
	--appleby-brand: var(--theme-color-text_link, #405634);
	--appleby-brand-2: var(--theme-color-alter_link, #909C87);
	--appleby-brand-rgb: 64, 86, 52;
	--appleby-brand-2-rgb: 144, 156, 135;
	--appleby-ink: var(--theme-color-text_dark, #282E24);
	--appleby-ink-rgb: 40, 46, 36;

	--appleby-radius: 20px;
	--appleby-radius-sm: 14px;

	/* Light UI needs tight, low-spread shadows; deep ones read as smudges. */
	--appleby-shadow-sm: 0 1px 2px rgba(var(--appleby-ink-rgb), .04), 0 6px 18px -10px rgba(var(--appleby-ink-rgb), .14);
	--appleby-shadow: 0 1px 2px rgba(var(--appleby-ink-rgb), .05), 0 18px 40px -18px rgba(var(--appleby-ink-rgb), .2);
	--appleby-shadow-lg: 0 34px 70px -28px rgba(var(--appleby-ink-rgb), .3), 0 4px 14px rgba(var(--appleby-ink-rgb), .08);
	--appleby-glow: 0 20px 55px -22px rgba(var(--appleby-brand-rgb), .4);

	--appleby-glass: rgba(255, 255, 255, .72);
	--appleby-line: rgba(var(--appleby-ink-rgb), .1);
	--appleby-line-2: rgba(var(--appleby-ink-rgb), .18);
	--appleby-card-bd: var(--appleby-line);

	--appleby-ease: cubic-bezier(.4, 0, .2, 1);
	--appleby-ease-out: cubic-bezier(.22, .61, .36, 1);
	--appleby-fast: .25s;
	--appleby-mid: .45s;
	--appleby-slow: .6s;

	--appleby-band: clamp(4rem, 9vw, 8rem);
	--appleby-gap: clamp(1rem, 2.5vw, 1.75rem);

	/* Dark-card palette. These five are recomputed from the accent chosen in
	   Theme Panel > Quick Setup and re-published by
	   appleby_scheme_custom_properties(); the values here are the fallback for
	   the theme's shipped #405634, used if that filter never runs. */
	--appleby-card-accent-rgb: 169, 183, 156;
	--appleby-card-surface-top: #2B3126;
	--appleby-card-surface-bottom: #1C211A;
	--appleby-card-deep: #14170F;
	--appleby-card-accent: rgb(var(--appleby-card-accent-rgb));
	--appleby-card-ink: #FFFFFF;
	--appleby-card-text: rgba(255, 255, 255, .72);
	--appleby-card-muted: rgba(255, 255, 255, .58);
	--appleby-card-line: rgba(255, 255, 255, .12);
}

/* Bands need a positioning context for their decoration and dividers. */
.appleby_page .appleby_section {
	position: relative;
}

/* 2. Typography ---------------------------------------------- */

.appleby_page .appleby_section_title {
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-wrap: balance;
}

/* A vertical gradient from ink into the brand green - the highlight comes out
   of the palette rather than being introduced alongside it. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.appleby_page .appleby_section_title {
		background: linear-gradient(176deg, var(--appleby-ink) 30%, rgba(var(--appleby-brand-rgb), .82) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.appleby_page .appleby_hero_title {
	color: var(--appleby-ink);
	font-size: clamp(2.4rem, 6vw, 4.25rem);
	line-height: 1.05;
	letter-spacing: -.03em;
}

.appleby_page .appleby_section_intro,
.appleby_page .appleby_hero_lead {
	line-height: 1.7;
}

/* Eyebrow becomes a pill, with a slow pulse on the dot. */
.appleby_page .appleby_hero_eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .4rem 1rem .4rem .75rem;
	border: 1px solid rgba(var(--appleby-brand-2-rgb), .5);
	border-radius: 999px;
	background: rgba(var(--appleby-brand-2-rgb), .12);
	color: var(--appleby-brand);
	font-size: .72rem;
}

.appleby_page .appleby_hero_eyebrow:before {
	content: "";
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--appleby-brand);
	animation: appleby-pulse 2.6s var(--appleby-ease) infinite;
}

@keyframes appleby-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(var(--appleby-brand-rgb), .2); }
	50%      { box-shadow: 0 0 0 6px rgba(var(--appleby-brand-rgb), 0); }
}

/* Hero word stagger. appleby.js wraps each word; without it the heading is
   simply a heading, so the markup degrades to plain text. */
.appleby_page .appleby_word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* The mask clips descenders - the 'y' in "recovery" - so the box grows
	   downwards and is pulled back up by the same amount. */
	padding-bottom: .16em;
	margin-bottom: -.16em;
}

.appleby_page .appleby_word > span {
	display: inline-block;
}

.appleby-reveal-ready .appleby_page .appleby_word > span {
	transform: translateY(110%);
}

.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_word > span {
	transform: none;
	transition: transform .8s var(--appleby-ease-out);
	transition-delay: calc(var(--w, 0) * 55ms);
}

/* 3. Entrance animations -------------------------------------
Gated on .appleby-reveal-ready, which appleby.js only adds once it has an
observer to reveal them with - so no script, an old browser or reduced motion
all mean the content simply renders. Each band animates once. */

.appleby-reveal-ready .appleby_page [data-appleby-reveal] > .appleby_inner {
	opacity: 0;
	transform: translate3d(0, 2.25rem, 0);
}

.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible > .appleby_inner {
	opacity: 1;
	transform: none;
	transition: opacity var(--appleby-slow) var(--appleby-ease-out),
		transform var(--appleby-slow) var(--appleby-ease-out);
}

/* Blur-to-sharp, on headings only: cheap on one line, expensive across a band. */
.appleby-reveal-ready .appleby_page [data-appleby-reveal] .appleby_section_title {
	filter: blur(9px);
	opacity: 0;
}

.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_section_title {
	filter: blur(0);
	opacity: 1;
	transition: filter .7s var(--appleby-ease-out), opacity .7s var(--appleby-ease-out);
}

/* Cards arrive one after another, whatever list they sit in. --i is set by
   appleby.js so the stagger works for any number of items. */
.appleby-reveal-ready .appleby_page [data-appleby-reveal] .appleby_services_item,
.appleby-reveal-ready .appleby_page [data-appleby-reveal] .appleby_pricing_item,
.appleby-reveal-ready .appleby_page [data-appleby-reveal] .appleby_credentials_item,
.appleby-reveal-ready .appleby_page [data-appleby-reveal] .appleby_steps_item,
.appleby-reveal-ready .appleby_page [data-appleby-reveal] .appleby_gallery_item,
.appleby-reveal-ready .appleby_page [data-appleby-reveal] .appleby_list_items > li,
.appleby-reveal-ready .appleby_page [data-appleby-reveal] .appleby_faq_item {
	opacity: 0;
	transform: translate3d(0, 1.5rem, 0) scale(.985);
}

.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_services_item,
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_pricing_item,
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_credentials_item,
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_steps_item,
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_gallery_item,
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_list_items > li,
.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_faq_item {
	opacity: 1;
	transform: none;
	transition: opacity var(--appleby-slow) var(--appleby-ease-out),
		transform var(--appleby-slow) var(--appleby-ease-out);
	transition-delay: calc(var(--i, 0) * 70ms);
}

/* Animated divider between bands: a hairline that draws out from the centre. */
.appleby_page .appleby_section + .appleby_section:not(.appleby_slider):after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	pointer-events: none;
	transform: scaleX(0);
	background: linear-gradient(90deg, transparent, var(--appleby-line-2) 25%, rgba(var(--appleby-brand-rgb), .55) 50%, var(--appleby-line-2) 75%, transparent);
	transition: transform 1.1s var(--appleby-ease-out);
}

.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible:after {
	transform: scaleX(1);
}

/* 4. Card system ---------------------------------------------
One shared behaviour: lift, scale, deepen, accent, and a light that follows the
cursor. appleby.js supplies --mx/--my (pointer position) and --rx/--ry (tilt);
every value falls back to neutral, so the cards are complete without it. */

.appleby_page .appleby_services_item,
.appleby_page .appleby_pricing_item,
.appleby_page .appleby_credentials_item,
.appleby_page .appleby_channels_item,
.appleby_page .appleby_locations_item,
.appleby_page .appleby_tone_feature .appleby_steps_item,
.appleby_page .appleby_tone_feature .appleby_list_items > li {
	position: relative;
	isolation: isolate;
	border: 1px solid var(--appleby-line);
	border-radius: var(--appleby-radius);
	background:
		linear-gradient(165deg, rgba(var(--appleby-brand-2-rgb), .07), transparent 55%),
		var(--theme-color-bg_color, #fff);
	box-shadow: var(--appleby-shadow-sm);
	transform:
		perspective(1100px)
		rotateX(var(--rx, 0deg))
		rotateY(var(--ry, 0deg))
		translate3d(0, var(--lift, 0), 0)
		scale(var(--scale, 1));
	transform-style: preserve-3d;
	transition:
		transform var(--appleby-mid) var(--appleby-ease),
		box-shadow var(--appleby-mid) var(--appleby-ease),
		border-color var(--appleby-mid) var(--appleby-ease);
}

/* While the pointer is moving over a card the tilt must track it frame by
   frame - a transition here would make it lag behind the cursor. */
.appleby_page .is-tilting {
	transition: box-shadow var(--appleby-mid) var(--appleby-ease),
		border-color var(--appleby-mid) var(--appleby-ease);
}

.appleby_page .appleby_services_item:hover,
.appleby_page .appleby_services_item:focus-within,
.appleby_page .appleby_pricing_item:hover,
.appleby_page .appleby_pricing_item:focus-within,
.appleby_page .appleby_channels_item:hover,
.appleby_page .appleby_channels_item:focus-within,
.appleby_page .appleby_locations_item:hover,
.appleby_page .appleby_locations_item:focus-within,
.appleby_page .appleby_credentials_item:hover,
.appleby_page .appleby_tone_feature .appleby_steps_item:hover,
.appleby_page .appleby_tone_feature .appleby_list_items > li:hover {
	--lift: -8px;
	--scale: 1.03;
	border-color: rgba(var(--appleby-brand-rgb), .4);
	box-shadow: var(--appleby-shadow-lg), var(--appleby-glow);
}

/* The radial light that follows the cursor. */
.appleby_page .appleby_services_item:after,
.appleby_page .appleby_pricing_item:after,
.appleby_page .appleby_credentials_item:after,
.appleby_page .appleby_channels_item:after,
.appleby_page .appleby_locations_item:after,
.appleby_page .appleby_tone_feature .appleby_steps_item:after,
.appleby_page .appleby_tone_feature .appleby_list_items > li:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(
		20rem 20rem at var(--mx, 50%) var(--my, 50%),
		rgba(var(--appleby-brand-2-rgb), .3),
		transparent 58%
	);
	transition: opacity var(--appleby-mid) var(--appleby-ease);
}

.appleby_page .appleby_services_item:hover:after,
.appleby_page .appleby_services_item:focus-within:after,
.appleby_page .appleby_pricing_item:hover:after,
.appleby_page .appleby_pricing_item:focus-within:after,
.appleby_page .appleby_credentials_item:hover:after,
.appleby_page .appleby_tone_feature .appleby_steps_item:hover:after,
.appleby_page .appleby_tone_feature .appleby_list_items > li:hover:after {
	opacity: 1;
}

/* Animated gradient accent border, on the two card types whose ::before is
   free. The mask keeps only the 1px ring, so the card's own background shows
   through the middle. */
.appleby_page .appleby_services_item:before,
.appleby_page .appleby_pricing_item:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1px;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	background: conic-gradient(
		from var(--angle, 0deg),
		transparent 0deg,
		var(--appleby-brand) 60deg,
		var(--appleby-brand-2) 110deg,
		transparent 200deg,
		transparent 360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	transition: opacity var(--appleby-mid) var(--appleby-ease);
}

.appleby_page .appleby_services_item:hover:before,
.appleby_page .appleby_services_item:focus-within:before,
.appleby_page .appleby_pricing_item:hover:before,
.appleby_page .appleby_pricing_item:focus-within:before {
	opacity: 1;
	animation: appleby-border-spin 4s linear infinite;
}

/* @property makes the conic angle a real animatable type; without it the
   border is simply static, which still looks right. */
@property --angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes appleby-border-spin {
	to { --angle: 360deg; }
}

/* 5. Icons ---------------------------------------------------
A brand-gradient plate behind the glyph, a soft bloom under it, an idle float,
and one elegant rotation on hover.

Note: ::before is where the icon font paints its glyph, so only ::after is
available for decoration here. */

.appleby_page .appleby_services_icon,
.appleby_page .appleby_credentials_icon,
.appleby_page .appleby_channels_icon,
.appleby_page .appleby_modal_icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 1.25rem;
	border: 1px solid rgba(var(--appleby-brand-2-rgb), .35);
	border-radius: var(--appleby-radius-sm);
	background: linear-gradient(150deg, rgba(var(--appleby-brand-2-rgb), .3), rgba(var(--appleby-brand-2-rgb), .08));
	color: var(--appleby-brand);
	font-size: 1.5rem;
	line-height: 1;
	animation: appleby-float 6s var(--appleby-ease) infinite;
	transition:
		transform var(--appleby-slow) cubic-bezier(.34, 1.4, .5, 1),
		box-shadow var(--appleby-mid) var(--appleby-ease),
		background-color var(--appleby-mid) var(--appleby-ease);
}

.appleby_page .appleby_services_icon:after,
.appleby_page .appleby_credentials_icon:after,
.appleby_page .appleby_channels_icon:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: rgba(var(--appleby-brand-2-rgb), .75);
	filter: blur(20px);
	opacity: 0;
	transition: opacity var(--appleby-mid) var(--appleby-ease);
}

.appleby_page .appleby_services_item:hover .appleby_services_icon,
.appleby_page .appleby_services_item:focus-within .appleby_services_icon,
.appleby_page .appleby_credentials_item:hover .appleby_credentials_icon {
	transform: rotateY(360deg) scale(1.08);
	box-shadow: 0 0 0 1px rgba(var(--appleby-brand-rgb), .4);
}

.appleby_page .appleby_services_item:hover .appleby_services_icon:after,
.appleby_page .appleby_credentials_item:hover .appleby_credentials_icon:after {
	opacity: 1;
}

@keyframes appleby-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -5px; }
}

/* Stagger the idle float so a row of icons never bobs in unison. */
.appleby_page .appleby_services_item:nth-child(2n) .appleby_services_icon,
.appleby_page .appleby_credentials_item:nth-child(2n) .appleby_credentials_icon { animation-delay: -1.5s; }
.appleby_page .appleby_services_item:nth-child(3n) .appleby_services_icon,
.appleby_page .appleby_credentials_item:nth-child(3n) .appleby_credentials_icon { animation-delay: -3s; }

/* 6. Buttons ------------------------------------------------- */

.appleby_page .appleby_button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 999px;
	font-weight: 700;
	/* --mag-x/y come from the magnetic hover in appleby.js. */
	transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0) scale(var(--btn-scale, 1));
	transition:
		transform var(--appleby-fast) var(--appleby-ease),
		box-shadow var(--appleby-mid) var(--appleby-ease),
		color var(--appleby-fast) var(--appleby-ease);
}

.appleby_page .appleby_button_primary {
	border: 0;
	background: linear-gradient(135deg, var(--appleby-brand), #34462a);
	color: #fff;
	box-shadow: 0 10px 28px -12px rgba(var(--appleby-brand-rgb), .65);
}

/* The sheen that sweeps across on hover. */
.appleby_page .appleby_button_primary:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	translate: -110% 0;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
	transition: translate var(--appleby-slow) var(--appleby-ease);
}

.appleby_page .appleby_button_primary:hover:before,
.appleby_page .appleby_button_primary:focus-visible:before {
	translate: 110% 0;
}

.appleby_page .appleby_button:hover,
.appleby_page .appleby_button:focus-visible {
	--btn-scale: 1.04;
}

.appleby_page .appleby_button_primary:hover,
.appleby_page .appleby_button_primary:focus-visible {
	box-shadow: 0 18px 42px -12px rgba(var(--appleby-brand-rgb), .8);
}

.appleby_page .appleby_button_secondary {
	background: var(--appleby-glass);
	color: var(--appleby-ink);
	box-shadow: inset 0 0 0 1px var(--appleby-line-2);
}

.appleby_page .appleby_button_secondary:hover,
.appleby_page .appleby_button_secondary:focus-visible {
	background: rgba(var(--appleby-brand-2-rgb), .16);
	color: var(--appleby-brand);
	box-shadow: inset 0 0 0 1px rgba(var(--appleby-brand-rgb), .5);
}

/* Arrow that slides out on hover. Generated content, so it stays out of the
   button's accessible name. */
.appleby_page .appleby_button:after {
	content: "\2192";
	display: inline-block;
	margin-left: .6em;
	translate: 0 0;
	transition: translate var(--appleby-fast) var(--appleby-ease);
}

.appleby_page .appleby_button:hover:after,
.appleby_page .appleby_button:focus-visible:after {
	translate: .3em 0;
}

/* 7. Section identity ----------------------------------------
Each band gets one distinguishing move; the shared card and type system carries
the rest, which is what stops eleven sections reading as eleven websites. */

/* Hero: a soft brand wash and a hairline grid, both fading out before the
   edges so nothing reads as a box. */
.appleby_page .appleby_hero {
	isolation: isolate;
	overflow: hidden;
}

.appleby_page .appleby_hero:not(.appleby_tone_banner):before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* Soft brand wash only. The 72px hairline grid that used to sit under the
	   headings is gone - behind large display type it read as a checked block
	   rather than as texture. */
	background:
		radial-gradient(50rem 28rem at 15% -20%, rgba(var(--appleby-brand-2-rgb), .28), transparent 62%),
		radial-gradient(40rem 24rem at 100% 120%, rgba(var(--appleby-brand-rgb), .12), transparent 60%);
	-webkit-mask-image: radial-gradient(75% 65% at 50% 40%, #000, transparent 78%);
	mask-image: radial-gradient(75% 65% at 50% 40%, #000, transparent 78%);
}

/* Prose: an accent rule that draws in as the band arrives. */
.appleby_page .appleby_prose .appleby_section_title:after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	margin-top: 1rem;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--appleby-brand), transparent);
	transition: width 1s var(--appleby-ease-out) .2s;
}

.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_prose .appleby_section_title:after {
	width: 4.5rem;
}

/* Services */
.appleby_page .appleby_services_item {
	padding: 2.25rem;
	overflow: hidden;
	cursor: pointer;
}

.appleby_page .appleby_services_title a {
	color: var(--appleby-ink);
}

.appleby_page .appleby_services_more {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--appleby-brand);
	opacity: .75;
	transition: opacity var(--appleby-mid) var(--appleby-ease), gap var(--appleby-mid) var(--appleby-ease);
}

.appleby_page .appleby_services_item:hover .appleby_services_more,
.appleby_page .appleby_services_item:focus-within .appleby_services_more {
	opacity: 1;
	gap: .85rem;
}

/* Feature bands: keep the light surface, deepen the decoration. */
.appleby_page .appleby_tone_feature .appleby_steps_item:before {
	transition: background-color var(--appleby-mid) var(--appleby-ease),
		border-color var(--appleby-mid) var(--appleby-ease),
		color var(--appleby-mid) var(--appleby-ease),
		transform var(--appleby-mid) cubic-bezier(.34, 1.4, .5, 1);
}

.appleby_page .appleby_tone_feature .appleby_steps_item:hover:before {
	transform: scale(1.08);
}

/* Pricing: the price carries the brand gradient. */
.appleby_page .appleby_pricing_item {
	padding: 2.25rem;
}

.appleby_page .appleby_pricing_price {
	background: linear-gradient(150deg, var(--appleby-ink), var(--appleby-brand));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 3rem;
	letter-spacing: -.03em;
}

.appleby_page .appleby_pricing_duration {
	padding: .25rem .7rem;
	border: 1px solid var(--appleby-line);
	border-radius: 999px;
	background: rgba(var(--appleby-brand-2-rgb), .1);
	font-size: .8rem;
}

/* FAQ: rows that light up as they open. */
.appleby_page .appleby_faq_item {
	margin-bottom: .75rem;
	padding: 0 1.5rem;
	border: 1px solid var(--appleby-line);
	border-radius: var(--appleby-radius-sm);
	background: var(--theme-color-bg_color, #fff);
	transition: border-color var(--appleby-mid) var(--appleby-ease),
		box-shadow var(--appleby-mid) var(--appleby-ease);
}

.appleby_page .appleby_faq_item:hover,
.appleby_page .appleby_faq_item[open] {
	border-color: rgba(var(--appleby-brand-rgb), .35);
	box-shadow: var(--appleby-shadow-sm);
}

.appleby_page .appleby_faq_question:after {
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid var(--appleby-line-2);
	border-radius: 50%;
	font-size: 1.1rem;
	transition: transform var(--appleby-mid) var(--appleby-ease),
		background-color var(--appleby-mid) var(--appleby-ease),
		color var(--appleby-mid) var(--appleby-ease);
}

.appleby_page .appleby_faq_item[open] .appleby_faq_question:after {
	background: var(--appleby-brand);
	border-color: var(--appleby-brand);
	color: #fff;
}

/* Gallery: lift, slow zoom, and a light sweep across the photo. */
.appleby_page .appleby_gallery_item {
	position: relative;
	border: 1px solid var(--appleby-line);
	border-radius: var(--appleby-radius);
	box-shadow: var(--appleby-shadow-sm);
	transition: transform var(--appleby-mid) var(--appleby-ease),
		box-shadow var(--appleby-mid) var(--appleby-ease),
		border-color var(--appleby-mid) var(--appleby-ease);
}

.appleby_page .appleby_gallery_item:hover {
	transform: translate3d(0, -6px, 0);
	border-color: rgba(var(--appleby-brand-rgb), .35);
	box-shadow: var(--appleby-shadow-lg);
}

.appleby_page .appleby_gallery_item img {
	transition: transform var(--appleby-slow) var(--appleby-ease);
}

.appleby_page .appleby_gallery_item:hover img {
	transform: scale(1.06);
}

.appleby_page .appleby_gallery_item:after {
	content: "";
	position: absolute;
	inset: 0;
	translate: -120% 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
	transition: translate .9s var(--appleby-ease);
}

.appleby_page .appleby_gallery_item:hover:after {
	translate: 120% 0;
}

/* Credentials: the figures read as data, not body copy. */
.appleby_page .appleby_credentials_item {
	padding: 2rem 1.5rem;
	background:
		linear-gradient(165deg, rgba(var(--appleby-brand-2-rgb), .1), transparent 55%),
		var(--theme-color-bg_color, #fff);
}

.appleby_page .appleby_credentials_value {
	color: var(--appleby-ink);
	font-size: 1.6rem;
	letter-spacing: -.02em;
}

/* Contact: panel with depth, inputs that glow on focus. */
.appleby_page .appleby_contact_form {
	position: relative;
	border: 1px solid var(--appleby-line);
	border-radius: var(--appleby-radius);
	background:
		linear-gradient(165deg, rgba(var(--appleby-brand-2-rgb), .1), transparent 55%),
		var(--theme-color-bg_color, #fff);
	box-shadow: var(--appleby-shadow);
}

.appleby_page .appleby_contact_form input:not([type=submit]),
.appleby_page .appleby_contact_form textarea,
.appleby_page .appleby_contact_form select {
	border: 1px solid var(--appleby-line);
	border-radius: var(--appleby-radius-sm);
	background: rgba(var(--appleby-ink-rgb), .02);
	transition: border-color var(--appleby-fast) var(--appleby-ease),
		box-shadow var(--appleby-fast) var(--appleby-ease),
		background-color var(--appleby-fast) var(--appleby-ease);
}

.appleby_page .appleby_contact_form input:not([type=submit]):focus,
.appleby_page .appleby_contact_form textarea:focus {
	border-color: rgba(var(--appleby-brand-rgb), .6);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(var(--appleby-brand-2-rgb), .25);
	outline: none;
}

.appleby_page .appleby_contact_link,
.appleby_page .appleby_social_link {
	transition: color var(--appleby-fast) var(--appleby-ease),
		translate var(--appleby-fast) var(--appleby-ease);
}

.appleby_page .appleby_contact_link:hover,
.appleby_page .appleby_social_link:hover {
	color: var(--appleby-brand);
	translate: 3px 0;
}

.appleby_page .appleby_map_frame {
	border: 1px solid var(--appleby-line);
	border-radius: var(--appleby-radius);
	box-shadow: var(--appleby-shadow-sm);
}

/* CTA: the one band that is a lit panel. */
.appleby_page .appleby_cta .appleby_inner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	max-width: 52rem;
	padding: clamp(2.5rem, 6vw, 4.5rem);
	border: 1px solid rgba(var(--appleby-brand-2-rgb), .35);
	border-radius: calc(var(--appleby-radius) * 1.4);
	background:
		linear-gradient(155deg, rgba(var(--appleby-brand-2-rgb), .22), transparent 55%),
		var(--theme-color-bg_color, #fff);
	box-shadow: var(--appleby-shadow-lg);
}

.appleby_page .appleby_cta .appleby_inner:before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -50% -10%;
	background: radial-gradient(28rem 16rem at 50% 0%, rgba(var(--appleby-brand-2-rgb), .35), transparent 65%);
}

.appleby_page .appleby_cta_text {
	color: var(--appleby-ink);
	font-size: clamp(1.2rem, 2.4vw, 1.6rem);
	line-height: 1.45;
	text-wrap: balance;
}

/* Service dialog: same card language, one level more elevated. */
.appleby_page .appleby_modal {
	border: 1px solid var(--appleby-line-2);
	box-shadow: var(--appleby-shadow-lg);
}

.appleby_page .appleby_modal::backdrop {
	background: rgba(var(--appleby-ink-rgb), .48);
	backdrop-filter: blur(6px);
}

.appleby_page .appleby_modal[open] {
	animation: appleby-modal-in .32s var(--appleby-ease-out);
}

@keyframes appleby-modal-in {
	from { opacity: 0; transform: translateY(1.5rem) scale(.97); }
	to   { opacity: 1; transform: none; }
}

.appleby_page .appleby_modal_head {
	background:
		radial-gradient(32rem 18rem at 8% -30%, rgba(var(--appleby-brand-2-rgb), .35), transparent 65%),
		var(--theme-color-alter_bg_color, #F9F7F6);
	border-bottom: 1px solid var(--appleby-line);
}

.appleby_page .appleby_modal_close {
	border: 1px solid var(--appleby-line-2);
	background: var(--appleby-glass);
}

.appleby_page .appleby_modal_body .appleby_section_title {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: var(--appleby-brand);
	font-size: .82rem;
}

/* Sections inside the dialog are already on screen when it opens. */
.appleby-reveal-ready .appleby_page .appleby_modal [data-appleby-reveal] > .appleby_inner,
.appleby-reveal-ready .appleby_page .appleby_modal .appleby_section_title,
.appleby-reveal-ready .appleby_page .appleby_modal .appleby_gallery_item {
	opacity: 1;
	transform: none;
	filter: none;
}

/* 8. Footer --------------------------------------------------
Already the dark end of a light page - that is existing identity, not a dark
theme - so it keeps its surface and gains the same motion vocabulary. */

.appleby_footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.appleby_footer:before {
	content: "";
	position: absolute;
	inset: -60% -10% auto -10%;
	height: 120%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(40rem 20rem at 20% 0%, rgba(var(--appleby-brand-2-rgb), .16), transparent 62%);
}

.appleby_footer_socials a {
	border: 1px solid rgba(255, 255, 255, .14);
	transition: transform var(--appleby-mid, .45s) cubic-bezier(.34, 1.4, .5, 1),
		background-color .25s ease, border-color .25s ease, color .25s ease;
}

.appleby_footer_socials a:hover,
.appleby_footer_socials a:focus-visible {
	transform: translateY(-4px) rotate(8deg);
	border-color: rgba(144, 156, 135, .7);
	background: rgba(144, 156, 135, .22);
	color: #fff;
}

/* Link underline that draws in from the left. */
.appleby_footer_nav a,
.appleby_footer_legal a {
	position: relative;
	display: inline-block;
}

.appleby_footer_nav a:after,
.appleby_footer_legal a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background: #909C87;
	transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

.appleby_footer_nav a:hover:after,
.appleby_footer_nav a:focus-visible:after,
.appleby_footer_legal a:hover:after,
.appleby_footer_legal a:focus-visible:after {
	width: 100%;
}

/* 9. Focus and pointer capability ---------------------------- */

.appleby_page a:focus-visible,
.appleby_page summary:focus-visible,
.appleby_page button:focus-visible,
.appleby_page input:focus-visible,
.appleby_page textarea:focus-visible {
	outline: 2px solid var(--appleby-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Coarse pointers get no tilt and no cursor light - there is no cursor to
   follow, and the effects only cost battery on a phone. */
@media (hover: none), (pointer: coarse) {
	.appleby_page .appleby_services_item,
	.appleby_page .appleby_pricing_item,
	.appleby_page .appleby_credentials_item,
	.appleby_page .appleby_tone_feature .appleby_steps_item,
	.appleby_page .appleby_tone_feature .appleby_list_items > li {
		--rx: 0deg;
		--ry: 0deg;
	}

	.appleby_page .appleby_services_item:after,
	.appleby_page .appleby_pricing_item:after,
	.appleby_page .appleby_credentials_item:after,
	.appleby_page .appleby_tone_feature .appleby_steps_item:after,
	.appleby_page .appleby_tone_feature .appleby_list_items > li:after {
		display: none;
	}
}

/* 10. Reduced motion -----------------------------------------
Last in the file so it covers every animation declared above it. Motion is
removed; the design is not. Everything still arrives in its final state,
because the entrance states are only ever applied by a script that checks this
same setting. */

@media (prefers-reduced-motion: reduce) {
	.appleby_page *,
	.appleby_page *::before,
	.appleby_page *::after,
	.appleby_page *::backdrop,
	.appleby_footer *,
	.appleby_footer *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.appleby_page .appleby_services_item,
	.appleby_page .appleby_pricing_item,
	.appleby_page .appleby_credentials_item,
	.appleby_page .appleby_tone_feature .appleby_steps_item,
	.appleby_page .appleby_tone_feature .appleby_list_items > li,
	.appleby_page .appleby_button {
		--rx: 0deg;
		--ry: 0deg;
		--lift: 0;
		--scale: 1;
		--mag-x: 0;
		--mag-y: 0;
		--btn-scale: 1;
	}

	/* Hover feedback stays - it is information, not decoration - but it is
	   carried by colour and border rather than by movement. */
	.appleby_page .appleby_services_item:hover,
	.appleby_page .appleby_pricing_item:hover,
	.appleby_page .appleby_credentials_item:hover {
		border-color: rgba(var(--appleby-brand-rgb), .5);
	}
}

/* ==============================================================
   DARK CARDS
   ==============================================================
   Every card surface inverts: dark panels on the light page. The dark is not a
   new colour - it is the brand ink #282E24 taken darker, so the cards read as
   the same family as the headings rather than as plain black.

   Swapping a background is the easy half. Everything that sat on the old light
   surface - titles, body copy, icons, numerals, prices, buttons, focus rings -
   is restated here and contrast-checked against the new one, because each of
   those was previously chosen to work on white.

   Accent on dark is #A9B79C, the brand sage lifted for legibility: 9:1 on the
   card, where the page's #405634 would have been 1.8:1 and unreadable.

   FAQ rows are deliberately not included - an accordion of long answers is a
   reading surface, not a card. Say the word and they can follow.
   ============================================================== */

.appleby_page .appleby_services_item,
.appleby_page .appleby_pricing_item,
.appleby_page .appleby_credentials_item,
.appleby_page .appleby_channels_item,
.appleby_page .appleby_locations_item,
.appleby_page .appleby_tone_feature .appleby_steps_item,
.appleby_page .appleby_tone_feature .appleby_list_items > li {
	border-color: var(--appleby-card-line);
	background: linear-gradient(165deg, var(--appleby-card-surface-top) 0%, var(--appleby-card-surface-bottom) 100%);
	color: var(--appleby-card-text);
	/* Dark panels on a light page need a visible cast to sit above it. */
	box-shadow: 0 2px 4px rgba(var(--appleby-ink-rgb), .06), 0 20px 44px -20px rgba(var(--appleby-ink-rgb), .4);
}

.appleby_page .appleby_services_item:hover,
.appleby_page .appleby_services_item:focus-within,
.appleby_page .appleby_pricing_item:hover,
.appleby_page .appleby_pricing_item:focus-within,
.appleby_page .appleby_channels_item:hover,
.appleby_page .appleby_channels_item:focus-within,
.appleby_page .appleby_locations_item:hover,
.appleby_page .appleby_locations_item:focus-within,
.appleby_page .appleby_credentials_item:hover,
.appleby_page .appleby_tone_feature .appleby_steps_item:hover,
.appleby_page .appleby_tone_feature .appleby_list_items > li:hover {
	border-color: rgba(var(--appleby-card-accent-rgb), .55);
	box-shadow:
		0 2px 4px rgba(var(--appleby-ink-rgb), .08),
		0 36px 70px -26px rgba(var(--appleby-ink-rgb), .55),
		0 0 40px -12px rgba(var(--appleby-brand-2-rgb), .5);
}

/* The cursor light has to be brighter to register on a dark surface. */
.appleby_page .appleby_services_item:after,
.appleby_page .appleby_pricing_item:after,
.appleby_page .appleby_credentials_item:after,
.appleby_page .appleby_channels_item:after,
.appleby_page .appleby_locations_item:after,
.appleby_page .appleby_tone_feature .appleby_steps_item:after,
.appleby_page .appleby_tone_feature .appleby_list_items > li:after {
	background: radial-gradient(
		20rem 20rem at var(--mx, 50%) var(--my, 50%),
		rgba(var(--appleby-card-accent-rgb), .22),
		transparent 58%
	);
}

/* Accent border, lifted to the on-dark sage. */
.appleby_page .appleby_services_item:before,
.appleby_page .appleby_pricing_item:before {
	background: conic-gradient(
		from var(--angle, 0deg),
		transparent 0deg,
		var(--appleby-card-accent) 60deg,
		var(--appleby-card-ink) 110deg,
		transparent 200deg,
		transparent 360deg
	);
}

/* Icons ---------------------------------------------------- */

.appleby_page .appleby_services_item .appleby_services_icon,
.appleby_page .appleby_credentials_item .appleby_credentials_icon,
.appleby_page .appleby_channels_item .appleby_channels_icon {
	border-color: rgba(var(--appleby-card-accent-rgb), .4);
	background: linear-gradient(150deg, rgba(var(--appleby-card-accent-rgb), .3), rgba(var(--appleby-card-accent-rgb), .08));
	color: var(--appleby-card-accent);
}

.appleby_page .appleby_services_item:hover .appleby_services_icon,
.appleby_page .appleby_services_item:focus-within .appleby_services_icon,
.appleby_page .appleby_credentials_item:hover .appleby_credentials_icon {
	box-shadow: 0 0 0 1px rgba(var(--appleby-card-accent-rgb), .55);
	color: #FFFFFF;
}

/* Services -------------------------------------------------- */

.appleby_page .appleby_services_item .appleby_services_title a {
	color: var(--appleby-card-ink);
}

.appleby_page .appleby_services_item .appleby_services_title a:hover,
.appleby_page .appleby_services_item .appleby_services_title a:focus-visible {
	color: var(--appleby-card-accent);
}

.appleby_page .appleby_services_item .appleby_services_excerpt {
	color: var(--appleby-card-text);
}

.appleby_page .appleby_services_item .appleby_services_more {
	color: var(--appleby-card-accent);
}

/* Pricing --------------------------------------------------- */

.appleby_page .appleby_pricing_item .appleby_pricing_title {
	color: var(--appleby-card-ink);
}

/* The price gradient ran ink -> green, both of which vanish on this surface. */
.appleby_page .appleby_pricing_item .appleby_pricing_price {
	background: linear-gradient(150deg, #FFFFFF, var(--appleby-card-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.appleby_page .appleby_pricing_item .appleby_pricing_duration {
	border-color: var(--appleby-card-line);
	background: rgba(255, 255, 255, .06);
	color: var(--appleby-card-muted);
}

.appleby_page .appleby_pricing_item .appleby_pricing_desc {
	color: var(--appleby-card-text);
}

/* The secondary button was glass-on-white; on a dark card it needs inverting
   or the label disappears into the panel. */
.appleby_page .appleby_pricing_item .appleby_button_secondary {
	background: rgba(255, 255, 255, .08);
	color: var(--appleby-card-ink);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.appleby_page .appleby_pricing_item:hover .appleby_button_secondary,
.appleby_page .appleby_pricing_item:focus-within .appleby_button_secondary,
.appleby_page .appleby_pricing_item .appleby_button_secondary:hover,
.appleby_page .appleby_pricing_item .appleby_button_secondary:focus-visible {
	background: var(--appleby-card-accent);
	color: var(--appleby-card-deep);
	box-shadow: inset 0 0 0 1px var(--appleby-card-accent);
}

/* Credentials ----------------------------------------------- */

.appleby_page .appleby_credentials_item .appleby_credentials_value {
	color: var(--appleby-card-ink);
}

.appleby_page .appleby_credentials_item .appleby_credentials_label {
	color: var(--appleby-card-muted);
}

/* Feature band cards ---------------------------------------- */

.appleby_page .appleby_tone_feature .appleby_steps_title {
	color: var(--appleby-card-ink);
}

.appleby_page .appleby_tone_feature .appleby_steps_text {
	color: var(--appleby-card-text);
}

.appleby_page .appleby_tone_feature .appleby_list_items > li {
	color: var(--appleby-card-text);
}

/* The numeral was a dark disc with white type - invisible on a dark card. It
   becomes an outlined sage badge that fills on hover. */
.appleby_page .appleby_tone_feature .appleby_steps_item:before {
	background-color: rgba(var(--appleby-card-accent-rgb), .14);
	border-color: rgba(var(--appleby-card-accent-rgb), .5);
	color: var(--appleby-card-accent);
}

.appleby_page .appleby_tone_feature .appleby_steps_item:hover:before {
	background-color: var(--appleby-card-accent);
	border-color: var(--appleby-card-accent);
	color: var(--appleby-card-deep);
}

/* The tick keeps its sage disc; only the glyph needs darkening against it. */
.appleby_page .appleby_tone_feature .appleby_list_items > li:before {
	background-color: var(--appleby-card-accent);
	color: var(--appleby-card-deep);
}

/* Focus inside a dark card ----------------------------------
The page focus ring is the brand green, which is 1.8:1 here. Inside a card it
switches to the on-dark sage so the ring stays visible to keyboard users. */

.appleby_page .appleby_services_item a:focus-visible,
.appleby_page .appleby_pricing_item a:focus-visible,
.appleby_page .appleby_credentials_item a:focus-visible,
.appleby_page .appleby_tone_feature .appleby_steps_item a:focus-visible,
.appleby_page .appleby_tone_feature .appleby_list_items > li a:focus-visible {
	outline-color: var(--appleby-card-ink);
}

/* ==============================================================
   ABOUT BANNER AND CARD HEADINGS
   ============================================================== */

/* Card headings in the display face
----------------------------------------------------------------
The credentials figures are the heading of each card, so they take the same
family as "Our story" and every other section heading - Marcellus, read from
the theme's own token rather than named here, so a font change in the theme
options carries through. Marcellus ships in a single weight, so the bold is
dropped for a size and tracking that give the same presence without the browser
synthesising a heavier face. */

.appleby_page .appleby_credentials_value {
	font-family: var(--theme-font-h2_font-family, Marcellus, serif);
	font-weight: 400;
	font-size: 1.75rem;
	letter-spacing: -.01em;
	line-height: 1.15;
}

/* Header: the scroll-down band comes off
----------------------------------------------------------------
The header layout ends in a decorative row holding two spacers and a chevron.
It is the only row in the header with an icon-box widget, which is what makes
it addressable without depending on the Elementor element id - those differ per
layout, and there are five header layouts. Removing it is also what frees the
height the banner needs. */

body.appleby_theme .top_panel .elementor-top-section:has(.elementor-widget-icon-box) {
	display: none;
}

/* Fallback for browsers without :has() - hide the widgets so the row
   collapses, even though the row's own padding remains. */
@supports not selector(:has(*)) {
	body.appleby_theme .top_panel .elementor-widget-icon-box,
	body.appleby_theme .top_panel .elementor-widget-spacer {
		display: none;
	}
}

/* About banner: header and image in one screen
----------------------------------------------------------------
The banner takes the viewport height that is left once the header has had its
share. --appleby-header-h is measured and kept current by appleby.js; the
fallback is the header's designed height, so the band is close to right even
before the script runs and correct the moment it does.

svh rather than vh: on a phone the address bar hides on scroll, and vh would
size the band to the taller viewport, pushing the bottom of the image off the
first screen - exactly what this is meant to prevent.

min-height, not height, so unusually long copy or a large text-zoom setting can
still grow the band rather than being clipped. */

.appleby_page .appleby_hero.appleby_tone_banner {
	/* border-box is load-bearing: this element inherits content-box, so
	   min-height would be added to the padding rather than including it. The
	   band came out a full viewport plus 300px of padding tall, which put the
	   bottom-aligned copy below the fold - the opposite of one screen. */
	box-sizing: border-box;
	min-height: 100svh;
	/* Top padding clears the floating header; the copy sits at the bottom. */
	padding-block: calc(var(--appleby-header-h, 7rem) + 2rem) clamp(6rem, 22vh, 13rem);
}

/* Landscape phones have no height to give: capping it keeps the copy legible
   instead of squeezing it into a letterbox. */
@media (max-height: 520px) and (orientation: landscape) {
	.appleby_page .appleby_hero.appleby_tone_banner {
		min-height: 24rem;
	}
}

/* ==============================================================
   HEADER OVER A FULL-SCREEN PHOTO
   ==============================================================
   Applied by the appleby_header_over body class to inner pages that open on a
   full-viewport image, so they read exactly like the home page: the photo
   starts at the top of the window and the header floats on it.

   The menu has to stay legible on a photograph that this theme does not
   control, so two things carry it: the type goes white, and a short gradient
   sits behind the header alone. That gradient is not the scrim that was
   removed - that one covered the whole image to make body copy readable over
   it. This one is roughly header-height, fades out completely, and exists only
   so the navigation never lands on a light patch of the photo. Without it the
   menu is one bright wall or window away from being unreadable.
   ============================================================== */

body.appleby_header_over .page_wrap {
	position: relative;
}

body.appleby_header_over .top_panel {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 20;
	background-color: transparent;
	border-bottom: 0;
}

/* The legibility gradient, behind the header only. */
body.appleby_header_over .top_panel:before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 220%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(10, 12, 9, .55) 0%, rgba(10, 12, 9, .28) 45%, transparent 100%);
}

/* Navigation, phone and logo on the photo. */
body.appleby_header_over .top_panel .sc_layouts_menu_nav > li > a,
body.appleby_header_over .top_panel .sc_layouts_menu_nav > li > a > span,
body.appleby_header_over .top_panel .elementor-widget-heading .elementor-heading-title,
body.appleby_header_over .top_panel .elementor-widget-heading .elementor-heading-title a {
	color: #fff;
}

body.appleby_header_over .top_panel .sc_layouts_menu_nav > li > a:hover > span,
body.appleby_header_over .top_panel .sc_layouts_menu_nav > li.current-menu-item > a > span,
body.appleby_header_over .top_panel .elementor-widget-heading .elementor-heading-title a:hover {
	color: #C6D1BC;
}

/* The underline under the current tab, and the one that wipes in on hover, are
   both the same :after rule - the theme paints it in the ink colour, #282E24.
   Over a photograph that is a dark line on a dark image: on the Services page
   it measured 1.6:1 against the wall behind it, so the active tab read as
   having no marker at all. White, to match the tabs it sits under. Only on the
   overlay header; where the header has its own light background the ink line is
   right and is left alone. */
body.appleby_header_over .top_panel .sc_layouts_menu_nav > li > a:after {
	background-color: #fff;
}

/* The wordmark ships as black artwork; over a photograph it needs inverting,
   exactly as the theme already does on its own dark-scheme surfaces. */
body.appleby_header_over .sc_layouts_logo img,
body.appleby_header_over .logo_image {
	filter: invert(1);
}

/* The burger on tablet and phone. */
body.appleby_header_over .top_panel .sc_layouts_menu_mobile_button_burger,
body.appleby_header_over .top_panel .sc_layouts_iconed_text_icon {
	color: #fff;
}

/* Dropdown panels are opaque: menu text over a blurred photo is the one place
   transparency costs legibility. */
body.appleby_header_over .top_panel .sc_layouts_menu_nav ul {
	background-color: #14170F;
}

body.appleby_header_over .top_panel .sc_layouts_menu_nav ul li a {
	color: rgba(255, 255, 255, .82);
}

body.appleby_header_over .top_panel .sc_layouts_menu_nav ul li a:hover {
	color: #fff;
}

/* Focus rings on the photo need to be light to be seen. */
body.appleby_header_over .top_panel a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Copy set on the banner photo
----------------------------------------------------------------
The heading and lead sit on the image, so the image has to carry them. The old
treatment was a scrim across the whole photograph; this is deliberately not
that. It is weighted to the bottom third where the copy actually sits, clears
completely by two-thirds up, and leaves the signage and the room - the reason
the photo is there - unmuted.

A text shadow does the rest. Between the two, white copy holds well past 4.5:1
on this photograph without flattening it, and the treatment still works if the
image is ever swapped for a lighter one. */

.appleby_page .appleby_hero_media:after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(10, 12, 9, .72) 0%,
		rgba(10, 12, 9, .38) 32%,
		transparent 66%
	);
}

.appleby_page .appleby_tone_banner .appleby_hero_title,
.appleby_page .appleby_tone_banner .appleby_hero_lead {
	text-shadow: 0 1px 24px rgba(8, 10, 7, .5);
}

.appleby_page .appleby_tone_banner .appleby_hero_eyebrow {
	border-color: rgba(255, 255, 255, .45);
	background: rgba(10, 12, 9, .4);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
}

.appleby_page .appleby_tone_banner .appleby_hero_eyebrow:before {
	background: #fff;
}

/* ==============================================================
   CLOSING CALL TO ACTION
   ==============================================================
   This band closes every page, so it is the one place the eye has to land.
   Three things were working against it: a near-white panel on a near-white
   page, so it had no reason to be noticed; two identical filled buttons, so
   nothing said which action to take; and body-sized copy, so it read as a
   footnote rather than an invitation.

   It is now the inverse of the page - a dark panel on light, which makes it
   the highest-contrast element in view without introducing a colour the brand
   does not already own. The surface is the same one the cards use, derived
   from the accent set in Theme Panel > Quick Setup, so it follows the brand.

   The movement is deliberately slow and peripheral: a drifting wash and an
   occasional sweep of light. Nothing blinks, nothing repeats quickly, and the
   whole thing holds still for anyone who asks for reduced motion.
   ============================================================== */

.appleby_page .appleby_cta .appleby_inner {
	max-width: 58rem;
	padding: clamp(3rem, 7vw, 5rem) clamp(1.75rem, 6vw, 4.5rem);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: calc(var(--appleby-radius) * 1.6);
	background: linear-gradient(160deg, var(--appleby-card-surface-top) 0%, var(--appleby-card-surface-bottom) 100%);
	color: rgba(255, 255, 255, .78);
	text-align: center;
	/* Lift plus a brand-coloured halo, so the panel reads as raised rather
	   than as a dark rectangle sitting flat on the page. */
	box-shadow:
		0 2px 6px rgba(var(--appleby-ink-rgb), .1),
		0 40px 80px -32px rgba(var(--appleby-ink-rgb), .55),
		0 0 70px -30px rgba(var(--appleby-brand-rgb), .7);
}

/* Drifting aurora behind the copy. */
.appleby_page .appleby_cta .appleby_inner:before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -40%;
	pointer-events: none;
	background:
		radial-gradient(26rem 16rem at 22% 12%, rgba(var(--appleby-card-accent-rgb), .38), transparent 62%),
		radial-gradient(22rem 14rem at 82% 88%, rgba(var(--appleby-brand-2-rgb), .3), transparent 60%);
	animation: appleby-cta-drift 22s var(--appleby-ease) infinite alternate;
	will-change: transform;
}

@keyframes appleby-cta-drift {
	from { transform: translate3d(-3%, -2%, 0) scale(1); }
	to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

/* A slow sweep of light across the panel - the peripheral movement that
   catches the eye on scroll. Long pause between passes so it never nags. */
.appleby_page .appleby_cta .appleby_inner:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .07) 50%, transparent 62%);
	translate: -130% 0;
	animation: appleby-cta-sweep 9s var(--appleby-ease) infinite;
}

@keyframes appleby-cta-sweep {
	0%, 62% { translate: -130% 0; }
	100%    { translate: 130% 0; }
}

/* The invitation reads at heading scale now, not body scale. */
.appleby_page .appleby_cta_text {
	max-width: 34ch;
	margin-inline: auto;
	color: #fff;
	font-family: var(--theme-font-h2_font-family, Marcellus, serif);
	font-weight: 400;
	font-size: clamp(1.45rem, 3.2vw, 2.1rem);
	line-height: 1.3;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.appleby_page .appleby_cta .appleby_buttons {
	justify-content: center;
	margin-top: 2.25rem;
}

/* One obvious action, one alternative - the two used to be identical fills,
   which left the visitor to guess. */

/* The !important here is not laziness. The parent theme paints .theme_button
   from its colour-scheme CSS, which this child theme cannot out-specify at any
   sane weight - a four-class selector still loses to it on `color`. The
   alternative is a selector arms race that breaks on the next theme update.
   It is scoped to the two buttons in this one panel, and only to the two
   properties that were losing. The light fill with a white label was
   genuinely unreadable, so this is a legibility fix, not a preference. */

.appleby_page .appleby_cta .appleby_buttons a.appleby_button_primary {
	background: linear-gradient(140deg, #fff, var(--appleby-card-accent)) !important;
	color: var(--appleby-card-deep) !important;
	box-shadow: 0 12px 32px -12px rgba(var(--appleby-card-accent-rgb), .75);
}

.appleby_page .appleby_cta .appleby_buttons a.appleby_button_primary:hover,
.appleby_page .appleby_cta .appleby_buttons a.appleby_button_primary:focus-visible {
	box-shadow: 0 20px 46px -12px rgba(var(--appleby-card-accent-rgb), .95);
}

.appleby_page .appleby_cta .appleby_buttons a.appleby_button_secondary {
	background: transparent !important;
	color: #fff !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

.appleby_page .appleby_cta .appleby_buttons a.appleby_button_secondary:hover,
.appleby_page .appleby_cta .appleby_buttons a.appleby_button_secondary:focus-visible {
	background: rgba(255, 255, 255, .12) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

/* Focus rings have to be light to be seen on this panel. */
.appleby_page .appleby_cta a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Contact columns on a shared baseline
----------------------------------------------------------------
The two headings are the same element at the same size, but only one of them
sat inside a padded panel - so "Send an enquiry" started a full panel-padding
lower than "Contact details" and the columns read as misaligned.

The details column takes the same inset as the form's padding, which puts both
headings, and therefore both columns, on one line. It is expressed with the
same clamp() rather than a fixed number, so the two stay locked together as the
panel padding scales with the viewport.

Only while the two are side by side: once they stack, a leading gap above the
details would just be dead space. */

@media (min-width: 1024px) {
	.appleby_page .appleby_contact_has_form .appleby_contact_details {
		padding-top: clamp(1.5rem, 3vw, 2.5rem);
	}
}

/* Mobile menu panel
================================================================
The burger panel, rebuilt in the site's own language.

The theme ships it as a demo overlay: a flat alternate-tone background, the
navigation absolutely positioned 27% down inside a box capped at 53% of the
viewport, and tap targets the size of the text in them. That box is why the
panel clipped on short screens - a landscape phone has nowhere to put a 53%
scroll window - and the targets are why the links were awkward to hit.

What replaces it:
  - the dark-card surface the site already uses for its feature bands, so the
    panel reads as part of the site rather than a stock overlay
  - one column in normal flow, the panel itself the scroller, so nothing can
    clip and a longer menu simply scrolls
  - full-width rows on a single left edge, hairline separated, comfortably
    past the 44px target on every axis
  - the current page marked with an accent bar, not a colour shift that was
    nearly invisible against white
  - the header sticky, so Close stays reachable from a scrolled menu
  - one call action, and safe-area padding so neither it nor the social row
    sits under a home indicator

The markup is the theme's own, untouched: the call button arrives through the
theme's menu filter and everything else here is styling.
================================================================ */

/* Tokens. The premium layer publishes these on .appleby_page, which this panel
   sits outside of, so it carries its own copy. appleby_scheme_custom_properties()
   names the panel too, so these are overwritten with values derived from the
   accent chosen in Quick Setup; the literals here are the fallback.

   Every selector below is qualified with scheme_dark - a class the template
   hardcodes on the panel - purely for weight. The theme's responsive sheet
   loads after the child stylesheet, so a rule that only matched .menu_mobile
   would lose to its phone and tablet overrides on the exact properties this
   redesign needs to set. */

.menu_mobile.scheme_dark {
	--appleby-card-accent-rgb: 169, 183, 156;
	--appleby-card-surface-top: #2B3126;
	--appleby-card-deep: #14170F;
	--appleby-card-accent: rgb(var(--appleby-card-accent-rgb));
	--appleby-card-ink: #FFFFFF;
	--appleby-card-text: rgba(255, 255, 255, .72);
	--appleby-card-muted: rgba(255, 255, 255, .58);
	--appleby-card-line: rgba(255, 255, 255, .12);
	--appleby-menu-ease: cubic-bezier(.22, .61, .36, 1);
	--appleby-menu-pad: clamp(1.25rem, 5vw, 2.5rem);
}

/* Surface and column ------------------------------------------
The panel is the scroll container. Everything inside it is in normal flow, so
there is no inner box to clip against and no percentage to collapse. */

.menu_mobile.scheme_dark .menu_mobile_inner {
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	text-align: left;
	background-color: var(--appleby-card-deep);
	background-image:
		radial-gradient(42rem 30rem at 88% -8%, rgba(var(--appleby-card-accent-rgb), .16), transparent 62%),
		linear-gradient(180deg, var(--appleby-card-surface-top) 0%, var(--appleby-card-deep) 68%);
	color: var(--appleby-card-text);
}

/* The page behind must not scroll with it. The theme does this below 1024px
   only, which leaves the tablet range scrolling underneath the panel. */
body.menu_mobile_opened {
	height: 100% !important;
	overflow: hidden !important;
}

/* Header: sticky, so Close is reachable from anywhere in a scrolled menu ---- */

.menu_mobile.scheme_dark .menu_mobile_header_wrap {
	position: sticky;
	top: 0;
	z-index: 10;
	flex: 0 0 auto;
	gap: 1rem;
	padding: 1.1rem var(--appleby-menu-pad);
	padding-top: max(1.1rem, env(safe-area-inset-top));
	border-bottom: 1px solid var(--appleby-card-line);
	background-color: var(--appleby-card-surface-top);
}

.menu_mobile.scheme_dark .menu_mobile_header_wrap .sc_layouts_logo {
	min-width: 0;
}

.menu_mobile.scheme_dark .menu_mobile_header_wrap .sc_layouts_logo img {
	max-height: 3rem;
	width: auto;
}

/* A 48px round target. The theme's is the icon glyph itself - about 17px on a
   phone, and the one control the panel cannot do without. */
.menu_mobile.scheme_dark .menu_mobile_close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin-right: -6px;
	border: 1px solid var(--appleby-card-line);
	border-radius: 50%;
	color: var(--appleby-card-ink);
	cursor: pointer;
	transition: background-color .25s var(--appleby-menu-ease), border-color .25s var(--appleby-menu-ease);
}

.menu_mobile.scheme_dark .menu_mobile_close:hover,
.menu_mobile.scheme_dark .menu_mobile_close:focus-visible {
	border-color: var(--appleby-card-accent);
	background-color: rgba(var(--appleby-card-accent-rgb), .14);
}

.menu_mobile.scheme_dark .menu_mobile_close .menu_button_close_icon {
	font-size: 15px;
}

/* Clipped rather than removed: the theme hides this outright below 480px,
   which takes the control's accessible name with it. */
.menu_mobile.scheme_dark .menu_mobile_close .menu_button_close_text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Content column ---------------------------------------------- */

.menu_mobile.scheme_dark .menu_mobile_content_wrap.content_wrap,
.menu_mobile.scheme_dark .menu_mobile_content_wrap_inner,
.menu_mobile.scheme_dark .menu_mobile_content_wrap_inner.without_socials {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: none;
	padding: 0;
	margin: 0;
}

/* Navigation -------------------------------------------------- */

.menu_mobile.scheme_dark .menu_mobile_nav_area,
.menu_mobile.scheme_dark .menu_mobile_content_wrap_inner.without_socials .menu_mobile_nav_area {
	position: relative;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	width: 100%;
	max-height: none;
	margin: clamp(1rem, 4vw, 2rem) 0 0;
	overflow: visible;
}

.menu_mobile.scheme_dark .menu_mobile_nav_area > ul {
	align-items: stretch;
}

.menu_mobile.scheme_dark .menu_mobile_nav_area > ul > .menu-item + .menu-item {
	border-top: 1px solid var(--appleby-card-line);
}

.menu_mobile.scheme_dark .menu_mobile_nav_area > ul > .menu-item > a {
	position: relative;
	display: block;
	width: 100%;
	padding: .85rem var(--appleby-menu-pad);
	font-size: clamp(1.55rem, 6vw, 2.25rem);
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--appleby-card-ink);
	transition: color .25s var(--appleby-menu-ease), background-color .25s var(--appleby-menu-ease);
}

/* The affordance is a bar that grows down the left edge. It animates on
   transform alone, so a row highlight never costs a layout pass. */
.menu_mobile.scheme_dark .menu_mobile_nav_area > ul > .menu-item > a:before {
	content: "";
	position: absolute;
	top: .6rem;
	bottom: .6rem;
	left: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background-color: var(--appleby-card-accent);
	transform: scaleY(0);
	transform-origin: center top;
	transition: transform .3s var(--appleby-menu-ease);
}

.menu_mobile.scheme_dark .menu_mobile_inner .menu_mobile_nav_area > ul > .menu-item > a:hover,
.menu_mobile.scheme_dark .menu_mobile_inner .menu_mobile_nav_area > ul > .menu-item > a:focus-visible,
.menu_mobile.scheme_dark .menu_mobile_inner .menu_mobile_nav_area > ul > .current-menu-item > a,
.menu_mobile.scheme_dark .menu_mobile_inner .menu_mobile_nav_area > ul > .current-menu-ancestor > a {
	color: var(--appleby-card-accent);
	background-color: rgba(255, 255, 255, .04);
}

.menu_mobile.scheme_dark .menu_mobile_nav_area > ul > .menu-item > a:hover:before,
.menu_mobile.scheme_dark .menu_mobile_nav_area > ul > .menu-item > a:focus-visible:before,
.menu_mobile.scheme_dark .menu_mobile_nav_area > ul > .current-menu-item > a:before,
.menu_mobile.scheme_dark .menu_mobile_nav_area > ul > .current-menu-ancestor > a:before {
	transform: scaleY(1);
}

/* Submenu rows sit inside the parent row's width, indented rather than
   separately framed, so a nested level reads as part of it. */
.menu_mobile.scheme_dark .menu_mobile_nav_area > ul > .menu-item .menu-item > a {
	padding: .5rem var(--appleby-menu-pad) .5rem calc(var(--appleby-menu-pad) + 1.25rem);
	font-size: 1.0625rem;
	color: var(--appleby-card-text);
}

/* Call action -------------------------------------------------
The one thing a phone visitor is most likely to want, and the only content in
the panel that is not a link to a page. */

.menu_mobile.scheme_dark .appleby_menu_call {
	display: flex;
	align-items: center;
	gap: .9rem;
	flex: 0 0 auto;
	margin: clamp(1.5rem, 5vw, 2.25rem) var(--appleby-menu-pad) 0;
	padding: .9rem 1.25rem;
	border: 1px solid rgba(var(--appleby-card-accent-rgb), .45);
	border-radius: 14px;
	background-color: rgba(var(--appleby-card-accent-rgb), .1);
	transition: background-color .25s var(--appleby-menu-ease), border-color .25s var(--appleby-menu-ease);
}

.menu_mobile.scheme_dark .appleby_menu_call:hover,
.menu_mobile.scheme_dark .appleby_menu_call:focus-visible {
	border-color: var(--appleby-card-accent);
	background-color: rgba(var(--appleby-card-accent-rgb), .2);
}

.menu_mobile.scheme_dark .appleby_menu_call .icon-phone {
	flex: 0 0 auto;
	font-size: 1.25rem;
	color: var(--appleby-card-accent);
}

.menu_mobile.scheme_dark .appleby_menu_call_text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.menu_mobile.scheme_dark .appleby_menu_call_label {
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--appleby-card-muted);
}

.menu_mobile.scheme_dark .menu_mobile_inner .appleby_menu_call_number {
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--appleby-card-ink);
}

/* Social row --------------------------------------------------
Pushed to the foot of the panel by the auto margin, so a short menu leaves it
at the bottom of the screen and a long one lets it follow the list. */

.menu_mobile.scheme_dark .socials_mobile {
	position: relative;
	bottom: auto;
	left: auto;
	display: flex;
	align-items: center;
	/* The targets below are round and touching at margin 0, so the row spaces
	   them rather than the items spacing themselves. */
	gap: .35rem;
	flex: 0 0 auto;
	width: auto;
	margin: clamp(2rem, 7vw, 3rem) var(--appleby-menu-pad) 0;
	margin-top: auto;
	padding: 1.25rem 0 max(1.25rem, env(safe-area-inset-bottom));
}

.menu_mobile.scheme_dark .socials_mobile:before {
	background-color: var(--appleby-card-line);
}

/* 44px targets. The theme sizes these to the glyph, which on a phone is a
   16px tap area sitting a thumb-width from the edge of the screen. */
.menu_mobile.scheme_dark .menu_mobile_inner .socials_mobile .social_item {
	margin: 0;
}

.menu_mobile.scheme_dark .socials_mobile .social_item > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	transition: background-color .25s var(--appleby-menu-ease);
}

.menu_mobile.scheme_dark .socials_mobile .social_item > a:hover,
.menu_mobile.scheme_dark .socials_mobile .social_item > a:focus-visible {
	background-color: rgba(255, 255, 255, .08);
}

.menu_mobile.scheme_dark .socials_mobile .social_item .social_icon {
	color: var(--appleby-card-text);
}

/* Focus and motion --------------------------------------------
Rings have to be light to be seen on this surface, the same as the footer. */

.menu_mobile.scheme_dark a:focus-visible,
.menu_mobile.scheme_dark .menu_mobile_close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

/* The theme staggers the logo, the close button and the social icons in, but
   not the navigation - the part the panel exists for. Delays are held short
   so the last row is in place well before a thumb can reach it. */
.menu_mobile.scheme_dark.opened .menu_mobile_nav_area > ul > .menu-item {
	animation: fadeInUpSmall .45s var(--appleby-menu-ease) both;
}

.menu_mobile.scheme_dark.opened .menu_mobile_nav_area > ul > .menu-item:nth-child(1) { animation-delay: .18s; }
.menu_mobile.scheme_dark.opened .menu_mobile_nav_area > ul > .menu-item:nth-child(2) { animation-delay: .24s; }
.menu_mobile.scheme_dark.opened .menu_mobile_nav_area > ul > .menu-item:nth-child(3) { animation-delay: .30s; }
.menu_mobile.scheme_dark.opened .menu_mobile_nav_area > ul > .menu-item:nth-child(4) { animation-delay: .36s; }
.menu_mobile.scheme_dark.opened .menu_mobile_nav_area > ul > .menu-item:nth-child(5) { animation-delay: .42s; }
.menu_mobile.scheme_dark.opened .menu_mobile_nav_area > ul > .menu-item:nth-child(n+6) { animation-delay: .48s; }

.menu_mobile.scheme_dark.opened .appleby_menu_call {
	animation: fadeInUpSmall .45s var(--appleby-menu-ease) .5s both;
}

@keyframes fadeInUpSmall {
	from { opacity: 0; transform: translate3d(0, 12px, 0); }
	to   { opacity: 1; transform: none; }
}

/* The panel's entrance is the theme's; this only stops it, and everything
   added above, from running for anyone who has asked it not to. */
@media (prefers-reduced-motion: reduce) {
	.menu_mobile.scheme_dark,
	.menu_mobile.scheme_dark * {
		transition: none !important;
		animation: none !important;
	}
}

/* Booking channels and the FAQ page
================================================================
Two new pages, no new visual vocabulary: the booking cards join the existing
card system by class - the tilt, the cursor light, the icon plate and the dark
surface are all shared selector lists - and only what is genuinely particular
to them is written here.
================================================================ */

/* Ways to book -------------------------------------------------
Three equal cards. auto-fit rather than a fixed three-column grid, so a fourth
channel or a dropped one both still land on a sensible row. */

.appleby_page .appleby_channels_items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--appleby-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Locations ------------------------------------------------
Two sites side by side, so a reader comparing the timetables sees both at once.
Same card as the rest of the page - only the contents differ. */

.appleby_page .appleby_locations_items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--appleby-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.appleby_page .appleby_locations_item {
	padding: 2rem;
}

.appleby_page .appleby_locations_name {
	margin: 0 0 .5rem;
	color: var(--appleby-card-ink);
	font-size: 1.25rem;
	line-height: 1.3;
	text-wrap: balance;
}

.appleby_page .appleby_locations_address {
	margin: 0;
	color: var(--appleby-card-text);
}

.appleby_page .appleby_locations_subtitle {
	margin: 1.5rem 0 .75rem;
	color: var(--appleby-card-ink);
	font-size: 1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Day against time on one row, so the times line up down the card. */
.appleby_page .appleby_locations_hours {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .5rem 1.25rem;
	margin: 0;
	color: var(--appleby-card-text);
}

.appleby_page .appleby_locations_hours dt {
	font-weight: 700;
}

.appleby_page .appleby_locations_hours dd {
	margin: 0;
	color: var(--appleby-card-ink);
}

.appleby_page .appleby_channels_item {
	display: flex;
	flex-direction: column;
	padding: 2rem;
}

.appleby_page .appleby_channels_title {
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--appleby-card-ink);
	text-wrap: balance;
}

/* The auto margin is what puts the action on a shared baseline across the row
   when one card's copy runs a line longer than its neighbours'. */
.appleby_page .appleby_channels_text {
	flex: 1 1 auto;
	margin: 0 0 1.5rem;
	color: var(--appleby-card-text);
}

.appleby_page .appleby_channels_links {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin: 0;
}

/* A pill, not a text link: on a page whose whole job is getting someone to
   make contact, the action should look like something you press - and it has
   to clear 44px on both axes to be one on a phone. */
.appleby_page .appleby_channels_link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	padding: .5rem 1.1rem;
	border: 1px solid rgba(var(--appleby-card-accent-rgb), .45);
	border-radius: 999px;
	background: rgba(var(--appleby-card-accent-rgb), .1);
	color: var(--appleby-card-ink);
	font-weight: 700;
	transition:
		background-color var(--appleby-fast) var(--appleby-ease),
		border-color var(--appleby-fast) var(--appleby-ease),
		transform var(--appleby-fast) var(--appleby-ease);
}

.appleby_page .appleby_channels_link:hover,
.appleby_page .appleby_channels_link:focus-visible {
	transform: translateY(-2px);
	border-color: var(--appleby-card-accent);
	background: rgba(var(--appleby-card-accent-rgb), .22);
	color: #FFFFFF;
}

.appleby_page .appleby_channels_link [class^="icon-"] {
	font-size: 1rem;
	color: var(--appleby-card-accent);
}

.appleby_page .appleby_channels_link:hover [class^="icon-"],
.appleby_page .appleby_channels_link:focus-visible [class^="icon-"] {
	color: inherit;
}

/* Focus rings are light here, the same as everywhere else on a dark card. */
.appleby_page .appleby_channels_link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* FAQ jump list ------------------------------------------------
Five groups is short enough to scan and long enough that scrolling past four of
them to reach the fifth is a waste. Chips rather than the bulleted anchor list
the policy pages use: they read as controls, and they wrap to two tidy rows on
a phone instead of five stacked bullets. */

.appleby_page #faq-jump .appleby_list_items {
	display: flex;
	flex-wrap: wrap;
	/* Left, to sit under the heading above them - every section title on the
	   site is left-aligned, and centred chips read as a separate element. */
	justify-content: flex-start;
	gap: .625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.appleby_page #faq-jump .appleby_list_items li:before {
	content: none;
}

.appleby_page #faq-jump .appleby_list_items li {
	margin: 0;
	padding: 0;
}

.appleby_page #faq-jump .appleby_list_items a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .5rem 1.1rem;
	border: 1px solid var(--appleby-line-2);
	border-radius: 999px;
	background: var(--theme-color-bg_color, #fff);
	color: var(--appleby-ink);
	text-decoration: none;
	transition:
		border-color var(--appleby-fast) var(--appleby-ease),
		background-color var(--appleby-fast) var(--appleby-ease),
		transform var(--appleby-fast) var(--appleby-ease);
}

.appleby_page #faq-jump .appleby_list_items a:hover,
.appleby_page #faq-jump .appleby_list_items a:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(var(--appleby-brand-rgb), .5);
	background: rgba(var(--appleby-brand-2-rgb), .12);
	color: var(--appleby-brand);
}

/* Any band that is an anchor target - the FAQ groups, the enquiry form on Book
   Now - must not land under the header that floats over it. */
.appleby_page .appleby_section[id] {
	scroll-margin-top: 6rem;
}

/* FAQ "see all" link -------------------------------------------
Every page answers a handful; this is the way out for the reader whose question
was not one of them. */

/* Centred on the accordion, not on the band. Without the matching max-width
   the link centres across the full section while the list above it stops at
   48rem, so it lands off to the right of everything it belongs to. */
.appleby_page .appleby_faq_more {
	max-width: 48rem;
	margin: 1.75rem 0 0;
	text-align: center;
}

.appleby_page .appleby_faq_more_link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	padding: .5rem 0;
	color: var(--appleby-brand);
	font-weight: 700;
}

.appleby_page .appleby_faq_more_link:after {
	content: "\2192";
	transition: transform var(--appleby-fast) var(--appleby-ease);
}

.appleby_page .appleby_faq_more_link:hover:after,
.appleby_page .appleby_faq_more_link:focus-visible:after {
	transform: translateX(4px);
}

/* The alternate-tone FAQ bands on the FAQ page put this link on the darker
   surface, where the page green is too close to the background. */
.appleby_page .appleby_tone_alt .appleby_faq_more_link {
	color: var(--theme-color-alter_link, #909C87);
}

/* The CTA panel heading -----------------------------------------
The panel is a dark surface but a section title is coloured for the light page,
so the heading landed as near-black on near-black. It also sits above copy that
is already at heading scale, which is why it takes a step up rather than the
usual section-title size. */

.appleby_page .appleby_cta .appleby_section_title {
	max-width: 24ch;
	margin: 0 auto 1.25rem;
	color: #fff;
	font-size: clamp(1.9rem, 4.4vw, 2.9rem);
	line-height: 1.15;
	text-wrap: balance;
}

/* ==============================================================
   RESPONSIVE LAYER
   ==============================================================
   Moved here from the child theme's responsive.css, which no longer exists.

   That file was enqueued by the parent and printed at position 3 in the head
   while this stylesheet printed at position 9, so every responsive rule that
   collided with a base rule at equal specificity silently lost - the footer
   columns never stacked on a phone, for one. The cause is the theme's own CSS
   optimiser (Theme Panel > "Optimize CSS and JS loading", left on 'soft' by the
   demo import), which collects the enqueued styles and re-emits them in an
   order of its own, ignoring both the media attribute and stylesheet
   dependencies.

   Rather than fight it, the rules live at the end of the file they override.
   Position in one file is a cascade guarantee no optimiser can reorder.
   ============================================================== */
/* Appleby responsive
==============================================================
Card grids use auto-fit so they reflow on their own; these rules handle the
things intrinsic sizing cannot: two-column lists, the contact split, and the
type scale. Breakpoints match the parent theme's own. */

/* Tablet and below */
@media (max-width: 1023px) {
	.appleby_page .appleby_contact_has_form {
		grid-template-columns: 1fr;
	}

	.appleby_page .appleby_hero .appleby_inner,
	.appleby_page .appleby_faq_items,
	.appleby_page .appleby_faq_more {
		max-width: none;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.appleby_page .appleby_list_columns {
		columns: 1;
	}

	.appleby_page .appleby_hero_lead {
		font-size: 1.05rem;
	}

	.appleby_page .appleby_pricing_price {
		font-size: 2rem;
	}

	.appleby_page .appleby_services_item,
	.appleby_page .appleby_pricing_item {
		padding: 1.5rem;
	}

	.appleby_page .appleby_credentials_item {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		padding: 1.25rem;
		text-align: left;
	}

	.appleby_page .appleby_credentials_icon {
		margin: 0;
		font-size: 1.75rem;
	}

	.appleby_page .appleby_credentials_value {
		font-size: 1.1rem;
	}

	/* Full-width buttons read as one clear action per row on a phone. */
	.appleby_page .appleby_buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.appleby_page .appleby_steps_item {
		padding-top: 0;
		padding-left: 3.75rem;
	}

	.appleby_page .appleby_steps_item:before {
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* Slider: full viewport everywhere. On phones the portrait source does the
   work, so only the dots need lifting clear of the home indicator. */
@media (max-width: 767px) {
	.appleby_page .appleby_slider_dots {
		bottom: 1.5rem;
	}
}

/* Landscape phones are too short for a full-height slide to show anything
   useful, so cap it and let the page scroll. */
@media (max-height: 460px) and (orientation: landscape) {
	.appleby_page .appleby_slider_slide img {
		height: 460px;
	}
}

/* Footer: stack the columns before they get too narrow to read */
@media (max-width: 1023px) {
	.appleby_footer_columns {
		grid-template-columns: 1fr 1fr;
	}

	.appleby_footer_about {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.appleby_footer_columns {
		grid-template-columns: 1fr;
	}

	.appleby_footer_base {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Consent banner: stack on small screens, buttons full width */
@media (max-width: 767px) {
	.appleby_consent {
		padding: 1.25rem;
		max-height: 85vh;
		overflow-y: auto;
	}

	.appleby_consent_actions {
		width: 100%;
	}

	.appleby_consent_btn {
		flex: 1 1 100%;
	}
}

/* Feature bands and the service dialog */
@media (max-width: 767px) {
	/* One card per row: the tick cards are short, but two of them at phone
	   width wraps every label onto three lines. */
	.appleby_page .appleby_tone_feature .appleby_list_items {
		grid-template-columns: 1fr;
	}

	.appleby_page .appleby_tone_feature .appleby_list_items li,
	.appleby_page .appleby_tone_feature .appleby_steps_item {
		padding: 1.25rem;
	}

	.appleby_page .appleby_tone_feature .appleby_steps_item {
		padding-top: 4.75rem;
	}

	.appleby_page .appleby_tone_feature .appleby_steps_item:before {
		top: 1.25rem;
		left: 1.25rem;
		width: 2.5rem;
		height: 2.5rem;
	}

	/* Near full-screen sheet: a centred card wastes a phone viewport. */
	.appleby_page .appleby_modal {
		width: 100%;
		max-width: none;
		max-height: 92vh;
		margin: auto 0 0;
		border-radius: var(--appleby-radius) var(--appleby-radius) 0 0;
	}

	.appleby_page .appleby_modal_actions {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* Small mobile */
@media (max-width: 479px) {
	.appleby_page .appleby_services_items,
	.appleby_page .appleby_pricing_items,
	.appleby_page .appleby_credentials_items {
		grid-template-columns: 1fr;
	}

	.appleby_page .appleby_socials {
		gap: 1rem;
	}
}

/* Ultra-wide: stop the bands stretching text to unreadable line lengths */
@media (min-width: 1680px) {
	.appleby_page .appleby_prose .appleby_inner,
	.appleby_page .appleby_list .appleby_inner {
		max-width: 72rem;
	}
}

/* Premium layer responsive
==============================================================
The effects simplify as the screen narrows rather than switching off: the
palette, gradients, depth and entrance animations stay everywhere, while the
pointer-driven effects and the heaviest filters drop away where they cost most
and are least visible. */

/* Laptop and below: shorter entrance travel, so a band is not still sliding
   when the next one arrives. */
@media (max-width: 1279px) {
	.appleby-reveal-ready .appleby_page [data-appleby-reveal] > .appleby_inner {
		transform: translate3d(0, 1.5rem, 0);
	}
}

/* Tablet */
@media (max-width: 1023px) {
	.appleby_page .appleby_hero_title {
		font-size: clamp(2.1rem, 6vw, 3.2rem);
	}

	.appleby_page .appleby_section_title {
		font-size: clamp(1.7rem, 4.5vw, 2.4rem);
	}
}

/* Mobile */
@media (max-width: 767px) {
	.appleby_page .appleby_services_item,
	.appleby_page .appleby_pricing_item {
		padding: 1.6rem;
	}

	.appleby_page .appleby_services_icon,
	.appleby_page .appleby_credentials_icon,
	.appleby_page .appleby_modal_icon {
		width: 3rem;
		height: 3rem;
		margin-bottom: 1rem;
		font-size: 1.25rem;
		/* No idle float on a phone: barely visible, never free. */
		animation: none;
	}

	.appleby_page .appleby_pricing_price {
		font-size: 2.4rem;
	}

	/* Cards arrive faster and closer together, or the last one in a long list
	   is still waiting when it is already well past the fold. */
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_services_item,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_pricing_item,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_credentials_item,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_steps_item,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_gallery_item,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_list_items > li,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_faq_item {
		transition-delay: calc(var(--i, 0) * 40ms);
	}

	/* Blur-to-sharp on a heading is a full-width filter pass; on a phone it is
	   the one entrance effect worth dropping. */
	.appleby-reveal-ready .appleby_page [data-appleby-reveal] .appleby_section_title {
		filter: none;
	}
}

/* Large mobile and below: tighter bands and radii. */
@media (max-width: 479px) {
	.appleby_page {
		--appleby-band: clamp(3rem, 12vw, 4.5rem);
		--appleby-radius: 16px;
	}

	.appleby_page .appleby_cta .appleby_inner {
		padding: 1.75rem;
	}
}

/* CTA panel on small screens
==============================================================
The two actions stack, and the aurora stops drifting: on a phone it is a
large blurred layer being repainted for an effect that is barely perceptible
at that size. */

@media (max-width: 767px) {
	.appleby_page .appleby_cta .appleby_inner {
		padding: 2.5rem 1.5rem;
		border-radius: var(--appleby-radius);
	}

	.appleby_page .appleby_cta .appleby_inner:before,
	.appleby_page .appleby_cta .appleby_inner:after {
		animation: none;
	}

	.appleby_page .appleby_cta .appleby_buttons {
		margin-top: 1.75rem;
	}
}

/* Booking channels and locations: one card per row before the copy gets too
   narrow */
@media (max-width: 767px) {
	.appleby_page .appleby_channels_items,
	.appleby_page .appleby_locations_items {
		grid-template-columns: 1fr;
	}

	.appleby_page .appleby_channels_item,
	.appleby_page .appleby_locations_item {
		padding: 1.6rem;
	}

	/* Full-width actions, so each card closes on one clear thing to press. */
	.appleby_page .appleby_channels_links {
		flex-direction: column;
		align-items: stretch;
	}

	.appleby_page .appleby_channels_link {
		justify-content: center;
	}
}

/* reCAPTCHA -------------------------------------------------
 *
 * The badge is a fixed overlay pinned bottom-right of every page that loads
 * it, over the footer on a phone and outside the tab order everywhere. It is
 * hidden and replaced by .appleby_form_notice, which says the same thing in
 * reading order beside the form - see appleby_recaptcha_notice() in
 * functions.php for why that is the accessible swap rather than a cosmetic one.
 *
 * visibility, not display: reCAPTCHA v3 measures the badge, and a display:none
 * badge makes it re-inject one.
 */
.grecaptcha-badge {
	visibility: hidden;
}

.appleby_page .appleby_form_notice {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--theme-color-text_light);
}

.appleby_page .appleby_form_notice a {
	text-decoration: underline;
}

/* Main landmark ---------------------------------------------
 *
 * appleby_open_main_landmark() puts a <main> between .content and the article,
 * which the site had no landmark for at all. One theme rule zeroes the
 * article's padding on the fullscreen body style by direct descent - so it
 * stops matching with an element in between, and the full-bleed bands pick up
 * padding they are built not to have. Restated here through the new element.
 */
.body_style_fullscreen [class*=content_wrap] > .content > main > article.page {
	padding: 0;
}