/* hype-bundle ea211c657f02f6bf547024994b3576b1 */
/* Generated by scripts/build_css_bundle.py from the files below. Edit those, not this. */

/* ==== style.css ==== */
/*
Theme Name: Spectra One Child
Theme URI: 
Author: Alex Warren
Author URI: 
Description: Hype Dance Company child theme of Spectra One. Design tokens come from design-system/tokens.json.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 5.7
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: spectra-one
Text Domain: spectra-one-child
Tags: 
*/

/* ==== assets/css/tokens.css ==== */
/* Generated by scripts/build_theme.py from design-system/tokens.json. Do not edit by hand. */

/* Mobile (<640px): smaller top-level headings and the mobile header height. */
@media (max-width: 639px) {
	html:root {
		--wp--preset--font-size--display: 44px;
		--wp--custom--type--display--font-size: 44px;
		--wp--custom--type--display--line-height: 48px;
		--wp--preset--font-size--h-1: 36px;
		--wp--custom--type--h-1--font-size: 36px;
		--wp--custom--type--h-1--line-height: 42px;
		--wp--preset--font-size--h-2: 28px;
		--wp--custom--type--h-2--font-size: 28px;
		--wp--custom--type--h-2--line-height: 34px;
		--wp--custom--type--brand-name--font-size: 36px;
		--wp--custom--type--brand-name--line-height: 36px;
		--wp--custom--type--quote--font-size: 22px;
		--wp--custom--type--quote--line-height: 32px;
		--wp--custom--header-height: 64px;
	}
}

/* Gutter and section padding: mobile is the theme.json default; tablet and desktop step up. */
@media (min-width: 640px) {
	html:root {
		--wp--custom--gutter: 24px;
		--wp--custom--section-padding: 64px;
	}
}
@media (min-width: 1024px) {
	html:root {
		--wp--custom--gutter: 32px;
		--wp--custom--section-padding: 96px;
	}
}

/* Links in body text. */
a {
	text-underline-offset: 3px;
}

/* Links in running text: thin underline, thickening on hover. */
p a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 150ms ease-out;
}
/* Only where a real pointer hovers: on phones a tapped link stays "hovered" and looked bold. */
@media (hover: hover) {
	p a:not(.wp-element-button):hover {
		text-decoration-thickness: 3px;
	}
}
@media (prefers-reduced-motion: reduce) {
	p a:not(.wp-element-button) {
		transition: none;
	}
}

/* Focus: a solid 3px ring, offset 2px, on every interactive element. Never remove it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}

/* Buttons are 48px tall (tap-target). Hover: 1px lift, card shadow, one step lighter (theme.json).
   The lift and shadow only where a pointer really hovers: on a phone a tapped button would keep them. */
.wp-element-button,
.wp-block-button__link {
	min-height: var(--wp--custom--tap-target);
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
@media (hover: hover) {
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}
@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}

/* ==== assets/css/tokens-dark.css ==== */
/* Generated by scripts/build_theme.py from design-system/tokens.json. Do not edit by hand. */
/* Dark theme: swaps every colour and shadow token. Loaded only when HYPE_DARK_MODE is true (functions.php). */

@media (prefers-color-scheme: dark) {
	html:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--surface: #0e1b25;
		--wp--preset--color--surface-raised: #152733;
		--wp--preset--color--surface-sunken: #0a141c;
		--wp--preset--color--ink: #e9eef2;
		--wp--preset--color--ink-muted: #a7b6c2;
		--wp--preset--color--border-subtle: #243746;
		--wp--preset--color--border-control: #7f92a1;
		--wp--preset--color--border-floating: #7f92a1;
		--wp--preset--color--hype-blue: #34b0df;
		--wp--preset--color--hype-blue-hover: #52bce4;
		--wp--preset--color--on-brand: #0e1b25;
		--wp--preset--color--hype-blue-deep: #7fcfee;
		--wp--preset--color--hype-blue-tint: #12384a;
		--wp--preset--color--coral: #f28b70;
		--wp--preset--color--coral-hover: #f49c85;
		--wp--preset--color--coral-deep: #f7a48d;
		--wp--preset--color--coral-tint: #3a2019;
		--wp--preset--color--button-primary: #f28b70;
		--wp--preset--color--button-primary-hover: #f49c85;
		--wp--preset--color--button-highlight: #34b0df;
		--wp--preset--color--button-highlight-hover: #52bce4;
		--wp--preset--color--plum: #c39ddb;
		--wp--preset--color--plum-hover: #ccace0;
		--wp--preset--color--plum-deep: #d6b3e8;
		--wp--preset--color--plum-tint: #2e1f38;
		--wp--preset--color--sunshine: #ffb547;
		--wp--preset--color--sunshine-deep: #ffc978;
		--wp--preset--color--sunshine-tint: #3a2e15;
		--wp--preset--color--sage-deep: #8fd6b1;
		--wp--preset--color--sage-tint: #173a2a;
		--wp--preset--color--success-on-inverse: #8fd6b1;
		--wp--preset--color--danger: #ff8a80;
		--wp--preset--color--danger-tint: #3a1a19;
		--wp--preset--color--focus-ring: #7fcfee;
		--wp--preset--color--inverse-surface: #12293a;
		--wp--preset--color--on-inverse: #e9eef2;
		--wp--preset--color--primary: #34b0df;
		--wp--preset--color--secondary: #7fcfee;
		--wp--preset--color--heading: #e9eef2;
		--wp--preset--color--body: #e9eef2;
		--wp--preset--color--foreground: #e9eef2;
		--wp--preset--color--background: #0e1b25;
		--wp--preset--color--tertiary: #12293a;
		--wp--preset--color--quaternary: #0a141c;
		--wp--preset--color--outline: #243746;
		--wp--preset--color--neutral: #a7b6c2;
		--wp--preset--color--custom-hype-blue: #34b0df;
		--wp--preset--shadow--card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
		--wp--preset--shadow--raised: 0 12px 32px rgba(0,0,0,0.5);
	}
}

html:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--surface: #0e1b25;
	--wp--preset--color--surface-raised: #152733;
	--wp--preset--color--surface-sunken: #0a141c;
	--wp--preset--color--ink: #e9eef2;
	--wp--preset--color--ink-muted: #a7b6c2;
	--wp--preset--color--border-subtle: #243746;
	--wp--preset--color--border-control: #7f92a1;
	--wp--preset--color--border-floating: #7f92a1;
	--wp--preset--color--hype-blue: #34b0df;
	--wp--preset--color--hype-blue-hover: #52bce4;
	--wp--preset--color--on-brand: #0e1b25;
	--wp--preset--color--hype-blue-deep: #7fcfee;
	--wp--preset--color--hype-blue-tint: #12384a;
	--wp--preset--color--coral: #f28b70;
	--wp--preset--color--coral-hover: #f49c85;
	--wp--preset--color--coral-deep: #f7a48d;
	--wp--preset--color--coral-tint: #3a2019;
	--wp--preset--color--button-primary: #f28b70;
	--wp--preset--color--button-primary-hover: #f49c85;
	--wp--preset--color--button-highlight: #34b0df;
	--wp--preset--color--button-highlight-hover: #52bce4;
	--wp--preset--color--plum: #c39ddb;
	--wp--preset--color--plum-hover: #ccace0;
	--wp--preset--color--plum-deep: #d6b3e8;
	--wp--preset--color--plum-tint: #2e1f38;
	--wp--preset--color--sunshine: #ffb547;
	--wp--preset--color--sunshine-deep: #ffc978;
	--wp--preset--color--sunshine-tint: #3a2e15;
	--wp--preset--color--sage-deep: #8fd6b1;
	--wp--preset--color--sage-tint: #173a2a;
	--wp--preset--color--success-on-inverse: #8fd6b1;
	--wp--preset--color--danger: #ff8a80;
	--wp--preset--color--danger-tint: #3a1a19;
	--wp--preset--color--focus-ring: #7fcfee;
	--wp--preset--color--inverse-surface: #12293a;
	--wp--preset--color--on-inverse: #e9eef2;
	--wp--preset--color--primary: #34b0df;
	--wp--preset--color--secondary: #7fcfee;
	--wp--preset--color--heading: #e9eef2;
	--wp--preset--color--body: #e9eef2;
	--wp--preset--color--foreground: #e9eef2;
	--wp--preset--color--background: #0e1b25;
	--wp--preset--color--tertiary: #12293a;
	--wp--preset--color--quaternary: #0a141c;
	--wp--preset--color--outline: #243746;
	--wp--preset--color--neutral: #a7b6c2;
	--wp--preset--color--custom-hype-blue: #34b0df;
	--wp--preset--shadow--card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
	--wp--preset--shadow--raised: 0 12px 32px rgba(0,0,0,0.5);
}

/* ==== assets/css/components.css ==== */
/* Generated by scripts/build_theme.py from design-system/components/bundle.css. Do not edit by hand. */

:where([class*="hdc-"]) {
	--surface: var(--wp--preset--color--surface);
	--surface-raised: var(--wp--preset--color--surface-raised);
	--surface-sunken: var(--wp--preset--color--surface-sunken);
	--ink: var(--wp--preset--color--ink);
	--ink-muted: var(--wp--preset--color--ink-muted);
	--border-subtle: var(--wp--preset--color--border-subtle);
	--border-control: var(--wp--preset--color--border-control);
	--border-floating: var(--wp--preset--color--border-floating);
	--hype-blue: var(--wp--preset--color--hype-blue);
	--hype-blue-hover: var(--wp--preset--color--hype-blue-hover);
	--on-brand: var(--wp--preset--color--on-brand);
	--hype-blue-deep: var(--wp--preset--color--hype-blue-deep);
	--hype-blue-tint: var(--wp--preset--color--hype-blue-tint);
	--coral: var(--wp--preset--color--coral);
	--coral-hover: var(--wp--preset--color--coral-hover);
	--coral-deep: var(--wp--preset--color--coral-deep);
	--coral-tint: var(--wp--preset--color--coral-tint);
	--button-primary: var(--wp--preset--color--button-primary);
	--button-primary-hover: var(--wp--preset--color--button-primary-hover);
	--button-highlight: var(--wp--preset--color--button-highlight);
	--button-highlight-hover: var(--wp--preset--color--button-highlight-hover);
	--plum: var(--wp--preset--color--plum);
	--plum-hover: var(--wp--preset--color--plum-hover);
	--plum-deep: var(--wp--preset--color--plum-deep);
	--plum-tint: var(--wp--preset--color--plum-tint);
	--sunshine: var(--wp--preset--color--sunshine);
	--sunshine-deep: var(--wp--preset--color--sunshine-deep);
	--sunshine-tint: var(--wp--preset--color--sunshine-tint);
	--sage-deep: var(--wp--preset--color--sage-deep);
	--sage-tint: var(--wp--preset--color--sage-tint);
	--success-on-inverse: var(--wp--preset--color--success-on-inverse);
	--danger: var(--wp--preset--color--danger);
	--danger-tint: var(--wp--preset--color--danger-tint);
	--focus-ring: var(--wp--preset--color--focus-ring);
	--inverse-surface: var(--wp--preset--color--inverse-surface);
	--on-inverse: var(--wp--preset--color--on-inverse);
	--space-1: var(--wp--preset--spacing--1);
	--space-2: var(--wp--preset--spacing--2);
	--space-3: var(--wp--preset--spacing--3);
	--space-4: var(--wp--preset--spacing--4);
	--space-5: var(--wp--preset--spacing--5);
	--space-6: var(--wp--preset--spacing--6);
	--space-7: var(--wp--preset--spacing--7);
	--space-8: var(--wp--preset--spacing--8);
	--space-9: var(--wp--preset--spacing--9);
	--space-10: var(--wp--preset--spacing--10);
	--radius-sm: var(--wp--custom--radius--sm);
	--radius-md: var(--wp--custom--radius--md);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-xl: var(--wp--custom--radius--xl);
	--radius-pill: var(--wp--custom--radius--pill);
	--shadow-card: var(--wp--preset--shadow--card);
	--shadow-raised: var(--wp--preset--shadow--raised);
	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--tap-target: var(--wp--custom--tap-target);
	--measure: var(--wp--custom--measure);
	--container-max: var(--wp--custom--container-max);
	--header-height: var(--wp--custom--header-height);
}

/* Hype Dance Company — component styles. Class prefix: hdc- */

.hdc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  position: relative; min-height: var(--tap-target); padding: var(--space-3) var(--space-5);
  font-family: var(--font-body); font-size: 16px; line-height: 20px; font-weight: 600;
  border-radius: var(--radius-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
@media (hover: hover) { .hdc-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); } }
.hdc-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Main button: blue in light mode, coral in dark mode (button-primary token). */
.hdc-btn--primary { background: var(--button-primary); color: var(--on-brand); }
.hdc-btn--primary:hover { background: var(--button-primary-hover); }
.hdc-btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-control); }
.hdc-btn--secondary:hover { background: var(--surface-sunken); }
/* Highlight button: the opposite colour in each theme (button-highlight token). */
.hdc-btn--warm { background: var(--button-highlight); color: var(--on-brand); }
.hdc-btn--warm:hover { background: var(--button-highlight-hover); }
/* Retired October 2026: there is no plum button. --adult is kept only so older markup shows the primary blue. */
.hdc-btn--adult { background: var(--button-primary); color: var(--on-brand); }
.hdc-btn--adult:hover { background: var(--button-primary-hover); }
.hdc-btn--link { background: transparent; color: var(--hype-blue-deep); padding-left: 0; padding-right: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness 150ms ease-out; }
.hdc-btn--link:hover { box-shadow: none; transform: none; }
/* Hover-only effects stay off touch screens, where a tapped link or card would keep them. */
@media (hover: hover) { .hdc-btn--link:hover { text-decoration-thickness: 3px; } }
@media (prefers-reduced-motion: reduce) { .hdc-btn { transition: none; } .hdc-btn:hover { transform: none; } }

/* Links in running text: 1px underline that thickens to 3px on hover. */
.hdc-prose a { color: var(--hype-blue-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness 150ms ease-out; }
@media (hover: hover) { .hdc-prose a:hover { text-decoration-thickness: 3px; } }
@media (prefers-reduced-motion: reduce) { .hdc-prose a, .hdc-btn--link { transition: none; } }

/* Category label: a coloured dot and coloured text, no background. Pills are for buttons only. */
.hdc-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em;
  white-space: nowrap; background: none; padding: 0;
}
.hdc-tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* Age groups: children (starting ages 3–11), teens (12–16), adults (17+), plus external classes run by others in our studios. --syllabus, --kids and --hire are older names for --children, --teens and --external. */
.hdc-tag--children, .hdc-tag--syllabus { color: var(--hype-blue-deep); }
.hdc-tag--teens, .hdc-tag--kids { color: var(--sunshine-deep); }
.hdc-tag--adult { color: var(--plum-deep); }
.hdc-tag--external, .hdc-tag--hire { color: var(--sage-deep); }

.hdc-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-raised); color: var(--ink);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-card); font-family: var(--font-body);
}
/* Card photo: a 4:3 slot, edge to edge at the top of the card; an empty slot shows the tint. */
.hdc-card__media {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
  aspect-ratio: 4 / 3; flex: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; position: relative;
  background: var(--hype-blue-tint);
}
.hdc-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Every card: 16px (space-4) from the photo to the first line of text (the card gap is space-3, plus space-1 here). */
.hdc-card__media, .hdc-card__avatar { margin-bottom: var(--space-1); }
/* News cards use a 16:9 photo, like the Post featured photo. */
.hdc-post-card .hdc-card__media { aspect-ratio: 16 / 9; }
/* Round 96px profile photo at the top of a card (teacher cards). */
.hdc-card__avatar { flex: none; align-self: flex-start; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--hype-blue-tint); }
.hdc-card__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Clickable card: the title link's ::after covers the whole card; one tab stop, no button. */
.hdc-card--link { position: relative; transition: box-shadow 150ms ease-out, transform 150ms ease-out; }
.hdc-card--link .hdc-card__link { color: inherit; text-decoration: none; }
.hdc-card--link .hdc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); }
@media (hover: hover) { .hdc-card--link:hover { box-shadow: var(--shadow-raised); transform: translateY(-1px); } }
.hdc-card--link:hover .hdc-card__link { text-decoration: underline; text-underline-offset: 3px; }
.hdc-card--link .hdc-card__link:focus-visible { outline: none; }
.hdc-card--link .hdc-card__link:focus-visible::after { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hdc-card--link { transition: none; } .hdc-card--link:hover { transform: none; } }
.hdc-card__title { font-family: var(--font-display); font-size: 26px; line-height: 34px; font-weight: 700; margin: 0; }
.hdc-card__meta { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin: 0; }
.hdc-card__body { font-size: 17px; line-height: 28px; margin: 0; }
.hdc-card__actions { margin-top: auto; padding-top: var(--space-2); display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hdc-timetable { font-family: var(--font-body); color: var(--ink); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
/* Day heading: the day in the h4 style on a hype-blue-tint strip, so each day reads as a title. */
.hdc-timetable__day { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 700; color: var(--ink); background: var(--hype-blue-tint); padding: var(--space-4) var(--space-5); margin: 0; }
.hdc-timetable__list { list-style: none; margin: 0; padding: 0; }
.hdc-timetable__row { display: grid; grid-template-columns: 112px 1fr auto; gap: var(--space-4); align-items: center; min-height: var(--tap-target); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle); }
.hdc-timetable__time { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hdc-timetable__row:has(.hdc-timetable__action) { grid-template-columns: 112px 1fr auto auto; }
/* Book or Contact link at the end of a row. */
.hdc-timetable__action { font-weight: 600; color: var(--hype-blue-deep); text-align: right; white-space: nowrap; }
/* "Ages are a guide only." straight above a timetable: right-aligned over the tags. */
.hdc-note:has(+ .hdc-timetable) { text-align: right; margin: 0 0 var(--space-4); padding-inline: var(--space-5); }
.hdc-timetable__class { font-weight: 600; }
.hdc-timetable__detail { display: block; font-weight: 400; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
/* Phones, and 1024–1199px where two day panels share a row: time and class stack on the left; tag and link stay on the right in fixed-width columns so tags line up across day panels. (The site uses subgrid for the same result.) */
@media (max-width: 560px), (min-width: 1024px) and (max-width: 1199px) {
  .hdc-timetable__day { padding-inline: var(--space-4); }
  .hdc-timetable__row, .hdc-timetable__row:has(.hdc-timetable__action) { grid-template-columns: 1fr minmax(5.5rem, max-content); column-gap: var(--space-2); row-gap: var(--space-1); padding-inline: var(--space-4); }
  .hdc-timetable__row:has(.hdc-timetable__action) { grid-template-columns: 1fr minmax(5.5rem, max-content) 5rem; }
  .hdc-timetable__row:has(.hdc-timetable__action--long) { grid-template-columns: 1fr minmax(5.5rem, max-content) 7rem; }
  /* Rows with no tag and no link (condensed holiday timetables) use the full width. */
  .hdc-timetable__row:not(:has(> .hdc-tag)):not(:has(> .hdc-timetable__action)) { grid-template-columns: 1fr; }
  .hdc-timetable__time { grid-column: 1; grid-row: 1; }
  .hdc-timetable__class { grid-column: 1; grid-row: 2; }
  .hdc-timetable__row > .hdc-tag { grid-column: 2; grid-row: 1 / span 2; }
  /* 16px from the tag on a 375px phone, growing to 48px by 480px. */
  .hdc-timetable__action { grid-column: 3; grid-row: 1 / span 2; padding-left: clamp(8px, calc(30.48vw - 106.3px), 40px); }
  .hdc-timetable__row--stack-tag { grid-template-columns: 1fr auto; }
  .hdc-timetable__row--stack-tag > .hdc-tag { grid-column: 1; grid-row: 3; margin-top: var(--space-1); }
  .hdc-note:has(+ .hdc-timetable) { padding-inline: var(--space-4); }
}
@media (max-width: 400px) {
  .hdc-timetable__row:has(.hdc-timetable__action--long) { grid-template-columns: 1fr minmax(5.5rem, max-content) 5rem; }
  .hdc-timetable__action--long { white-space: normal; }
}

/* Featured quote: squared coral quote mark to the left of the text (drawn with a CSS mask so it takes the `coral` token in both themes), Hanken Grotesk Light text. Stacks on phones. */
.hdc-quote { margin: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--space-6); max-width: calc(var(--measure, 680px) + 104px); color: var(--ink); }
.hdc-quote::before {
  content: ""; grid-column: 1; grid-row: 1 / span 2; width: 72px; height: 63px; margin-top: 4px;
  background: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 199 173'%3E%3Cpath d='M0 0H91V89H48C48 115 62 128 91 136L71 173C27 160 0 128 0 90Z M108 0H199V89H156C156 115 170 128 199 136L179 173C135 160 108 128 108 90Z'/%3E%3C/svg%3E") no-repeat left top / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 199 173'%3E%3Cpath d='M0 0H91V89H48C48 115 62 128 91 136L71 173C27 160 0 128 0 90Z M108 0H199V89H156C156 115 170 128 199 136L179 173C135 160 108 128 108 90Z'/%3E%3C/svg%3E") no-repeat left top / contain;
}
.hdc-quote__text { grid-column: 2; margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 38px; font-weight: 300; }
.hdc-quote__text p { margin: 0; }
.hdc-quote__cite { grid-column: 2; margin-top: var(--space-4); font-family: var(--font-body); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
@media (max-width: 639px) {
  .hdc-quote { grid-template-columns: minmax(0, 1fr); }
  .hdc-quote::before { grid-row: auto; width: 46px; height: 40px; margin: 0 0 var(--space-4); }
  .hdc-quote__text, .hdc-quote__cite { grid-column: 1; }
  .hdc-quote__text { font-size: 22px; line-height: 32px; }
}

/* ===== Page structure: bands, section head, measure ===== */
/* Band: one full-width topic band. Gutter and padding step up at 640px and 1024px. */
.hdc-band { box-sizing: border-box; background: var(--surface); color: var(--ink); padding: var(--space-7) var(--space-4); }
.hdc-band--sunken { background: var(--surface-sunken); }
.hdc-band--inverse { background: var(--inverse-surface); color: var(--on-inverse); }
.hdc-band--inverse :where(h1, h2, h3, h4, a:not(.hdc-btn)) { color: var(--on-inverse); }
@media (min-width: 640px) { .hdc-band { padding: var(--space-8) var(--space-5); } }
@media (min-width: 1024px) { .hdc-band { padding: var(--space-9) var(--space-6); } }
.hdc-band + .hdc-band { margin-top: 0; }
.hdc-band__inner { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; max-width: var(--container-max); margin-inline: auto; }
.hdc-band__more { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
/* Slim band: a utility strip (search) above the first band. */
.hdc-band.hdc-band--slim { padding-block: var(--space-4); }
.hdc-search { width: 100%; max-width: var(--measure); margin: 0; }

/* Section head: eyebrow, heading and intro at the top of a band. */
.hdc-section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure); }
.hdc-section-head :where(h1, h2, h3) { margin: 0; }
.hdc-eyebrow { margin: 0; font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hype-blue-deep); }
.hdc-intro { margin: 0; font-size: 20px; line-height: 32px; }
.hdc-measure { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); }
.hdc-measure > :where(h2, h3) { margin-block: 0 var(--space-1); }

/* ===== Split: text beside a panel or photo ===== */
.hdc-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.hdc-split__main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.hdc-split__media { min-width: 0; }
.hdc-split__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
@media (min-width: 1024px) { .hdc-split { grid-template-columns: minmax(0, var(--measure)) minmax(0, 420px); column-gap: var(--space-9); } }

/* Panel: the side box in a split (Cost / How to start): a raised card like hdc-card. */
.hdc-panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.hdc-panel > * { margin: 0; }

/* ===== Card grid ===== */
.hdc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
.hdc-grid > * { min-width: 0; margin: 0; }
@media (min-width: 640px) { .hdc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hdc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hdc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Gallery ===== */
.hdc-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin: 0; }
.hdc-gallery figure { margin: 0; }
.hdc-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
/* Tall photo: crop from the top so faces stay in. */
.hdc-gallery .hdc-gallery__img--top img { object-position: center top; }
@media (min-width: 640px) { .hdc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hdc-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== FAQ: questions as raised cards (native details/summary) ===== */
.hdc-faq { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure); }
.hdc-faq__item { margin: 0; padding: var(--space-4) var(--space-5); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); font-family: var(--font-body); color: var(--ink); }
.hdc-faq__item { transition: box-shadow 150ms ease-out; }
@media (hover: hover) { .hdc-faq__item:hover { box-shadow: var(--shadow-raised); } }
.hdc-faq__item summary { min-height: var(--tap-target); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; font-weight: 700; list-style: none; }
.hdc-faq__item summary::-webkit-details-marker { display: none; }
.hdc-faq__item summary::marker { content: ""; }
/* Open/close cue: a plus in a tinted circle that turns into a minus when open. */
.hdc-faq__item summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(var(--hype-blue-deep), var(--hype-blue-deep)) center / 14px 2px no-repeat, linear-gradient(var(--hype-blue-deep), var(--hype-blue-deep)) center / 2px 14px no-repeat, var(--hype-blue-tint); transition: background-size 150ms ease-out; }
.hdc-faq__item[open] summary::after { background-size: 14px 2px, 2px 0, auto; }
.hdc-faq__item summary:hover { color: var(--hype-blue-deep); }
@media (prefers-reduced-motion: reduce) { .hdc-faq__item, .hdc-faq__item summary::after { transition: none; } }
.hdc-faq__item summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.hdc-faq__item[open] summary { margin-bottom: var(--space-3); }
.hdc-faq__item p { margin: 0 0 var(--space-4); }
.hdc-faq__item p:last-child { margin-bottom: 0; }
.hdc-faq__item ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
/* FAQ group: an h3 topic heading with its cards; groups repeat down the page. */
.hdc-faq-group { display: flex; flex-direction: column; gap: var(--space-4); }
.hdc-faq-group :where(h3) { margin: 0; }
.hdc-faq-group + .hdc-faq-group { margin-top: var(--space-7); }

/* ===== Inline quote: the quieter second testimonial, marked by a thin coral line down the left (no quote mark, no box) ===== */
.hdc-inline-quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--measure); border-left: 3px solid var(--coral); padding-left: var(--space-5); }
@media (max-width: 639px) { .hdc-inline-quote { padding-left: var(--space-4); } }
/* Extra room so inline quotes in a band column sit space-7 (48px) from photos, each other and the text after them. */
.hdc-inline-quote { margin-top: var(--space-4); }
.hdc-inline-quote:not(:has(+ .hdc-inline-quote)) { margin-bottom: var(--space-4); }
.hdc-inline-quote__text { margin: 0; font-size: 20px; line-height: 32px; color: var(--ink); }
.hdc-inline-quote__text p { margin: 0; }
.hdc-inline-quote__cite { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* ===== Small bits ===== */
.hdc-note { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
/* Bullet list: blue dot on the text's left edge. Plain lists only; a Spectra list draws its own icon, so it is left alone. */
ul.hdc-list:not(.wp-block-spectra-list) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
ul.hdc-list:not(.wp-block-spectra-list) > li { position: relative; padding-left: var(--space-5); }
ul.hdc-list:not(.wp-block-spectra-list) > li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--hype-blue-deep); }
.hdc-social { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
/* Social icons: one colour, one size, logo only (no brand colours, no background). */
.hdc-social a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); color: var(--hype-blue-deep); background: none; }
.hdc-social svg { width: 24px; height: 24px; fill: currentColor; }
.hdc-social a:hover { color: var(--ink); }
.hdc-social a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.hdc-band--inverse .hdc-social a { color: var(--on-inverse); }

/* ===== Navigation: header, mega panel, featured card, mobile drawer ===== */
.hdc-header { position: relative; z-index: 50; background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-body); }
.hdc-header__inner { max-width: var(--container-max); height: var(--header-height); margin: 0 auto; padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-6); }
.hdc-header__logo img { display: block; height: 44px; width: auto; }
.hdc-header__nav { flex: 1; display: none; align-items: stretch; height: var(--header-height); gap: var(--space-2); }
.hdc-header__item { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-3); border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink); font: 600 16px/20px var(--font-body); text-decoration: none; cursor: pointer; }
.hdc-header__item[aria-expanded="true"], .hdc-header__item[aria-current="page"] { border-bottom-color: var(--hype-blue); }
.hdc-header__item:focus-visible, .hdc-header__menu:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.hdc-header__item svg { transition: transform 150ms ease-out; }
.hdc-header__item[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdc-header__menu { margin-left: auto; width: var(--tap-target); height: var(--tap-target); display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--ink); cursor: pointer; }
@media (min-width: 1024px) {
  .hdc-header__inner { padding: 0 var(--space-6); gap: var(--space-7); }
  .hdc-header__nav { display: flex; }
  .hdc-header__menu { display: none; }
}

/* Mega panel: opens under the header; Classes only gets the full panel. */
.hdc-mega { position: absolute; left: 0; right: 0; top: 100%; max-width: var(--container-max); margin: 0 auto; box-sizing: border-box; background: var(--surface-raised); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-6) var(--space-7) var(--space-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 340px; gap: var(--space-6); }
.hdc-mega[hidden] { display: none; }
.hdc-mega--simple { left: auto; right: auto; width: 280px; grid-template-columns: minmax(0, 1fr); padding: var(--space-4) var(--space-5); }
.hdc-mega__col { display: flex; flex-direction: column; gap: var(--space-3); }
.hdc-mega__col h2 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 700; color: var(--ink); }
.hdc-mega__links { list-style: none; margin: 0; padding: 0; }
.hdc-mega__links a { display: block; padding: 10px 0; color: var(--ink); font-weight: 400; text-decoration: none; }
/* The heading sits with its own list: no column gap between them. */
.hdc-mega__col h2 + .hdc-mega__links, .hdc-mega__group h2 + .hdc-mega__links { margin-top: calc(var(--space-3) * -1); }
.hdc-mega__links a:hover { color: var(--hype-blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.hdc-mega__foot { grid-column: 1 / span 3; border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); font-weight: 600; }
.hdc-mega__foot a { color: var(--ink); text-decoration: none; }
.hdc-mega__foot .hdc-mega__all { margin-left: auto; color: var(--hype-blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.hdc-scrim { position: fixed; inset: var(--header-height) 0 0 0; background: rgba(18, 41, 58, 0.35); z-index: 40; }
.hdc-scrim[hidden] { display: none; }

/* Featured card: the one promoted item, shared by the mega panel and the drawer. */
.hdc-feature { grid-row: 1 / span 2; grid-column: 4; display: flex; flex-direction: column; background: var(--surface-sunken); border-radius: var(--radius-lg); overflow: hidden; color: var(--ink); }
.hdc-feature img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hdc-feature__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.hdc-feature .hdc-eyebrow { color: var(--coral-deep); }
.hdc-feature h2 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 700; }
.hdc-feature--compact { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-2); background: var(--surface-raised); box-shadow: var(--shadow-card); text-decoration: none; }
.hdc-feature--compact img { flex: none; width: 88px; height: 66px; aspect-ratio: auto; border-radius: var(--radius-md); }
.hdc-feature--compact .hdc-feature__body { padding: 0; gap: 2px; }
.hdc-feature--compact h2 { font-family: var(--font-body); font-size: 16px; line-height: 22px; }

/* Mobile drawer: full screen under 1024px. */
.hdc-drawer { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--surface-raised); color: var(--ink); font-family: var(--font-body); }
.hdc-drawer[hidden] { display: none; }
.hdc-drawer__top { flex: none; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.hdc-drawer__list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: var(--space-2) var(--space-4); }
.hdc-drawer__list > li { border-bottom: 1px solid var(--border-subtle); }
.hdc-drawer__list > li:last-child { border-bottom: 0; }
.hdc-drawer__row { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0; border: 0; background: none; color: var(--ink); font: 600 20px/28px var(--font-display); text-align: left; text-decoration: none; cursor: pointer; }
.hdc-drawer__row[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdc-drawer__sub { margin: 0 calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface-sunken); display: flex; flex-direction: column; gap: var(--space-3); }
.hdc-drawer__sub[hidden] { display: none; }
.hdc-drawer__sub a:not(.hdc-btn) { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 400; text-decoration: none; }
.hdc-drawer__foot { flex: none; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-sunken); }
.hdc-drawer__foot .hdc-btn { width: 100%; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .hdc-header__item svg, .hdc-drawer__row svg { transition: none; } }

/* ===== Additions from the theme, 25 October 2026 ===== */
/* Team grid: role at body size; on desktop the first two cards share a row, the rest go three across. */
.hdc-grid--team .hdc-card__meta { font-size: 17px; line-height: 28px; }
@media (min-width: 1024px) { .hdc-grid--team { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hdc-grid--team > * { grid-column: span 2; } .hdc-grid--team > :nth-child(-n + 2) { grid-column: span 3; } }

/* A featured quote after a split or a card grid gets space-7 above it. */
.hdc-split ~ .hdc-quote, .hdc-grid ~ .hdc-quote { margin-top: var(--space-7); }

/* News post: one surface band with eyebrow (category), h1, 16:9 photo and the post's prose, all in the measure. No date. */
.hdc-post__head { width: 100%; max-width: var(--measure); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.hdc-post__head > * { margin: 0; }
.hdc-post__img { width: 100%; max-width: var(--measure); margin: 0 auto; }
.hdc-post__img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }
.hdc-post__body { max-width: var(--measure); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-5); }
/* Buttons inside prose keep their own colours and no underline. */
.hdc-prose a.hdc-btn:not(.hdc-btn--link) { text-decoration: none; }
.hdc-prose a.hdc-btn--primary, .hdc-prose a.hdc-btn--adult, .hdc-prose a.hdc-btn--warm { color: var(--on-brand); }
.hdc-prose a.hdc-btn--secondary { color: var(--ink); }
.hdc-prose .hdc-btn { margin-block: var(--space-4) calc(var(--space-4) + 20px); }

/* News listing: 1 column, 2 from 640px; on the first page the first post is a wide feature card (photo left from 768px). */
.hdc-news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 640px) { .hdc-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hdc-news-grid > .hdc-post-card--feature { grid-column: 1 / -1; } }
@media (min-width: 768px) { .hdc-post-card--feature { flex-direction: row; } .hdc-post-card--feature .hdc-card__media { margin: calc(var(--space-5) * -1) 0 calc(var(--space-5) * -1) calc(var(--space-5) * -1); width: 50%; border-radius: var(--radius-lg) 0 0 var(--radius-lg); } }
/* Pagination: 48px round links; the current page filled blue. */
.hdc-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.hdc-pagination a, .hdc-pagination span { min-width: var(--tap-target); min-height: var(--tap-target); padding: 0 var(--space-3); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); font-weight: 700; color: var(--ink); text-decoration: none; }
.hdc-pagination a:hover { background: var(--surface-sunken); }
.hdc-pagination [aria-current="page"] { background: var(--hype-blue); color: var(--on-brand); }

/* Navigation additions: header book button, About list position, drawer eyebrows, panel groups. */
.hdc-header__has-menu { position: relative; display: flex; }
.hdc-header__has-menu .hdc-mega--simple { top: 100%; left: 0; }
.hdc-mega { z-index: 45; }
.hdc-mega > .hdc-feature { grid-row: 1; }
.hdc-mega__group { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.hdc-mega__col > .hdc-mega__all { margin-top: auto; padding-top: var(--space-3); color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hdc-mega__col > .hdc-mega__all:hover { color: var(--hype-blue-deep); }
/* An open panel joins the header as one surface: no header rule, no shadow along the top edge. */
.hdc-mega { clip-path: inset(0 -64px -64px -64px); }
.hdc-header:has(.hdc-header__nav [aria-expanded="true"]) { border-bottom-color: transparent; }
.hdc-drawer__sub .hdc-drawer__eyebrow { margin: var(--space-3) 0 0; }
.hdc-drawer__sub .hdc-drawer__eyebrow:first-child { margin-top: 0; }
.hdc-drawer__top img { height: 48px; width: auto; }
.hdc-header button:focus:not(:focus-visible), .hdc-header a:focus:not(:focus-visible) { outline: none; }
.hdc-drawer__row:focus-visible, .hdc-drawer__sub a:focus-visible, .hdc-mega a:focus-visible, .hdc-feature a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
/* Phones and tablets: 64px header with logo and menu button only; Book now lives at the foot of the open menu. */
@media (max-width: 1023px) { .hdc-header__inner { height: 64px; } .hdc-header__book { display: none; } .hdc-header__menu { margin-left: auto; } }

/* Form fields: a 1px primary border and a soft glow on focus (buttons and links keep the 3px ring). */
.hdc-field:focus, .hdc-field:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--hype-blue-deep), 0 0 0 4px color-mix(in srgb, var(--focus-ring) 25%, transparent); }

/* Form fields: text at least 16px, so iOS doesn't zoom in on tap. */
.hdc-field, :is(input, select, textarea) { font-size: max(16px, 1em); }

/* Success message after a form is sent: sage panel with a stripe and a circled tick. On navy: a light sage outline and tick, no panel. */
.hdc-success { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); background: var(--sage-tint); border-left: 4px solid var(--sage-deep); border-radius: var(--radius-lg); color: var(--ink); font-weight: 600; }
.hdc-success::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--sage-deep); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.hdc-footer .hdc-success { background: none; border: 1px solid var(--success-on-inverse); color: var(--on-inverse); }
.hdc-footer .hdc-success::before { background: var(--success-on-inverse); }

/* Error panel: the partner to the success message. Pale red panel, 4px danger stripe, circled exclamation; announced with role="alert". */
.hdc-error { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); background: var(--danger-tint); border-left: 4px solid var(--danger); border-radius: var(--radius-lg); color: var(--ink); font-weight: 600; }
.hdc-error::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--danger); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Text field base: 48px, raised fill, control border, small radius. Focus as above. */
.hdc-field { box-sizing: border-box; width: 100%; min-height: var(--tap-target); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font-family: var(--font-body); line-height: 24px; }

/* Pagination previous/next: Lucide arrow icons at 16px in currentColor, box locked so it can't stretch (text arrows sit high in Figtree). */
.hdc-pagination__next, .hdc-pagination__prev,
:is(.hdc-pagination, .wp-block-query-pagination) :is(.wp-block-query-pagination-next-arrow, .wp-block-query-pagination-previous-arrow) { display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; min-width: 0; min-height: 0; max-width: 16px; max-height: 16px; padding: 0; line-height: 0; font-size: 0; margin-inline: var(--space-2) 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.hdc-pagination__prev,
:is(.hdc-pagination, .wp-block-query-pagination) .wp-block-query-pagination-previous-arrow { margin-inline: 0 var(--space-2); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E"); }

/* ===== Footer: navy band with newsletter strip, four columns and the legal line ===== */
.hdc-footer { background: var(--inverse-surface); color: var(--on-inverse); font-family: var(--font-body); }
.hdc-footer a { color: var(--on-inverse); text-underline-offset: 3px; }
.hdc-footer h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 30px; color: var(--on-inverse); }
.hdc-footer__news { border-bottom: 1px solid color-mix(in srgb, var(--on-inverse) 16%, transparent); }
.hdc-footer__news-inner, .hdc-footer__grid, .hdc-footer__legal { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--space-4); box-sizing: border-box; }
.hdc-footer__news-inner { padding-block: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-7); }
.hdc-footer__news h2 { font-size: 26px; line-height: 34px; }
.hdc-footer__news-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--space-2); }
.hdc-footer__news-text p { margin: 0; color: color-mix(in srgb, var(--on-inverse) 78%, var(--inverse-surface)); font-size: 15px; line-height: 22px; }
.hdc-footer__news-form { flex: 1 1 360px; }
.hdc-footer__grid { padding-block: var(--space-7) var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--space-7); }
.hdc-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.hdc-footer__col ul:not(.hdc-social) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.hdc-footer__col .hdc-social { flex-direction: row; gap: 0; margin-left: calc(var(--space-3) * -1); }
.hdc-footer__col .hdc-social a { color: var(--on-inverse); }
.hdc-footer__tagline { margin: 0; font-size: 20px; line-height: 32px; color: var(--on-inverse); }
.hdc-footer address { font-style: normal; }
/* Column text is quiet so only the headings stand out; links underline on hover only. */
.hdc-footer__col :is(address, p:not(.hdc-footer__tagline), ul:not(.hdc-social) li) { color: color-mix(in srgb, var(--on-inverse) 78%, var(--inverse-surface)); font-size: 15px; line-height: 22px; }
.hdc-footer__col :is(address, p, ul:not(.hdc-social)) a, .hdc-footer .hdc-footer__quiet { color: inherit; text-decoration: none; }
.hdc-footer__col :is(address, p, ul:not(.hdc-social)) a:hover { color: var(--on-inverse); text-decoration: underline; }
.hdc-footer a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.hdc-footer__legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hdc-footer__note, .hdc-footer__legal { color: color-mix(in srgb, var(--on-inverse) 78%, var(--inverse-surface)); }
.hdc-footer__note { font-size: 15px; line-height: 22px; margin: 0; }
.hdc-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-block: var(--space-5) var(--space-6); border-top: 1px solid color-mix(in srgb, var(--on-inverse) 16%, transparent); font-size: 13px; line-height: 20px; }
.hdc-footer__legal a { color: inherit; }
@media (min-width: 640px) { .hdc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hdc-footer__news-inner, .hdc-footer__grid, .hdc-footer__legal { padding-inline: var(--space-5); } }
@media (min-width: 1024px) { .hdc-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hdc-footer__news-inner, .hdc-footer__grid, .hdc-footer__legal { padding-inline: var(--space-6); } }

/* ===== Cookie banner: a card pinned to the foot of the screen, not a modal; Accept and Reject carry equal weight. ===== */
.hdc-consent { position: fixed; z-index: 70; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--border-floating); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); font-family: var(--font-body); }
.hdc-consent[hidden] { display: none; }
.hdc-consent__text { margin: 0; font-size: 15px; line-height: 22px; }
.hdc-consent__text a { color: var(--hype-blue-deep); text-underline-offset: 3px; }
.hdc-consent__actions { display: flex; gap: var(--space-3); }
.hdc-consent__actions .hdc-btn { flex: 1 1 0; }
@media (min-width: 640px) { .hdc-consent { right: auto; max-width: 560px; bottom: var(--space-5); left: var(--space-5); } .hdc-consent__actions .hdc-btn { flex: 0 0 auto; min-width: 120px; } }

/* ===== Alignment: header and footer share the body's edges =====
   Content is at most container-max (1200px) wide with the page gutter OUTSIDE it, as in Band.
   The gutter steps 16 / 24 / 32px (phone / from 640px / from 1024px). */
.hdc-header, .hdc-footer { --hdc-gutter: var(--space-4); }
@media (min-width: 640px) { .hdc-header, .hdc-footer { --hdc-gutter: var(--space-5); } }
@media (min-width: 1024px) { .hdc-header, .hdc-footer { --hdc-gutter: var(--space-6); } }
.hdc-header__inner, .hdc-footer__news-inner, .hdc-footer__grid, .hdc-footer__legal { box-sizing: content-box; padding-inline: var(--hdc-gutter); }
/* Themes that make children inherit box-sizing (Spectra One does) would otherwise grow buttons past 48px. */
:is(.hdc-header__inner, .hdc-footer__news-inner, .hdc-footer__grid, .hdc-footer__legal) > * { box-sizing: border-box; }
/* The legal line's rule spans the content width only, not the gutters. */
.hdc-footer__legal { position: relative; border-top: 0; }
.hdc-footer__legal::before { content: ""; position: absolute; top: 0; left: var(--hdc-gutter); right: var(--hdc-gutter); border-top: 1px solid color-mix(in srgb, var(--on-inverse) 16%, transparent); }

/* Featured quote in a news post: its own sunken band across the full screen width, the quote kept in the reading column.
   The band is a spread shadow clipped to the quote's height, so there is no sideways scroll. */
.hdc-prose .hdc-quote { margin-block: var(--space-5); padding-block: var(--space-7); background: var(--surface-sunken); box-shadow: 0 0 0 100vmax var(--surface-sunken); clip-path: inset(0 -100vmax); }
@media (min-width: 1024px) { .hdc-prose .hdc-quote { padding-block: var(--space-8); } }
/* An FAQ in a reading column fills the column, so closed cards don't jump wider when one opens. */
.hdc-prose .hdc-faq { width: 100%; }

/* ===== Page hero: a full-width photo with the page heading on a surface panel overlapping its lower left (1024px+), the bottom of the h1 level with the bottom of the photo; under 1024px the photo, then the heading. ===== */
.hdc-page-hero { margin: 0; padding-bottom: var(--space-7); background: var(--surface); color: var(--ink); }
.hdc-page-hero__media { display: block; }
.hdc-page-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hdc-page-hero__inner { max-width: var(--container-max); margin: 0 auto; box-sizing: content-box; padding-inline: var(--space-4); }
.hdc-page-hero__panel { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); max-width: var(--measure); }
.hdc-page-hero__panel h1 { margin: 0; }
.hdc-page-hero__intro { margin: 0; font-size: 20px; line-height: 32px; }
/* Optional: paragraphs that continue the opening, in the reading column below the panel. */
.hdc-page-hero__after { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); margin-top: var(--space-4); }
.hdc-page-hero__after > * { margin: 0; }
@media (min-width: 640px) {
  .hdc-page-hero__media img { aspect-ratio: 12 / 5; max-height: 640px; }
  .hdc-page-hero__inner { padding-inline: var(--space-5); }
}
/* Overlap only from 1024px. The panel rises by its top padding plus the h1's line (and the eyebrow and gap, if there is one), so only the heading sits on the photo and the intro starts below it. */
@media (min-width: 1024px) {
  .hdc-page-hero__inner { padding-inline: var(--space-6); }
  .hdc-page-hero__panel { position: relative; box-sizing: border-box; width: min(100% + var(--space-7), 760px); max-width: none; margin-left: calc(-1 * var(--space-7)); padding: var(--space-6) var(--space-7) 0; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: calc(-1 * (var(--space-6) + 54px)); }
  .hdc-page-hero__panel:has(> .hdc-eyebrow) { margin-top: calc(-1 * (var(--space-6) + 16px + var(--space-4) + 54px)); }
}

/* ==== assets/css/patterns.css ==== */
/* Page-level pieces the design system's components.css doesn't cover: bands, section heads,
   hero, brand name, quote, header and footer. Hand-written; token variables only. */

/* ---------- Bands: one topic per full-width band ---------- */

/* Spectra containers size with their padding included. */
.wp-block-spectra-container[class*="hdc-"] {
	box-sizing: border-box;
}
/* Spectra pads every container by 10px. Layout-only containers get none, so everything in a band
   lines up on the same left edge; bands, cards and the hero photo set their own padding. */
.wp-block-spectra-container:is(.hdc-band__inner, .hdc-grid, .hdc-section-head, .hdc-hero, .hdc-hero__text,
	.hdc-measure, .hdc-quote, .hdc-card__tags, .hdc-band__more) {
	padding: 0;
}

/* Bands run edge to edge. The content wrapper has no side padding here, so WordPress's
   negative alignfull margins (and Spectra's 100% max-width) would shift bands sideways; reset them. */
.wp-block-post-content.has-global-padding > .wp-block-spectra-container.hdc-band.alignfull {
	margin-left: 0;
	margin-right: 0;
	width: auto;
	max-width: none;
}
.wp-block-spectra-container.hdc-band {
	padding: var(--space-7) var(--space-4);
	gap: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
@media (min-width: 640px) {
	.wp-block-spectra-container.hdc-band {
		padding: var(--space-8) var(--space-5);
	}
}
@media (min-width: 1024px) {
	.wp-block-spectra-container.hdc-band {
		padding: var(--space-9) var(--space-6);
	}
}
/* Slim band: a one-line strip (the search box at the top of the Contact page). */
.wp-block-spectra-container.hdc-band.hdc-band--slim {
	padding-block: var(--space-4);
}
.wp-block-spectra-container.hdc-band--sunken {
	background: var(--wp--preset--color--surface-sunken);
}
.wp-block-spectra-container.hdc-band--inverse {
	background: var(--wp--preset--color--inverse-surface);
	color: var(--wp--preset--color--on-inverse);
}
.hdc-band--inverse :where(h1, h2, h3, h4, a:not(.wp-element-button)) {
	color: var(--wp--preset--color--on-inverse);
}

/* Content inside a band stays within container-max; running text within measure. */
.wp-block-spectra-container.hdc-band__inner {
	width: 100%;
	max-width: var(--wp--custom--container-max);
	margin-inline: auto;
	align-self: center;
	gap: var(--wp--preset--spacing--6);
}
/* Link or button row at the foot of a band (the design system's Band: wrapping row, space-3 gap). */
.wp-block-spectra-container.hdc-band__more {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

/* Bands that hold an Amelia booking form are core Groups, not Spectra containers: Spectra strips the
   <script> Amelia prints beside each form, so a form inside any Spectra container never loads.
   Same look as the Spectra bands above. */
.wp-block-post-content.has-global-padding > .wp-block-group.hdc-band.alignfull {
	margin-left: 0;
	margin-right: 0;
	width: auto;
	max-width: none;
}
/* Spectra Blocks zeroes the side padding of every core Group (`.wp-block-group.is-layout-flow.wp-block-group-is-layout-flow`),
   so the padding rule needs the extra specificity of the post-content prefix. */
.wp-block-post-content > .wp-block-group.hdc-band.alignfull {
	padding: var(--space-7) var(--space-4);
}
@media (min-width: 640px) {
	.wp-block-post-content > .wp-block-group.hdc-band.alignfull {
		padding: var(--space-8) var(--space-5);
	}
}
@media (min-width: 1024px) {
	.wp-block-post-content > .wp-block-group.hdc-band.alignfull {
		padding: var(--space-9) var(--space-6);
	}
}
.wp-block-group.hdc-band {
	box-sizing: border-box;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
.wp-block-group.hdc-band--sunken {
	background: var(--wp--preset--color--surface-sunken);
}
.wp-block-group.hdc-band__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--wp--custom--container-max);
	margin-inline: auto;
	gap: var(--wp--preset--spacing--6);
}

/* Stacks space their children with gap only; no stray paragraph or heading margins. */
.wp-block-spectra-container[class*="hdc-"] > .wp-block-spectra-content {
	margin-block: 0;
}
.wp-block-spectra-container.hdc-measure {
	gap: var(--wp--preset--spacing--4);
}
.hdc-measure {
	max-width: var(--wp--custom--measure);
}

/* Bullet lists (Spectra list): the bullet sits on the text's left edge, not indented by the list's
   40px padding and the item container's default 10px. */
.wp-block-spectra-list.hdc-list {
	padding-left: 0;
}
.hdc-list .spectra-list-item > .wp-block-spectra-container {
	padding: 0;
}
/* Each bullet sits beside the item's first line, not halfway down a long item. */
.hdc-list .spectra-list-item {
	align-items: flex-start;
}
.hdc-list .spectra-list-icon {
	height: var(--wp--custom--type--body--line-height);
	align-items: center;
}

/* ---------- Section head: eyebrow, heading, intro ---------- */

/* Text styles on Spectra content blocks repeat the selector with .wp-block-spectra-content: Spectra's inline
   ".wp-block-spectra-content:not(h1, …) { line-height: inherit }" otherwise outranks a single class. */

.wp-block-spectra-container.hdc-section-head {
	gap: var(--wp--preset--spacing--3);
	max-width: var(--wp--custom--measure);
}

.hdc-eyebrow,
.wp-block-spectra-content.hdc-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--type--eyebrow--font-size);
	line-height: var(--wp--custom--type--eyebrow--line-height);
	font-weight: var(--wp--custom--type--eyebrow--font-weight);
	letter-spacing: var(--wp--custom--type--eyebrow--letter-spacing);
	text-transform: uppercase;
	color: var(--wp--preset--color--hype-blue-deep);
}

.hdc-intro,
.wp-block-spectra-content.hdc-intro {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--type--body-lg--line-height);
}

/* ---------- Brand name and tagline ---------- */

.hdc-brand-name {
	display: inline-flex;
	flex-direction: column;
	align-self: flex-start;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ink);
	text-transform: uppercase;
}
.hdc-brand-name__main {
	font-size: var(--wp--custom--type--brand-name--font-size);
	line-height: var(--wp--custom--type--brand-name--line-height);
	font-weight: var(--wp--custom--type--brand-name--font-weight);
	letter-spacing: var(--wp--custom--type--brand-name--letter-spacing);
}
/* "COMPANY" at about 70% of the name, right-aligned under "DANCE" as in the logo. */
.hdc-brand-name__sub {
	align-self: flex-end;
	margin-top: var(--wp--preset--spacing--2);
	margin-right: calc(var(--wp--custom--type--wordmark-light--letter-spacing) * -1);
	font-size: calc(var(--wp--custom--type--brand-name--font-size) * 0.7);
	line-height: 1;
	font-weight: var(--wp--custom--type--wordmark-light--font-weight);
	letter-spacing: var(--wp--custom--type--wordmark-light--letter-spacing);
}

.hdc-tagline,
.wp-block-spectra-content.hdc-tagline {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--type--body-lg--line-height);
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Hero: text beside a photo on a hype-blue disc ---------- */

.wp-block-spectra-container.hdc-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--7);
	align-items: center;
}
.wp-block-spectra-container.hdc-hero__text {
	gap: var(--wp--preset--spacing--5);
}
.wp-block-spectra-container.hdc-hero__media {
	position: relative;
	isolation: isolate;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--5) 0 0;
}
/* The signature disc, echoing the logo, sitting behind the photo. */
.wp-block-spectra-container.hdc-hero__media::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: 72%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--hype-blue);
}
.hdc-hero__img,
.hdc-hero__img img {
	margin: 0;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
}
/* The hero photo is cropped to 4:3 whatever the file's shape. */
.hdc-hero__img img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
/* The one display-size heading (tokens: 60px, 44px under 640px). */
.wp-block-spectra-content.hdc-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: var(--wp--custom--type--display--line-height);
	letter-spacing: -0.02em;
}
/* Phones (under 640px): a tighter opening so the buttons show on the first screen of a small iPhone. 3:2 photo,
   space-3 between the text lines, a space-5 gap from the header to the photo, and the two buttons as equal
   halves of one row (48px tall, labels on one line). Desktop and tablet keep 4:3 and the default spacing. */
@media (max-width: 639px) {
	.wp-block-spectra-container.hdc-band:has(.hdc-hero) {
		padding-top: 0;
		padding-bottom: var(--wp--preset--spacing--6);
	}
	.wp-block-spectra-container.hdc-hero {
		gap: var(--wp--preset--spacing--6);
	}
	.wp-block-spectra-container.hdc-hero__media {
		padding-top: var(--wp--preset--spacing--5);
	}
	.hdc-hero__img img {
		aspect-ratio: 3 / 2;
	}
	.wp-block-spectra-container.hdc-hero__text {
		gap: var(--wp--preset--spacing--3);
	}
	/* Smaller than the 44px display size so the heading takes two lines at 375px. */
	.wp-block-spectra-content.hdc-hero__title {
		font-size: 32px;
		line-height: 38px;
		text-wrap: balance;
	}
	.hdc-hero__text .wp-block-spectra-buttons {
		align-self: stretch;
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--2);
		/* With the hero gap above, this keeps the buttons where they were (clear of Safari's bottom bar on an
		   iPhone 13 mini) while the spare space is shared between photo-to-text and text-to-buttons. */
		margin-top: var(--wp--preset--spacing--5);
	}
	.hdc-hero__text .wp-block-spectra-button.hdc-btn:not(.hdc-btn--link) {
		flex: 1 1 0;
		min-width: 0;
		min-height: 48px;
		padding-inline: var(--wp--preset--spacing--2);
		white-space: nowrap;
	}
}
/* The small line under the hero buttons: small, ink-muted, its link underlined. */
.wp-block-spectra-content.hdc-hero__note {
	margin: calc(var(--wp--preset--spacing--3) * -1) 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--type--small--line-height);
	color: var(--wp--preset--color--ink-muted);
}
.hdc-hero__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hdc-hero__note a:hover {
	color: var(--wp--preset--color--hype-blue-deep);
}
@media (max-width: 639px) {
	.wp-block-spectra-content.hdc-hero__note {
		margin-top: 0;
	}
}
/* Under 1024px the photo and disc come first, straight under the header; the text follows. */
.wp-block-spectra-container.hdc-hero__media {
	order: -1;
}
@media (min-width: 1024px) {
	.wp-block-spectra-container.hdc-hero__media {
		order: 0;
	}
}
@media (min-width: 1024px) {
	.wp-block-spectra-container.hdc-hero {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--9);
	}
}

/* ---------- Grids of cards: 1 / 2 / 3 columns ---------- */

.wp-block-spectra-container.hdc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	align-items: stretch;
}
/* Cards fill their grid cell so every card in a row is the same height. */
.wp-block-spectra-container.hdc-grid > * {
	height: auto;
	min-width: 0;
	align-self: stretch;
}
@media (min-width: 640px) {
	.wp-block-spectra-container.hdc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.wp-block-spectra-container.hdc-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* A pair of cards (e.g. the adult and kids timetables) stays two across. */
	.wp-block-spectra-container.hdc-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Timetables: one panel per day (Timetable component), two across on desktop ---------- */

.hdc-timetable-grid {
	display: grid;
	width: 100%; /* Spectra's flex column would otherwise shrink it to its content. */
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
	align-items: start;
}
@media (min-width: 1024px) {
	.hdc-timetable-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* The row's Book or Contact link: a full tap target, lined up with the row's text on phones. */
.hdc-timetable__action.hdc-btn--link {
	white-space: nowrap; /* "Book course" stays on one line. */
	justify-self: start;
	min-height: var(--wp--custom--tap-target);
}
/* A note straight above a timetable ("Ages are a guide only.") sits close to it, so it reads as part of the timetable.
   It sits on the right above the ages: inset like the rows, and as wide as one day panel when there are two across. */
.wp-block-spectra-content.hdc-note:has(+ .hdc-timetable-grid) {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--4));
}
.wp-block-spectra-content.hdc-note:has(+ .hdc-timetable-grid) {
	width: 100%; /* Spectra's flex column would otherwise shrink it to its text, and it couldn't sit on the right. */
	box-sizing: border-box;
	text-align: right;
	padding-right: var(--wp--preset--spacing--5);
}
@media (max-width: 560px) {
	.wp-block-spectra-content.hdc-note:has(+ .hdc-timetable-grid) {
		padding-right: var(--wp--preset--spacing--4);
	}
}
@media (min-width: 1024px) {
	.wp-block-spectra-content.hdc-note:has(+ .hdc-timetable-grid) {
		width: calc((100% - var(--wp--preset--spacing--6)) / 2);
	}
}
/* ClassTag for classes other groups run in our studios ("External class"): the same green as --hire, which the
   timetables don't use. Logged in docs/ds-additions.md. */
.hdc-tag--external {
	color: var(--wp--preset--color--sage-deep);
}
/* The age-group tag (ClassTag) sits on the right, apart from the class name. Its column and the link's column have
   fixed widths so the tags line up down a day panel whatever the link says (Book, Contact, Book course). */
.hdc-timetable__row > .hdc-tag {
	justify-self: start;
}
@media (min-width: 561px) {
	.hdc-timetable__row:has(> .hdc-tag) {
		grid-template-columns: 112px 1fr 6.5rem;
	}
	.hdc-timetable__row:has(> .hdc-tag):has(> .hdc-timetable__action) {
		grid-template-columns: 112px 1fr 6.5rem 6.5rem;
	}
	.hdc-timetable__row:has(> .hdc-tag) > .hdc-timetable__action {
		justify-self: end;
	}
}
/* Phones: the time and class stack on the left, with the tag and the link beside them on the right, so each row stays
   short. Rows share their day panel's columns (subgrid), so the tag and link columns are as wide as their widest item
   and the tags line up down the panel, leaving the rest for the class name.
   The same layout serves 1024–1199px, where two day panels sit side by side and each row is only 464–550px wide (the
   design system's Timetable does the same since 12th November 2026). */
@media (max-width: 560px), (min-width: 1024px) and (max-width: 1199px) {
	/* Rows and day headings are inset 16px rather than 24px on phones, to leave room for the tag. */
	.hdc-timetable__row,
	.hdc-timetable__day {
		padding-left: var(--wp--preset--spacing--4);
		padding-right: var(--wp--preset--spacing--4);
	}
	.hdc-timetable__time {
		white-space: nowrap;
	}
	/* Minimum column widths keep the tags in the same place in every day panel on a page: the tag column fits
	   "Ages 12–16", the link column "Contact", or "Book course" on a page that has one. Wider tags ("External
	   class") widen their own band's column. */
	.hdc-timetable__list:has(> .hdc-timetable__row > .hdc-tag) {
		--hdc-tt-link: 5rem; /* "Contact" and the link's own spacing */
		--hdc-tt-link-gap: clamp(8px, calc((100vw - 375px) * 0.3 + 8px), 40px);
		display: grid;
		grid-template-columns: 1fr minmax(5.5rem, auto);
		column-gap: var(--wp--preset--spacing--2);
	}
	:root:has(.hdc-timetable__action--long) .hdc-timetable__list {
		--hdc-tt-link: 7rem; /* "Book course" */
	}
	.hdc-timetable__list:has(> .hdc-timetable__row > .hdc-tag):has(.hdc-timetable__action) {
		grid-template-columns: 1fr minmax(5.5rem, auto) minmax(calc(var(--hdc-tt-link) + var(--hdc-tt-link-gap)), auto);
	}
	/* The narrowest phones have no room for "Book course" on one line beside "Contemporary" and its tag: it wraps
	   onto two lines, and every page uses the "Contact" width. */
	@media (max-width: 399px) {
		:root:has(.hdc-timetable__action--long) .hdc-timetable__list {
			--hdc-tt-link: 5rem;
		}
		.hdc-timetable__list:has(> .hdc-timetable__row > .hdc-tag):has(.hdc-timetable__action) {
			grid-template-columns: 1fr minmax(5.5rem, auto) calc(var(--hdc-tt-link) + var(--hdc-tt-link-gap));
		}
		.hdc-timetable__action.hdc-timetable__action--long {
			white-space: normal;
			text-align: right;
		}
	}
	.hdc-timetable__list:has(> .hdc-timetable__row > .hdc-tag) > .hdc-timetable__row {
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
		column-gap: var(--wp--preset--spacing--2); /* The row's own gap would otherwise replace the panel's. */
	}
	/* Rows without tags (the condensed holiday timetables): the link beside the time and class. */
	.hdc-timetable__row:has(> .hdc-timetable__action):not(:has(> .hdc-tag)) {
		grid-template-columns: 1fr auto;
		column-gap: var(--wp--preset--spacing--3);
	}
	.hdc-timetable__row > .hdc-timetable__time,
	.hdc-timetable__row > .hdc-timetable__class {
		grid-column: 1;
	}
	.hdc-timetable__row > .hdc-tag {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
	}
	.hdc-timetable__row > .hdc-timetable__action {
		grid-column: -2;
		grid-row: 1 / span 2;
		align-self: center;
		justify-self: end;
	}
	/* The 8px gap plus this: between the tag and the link, 16px on a 375px phone, opening up to 48px by 480px as
	   there's room (closer to the wider layout's spacing). 8px between the class and the tag. */
	.hdc-timetable__row:has(> .hdc-tag) > .hdc-timetable__action {
		padding-left: var(--hdc-tt-link-gap);
	}
	/* hdc-timetable__row--stack-tag (a long class name, e.g. Street / Hip Hop / Commercial): the tag drops under the
	   details. */
	.hdc-timetable__row--stack-tag > .hdc-tag {
		grid-column: 1;
		grid-row: auto;
		margin-top: var(--wp--preset--spacing--1);
	}
	.hdc-timetable__row--stack-tag > .hdc-timetable__action {
		grid-row: 1 / span 3;
	}
}

/* Tags and buttons keep their own width inside vertical stacks. */
.hdc-card > .hdc-tag,
.hdc-card__tags,
.wp-block-spectra-buttons {
	align-self: flex-start;
}
.wp-block-spectra-container.hdc-card__tags {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}
.hdc-card .wp-block-spectra-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--2);
}

/* Spectra buttons carry WordPress's button classes; the hdc-btn variants decide the look. */
.wp-block-spectra-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}
.wp-block-spectra-button.hdc-btn:not(.hdc-btn--link) {
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
}

/* ---------- Post cards (What's on and the News listing) ---------- */

/* Like every card (ClassCard README): the text sits in the card's space-5 padding with no padding of its own,
   the 16:9 photo is pulled out to the card's edges at the top, and the photo sits space-4 above the text. */
.hdc-post-card,
.wp-block-spectra-container.hdc-post-card {
	padding: var(--wp--preset--spacing--5);
	gap: var(--wp--preset--spacing--4);
	overflow: hidden;
	height: 100%;
}
/* An explicit width, not stretch alone: the Spectra card's flex column uses align-items: flex-start, and Safari
   on iPhone otherwise sized the first (eagerly loaded) photo from the image, at about half the card. */
.hdc-post-card .wp-block-post-featured-image {
	margin: calc(-1 * var(--wp--preset--spacing--5)) calc(-1 * var(--wp--preset--spacing--5)) 0;
	align-self: stretch;
	width: calc(100% + 2 * var(--wp--preset--spacing--5));
}
.hdc-post-card .wp-block-post-featured-image img {
	border-radius: 0;
}
.wp-block-spectra-container.hdc-post-card__body {
	padding: 0;
	gap: var(--wp--preset--spacing--3);
}
.hdc-post-card .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3);
	line-height: var(--wp--custom--type--h-3--line-height);
}
.hdc-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.hdc-post-card .wp-block-post-title a:hover {
	text-decoration: underline;
}
.hdc-post-card .wp-block-post-excerpt,
.hdc-post-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Pull quote ----------
   The Quote component (mark, grid, type) lives in components.css. Spectra renders the figure as a flex
   container and gives its content blocks inherited line-height and no margins, so restore the component's
   grid, type and credit spacing here. Sizes come from the `quote` text style (mobile sizes in tokens.css). */

.wp-block-spectra-container.hdc-quote {
	display: grid;
	column-gap: var(--wp--preset--spacing--6);
	row-gap: 0;
}
.wp-block-spectra-container.hdc-quote > .wp-block-spectra-content.hdc-quote__text {
	font-size: var(--wp--custom--type--quote--font-size);
	line-height: var(--wp--custom--type--quote--line-height);
	font-weight: var(--wp--custom--type--quote--font-weight);
}
.wp-block-spectra-container.hdc-quote > .wp-block-spectra-content.hdc-quote__cite {
	margin-top: var(--wp--preset--spacing--4);
	line-height: var(--wp--custom--type--small--line-height);
}

/* ---------- Header ---------- */

/* The template part's wrapper is what sticks: the header's panels and drawer are positioned inside .hdc-header. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}
/* Phones (600px and under): WordPress lets the admin bar scroll away, so the header sticks at the very top.
   Logged-in customers see the admin bar too, so this isn't admin-only. */
@media (max-width: 600px) {
	.admin-bar header.wp-block-template-part {
		top: 0;
	}
}
/* The open phone/tablet menu covers the whole screen, so it must sit above the admin bar (z-index 99999),
   or the bar hides the menu's close button. The drawer lives inside the sticky header, which sets its own
   stacking level, so lift the header while the drawer is open. */
.admin-bar header.wp-block-template-part:has(.hdc-drawer:not([hidden])) {
	z-index: 100000;
}
/* The header is 64px high on phones (the drawer's top row matches). */
@media (max-width: 1023px) {
	:root {
		--wp--custom--header-height: 64px;
	}
}
/* Phones: logo, Book now and the menu button. Book now sits beside the menu button, on the right. */
.hdc-header .hdc-header__inner > * {
	margin-block: 0;
}
/* Phones and tablets: no Book now in the bar (Alex, 2026-10-25). It wrapped onto two lines on small phones,
   and the open menu has its own full-width Book now. The menu button sits on the right. */
@media (max-width: 1023px) {
	.hdc-header .hdc-header__book {
		display: none;
	}
}
/* The panels sit above the scrim that dims the page (the scrim is z-index 40). */
.hdc-mega {
	z-index: 45;
	/* The panel continues the header in one solid colour (Alex, 2026-10-25): no shadow cast upwards onto it… */
	clip-path: inset(0 -64px -64px -64px);
}
/* …and no header rule between them while a menu is open. */
.admin-bar .hdc-scrim {
	top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 32px));
}
/* Column one holds a second group under a rule; See all classes sits at the foot of the Adults column. */
/* Menu links in regular weight, so the bold group headings stand apart from them (Alex, 2026-10-25).
   "See all classes" keeps its own 600 weight. */
.hdc-mega__links a,
.hdc-drawer__sub a:not(.hdc-btn) {
	font-weight: 400;
}
/* Tie each heading to its own list: drop the column gap under the heading. The links' 10px padding
   (part of their 48px tap area) is then the only space between heading and first link. */
/* Focus rings are for keyboard use only: none after a mouse click or tap. */
.hdc-drawer__row:focus-visible,
.hdc-drawer__close:focus-visible,
.hdc-drawer__sub a:focus-visible,
.hdc-mega a:focus-visible,
.hdc-feature a:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: -3px;
}
/* About's list opens under its own button. */
/* The featured card is a plain article in the panel and a link in the drawer. */
.hdc-feature p {
	margin: 0;
}
.hdc-feature .hdc-btn {
	align-self: flex-start;
	margin-top: var(--wp--preset--spacing--2);
}
.hdc-drawer__top .hdc-logo img {
	height: 48px; /* same as the header logo */
}
.hdc-drawer__top .hdc-header__menu {
	margin-left: 0;
}

/* The logo: light version by default; the reversed one where the ground is dark. */
.hdc-logo {
	display: block;
	margin: 0;
	line-height: 0;
}
.hdc-logo img {
	display: block;
	width: auto;
	height: 48px;
}
.hdc-logo--reversed {
	display: none;
}

/* ---------- Footer ---------- */

/* The component's own CSS (.hdc-footer, __grid, __col, __note, __legal) comes from the design system bundle in
   components.css. These rules fit it to WordPress: core Groups add flow margins, the logo is a pair of images,
   the social icons sit on navy, and a few lines the bundle leaves to the page. */
.hdc-footer__grid > *,
.hdc-footer__col > *,
.hdc-footer__col p,
.hdc-footer__legal p {
	margin-block: 0;
}
/* Newsletter strip: heading and line beside Fluent Form 2 (email field and Sign up), wrapping on phones.
   The bundle lays out the strip; these rules fit the Fluent form into it on navy. */
.hdc-footer__news-inner > * {
	margin-block: 0;
}
.hdc-footer__news-form .fluentform,
.hdc-footer__news-form .fluentform form {
	margin: 0;
}
.hdc-footer__news-form .fluentform fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	border: 0;
}
/* Fluent's hidden legend and empty helper paragraphs would each take a gap in the row. */
.hdc-footer__news-form .fluentform fieldset > :not(.ff-el-group) {
	position: absolute;
}
.hdc-footer__news-form .fluentform .ff-el-group {
	flex: 1 1 220px;
	margin-bottom: 0;
}
.hdc-footer__news-form .fluentform .ff_submit_btn_wrapper {
	flex: 0 0 auto;
	margin: 0;
	/* Line the button up with the field, below the label: label line height plus its gap. */
	padding-top: calc(22px + var(--wp--preset--spacing--2));
}
.hdc-footer__news-form .fluentform .ff-el-input--label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2);
	padding: 0;
	line-height: 22px;
}
/* The field matches the 48px Sign up button. */
.hdc-footer__news-form .fluentform .ff-el-form-control {
	min-height: var(--wp--custom--tap-target);
}
.hdc-footer__news-form .fluentform .ff-el-input--label label {
	display: block;
	color: var(--on-inverse);
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
}
.hdc-footer__news-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--on-inverse);
}
/* Messages on navy: the error under the field and the thank-you that replaces the form. */
.hdc-footer__news-form .fluentform .error,
.hdc-footer__news-form .fluentform .text-danger {
	color: var(--on-inverse);
	font-size: 15px;
	line-height: 22px;
	margin-top: var(--wp--preset--spacing--2);
}
/* The thank-you on navy: no pale panel (too loud here) but the same tick and a thin outline in the design system's
   success-on-inverse (8.8:1 on navy). Text stays on-inverse. The extra .hdc-footer outranks the general panel rule
   in fluent-forms.css, which loads after this file. */
.hdc-footer .hdc-footer__news-form .ff-message-success {
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4) var(--wp--preset--spacing--3) calc(var(--wp--preset--spacing--4) + 32px);
	border: 1px solid var(--success-on-inverse);
	border-radius: var(--wp--custom--radius--lg);
	background: transparent;
	color: var(--on-inverse);
	font-size: 15px;
	line-height: 22px;
	/* Two even lines rather than one word ("up.") left on its own. */
	text-wrap: balance;
}
.hdc-footer .hdc-footer__news-form .ff-message-success::before {
	left: var(--wp--preset--spacing--3);
	top: calc(var(--wp--preset--spacing--3) - 1px);
	background-color: var(--success-on-inverse);
}
.hdc-footer .hdc-logo--reversed {
	display: block;
}
.hdc-footer .hdc-logo--light {
	display: none;
}
.hdc-footer .hdc-logo img {
	display: block;
	height: 64px;
	width: auto;
}
.hdc-footer__tagline {
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--type--body-lg--line-height);
}
/* Column text is quiet, like the bundle's .hdc-footer__note (on-inverse at 78%, 15px): only the headings stand out.
   Links take the same colour and brighten to on-inverse on hover. The tagline keeps its own size. */
.hdc-footer .hdc-footer__col :is(address, p:not(.hdc-footer__tagline), ul:not(.hdc-social) li) {
	color: color-mix(in srgb, var(--on-inverse) 78%, var(--inverse-surface));
	font-size: 15px;
	line-height: 22px;
}
.hdc-footer .hdc-footer__col :is(address, p, ul:not(.hdc-social)) a {
	color: inherit;
	text-decoration: none;
}
.hdc-footer .hdc-footer__col :is(address, p, ul:not(.hdc-social)) a:hover {
	color: var(--on-inverse);
	text-decoration: underline;
}
.hdc-footer .hdc-footer__quiet {
	color: inherit;
	text-decoration: none;
}
/* Spectra One zeroes the padding of flow Groups (.wp-block-group.is-layout-flow…), so the grid's padding from the
   bundle is set again here at a higher specificity. The side padding is the bundle's page gutter (--hdc-gutter,
   16 / 24 / 32px), outside the 1200px content box, so the columns line up with the page text (Alignment rules). */
.hdc-footer .wp-block-group.hdc-footer__grid.is-layout-flow {
	box-sizing: content-box;
	padding: var(--wp--preset--spacing--7) var(--hdc-gutter) var(--wp--preset--spacing--6);
}
/* The newsletter strip's inner Group gets the same fix, so it lines up with the columns below. */
.hdc-footer .wp-block-group.hdc-footer__news-inner.is-layout-flow {
	box-sizing: content-box;
	padding: var(--wp--preset--spacing--6) var(--hdc-gutter);
}
/* The bundle's column lists stack vertically; the social icons stay in a row, white on navy, with the first
   icon lined up with the text above. */
.hdc-footer .hdc-footer__col ul.wp-block-social-links.hdc-social {
	flex-direction: row;
	gap: 0;
	margin-inline-start: calc(-1 * (var(--tap-target) - 24px) / 2);
}
.hdc-footer .wp-block-social-links.hdc-social .wp-social-link,
.hdc-footer .wp-block-social-links.hdc-social .wp-social-link a {
	color: var(--wp--preset--color--on-inverse);
}

/* ---------- Page rhythm ---------- */

/* Bands sit edge to edge: no block gap between them, the header, main and footer. */
.wp-block-post-content > .hdc-band,
.wp-block-post-content > .hdc-band + .hdc-band {
	margin-block: 0;
}
.wp-site-blocks > .hdc-main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* PageHero (CSS in the design-system bundle) sits edge to edge like a band. */
.wp-block-post-content > .hdc-page-hero,
.wp-block-post-content > .hdc-page-hero + * {
	margin-block: 0;
}
/* WordPress pulls alignfull blocks out by the root padding, which post content doesn't have here (as for core bands). */
.wp-block-post-content.has-global-padding > .hdc-page-hero.alignfull {
	margin-left: 0;
	margin-right: 0;
	width: auto;
	max-width: none;
}
/* Paragraphs that follow the hero's intro, in the reading column under the panel. */

.hdc-note,
.wp-block-spectra-content.hdc-note,
.wp-block-spectra-content.hdc-card__meta {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--type--small--line-height);
	color: var(--wp--preset--color--ink-muted);
}

/* Hero logo: the full logo in place of typed text; reversed version in dark mode (dark.css). */
.hdc-hero__logo {
	margin: 0;
	line-height: 0;
}
.hdc-hero__logo img {
	display: block;
	width: auto;
	height: 80px;
}
.hdc-hero__logo .hdc-logo--reversed {
	display: none;
}
@media (min-width: 1024px) {
	.hdc-hero__logo img {
		height: 112px;
	}
}

/* Link-style buttons line up with the text above them (no 2px side border from the filled-button base). */
.wp-block-spectra-button.hdc-btn--link {
	border-left-width: 0;
	border-right-width: 0;
}

/* ---------- Links page (/links/): the social media "link in bio", page-links template ---------- */

.hdc-links-main {
	min-height: 100vh;
}
.wp-block-spectra-container.hdc-links {
	box-sizing: border-box;
	max-width: calc(440px + 2 * var(--wp--preset--spacing--4));
	margin: 0 auto;
	padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--4);
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	text-align: center;
}
.hdc-links__logo img {
	height: 96px;
}
.wp-block-spectra-content.hdc-links__intro {
	margin: 0;
}
.wp-block-spectra-container.hdc-links__buttons {
	width: 100%;
	padding: 0;
	margin: var(--wp--preset--spacing--5) 0;
}
.hdc-links__buttons .wp-block-spectra-buttons {
	flex-direction: column;
	align-self: stretch;
	width: 100%;
}
.hdc-links__buttons .wp-block-spectra-button {
	width: 100%;
	justify-content: center;
	text-align: center;
}
.wp-block-spectra-content.hdc-links__site {
	margin: 0;
}

/* Maintenance mode (/maintenance-mode/): the Links column, centred on a full-height screen. */
.wp-block-spectra-container.hdc-maintenance {
	min-height: 100vh;
	justify-content: center;
	gap: var(--wp--preset--spacing--6);
}
.hdc-maintenance h1 {
	margin: 0;
}
.hdc-maintenance .wp-block-spectra-container.hdc-links__buttons {
	max-width: 280px;
	margin: var(--wp--preset--spacing--4) 0 0;
}
/* Jump links (e.g. "Jump to the timetable") land below the sticky header, not under it. */
.hdc-main [id] {
	scroll-margin-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--5));
}

/* ---------- Contact page (/contact-hype-dance-company/) ---------- */

/* FAQ: core Details blocks as raised cards, one per question. */
.wp-block-group.hdc-faq {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	max-width: var(--wp--custom--measure);
}
.hdc-faq .wp-block-details.hdc-faq__item {
	margin: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--surface-raised);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
}
/* The card rule above outranks the design system's :hover, so repeat it here (hover devices only, as there). */
@media (hover: hover) {
	.hdc-faq .wp-block-details.hdc-faq__item:hover {
		box-shadow: var(--wp--preset--shadow--raised);
	}
}
.hdc-faq .hdc-faq__item summary {
	min-height: var(--wp--custom--tap-target);
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: 700;
}
.hdc-faq .hdc-faq__item[open] summary {
	margin-bottom: var(--wp--preset--spacing--3);
}
.hdc-faq .hdc-faq__item p {
	margin: 0 0 var(--wp--preset--spacing--4);
}
.hdc-faq .hdc-faq__item p:last-child {
	margin-bottom: 0;
}
.hdc-faq .hdc-faq__item ul {
	margin: 0 0 var(--wp--preset--spacing--4);
	padding-left: var(--wp--preset--spacing--5);
}

/* FAQ grouped under h3 headings: each group is its heading plus its cards. */
.wp-block-group.hdc-faq-group {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}
.hdc-faq-group > :is(.wp-block-spectra-content, .wp-block-heading) {
	margin-block: 0;
	scroll-margin-top: var(--wp--preset--spacing--6);
}

/* Form and contact details side by side on desktop. */
.wp-block-group.hdc-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--7);
	align-items: start;
}
.wp-block-group.hdc-contact__form,
.wp-block-group.hdc-contact__details {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	min-width: 0;
}
.wp-block-spectra-container.hdc-contact__item {
	padding: 0;
	gap: var(--wp--preset--spacing--2);
}
.hdc-contact__item > .wp-block-spectra-content {
	margin-block: 0;
}
@media (min-width: 1024px) {
	.wp-block-group.hdc-contact {
		grid-template-columns: 3fr 2fr;
		gap: var(--wp--preset--spacing--9);
	}
}

/* Trustindex's Google widget is styled for a dark page: its header (logo, name, "49 Google reviews") is white text.
   On our light band, darken just that header; the review cards keep their own dark style. */
.hdc-band .ti-widget.ti-goog .ti-footer :is(.ti-name, .ti-rating-text, .ti-rating-text strong, .ti-rating-text span) {
	color: var(--wp--preset--color--ink);
}

/* Social icons (design system hdc-social): logos only, one colour, 24px in a 48px tap target, no brand colours or
   background. Core's Logos only style still colours each network (e.g. `.is-style-logos-only .wp-social-link-facebook`),
   so the colour is set on the link and the logo takes it through currentColor. */
.wp-block-social-links.hdc-social {
	gap: var(--space-2);
	margin: 0;
	padding: 0;
}
.wp-block-social-links.hdc-social .wp-social-link {
	background: none;
	color: var(--hype-blue-deep);
}
.hdc-social .wp-social-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap-target);
	min-height: var(--tap-target);
	padding: 0;
	color: var(--hype-blue-deep);
	background: none;
}
.hdc-social .wp-social-link svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}
.hdc-social .wp-social-link a:hover {
	color: var(--ink);
}
.hdc-social .wp-social-link a:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}
.hdc-band--inverse .hdc-social .wp-social-link a {
	color: var(--on-inverse);
}

/* Getting to us: directions, then the map. */
.wp-block-group.hdc-map {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--5);
}
.hdc-map .hdc-map__frame {
	display: block;
	width: 100%;
	height: 500px;
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
}
@media (max-width: 639px) {
	.hdc-map .hdc-map__frame {
		height: 360px;
	}
}
/* Leaflet map (assets/js/map.js). No-JS fallback: the address, centred in the empty box. */
.hdc-map .hdc-map__map {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--surface-sunken);
	font-family: var(--wp--preset--font-family--body);
	z-index: 0; /* keep Leaflet's panes under the sticky header */
}
.hdc-map .hdc-map__map.leaflet-container {
	display: block;
}
/* Our pin: a hype-blue drop with a white centre, point at the door. */
.hdc-map__pin span {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50% 50% 50% 0;
	background: var(--wp--preset--color--hype-blue);
	border: 3px solid #fff;
	box-shadow: var(--wp--preset--shadow--card);
	transform: rotate(-45deg);
	box-sizing: border-box;
}
.hdc-map__pin span::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}
/* The name label above the pin, always shown. */
.leaflet-tooltip.hdc-map__label {
	padding: 6px 12px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--hype-blue);
	color: var(--wp--preset--color--on-brand);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	box-shadow: var(--wp--preset--shadow--card);
}
.leaflet-tooltip-top.hdc-map__label::before {
	border-top-color: var(--wp--preset--color--hype-blue);
}

/* ---------- Beginner course pages (/beginner-…-course-in-sheffield/) ---------- */

/* Long reading (all three course pages, and other pages built with topic()): each h2 and its paragraphs is one
   hdc-measure column, topics space-7 apart and a heading space-5 from its text (space-4 gap + space-1). */
.wp-block-spectra-container.hdc-article {
	padding: 0;
	gap: var(--wp--preset--spacing--7);
}
.wp-block-spectra-container.hdc-measure > .wp-block-spectra-content:is(h2, h3) {
	margin-bottom: var(--wp--preset--spacing--1);
}
/* Core headings (anchored_heading, for jump links, e.g. the terms page) sit the same way. */
.wp-block-spectra-container.hdc-measure > .wp-block-heading:is(h2, h3) {
	margin-block: 0 var(--wp--preset--spacing--1);
}
.wp-block-spectra-container:is(.hdc-prose, .hdc-prose__section) {
	padding: 0;
}
.wp-block-spectra-container.hdc-prose {
	gap: var(--wp--preset--spacing--7);
}
.wp-block-spectra-container.hdc-prose__section {
	gap: var(--wp--preset--spacing--5);
}

/* Photos on all three course pages: 1 / 2 / 3 columns, all cropped to 4:3 with the shared 12px corner.
   Each is a core Gallery, whose images core sizes with an id-weighted :not(#individual-image) selector, so the
   overrides repeat it. */
.hdc-gallery .wp-block-image {
	margin: 0;
}
.hdc-band .wp-block-gallery.has-nested-images.hdc-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
	margin: 0;
}
/* Every photo fills its grid cell whatever the count. !important because core gives a two-image gallery 50% widths
   (":first-child:nth-last-child(2)" and its "~" sibling, two :not(#id)s, in a media query), which out-rank this. */
.hdc-band .wp-block-gallery.has-nested-images.hdc-gallery figure.wp-block-image:not(#individual-image) {
	width: auto !important;
	margin: 0;
}
.hdc-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}
/* Firefox (and Zen): core's cropped gallery gives each img "flex: 1 0 0%; height: 100%" with an id-weighted selector.
   Chrome still sizes the img from its aspect-ratio, but Firefox collapses it to 0px tall, so every gallery vanished.
   Out-rank core so the img keeps its own 4:3 height (2026-11-11). */
.wp-block-gallery.has-nested-images.is-cropped.hdc-gallery figure.wp-block-image:not(#individual-image) img {
	flex: none;
	height: auto;
}
@media (min-width: 640px) {
	.hdc-band .wp-block-gallery.has-nested-images.hdc-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.hdc-band .wp-block-gallery.has-nested-images.hdc-gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Amelia's "Book the course" trigger: a core button with inline padding and radius that has to stay as
   Amelia saved it. Styled here as the primary button (hdc-btn--primary, button-primary), 48px tall; !important beats the
   inline style. One rule, so the Ballet, Contemporary and Tap course buttons and the Christmas intensive's match.
   (Plum until 2026-10-27, when the design system retired the adult button: every filled button is blue.) */
.amelia-events-list-booking-button-trigger .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5) !important;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pill) !important;
	background: var(--wp--preset--color--button-primary);
	color: var(--wp--preset--color--on-brand);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
.amelia-events-list-booking-button-trigger .wp-block-button__link:hover {
	background: var(--wp--preset--color--button-primary-hover);
	color: var(--wp--preset--color--on-brand);
}
@media (hover: hover) {
	.amelia-events-list-booking-button-trigger .wp-block-button__link:hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}
.amelia-events-list-booking-button-trigger .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.amelia-events-list-booking-button-trigger .wp-block-button__link {
		transition: none;
	}
	.amelia-events-list-booking-button-trigger .wp-block-button__link:hover {
		transform: none;
	}
}

/* ---------- Dance classes overview (/dance-classes-in-sheffield/) ---------- */

/* ---------- Class group (pattern `class-group`) ----------
   One full-width band per group of classes. Text on the left within the measure; the Cost / How to start
   panel on the right (the design system's raised card, `hdc-card`), under the text on phones. Bands
   alternate surface and sunken down the page, so the edge between groups shows when scrolling. */

.wp-block-spectra-container:is(.hdc-split, .hdc-split__main) {
	padding: 0;
}
.wp-block-spectra-container.hdc-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	align-items: start;
}
.wp-block-spectra-container.hdc-split__main {
	gap: var(--wp--preset--spacing--5);
	min-width: 0;
}
.wp-block-spectra-container.hdc-panel {
	padding: var(--wp--preset--spacing--5);
	gap: var(--wp--preset--spacing--3);
}
.wp-block-spectra-container.hdc-panel > .wp-block-spectra-content {
	margin: 0;
}
@media (min-width: 1024px) {
	.wp-block-spectra-container.hdc-split {
		grid-template-columns: minmax(0, var(--wp--custom--measure)) minmax(0, 420px);
		column-gap: var(--wp--preset--spacing--9);
	}
}
/* A featured quote under the text gets a generous gap above it (the band's own gap is the 24px between blocks). */
.wp-block-spectra-container:is(.hdc-split, .hdc-grid) ~ .wp-block-spectra-container.hdc-quote {
	margin-top: var(--wp--preset--spacing--7);
}

/* A second, quieter quote inside a section, for a page's second testimonial (the featured Quote is the first).
   No coral mark and no rule: it's set apart by size and its credit line alone. */
/* The design system's coral line down the left (3px; space-5 before the text, space-4 on phones). Spectra sets its
   own container padding, so it is repeated here. */
.wp-block-spectra-container.hdc-inline-quote {
	margin: 0;
	padding: 0 0 0 var(--wp--preset--spacing--5);
	border-left: 3px solid var(--coral);
	gap: var(--wp--preset--spacing--2);
	max-width: var(--wp--custom--measure);
}
@media (max-width: 639px) {
	.wp-block-spectra-container.hdc-inline-quote {
		padding-left: var(--wp--preset--spacing--4);
	}
}
/* Breathing space: 16px more above each inline quote and below the last of a run, so in a 32px band column they sit
   48px (space-7) from the photos, from each other and from the text after them (Alex, 2026-10-30). */
.wp-block-spectra-container.hdc-inline-quote {
	margin-top: var(--wp--preset--spacing--4);
}
.wp-block-spectra-container.hdc-inline-quote:not(:has(+ .hdc-inline-quote)) {
	margin-bottom: var(--wp--preset--spacing--4);
}
.wp-block-spectra-container.hdc-inline-quote > .wp-block-spectra-content.hdc-inline-quote__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--type--body-lg--line-height);
	color: var(--wp--preset--color--ink);
}
.wp-block-spectra-container.hdc-inline-quote > .wp-block-spectra-content.hdc-inline-quote__text p {
	margin: 0;
}
.wp-block-spectra-container.hdc-inline-quote > .wp-block-spectra-content.hdc-inline-quote__cite {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--type--small--line-height);
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Block editor only ----------
   On the front end a Spectra container's children are its direct children. In the editor they sit inside
   `.block-editor-inner-blocks > .wp-block-spectra-container-is-layout-flex`, so a grid on the container
   has a single item and everything lands in the first column (the featured quote's text was squeezed into
   its 72px mark column). Make those two wrappers disappear for the containers we lay out as grids.
   Flex containers are left alone: Spectra puts their flex layout on the inner wrapper. */
.editor-styles-wrapper :is(.wp-block-spectra-container.hdc-hero, .wp-block-spectra-container.hdc-grid,
	.wp-block-spectra-container.hdc-quote,
	.wp-block-spectra-container.hdc-split)
	> .block-editor-inner-blocks,
.editor-styles-wrapper :is(.wp-block-spectra-container.hdc-hero, .wp-block-spectra-container.hdc-grid,
	.wp-block-spectra-container.hdc-quote,
	.wp-block-spectra-container.hdc-split)
	> .block-editor-inner-blocks > .wp-block-spectra-container-is-layout-flex {
	display: contents;
}

/* Editor only: Spectra gives a container with no Spectra parent (`spectra-is-root-container`) auto side
   margins. Inside our core Group bands, which are flex columns, that shrinks each one to its content and
   centres it (the contact details, one block per item). The front end has no such margins. */
.editor-styles-wrapper .wp-block-group > .wp-block-spectra-container.spectra-is-root-container {
	margin-left: 0;
	margin-right: 0;
}
/* Editor only: the HTML block's preview is a flex item in `.hdc-map` (align-items: flex-start), so the map
   shrank to a narrow box. On the front end the iframe itself is width: 100%. */
.editor-styles-wrapper .hdc-map > .wp-block-html {
	width: 100%;
	align-self: stretch;
}

/* Editor only: the editor marks a Spectra container with no Spectra parent (every one inside our core Group
   bands) as `spectra-is-root-container alignfull`, and Spectra's `body .spectra-is-root-container.alignfull
   { max-width: none }` (0,2,1) then beats our own width limits. Theme editor styles aren't prefixed in the
   iframe editor, so restate them with `.editor-styles-wrapper` (0,3,0). Same values as the rules above. */
.editor-styles-wrapper .wp-block-spectra-container.hdc-measure,
.editor-styles-wrapper .wp-block-spectra-container.hdc-section-head,
.editor-styles-wrapper .wp-block-spectra-container.hdc-inline-quote {
	max-width: var(--wp--custom--measure);
}
.editor-styles-wrapper .wp-block-spectra-container.hdc-quote {
	max-width: calc(var(--wp--custom--measure) + 104px);
}
/* A news post's body (hdc-prose) is a root container too. On the front end the post's constrained layout caps it at
   the measure; in the editor it lost that cap, grew as wide as its longest line and, centred, ran off both edges
   (Alex, 2026-10-26). Same column as the front end: the full measure, centred. The editor also treats it as a
   full-width block: Spectra's editor CSS has `.block-editor-block-list__layout.is-root-container >
   .spectra-is-root-container.alignfull { max-width: none !important }` (0,4,0), loaded after the theme. This rule is
   !important and one class more specific (0,5,0) so it wins (checked in Alex's editor, 2026-10-26). Saving from the
   editor can also write "align":"full" into the post (seen on live, 2026-10-30), so the front-end rule below covers that. */
.block-editor-block-list__layout.is-root-container > .wp-block-spectra-container.hdc-prose.spectra-is-root-container.alignfull {
	box-sizing: border-box;
	width: 100% !important;
	max-width: var(--wp--custom--measure) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* The Links page and maintenance page column (hdc-links) is a root container too, so in the editor it spread across
   the whole canvas and ran off the left edge (Alex, 2026-10-27). Same (0,5,0) !important fix, same width as the front
   end. Spectra also puts a flex container's layout on its inner wrapper in the editor, so centre the column there. */
.block-editor-block-list__layout.is-root-container > .wp-block-spectra-container.hdc-links.spectra-is-root-container.alignfull {
	box-sizing: border-box;
	width: 100% !important;
	max-width: calc(440px + 2 * var(--wp--preset--spacing--4)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Front end: when a post is saved from the editor, Spectra can store "align":"full" on the post body (hdc-prose) or the
   Links column (hdc-links). WordPress then lifts the width limit and pulls the block out to the page edge, so the text
   sat hard left (post 2702, Alex, 2026-10-30). These columns are never meant to be full width: keep their usual width,
   centred. (0,3,1) beats WordPress's `.is-layout-constrained > .alignfull` / `.has-global-padding > .alignfull` and
   Spectra's `body .spectra-is-root-container.alignfull`. */
body .wp-block-spectra-container.hdc-prose.alignfull {
	max-width: var(--wp--custom--measure);
	margin-left: auto;
	margin-right: auto;
}
body .wp-block-spectra-container.hdc-links.alignfull {
	max-width: calc(440px + 2 * var(--wp--preset--spacing--4));
	margin-left: auto;
	margin-right: auto;
}
/* Front end: the same happens to Spectra containers inside our core-Group bands (the bands that hold Amelia forms).
   Saving from the editor stores "align":"full" on them, and Spectra's `body .spectra-is-root-container.alignfull
   { max-width: none }` (0,2,1) then stretched Make a booking's section heads and intro text across the page (live,
   Alex, 2026-10-30). Keep their usual widths: (0,3,1). */
body .wp-block-spectra-container.alignfull:is(.hdc-measure, .hdc-section-head, .hdc-inline-quote) {
	max-width: var(--wp--custom--measure);
}
body .wp-block-spectra-container.hdc-quote.alignfull {
	max-width: calc(var(--wp--custom--measure) + 104px);
}
.editor-styles-wrapper .wp-block-spectra-container.hdc-links > .block-editor-inner-blocks > .wp-block-spectra-container-is-layout-flex {
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	text-align: center;
}

/* ---------- Studio hire (/dance-studio-hire-in-sheffield/) ---------- */

/* Amelia's "Book a studio" / "Book appointment" triggers (step-booking buttons): core buttons whose inline
   padding and radius have to stay as Amelia saved them. Styled as the primary button (hdc-btn--primary, button-primary),
   48px tall, since studio hire isn't an adult-only page; !important beats the inline style. */
.amelia-step-booking-button-trigger .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5) !important;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pill) !important;
	background: var(--wp--preset--color--button-primary);
	color: var(--wp--preset--color--on-brand);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
.amelia-step-booking-button-trigger .wp-block-button__link:hover {
	background: var(--wp--preset--color--button-primary-hover);
	color: var(--wp--preset--color--on-brand);
}
@media (hover: hover) {
	.amelia-step-booking-button-trigger .wp-block-button__link:hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}
.amelia-step-booking-button-trigger .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.amelia-step-booking-button-trigger .wp-block-button__link {
		transition: none;
	}
	.amelia-step-booking-button-trigger .wp-block-button__link:hover {
		transform: none;
	}
}

/* Card grid and cards built from core Groups, for cards that hold an Amelia button (the Prices cards).
   Same look as the Spectra grid and hdc-card. Spectra zeroes a core Group's side padding, hence the long
   selector for the card's padding. */
.wp-block-group.hdc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	align-items: stretch;
}
.wp-block-group.hdc-grid > * {
	min-width: 0;
	margin: 0;
}
@media (min-width: 640px) {
	.wp-block-group.hdc-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.hdc-band__inner .wp-block-group.hdc-card.is-layout-flow.wp-block-group-is-layout-flow {
	padding: var(--wp--preset--spacing--5);
}
.wp-block-group.hdc-card > * {
	margin-block: 0;
}
.wp-block-group.hdc-card > .wp-block-spectra-content {
	margin-block: 0;
}
/* The card's button sits at the bottom, so buttons line up across the row. */
.wp-block-group.hdc-card > :is(.wp-block-amelia-step-booking-button-gutenberg-block, .wp-block-spectra-buttons) {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--2);
}

/* A single photo beside the text (Studio 3, the waiting area), under it on phones. */
.wp-block-spectra-container.hdc-split__media {
	padding: 0;
	min-width: 0;
}
.hdc-split__media .wp-block-image {
	margin: 0;
}
.hdc-split__media .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}

/* Card photo slot (the design system's hdc-card__media, here 4:3 rather than a 140px strip) on a Spectra card: the container's own padding,
   and the figure's margin, are reset so the photo fills the slot edge to edge. Empty placeholders keep the tint. */
.wp-block-spectra-container.hdc-card__media {
	box-sizing: border-box;
	width: calc(100% + var(--wp--preset--spacing--5) * 2);
	max-width: none;
	align-self: stretch;
	padding: 0;
	margin: calc(var(--wp--preset--spacing--5) * -1) calc(var(--wp--preset--spacing--5) * -1) 0;
	height: auto;
	aspect-ratio: 4 / 3;
	flex: none;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0 0;
	background: var(--hype-blue-tint);
}
.hdc-card__media .wp-block-image {
	margin: 0;
	width: 100%;
	max-width: none;
}
.hdc-card__media .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Round profile photo at the top of a card (teacher cards). Empty placeholders keep the tint. */
.hdc-card__avatar,
.wp-block-spectra-container.hdc-card__avatar {
	box-sizing: border-box;
	width: 96px;
	height: 96px;
	max-width: none;
	flex: none;
	align-self: flex-start;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 50%;
	background: var(--hype-blue-tint);
}

/* Clickable card (hdc-card--link): the title is the card's one link, and its ::after covers the whole card,
   so the photo and role are tappable too. Hover raises the card (shadow-raised); keyboard focus rings the card. */
.wp-block-spectra-container.hdc-card--link {
	position: relative;
	transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
/* Spectra gives every child of a container position: relative, which would shrink the link's ::after to the
   title. Unset it inside the card so the ::after covers the whole card. */
.wp-block-spectra-container.hdc-card--link > * {
	position: static;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-spectra-container.hdc-card--link { transition: none; }
}

/* Team cards: the role under each name is a step larger than the usual card meta line (body, not small). */
.hdc-grid--team .wp-block-spectra-content.hdc-card__meta {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--type--body--line-height);
}

/* Team grid (About page): the first two cards (the directors) share a row, then rows of three.
   Six columns on desktop: the first two cards span three each, the rest two each. Two across from 640px. */
@media (min-width: 1024px) {
	.wp-block-spectra-container.hdc-grid--team {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.wp-block-spectra-container.hdc-grid--team > * {
		grid-column: span 2;
	}
	.wp-block-spectra-container.hdc-grid--team > :nth-child(-n + 2) {
		grid-column: span 3;
	}
	/* Editor only: the cards sit inside two wrappers (made display: contents in the editor section below), so the
	   spans above miss them and each card took one of the six columns (Alex, 2026-10-27). Same spans, on the cards. */
	.editor-styles-wrapper .wp-block-spectra-container.hdc-grid--team > .block-editor-inner-blocks > .wp-block-spectra-container-is-layout-flex > * {
		grid-column: span 2;
	}
	.editor-styles-wrapper .wp-block-spectra-container.hdc-grid--team > .block-editor-inner-blocks > .wp-block-spectra-container-is-layout-flex > :nth-child(-n + 2) {
		grid-column: span 3;
	}
}

/* The Prices quote follows the card grid (a core Group, so the Spectra split rule above doesn't reach it). */
.wp-block-group.hdc-grid ~ .wp-block-spectra-container.hdc-quote {
	margin-top: var(--wp--preset--spacing--7);
}

/* ---------- News post template (templates/single.html) ---------- */

/* The band is a template-level core Group, so it needs its own padding (the .hdc-band rules above only reach
   bands inside post content). One surface from top to bottom. The extra .hdc-band outranks WordPress's
   ".wp-block-group.is-layout-flow … { padding-left: 0 }", which would remove the side gutter. */
.hdc-main > .wp-block-group.hdc-band.hdc-post {
	box-sizing: border-box;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding: var(--space-7) var(--space-4);
}
@media (min-width: 640px) {
	.hdc-main > .wp-block-group.hdc-band.hdc-post {
		padding: var(--space-8) var(--space-5);
	}
}
@media (min-width: 1024px) {
	.hdc-main > .wp-block-group.hdc-band.hdc-post {
		padding: var(--space-9) var(--space-6);
	}
}
/* Category eyebrow, title and date stack within the measure; the photo and the content follow space-6 apart. */
.hdc-post .wp-block-group.hdc-band__inner {
	gap: var(--wp--preset--spacing--6);
}
.hdc-post__head {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--custom--measure);
	margin-inline: auto;
	padding-inline: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}
/* WordPress's constrained layout centres children with !important auto margins, which centre shrink-wrapped
   items in this flex column; the head reads left-aligned, like the text below it. */
.hdc-post__head > * {
	margin: 0 !important;
	text-align: left;
}
.hdc-post__head .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}
.hdc-post__img,
.hdc-post__img img {
	width: 100%;
	border-radius: var(--wp--custom--radius--lg);
}
/* The photo sits in the reading column, lined up with the title and text (Alex, 2026-10-25). Outranks the
   block's "wide" alignment from WordPress's constrained layout. */
.hdc-post .wp-block-post-featured-image.hdc-post__img {
	max-width: var(--wp--custom--measure);
	margin-inline: auto;
}
.hdc-post__img img {
	display: block;
	height: 100%;
	object-fit: cover;
}
/* The post's own blocks sit in the measure column with the same stack gap as a Spectra stack. */
.hdc-post .wp-block-post-content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
}
.hdc-post .wp-block-post-content > * {
	margin-block: 0;
}

/* ---------- News listing (the posts page) ----------
   A core Query so it can paginate. Two columns from 640px; on page 1 (no `paged` body class) the newest post
   is the wide feature card: photo left, text right. Cards are core Groups; the listing has no Amelia. */

.hdc-news-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
}
.hdc-news-grid > li {
	margin: 0;
	min-width: 0;
}
/* Kept although the bundle has the same rule: the base rule above sets one column and loads after the bundle, so
   this repeat is what makes two columns from 640px. */
@media (min-width: 640px) {
	.hdc-news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.hdc-post-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.wp-block-group.hdc-post-card__body {
	display: flex;
	flex-direction: column;
	padding: 0;
	gap: var(--wp--preset--spacing--3);
}
.hdc-news-grid .hdc-post-card {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.hdc-news-grid .hdc-post-card__body {
	flex: 1;
}

/* A post with no featured image: WordPress prints a grey placeholder icon; hide it so the card is just text. */
.hdc-post-card a:has(> figure.is-placeholder),
.hdc-post-card figure.is-placeholder {
	display: none;
}

/* Feature card (page 1 only). An image-less feature is just the text, full width. */
@media (min-width: 768px) {
	body:not(.paged) .hdc-news-grid > li:first-child {
		grid-column: 1 / -1;
	}
	body:not(.paged) .hdc-news-grid > li:first-child .hdc-post-card:has(.wp-block-post-featured-image) {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: stretch;
	}
	body:not(.paged) .hdc-news-grid > li:first-child .wp-block-post-featured-image,
	body:not(.paged) .hdc-news-grid > li:first-child .wp-block-post-featured-image a {
		height: 100%;
	}
	body:not(.paged) .hdc-news-grid > li:first-child .wp-block-post-featured-image img {
		height: 100%;
		aspect-ratio: auto;
	}
	body:not(.paged) .hdc-news-grid > li:first-child .hdc-post-card__body {
		justify-content: center;
	}
	body:not(.paged) .hdc-news-grid > li:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--h-2);
		line-height: var(--wp--custom--type--h-2--line-height);
	}
}

/* Pagination: 48px pill links, current page filled (design system: ClassCard README, bundle.css).
   WordPress drops the className from core/query-pagination, so target the block's own class too. */
:is(.hdc-pagination, .wp-block-query-pagination) {
	margin-top: var(--wp--preset--spacing--7, var(--wp--preset--spacing--6));
	gap: var(--wp--preset--spacing--2);
}
:is(.hdc-pagination, .wp-block-query-pagination) .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
}
:is(.hdc-pagination, .wp-block-query-pagination) :is(a, .page-numbers) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--tap-target);
	min-height: var(--wp--custom--tap-target);
	box-sizing: border-box;
	padding: 0 var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
:is(.hdc-pagination, .wp-block-query-pagination) a:hover {
	background: var(--wp--preset--color--surface-sunken);
}
:is(.hdc-pagination, .wp-block-query-pagination) .page-numbers.current {
	background: var(--wp--preset--color--hype-blue);
	color: var(--wp--preset--color--on-brand);
}
/* Previous/next arrows: Figtree's arrow character sits high, so draw Lucide's arrow-right (16px, the old character's size, currentColor) instead. */
:is(.hdc-pagination, .wp-block-query-pagination) :is(.wp-block-query-pagination-next-arrow, .wp-block-query-pagination-previous-arrow) {
	display: inline-block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	min-width: 0;
	min-height: 0;
	max-width: 16px;
	max-height: 16px;
	padding: 0;
	line-height: 0;
	margin-inline: var(--wp--preset--spacing--2) 0;
	font-size: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.hdc-pagination, .wp-block-query-pagination) .wp-block-query-pagination-previous-arrow {
	margin-inline: 0 var(--wp--preset--spacing--2);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
}
:is(.hdc-pagination, .wp-block-query-pagination) a:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}

/* The intro band and the listing under it share one surface: close the double band padding between them. */
.hdc-band:has(+ .hdc-news-band) {
	padding-bottom: var(--wp--preset--spacing--5);
}
.hdc-news-band {
	padding-top: 0;
}
/* The news band is in the template, not the page content, so the band padding rules above don't reach it and
   Spectra's zeroing of core Group padding left it with no gutter: cards ran to the screen edge below 1264px.
   Same gutter and bottom space as every other band (16 / 24 / 32px). */
.hdc-main > .wp-block-group.hdc-band.hdc-news-band.is-layout-flow {
	padding: 0 var(--space-4) var(--space-7);
}
@media (min-width: 640px) {
	.hdc-main > .wp-block-group.hdc-band.hdc-news-band.is-layout-flow {
		padding: 0 var(--space-5) var(--space-8);
	}
}
@media (min-width: 1024px) {
	.hdc-main > .wp-block-group.hdc-band.hdc-news-band.is-layout-flow {
		padding: 0 var(--space-6) var(--space-9);
	}
}
/* News listing cards are core Groups, whose padding Spectra zeroes, so the card model above is set again here:
   space-5 padding, space-4 from the photo to the text, no padding on the text (same as the home What's on cards). */
.hdc-news-grid .wp-block-group.hdc-card.hdc-post-card.is-layout-flow.wp-block-group-is-layout-flow {
	padding: var(--wp--preset--spacing--5);
	overflow: hidden;
	gap: var(--wp--preset--spacing--4);
}
.hdc-news-grid .hdc-post-card .wp-block-group.hdc-post-card__body.is-layout-flow {
	padding: 0;
}
/* .wp-block-group.hdc-card > * (margin-block: 0) would otherwise keep the photo 24px below the card's top edge. */
.hdc-news-grid .hdc-post-card .wp-block-post-featured-image {
	margin-top: calc(-1 * var(--wp--preset--spacing--5));
}
/* The wide feature card (page 1, from 768px): the photo fills the left column out to the card's top, bottom and
   left edges; the text column sits space-4 from it, in the card's own padding. */
@media (min-width: 768px) {
	body:not(.paged) .hdc-news-grid > li:first-child .wp-block-group.hdc-card.hdc-post-card.is-layout-flow.wp-block-group-is-layout-flow {
		gap: var(--wp--preset--spacing--4);
	}
	body:not(.paged) .hdc-news-grid > li:first-child .hdc-post-card .wp-block-post-featured-image {
		margin: calc(-1 * var(--wp--preset--spacing--5)) 0 calc(-1 * var(--wp--preset--spacing--5)) calc(-1 * var(--wp--preset--spacing--5));
		width: calc(100% + var(--wp--preset--spacing--5));
		height: calc(100% + 2 * var(--wp--preset--spacing--5));
	}
}

/* ---------- News post body (hdc-prose) ---------- */

/* A Spectra button is the <a> itself (it carries hdc-btn), and .hdc-prose a (blue, underlined) outranks the
   variant's own colour. Put the variant colours back for filled buttons and drop the underline. */
.hdc-prose a.hdc-btn--primary,
.hdc-prose a.hdc-btn--warm {
	color: var(--wp--preset--color--on-brand);
}
/* Room around a button: more space above and below than between paragraphs. */
.hdc-prose .wp-block-spectra-buttons {
	margin-block: var(--wp--preset--spacing--4) calc(var(--wp--preset--spacing--4) + 20px);
}
/* Details lists (What / Where / Time / Cost): Spectra gives each item a 10px bottom margin on top of the
   list's own spacing, which reads as too loose. One tight gap instead. */
.hdc-prose .wp-block-spectra-list.hdc-list {
	gap: var(--wp--preset--spacing--2);
}
.hdc-prose .hdc-list .wp-block-spectra-list-child-item {
	margin-bottom: 0;
}
.hdc-prose .hdc-list .wp-block-spectra-content {
	margin: 0;
}

/* A post's featured quote sits in its own band, like the quote bands on pages (Alex, 2026-10-27): a sunken stripe
   across the full screen width, with the quote itself kept in the reading column. The quote stays inside the post
   content, so the stripe is painted with a spread shadow clipped to the quote's own height. That reaches both screen
   edges without widening the page (a shadow never adds a scrollbar). */
.hdc-prose .wp-block-spectra-container.hdc-quote {
	--hdc-quote-band: var(--wp--preset--color--surface-sunken);
	margin-block: var(--wp--preset--spacing--5);
	padding-block: var(--wp--preset--spacing--7);
	background: var(--hdc-quote-band);
	box-shadow: 0 0 0 100vmax var(--hdc-quote-band);
	clip-path: inset(0 -100vmax);
}
@media (min-width: 1024px) {
	.hdc-prose .wp-block-spectra-container.hdc-quote {
		padding-block: var(--wp--preset--spacing--8);
	}
}

/* FAQs in a post fill the reading column. The section's flex column sizes each child to its content, so the closed
   cards fitted their questions and jumped wider when one opened (Christmas show post, Alex, 2026-10-27). */
.hdc-prose .wp-block-group.hdc-faq {
	width: 100%;
}

/* Photo galleries in a post sit in the narrow reading column: two across at every width, not three. */
.hdc-prose .wp-block-gallery.has-nested-images.hdc-gallery {
	width: 100%;
}
@media (min-width: 1024px) {
	.hdc-prose .wp-block-gallery.has-nested-images.hdc-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* News posts that hold a form or an Amelia block use core Groups for the wrapper and the section holding it (Spectra
   containers strip the scripts those print), so the prose layout is repeated for core Groups. */
.wp-block-group:is(.hdc-prose, .hdc-prose__section) {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
}
.wp-block-group.hdc-prose {
	gap: var(--wp--preset--spacing--7);
}
.wp-block-group.hdc-prose__section {
	gap: var(--wp--preset--spacing--5);
}
.wp-block-group:is(.hdc-prose, .hdc-prose__section) > * {
	margin-block: 0;
	max-width: 100%;
}

/* ---------- Cookie banner (functions.php, assets/js/consent.js) ----------
   A card pinned to the foot of the screen. It doesn't cover the page or trap focus, so visitors can keep
   reading or booking. Accept and Reject look the same, as the ICO asks. Full width on phones, a 560px card
   in the bottom-left corner from tablet up. Sits above the header (50) and drawer (60), below the admin bar. */
.hdc-consent__text a:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}
@media print {
	.hdc-consent {
		display: none;
	}
}

/* A tall photo in a gallery: the 4:3 crop keeps the top, where the face is, instead of the middle. */
.hdc-gallery .wp-block-image.hdc-gallery__img--top img {
	object-position: center top;
}

/* ==== assets/css/dark.css ==== */
/* Hand-written dark-mode extras that aren't colour tokens. Loaded only when HYPE_DARK_MODE is true,
   under the same conditions as tokens-dark.css. */

/* The header logo swaps to the reversed version (white "COMPANY") on dark grounds. */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) :is(.hdc-header, .hdc-hero__logo) .hdc-logo--light {
		display: none;
	}
	html:not([data-theme="light"]) :is(.hdc-header, .hdc-hero__logo) .hdc-logo--reversed {
		display: block;
	}
}
html[data-theme="dark"] :is(.hdc-header, .hdc-hero__logo) .hdc-logo--light {
	display: none;
}
html[data-theme="dark"] :is(.hdc-header, .hdc-hero__logo) .hdc-logo--reversed {
	display: block;
}

/* ==== assets/css/fluent-forms.css ==== */
/* Fluent Forms: match the design system's primary button (48px pill, button-primary fill, lighter on hover). Hand-written; uses token variables only.
   Fluent Forms buttons don't carry WordPress's .wp-element-button class, so theme.json button styles miss them.
   The extra classes outrank Fluent's per-form styles (form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)). */

.fluentform .ff-btn.ff-btn-submit.ff_btn_style {
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--button-primary);
	color: var(--wp--preset--color--on-brand);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--type--button--font-size);
	line-height: var(--wp--custom--type--button--line-height);
	font-weight: var(--wp--custom--type--button--font-weight);
	opacity: 1;
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}

.fluentform .ff-btn.ff-btn-submit.ff_btn_style:hover {
	background-color: var(--wp--preset--color--button-primary-hover);
	color: var(--wp--preset--color--on-brand);
	opacity: 1;
}
/* Lift and shadow only where a pointer really hovers; on a phone a tapped button would keep them. */
@media (hover: hover) {
	.fluentform .ff-btn.ff-btn-submit.ff_btn_style:hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}

.fluentform .ff-btn.ff-btn-submit.ff_btn_style:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}

/* Fields: surface-raised with a border-control edge in both themes (tokens.json), so they stay the same colour
   at rest and when focused. Fluent Forms otherwise paints them white on focus, and black at rest in dark mode.
   !important beats Fluent's per-form colours. */
.fluentform .ff-el-group .ff-el-form-control,
.fluentform .ff-el-group .ff-el-form-control:focus {
	background-color: var(--wp--preset--color--surface-raised) !important;
	color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--border-control);
}

.fluentform .ff-el-group .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--ink-muted);
	opacity: 1;
}

/* Fields: soft focus, as in the design system (Button/README focus rule) and Amelia. Fluent Forms draws a real
   1px border, so that turns hype-blue-deep and a 3px focus-ring glow sits outside it (Amelia's equivalent is
   a 1px ring plus a 4px glow). !important beats Fluent's own and per-form focus colours. */
.fluentform .ff-el-group .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--hype-blue-deep) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--focus-ring) 25%, transparent) !important;
}

/* Errors: the design system's danger colour (light #b3261e, dark #ff8a80) for the message and the field's edge.
   Fluent's own pale red is too faint on the cream background. The footer newsletter form keeps Fluent's colour:
   it sits on the navy band, and there's no danger colour for inverse surfaces yet. */
.fluentform:not(.hdc-footer *) {
	--fluentform-danger: var(--wp--preset--color--danger);
}

.fluentform:not(.hdc-footer *) .ff-el-group.ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--preset--color--danger);
}

.fluentform:not(.hdc-footer *) .ff-el-is-error .text-danger {
	margin-top: var(--wp--preset--spacing--1);
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	color: var(--wp--preset--color--danger);
}

@media (prefers-reduced-motion: reduce) {
	.fluentform .ff-btn.ff-btn-submit.ff_btn_style {
		transition: none;
	}
	.fluentform .ff-btn.ff-btn-submit.ff_btn_style:hover {
		transform: none;
	}
}

/* Two fields side by side: when one label wraps onto a second line, line the input boxes up along the bottom
   (Alex, 2026-10-29). Fluent's show/hide sets display inline on the field groups, so the cell does the aligning. */
.fluentform .ff-t-container > .ff-t-cell {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Thank-you message after a form is sent (every Fluent form; Alex, 2026-10-29): a pale green panel with a green
   stripe and a tick, so it reads as "done" at a glance. sage-tint behind ink text (12.9:1), the tick and stripe
   in sage-deep; both switch in dark mode. Fluent marks it role="status", so screen readers announce the text;
   the tick is decoration. The footer's newsletter version on navy is in patterns.css. */
.fluentform .ff-message-success,
.ff-message-success {
	position: relative;
	margin-top: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5) var(--wp--preset--spacing--4) calc(var(--wp--preset--spacing--5) + 32px);
	border: 0;
	border-left: 4px solid var(--wp--preset--color--sage-deep);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: none;
	background: var(--wp--preset--color--sage-tint);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	/* No single word left alone on the last line. */
	text-wrap: pretty;
}
.ff-message-success::before {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--4);
	top: calc(var(--wp--preset--spacing--4) + 1px);
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--sage-deep);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.6 15.4-4.3-4.3 1.4-1.4 2.9 2.9 6-6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.6 15.4-4.3-4.3 1.4-1.4 2.9 2.9 6-6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ff-message-success > :first-child {
	margin-top: 0;
}
.ff-message-success > :last-child {
	margin-bottom: 0;
}
.ff-message-success:focus {
	outline: none;
}

/* ==== assets/css/fluent-cart.css ==== */
/* FluentCart (shop, cart, checkout, receipt, account): hand-written; uses token variables only.
   FluentCart's stylesheets read --fct-* custom properties with their own fallbacks, and every per-page variable
   (checkout, shop, customer dashboard…) falls back to these globals, so setting the globals here restyles the whole
   store. They point at our tokens, so dark mode follows automatically. FluentCart's own Appearance setting stays on
   "Default", which prints nothing that would compete with these. */

body {
	/* Text */
	--fct-primary-text-color: var(--wp--preset--color--ink);
	--fct-secondary-text-color: var(--wp--preset--color--ink-muted);
	--fct-primary-active-text-color: var(--wp--preset--color--hype-blue-deep);

	/* Backgrounds and borders */
	--fct-primary-bg-color: var(--wp--preset--color--hype-blue);
	--fct-secondary-bg-color: var(--wp--preset--color--surface-sunken);
	--fct-card-bg-color: var(--wp--preset--color--surface-raised);
	--fct-border-color: var(--wp--preset--color--border-control);
	--fct-divider-color: var(--wp--preset--color--border-subtle);
	--fct-active-border-color: var(--wp--preset--color--hype-blue-deep);
	--fct-secondary-active-border-color: var(--wp--preset--color--hype-blue);

	/* Buttons: primary is our button-primary pill, secondary our outline (Button/README) */
	--fct-btn-bg-color: var(--wp--preset--color--button-primary);
	--fct-btn-text-color: var(--wp--preset--color--on-brand);
	--fct-btn-hover-bg-color: var(--wp--preset--color--button-primary-hover);
	--fct-btn-hover-text-color: var(--wp--preset--color--on-brand);
	--fct-secondary-btn-bg-color: transparent;
	--fct-secondary-btn-text-color: var(--wp--preset--color--ink);
	--fct-secondary-btn-border-color: var(--wp--preset--color--border-control);
	--fct-secondary-btn-hover-bg-color: var(--wp--preset--color--surface-sunken);
	--fct-btn-padding-y: var(--wp--preset--spacing--3);
	--fct-btn-padding-x: var(--wp--preset--spacing--5);

	/* Form inputs: surface-raised with a border-control edge, as in Fluent Forms */
	--fct-input-bg-color: var(--wp--preset--color--surface-raised);
	--fct-input-text-color: var(--wp--preset--color--ink);
	--fct-input-placeholder-text-color: var(--wp--preset--color--ink-muted);
	--fct-input-disabled-bg-color: var(--wp--preset--color--surface-sunken);

	/* Corners */
	--fct-card-radius: var(--wp--custom--radius--lg);
	--fct-container-radius: var(--wp--custom--radius--lg);
	--fct-popup-radius: var(--wp--custom--radius--lg);
	--fct-btn-radius: var(--wp--custom--radius--pill);
	--fct-badge-radius: var(--wp--custom--radius--pill);
	--fct-input-radius: var(--wp--custom--radius--md);
}

/* The store's content sits in the band's full width (no reading column): the shop grid and the two-column checkout
   need the room. */
.hdc-store {
	margin-top: var(--wp--preset--spacing--6);
}

/* Fields: 48px tall, the design system's tap target. */
body {
	--fct-input-padding-y: 12px;
	--fct-input-padding-x: var(--wp--preset--spacing--4);
}

/* Primary buttons (Add to Cart, Go to Checkout, Place Order): the design system's button text (16px bold) and 48px
   height. FluentCart has no variables for these, so they're set here; "body" outranks FluentCart's single classes. */
body :is(.fluent-cart-add-to-cart-button, .fct-primary-btn, .fct_place_order_btn) {
	min-height: var(--wp--custom--tap-target);
	max-height: none;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--type--button--font-size);
	line-height: var(--wp--custom--type--button--line-height);
	font-weight: var(--wp--custom--type--button--font-weight);
	text-decoration: none;
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
body :is(.fluent-cart-add-to-cart-button, .fct-primary-btn, .fct_place_order_btn):focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}
@media (hover: hover) {
	body :is(.fluent-cart-add-to-cart-button, .fct-primary-btn, .fct_place_order_btn):hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}

/* Product cards in the shop: the design system's card (surface-raised, soft shadow, no outline), the photo slot
   tinted while a product has no image, and the title in the display font. */
body .fct-product-card {
	padding: 0;
	border-color: transparent;
	background: var(--wp--preset--color--surface-raised);
	box-shadow: var(--wp--preset--shadow--card);
}
body .fct-product-card-image-wrap.is-placeholder {
	background: var(--wp--preset--color--hype-blue-tint);
}
body .fct-product-card-title,
body .fct-product-card-title a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* The floating basket button (bottom right): a raised white disc with a shadow, so it shows on any band,
   the navy footer included. */
body .fct-cart-drawer-open-btn {
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--card);
}

/* "Have a Coupon?" in the order summary: the page background (surface) rather than the sunken tint, so it's a
   softer highlight inside the white summary panel (Alex, 2026-10-29). */
body .fct_coupon .fct_coupon_toggle a {
	background-color: var(--wp--preset--color--surface);
}

/* ==== assets/css/amelia.css ==== */
/* Amelia booking forms: shape and interaction to match the design system. Hand-written; token variables only.
   Colours come from Amelia -> Customize (light) and amelia-dark.css (dark); see docs/amelia-styling.md.
   Mostly sets Amelia's own sizing variables, so an Amelia update is less likely to break it.
   .am-dialog and the pop-ups Amelia moves to <body> sit outside .amelia-v2-booking, hence the extra selectors. */

/* Fields: 16px text. iOS Safari zooms the page in when a field with smaller text is tapped (Amelia's default is 15px)
   and doesn't zoom back out. !important beats the variable Amelia sets inline. */
:is(.amelia-v2-booking, .am-dialog) {
	--am-fs-inp: 16px !important;
}

/* Buttons: 48px pill, Figtree 16/20 bold. !important beats Amelia's size modifiers (--default, --medium …). */
:is(.amelia-v2-booking, .am-dialog) .am-button:not(.is-icon-only) {
	--am-h-btn: var(--wp--custom--tap-target) !important;
	--am-rad-btn: var(--wp--custom--radius--pill) !important;
	--am-padd-btn: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5) !important;
	--am-fs-btn: var(--wp--custom--type--button--font-size) !important;
	--am-lh-btn: var(--wp--custom--type--button--line-height) !important;
	--am-fw-btn: var(--wp--custom--type--button--font-weight) !important;
	border-radius: var(--wp--custom--radius--pill) !important; /* some panels hard-code 6px */
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
/* Filled buttons: button-primary in both themes (blue in light mode, coral in dark mode), whatever colour
   Amelia -> Customize holds. !important beats the variables Amelia sets inline; amelia-dark.css maps the same
   names to the same token, so the two files agree. Selected days, switches and ticks stay hype-blue. */
:is(.amelia-v2-booking, .am-dialog, [style*="--am-"]) {
	--am-c-btn-prim: var(--wp--preset--color--button-primary) !important;
	--am-c-btn-prim-text: var(--wp--preset--color--on-brand) !important;
	--am-c-btn-first: var(--wp--preset--color--button-primary) !important;
	--am-c-btn-first-op20: color-mix(in srgb, var(--wp--preset--color--button-primary) 20%, transparent) !important;
	--am-c-btn-first-op30: color-mix(in srgb, var(--wp--preset--color--button-primary) 30%, transparent) !important;
	--am-c-btn-first-op80: color-mix(in srgb, var(--wp--preset--color--button-primary) 80%, transparent) !important;
	--am-c-btn-op30: color-mix(in srgb, var(--wp--preset--color--button-primary) 30%, transparent) !important;
	--am-c-fcip-btn-op50: color-mix(in srgb, var(--wp--preset--color--button-primary) 50%, transparent) !important;
	--am-c-fcis-btn-op50: color-mix(in srgb, var(--wp--preset--color--button-primary) 50%, transparent) !important;
}
:is(.amelia-v2-booking, .am-dialog) .am-button.am-button--filled:not(.is-disabled):hover {
	--am-c-btn-bgr: var(--wp--preset--color--button-primary-hover) !important;
}
/* Lift and shadow only where a pointer really hovers; on a phone a tapped button would keep them. */
@media (hover: hover) {
	:is(.amelia-v2-booking, .am-dialog) .am-button.am-button--filled:not(.is-disabled):hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}
/* Secondary ("plain") buttons: outline in border-control, ink label, sunken fill on hover. */
:is(.amelia-v2-booking, .am-dialog) .am-button.am-button--plain {
	--am-c-btn-text: var(--wp--preset--color--ink) !important;
	--am-c-btn-border: var(--wp--preset--color--border-control) !important;
}
:is(.amelia-v2-booking, .am-dialog) .am-button.am-button--plain:not(.is-disabled):hover {
	--am-c-btn-bgr: var(--wp--preset--color--surface-sunken) !important;
}
/* Text buttons ("Learn more", "Back"): blue as text must be hype-blue-deep. */
:is(.amelia-v2-booking, .am-dialog) .am-button.am-button--text {
	--am-c-btn-text: var(--wp--preset--color--hype-blue-deep) !important;
}

/* Inputs and selects: 48px tall, 4px corners, border-control border (colour from Customize), Figtree.
   Set on every Amelia element because Amelia redeclares these variables on inner elements. */
:is(.amelia-v2-booking, .amelia-v2-booking *) {
	--am-input-height: var(--wp--custom--tap-target) !important;
	--am-h-select: var(--wp--custom--tap-target) !important;
	--am-rad-inp: var(--wp--custom--radius--sm) !important;
	--am-rad-input: var(--wp--custom--radius--sm) !important;
	--am-rad-select: var(--wp--custom--radius--sm) !important;
	--am-rad-inp-number: var(--wp--custom--radius--sm) !important;
	--am-input-number-height: var(--wp--custom--tap-target) !important;
	--am-font-family: var(--wp--preset--font-family--body) !important;
}

/* Boxes: the form's outer box takes the one 12px corner and the card shadow; cards nested inside it take 8px. */
.amelia-v2-booking #amelia-container.am-fs__wrapper { border-radius: var(--wp--custom--radius--lg); box-shadow: var(--wp--preset--shadow--card); }
.amelia-v2-booking #amelia-container .am-fs-sb { border-radius: var(--wp--custom--radius--lg) 0 0 var(--wp--custom--radius--lg); }
.amelia-v2-booking [style*="--am-brad-main"] { --am-brad-main: 0 var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0 !important; }
/* On a narrow screen Amelia removes the sidebar, so the main panel is the whole box and needs all four corners. */
.amelia-v2-booking [style*="--am-brad-main"]:not(:has(.am-fs-sb)) { --am-brad-main: var(--wp--custom--radius--lg) !important; }
.amelia-v2-booking #amelia-container:not(:has(> .am-fs-sb)) .am-fs__main { border-radius: var(--wp--custom--radius--lg) !important; }
.amelia-v2-booking #amelia-container :is(.am-fs__init-item, .am-ec) { border-radius: var(--wp--custom--radius--md); }
/* Duration and price in the time list: duration on the left, price right-aligned (the row leaves room for the tick). */
:is(.am-select-popper, .am-time-select__popper) .am-oitf__wrapper,
:is(.am-select-popper, .am-time-select__popper) .am-oitf,
:is(.am-select-popper, .am-time-select__popper) .am-oitf__data { flex: 1 1 auto; min-width: 0; }
:is(.am-select-popper, .am-time-select__popper) .am-oitf { display: flex; align-items: center; width: 100%; }
:is(.am-select-popper, .am-time-select__popper) .am-oitf__data { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* Event cards: Amelia sets an inline shadow with an 8px stripe in the event's own colour (Amelia's default
   royal blue) and a light glow that shows in dark mode. Alex, 2026-10-31: no shadow and no stripe, a thin border
   like the cards in the step booking form, so the two forms match. */
.amelia-v2-booking #amelia-container .am-ec { box-shadow: none !important; border: 1px solid var(--wp--preset--color--border-control) !important; }
/* Step-booking sidebar (Alex, 2026-10-30): the same surface-raised as the main panel in both themes (in dark mode
   the old surface-sunken sidebar blended into the page band), a border-subtle divider between the two, and
   surface-sunken step rows that read as slots in the card. Overrides Amelia's inline --am-c-sb-bgr, so the
   Customize value (colorSbBgr) no longer shows. amelia-dark.css maps sb-bgr to surface-raised too. */
:is(.amelia-v2-booking, [style*="--am-"]) { --am-c-sb-bgr: var(--wp--preset--color--surface-raised) !important; }
.amelia-v2-booking #amelia-container .am-fs-sb { border-inline-end: 1px solid var(--wp--preset--color--border-subtle); }
/* Step rows sit straight on the sidebar, no fill (surface-sunken read as holes, Alex 2026-10-30). Only the active
   step (the one whose ring Amelia marks as selected) gets hype-blue-tint; its ring keeps Amelia's 4px primary border.
   The ring's centre is see-through so it shows the row's colour. */
.amelia-v2-booking #amelia-container .am-fs-sb__step { background-color: transparent; }
.amelia-v2-booking #amelia-container .am-fs-sb__step:has(.am-fs-sb__step-checker-selected) { background-color: var(--wp--preset--color--hype-blue-tint); }
.amelia-v2-booking #amelia-container .am-fs-sb__step-checker { background-color: transparent; }
/* "Get in Touch": Amelia uses ink at 60%, 4.1:1 on white (fails AA at 14px). ink-muted is 6.3:1 light, 7.4:1 dark. */
.amelia-v2-booking #amelia-container .am-fs-sb__support-heading { color: var(--wp--preset--color--ink-muted); }
/* Cart count in the step-booking sidebar: Amelia paints it in the error colour, which reads as a warning.
   Use the brand fill with on-brand text instead. */
.amelia-v2-booking #amelia-container .am-fs-sb__step-icon .am-fs-sb__step-icon__number {
	background-color: var(--wp--preset--color--hype-blue);
	color: var(--wp--preset--color--on-brand);
	font-weight: 700;
}
/* Completed-step ticks in the same sidebar: brand blue, not success green (Alex, 2026-10-25).
   Green stays for success messages elsewhere. */
.amelia-v2-booking #amelia-container .am-fs-sb__step-checker .am-icon-check {
	background-color: var(--wp--preset--color--hype-blue);
	color: var(--wp--preset--color--on-brand);
}
/* Step-booking button bar: Amelia casts a faint shadow upwards that reads as a stray line across the form
   (Alex, 2026-10-25). */
.amelia-v2-booking #amelia-container .am-fs__main-footer { box-shadow: none !important; }
/* The bar is see-through and sits over the bottom of the scrolling step, so long lists (packages) showed through
   behind Continue (Alex, 2026-11-12). A solid bar in the card colour, and 8px more room at the foot of the step,
   because our 48px buttons make the bar 8px taller than Amelia allows for. */
.amelia-v2-booking #amelia-container .am-fs__main-footer { background-color: var(--am-c-main-bgr, var(--wp--preset--color--surface-raised)) !important; }
.amelia-v2-booking #amelia-container .am-fs__main .am-fs__main-content:not(.am-cap, .am-capi, .am-caep) { padding-bottom: 24px !important; }
/* Package cards (Alex, 2026-11-12): no list of classes. Every pass covers the same classes, and the portal's
   Buy a package page already says which (intro and cards above the form), so Amelia's list repeated it on each card. */
.amelia-v2-booking #amelia-container .am-fs__ps-item__services { display: none !important; }
/* Date and time step (Alex, 2026-10-30). Date cells and time slots get radius-md. The selected date and slot were a
   solid hype-blue fill that read like a primary button next to Continue; now they match the active sidebar step:
   hype-blue-tint, a 2px hype-blue-deep border (1px border plus a 1px inset ring, so nothing shifts) and ink at 600.
   Today's dot follows the cell's text colour, as before; unavailable days are untouched. */
.amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell .fc-daygrid-day-frame { border-radius: var(--wp--custom--radius--md); }
.amelia-v2-booking #amelia-container .am-advsc__wrapper { --am-rad-advsc-slot: var(--wp--custom--radius--md); }
.amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell.am-advsc__dayGridMonth-selected .fc-daygrid-day-frame,
.amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell.am-advsc__dayGridMonth-selected .fc-daygrid-day-frame:hover {
	--am-c-advsc-cell-bgr: var(--wp--preset--color--hype-blue-tint);
	--am-c-advsc-cell-border: var(--wp--preset--color--hype-blue-deep);
	--am-c-advsc-cell-text: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--hype-blue-deep);
}
.amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell.am-advsc__dayGridMonth-selected .fc-daygrid-day-number { font-weight: 600; }
/* Hover on an available date: Amelia's 20% blue fill is almost the same as hype-blue-tint (#d6eff9 v #d9eff8 in light),
   so the fill stays at its resting 10% and hover shows only Amelia's 1px hype-blue border. */
.amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell:not(.am-advsc__dayGridMonth-selected, .am-advsc__dayGridMonth-disabled, .am-advsc__dayGridMonth-weekend) .fc-daygrid-day-frame:hover {
	--am-c-advsc-cell-bgr: var(--am-c-cal-init-op10);
}
.amelia-v2-booking #amelia-container .am-advsc__slots .am-advsc__slots-item.am-advsc__slots-item__selected .am-advsc__slots-item__inner {
	background: var(--wp--preset--color--hype-blue-tint);
	border: 1px solid var(--wp--preset--color--hype-blue-deep);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--hype-blue-deep);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
.amelia-v2-booking #amelia-container .am-advsc__slots .am-advsc__slots-item.am-advsc__slots-item__selected span { background-color: transparent; }
/* Touch screens: a tap on an Amelia dropdown goes to the box around its field (which opens the list), not to the field
   itself, so the phone doesn't focus it natively and scroll the page to it. amelia-select.js makes the field read-only. */
@media (pointer: coarse) {
	.amelia-v2-booking .el-select input[role="combobox"][readonly] { pointer-events: none; }
}
/* Select menus (Alex, 2026-10-30): the service category, dance style and every other Amelia dropdown, including
   time lists. The open list floats (surface-raised, 1px border-floating, shadow-raised, radius-md). The selected
   option is the list version of the selected state: hype-blue-tint, ink 600, a check on the right, no outline.
   Hover and keyboard focus (Element Plus's is-hovering) show only a 1px hype-blue-deep border, so they never look
   selected. Rows are at least 48px. The lists are moved to <body>, so no .amelia-v2-booking ancestor here. Amelia
   sets row colours, height and padding with !important from its own variables, so these need it too. */
:is(.am-select-popper, .am-time-select__popper).el-select__popper.el-popper {
	background: var(--wp--preset--color--surface-raised) !important;
	/* The border is an inset outline, so the list is exactly as wide as its field (a real border added 2px). */
	border: 0 !important;
	outline: 1px solid var(--wp--preset--color--border-floating);
	outline-offset: -1px;
	border-radius: var(--wp--custom--radius--md) !important;
	box-shadow: var(--wp--preset--shadow--raised) !important;
	overflow: hidden;
}
:is(.am-select-popper, .am-time-select__popper).el-select-dropdown { background: transparent; }
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__list { padding: var(--wp--preset--spacing--1); }
/* Element Plus caps the list at 274px, which only fits five 48px rows; seven fit, and on a short screen it scrolls. */
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__wrap { max-height: min(368px, 55vh); }
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item {
	position: relative;
	box-sizing: border-box;
	min-height: 48px !important;
	height: auto !important;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 11px 40px 11px 10px !important;
	border: 1px solid transparent !important;
	border-radius: var(--wp--custom--radius--sm);
	background-color: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
}
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item:not(.is-disabled):hover,
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item.is-hovering {
	background-color: transparent !important;
	border-color: var(--wp--preset--color--hype-blue-deep) !important;
}
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item.is-selected {
	background-color: var(--wp--preset--color--hype-blue-tint) !important;
	color: var(--wp--preset--color--ink) !important;
	font-weight: 600 !important;
}
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item.is-selected:not(:hover, .is-hovering) { border-color: transparent !important; }
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item.is-selected::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--hype-blue-deep);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Closed field text lines up with the option text: both start 16px in from the box's outer edge (the field's
   own padding is Amelia's 12px; the list adds 1px border + 4px padding + 1px row border + 10px row padding). */
.amelia-v2-booking #amelia-container .am-select .el-select__wrapper { padding-inline-start: 16px !important; }
/* Closed field: Element Plus draws the chosen value with the placeholder class in a fixed grey (#606266), and dims
   it (is-transparent) while the list is open. amelia-select.js flags a value as hype-has-value; a value is ink in
   both states, and only the real placeholder is ink-muted. */
.amelia-v2-booking .el-select__wrapper .el-select__placeholder { color: var(--wp--preset--color--ink); }
.amelia-v2-booking .el-select__wrapper .el-select__placeholder.is-transparent:not(.hype-has-value) { color: var(--wp--preset--color--ink-muted); }
/* The text sits in an inner span that Amelia colours itself; make it follow the line above. */
.amelia-v2-booking #amelia-container .am-select .el-select__wrapper .el-select__selected-item.el-select__placeholder > span { color: inherit !important; }
/* Focus on dates and time slots (Alex, 2026-10-30): the date cell (td) and the time slot are focusable buttons that
   already draw their own box, so the 3px focus ring around them made a double box (it also shows after a tap on
   iOS). Focus is the cell's own 1px hype-blue-deep border plus a 1px inset ring, as on the select rows, with no
   outer outline. A selected cell has the same border, so it never doubles up. */
.amelia-v2-booking #amelia-container :is(td.am-advsc__dayGridMonth-cell, .am-advsc__slots-item),
.amelia-v2-booking #amelia-container :is(td.am-advsc__dayGridMonth-cell, .am-advsc__slots-item) * { -webkit-tap-highlight-color: transparent; }
.amelia-v2-booking #amelia-container :is(td.am-advsc__dayGridMonth-cell, .am-advsc__slots-item):is(:focus, :focus-visible, :active),
.amelia-v2-booking #amelia-container :is(td.am-advsc__dayGridMonth-cell, .am-advsc__slots-item) *:is(:focus, :focus-visible, :active) { outline: none !important; }
.amelia-v2-booking #amelia-container td.am-advsc__dayGridMonth-cell:focus-visible .fc-daygrid-day-frame {
	--am-c-advsc-cell-border: var(--wp--preset--color--hype-blue-deep);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--hype-blue-deep);
}
.amelia-v2-booking #amelia-container .am-advsc__slots-item:focus-visible .am-advsc__slots-item__inner {
	border-color: var(--wp--preset--color--hype-blue-deep);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--hype-blue-deep);
}
/* Prices are labels, not buttons, so no pill shape. */
.amelia-v2-booking #amelia-container .am-fs__init-item__price { border-radius: var(--wp--custom--radius--sm); }

/* Focus on buttons and links: 3px focus-ring, 2px offset. */
:is(.amelia-v2-booking, .am-dialog, [class*="am-"][class*="popper"]) :is(a, button, [role="button"]):focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring) !important;
	outline-offset: 2px;
}
/* Focus on fields (Alex, 2026-10-25): no outline; Amelia's own 1px primary border plus a soft focus-ring glow,
   matching the Stripe card field. */
.amelia-v2-booking #amelia-container :is(.el-input__wrapper.is-focus, .el-textarea__inner.is-focus, .el-select__wrapper.is-focus, .el-select__wrapper.is-focused, .am-input-phone .m-input-wrapper.--border:focus-within) {
	box-shadow: 0 0 0 1px var(--am-c-primary), 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--focus-ring) 25%, transparent) !important;
}
.amelia-v2-booking #amelia-container :is(input, textarea):focus { outline: none; }

/* Phone field: same 48px height and 4px corners as the other fields (Amelia hard-codes 40px and 6px). */
.amelia-v2-booking #amelia-container .am-input-phone.m-input-phone-number .m-input-wrapper-input:not(.m-select-country .m-input-wrapper-input) { height: var(--wp--custom--tap-target); }
.amelia-v2-booking #amelia-container .am-input-phone.m-input-phone-number .m-input-wrapper.--border { border-radius: var(--wp--custom--radius--sm); }

/* Links in text: hype-blue-deep, 1px underline thickening to 3px on hover. */
:is(.amelia-v2-booking, .am-dialog) a:not(.am-button) {
	color: var(--wp--preset--color--hype-blue-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness 150ms ease-out;
}
@media (hover: hover) {
	:is(.amelia-v2-booking, .am-dialog) a:not(.am-button):hover { text-decoration-thickness: 3px; }
}

@media (prefers-reduced-motion: reduce) {
	:is(.amelia-v2-booking, .am-dialog) :is(.am-button, a) { transition: none; }
	:is(.amelia-v2-booking, .am-dialog) .am-button:hover { transform: none; }
}

/* Forms on the page (not pop-ups): Amelia centres its outer box with `margin: 100px auto`. From 1024px the box
   sits on the content column's left edge, in line with the h1 and intro, at Amelia's own max width; below 1024px
   it fills the column. The gap above the form is space-7 (48px) in bands; in news posts it follows the section's
   own gap. Alex, 2026-10-30. */
.wp-block-post-content .amelia-v2-booking > :is(#amelia-container, .am-elf) {
	margin: 0;
}
@media (max-width: 1023px) {
	.wp-block-post-content .amelia-v2-booking > :is(#amelia-container, .am-elf) {
		max-width: none;
	}
}
/* Customer portal sign-in card: keeps its 400px width, on the left edge. */
.wp-block-post-content .amelia-v2-booking #amelia-container.am-cap__wrapper.am-auth > .am-asi {
	margin-inline: 0 auto;
}
/* Flow layouts give the form a 16px block gap; bands' inner groups already add their 32px row gap. */
.wp-block-post-content :not(.hdc-prose__section, .hdc-band__inner) > .amelia-v2-booking {
	margin-block-start: var(--wp--preset--spacing--7);
}
.wp-block-post-content .wp-block-group.hdc-band__inner > .amelia-v2-booking {
	margin-block-start: calc(var(--wp--preset--spacing--7) - var(--wp--preset--spacing--6));
}
/* Prices share one left edge, so the £ signs line up down the list. The block is wide enough for £100.00. */
:is(.am-select-popper, .am-time-select__popper) .am-oitf__data-price-string { flex: none; width: 7ch; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Event booking form (Alex, 2026-10-31): the summary at the top of the Event Info step (date, title, price, address,
   status) sits straight on the dialog, with no raised white box. The bordered card on .am-ec is for cards in lists. */
html body .amelia-v2-booking #amelia-container .am-eli .am-ec { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }

/* ==== assets/css/amelia-dark.css ==== */
/* Generated by scripts/build_amelia_css.py from scripts/data/amelia-color-vars.txt. Do not edit by hand. */
/* Amelia in dark mode: points Amelia's inline colour variables at design-system tokens.
   Loaded only when HYPE_DARK_MODE is true. Light mode uses the Amelia -> Customize values
   (docs/amelia-styling.md). 515 variables mapped. */

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) :is(.amelia-v2-booking, [style*="--am-"]) {
		--am-c-advs-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-advs-border: var(--wp--preset--color--border-subtle) !important;
		--am-c-advs-item-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-advs-item-bgr-op10: color-mix(in srgb, var(--wp--preset--color--surface-raised) 10%, transparent) !important;
		--am-c-advs-item-border: var(--wp--preset--color--border-subtle) !important;
		--am-c-advs-item-border-op10: color-mix(in srgb, var(--wp--preset--color--border-subtle) 10%, transparent) !important;
		--am-c-advs-item-heading-op65: color-mix(in srgb, var(--wp--preset--color--ink) 65%, transparent) !important;
		--am-c-advs-item-label: var(--wp--preset--color--ink) !important;
		--am-c-advs-item-label-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
		--am-c-advs-item-label-op65: color-mix(in srgb, var(--wp--preset--color--ink) 65%, transparent) !important;
		--am-c-advs-item-price: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-advs-item-price-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-advs-item-selected: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-advs-placeholder: var(--wp--preset--color--ink-muted) !important;
		--am-c-advs-text: var(--wp--preset--color--ink) !important;
		--am-c-advs-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-advs-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
		--am-c-advs-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-advsc-bgr-op10: color-mix(in srgb, var(--wp--preset--color--surface-raised) 10%, transparent) !important;
		--am-c-aec-text: var(--wp--preset--color--ink) !important;
		--am-c-alert-text: var(--wp--preset--color--ink) !important;
		--am-c-alerte-bgr: var(--wp--preset--color--danger) !important;
		--am-c-alerte-bgr-op10: color-mix(in srgb, var(--wp--preset--color--danger) 10%, transparent) !important;
		--am-c-alerte-bgr-op60: color-mix(in srgb, var(--wp--preset--color--danger) 60%, transparent) !important;
		--am-c-alerti-bgr: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-alerti-bgr-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-alerti-bgr-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 60%, transparent) !important;
		--am-c-alerts-bgr: var(--wp--preset--color--sage-deep) !important;
		--am-c-alerts-bgr-op10: color-mix(in srgb, var(--wp--preset--color--sage-deep) 10%, transparent) !important;
		--am-c-alerts-bgr-op60: color-mix(in srgb, var(--wp--preset--color--sage-deep) 60%, transparent) !important;
		--am-c-alertw-bgr: var(--wp--preset--color--sunshine-deep) !important;
		--am-c-alertw-bgr-op10: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 10%, transparent) !important;
		--am-c-alertw-bgr-op60: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 60%, transparent) !important;
		--am-c-atc-bgr-coverage: var(--wp--preset--color--surface-raised) !important;
		--am-c-atc-heading-text: var(--wp--preset--color--ink) !important;
		--am-c-atc-heading-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
		--am-c-atc-sb-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-atc-sb-text-op5: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
		--am-c-atc-text: var(--wp--preset--color--ink) !important;
		--am-c-atc-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-atc-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
		--am-c-atc-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
		--am-c-atc-text-op5: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
		--am-c-atc-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
		--am-c-btn-danger: var(--wp--preset--color--danger) !important;
		--am-c-btn-danger-text: var(--wp--preset--color--on-brand) !important;
		--am-c-btn-first: var(--wp--preset--color--button-primary) !important;
		--am-c-btn-first-op20: color-mix(in srgb, var(--wp--preset--color--button-primary) 20%, transparent) !important;
		--am-c-btn-first-op30: color-mix(in srgb, var(--wp--preset--color--button-primary) 30%, transparent) !important;
		--am-c-btn-first-op80: color-mix(in srgb, var(--wp--preset--color--button-primary) 80%, transparent) !important;
		--am-c-btn-op30: color-mix(in srgb, var(--wp--preset--color--button-primary) 30%, transparent) !important;
		--am-c-btn-prim: var(--wp--preset--color--button-primary) !important;
		--am-c-btn-prim-text: var(--wp--preset--color--on-brand) !important;
		--am-c-btn-sec: var(--wp--preset--color--surface-raised) !important;
		--am-c-btn-sec-text: var(--wp--preset--color--ink) !important;
		--am-c-btn-second: var(--wp--preset--color--on-brand) !important;
		--am-c-caedo-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-caedo-text: var(--wp--preset--color--ink) !important;
		--am-c-caedo-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-caedo-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-caep-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-caep-text: var(--wp--preset--color--ink) !important;
		--am-c-caep-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-caeper-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-caeper-text: var(--wp--preset--color--ink) !important;
		--am-c-caeper-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-caepf-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-caes-border: var(--wp--preset--color--border-subtle) !important;
		--am-c-caes-inp-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
		--am-c-caes-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-caes-primary-op03: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 3%, transparent) !important;
		--am-c-caes-text: var(--wp--preset--color--ink) !important;
		--am-c-caes-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-caes-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
		--am-c-caesd-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-caesd-text: var(--wp--preset--color--ink) !important;
		--am-c-caesd-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-caesd-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-caewh-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-caewh-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
		--am-c-caewh-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-caewh-text: var(--wp--preset--color--ink) !important;
		--am-c-caewh-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-cal-disabled: var(--wp--preset--color--surface-sunken) !important;
		--am-c-cal-disabled-op10: color-mix(in srgb, var(--wp--preset--color--surface-sunken) 10%, transparent) !important;
		--am-c-cal-disabled-op60: color-mix(in srgb, var(--wp--preset--color--surface-sunken) 60%, transparent) !important;
		--am-c-cal-disabled-text: var(--wp--preset--color--ink-muted) !important;
		--am-c-cal-high: var(--wp--preset--color--hype-blue) !important;
		--am-c-cal-high-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue) 10%, transparent) !important;
		--am-c-cal-high-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue) 20%, transparent) !important;
		--am-c-cal-high-op30: color-mix(in srgb, var(--wp--preset--color--hype-blue) 30%, transparent) !important;
		--am-c-cal-high-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue) 60%, transparent) !important;
		--am-c-cal-high-op80: color-mix(in srgb, var(--wp--preset--color--hype-blue) 80%, transparent) !important;
		--am-c-cal-high-text: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-cal-indicator: var(--wp--preset--color--hype-blue) !important;
		--am-c-cal-init: var(--wp--preset--color--hype-blue) !important;
		--am-c-cal-init-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue) 10%, transparent) !important;
		--am-c-cal-init-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue) 20%, transparent) !important;
		--am-c-cal-init-op30: color-mix(in srgb, var(--wp--preset--color--hype-blue) 30%, transparent) !important;
		--am-c-cal-init-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue) 60%, transparent) !important;
		--am-c-cal-init-text: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-cal-low: var(--wp--preset--color--hype-blue) !important;
		--am-c-cal-low-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue) 10%, transparent) !important;
		--am-c-cal-low-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue) 20%, transparent) !important;
		--am-c-cal-low-op30: color-mix(in srgb, var(--wp--preset--color--hype-blue) 30%, transparent) !important;
		--am-c-cal-low-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue) 60%, transparent) !important;
		--am-c-cal-low-op80: color-mix(in srgb, var(--wp--preset--color--hype-blue) 80%, transparent) !important;
		--am-c-cal-low-text: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-cal-selected: var(--wp--preset--color--hype-blue) !important;
		--am-c-cal-selected-op80: color-mix(in srgb, var(--wp--preset--color--hype-blue) 80%, transparent) !important;
		--am-c-cal-selected-text: var(--wp--preset--color--on-brand) !important;
		--am-c-cal-waiting: var(--wp--preset--color--surface-sunken) !important;
		--am-c-cal-waiting-op40: color-mix(in srgb, var(--wp--preset--color--surface-sunken) 40%, transparent) !important;
		--am-c-cal-waiting-text: var(--wp--preset--color--ink) !important;
		--am-c-capa-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-capa-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-capa-text: var(--wp--preset--color--ink) !important;
		--am-c-capa-text-op25: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent) !important;
		--am-c-capa-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-capai-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-capai-text: var(--wp--preset--color--ink) !important;
		--am-c-capai-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-cape-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-cape-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-cape-text: var(--wp--preset--color--ink) !important;
		--am-c-cape-text-op25: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent) !important;
		--am-c-cape-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-capei-att-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-capei-att-text: var(--wp--preset--color--ink) !important;
		--am-c-capei-att-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-capei-att-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
		--am-c-capei-per-inp-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
		--am-c-capei-per-text: var(--wp--preset--color--ink) !important;
		--am-c-capei-per-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-capei-price-inp-bgr-op03: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 3%, transparent) !important;
		--am-c-capei-price-text: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-capei-price-text-op03: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 3%, transparent) !important;
		--am-c-capei-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-capei-recurr-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
		--am-c-capei-recurr-inp-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
		--am-c-capei-recurr-text: var(--wp--preset--color--ink) !important;
		--am-c-capei-recurr-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-capei-sef-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-capei-sef-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-capei-sef-text: var(--wp--preset--color--ink) !important;
		--am-c-capei-sef-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-capei-text: var(--wp--preset--color--ink) !important;
		--am-c-capei-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-capei-waiting-bgr-op05: color-mix(in srgb, var(--wp--preset--color--surface-raised) 5%, transparent) !important;
		--am-c-capei-waiting-inp-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
		--am-c-capei-waiting-text: var(--wp--preset--color--ink) !important;
		--am-c-capei-waiting-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-capf-heading-text: var(--wp--preset--color--ink) !important;
		--am-c-capf-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-capf-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-capf-primary-op70: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 70%, transparent) !important;
		--am-c-capf-text: var(--wp--preset--color--ink) !important;
		--am-c-capf-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-caph-heading-text: var(--wp--preset--color--ink) !important;
		--am-c-caph-text: var(--wp--preset--color--ink) !important;
		--am-c-caph-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-capi-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-capi-text: var(--wp--preset--color--ink) !important;
		--am-c-capi-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-cappa-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-cappa-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-cappa-text: var(--wp--preset--color--ink) !important;
		--am-c-cappa-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-cappa-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-cappa-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-cappf-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-cappf-text: var(--wp--preset--color--ink) !important;
		--am-c-cappf-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-card-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-card-border: var(--wp--preset--color--border-subtle) !important;
		--am-c-card-text: var(--wp--preset--color--ink) !important;
		--am-c-cart-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-cart-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-cart-text: var(--wp--preset--color--ink) !important;
		--am-c-cc-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-cc-error: var(--wp--preset--color--danger) !important;
		--am-c-cc-error-op15: color-mix(in srgb, var(--wp--preset--color--danger) 15%, transparent) !important;
		--am-c-cc-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-cc-primary-op15: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 15%, transparent) !important;
		--am-c-cc-primary-op70: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 70%, transparent) !important;
		--am-c-cc-success: var(--wp--preset--color--sage-deep) !important;
		--am-c-cc-success-op15: color-mix(in srgb, var(--wp--preset--color--sage-deep) 15%, transparent) !important;
		--am-c-cc-text: var(--wp--preset--color--ink) !important;
		--am-c-cc-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-cc-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-cc-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-cc-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-cc-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-cc-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
		--am-c-cc-warning: var(--wp--preset--color--sunshine-deep) !important;
		--am-c-cc-warning-op15: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 15%, transparent) !important;
		--am-c-ces-text: var(--wp--preset--color--ink) !important;
		--am-c-ces-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-checkbox-btn-dsb-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue) 60%, transparent) !important;
		--am-c-checkbox-btn-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue) 60%, transparent) !important;
		--am-c-checkbox-btn-op80: color-mix(in srgb, var(--wp--preset--color--hype-blue) 80%, transparent) !important;
		--am-c-checkbox-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-ci-error: var(--wp--preset--color--danger) !important;
		--am-c-ci-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-ci-success: var(--wp--preset--color--sage-deep) !important;
		--am-c-ci-text: var(--wp--preset--color--ink) !important;
		--am-c-ci-text-op05: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
		--am-c-ci-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
		--am-c-ci-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-ci-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-collapse-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-collapse-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-congrats-heading-text: var(--wp--preset--color--ink) !important;
		--am-c-congrats-heading-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
		--am-c-congrats-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-congrats-text: var(--wp--preset--color--ink) !important;
		--am-c-congrats-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
		--am-c-congrats-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
		--am-c-coupon-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-coupon-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-coupon-primary-op40: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 40%, transparent) !important;
		--am-c-csd-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-csd-text: var(--wp--preset--color--ink) !important;
		--am-c-csd-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-csm-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-csm-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-csm-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-csm-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-ct-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-ct-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-ct-text: var(--wp--preset--color--ink) !important;
		--am-c-ct-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-ct-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-ct-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-ct-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-ct-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
		--am-c-cust-link: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-cust-text: var(--wp--preset--color--ink) !important;
		--am-c-desce-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-desce-warn-op10: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 10%, transparent) !important;
		--am-c-dpf-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-dpf-border: var(--wp--preset--color--border-control) !important;
		--am-c-dpf-text: var(--wp--preset--color--ink) !important;
		--am-c-dpf-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-dpf-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-dpf-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-drop-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-drop-border: var(--wp--preset--color--border-subtle) !important;
		--am-c-drop-text: var(--wp--preset--color--ink) !important;
		--am-c-drop-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-drop-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-drop-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
		--am-c-drop-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
		--am-c-drop-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-drop-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-ec-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-ec-error-op70: color-mix(in srgb, var(--wp--preset--color--danger) 70%, transparent) !important;
		--am-c-ec-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-ec-success: var(--wp--preset--color--sage-deep) !important;
		--am-c-ec-text: var(--wp--preset--color--ink) !important;
		--am-c-ec-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
		--am-c-ec-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-ec-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
		--am-c-ec-warning: var(--wp--preset--color--sunshine-deep) !important;
		--am-c-ecal-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-ecal-card-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-ecal-card-border: var(--wp--preset--color--border-subtle) !important;
		--am-c-ecal-card-border-op10: color-mix(in srgb, var(--wp--preset--color--border-subtle) 10%, transparent) !important;
		--am-c-ecal-card-text: var(--wp--preset--color--ink) !important;
		--am-c-ecal-card-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
		--am-c-ecal-card-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-ecal-error: var(--wp--preset--color--danger) !important;
		--am-c-ecal-heading-text: var(--wp--preset--color--ink) !important;
		--am-c-ecal-heading-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-ecal-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-ecal-primary-op30: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 30%, transparent) !important;
		--am-c-ecal-success: var(--wp--preset--color--sage-deep) !important;
		--am-c-ecal-text: var(--wp--preset--color--ink) !important;
		--am-c-ecal-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-ecal-text-op05: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
		--am-c-ecal-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-ecal-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-ecal-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
		--am-c-ecal-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
		--am-c-ecal-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-ecal-warning: var(--wp--preset--color--sunshine-deep) !important;
		--am-c-el-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-eli-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-eli-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-eli-text: var(--wp--preset--color--ink) !important;
		--am-c-eli-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-eli-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-eli-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-eli-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-eli-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
		--am-c-els-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-els-head-text: var(--wp--preset--color--ink) !important;
		--am-c-els-text: var(--wp--preset--color--ink) !important;
		--am-c-els-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-els-text-op25: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent) !important;
		--am-c-els-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-elt-text: var(--wp--preset--color--ink) !important;
		--am-c-elt-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-elt-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
		--am-c-error: var(--wp--preset--color--danger) !important;
		--am-c-ev-empty-text: var(--wp--preset--color--ink) !important;
		--am-c-ev-empty-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-evt: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-evt-op05: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 5%, transparent) !important;
		--am-c-ext-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-extras-price: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-extras-price-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-extras-text: var(--wp--preset--color--ink) !important;
		--am-c-extras-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-fcil-card-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-fcil-card-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-fcil-employee-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-fcil-employee-heading: var(--wp--preset--color--ink) !important;
		--am-c-fcil-employee-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-fcil-employee-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-fcil-employee-text: var(--wp--preset--color--ink) !important;
		--am-c-fcil-employee-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-fcil-employee-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-fcil-filter-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-fcil-main-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-fcil-primary-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 20%, transparent) !important;
		--am-c-fcil-success-op20: color-mix(in srgb, var(--wp--preset--color--sage-deep) 20%, transparent) !important;
		--am-c-fcil-text-op-10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-fcip-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-fcip-btn-op50: color-mix(in srgb, var(--wp--preset--color--button-primary) 50%, transparent) !important;
		--am-c-fcip-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-fcip-primary-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 20%, transparent) !important;
		--am-c-fcip-success: var(--wp--preset--color--sage-deep) !important;
		--am-c-fcip-success-op20: color-mix(in srgb, var(--wp--preset--color--sage-deep) 20%, transparent) !important;
		--am-c-fcip-text: var(--wp--preset--color--ink) !important;
		--am-c-fcip-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-fcip-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-fcip-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-fcip-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-fcis-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-fcis-btn-op50: color-mix(in srgb, var(--wp--preset--color--button-primary) 50%, transparent) !important;
		--am-c-fcis-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-fcis-primary-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 20%, transparent) !important;
		--am-c-fcis-success: var(--wp--preset--color--sage-deep) !important;
		--am-c-fcis-success-op20: color-mix(in srgb, var(--wp--preset--color--sage-deep) 20%, transparent) !important;
		--am-c-fcis-text: var(--wp--preset--color--ink) !important;
		--am-c-fcis-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-fcis-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-fcis-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-fcl-card-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-ff-file-icon-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-gc-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-gc-bgr-op70: color-mix(in srgb, var(--wp--preset--color--surface-raised) 70%, transparent) !important;
		--am-c-gc-text: var(--wp--preset--color--ink) !important;
		--am-c-gc-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-gc-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-inp-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-inp-border: var(--wp--preset--color--border-control) !important;
		--am-c-inp-number-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-inp-number-border: var(--wp--preset--color--border-control) !important;
		--am-c-inp-number-placeholder: var(--wp--preset--color--ink-muted) !important;
		--am-c-inp-number-text: var(--wp--preset--color--ink) !important;
		--am-c-inp-number-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-inp-number-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-inp-number-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
		--am-c-inp-number-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-inp-placeholder: var(--wp--preset--color--ink-muted) !important;
		--am-c-inp-text: var(--wp--preset--color--ink) !important;
		--am-c-inp-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-inp-text-op05: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
		--am-c-inp-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
		--am-c-inp-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-is-wa-text: var(--wp--preset--color--ink) !important;
		--am-c-linked-bgr-op05: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 5%, transparent) !important;
		--am-c-main-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-main-heading-text: var(--wp--preset--color--ink) !important;
		--am-c-main-heading-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-main-text: var(--wp--preset--color--ink) !important;
		--am-c-main-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-main-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-main-text-op25: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent) !important;
		--am-c-main-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
		--am-c-main-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-main-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-main-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-msd-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-msd-text: var(--wp--preset--color--ink) !important;
		--am-c-msd-text-op05: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
		--am-c-msd-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-msd-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-option-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-option-border: var(--wp--preset--color--border-subtle) !important;
		--am-c-option-hover: var(--wp--preset--color--surface-sunken) !important;
		--am-c-option-img-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-option-img-text: var(--wp--preset--color--ink) !important;
		--am-c-option-selected: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-option-selected-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-option-text: var(--wp--preset--color--ink) !important;
		--am-c-option-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-option-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
		--am-c-option-text-op65: color-mix(in srgb, var(--wp--preset--color--ink) 65%, transparent) !important;
		--am-c-pagination-active: var(--wp--preset--color--hype-blue) !important;
		--am-c-pagination-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-pagination-border: var(--wp--preset--color--border-control) !important;
		--am-c-pagination-text: var(--wp--preset--color--ink) !important;
		--am-c-pagination-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-pas-error-bgr-op10: color-mix(in srgb, var(--wp--preset--color--danger) 10%, transparent) !important;
		--am-c-pay-border: var(--wp--preset--color--border-subtle) !important;
		--am-c-pay-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-pay-success: var(--wp--preset--color--sage-deep) !important;
		--am-c-pay-text: var(--wp--preset--color--ink) !important;
		--am-c-pay-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-pay-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-pay-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
		--am-c-pay-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-pay-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
		--am-c-ph-drop-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-phone-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-phone-border: var(--wp--preset--color--border-control) !important;
		--am-c-phone-hover: var(--wp--preset--color--surface-sunken) !important;
		--am-c-phone-input: var(--wp--preset--color--ink) !important;
		--am-c-phone-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-phone-primary-op01: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 1%, transparent) !important;
		--am-c-phone-text: var(--wp--preset--color--ink) !important;
		--am-c-phone-text-op-60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-pi-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-pi-success-op10: color-mix(in srgb, var(--wp--preset--color--sage-deep) 10%, transparent) !important;
		--am-c-pi-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-pi-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-pis-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-primary-op05: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 5%, transparent) !important;
		--am-c-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-primary-op80: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 80%, transparent) !important;
		--am-c-ps-border: var(--wp--preset--color--border-subtle) !important;
		--am-c-ps-price-bgr: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-ps-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-ps-primary-op06: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 6%, transparent) !important;
		--am-c-ps-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-ps-text: var(--wp--preset--color--ink) !important;
		--am-c-ps-text-op06: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent) !important;
		--am-c-ps-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-ps-text-op25: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent) !important;
		--am-c-ps-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
		--am-c-ps-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-ps-total-price: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-pso-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
		--am-c-pso-success-op10: color-mix(in srgb, var(--wp--preset--color--sage-deep) 10%, transparent) !important;
		--am-c-pso-success-op60: color-mix(in srgb, var(--wp--preset--color--sage-deep) 60%, transparent) !important;
		--am-c-pso-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
		--am-c-pso-warning-op10: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 10%, transparent) !important;
		--am-c-pso-warning-op60: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 60%, transparent) !important;
		--am-c-radio-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-radio-bgr-op80: color-mix(in srgb, var(--wp--preset--color--surface-raised) 80%, transparent) !important;
		--am-c-radio-border: var(--wp--preset--color--border-control) !important;
		--am-c-radio-border-op30: color-mix(in srgb, var(--wp--preset--color--border-control) 30%, transparent) !important;
		--am-c-radio-border-op60: color-mix(in srgb, var(--wp--preset--color--border-control) 60%, transparent) !important;
		--am-c-radio-hover-bgr: var(--wp--preset--color--surface-sunken) !important;
		--am-c-radio-label: var(--wp--preset--color--ink) !important;
		--am-c-recurr-bgr-op05: color-mix(in srgb, var(--wp--preset--color--surface-raised) 5%, transparent) !important;
		--am-c-ro-warning-op10: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 10%, transparent) !important;
		--am-c-ro-warning-op60: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 60%, transparent) !important;
		--am-c-rs-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-rs-inp-border: var(--wp--preset--color--border-control) !important;
		--am-c-rs-primary: var(--wp--preset--color--hype-blue-deep) !important;
		--am-c-rs-text: var(--wp--preset--color--ink) !important;
		--am-c-rs-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-rsm-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-rsm-border: var(--wp--preset--color--border-subtle) !important;
		--am-c-rsm-error-text: var(--wp--preset--color--danger) !important;
		--am-c-rsm-error-text-op10: color-mix(in srgb, var(--wp--preset--color--danger) 10%, transparent) !important;
		--am-c-rsm-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-sb-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-sb-text: var(--wp--preset--color--ink) !important;
		--am-c-sb-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-sb-text-op5: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
		--am-c-sb-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-sc-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-sc-bgr-op15: color-mix(in srgb, var(--wp--preset--color--surface-raised) 15%, transparent) !important;
		--am-c-sc-text: var(--wp--preset--color--ink) !important;
		--am-c-sc-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-sc-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
		--am-c-sc-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-sc-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
		--am-c-sc-warning-op50: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 50%, transparent) !important;
		--am-c-scroll-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-scroll-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
		--am-c-select-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-select-border: var(--wp--preset--color--border-control) !important;
		--am-c-select-placeholder: var(--wp--preset--color--ink-muted) !important;
		--am-c-select-text: var(--wp--preset--color--ink) !important;
		--am-c-select-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
		--am-c-select-text-op06: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent) !important;
		--am-c-select-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
		--am-c-select-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
		--am-c-select-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-skeleton-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-skeleton-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-skeleton-sb-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
		--am-c-skeleton-sb-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-spb-bgr: var(--wp--preset--color--surface-raised) !important;
		--am-c-spb-text: var(--wp--preset--color--ink) !important;
		--am-c-spb-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-success: var(--wp--preset--color--sage-deep) !important;
		--am-c-success-op10: color-mix(in srgb, var(--wp--preset--color--sage-deep) 10%, transparent) !important;
		--am-c-success-op20: color-mix(in srgb, var(--wp--preset--color--sage-deep) 20%, transparent) !important;
		--am-c-switch-action: var(--wp--preset--color--surface-raised) !important;
		--am-c-switch-bgr-active: var(--wp--preset--color--hype-blue) !important;
		--am-c-switch-bgr-inactive: var(--wp--preset--color--border-control) !important;
		--am-c-switch-text: var(--wp--preset--color--ink) !important;
		--am-c-timeselect-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
		--am-c-timeselect-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
		--am-c-timeselect-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
		--am-c-warning: var(--wp--preset--color--sunshine-deep) !important;
		--am-c-warning-op10: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 10%, transparent) !important;
	}
}

html[data-theme="dark"] :is(.amelia-v2-booking, [style*="--am-"]) {
	--am-c-advs-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-advs-border: var(--wp--preset--color--border-subtle) !important;
	--am-c-advs-item-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-advs-item-bgr-op10: color-mix(in srgb, var(--wp--preset--color--surface-raised) 10%, transparent) !important;
	--am-c-advs-item-border: var(--wp--preset--color--border-subtle) !important;
	--am-c-advs-item-border-op10: color-mix(in srgb, var(--wp--preset--color--border-subtle) 10%, transparent) !important;
	--am-c-advs-item-heading-op65: color-mix(in srgb, var(--wp--preset--color--ink) 65%, transparent) !important;
	--am-c-advs-item-label: var(--wp--preset--color--ink) !important;
	--am-c-advs-item-label-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
	--am-c-advs-item-label-op65: color-mix(in srgb, var(--wp--preset--color--ink) 65%, transparent) !important;
	--am-c-advs-item-price: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-advs-item-price-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-advs-item-selected: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-advs-placeholder: var(--wp--preset--color--ink-muted) !important;
	--am-c-advs-text: var(--wp--preset--color--ink) !important;
	--am-c-advs-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-advs-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
	--am-c-advs-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-advsc-bgr-op10: color-mix(in srgb, var(--wp--preset--color--surface-raised) 10%, transparent) !important;
	--am-c-aec-text: var(--wp--preset--color--ink) !important;
	--am-c-alert-text: var(--wp--preset--color--ink) !important;
	--am-c-alerte-bgr: var(--wp--preset--color--danger) !important;
	--am-c-alerte-bgr-op10: color-mix(in srgb, var(--wp--preset--color--danger) 10%, transparent) !important;
	--am-c-alerte-bgr-op60: color-mix(in srgb, var(--wp--preset--color--danger) 60%, transparent) !important;
	--am-c-alerti-bgr: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-alerti-bgr-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-alerti-bgr-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 60%, transparent) !important;
	--am-c-alerts-bgr: var(--wp--preset--color--sage-deep) !important;
	--am-c-alerts-bgr-op10: color-mix(in srgb, var(--wp--preset--color--sage-deep) 10%, transparent) !important;
	--am-c-alerts-bgr-op60: color-mix(in srgb, var(--wp--preset--color--sage-deep) 60%, transparent) !important;
	--am-c-alertw-bgr: var(--wp--preset--color--sunshine-deep) !important;
	--am-c-alertw-bgr-op10: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 10%, transparent) !important;
	--am-c-alertw-bgr-op60: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 60%, transparent) !important;
	--am-c-atc-bgr-coverage: var(--wp--preset--color--surface-raised) !important;
	--am-c-atc-heading-text: var(--wp--preset--color--ink) !important;
	--am-c-atc-heading-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
	--am-c-atc-sb-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-atc-sb-text-op5: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
	--am-c-atc-text: var(--wp--preset--color--ink) !important;
	--am-c-atc-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-atc-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
	--am-c-atc-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
	--am-c-atc-text-op5: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
	--am-c-atc-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
	--am-c-btn-danger: var(--wp--preset--color--danger) !important;
	--am-c-btn-danger-text: var(--wp--preset--color--on-brand) !important;
	--am-c-btn-first: var(--wp--preset--color--button-primary) !important;
	--am-c-btn-first-op20: color-mix(in srgb, var(--wp--preset--color--button-primary) 20%, transparent) !important;
	--am-c-btn-first-op30: color-mix(in srgb, var(--wp--preset--color--button-primary) 30%, transparent) !important;
	--am-c-btn-first-op80: color-mix(in srgb, var(--wp--preset--color--button-primary) 80%, transparent) !important;
	--am-c-btn-op30: color-mix(in srgb, var(--wp--preset--color--button-primary) 30%, transparent) !important;
	--am-c-btn-prim: var(--wp--preset--color--button-primary) !important;
	--am-c-btn-prim-text: var(--wp--preset--color--on-brand) !important;
	--am-c-btn-sec: var(--wp--preset--color--surface-raised) !important;
	--am-c-btn-sec-text: var(--wp--preset--color--ink) !important;
	--am-c-btn-second: var(--wp--preset--color--on-brand) !important;
	--am-c-caedo-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-caedo-text: var(--wp--preset--color--ink) !important;
	--am-c-caedo-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-caedo-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-caep-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-caep-text: var(--wp--preset--color--ink) !important;
	--am-c-caep-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-caeper-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-caeper-text: var(--wp--preset--color--ink) !important;
	--am-c-caeper-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-caepf-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-caes-border: var(--wp--preset--color--border-subtle) !important;
	--am-c-caes-inp-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
	--am-c-caes-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-caes-primary-op03: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 3%, transparent) !important;
	--am-c-caes-text: var(--wp--preset--color--ink) !important;
	--am-c-caes-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-caes-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
	--am-c-caesd-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-caesd-text: var(--wp--preset--color--ink) !important;
	--am-c-caesd-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-caesd-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-caewh-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-caewh-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
	--am-c-caewh-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-caewh-text: var(--wp--preset--color--ink) !important;
	--am-c-caewh-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-cal-disabled: var(--wp--preset--color--surface-sunken) !important;
	--am-c-cal-disabled-op10: color-mix(in srgb, var(--wp--preset--color--surface-sunken) 10%, transparent) !important;
	--am-c-cal-disabled-op60: color-mix(in srgb, var(--wp--preset--color--surface-sunken) 60%, transparent) !important;
	--am-c-cal-disabled-text: var(--wp--preset--color--ink-muted) !important;
	--am-c-cal-high: var(--wp--preset--color--hype-blue) !important;
	--am-c-cal-high-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue) 10%, transparent) !important;
	--am-c-cal-high-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue) 20%, transparent) !important;
	--am-c-cal-high-op30: color-mix(in srgb, var(--wp--preset--color--hype-blue) 30%, transparent) !important;
	--am-c-cal-high-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue) 60%, transparent) !important;
	--am-c-cal-high-op80: color-mix(in srgb, var(--wp--preset--color--hype-blue) 80%, transparent) !important;
	--am-c-cal-high-text: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-cal-indicator: var(--wp--preset--color--hype-blue) !important;
	--am-c-cal-init: var(--wp--preset--color--hype-blue) !important;
	--am-c-cal-init-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue) 10%, transparent) !important;
	--am-c-cal-init-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue) 20%, transparent) !important;
	--am-c-cal-init-op30: color-mix(in srgb, var(--wp--preset--color--hype-blue) 30%, transparent) !important;
	--am-c-cal-init-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue) 60%, transparent) !important;
	--am-c-cal-init-text: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-cal-low: var(--wp--preset--color--hype-blue) !important;
	--am-c-cal-low-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue) 10%, transparent) !important;
	--am-c-cal-low-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue) 20%, transparent) !important;
	--am-c-cal-low-op30: color-mix(in srgb, var(--wp--preset--color--hype-blue) 30%, transparent) !important;
	--am-c-cal-low-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue) 60%, transparent) !important;
	--am-c-cal-low-op80: color-mix(in srgb, var(--wp--preset--color--hype-blue) 80%, transparent) !important;
	--am-c-cal-low-text: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-cal-selected: var(--wp--preset--color--hype-blue) !important;
	--am-c-cal-selected-op80: color-mix(in srgb, var(--wp--preset--color--hype-blue) 80%, transparent) !important;
	--am-c-cal-selected-text: var(--wp--preset--color--on-brand) !important;
	--am-c-cal-waiting: var(--wp--preset--color--surface-sunken) !important;
	--am-c-cal-waiting-op40: color-mix(in srgb, var(--wp--preset--color--surface-sunken) 40%, transparent) !important;
	--am-c-cal-waiting-text: var(--wp--preset--color--ink) !important;
	--am-c-capa-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-capa-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-capa-text: var(--wp--preset--color--ink) !important;
	--am-c-capa-text-op25: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent) !important;
	--am-c-capa-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-capai-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-capai-text: var(--wp--preset--color--ink) !important;
	--am-c-capai-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-cape-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-cape-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-cape-text: var(--wp--preset--color--ink) !important;
	--am-c-cape-text-op25: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent) !important;
	--am-c-cape-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-capei-att-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-capei-att-text: var(--wp--preset--color--ink) !important;
	--am-c-capei-att-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-capei-att-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
	--am-c-capei-per-inp-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
	--am-c-capei-per-text: var(--wp--preset--color--ink) !important;
	--am-c-capei-per-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-capei-price-inp-bgr-op03: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 3%, transparent) !important;
	--am-c-capei-price-text: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-capei-price-text-op03: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 3%, transparent) !important;
	--am-c-capei-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-capei-recurr-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
	--am-c-capei-recurr-inp-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
	--am-c-capei-recurr-text: var(--wp--preset--color--ink) !important;
	--am-c-capei-recurr-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-capei-sef-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-capei-sef-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-capei-sef-text: var(--wp--preset--color--ink) !important;
	--am-c-capei-sef-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-capei-text: var(--wp--preset--color--ink) !important;
	--am-c-capei-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-capei-waiting-bgr-op05: color-mix(in srgb, var(--wp--preset--color--surface-raised) 5%, transparent) !important;
	--am-c-capei-waiting-inp-bgr-op03: color-mix(in srgb, var(--wp--preset--color--surface-raised) 3%, transparent) !important;
	--am-c-capei-waiting-text: var(--wp--preset--color--ink) !important;
	--am-c-capei-waiting-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-capf-heading-text: var(--wp--preset--color--ink) !important;
	--am-c-capf-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-capf-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-capf-primary-op70: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 70%, transparent) !important;
	--am-c-capf-text: var(--wp--preset--color--ink) !important;
	--am-c-capf-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-caph-heading-text: var(--wp--preset--color--ink) !important;
	--am-c-caph-text: var(--wp--preset--color--ink) !important;
	--am-c-caph-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-capi-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-capi-text: var(--wp--preset--color--ink) !important;
	--am-c-capi-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-cappa-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-cappa-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-cappa-text: var(--wp--preset--color--ink) !important;
	--am-c-cappa-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-cappa-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-cappa-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-cappf-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-cappf-text: var(--wp--preset--color--ink) !important;
	--am-c-cappf-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-card-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-card-border: var(--wp--preset--color--border-subtle) !important;
	--am-c-card-text: var(--wp--preset--color--ink) !important;
	--am-c-cart-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-cart-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-cart-text: var(--wp--preset--color--ink) !important;
	--am-c-cc-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-cc-error: var(--wp--preset--color--danger) !important;
	--am-c-cc-error-op15: color-mix(in srgb, var(--wp--preset--color--danger) 15%, transparent) !important;
	--am-c-cc-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-cc-primary-op15: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 15%, transparent) !important;
	--am-c-cc-primary-op70: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 70%, transparent) !important;
	--am-c-cc-success: var(--wp--preset--color--sage-deep) !important;
	--am-c-cc-success-op15: color-mix(in srgb, var(--wp--preset--color--sage-deep) 15%, transparent) !important;
	--am-c-cc-text: var(--wp--preset--color--ink) !important;
	--am-c-cc-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-cc-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-cc-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-cc-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-cc-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-cc-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
	--am-c-cc-warning: var(--wp--preset--color--sunshine-deep) !important;
	--am-c-cc-warning-op15: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 15%, transparent) !important;
	--am-c-ces-text: var(--wp--preset--color--ink) !important;
	--am-c-ces-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-checkbox-btn-dsb-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue) 60%, transparent) !important;
	--am-c-checkbox-btn-op60: color-mix(in srgb, var(--wp--preset--color--hype-blue) 60%, transparent) !important;
	--am-c-checkbox-btn-op80: color-mix(in srgb, var(--wp--preset--color--hype-blue) 80%, transparent) !important;
	--am-c-checkbox-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-ci-error: var(--wp--preset--color--danger) !important;
	--am-c-ci-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-ci-success: var(--wp--preset--color--sage-deep) !important;
	--am-c-ci-text: var(--wp--preset--color--ink) !important;
	--am-c-ci-text-op05: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
	--am-c-ci-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
	--am-c-ci-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-ci-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-collapse-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-collapse-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-congrats-heading-text: var(--wp--preset--color--ink) !important;
	--am-c-congrats-heading-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
	--am-c-congrats-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-congrats-text: var(--wp--preset--color--ink) !important;
	--am-c-congrats-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
	--am-c-congrats-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
	--am-c-coupon-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-coupon-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-coupon-primary-op40: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 40%, transparent) !important;
	--am-c-csd-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-csd-text: var(--wp--preset--color--ink) !important;
	--am-c-csd-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-csm-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-csm-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-csm-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-csm-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-ct-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-ct-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-ct-text: var(--wp--preset--color--ink) !important;
	--am-c-ct-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-ct-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-ct-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-ct-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-ct-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
	--am-c-cust-link: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-cust-text: var(--wp--preset--color--ink) !important;
	--am-c-desce-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-desce-warn-op10: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 10%, transparent) !important;
	--am-c-dpf-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-dpf-border: var(--wp--preset--color--border-control) !important;
	--am-c-dpf-text: var(--wp--preset--color--ink) !important;
	--am-c-dpf-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-dpf-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-dpf-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-drop-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-drop-border: var(--wp--preset--color--border-subtle) !important;
	--am-c-drop-text: var(--wp--preset--color--ink) !important;
	--am-c-drop-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-drop-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-drop-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
	--am-c-drop-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
	--am-c-drop-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-drop-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-ec-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-ec-error-op70: color-mix(in srgb, var(--wp--preset--color--danger) 70%, transparent) !important;
	--am-c-ec-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-ec-success: var(--wp--preset--color--sage-deep) !important;
	--am-c-ec-text: var(--wp--preset--color--ink) !important;
	--am-c-ec-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
	--am-c-ec-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-ec-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
	--am-c-ec-warning: var(--wp--preset--color--sunshine-deep) !important;
	--am-c-ecal-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-ecal-card-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-ecal-card-border: var(--wp--preset--color--border-subtle) !important;
	--am-c-ecal-card-border-op10: color-mix(in srgb, var(--wp--preset--color--border-subtle) 10%, transparent) !important;
	--am-c-ecal-card-text: var(--wp--preset--color--ink) !important;
	--am-c-ecal-card-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
	--am-c-ecal-card-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-ecal-error: var(--wp--preset--color--danger) !important;
	--am-c-ecal-heading-text: var(--wp--preset--color--ink) !important;
	--am-c-ecal-heading-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-ecal-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-ecal-primary-op30: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 30%, transparent) !important;
	--am-c-ecal-success: var(--wp--preset--color--sage-deep) !important;
	--am-c-ecal-text: var(--wp--preset--color--ink) !important;
	--am-c-ecal-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-ecal-text-op05: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
	--am-c-ecal-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-ecal-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-ecal-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
	--am-c-ecal-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
	--am-c-ecal-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-ecal-warning: var(--wp--preset--color--sunshine-deep) !important;
	--am-c-el-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-eli-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-eli-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-eli-text: var(--wp--preset--color--ink) !important;
	--am-c-eli-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-eli-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-eli-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-eli-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-eli-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
	--am-c-els-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-els-head-text: var(--wp--preset--color--ink) !important;
	--am-c-els-text: var(--wp--preset--color--ink) !important;
	--am-c-els-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-els-text-op25: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent) !important;
	--am-c-els-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-elt-text: var(--wp--preset--color--ink) !important;
	--am-c-elt-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-elt-text-op90: color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) !important;
	--am-c-error: var(--wp--preset--color--danger) !important;
	--am-c-ev-empty-text: var(--wp--preset--color--ink) !important;
	--am-c-ev-empty-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-evt: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-evt-op05: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 5%, transparent) !important;
	--am-c-ext-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-extras-price: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-extras-price-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-extras-text: var(--wp--preset--color--ink) !important;
	--am-c-extras-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-fcil-card-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-fcil-card-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-fcil-employee-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-fcil-employee-heading: var(--wp--preset--color--ink) !important;
	--am-c-fcil-employee-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-fcil-employee-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-fcil-employee-text: var(--wp--preset--color--ink) !important;
	--am-c-fcil-employee-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-fcil-employee-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-fcil-filter-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-fcil-main-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-fcil-primary-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 20%, transparent) !important;
	--am-c-fcil-success-op20: color-mix(in srgb, var(--wp--preset--color--sage-deep) 20%, transparent) !important;
	--am-c-fcil-text-op-10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-fcip-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-fcip-btn-op50: color-mix(in srgb, var(--wp--preset--color--button-primary) 50%, transparent) !important;
	--am-c-fcip-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-fcip-primary-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 20%, transparent) !important;
	--am-c-fcip-success: var(--wp--preset--color--sage-deep) !important;
	--am-c-fcip-success-op20: color-mix(in srgb, var(--wp--preset--color--sage-deep) 20%, transparent) !important;
	--am-c-fcip-text: var(--wp--preset--color--ink) !important;
	--am-c-fcip-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-fcip-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-fcip-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-fcip-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-fcis-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-fcis-btn-op50: color-mix(in srgb, var(--wp--preset--color--button-primary) 50%, transparent) !important;
	--am-c-fcis-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-fcis-primary-op20: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 20%, transparent) !important;
	--am-c-fcis-success: var(--wp--preset--color--sage-deep) !important;
	--am-c-fcis-success-op20: color-mix(in srgb, var(--wp--preset--color--sage-deep) 20%, transparent) !important;
	--am-c-fcis-text: var(--wp--preset--color--ink) !important;
	--am-c-fcis-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-fcis-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-fcis-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-fcl-card-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-ff-file-icon-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-gc-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-gc-bgr-op70: color-mix(in srgb, var(--wp--preset--color--surface-raised) 70%, transparent) !important;
	--am-c-gc-text: var(--wp--preset--color--ink) !important;
	--am-c-gc-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-gc-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-inp-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-inp-border: var(--wp--preset--color--border-control) !important;
	--am-c-inp-number-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-inp-number-border: var(--wp--preset--color--border-control) !important;
	--am-c-inp-number-placeholder: var(--wp--preset--color--ink-muted) !important;
	--am-c-inp-number-text: var(--wp--preset--color--ink) !important;
	--am-c-inp-number-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-inp-number-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-inp-number-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
	--am-c-inp-number-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-inp-placeholder: var(--wp--preset--color--ink-muted) !important;
	--am-c-inp-text: var(--wp--preset--color--ink) !important;
	--am-c-inp-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-inp-text-op05: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
	--am-c-inp-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
	--am-c-inp-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-is-wa-text: var(--wp--preset--color--ink) !important;
	--am-c-linked-bgr-op05: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 5%, transparent) !important;
	--am-c-main-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-main-heading-text: var(--wp--preset--color--ink) !important;
	--am-c-main-heading-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-main-text: var(--wp--preset--color--ink) !important;
	--am-c-main-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-main-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-main-text-op25: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent) !important;
	--am-c-main-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
	--am-c-main-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-main-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-main-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-msd-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-msd-text: var(--wp--preset--color--ink) !important;
	--am-c-msd-text-op05: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
	--am-c-msd-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-msd-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-option-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-option-border: var(--wp--preset--color--border-subtle) !important;
	--am-c-option-hover: var(--wp--preset--color--surface-sunken) !important;
	--am-c-option-img-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-option-img-text: var(--wp--preset--color--ink) !important;
	--am-c-option-selected: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-option-selected-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-option-text: var(--wp--preset--color--ink) !important;
	--am-c-option-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-option-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
	--am-c-option-text-op65: color-mix(in srgb, var(--wp--preset--color--ink) 65%, transparent) !important;
	--am-c-pagination-active: var(--wp--preset--color--hype-blue) !important;
	--am-c-pagination-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-pagination-border: var(--wp--preset--color--border-control) !important;
	--am-c-pagination-text: var(--wp--preset--color--ink) !important;
	--am-c-pagination-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-pas-error-bgr-op10: color-mix(in srgb, var(--wp--preset--color--danger) 10%, transparent) !important;
	--am-c-pay-border: var(--wp--preset--color--border-subtle) !important;
	--am-c-pay-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-pay-success: var(--wp--preset--color--sage-deep) !important;
	--am-c-pay-text: var(--wp--preset--color--ink) !important;
	--am-c-pay-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-pay-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-pay-text-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
	--am-c-pay-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-pay-text-op70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) !important;
	--am-c-ph-drop-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-phone-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-phone-border: var(--wp--preset--color--border-control) !important;
	--am-c-phone-hover: var(--wp--preset--color--surface-sunken) !important;
	--am-c-phone-input: var(--wp--preset--color--ink) !important;
	--am-c-phone-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-phone-primary-op01: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 1%, transparent) !important;
	--am-c-phone-text: var(--wp--preset--color--ink) !important;
	--am-c-phone-text-op-60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-pi-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-pi-success-op10: color-mix(in srgb, var(--wp--preset--color--sage-deep) 10%, transparent) !important;
	--am-c-pi-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-pi-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-pis-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-primary-op05: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 5%, transparent) !important;
	--am-c-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-primary-op80: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 80%, transparent) !important;
	--am-c-ps-border: var(--wp--preset--color--border-subtle) !important;
	--am-c-ps-price-bgr: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-ps-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-ps-primary-op06: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 6%, transparent) !important;
	--am-c-ps-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-ps-text: var(--wp--preset--color--ink) !important;
	--am-c-ps-text-op06: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent) !important;
	--am-c-ps-text-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-ps-text-op25: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent) !important;
	--am-c-ps-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
	--am-c-ps-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-ps-total-price: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-pso-primary-op10: color-mix(in srgb, var(--wp--preset--color--hype-blue-deep) 10%, transparent) !important;
	--am-c-pso-success-op10: color-mix(in srgb, var(--wp--preset--color--sage-deep) 10%, transparent) !important;
	--am-c-pso-success-op60: color-mix(in srgb, var(--wp--preset--color--sage-deep) 60%, transparent) !important;
	--am-c-pso-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
	--am-c-pso-warning-op10: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 10%, transparent) !important;
	--am-c-pso-warning-op60: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 60%, transparent) !important;
	--am-c-radio-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-radio-bgr-op80: color-mix(in srgb, var(--wp--preset--color--surface-raised) 80%, transparent) !important;
	--am-c-radio-border: var(--wp--preset--color--border-control) !important;
	--am-c-radio-border-op30: color-mix(in srgb, var(--wp--preset--color--border-control) 30%, transparent) !important;
	--am-c-radio-border-op60: color-mix(in srgb, var(--wp--preset--color--border-control) 60%, transparent) !important;
	--am-c-radio-hover-bgr: var(--wp--preset--color--surface-sunken) !important;
	--am-c-radio-label: var(--wp--preset--color--ink) !important;
	--am-c-recurr-bgr-op05: color-mix(in srgb, var(--wp--preset--color--surface-raised) 5%, transparent) !important;
	--am-c-ro-warning-op10: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 10%, transparent) !important;
	--am-c-ro-warning-op60: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 60%, transparent) !important;
	--am-c-rs-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-rs-inp-border: var(--wp--preset--color--border-control) !important;
	--am-c-rs-primary: var(--wp--preset--color--hype-blue-deep) !important;
	--am-c-rs-text: var(--wp--preset--color--ink) !important;
	--am-c-rs-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-rsm-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-rsm-border: var(--wp--preset--color--border-subtle) !important;
	--am-c-rsm-error-text: var(--wp--preset--color--danger) !important;
	--am-c-rsm-error-text-op10: color-mix(in srgb, var(--wp--preset--color--danger) 10%, transparent) !important;
	--am-c-rsm-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-sb-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-sb-text: var(--wp--preset--color--ink) !important;
	--am-c-sb-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-sb-text-op5: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) !important;
	--am-c-sb-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-sc-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-sc-bgr-op15: color-mix(in srgb, var(--wp--preset--color--surface-raised) 15%, transparent) !important;
	--am-c-sc-text: var(--wp--preset--color--ink) !important;
	--am-c-sc-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-sc-text-op15: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) !important;
	--am-c-sc-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-sc-text-op80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) !important;
	--am-c-sc-warning-op50: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 50%, transparent) !important;
	--am-c-scroll-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-scroll-op30: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) !important;
	--am-c-select-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-select-border: var(--wp--preset--color--border-control) !important;
	--am-c-select-placeholder: var(--wp--preset--color--ink-muted) !important;
	--am-c-select-text: var(--wp--preset--color--ink) !important;
	--am-c-select-text-op03: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent) !important;
	--am-c-select-text-op06: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent) !important;
	--am-c-select-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
	--am-c-select-text-op50: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent) !important;
	--am-c-select-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-skeleton-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-skeleton-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-skeleton-sb-op20: color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	--am-c-skeleton-sb-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-spb-bgr: var(--wp--preset--color--surface-raised) !important;
	--am-c-spb-text: var(--wp--preset--color--ink) !important;
	--am-c-spb-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-success: var(--wp--preset--color--sage-deep) !important;
	--am-c-success-op10: color-mix(in srgb, var(--wp--preset--color--sage-deep) 10%, transparent) !important;
	--am-c-success-op20: color-mix(in srgb, var(--wp--preset--color--sage-deep) 20%, transparent) !important;
	--am-c-switch-action: var(--wp--preset--color--surface-raised) !important;
	--am-c-switch-bgr-active: var(--wp--preset--color--hype-blue) !important;
	--am-c-switch-bgr-inactive: var(--wp--preset--color--border-control) !important;
	--am-c-switch-text: var(--wp--preset--color--ink) !important;
	--am-c-timeselect-text-op10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) !important;
	--am-c-timeselect-text-op40: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent) !important;
	--am-c-timeselect-text-op60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) !important;
	--am-c-warning: var(--wp--preset--color--sunshine-deep) !important;
	--am-c-warning-op10: color-mix(in srgb, var(--wp--preset--color--sunshine-deep) 10%, transparent) !important;
}

/* Stripe's card fields are drawn inside Stripe's own frame with Amelia's (light) Customize colours:
   navy labels on a see-through background, so on the dark form they vanish. Theme CSS can't reach
   inside the frame, so give the box around it a fixed white panel (surface-raised, light value). */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) :is(.am-stripe-pe, [id^="am-stripe-pe-"], [id^="am-stripe-event-pe-"]) {
		background: #ffffff; padding: var(--wp--preset--spacing--4); border-radius: var(--wp--custom--radius--md);
	}
}
html[data-theme="dark"] :is(.am-stripe-pe, [id^="am-stripe-pe-"], [id^="am-stripe-event-pe-"]) {
	background: #ffffff; padding: var(--wp--preset--spacing--4); border-radius: var(--wp--custom--radius--md);
}

/* ==== assets/css/site-fixes.css ==== */
/* Site fixes moved from the Site Editor's custom CSS (global styles post 33) on 2026-10-16.
   Kept word for word; original backup in backups/global-styles-spectra-one-child-2026-10-16.json. */

/* html,
body {
        overflow-x: hidden;
} */

.amelia-v2-booking #amelia-container .am-fs__ps-discount {
    display: none !important;
}

/* page-id-3577 is maintenance page */
.page-id-3577 {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 600px) {
  .page-id-3577 .wp-block-image img {
    max-width: 200px;
    height: auto;
  }
}

/* Added as a temp fix for tables on kids-timtable page */

.wp-block-table td,
.wp-block-table th {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.wp-block-table td:first-child {
  width: 55%;
}
@media (max-width: 600px) {
  .wp-block-table {
    font-size: 0.9em;
  }
}

/* Form fields: at least 16px text everywhere (Fluent Forms, FluentCart, search; Amelia is set in amelia.css).
   iOS Safari zooms the page in when a field with smaller text is tapped, and doesn't zoom back out
   (Alex, 2026-10-29). Fields already larger keep their size. Pinch-zoom is left alone. */
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), select, textarea) {
	font-size: max(16px, 1em);
}