/*
 * Pilates Core Training — presentation layer.
 *
 * Brand tokens (--pct-*) are injected inline from the Customizer, so every
 * colour below is editable without touching this file. Typography uses a
 * system stack on purpose: no webfont request means no render-blocking round
 * trip, which is the cheapest Core Web Vitals win a small site can take.
 */

/* ------------------------------------------------------------------ Tokens */

:root {
	/* Sampled from the studio's logo: its blue is #274f8f, its ground is pure white. */
	--pct-primary: #26508F;
	--pct-primary-deep: #17335F;
	--pct-accent: #4A7BC4;
	--pct-highlight: #9CC1EE;
	--pct-surface: #FFFFFF;
	--pct-page: #F5F8FC;
	--pct-tint: #E7EEF8;

	--pct-ink: #1B2430;
	--pct-body: #46505F;
	--pct-muted: #66748A;
	--pct-line: rgba(27, 36, 48, .12);
	--pct-white: #fff;
	--pct-card-alt: #D4E5FF;

	/* Hero overlay — driven by the "Hero overlay strength" slider. */
	--pct-overlay-rgb: 23, 51, 95;
	--pct-overlay-1: .9;
	--pct-overlay-2: .738;
	--pct-overlay-3: .36;

	--pct-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
	--pct-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--pct-wrap: 1180px;
	--pct-narrow: 740px;
	--pct-measure: 46rem;
	--pct-gap: clamp(1.25rem, 3vw, 2.5rem);
	--pct-section: clamp(3.5rem, 8vw, 7rem);
	--pct-radius: 4px;
	--pct-shadow: 0 1px 2px rgba(23, 51, 95, .05), 0 12px 32px -16px rgba(23, 51, 95, .18);
	--pct-shadow-lift: 0 2px 4px rgba(23, 51, 95, .06), 0 24px 48px -20px rgba(23, 51, 95, .24);
	--pct-ease: cubic-bezier(.2, .7, .3, 1);
}

/* -------------------------------------------------------------- Foundation */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--pct-page);
	color: var(--pct-body);
	font-family: var(--pct-sans);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
iframe { max-width: 100%; }

img { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pct-serif);
	color: var(--pct-ink);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -.012em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15em; }

a {
	color: var(--pct-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color .18s var(--pct-ease);
}

a:hover { color: var(--pct-accent); }

:focus-visible {
	outline: 2px solid var(--pct-primary);
	outline-offset: 3px;
	border-radius: 2px;
}

blockquote {
	margin: 2rem 0;
	padding: 0 0 0 1.5rem;
	border-left: 2px solid var(--pct-highlight);
	font-family: var(--pct-serif);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--pct-ink);
}

blockquote p:last-child { margin-bottom: 0; }

blockquote cite {
	display: block;
	margin-top: .75rem;
	font-family: var(--pct-sans);
	font-size: .82rem;
	font-style: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pct-muted);
}

hr {
	border: 0;
	border-top: 1px solid var(--pct-line);
	margin: 3rem 0;
}

/* ------------------------------------------------------------- Utilities */

.wrap {
	width: 100%;
	max-width: var(--pct-wrap);
	margin-inline: auto;
	padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.wrap--narrow { max-width: var(--pct-narrow); }

/*
 * A grid-aligned reading column. The wrapper keeps the page's full width and
 * gutters; its children are capped to a comfortable measure and sit flush to
 * the left edge, so body copy lines up with the headings and grids above and
 * below it.
 *
 * This replaces centring the wrapper itself, which put a 740px column in the
 * middle of a 1180px page: 440px of empty gutter (37% of the page) and copy
 * that started 180px right of everything around it.
 */
.wrap--measure > * { max-width: var(--pct-measure); }

/* The answer summary is a full-width statement, by design. */
.wrap--measure > .answer-summary { max-width: none; }

/*
 * A page of reading, not a page of card grids: service pages, blog posts, staff
 * bios, Contact, New Clients, Instructor Training.
 *
 * Body copy is capped at --pct-measure for readability, so on a page with no
 * grid to fill it the 1180px container left ~360px of empty strip down the
 * right. Narrowing the whole content column instead keeps every block on the
 * page — hero, copy, pricing table, contact — aligned to the same edges, and
 * leaves a normal ~110px margin rather than a void.
 *
 * Scoped to .site-main on purpose: the header, promo bar and footer live
 * outside it and keep the site's full width on every page.
 */
body.pct-text-page .site-main { --pct-wrap: 58rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 12px; left: 12px;
	z-index: 999;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	padding: .7rem 1.1rem;
	background: var(--pct-primary);
	color: #fff;
	border-radius: var(--pct-radius);
	text-decoration: none;
}

.section { padding-block: var(--pct-section); }

.section + .section { padding-top: 0; }

/*
 * The hero is not a .section, so without this the first section after it adds a
 * full section's top padding on top of the hero's own bottom padding — up to
 * 200px of dead space between a page title and its first line of copy.
 */
.hero + .section { padding-top: clamp(2rem, 4vw, 3.25rem); }

.section--services,
.section--staff,
.section--faq,
.section--pricing,
.section--booking { background: transparent; }

.section--services { background: linear-gradient(180deg, transparent, rgba(231, 238, 248, .55)); }

.section__head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

.section__title { margin-bottom: .4em; }

.section__lede {
	font-size: 1.1rem;
	color: var(--pct-muted);
	margin-bottom: 0;
}

.section__more { margin-top: 2.5rem; }

.link-arrow {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.link-arrow::after {
	content: " →";
	transition: transform .2s var(--pct-ease);
	display: inline-block;
}

.link-arrow:hover::after { transform: translateX(3px); }

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--pct-radius);
	font-family: var(--pct-sans);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s var(--pct-ease), color .2s var(--pct-ease),
		border-color .2s var(--pct-ease), transform .2s var(--pct-ease), box-shadow .2s var(--pct-ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--pct-primary);
	border-color: var(--pct-primary);
	color: #fff;
	box-shadow: 0 10px 24px -14px var(--pct-primary);
}

.btn--primary:hover {
	background: var(--pct-primary-deep);
	border-color: var(--pct-primary-deep);
	color: #fff;
}

.btn--ghost {
	background: transparent;
	border-color: var(--pct-line);
	color: var(--pct-ink);
}

.btn--ghost:hover {
	border-color: var(--pct-primary);
	color: var(--pct-primary);
	background: rgba(38, 80, 143, .05);
}

.btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--pct-primary-deep);
}

.btn--light:hover { background: var(--pct-tint); color: var(--pct-primary-deep); }

/* On a dark photographic hero the solid blue button loses too much contrast. */
.hero--image .btn--primary {
	background: #fff;
	border-color: #fff;
	color: var(--pct-primary-deep);
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6);
}

.hero--image .btn--primary:hover { background: var(--pct-tint); color: var(--pct-primary-deep); }

.btn--sm { padding: .62rem 1.15rem; font-size: .88rem; }
.btn--xs { padding: .42rem .85rem; font-size: .8rem; }

.cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.75rem 0 0;
}

/* ----------------------------------------------------------------- Topbar */

.topbar {
	background: var(--pct-primary-deep);
	color: rgba(255, 255, 255, .78);
	font-size: .82rem;
}

.topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding-block: .55rem;
}

.topbar p { margin: 0; }

.topbar a {
	color: #fff;
	text-decoration: none;
}

.topbar a:hover { color: var(--pct-highlight); text-decoration: underline; }

.topbar__sep { opacity: .45; margin-inline: .5rem; }

.topbar__meta { letter-spacing: .04em; }

@media (max-width: 640px) {
	.topbar__meta { display: none; }
	.topbar__inner { justify-content: center; }
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* The logo sits on an opaque white ground, so the bar must be the same
	   white or the logo reads as a pasted-on box. No translucency here. */
	background: var(--pct-surface);
	border-bottom: 1px solid var(--pct-line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: .85rem;
}

.site-brand { flex: 0 0 auto; }

.site-brand img,
.custom-logo {
	max-height: 62px;
	width: auto;
}

.site-brand__text {
	display: block;
	text-decoration: none;
	line-height: 1.15;
}

.site-brand__name {
	display: block;
	font-family: var(--pct-serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--pct-ink);
}

.site-brand__tag {
	display: block;
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pct-muted);
}

/* Navigation */

.primary-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-left: auto;
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav__list li { position: relative; }

.primary-nav__list a {
	display: block;
	padding: .55rem .7rem;
	font-size: .93rem;
	font-weight: 500;
	color: var(--pct-ink);
	text-decoration: none;
	border-radius: var(--pct-radius);
	white-space: nowrap;
}

.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current-menu-ancestor > a {
	color: var(--pct-primary);
	background: rgba(38, 80, 143, .07);
}

.primary-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .35em; height: .35em;
	margin-left: .45em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .55;
}

.primary-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 17rem;
	margin: 0;
	padding: .4rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--pct-line);
	border-radius: var(--pct-radius);
	box-shadow: var(--pct-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s var(--pct-ease), transform .18s var(--pct-ease), visibility .18s;
}

.primary-nav__list li:hover > .sub-menu,
.primary-nav__list li:focus-within > .sub-menu,
.primary-nav__list li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav__list .sub-menu a {
	white-space: normal;
	padding: .55rem .7rem;
	font-size: .9rem;
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 1px solid var(--pct-line);
	border-radius: var(--pct-radius);
	cursor: pointer;
}

.nav-toggle__bars { display: grid; gap: 5px; }

.nav-toggle__bars span {
	display: block;
	width: 20px; height: 1.5px;
	background: var(--pct-ink);
	transition: transform .22s var(--pct-ease), opacity .22s var(--pct-ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1080px) {
	.nav-toggle { display: inline-flex; }

	.primary-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(88vw, 24rem);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 5.5rem 1.25rem 2rem;
		background: #fff;
		border-left: 1px solid var(--pct-line);
		box-shadow: var(--pct-shadow-lift);
		transform: translateX(100%);
		transition: transform .28s var(--pct-ease);
		overflow-y: auto;
		visibility: hidden;
	}

	.primary-nav.is-open { transform: translateX(0); visibility: visible; }

	.primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-nav__list a { padding: .8rem .5rem; font-size: 1rem; border-bottom: 1px solid var(--pct-line); border-radius: 0; }

	.primary-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		padding: 0 0 .4rem .9rem;
		display: none;
	}

	.primary-nav__list li.is-open > .sub-menu { display: block; }
	.primary-nav__cta { margin-top: 1.5rem; }
	.primary-nav__cta .btn { width: 100%; }
}

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

.hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	background: linear-gradient(160deg, var(--pct-tint), var(--pct-page) 60%);
	overflow: hidden;
}

.hero--hero { padding-block: clamp(5rem, 12vw, 9.5rem); }

/*
 * Interior pages get a shorter banner than the home page: about half the
 * height, so the title is a signpost rather than a full screen of its own. The
 * h1 steps down with it — at 3.6rem a two-line service name alone was taller
 * than the rest of the banner.
 */
.hero--page { padding-block: clamp(2.25rem, 4vw, 3.25rem); }

.hero--page .hero__title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }

.hero--page .hero__sub { font-size: clamp(1rem, 1.6vw, 1.12rem); }

.hero--page:not(.hero--image) { padding-block: clamp(2rem, 3.5vw, 2.75rem); }

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

/*
 * Below this width a landscape photograph loses most of its width to the crop,
 * and which part survives differs for every picture — a subject on the right
 * vanishes entirely at the default centre. The two variables come from
 * Customize → Images and move the visible window; the desktop framing above is
 * deliberately left alone.
 */
@media (max-width: 900px) {
	.hero--hero .hero__img { object-position: var(--pct-focal-home, 50% 40%); }
	.hero--page .hero__img { object-position: var(--pct-focal-page, 50% 40%); }
}

.hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg,
		rgba(var(--pct-overlay-rgb), var(--pct-overlay-1)) 0%,
		rgba(var(--pct-overlay-rgb), var(--pct-overlay-2)) 45%,
		rgba(var(--pct-overlay-rgb), var(--pct-overlay-3)) 100%);
}

/*
 * A safety net for low overlay settings: at 40% or less the photograph shows
 * through strongly, and a soft shadow is what keeps white text legible over a
 * busy image without darkening the picture the way a heavier wash would.
 */
.hero--image .hero__title,
.hero--image .hero__sub,
.hero--image .hero__eyebrow,
.hero--image .hero__note { text-shadow: 0 1px 14px rgba(0, 0, 0, .38); }

.hero--image .hero__title,
.hero--image .hero__eyebrow { color: #fff; }

.hero--image .hero__sub,
.hero--image .hero__note { color: rgba(255, 255, 255, .84); }

.hero--image .breadcrumbs,
.hero--image .breadcrumbs a { color: rgba(255, 255, 255, .72); }

.hero--image .btn--ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.hero--image .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.hero__inner { max-width: 46rem; }

.hero__eyebrow {
	margin: 0 0 1rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--pct-highlight);
}

.hero__title { margin-bottom: .35em; }

.hero__sub {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	color: var(--pct-muted);
	margin-bottom: 0;
	max-width: 38rem;
}

.hero__note {
	margin: 1.25rem 0 0;
	font-size: .88rem;
	color: var(--pct-muted);
}

/* ------------------------------------------------------------ Breadcrumbs */

.breadcrumbs {
	margin-bottom: 1.5rem;
	font-size: .82rem;
	color: var(--pct-muted);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: .4rem;
	opacity: .5;
}

.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- Entry figure */

/*
 * A page's Featured Image, floated beside the opening copy.
 *
 * The width is capped at the file's own pixel width via --pct-figure-max, set
 * inline per image, so a small photograph is shown at its true size and never
 * enlarged. The studio's 239px portraits were previously stretched to 1920px
 * as hero backgrounds — an eightfold upscale, which is what made them look
 * soft and amateurish.
 */

.entry-figure {
	float: right;
	width: min(38%, var(--pct-figure-max, 340px));
	margin: .35rem 0 1.35rem 2rem;
}

/* The margin-block on .prose img would push the picture 2rem below the first
 * line of copy and shove the caption away from it, so it is reset here. */
.entry-figure img {
	width: 100%;
	height: auto;
	margin-block: 0;
	border-radius: var(--pct-radius);
	box-shadow: var(--pct-shadow);
}

.entry-figure figcaption {
	margin-top: .6rem;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--pct-muted);
}

/* Below this the text column is too narrow to wrap around anything. */
@media (max-width: 680px) {
	.entry-figure {
		float: none;
		width: 100%;
		max-width: min(20rem, var(--pct-figure-max, 340px));
		margin: 0 0 1.5rem;
	}
}

/* Copy is meant to wrap around the picture, so headings deliberately do NOT
 * clear it — most of these pages open with an <h2>, and clearing that would
 * strand the image beside an empty column, which is the fault being fixed.
 * Full-width furniture that cannot share a line does clear. */
.prose table,
.prose hr,
.prose .disclaimer,
.prose .callout { clear: right; }

/* ------------------------------------------------------------ Intro block */

/*
 * The answer summary runs the full width of the page on its own row, because
 * it is a standalone statement of what the studio is — then the welcome copy
 * and a photograph share the row beneath it. The image column is capped and
 * stretched to the text's height so it reads as part of the same block rather
 * than a large picture the text has to work around.
 */

/*
 * On the index pages (Services, Staff) the intro sits in the full-width wrap so
 * it starts on the same left edge as the card grid below. The measure is still
 * capped for readability — it is left-aligned, not stretched.
 */


.section--intro .answer-summary {
	max-width: none;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: stretch;
}

.intro--single {
	display: block;
	max-width: var(--pct-narrow);
}

.intro__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.intro__body .cta-group { margin-top: 1.75rem; }

/* The two-column welcome grid spans the page; only its text column is capped. */
.wrap--measure > .intro { max-width: none; }

.intro__media {
	margin: 0;
	min-height: 100%;
}

.intro__media img {
	width: 100%;
	height: 100%;
	max-height: 22rem;
	object-fit: cover;
	object-position: center;
	border-radius: var(--pct-radius);
	box-shadow: var(--pct-shadow);
}

@media (max-width: 880px) {
	.intro { grid-template-columns: 1fr; }
	.intro__media { min-height: 0; }
	.intro__media img { max-height: 16rem; }
}

/* -------------------------------------------------------------- Prose */

/* flow-root so the floated .entry-figure is contained: without it a short page
 * lets the picture hang out of the section and push the next one down. */
.prose { font-size: 1.075rem; display: flow-root; }

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose h2 { margin-top: 2.5em; }
.prose h3 { margin-top: 2em; }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

/* The figure is the first child when there is one, so the block that opens the
 * copy still needs its top margin removed. */
.prose > .entry-figure + * { margin-top: 0; }

.prose ul,
.prose ol { margin: 0 0 1.4em; padding-left: 1.35em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--pct-accent); }

.prose img { border-radius: var(--pct-radius); margin-block: 2rem; }

.prose .disclaimer {
	margin-top: 2.5rem;
	padding: 1.1rem 1.35rem;
	background: rgba(231, 238, 248, .65);
	border-left: 2px solid var(--pct-accent);
	border-radius: 0 var(--pct-radius) var(--pct-radius) 0;
	font-size: .93rem;
	color: var(--pct-muted);
}

.answer-summary {
	margin: 0 0 2rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--pct-highlight);
	font-family: var(--pct-serif);
	font-size: clamp(1.15rem, 2.2vw, 1.35rem);
	line-height: 1.5;
	color: var(--pct-ink);
}

.callout {
	margin: 0 0 2.5rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid var(--pct-line);
	border-radius: var(--pct-radius);
	box-shadow: var(--pct-shadow);
}

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

.pct-note-front { font-size: .82rem; color: var(--pct-muted); font-style: italic; }

/* ------------------------------------------------------------------ Grids */

.grid { display: grid; gap: var(--pct-gap); }

.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

/*
 * "Also offered here" sits on a service page, which uses the narrower text-page
 * container. The auto-fill rule above needs 19rem (304px) per card and so drops
 * to two columns in 848px of content, leaving a hole under the third card.
 * This grid is always exactly three related services, so it is laid out as
 * three explicit columns and steps down at its own breakpoints instead.
 */
.section--related .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 780px) {
	.section--related .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.section--related .grid--cards { grid-template-columns: 1fr; }
}
.grid--staff { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.grid--articles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

/* ------------------------------------------------------------------ Cards */

.card {
	position: relative;
	background: var(--pct-surface);
	border: 1px solid var(--pct-line);
	border-radius: var(--pct-radius);
	overflow: hidden;
	transition: transform .25s var(--pct-ease), box-shadow .25s var(--pct-ease), border-color .25s var(--pct-ease);
}

.card:hover {
	transform: translateY(-3px);
	border-color: rgba(38, 80, 143, .32);
	box-shadow: var(--pct-shadow-lift);
}

.card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* Same reason as the booking cards: keep the global a:hover colour out. */
.card__link:hover,
.card__link:focus-visible { color: inherit; }

.card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pct-tint);
}

.card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s var(--pct-ease);
}

.card:hover .card__media img { transform: scale(1.035); }

.card__media--portrait { aspect-ratio: 4 / 5; display: grid; place-items: center; }

.card__initials {
	font-family: var(--pct-serif);
	font-size: 3rem;
	color: var(--pct-accent);
}

.card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.35rem 1.4rem 1.5rem;
}

.card__title { font-size: 1.22rem; margin-bottom: .45rem; }

.card__text {
	font-size: .95rem;
	color: var(--pct-muted);
	margin-bottom: 1rem;
}

.card__meta {
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pct-muted);
	margin-bottom: .5rem;
}

.card__role {
	font-size: .92rem;
	font-weight: 600;
	color: var(--pct-primary);
	margin-bottom: .25rem;
}

.card__creds {
	font-size: .82rem;
	color: var(--pct-muted);
	margin-bottom: 1rem;
}

.card__cue {
	margin-top: auto;
	font-size: .84rem;
	font-weight: 600;
	color: var(--pct-primary);
}

.card__cue::after {
	content: " →";
	display: inline-block;
	transition: transform .2s var(--pct-ease);
}

.card:hover .card__cue::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- Booking */

.booking-cards {
	display: grid;
	gap: var(--pct-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.booking-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var(--pct-primary-deep);
	color: rgba(255, 255, 255, .92);
	border-radius: var(--pct-radius);
	text-decoration: none;
	transition: transform .25s var(--pct-ease), box-shadow .25s var(--pct-ease);
}

.booking-card:nth-child(2) { background: var(--pct-primary); }
/* Third card fills rather than outlines, so the row reads as one stepped set. */
.booking-card:nth-child(3) { background: var(--pct-card-alt); color: var(--pct-body); }

.booking-card:hover { transform: translateY(-3px); box-shadow: var(--pct-shadow-lift); }

/*
 * These cards are anchors, and `a:hover` (0,1,1) outranks a lone class (0,1,0),
 * so without this the global link-hover colour repaints the card's body copy
 * accent blue — 1.9:1 against the blue card, effectively unreadable. Each card
 * restates its own text colour for hover and keyboard focus. The third card
 * needs its own rule because it ties with .booking-card:hover on specificity
 * and would otherwise take white text on a light blue ground.
 */
.booking-card:hover,
.booking-card:focus-visible { color: rgba(255, 255, 255, .92); }

.booking-card:nth-child(3):hover,
.booking-card:nth-child(3):focus-visible { color: var(--pct-body); }

.booking-card h3 { color: #fff; font-size: 1.25rem; }
.booking-card:nth-child(3) h3 { color: var(--pct-ink); }
.booking-card p { font-size: .95rem; margin-bottom: 1.25rem; }
.booking-card .card__cue { color: var(--pct-highlight); }
.booking-card:nth-child(3) .card__cue { color: var(--pct-primary); }

.booking-embed,
.map-embed,
.video-embed {
	position: relative;
	border-radius: var(--pct-radius);
	overflow: hidden;
	border: 1px solid var(--pct-line);
	background: #fff;
}

.booking-embed iframe { width: 100%; min-height: 620px; border: 0; display: block; }
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }

.video-embed { aspect-ratio: 16 / 9; margin-block: 2.5rem; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

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

.pricing {
	background: #fff;
	border: 1px solid var(--pct-line);
	border-radius: var(--pct-radius);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	box-shadow: var(--pct-shadow);
}

.pricing__table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.pricing__table thead th {
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--pct-line);
	font-family: var(--pct-sans);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pct-muted);
}

.pricing__table tbody th,
.pricing__table tbody td {
	padding: 1rem 0;
	border-bottom: 1px solid var(--pct-line);
	vertical-align: baseline;
	font-weight: 400;
}

.pricing__table tbody tr:last-child th,
.pricing__table tbody tr:last-child td { border-bottom: 0; }

.pricing__label {
	display: block;
	font-family: var(--pct-serif);
	font-size: 1.1rem;
	color: var(--pct-ink);
}

.pricing__note {
	display: block;
	font-size: .85rem;
	color: var(--pct-muted);
}

.pricing__price {
	font-family: var(--pct-serif);
	font-size: 1.35rem;
	color: var(--pct-primary);
	white-space: nowrap;
	padding-right: 1rem;
}

.pricing__col-book { text-align: right; white-space: nowrap; }

.pricing__footnote {
	margin: 1.25rem 0 0;
	font-size: .85rem;
	color: var(--pct-muted);
}

.pricing__packages { margin: 1rem 0 0; }

@media (max-width: 560px) {
	.pricing__col-book { display: none; }
}

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

.faq {
	border-top: 1px solid var(--pct-line);
}

.faq__item { border-bottom: 1px solid var(--pct-line); }

.faq__q {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 0;
	font-family: var(--pct-serif);
	font-size: 1.15rem;
	color: var(--pct-ink);
	cursor: pointer;
	list-style: none;
}

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

.faq__q::after {
	content: "+";
	margin-left: auto;
	font-family: var(--pct-sans);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--pct-accent);
	transition: transform .2s var(--pct-ease);
}

.faq__item[open] .faq__q::after { content: "–"; }

.faq__a { padding-bottom: 1.5rem; color: var(--pct-body); }
.faq__a p:last-child { margin-bottom: 0; }

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

.section--contact { background: var(--pct-tint); padding-block: var(--pct-section) !important; }

.contact {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: start;
}

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

.contact__list { margin: 2rem 0 0; }

.contact__row {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: 1rem;
	padding: .9rem 0;
	border-top: 1px solid rgba(27, 36, 48, .1);
}

.contact__row dt {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pct-muted);
	padding-top: .25rem;
}

.contact__row dd { margin: 0; }
.contact__row address { font-style: normal; margin-bottom: .35rem; }

.contact__hours {
	background: #fff;
	border-radius: var(--pct-radius);
	padding: 1.75rem;
	box-shadow: var(--pct-shadow);
}

.contact__subhead {
	font-size: .78rem;
	font-family: var(--pct-sans);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pct-muted);
	margin-bottom: 1rem;
}

.hours { margin: 0; }

.hours__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .45rem 0;
	border-bottom: 1px solid var(--pct-line);
	font-size: .95rem;
}

.hours__row:last-of-type { border-bottom: 0; }
.hours dt { color: var(--pct-muted); }
.hours dd { margin: 0; color: var(--pct-ink); font-variant-numeric: tabular-nums; }

.hours__note {
	margin: 1rem 0 0;
	font-size: .82rem;
	color: var(--pct-muted);
	line-height: 1.55;
}

/* ---------------------------------------------------------- Download card */

.download-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
	padding: 1.5rem 1.75rem;
	background: #fff;
	border: 1px solid var(--pct-line);
	border-left: 3px solid var(--pct-highlight);
	border-radius: var(--pct-radius);
	box-shadow: var(--pct-shadow);
}

.download-card__title { font-size: 1.2rem; margin-bottom: .25rem; }
.download-card__text { margin: 0; font-size: .93rem; color: var(--pct-muted); }
.download-card--notice { border-left-color: var(--pct-accent); }
.download-card--notice p { margin: 0; font-size: .9rem; color: var(--pct-muted); }

.download-list { margin-top: 3rem; }
.download-list h2 { font-size: 1.3rem; }
.download-list ul { list-style: none; margin: 0; padding: 0; }
.download-list li { border-bottom: 1px solid var(--pct-line); }
.download-list li a {
	display: block;
	padding: .9rem 0;
	font-weight: 600;
	text-decoration: none;
}
.download-list li a::after { content: " ↓"; }

/* --------------------------------------------------------- Figures / bios */

.figure-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--pct-gap);
	margin: 2.5rem 0;
}

.figure-pair figure { margin: 0; }
.figure-pair img { border-radius: var(--pct-radius); width: 100%; }

.figure-pair figcaption {
	margin-top: .6rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pct-muted);
}

.bio { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }

.bio__head {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 780px) {
	.bio__head { grid-template-columns: 1fr; }
	.bio__portrait { order: -1; max-width: 20rem; }
}

.bio__name { margin-bottom: .25em; }

.bio__role {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--pct-primary);
	margin-bottom: .35rem;
}

.bio__creds { color: var(--pct-muted); font-size: .95rem; }

.bio__body { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.bio__portrait img {
	width: 100%;
	border-radius: var(--pct-radius);
	box-shadow: var(--pct-shadow-lift);
}

/* ------------------------------------------------------------------- Blog */

.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 18rem;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

body.no-sidebar .blog-layout { grid-template-columns: 1fr; }

@media (max-width: 900px) {
	.blog-layout { grid-template-columns: 1fr; }
}

.blog-layout__aside .widget {
	background: #fff;
	border: 1px solid var(--pct-line);
	border-radius: var(--pct-radius);
	padding: 1.35rem 1.5rem;
	margin-bottom: 1.5rem;
	font-size: .94rem;
}

.widget__title { font-size: 1.05rem; margin-bottom: .75rem; }
.blog-layout__aside ul { list-style: none; margin: 0; padding: 0; }
.blog-layout__aside li { padding: .35rem 0; border-bottom: 1px solid var(--pct-line); }
.blog-layout__aside li:last-child { border-bottom: 0; }
.blog-layout__aside a { text-decoration: none; }
.blog-layout__aside a:hover { text-decoration: underline; }

.post-single__head { margin-bottom: 2rem; }
.post-single__title { margin-bottom: .5rem; }

.post-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	font-size: .85rem;
	color: var(--pct-muted);
}

.post-single__meta a { color: inherit; }

.post-single__media { margin: 0 0 2.5rem; }
.post-single__media img { width: 100%; border-radius: var(--pct-radius); }

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 3.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--pct-line);
	font-size: .93rem;
}

.post-nav a { text-decoration: none; font-weight: 600; }
.post-nav__next { margin-left: auto; text-align: right; }

.pagination {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--pct-line);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .7rem;
	border: 1px solid var(--pct-line);
	border-radius: var(--pct-radius);
	text-decoration: none;
	font-size: .9rem;
}

.pagination .page-numbers.current {
	background: var(--pct-primary);
	border-color: var(--pct-primary);
	color: #fff;
}

/* --------------------------------------------------------------- Comments */

.comments { margin-top: 3rem; }
.comments__title { font-size: 1.4rem; }
.comments__list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.comments__list .children { list-style: none; padding-left: 1.5rem; }

.comments__list li.comment {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--pct-line);
}

.comment-form label {
	display: block;
	margin-bottom: .35rem;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pct-muted);
}

.comment-form p { margin-bottom: 1.15rem; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea {
	width: 100%;
	padding: .8rem 1rem;
	background: #fff;
	border: 1px solid var(--pct-line);
	border-radius: var(--pct-radius);
	font-family: inherit;
	font-size: 1rem;
	color: var(--pct-ink);
	transition: border-color .18s var(--pct-ease), box-shadow .18s var(--pct-ease);
}

input:focus,
textarea:focus {
	border-color: var(--pct-primary);
	box-shadow: 0 0 0 3px rgba(38, 80, 143, .16);
	outline: none;
}

.comment-notes { font-size: .9rem; color: var(--pct-muted); }
.comment-form .submit { all: unset; }

.comment-form input[type="submit"],
.search-form button,
.wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85rem 1.6rem;
	background: var(--pct-primary);
	border: 1px solid var(--pct-primary);
	border-radius: var(--pct-radius);
	color: #fff;
	font-family: var(--pct-sans);
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s var(--pct-ease);
}

.comment-form input[type="submit"]:hover { background: var(--pct-primary-deep); }

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

/* The form sits directly above "Come see us", which is tinted. Tinting this
 * one too would run the two into a single unexplained band, so the form keeps
 * the page background and earns its separation from the card instead. */
.section--form { background: var(--pct-page); }

.contact-form {
	margin-top: 1.75rem;
	padding: 1.75rem;
	background: var(--pct-surface);
	border: 1px solid var(--pct-line);
	border-radius: var(--pct-radius);
	box-shadow: var(--pct-shadow);
}

/* Two short fields per row on anything wider than a phone; the message and
 * the checkbox always take the full width. */
.contact-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0 1.25rem;
}

.contact-form .field { margin: 0 0 1.25rem; }
.contact-form .field--submit { margin-bottom: 0; }

.contact-form label {
	display: block;
	margin-bottom: .35rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pct-muted);
}

.contact-form select {
	width: 100%;
	padding: .8rem 1rem;
	background: #fff;
	border: 1px solid var(--pct-line);
	border-radius: var(--pct-radius);
	font-family: inherit;
	font-size: 1rem;
	color: var(--pct-ink);
}

.field__req { color: var(--pct-primary); }

.field__opt {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pct-muted);
}

.field__hint {
	display: block;
	margin-top: .5rem;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--pct-muted);
}

.field__error {
	display: block;
	margin-top: .4rem;
	font-size: .88rem;
	font-weight: 600;
	color: #a3241c;
}

/* The error state is a red border AND a message — colour alone is not a
 * signal everyone can see. */
.field--error input,
.field--error textarea { border-color: #a3241c; }

/* The checkbox is the one control that should not be full width. */
.contact-form .field--check label {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pct-ink);
	cursor: pointer;
}

.contact-form .field--check input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
	accent-color: var(--pct-primary);
}

.contact-form .field--submit {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	padding-top: .5rem;
	border-top: 1px solid var(--pct-line);
	margin-top: 1.75rem;
}

.contact-form .field--submit .field__hint { margin-top: 0; }

/* The honeypot. Hidden from people without display:none, which some bots
 * check for, and taken out of the tab order and the accessibility tree. */
.contact-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid;
	border-radius: var(--pct-radius);
	font-size: .98rem;
	line-height: 1.6;
}

.form-notice p { margin: 0; }
.form-notice--ok { background: #e8f2e8; border-color: #2f6b3a; color: #1d4425; }
.form-notice--bad { background: #fbeceb; border-color: #a3241c; color: #7a1a14; }

.search-form {
	display: flex;
	gap: .5rem;
	max-width: 26rem;
}

/* ------------------------------------------------------------------ Promo */

.promo {
	background: var(--pct-primary);
	color: #fff;
}

.promo__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: clamp(2rem, 4vw, 3rem);
}

.promo__title { color: #fff; margin-bottom: .25rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.promo__text { margin: 0; color: rgba(255, 255, 255, .85); max-width: 42rem; }

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

.site-footer {
	background: var(--pct-primary-deep);
	color: rgba(255, 255, 255, .74);
	font-size: .95rem;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: clamp(2rem, 4vw, 3rem);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.site-footer__col--brand { grid-column: span 1; }

.site-footer__logo {
	display: inline-block;
	margin-bottom: 1rem;
	padding: .6rem .8rem;
	background: var(--pct-surface);
	border-radius: var(--pct-radius);
}

.site-footer__logo img {
	max-height: 56px;
	width: auto;
}

.site-footer__name {
	font-family: var(--pct-serif);
	font-size: 1.15rem;
	color: #fff;
	margin-bottom: .25rem;
}

.site-footer__tag { color: rgba(255, 255, 255, .6); font-style: italic; }

.site-footer__heading {
	font-family: var(--pct-sans);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pct-highlight);
	margin-bottom: 1rem;
}

.site-footer a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.site-footer a:hover { color: var(--pct-highlight); text-decoration: underline; }

.site-footer__address { font-style: normal; margin-bottom: .75rem; }

.site-footer .hours__row { border-color: rgba(255, 255, 255, .12); font-size: .9rem; }
.site-footer .hours dt { color: rgba(255, 255, 255, .6); }
.site-footer .hours dd { color: #fff; }
.site-footer .hours__note { color: rgba(255, 255, 255, .55); }

.site-footer__menu,
.site-footer__legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__menu li { padding: .3rem 0; }

.social {
	display: flex;
	gap: .5rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.social a {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	font-family: var(--pct-serif);
	font-size: .95rem;
	text-decoration: none;
	transition: background-color .2s var(--pct-ease), border-color .2s var(--pct-ease);
}

.social a:hover {
	background: var(--pct-highlight);
	border-color: var(--pct-highlight);
	color: var(--pct-primary-deep);
	text-decoration: none;
}

.site-footer__legal {
	padding-block: 1.5rem 2rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .82rem;
	color: rgba(255, 255, 255, .55);
}

.site-footer__legal p { margin-bottom: .5rem; }
.site-footer__trademark { max-width: 60rem; line-height: 1.6; }

.site-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ------------------------------------------------------------ Sticky CTA */

.sticky-cta {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 90;
	display: none;
	border-top: 1px solid var(--pct-line);
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(8px);
	box-shadow: 0 -8px 24px -18px rgba(23, 51, 95, .4);
}

.sticky-cta__item {
	flex: 1;
	padding: .95rem .5rem;
	text-align: center;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--pct-primary);
}

.sticky-cta__item:hover,
.sticky-cta__item:focus-visible { color: var(--pct-primary); }

.sticky-cta__item--primary {
	background: var(--pct-primary);
	color: #fff;
}

.sticky-cta__item--primary:hover,
.sticky-cta__item--primary:focus-visible { color: #fff; }

@media (max-width: 720px) {
	.sticky-cta { display: flex; }
	body { padding-bottom: 3.5rem; }
}

/* --------------------------------------------------------- Register tab
 *
 * Stands in for the Buttonizer plugin the old site used: one fixed link,
 * pinned to the middle of the window edge, going straight out to Vagaro.
 * A plain <a>, so it needs no JavaScript and works as a link should.
 */

.register-tab {
	position: fixed;
	top: 50%;
	z-index: 95;
	display: block;
	padding: 1.2rem .62rem;
	background: var(--pct-primary);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 10px 30px -12px rgba(23, 51, 95, .55);
	transition: background-color .18s ease, transform .18s ease;
}

/* Reads top-to-bottom on the right edge, bottom-to-top on the left — the
 * direction the eye expects on each side. */
.register-tab__label { writing-mode: vertical-rl; }

.register-tab--right {
	right: 0;
	transform: translateY(-50%);
	border-radius: var(--pct-radius) 0 0 var(--pct-radius);
}

.register-tab--left {
	left: 0;
	transform: translateY(-50%);
	border-radius: 0 var(--pct-radius) var(--pct-radius) 0;
}

.register-tab--left .register-tab__label { transform: rotate(180deg); }

/* The colour is restated on both states: the global a:hover rule is (0,1,1)
 * and would otherwise repaint this white text to accent blue on blue. */
.register-tab--right:hover,
.register-tab--right:focus-visible {
	background: var(--pct-primary-deep);
	color: #fff;
	transform: translateY(-50%) translateX(-3px);
}

.register-tab--left:hover,
.register-tab--left:focus-visible {
	background: var(--pct-primary-deep);
	color: #fff;
	transform: translateY(-50%) translateX(3px);
}

/* The global focus ring is primary blue, which is invisible on this tab. */
.register-tab:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -5px;
}

/* On a phone the page gutter is ~18px and the tab is ~30px wide, so without a
 * reserved strip it sits on top of the last word of every other line. The
 * gutter opens on whichever side the tab is on; full-bleed backgrounds still
 * run edge to edge because it is the .wrap padding that grows, not the body. */
@media (max-width: 720px) {
	.register-tab {
		padding: .9rem .4rem;
		font-size: .7rem;
		letter-spacing: .06em;
	}

	.has-register-tab-right .wrap { padding-right: 2.9rem; }
	.has-register-tab-left .wrap { padding-left: 2.9rem; }
}

/* ------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ------------------------------------------------------------------ Print */

@media print {
	.topbar, .site-header, .promo, .sticky-cta, .register-tab, .section--booking, .breadcrumbs { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.hero { background: none; padding-block: 0; }
	.hero--image::after, .hero__media { display: none; }
	.hero__title, .hero__eyebrow, .hero__sub { color: #000 !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}