/*
Theme Name: VACC Parent
Theme URI: https://gitea.hosting-cloud.net/vacc-websites/vacc-parent-theme
Description: Parent block theme for VACC member sites rebuilt by DreamIT. Owns structure; child themes carry brand only.
Version: 0.11.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: vacc-parent
License: proprietary
*/

/*
Section library stylesheet (v0.11.0, contract 3.6.0; the modern service-site look from v0.6.0, contract 3.1.0).

0.11.0 (contract 3.6.0) adds an optional layout choice to hero, hero-split, process-steps,
testimonials, cta-band and service-tiles (section 33, scoped to the new vacc-layout-<value>
classes) and per-style signature details under the body classes is-v36-<style> that the option
vacc_v36 turns on (section 34). With no layout and no option the page renders as in 0.10.0.

0.10.0 (contract 3.5.0) adds the service-tiles section (an icon, a name and one link per tile), the
service-cards grid by card count (two cards in two wide columns, four in two rows of two) and a
phone bar that leads with the Call button. Every new rule sits under the style class (section 31),
so with no variation the page renders as in 0.9.0, and so as in 0.7.0 (contract/check.py checks it).

0.9.0 (contract 3.4.0) adds per-style switches: a body class vacc-style-<slug> (composed sites with a
style variation), a dark header for Bold read from header tokens under that class, and an optional
section surface (is-surface-tint, -paper, -dark, -white) the builder writes per section. With no variation and
no surface the page renders as in 0.8.0, and so as in 0.7.0 (contract/check.py checks it).

0.8.0 (contract 3.3.0) adds style variations (styles/*.json): Workshop, Bold, Friendly, Clean and
Classic. A variation sets only typography and settings.custom tokens. Every token added in 0.8.0
is read as var(--wp--custom--<token>, <0.7.0 value>) and theme.json keeps every token at its 0.7.0
value, so with no variation the page renders as in 0.7.0 (contract/check.py checks both).

The look: a white header with the phone as a pill button, a split hero on a pale
wash of the member colour, sentence-case headings in one weight, pill buttons,
cards with one radius and one soft shadow, icon-led service cards, photos in
fixed aspect-ratio frames, one near-black band (the CTA card) and a dark (charcoal) footer.
The member colour is used only for buttons, links, icons, small accents and
eyebrows, never as a large fill. Ghost numbers, offset photo frames, dashed
rules and uppercase headings from v0.4.0 are gone; their slots still print but
the theme hides or restyles them. Colours, fonts, sizes and simple
block styles live in theme.json; this file holds what theme.json cannot
express. Every colour is a palette variable, so a child theme changes the look
by setting palette slugs (see contract/palette.py), never by editing this file.

Stable class names (the contract templates and patterns depend on them):

  Page structure
    .vacc-topbar, .vacc-topbar__row (address and hours, desktop only)
    .vacc-header, .vacc-header__row, .vacc-header__right, .vacc-header__phone
    .vacc-logo (core/site-logo in the header), .vacc-nav (core/navigation)
    .vacc-mobile-bar, .vacc-mobile-bar__link (Call and Map bar, phones only)
    .vacc-footer, .vacc-footer__grid, .vacc-footer__logo, .vacc-footer__bottom, .vacc-nav-footer
  Sections (outer core/group or core/cover, always with .vacc-section)
    .vacc-hero (+ .vacc-hero--page, .vacc-hero--plain), .vacc-hero__copy, .vacc-lead
    .vacc-usp-band, .vacc-usp-band__row, .vacc-usp (+ --left, --phone, --right),
    .vacc-usp__text, .vacc-usp__label, .vacc-usp__phone
    .vacc-intro-card, .vacc-service-cards, .vacc-service-rows, .vacc-parts-cards,
    .vacc-brand-strip (+ .is-compact), .vacc-team, .vacc-gallery-strip,
    .vacc-contact-band, .vacc-cta-band, .vacc-404
	3.1.0: .vacc-hero-split (+ __row, __copy, __media, __image, __panel), .vacc-actions,
	.vacc-btn-call, .vacc-btn-quote, .vacc-trust (+ __rating, __years, __member, __area,
	__item, __phone), .vacc-trust-strip (+ __row), .vacc-location (+ __row, __info,
	__facts, __media, __image), .vacc-faq (+ __list, __item), .vacc-certifications,
	.vacc-badges, .vacc-badge (+ __image, __label, __member), .vacc-rating-summary,
	.vacc-card__icon, .vacc-panel-icon, .vacc-btn, .vacc-hours-rows, .vacc-hours-row,
	.vacc-hours-day, .vacc-hours-time, .vacc-hours-empty
	3.3.0: .vacc-hero-split.is-text-only, .vacc-service-cards.is-list, .vacc-offers (+ __grid),
	.vacc-offer (+ __value, __terms, __valid), .vacc-emergency (+ __row, __label, __phone, __area),
	.vacc-breakdown-band__area, .vacc-before-after, .vacc-ba (+ __item, __pair, __before, __after,
	__caption, __range, .is-slider), .vacc-stats-row.is-band, .vacc-team.is-owner, .vacc-field-help, input.vacc-photo,
	.vacc-trust-strip.is-proof, .vacc-trust (+ __licence, __warranty), .vacc-symptoms (+ __grid),
	.vacc-symptom (+ __icon, __text, __link), .vacc-marque-wall, .vacc-marques, .vacc-marque
	(+ .has-image), .vacc-service-areas, .vacc-areas (+ __links, __map), .vacc-timeline (+ __list,
	__item, __year, __text)
	3.5.0: .vacc-service-tiles, .vacc-tiles, .vacc-tile (+ __icon, __title, __link)
    .is-tint (section on the light grey background)
  Section heading
	.vacc-section-head (+ .is-centered), .vacc-index (hidden since 0.6.0), .vacc-intro,
	.vacc-section-foot; heading words in <strong> print in the same weight since 0.6.0.
  Inside sections
    .vacc-grid, .vacc-grid__intro, .vacc-card, .vacc-card__image, .vacc-card__body,
    .vacc-card__more, .vacc-row, .vacc-row__image, .vacc-logos, .vacc-logos__item,
    .vacc-team__image (+ .is-square), .vacc-caption, .vacc-pull, .vacc-details,
    .vacc-map-box, .vacc-map-card, .vacc-form-card, .vacc-cta-band__row, .vacc-cta-band__text
  Utilities
    .is-mobile-only, .is-desktop-only (breakpoint 781px, the core columns breakpoint)
  Block styles (registered in functions.php)
    group: is-style-card, is-style-side-card, is-style-brand-strip, is-style-map-box
    columns: is-style-reversed; paragraph: is-style-eyebrow (the subtitle);
    list: is-style-checklist; button: is-style-light, is-style-ghost, is-style-dark, is-style-outline
  Shortcode output
    .vacc-fact, .vacc-fact--{phone,email,address,hours}, .vacc-label, .vacc-value,
    .vacc-light, .vacc-icon, .vacc-icon--{name}, .vacc-map-link, .vacc-member-badge,
    .vacc-copyright, .vacc-form (Contact Form 7)
*/

/* Base --------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--focus);
	outline-offset: 3px;
}

/* Dark contexts: focus ring, links and icons switch to the light accent. Every selector here
   has a charcoal or overlay fill (contract/check.py checks it). The footer is dark again in
   0.7.0 (charcoal), so it takes the light ring; its logo plate pushes the ring outside the plate. */
.vacc-topbar,
.vacc-footer,
.vacc-hero,
.vacc-usp-band,
.is-style-side-card,
.vacc-grid__intro {
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

h1 strong,
h2 strong,
.wp-block-heading strong {
	font-weight: var(--wp--custom--heading-weight);
}

.wp-site-blocks > *,
.wp-block-post-content > .vacc-section,
.wp-block-post-content > .vacc-usp-band,
.wp-block-post-content > .vacc-trust-strip {
	margin-block-start: 0;
	margin-block-end: 0;
}

.vacc-section {
	padding-block: var(--wp--custom--section-space, var(--wp--preset--spacing--60));
}

.vacc-section.is-tint {
	background-color: var(--wp--preset--color--tint);
}

.vacc-section.is-tint:not([class*="is-surface-"]) + .vacc-section.is-tint:not([class*="is-surface-"]) {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Icons (inline SVG from [vacc_icon] or a fact's icon attribute) */
.vacc-icon {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;
	flex: none;
}

.vacc-fact .vacc-icon {
	margin-right: 0.5em;
	color: var(--wp--preset--color--primary-dark);
}

:is(.vacc-topbar, .vacc-mobile-bar) .vacc-fact .vacc-icon {
	color: var(--wp--preset--color--primary-on-dark);
}

.vacc-mobile-bar .vacc-fact .vacc-icon {
	color: inherit;
}

/* Section heading ------------------------------------------------------------ */

.vacc-section-head {
	position: relative;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.vacc-section-head > * {
	max-width: 720px;
}

.vacc-section-head.is-centered {
	text-align: center;
}

.vacc-section-head.is-centered > * {
	margin-inline: auto;
}

.vacc-section-head .wp-block-heading,
.vacc-section-head + * .wp-block-heading {
	position: relative;
	z-index: 1;
}

.wp-block-heading {
	margin-top: 0;
}

/* 0.6.0: the faded section number is no longer drawn. The index slot still prints (3.0.0
   pages keep validating); it is hidden from sight and from screen readers. */
.vacc-index {
	display: none !important;
}

/* An eyebrow above a heading (3.1.0 sections): small, sentence case, the accent as text.
   A 3.0.0 subtitle sits under its heading: it prints as a muted sub-heading instead. */
/* 0.8.0: the Clean and Classic variations set the eyebrow in small caps (eyebrowCaps) with
   tracking (eyebrowLetterSpacing, read in theme.json); the 3.0.0 subtitle below keeps neither. */
.is-style-eyebrow {
	margin-top: 0;
	margin-bottom: 0.6rem;
	font-variant-caps: var(--wp--custom--eyebrow-caps, normal);
}

.wp-block-heading + .is-style-eyebrow {
	margin-top: 0.6rem;
	margin-bottom: 0;
	color: var(--wp--preset--color--muted);
	font-family: inherit;
	font-weight: 400;
	font-size: 1.125rem;
	font-variant-caps: normal;
	letter-spacing: 0;
}

.vacc-section-head .wp-block-heading,
.vacc-section-head .is-style-eyebrow {
	margin-bottom: 0;
}

.vacc-section-head .is-style-eyebrow + .wp-block-heading {
	margin-top: 0;
}

.vacc-intro,
.vacc-lead {
	font-size: 1.125rem;
	line-height: 1.6;
}

.vacc-section-head .vacc-intro {
	margin-top: 1rem;
	color: var(--wp--preset--color--muted);
}

.vacc-section-foot {
	margin-top: 2.5rem;
	text-align: center;
}

.vacc-section-foot .wp-block-buttons {
	justify-content: center;
}

.wp-block-column > .vacc-index + .wp-block-heading,
.wp-block-column {
	position: relative;
}

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

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	box-sizing: border-box;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button.is-style-light .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--dark);
}

.wp-block-button.is-style-dark .wp-block-button__link {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--dark-soft);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--base);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--dark);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--heading);
	border: 2px solid var(--wp--preset--color--heading);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

/* 1. Top bar and header ---------------------------------------------------------- */

/* The header and footer parts hold shortcode paragraphs (top bar, sticky bar) that may
   print nothing; they take no space. */
.wp-block-template-part > *,
.wp-site-blocks > header > *,
.wp-site-blocks > footer > * {
	margin-block: 0;
}

.wp-block-template-part > p:empty,
.wp-site-blocks > header > p:empty,
.wp-site-blocks > footer > p:empty {
	display: none;
}

/* [vacc_topbar] prints spans, because core/shortcode wraps it in a paragraph. */
.vacc-topbar {
	display: block;
	background-color: var(--wp--preset--color--dark-soft);
	color: var(--wp--preset--color--footer-text);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.vacc-topbar__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	max-width: 1200px;
	margin-inline: auto;
	padding: 0.55rem var(--wp--custom--gutter);
	box-sizing: content-box;
}

.vacc-topbar__group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
}

.vacc-topbar a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.vacc-topbar a:hover {
	text-decoration: underline;
}

.vacc-header {
	background-color: rgb(255 255 255 / 0.96);
	color: var(--wp--preset--color--heading);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* 0.7.0: the composed header sticks (the template part wrapper sticks, so the header is not
   held inside its own box). The replica header (vacc-oa-header) is the family's and does not.
   Scroll padding keeps a focused or anchored element clear of the header and the phone
   bottom bar (WCAG 2.2 SC 2.4.11). */
.wp-site-blocks > header.wp-block-template-part:has(> .vacc-header) {
	position: sticky;
	top: 0;
	z-index: 40;
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .vacc-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .vacc-header) {
		top: 0;
	}
}

/* Scroll padding = the sticky header's height + 16px, per variant and width (heights measured
   in the stage rig with getBoundingClientRect, contract 3.2.0 notes), plus the admin bar when
   it shows. Phones: the 60px row, plus the Call and Map strip when there is no bottom bar;
   with the bottom bar the strip is hidden and the bottom is padded instead. */
html:has(.vacc-header) {
	--vacc-scroll-top: 92px;
	scroll-padding-top: calc(var(--vacc-scroll-top) + var(--wp-admin--admin-bar--height, 0px));
}

@media (min-width: 1100px) {
	html:has(.vacc-topbar) {
		--vacc-scroll-top: 156px;
	}

	html:has(.vacc-header--stacked) {
		--vacc-scroll-top: 160px;
	}

	html:has(.vacc-header--stacked):has(.vacc-topbar) {
		--vacc-scroll-top: 228px;
	}
}

/* From 782px to 1099px the desktop menu can wrap to a second line (left and split 110px,
   stacked 142px measured at 800px; the topbar wraps too). */
@media (min-width: 782px) and (max-width: 1099px) {
	html:has(.vacc-header) {
		--vacc-scroll-top: 128px;
	}

	html:has(.vacc-topbar) {
		--vacc-scroll-top: 220px;
	}

	html:has(.vacc-header--stacked) {
		--vacc-scroll-top: 160px;
	}

	html:has(.vacc-header--stacked):has(.vacc-topbar) {
		--vacc-scroll-top: 252px;
	}
}

@media (max-width: 781px) {
	/* Every variant shares the phone layout: 60px row + Call and Map strip = 113px measured. */
	html:has(.vacc-header) {
		--vacc-scroll-top: 132px;
	}

	html:has(.vacc-sticky-bar) {
		--vacc-scroll-top: 80px;
		scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}
}

/* The blur is desktop only: backdrop-filter makes .vacc-header the containing block of its
   fixed descendants, which would trap the phone menu overlay inside the header row. */
@media (min-width: 782px) {
	@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
		.vacc-header {
			-webkit-backdrop-filter: saturate(1.4) blur(12px);
			backdrop-filter: saturate(1.4) blur(12px);
		}
	}
}

/* With the phone menu open, its overlay (inside the sticky header) must cover the bottom bar:
   the header wrapper's stacking context goes on top and the bar is hidden. */
html.has-modal-open .wp-site-blocks > header.wp-block-template-part:has(> .vacc-header) {
	z-index: 100000;
}

html.has-modal-open .vacc-sticky-bar {
	display: none !important;
}

.vacc-header__row {
	min-height: 72px;
	padding-block: 0.5rem;
	gap: 2rem;
}

/* The logo fits a 220 by 44 box (36 high on phones), keeping its shape. */
.vacc-logo img,
.vacc-logo .custom-logo {
	width: auto;
	height: auto;
	max-width: min(var(--wp--custom--logo-width, 220px), 220px);
	max-height: 44px;
}

.vacc-header__right {
	gap: 1.75rem;
	align-items: center;
}

.vacc-header :is(.vacc-header__right, .vacc-header__nav-row) p {
	margin: 0;
}

.vacc-header :is(.vacc-header__right, .vacc-header__nav-row) p:empty {
	display: none;
}

/* 0.7.0: the outline Quote pill ([vacc_quote_link]) beside the filled Call pill, 1100px and up,
   in the left header (__right) and the stacked header (__nav-row). */
.vacc-header :is(.vacc-header__right, .vacc-header__nav-row) p:has(> .vacc-header__quote) {
	display: none;
}

@media (min-width: 1100px) {
	.vacc-header :is(.vacc-header__right, .vacc-header__nav-row) p:has(> .vacc-header__quote) {
		display: block;
	}
}

.vacc-header__quote a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1.15rem;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--heading);
	border-radius: var(--wp--custom--radius-pill);
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	white-space: nowrap;
}

.vacc-header__quote a:hover {
	background-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

/* The header phone is the main call to action: a filled pill with a phone icon. The
   shortcode's own icon sits outside the link, so the link draws its own. */
.vacc-header__phone .vacc-icon {
	display: none;
}

.vacc-header__phone a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.55rem 1.15rem;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	white-space: nowrap;
}

.vacc-header__phone a::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/tabler/phone.svg") center / contain no-repeat;
	mask: url("assets/icons/tabler/phone.svg") center / contain no-repeat;
}

.vacc-header__phone a:hover {
	background-color: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--on-primary);
}

.vacc-nav,
.vacc-nav a {
	color: var(--wp--preset--color--heading);
}

.vacc-nav .wp-block-navigation-item__content {
	display: block;
	position: relative;
	padding: 0.6rem 0.2rem;
	font-weight: 500;
	text-decoration: none;
}

.vacc-nav .wp-block-navigation__container {
	/* navGap: the space between menu items (0.8.0 token; Clean is tighter, Inter is a wide face). */
	gap: 0.4rem var(--wp--custom--nav-gap, 1.75rem);
}

.vacc-nav .wp-block-navigation-item__content:hover,
.vacc-nav .current-menu-item > .wp-block-navigation-item__content,
.vacc-nav [aria-current="page"] {
	color: var(--wp--preset--color--primary-dark);
}

.vacc-nav .current-menu-item > .wp-block-navigation-item__content::after,
.vacc-nav [aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--primary-dark);
}

.vacc-nav .wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	color: var(--wp--preset--color--heading);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius-small);
}

.vacc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.85rem 0.25rem;
	font-size: 1.1rem;
}

/* 0.7.0: the open phone menu keeps its items and close button off the screen edges, and
   takes the on-dark focus ring (its background is dark). */
.vacc-nav--mobile .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
	background-color: var(--wp--preset--color--dark);
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

.vacc-nav--mobile .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}

.vacc-mobile-bar {
	display: none;
	background-color: var(--wp--preset--color--primary-fill-on-dark);
	/* The links fill the strip, so the ring is drawn inside them, on the accent fill. */
	--wp--preset--color--focus: var(--wp--preset--color--on-primary);
}

.vacc-mobile-bar a:focus-visible {
	outline-offset: -4px;
}

.vacc-mobile-bar p {
	margin: 0;
}

.vacc-mobile-bar .vacc-mobile-bar__link a,
.vacc-mobile-bar a.vacc-mobile-bar__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 52px;
	padding-inline: 0.75rem; /* room for the inset focus ring around the text */
	color: var(--wp--preset--color--on-primary);
	font-size: 0.9375rem;
	white-space: nowrap;
	text-decoration: none;
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
}

.vacc-mobile-bar .vacc-fact {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--on-primary);
}

/* Visibility utilities --------------------------------------------------------- */

/* Header variants. Desktop navigation never collapses; the phone menu is a separate
   navigation block (overlay always) shown only at 781px and below, so every variant
   shares one phone layout: logo left, menu button right. */
.vacc-nav--mobile .wp-block-navigation__responsive-container-open {
	display: flex;
}

@media (min-width: 782px) {
	.vacc-header--split .vacc-header__row {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 2.5rem;
	}

	.vacc-header--split .vacc-logo {
		justify-self: center;
	}

	.vacc-header--stacked .vacc-header__row {
		flex-direction: column;
		justify-content: center;
		gap: 0.9rem;
		padding-block: 1.4rem 0.9rem;
	}

	.vacc-header__nav-row {
		gap: 1.5rem;
		align-items: center;
	}
}

@media (max-width: 781px) {
	.is-desktop-only {
		display: none !important;
	}

	.vacc-header .vacc-header__row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.vacc-header__row {
		min-height: 60px;
		padding-block: 0.375rem;
		gap: 1rem;
	}

	.vacc-logo img,
	.vacc-logo .custom-logo {
		max-width: min(var(--wp--custom--logo-width-mobile, 160px), 220px);
		max-height: 36px;
	}

	.vacc-mobile-bar.is-mobile-only {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}

	.vacc-mobile-bar > * + * {
		border-left: 1px solid rgb(0 0 0 / 0.15);
	}
}

@media (min-width: 782px) {
	.is-mobile-only {
		display: none !important;
	}
}

/* 2. Hero (core/cover) ------------------------------------------------------- */

.wp-block-cover.vacc-hero {
	min-height: var(--wp--custom--hero-min-height);
	padding-block: 5rem;
	color: var(--wp--preset--color--base);
	text-align: center;
	align-items: center;
	justify-content: center;
}

.wp-block-cover.vacc-hero--page {
	min-height: var(--wp--custom--page-hero-min-height);
	padding-block: 3.5rem;
}

/* core/cover saves a dim-0 background span; the theme paints the overlay on it. */
.wp-block-cover.vacc-hero > .wp-block-cover__background {
	opacity: 1 !important;
	background: var(--wp--preset--color--overlay-strong) !important;
}

.wp-block-cover.vacc-hero .wp-block-cover__inner-container {
	width: 100%;
	color: var(--wp--preset--color--base);
}

.vacc-hero__copy {
	max-width: 920px;
	margin-inline: auto !important;
}

.vacc-hero h1.wp-block-heading {
	color: var(--wp--preset--color--base);
	font-size: clamp(2.1rem, 5vw, 3.9rem);
	line-height: 1.12;
	letter-spacing: 0.01em;
	margin-bottom: 0;
}

.vacc-hero h1.wp-block-heading strong {
	display: block;
	color: var(--wp--preset--color--primary-on-dark);
}

.vacc-hero--page h1.wp-block-heading {
	font-size: clamp(1.9rem, 3.8vw, 3rem);
}

.vacc-hero--page h1.wp-block-heading strong {
	display: inline;
}

.vacc-hero .vacc-lead {
	max-width: 560px;
	margin: 1.25rem auto 0;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--base);
}

.vacc-hero .wp-block-buttons {
	justify-content: center;
	margin-top: 2.25rem;
	gap: 0.9rem;
}

.vacc-hero--plain {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	padding-block: 4.5rem;
	text-align: center;
}

.vacc-hero--plain h1.wp-block-heading {
	color: var(--wp--preset--color--base);
}

@media (max-width: 700px) {
	.wp-block-cover.vacc-hero {
		min-height: 520px;
		padding-block: 3.5rem;
	}

	.wp-block-cover.vacc-hero > .wp-block-cover__background {
		background: var(--wp--preset--color--overlay-mobile) !important;
	}

	.vacc-hero .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}

	.vacc-hero .wp-block-buttons > .wp-block-button .wp-block-button__link {
		width: 100%;
	}
}

/* 3. USP band: accent panels either side of the phone, joined by angled edges -- */

.vacc-usp-band {
	background-color: var(--wp--preset--color--dark);
	overflow: hidden;
}

.vacc-usp-band__row {
	display: grid;
	grid-template-columns: 1fr 1.2fr 1fr;
	align-items: stretch;
}

.vacc-usp-band__row > .vacc-usp {
	margin: 0;
}

.vacc-usp {
	--slant: 46px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 84px;
	padding: 1.1rem clamp(1.25rem, 4vw, 4rem);
}

.vacc-usp p {
	margin: 0;
}

.vacc-usp--left,
.vacc-usp--right {
	z-index: 1;
	background-color: var(--wp--preset--color--primary-fill-on-dark);
	color: var(--wp--preset--color--on-primary);
}

.vacc-usp--left {
	justify-content: flex-start;
	margin-right: calc(var(--slant) * -1) !important;
	padding-right: calc(var(--slant) + 1.5rem);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}

.vacc-usp--right {
	justify-content: flex-end;
	margin-left: calc(var(--slant) * -1) !important;
	padding-left: calc(var(--slant) + 1.5rem);
	clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}

.vacc-usp--phone {
	flex-direction: column;
	justify-content: center;
	gap: 0.2rem;
	text-align: center;
	color: var(--wp--preset--color--base);
	padding-inline: calc(var(--slant) + 1.5rem);
}

.vacc-usp .vacc-icon {
	width: 46px;
	height: 46px;
	padding: 11px;
	border-radius: 50%;
	background-color: color-mix(in srgb, currentColor 14%, transparent);
	vertical-align: middle;
}

.vacc-usp__text {
	font-family: var(--wp--custom--heading-font);
	font-weight: var(--wp--custom--heading-weight-light);
	font-size: 1.05rem;
	line-height: 1.3;
}

.vacc-usp__text strong {
	font-weight: var(--wp--custom--heading-weight);
}

.vacc-usp__label {
	font-size: 0.875rem;
	color: var(--wp--preset--color--footer-text);
}

.vacc-usp__phone a {
	color: var(--wp--preset--color--primary-on-dark);
	font-family: var(--wp--custom--heading-font);
	font-size: clamp(1.6rem, 2.7vw, 2.3rem);
	line-height: 1.15;
	text-decoration: none;
	white-space: nowrap;
}

.vacc-usp__phone .vacc-light {
	font-weight: var(--wp--custom--heading-weight-light);
}

.vacc-usp__phone strong {
	font-weight: var(--wp--custom--heading-weight);
}

@media (max-width: 781px) {
	.vacc-usp-band__row {
		grid-template-columns: 1fr;
	}

	.vacc-usp,
	.vacc-usp--left,
	.vacc-usp--right,
	.vacc-usp--phone {
		margin: 0 !important;
		padding: 1.1rem var(--wp--custom--gutter);
		min-height: 0;
		clip-path: none;
		justify-content: flex-start;
	}

	.vacc-usp--phone {
		align-items: flex-start;
		text-align: left;
	}
}

/* 4. Checklist (core/list, style checklist) ------------------------------------- */

.is-style-checklist {
	list-style: none;
	padding-left: 0;
	margin-block: 1.5rem;
}

.is-style-checklist li {
	position: relative;
	padding: 0.7rem 0 0.7rem 2.2rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.is-style-checklist li:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

.is-style-checklist li::before,
.is-style-checklist li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85rem;
	width: 1.35rem;
	height: 1.35rem;
}

.is-style-checklist li::before {
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
}

.is-style-checklist li::after {
	background-color: var(--wp--preset--color--on-primary);
	-webkit-mask: url("assets/icons/check.svg") center / 0.85rem no-repeat;
	mask: url("assets/icons/check.svg") center / 0.85rem no-repeat;
}

.is-style-checklist li strong {
	color: var(--wp--preset--color--heading);
}

/* 5. Intro with dark side card --------------------------------------------------- */

.vacc-intro-card .wp-block-columns,
.vacc-team .wp-block-columns,
.vacc-contact-band .wp-block-columns {
	gap: clamp(2rem, 5vw, 4.5rem);
}

.vacc-intro-card .wp-block-columns {
	align-items: flex-start;
}

.wp-block-group.is-style-side-card {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--footer-text);
	border-top: 4px solid var(--wp--preset--color--primary-fill-on-dark);
	border-radius: var(--wp--custom--radius);
	padding: 2.25rem;
}

.is-style-side-card .wp-block-heading {
	color: var(--wp--preset--color--base);
	font-size: 1.25rem;
}

.is-style-side-card a,
.vacc-grid__intro a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--primary-on-dark);
}

.is-style-side-card .is-style-checklist li,
.vacc-grid__intro .is-style-checklist li,
.vacc-tier.is-highlighted .is-style-checklist li {
	border-color: rgb(255 255 255 / 0.12);
}

/* Accent fills that sit on charcoal use the fill-on-dark shade. */
:is(.is-style-side-card, .vacc-grid__intro, .vacc-tier.is-highlighted) .is-style-checklist li::before {
	background-color: var(--wp--preset--color--primary-fill-on-dark);
}

.vacc-hero .wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
.wp-block-button.is-style-on-dark .wp-block-button__link {
	background-color: var(--wp--preset--color--primary-fill-on-dark);
	color: var(--wp--preset--color--on-primary);
}

.vacc-hero .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover,
.wp-block-button.is-style-on-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--dark);
}

.is-style-side-card .is-style-checklist li strong {
	color: var(--wp--preset--color--base);
}

/* 6. Cards and grids (core/group grid layout) ------------------------------------ */

/* The grid block carries the same gap as its blockGap attribute (1.75rem). WordPress's
   grid layout sizes columns with the block's own blockGap, falling back to 1.2rem, so the
   two values must agree or three columns no longer fit and the grid drops to two. */
.vacc-grid {
	gap: 1.75rem;
}

.wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--custom--shadow-sm);
	overflow: hidden;
}

.vacc-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 0.7.0: only a card with a link lifts (whole card, on hover of the card or focus of its link);
   a keyboard focus also rings the whole card. */
.vacc-card:has(a):hover,
.vacc-card:has(a:focus-visible) {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow);
}

.vacc-card:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--focus);
	outline-offset: 3px;
}

.vacc-card > * {
	margin-block: 0;
}

.vacc-card__image {
	margin: 0;
	overflow: hidden;
}

.vacc-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.vacc-card:has(a):hover .vacc-card__image img {
	transform: scale(1.04);
}

.vacc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.6rem 1.75rem 1.9rem;
}

.vacc-card__body > * {
	margin-block: 0 0.7rem;
}

.vacc-card__body .wp-block-heading {
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}

/* Icon-led cards (3.1.0): the icon in a tinted circle above the title. */
.vacc-card__body > p:has(> .vacc-card__icon) {
	margin-bottom: 1.1rem;
	line-height: 0;
}

.vacc-icon.vacc-card__icon {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0.8rem;
	box-sizing: content-box;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
	color: var(--wp--preset--color--primary-dark);
	vertical-align: middle;
}

.vacc-card__body p:not(.vacc-card__more) {
	color: var(--wp--preset--color--muted);
}

.vacc-card__more {
	margin-top: auto !important;
	margin-bottom: 0 !important;
	padding-top: 0.4rem;
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	font-size: 0.9375rem;
}

.vacc-card__more a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.vacc-card__more a::after {
	content: " \2192";
}

.vacc-card__more a:hover {
	text-decoration: underline;
}

.vacc-grid__intro {
	align-self: stretch;
	border-radius: var(--wp--custom--radius);
	padding: 2.5rem 2.25rem;
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--footer-text);
	border-top: 4px solid var(--wp--preset--color--primary-fill-on-dark);
}

.vacc-grid__intro .wp-block-heading {
	color: var(--wp--preset--color--base);
}

.vacc-grid__intro .wp-block-heading strong {
	color: inherit;
}

.vacc-grid__intro .vacc-index {
	color: var(--wp--preset--color--base);
	opacity: 0.08;
	top: 1.25rem;
	left: 1.6rem;
}

.vacc-grid__intro .is-style-eyebrow {
	color: var(--wp--preset--color--footer-text);
}

.vacc-grid__intro {
	position: relative;
}

/* 7. Service rows (core/columns, style reversed) ----------------------------- */

.vacc-row {
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.vacc-row + .vacc-row {
	margin-top: clamp(3rem, 6vw, 5rem);
}

.vacc-row__image,
.vacc-team__image {
	margin: 0;
}

.vacc-row__image img,
.vacc-team__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--wp--custom--radius-large);
}

/* Composed sections only: on a replica page the child's heading scale applies (same specificity). */
:where(body:not([class*="vacc-family-"])) .vacc-row .wp-block-heading {
	font-size: 1.4rem;
	letter-spacing: 0.03em;
}

@media (min-width: 782px) {
	.wp-block-columns.is-style-reversed {
		flex-direction: row-reverse;
	}
}


/* 8. Brand logo strip ------------------------------------------------------------ */

.vacc-brand-strip {
	background-color: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * The logos group is a core/group with the flex layout (wrap, justify centre). In
 * WordPress that is a wrapping flex row whose items keep their own width, so rows break
 * wherever the logo widths happen to run out (7 logos gave 6 + 1), and a short strip
 * shrink-wraps to its content. Instead, every logo sits in an equal cell whose flex-basis
 * is 1/N of the row minus the gaps, and N is picked from the logo count with the same
 * count selectors core's gallery CSS uses (:first-child:nth-last-child()). The justify
 * centre from the block's own layout centres a shorter last row.
 *
 * Cells per row (logo count: rows):
 *   from 782px, at most 6 a row: 1-6: one row; 7: 4 + 3; 8: 4 + 4; 9: 5 + 4;
 *     10: 5 + 5; 11: 6 + 5; 12: 6 + 6; 13: 5 + 5 + 3; 14: 5 + 5 + 4; 15: 5 + 5 + 5;
 *     16: 6 + 6 + 4.
 *   to 781px, at most 3 a row: 1: 1; 2: 2; otherwise rows of 3, except that when the
 *     count leaves one over (4, 7, 10, 13, 16) the last four logos go two a row, so
 *     7 is 3 + 2 + 2 and 4 is 2 + 2.
 * The gap is set with a two-class selector so it beats WordPress's flex gap rule, and
 * the cell formula reads the same variable, so the two always agree.
 */
.wp-block-group.vacc-logos {
	--vacc-logos-gap-x: 2.5rem;
	--vacc-logos-gap-y: 1.25rem;
	column-gap: var(--vacc-logos-gap-x);
	row-gap: var(--vacc-logos-gap-y);
}

.vacc-logos > .wp-block-image {
	--vacc-logos-cols: 6;
	flex: 0 0 calc((100% - (var(--vacc-logos-cols) - 1) * var(--vacc-logos-gap-x)) / var(--vacc-logos-cols));
	min-width: 0;
	margin: 0;
	text-align: center;
}

@media (min-width: 782px) {
	.vacc-logos > :first-child:nth-last-child(1) { --vacc-logos-cols: 1; }
	.vacc-logos > :first-child:nth-last-child(2),
	.vacc-logos > :first-child:nth-last-child(2) ~ * { --vacc-logos-cols: 2; }
	.vacc-logos > :first-child:nth-last-child(3),
	.vacc-logos > :first-child:nth-last-child(3) ~ * { --vacc-logos-cols: 3; }
	.vacc-logos > :first-child:nth-last-child(4),
	.vacc-logos > :first-child:nth-last-child(4) ~ *,
	.vacc-logos > :first-child:nth-last-child(7),
	.vacc-logos > :first-child:nth-last-child(7) ~ *,
	.vacc-logos > :first-child:nth-last-child(8),
	.vacc-logos > :first-child:nth-last-child(8) ~ * { --vacc-logos-cols: 4; }
	.vacc-logos > :first-child:nth-last-child(5),
	.vacc-logos > :first-child:nth-last-child(5) ~ *,
	.vacc-logos > :first-child:nth-last-child(9),
	.vacc-logos > :first-child:nth-last-child(9) ~ *,
	.vacc-logos > :first-child:nth-last-child(10),
	.vacc-logos > :first-child:nth-last-child(10) ~ *,
	.vacc-logos > :first-child:nth-last-child(13),
	.vacc-logos > :first-child:nth-last-child(13) ~ *,
	.vacc-logos > :first-child:nth-last-child(14),
	.vacc-logos > :first-child:nth-last-child(14) ~ *,
	.vacc-logos > :first-child:nth-last-child(15),
	.vacc-logos > :first-child:nth-last-child(15) ~ * { --vacc-logos-cols: 5; }
}

@media (max-width: 781px) {
	.vacc-logos > .wp-block-image { --vacc-logos-cols: 3; }
	.vacc-logos > :first-child:nth-last-child(1) { --vacc-logos-cols: 1; }
	.vacc-logos > :first-child:nth-last-child(2),
	.vacc-logos > :first-child:nth-last-child(2) ~ * { --vacc-logos-cols: 2; }
	.vacc-logos > :first-child:nth-last-child(3n+4):nth-last-child(-n+4),
	.vacc-logos > :first-child:nth-last-child(3n+4) ~ :nth-last-child(-n+4) { --vacc-logos-cols: 2; }
}

.vacc-logos img {
	height: 56px;
	width: auto;
	max-width: min(200px, 100%);
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.vacc-logos img:hover {
	filter: none;
	opacity: 1;
}

.vacc-brand-strip.is-compact {
	padding-block: var(--wp--preset--spacing--50);
}

.vacc-brand-strip__row {
	gap: 1.5rem 3rem;
	align-items: center;
}

.vacc-brand-strip.is-compact .vacc-section-head {
	margin: 0;
}

/*
 * The compact row is a flex layout with justify space-between. With no heading the
 * logos group is its only child, and space-between puts a single item at the start, so
 * the logos sat bunched at the left. The group now grows to fill the row: alone it
 * spans the full width and its own centre justification applies; beside a heading it
 * takes the rest of the row. On phones it always takes a full line under the heading.
 */
.vacc-brand-strip__row > .vacc-logos {
	flex: 1 1 auto;
}

.vacc-brand-strip.is-compact .vacc-logos img {
	height: 72px;
}

@media (max-width: 781px) {
	.vacc-brand-strip__row > .vacc-logos {
		flex-basis: 100%;
	}
}

@media (max-width: 600px) {
	.wp-block-group.vacc-logos {
		--vacc-logos-gap-x: 1.5rem;
		--vacc-logos-gap-y: 1rem;
	}

	.vacc-logos img,
	.vacc-brand-strip.is-compact .vacc-logos img {
		height: 44px;
	}
}

/* 9. Team ------------------------------------------------------------------------ */

.vacc-team .wp-block-columns {
	align-items: flex-start;
}

.vacc-team__image img {
	aspect-ratio: 4 / 3;
}

.vacc-team__image.is-square img {
	aspect-ratio: 1 / 1;
}

.vacc-caption {
	margin-top: 1.75rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

.vacc-caption strong {
	display: block;
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--custom--heading-font);
	font-weight: var(--wp--custom--heading-weight);
}

.vacc-pull {
	margin-top: 1.5rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--wp--preset--color--primary);
	font-family: var(--wp--custom--heading-font);
	font-weight: var(--wp--custom--heading-weight-light);
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--wp--preset--color--heading);
}

/* 10. Gallery strip ----------------------------------------------------------------- */

/* WordPress lays a gallery out as a wrapping flex row: each figure is 50% wide below 600px
   and 25% wide from 600px for columns-4, and flex-grow:1 stretches the last row to the full
   width. On its own that leaves one tile alone on a row for 5 images at desktop width and for
   3, 5 or 7 images on a phone. The rules below give those counts balanced rows, using the
   :first-child:nth-last-child() count selectors WordPress itself uses for columns-default
   galleries. Counts and rows, desktop / phone:
     2: 2 / 2     3: 3 / 3     4: 4 / 2+2     5: 3+2 / 3+2
     6: 4+2 / 2+2+2     7: 4+3 / 3+2+2     8: 4+4 / 2+2+2+2
   The gap is set here and in the variable WordPress's width formula reads, so they agree. */
.vacc-gallery-strip .wp-block-gallery,
.vacc-gallery-strip .wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: 6px;
	gap: 6px;
}

@media (min-width: 600px) {
	/* 5 images: three on the first row, two on the second */
	.vacc-gallery-strip .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child:nth-last-child(5),
	.vacc-gallery-strip .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child:nth-last-child(5) ~ figure.wp-block-image:not(#individual-image) {
		width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.66667);
	}
}

@media (max-width: 599px) {
	/* Phones (below 600px), odd counts (3, 5, 7): the first three share a row and the rest
	   pair up (3, 3 + 2, 3 + 2 + 2), so no tile is left alone. Even counts keep WordPress's
	   two a row. */
	.vacc-gallery-strip .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2n+3),
	.vacc-gallery-strip .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2n+3) + figure.wp-block-image:not(#individual-image),
	.vacc-gallery-strip .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2n+3) + figure.wp-block-image:not(#individual-image) + figure.wp-block-image:not(#individual-image) {
		width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.66667);
	}
}

/* Large galleries, anywhere (9 or more images). WordPress grows every gallery tile to
   fill its row (flex-grow: 1), so a short last row of a large gallery stretches wider than
   the full rows above it: 26 images in 3 columns end in 2 wide tiles. With 9 or more
   images every tile keeps its column width and a short last row is centred. Both rules
   count with :has(> figure.wp-block-image:nth-child(9)), which is true only when the ninth
   child is an image, so a gallery caption (a figcaption after the images) is not counted
   and an 8-image gallery with a caption keeps the 2 to 8 image behaviour. The gallery strip
   allows at most 8 images, so this reaches galleries in page text. */

.wp-block-gallery.has-nested-images:has(> figure.wp-block-image:nth-child(9)) figure.wp-block-image:not(#individual-image) {
	flex-grow: 0;
}

.wp-block-gallery.has-nested-images:has(> figure.wp-block-image:nth-child(9)) {
	justify-content: center;
}

.vacc-gallery-strip .wp-block-gallery .wp-block-image {
	position: relative;
	overflow: hidden;
}

.vacc-gallery-strip .wp-block-gallery img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.vacc-gallery-strip .wp-block-gallery .wp-block-image::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background-color: var(--wp--preset--color--primary);
	opacity: 0;
	transform: scaleX(0);
	transition: transform 0.25s ease;
}

.vacc-gallery-strip .wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.05);
}

.vacc-gallery-strip .wp-block-gallery .wp-block-image:hover::after {
	opacity: 1;
	transform: scaleX(1);
}

.vacc-gallery-strip .wp-block-gallery .wp-block-image {
	border-radius: var(--wp--custom--radius-small);
}

/* 11. Contact band ------------------------------------------------------------------ */

.vacc-contact-band .wp-block-columns {
	align-items: stretch;
}

.vacc-details {
	margin: 2rem 0;
}

.vacc-details p {
	margin: 0 0 1.25rem;
}

.vacc-details p:empty {
	display: none;
}

.vacc-details .vacc-fact {
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	grid-template-rows: auto auto;
	column-gap: 1rem;
	align-items: center;
}

.vacc-details .vacc-fact .vacc-icon {
	grid-row: 1 / span 2;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0.7rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
	color: var(--wp--preset--color--primary-dark);
}

.vacc-details .vacc-fact:not(:has(.vacc-icon)) {
	grid-template-columns: 1fr;
}

.vacc-details .vacc-label {
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.vacc-details .vacc-fact--phone a {
	font-family: var(--wp--custom--heading-font);
	font-weight: var(--wp--custom--heading-weight);
	font-size: 1.35rem;
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.wp-block-group.is-style-map-box,
.vacc-map-box {
	position: relative;
	min-height: 320px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-large);
	overflow: hidden;
	background:
		repeating-linear-gradient(0deg, transparent 0 38px, rgb(255 255 255 / 0.7) 38px 40px),
		repeating-linear-gradient(90deg, transparent 0 58px, rgb(255 255 255 / 0.7) 58px 60px),
		linear-gradient(135deg, #e9e9e9, #d4d4d4);
}

.vacc-map-box::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 34%;
	width: 30px;
	height: 30px;
	transform: translate(-50%, -50%) rotate(-45deg);
	background-color: var(--wp--preset--color--primary);
	border: 3px solid var(--wp--preset--color--dark);
	border-radius: 50% 50% 50% 0;
}

.vacc-map-card {
	position: relative;
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--footer-text);
	border-radius: var(--wp--custom--radius);
	padding: 1.1rem 1.35rem;
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

.vacc-map-card > * {
	margin-block: 0 0.4rem;
}

.vacc-map-card > :last-child {
	margin-bottom: 0;
}

.vacc-map-card .wp-block-site-title {
	color: var(--wp--preset--color--base);
	font-size: 1rem;
	font-weight: 600;
}

.vacc-map-card a {
	color: var(--wp--preset--color--primary-on-dark);
}

.vacc-form-card {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--wp--custom--radius-large);
	box-shadow: var(--wp--custom--shadow-sm);
}

/* Contact Form 7 (rendered by [vacc_contact_form] inside core/shortcode). The form
   template may wrap fields in .vacc-cf7-row to put two side by side. */
.wpcf7 form p {
	margin: 0 0 1rem;
}

.wpcf7 label {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--heading);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.35rem;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius-small);
}

.wpcf7 textarea {
	min-height: 140px;
	resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: 3px solid var(--wp--preset--color--focus);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--heading);
}

.wpcf7 .wpcf7-submit {
	min-height: 48px;
	padding: 0.8rem 1.6rem;
	border: 0;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}

.wpcf7 .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--primary-deep);
}

.wpcf7 .wpcf7-not-valid-tip {
	color: #b3261e;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

.wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
}

.vacc-cf7-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 520px) {
	.vacc-cf7-row {
		grid-template-columns: 1fr;
	}
}

/* 12. CTA band ------------------------------------------------------------------- */

/* 3.1.0: the page's one near-black band, drawn as a rounded card inside the content width,
   so it stays apart from the dark (charcoal) footer. Call is the accent pill; Quote and the
   secondary link are white outline pills.
   0.8.0: the band reads five tokens (bandSurface, bandText, bandHeading, bandAccent, bandFocus)
   whose fallbacks are the 0.7.0 dark band. The Clean variation turns it into a light tinted
   surface; contract/check.py checks every variation's band pairs for AA. Hover fills with
   bandHeading and writes in bandSurface, so a light band inverts to dark the same way. */
.vacc-cta-band {
	background-color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--50);
}

.vacc-cta-band__row {
	gap: 1.5rem 3rem;
	align-items: center;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
	border-radius: var(--wp--custom--radius-large);
	background-color: var(--wp--custom--band-surface, var(--wp--preset--color--dark));
	color: var(--wp--custom--band-text, var(--wp--preset--color--footer-text));
	--wp--preset--color--focus: var(--wp--custom--band-focus, var(--wp--preset--color--focus-on-dark));
}

.vacc-cta-band .wp-block-heading {
	color: var(--wp--custom--band-heading, var(--wp--preset--color--base));
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
}

.vacc-cta-band p {
	margin: 0.5rem 0 0;
	font-size: 1.0625rem;
}

.vacc-cta-band .wp-block-buttons {
	gap: 0.75rem;
}

.vacc-cta-band .wp-block-button.is-style-dark .wp-block-button__link,
.vacc-cta-band .wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	background-color: var(--wp--custom--band-accent, var(--wp--preset--color--primary-fill-on-dark));
	color: var(--wp--preset--color--on-primary);
}

.vacc-cta-band .wp-block-button.is-style-dark .wp-block-button__link::before {
	content: "";
	width: 1.1rem;
	height: 1.1rem;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/tabler/phone.svg") center / contain no-repeat;
	mask: url("assets/icons/tabler/phone.svg") center / contain no-repeat;
}

.vacc-cta-band .wp-block-button.is-style-dark .wp-block-button__link:hover {
	background-color: var(--wp--custom--band-heading, var(--wp--preset--color--base));
	color: var(--wp--custom--band-surface, var(--wp--preset--color--dark));
}

.vacc-cta-band .wp-block-button:is(.is-style-ghost, .is-style-outline) .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--custom--band-heading, var(--wp--preset--color--base));
	border: 2px solid var(--wp--custom--band-heading, var(--wp--preset--color--base));
}

.vacc-cta-band .wp-block-button:is(.is-style-ghost, .is-style-outline) .wp-block-button__link:hover {
	background-color: var(--wp--custom--band-heading, var(--wp--preset--color--base));
	color: var(--wp--custom--band-surface, var(--wp--preset--color--dark));
}

/* 13. Footer --------------------------------------------------------------------- */

/* 0.7.0: a dark footer (research round 2) on charcoal: brand (logo on a white plate, tagline,
   social, member badge), services, opening hours (a <dl>), contact; then the legal line.
   Four columns from 960px, two from 600px, one below. A column whose shortcode printed
   nothing is dropped. Text pairs: footer-text and base on dark (palette.pairs()). */
.vacc-footer {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--footer-text);
	font-size: 0.9375rem;
}

.vacc-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.vacc-footer a:hover {
	color: var(--wp--preset--color--primary-on-dark);
	text-decoration: underline;
}

/* Links that sit inside a line of text keep an underline (they are not otherwise told apart):
   the ABN link in the legal line and Get directions. */
.vacc-footer .vacc-legal a,
.vacc-footer a.vacc-directions {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.vacc-footer .wp-block-columns.vacc-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
	gap: 2.5rem;
}

.vacc-footer__grid > .wp-block-column:not(:has(*)) {
	display: none;
}

/* The brand and contact columns carry fixed parts (a heading, an empty paragraph), so they
   drop when none of their facts printed. */
.vacc-footer__grid > .vacc-footer__brand:not(:has(img, .vacc-social, .vacc-member-badge, p:not(:empty))),
.vacc-footer__grid > .vacc-footer__contact:not(:has(.vacc-fact, .vacc-directions)) {
	display: none;
}

@media (min-width: 600px) {
	.vacc-footer .wp-block-columns.vacc-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.vacc-footer .wp-block-columns.vacc-footer__grid {
		grid-template-columns: minmax(0, 1.6fr);
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 3rem;
	}
}

.vacc-footer .wp-block-heading {
	color: var(--wp--preset--color--base);
	font-size: 1rem;
	letter-spacing: 0;
	margin: 0 0 1rem;
	font-weight: 600;
}

.vacc-footer p {
	margin: 0 0 0.75rem;
	line-height: 1.55;
}

.vacc-footer p:empty {
	display: none;
}

.vacc-footer .vacc-fact {
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	align-items: start;
}

.vacc-footer .vacc-icon {
	color: var(--wp--preset--color--primary-on-dark);
}

.vacc-footer .vacc-fact .vacc-icon {
	margin: 0.15rem 0 0;
}

/* The logo and the member badge sit on white plates: member artwork is drawn for white. */
.vacc-footer__logo {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius-small);
	line-height: 0;
}

.vacc-footer__logo a:focus-visible {
	outline-offset: calc(1rem + 3px);
}

.vacc-footer__logo img,
.vacc-footer__logo .custom-logo {
	width: auto;
	height: auto;
	max-width: 180px;
	max-height: 56px;
}

/* A footer logo set with vacc_footer_logo: plain (no plate) unless vacc_footer_logo_plate is white. */
.vacc-footer__logo.is-plain {
	padding: 0;
	background-color: transparent;
	border-radius: 0;
}

.vacc-footer__logo.is-plain a:focus-visible {
	outline-offset: 3px;
}

.vacc-footer .vacc-member-badge {
	box-sizing: border-box;
	padding: 0.5rem;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius-small);
}

.vacc-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.vacc-footer__links {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vacc-footer__all a {
	color: var(--wp--preset--color--primary-on-dark);
	font-weight: 600;
}

/* Without a services list the column shows the footer menu instead. */
.vacc-footer__services:has(.vacc-footer__links) .vacc-footer__pages {
	display: none;
}

.vacc-footer .vacc-nav-footer .wp-block-navigation-item__content {
	padding-block: 0.25rem;
}

.vacc-member-badge {
	width: 120px;
	height: auto;
}

/* Opening hours as a definition list ([vacc_hours layout="dl"]). */
.vacc-hours-dl {
	display: grid;
	gap: 0.4rem;
	margin: 0;
}

.vacc-hours-dl__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vacc-hours-dl dt {
	font-weight: 500;
}

.vacc-hours-dl dd {
	margin: 0;
	text-align: right;
}

.vacc-footer .vacc-hours-dl__row {
	border-bottom-color: rgb(255 255 255 / 0.12);
}

.vacc-footer .vacc-hours-dl dd {
	color: var(--wp--preset--color--base);
}

.vacc-hours-note {
	margin-top: 0.75rem;
}

.vacc-footer .vacc-directions {
	display: inline-block;
	margin: 0 0 0.9rem 1.6rem;
	font-weight: 600;
}

.vacc-footer__bottom {
	border-top: 1px solid rgb(255 255 255 / 0.12);
	padding-block: 1.25rem;
	font-size: 0.875rem;
}

.vacc-footer__bottom p {
	margin: 0;
}

/* The legal line: copyright, then the ABN and licence lines when set. */
.vacc-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
}

@media (max-width: 781px) {
	/* The body already clears the phone bottom bar; this keeps air under the legal line. */
	body:has(.vacc-sticky-bar) .vacc-footer__bottom {
		padding-bottom: 2rem;
	}
}

/* Page title (templates/page.html and single.html; composed pages carry their own H1) */

.vacc-page-title {
	padding-bottom: 0;
}

.vacc-page-title .wp-block-post-title {
	margin: 0;
}

/* 404 -------------------------------------------------------------------------- */

.vacc-404 {
	min-height: 40vh;
}

/* 14. Phone bottom bar ([vacc_sticky_bar] in the footer part, phones only) -------------
   Up to four equal buttons: Call, Map and Quote on charcoal with accent icons, then the
   booking button on the accent fill; without a booking button the Quote button takes the
   fill. Each is at least 56px tall and a quarter of 320px wide; with the default
   "Quote" label all four fit on a 390px phone (rendered). A long booking label is cut short with an ellipsis on screen; its full text
   stays the accessible name. */

.vacc-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	background-color: var(--wp--preset--color--dark);
	box-shadow: 0 -4px 16px rgb(0 0 0 / 0.2);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

.vacc-sticky-bar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-width: 0;
	min-height: 56px;
	padding: 0.4rem 0.5rem;
	box-sizing: border-box;
	text-decoration: none;
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	font-size: 0.8125rem;
	line-height: 1.1;
}

.vacc-sticky-bar a:focus-visible {
	outline-offset: -4px;
}

.vacc-sticky-bar .vacc-icon {
	width: 20px;
	height: 20px;
	margin: 0;
	vertical-align: 0;
}

.vacc-sticky-bar__text {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vacc-sticky-bar__call,
.vacc-sticky-bar__map,
.vacc-sticky-bar__quote {
	color: var(--wp--preset--color--base);
}

.vacc-sticky-bar__call .vacc-icon,
.vacc-sticky-bar__map .vacc-icon,
.vacc-sticky-bar__quote .vacc-icon {
	color: var(--wp--preset--color--primary-on-dark);
}

.vacc-sticky-bar__call + .vacc-sticky-bar__map,
.vacc-sticky-bar > :is(.vacc-sticky-bar__call, .vacc-sticky-bar__map) + .vacc-sticky-bar__quote {
	border-left: 1px solid rgb(255 255 255 / 0.18);
}

/* With no booking button the Quote button is last and takes the accent fill. */
.vacc-sticky-bar__quote:last-child {
	background-color: var(--wp--preset--color--primary-fill-on-dark);
	color: var(--wp--preset--color--on-primary);
	border-left: 0;
	/* The ring is drawn inside the button, on its fill. */
	--wp--preset--color--focus: var(--wp--preset--color--on-primary);
}

.vacc-sticky-bar__quote:last-child .vacc-icon {
	color: inherit;
}

.vacc-sticky-bar__cta {
	background-color: var(--wp--preset--color--primary-fill-on-dark);
	color: var(--wp--preset--color--on-primary);
	/* The ring is drawn inside the button, on its fill. */
	--wp--preset--color--focus: var(--wp--preset--color--on-primary);
}

@media (max-width: 781px) {
	body:has(.vacc-sticky-bar) {
		padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	}

	/* With the bottom bar on, the Call and Map strip under the header would repeat it. */
	body:has(.vacc-sticky-bar) .vacc-mobile-bar {
		display: none !important;
	}
}

/* 15. Process steps (the theme numbers them) ------------------------------------------ */

.vacc-steps {
	counter-reset: vacc-step;
	gap: 1.5rem;
}

/* Steps, stats and tiers sit in core/columns so any count fills the row; the card fills its column. */
:is(.vacc-steps, .vacc-tiers) > .wp-block-column > .wp-block-group {
	height: 100%;
	box-sizing: border-box;
}

.vacc-step {
	counter-increment: vacc-step;
	position: relative;
	padding: 2rem 1.75rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--custom--shadow-sm);
}

.vacc-step::before {
	content: counter(vacc-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1.1rem;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--custom--heading-font);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1;
}

.vacc-step > * {
	margin-block: 0 0.6rem;
}

.vacc-step .wp-block-heading {
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}

.vacc-step p {
	color: var(--wp--preset--color--muted);
}

/* 16. Stats row (static figures on charcoal) -------------------------------------------- */

.vacc-stats-row {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--footer-text);
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

.vacc-stats-row .wp-block-heading {
	color: var(--wp--preset--color--base);
}

.vacc-stats-row .wp-block-heading strong {
	color: inherit;
}

.vacc-stats-row .is-style-eyebrow {
	color: var(--wp--preset--color--footer-text);
}

.vacc-stats-row .vacc-index {
	color: var(--wp--preset--color--base);
	opacity: 0.08;
}

.vacc-stats {
	gap: 0;
}

.vacc-stats > .wp-block-column + .wp-block-column {
	border-left: 1px solid rgb(255 255 255 / 0.12);
}

.vacc-stat {
	padding: 1rem 1.5rem;
	text-align: center;
}

.vacc-stat > * {
	margin: 0;
}

.vacc-stat__value {
	font-family: var(--wp--custom--heading-font);
	font-weight: var(--wp--custom--heading-weight);
	font-size: clamp(2.2rem, 4vw, 3.3rem);
	line-height: 1.1;
	color: var(--wp--preset--color--primary-on-dark);
}

.vacc-stat__label {
	margin-top: 0.4rem !important;
	font-size: 0.9375rem;
}

@media (max-width: 781px) {
	.vacc-stats > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid rgb(255 255 255 / 0.12);
	}
}

/* 17. Testimonials (core/quote cards) --------------------------------------------------- */

.vacc-quotes {
	gap: 1.5rem; /* equals the block's blockGap attribute; see .vacc-grid */
}

.wp-block-quote.vacc-quote {
	position: relative;
	margin: 0;
	padding: 2rem 1.75rem 1.75rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--custom--shadow-sm);
	font-style: normal;
	font-size: 1.0625rem;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
}

.wp-block-quote.vacc-quote::before {
	content: "\201C";
	content: "\201C" / "";
	position: absolute;
	top: 0.6rem;
	right: 1.4rem;
	font-family: Georgia, serif;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
}

.vacc-quote p {
	margin: 0 0 1.25rem;
}

.vacc-quote cite {
	display: block;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-style: normal;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.vacc-quote cite strong {
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--custom--heading-font);
	font-size: 1rem;
}

/* Stars: the paragraph text ("Rated 4 out of 5") stays for screen readers; the stars are drawn. */
.vacc-stars {
	--stars: 5;
	width: calc(var(--stars) * 1.15rem);
	height: 1rem;
	margin: 0 0 1rem !important;
	overflow: hidden;
	font-size: 0;
	background-color: var(--wp--preset--color--rating-on-light, var(--wp--preset--color--primary-dark));
	-webkit-mask: url("assets/icons/star.svg") left center / 1rem 1rem repeat-x;
	mask: url("assets/icons/star.svg") left center / 1rem 1rem repeat-x;
	-webkit-mask-size: 1.15rem 1rem;
	mask-size: 1.15rem 1rem;
}

.vacc-stars--1 { --stars: 1; }
.vacc-stars--2 { --stars: 2; }
.vacc-stars--3 { --stars: 3; }
.vacc-stars--4 { --stars: 4; }

/* 18. Appointment ----------------------------------------------------------------------- */

.vacc-appointment .wp-block-columns {
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: flex-start;
}

.vacc-appointment__image {
	margin: 0;
}

.vacc-appointment__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--radius-large);
}

.vacc-next-steps {
	padding: 0.9rem 1.1rem;
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
}

@media (max-width: 781px) {
	.vacc-appointment__image img {
		aspect-ratio: 16 / 10;
	}
}

/* 19. Breakdown band (real 24/7 services only) ------------------------------------------ */

.vacc-breakdown-band {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	border-top: 3px solid var(--wp--preset--color--primary-fill-on-dark);
	padding-block: 1.3rem;
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

.vacc-breakdown-band__row {
	gap: 1rem 2.5rem;
	align-items: center;
}

.vacc-breakdown-band__text {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.vacc-breakdown-band p {
	margin: 0;
}

.vacc-breakdown-band .vacc-icon {
	width: 46px;
	height: 46px;
	padding: 11px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-fill-on-dark);
	color: var(--wp--preset--color--on-primary);
}

.vacc-breakdown-band__label {
	font-family: var(--wp--custom--heading-font);
	font-weight: var(--wp--custom--heading-weight-light);
	font-size: 1.15rem;
}

.vacc-breakdown-band__label strong {
	font-weight: var(--wp--custom--heading-weight);
}

.vacc-breakdown-band__phone a {
	color: var(--wp--preset--color--primary-on-dark);
	font-family: var(--wp--custom--heading-font);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	text-decoration: none;
	white-space: nowrap;
}

.vacc-breakdown-band__phone .vacc-light {
	font-weight: var(--wp--custom--heading-weight-light);
}

/* 20. Price packages ---------------------------------------------------------------------- */

.vacc-tiers {
	gap: 1.5rem;
	align-items: stretch;
}

.vacc-tier {
	display: flex;
	flex-direction: column;
	padding: 2.25rem 2rem;
	position: relative;
}

.vacc-tier > * {
	margin-block: 0 0.75rem;
}

.vacc-tier .wp-block-buttons {
	margin-top: auto;
	margin-bottom: 0;
}

.vacc-tier .wp-block-button,
.vacc-tier .wp-block-button__link {
	width: 100%;
}

.vacc-tier .wp-block-heading {
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}

.vacc-tier__price {
	font-family: var(--wp--custom--heading-font);
	font-weight: var(--wp--custom--heading-weight);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	line-height: 1.1;
	color: var(--wp--preset--color--heading);
}

.vacc-tier__note {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.vacc-tier__badge {
	align-self: flex-start;
	padding: 0.3rem 0.7rem;
	background-color: var(--wp--preset--color--primary-fill-on-dark);
	color: var(--wp--preset--color--on-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	border-radius: var(--wp--custom--radius-pill);
}

.wp-block-group.vacc-tier.is-highlighted {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--footer-text);
	border-color: var(--wp--preset--color--dark);
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

.vacc-tier.is-highlighted .wp-block-heading,
.vacc-tier.is-highlighted .is-style-checklist li strong {
	color: var(--wp--preset--color--base);
}

.vacc-tier.is-highlighted .vacc-tier__price {
	color: var(--wp--preset--color--primary-on-dark);
}

.vacc-tier.is-highlighted .vacc-tier__note {
	color: var(--wp--preset--color--footer-text);
}

@media (min-width: 782px) {
	.vacc-tier.is-highlighted {
		transform: translateY(-10px);
		box-shadow: var(--wp--custom--shadow);
	}
}

/* 21. Shared 3.1.0 pieces ------------------------------------------------------------ */

/* A link styled as a pill button ([vacc_map_link class="vacc-btn"] and similar). */
a.vacc-btn,
.vacc-btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	text-decoration: none;
}

a.vacc-btn:hover,
.vacc-btn a:hover {
	background-color: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--on-primary);
}

a.vacc-btn .vacc-icon {
	margin: 0;
	color: inherit;
}

/* Call buttons carry a phone icon drawn from the Tabler file. */
.vacc-btn-call .wp-block-button__link::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/tabler/phone.svg") center / contain no-repeat;
	mask: url("assets/icons/tabler/phone.svg") center / contain no-repeat;
}

/* Facts with a tinted icon circle, label above value (hero panel, location). */
:is(.vacc-hero-split__panel, .vacc-location__facts) p {
	margin: 0 0 1.25rem;
}

:is(.vacc-hero-split__panel, .vacc-location__facts) p:empty {
	display: none;
}

:is(.vacc-hero-split__panel, .vacc-location__facts) .vacc-fact {
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	column-gap: 0.9rem;
	align-items: start;
}

:is(.vacc-hero-split__panel, .vacc-location__facts) .vacc-fact .vacc-icon {
	grid-row: 1 / span 2;
	width: 1.35rem;
	height: 1.35rem;
	margin: 0;
	padding: 0.7rem;
	box-sizing: content-box;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
	color: var(--wp--preset--color--primary-dark);
}

:is(.vacc-hero-split__panel, .vacc-location__facts) .vacc-label {
	display: block;
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

:is(.vacc-hero-split__panel, .vacc-location__facts) .vacc-value {
	grid-column: 2;
	color: var(--wp--preset--color--heading);
}

:is(.vacc-hero-split__panel, .vacc-location__facts) .vacc-fact--phone a {
	font-family: var(--wp--custom--heading-font);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

/* [vacc_hours layout="rows"]: a two-column table of days and times. */
.vacc-hours-rows {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.3rem 1.5rem;
	margin-top: 0.2rem;
}

.vacc-hours-row {
	display: contents;
}

.vacc-hours-day {
	font-weight: 600;
	color: var(--wp--preset--color--heading);
}

.vacc-hours-time {
	color: var(--wp--preset--color--ink);
}

.vacc-hours-row > .vacc-hours-day:only-child {
	grid-column: 1 / -1;
	font-weight: 400;
}

/* 22. Split hero (hero-split) ----------------------------------------------------------- */

.vacc-hero-split {
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.vacc-hero-split__row {
	gap: clamp(2rem, 5vw, 4.5rem);
}

.vacc-hero-split h1.wp-block-heading {
	margin: 0;
	font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.vacc-hero-split .vacc-lead {
	max-width: 36rem;
	margin: 1.25rem 0 0;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	color: var(--wp--preset--color--ink);
}

.vacc-actions {
	gap: 0.75rem;
	margin-top: 2rem;
}

.vacc-hero-split .is-style-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
}

.vacc-hero-split .is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

/* The trust list: short facts with a tick, a star for the rating. */
.vacc-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
}

.vacc-trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.vacc-trust li::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: url("assets/icons/tabler/shield-check.svg") center / contain no-repeat;
	mask: url("assets/icons/tabler/shield-check.svg") center / contain no-repeat;
}

.vacc-trust li.vacc-trust__rating::before {
	background-color: var(--wp--preset--color--rating-on-light, var(--wp--preset--color--primary-dark));
	-webkit-mask-image: url("assets/icons/star.svg");
	mask-image: url("assets/icons/star.svg");
}

.vacc-trust li.vacc-trust__years::before {
	-webkit-mask-image: url("assets/icons/tabler/award.svg");
	mask-image: url("assets/icons/tabler/award.svg");
}

.vacc-trust li.vacc-trust__member::before {
	-webkit-mask-image: url("assets/icons/tabler/certificate.svg");
	mask-image: url("assets/icons/tabler/certificate.svg");
}

.vacc-trust li.vacc-trust__area::before {
	-webkit-mask-image: url("assets/icons/tabler/map-pin.svg");
	mask-image: url("assets/icons/tabler/map-pin.svg");
}

.vacc-trust strong {
	color: var(--wp--preset--color--heading);
}

.vacc-hero-split__image {
	margin: 0;
}

.vacc-hero-split__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius-large);
	box-shadow: var(--wp--custom--shadow);
}

/* No photo: a white facts panel with a large icon. */
.vacc-hero-split__panel {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--wp--custom--radius-large);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow);
}

.vacc-hero-split__panel > p:first-child {
	margin-bottom: 1.5rem;
	line-height: 0;
}

.vacc-icon.vacc-panel-icon {
	width: 2.25rem;
	height: 2.25rem;
	padding: 1rem;
	box-sizing: content-box;
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.vacc-hero-split__panel > p:last-child {
	margin-bottom: 0;
}

@media (max-width: 781px) {
	.vacc-actions > .wp-block-button {
		flex: 1 1 100%;
	}

	.vacc-actions > .wp-block-button .wp-block-button__link {
		width: 100%;
	}

	.vacc-hero-split__image img {
		aspect-ratio: 16 / 10;
	}

	.vacc-trust {
		gap: 0.5rem 1.25rem;
	}
}

/* 23. Trust strip ---------------------------------------------------------------------- */

.vacc-trust-strip {
	padding-block: 1.1rem;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vacc-trust-strip__row {
	gap: 0.6rem 1rem;
	align-items: center;
}

.vacc-trust-strip .vacc-trust {
	justify-content: center;
	gap: 0.6rem;
	margin: 0;
}

.vacc-trust-strip .vacc-trust li,
.vacc-trust-strip__row > p {
	min-height: 40px;
	padding: 0.4rem 0.95rem;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--tint);
}

.vacc-trust-strip__row > p {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-size: 0.9375rem;
}

.vacc-trust-strip__row > p:empty {
	display: none;
}

.vacc-trust__phone a {
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.vacc-trust__phone a:hover {
	text-decoration: underline;
}

/* 24. Location and hours --------------------------------------------------------------- */

.vacc-location__row {
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.vacc-location__info .vacc-intro {
	margin: 1rem 0 0;
	color: var(--wp--preset--color--muted);
}

.vacc-location__facts {
	margin: 2rem 0 1.75rem;
}

.vacc-location__image {
	margin: 0;
}

.vacc-location__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius-large);
}

.vacc-location .vacc-map-box {
	min-height: 360px;
}

/* 25. FAQ (core/details) --------------------------------------------------------------- */

.vacc-faq {
	background-color: var(--wp--preset--color--tint);
}

.vacc-faq__list {
	max-width: 820px;
	margin-inline: auto;
}

.wp-block-details.vacc-faq__item {
	margin: 0 0 0.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--base);
}

.vacc-faq__item[open] {
	box-shadow: var(--wp--custom--shadow-sm);
}

.vacc-faq__item summary {
	position: relative;
	display: block;
	min-height: 44px;
	padding: 1.1rem 3.5rem 1.1rem 1.4rem;
	box-sizing: border-box;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--wp--preset--color--heading);
	border-radius: var(--wp--custom--radius);
}

.vacc-faq__item summary::-webkit-details-marker {
	display: none;
}

/* The chevron: a tinted circle with a turned corner, rotated when the row is open. */
.vacc-faq__item summary::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: -0.4rem;
	border-right: 2px solid var(--wp--preset--color--primary-dark);
	border-bottom: 2px solid var(--wp--preset--color--primary-dark);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.vacc-faq__item[open] summary::after {
	margin-top: -0.1rem;
	transform: rotate(-135deg);
}

.vacc-faq__item summary:hover {
	color: var(--wp--preset--color--primary-dark);
}

.vacc-faq__item summary:focus-visible {
	outline-offset: -3px;
}

.vacc-faq__item > :not(summary) {
	margin: 0;
	padding: 0 1.4rem 1.25rem;
	color: var(--wp--preset--color--ink);
}

/* 26. Certifications -------------------------------------------------------------------- */

.vacc-certifications {
	padding-block: var(--wp--preset--spacing--50);
}

/* No badge image printed (no badges, and [vacc_member_badge] found no badge URL): hide the
   section rather than show a heading over nothing. */
.vacc-certifications:not(:has(img)) {
	display: none;
}

.vacc-badges {
	gap: 1rem;
}

.vacc-badge,
.vacc-badges > p {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 11rem;
	min-height: 8.5rem;
	margin: 0;
	padding: 1.1rem 1rem;
	box-sizing: border-box;
	text-align: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow-sm);
}

.vacc-badges > p:empty {
	display: none;
}

.vacc-badge > * {
	margin: 0;
}

.vacc-badge__image img,
.vacc-badges img.vacc-member-badge {
	display: block;
	width: auto;
	max-width: 100%;
	height: 4.5rem;
	object-fit: contain;
}

.vacc-badge__label {
	margin-top: 0.6rem !important;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 520px) {
	.vacc-badge,
	.vacc-badges > p {
		width: calc(50% - 0.5rem);
	}
}

/* 27. Reviews: the overall rating line ----------------------------------------------------- */

.vacc-rating-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0.5rem 1.1rem;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow-sm);
	color: var(--wp--preset--color--ink);
}

.vacc-section-head.is-centered > .vacc-rating-summary {
	max-width: none;
}

.vacc-rating-summary::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	background-color: var(--wp--preset--color--rating-on-light, var(--wp--preset--color--primary-dark));
	-webkit-mask: url("assets/icons/star.svg") center / contain no-repeat;
	mask: url("assets/icons/star.svg") center / contain no-repeat;
}

.vacc-rating-summary strong {
	color: var(--wp--preset--color--heading);
	font-size: 1.125rem;
}

/* 28. Contract 3.3.0 sections and variants (v0.8.0) -----------------------------------
   Each rule below applies only to markup that is new in 3.3.0 (a new class, including
   input.vacc-photo for the CF7 photo field, or a new section), so a 3.2.0 page renders exactly as before. Colours come from palette roles or
   the band tokens (contract/check.py checks the pairs); every new-token read keeps its
   0.7.0 fallback. */

/* Text-first hero (hero-split with text_only): no photo, no panel; centred copy. */
.vacc-hero-split.is-text-only {
	padding-block: clamp(3rem, 8vw, 6.5rem);
	text-align: center;
}

.vacc-hero-split.is-text-only .vacc-hero-split__row {
	justify-content: center;
}

.vacc-hero-split.is-text-only .vacc-hero-split__copy {
	flex: 0 1 50rem;
	max-width: 50rem;
}

.vacc-hero-split.is-text-only h1.wp-block-heading {
	font-size: clamp(2.35rem, 1.5rem + 3.2vw, 3.9rem);
}

.vacc-hero-split.is-text-only .vacc-lead {
	margin-inline: auto;
}

.vacc-hero-split.is-text-only :is(.vacc-actions, .vacc-trust) {
	justify-content: center;
}

/* Services as a compact icon list (service-cards with as_list). */
.vacc-service-cards.is-list .vacc-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
	gap: 1rem;
}

.vacc-service-cards.is-list .vacc-grid__intro {
	grid-column: 1 / -1;
}

.vacc-service-cards.is-list .vacc-card__image {
	display: none;
}

.vacc-service-cards.is-list .vacc-card__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	column-gap: 1.1rem;
	padding: 1.25rem 1.4rem;
}

.vacc-service-cards.is-list .vacc-card__body > * {
	grid-column: 2;
	margin: 0 0 0.3rem;
}

.vacc-service-cards.is-list .vacc-card__body > p:has(> .vacc-card__icon) {
	grid-column: 1;
	grid-row: 1 / span 3;
	margin: 0;
}

.vacc-service-cards.is-list .vacc-icon.vacc-card__icon {
	width: 1.4rem;
	height: 1.4rem;
	padding: 0.7rem;
}

.vacc-service-cards.is-list .vacc-card__body .wp-block-heading {
	font-size: 1.0625rem;
}

.vacc-service-cards.is-list .vacc-card__body p:not(.vacc-card__more) {
	font-size: 0.9375rem;
	line-height: 1.5;
}

.vacc-service-cards.is-list .vacc-card__more {
	margin-top: 0.2rem !important;
	padding-top: 0;
	font-size: 0.875rem;
}

/* Offer cards (offer-cards): 1 to 3 priced offers, centred. */
.vacc-offers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 22rem));
	justify-content: center;
	gap: 1.5rem;
}

.wp-block-group.vacc-offer {
	display: flex;
	flex-direction: column;
	padding: 2rem 1.9rem;
	border-top: 4px solid var(--wp--preset--color--primary);
}

.vacc-offer > * {
	margin-block: 0 0.6rem;
}

.vacc-offer .wp-block-heading {
	font-size: 1.125rem;
}

.vacc-offer__value {
	font-family: var(--wp--custom--heading-font);
	font-weight: var(--wp--custom--heading-weight);
	font-size: clamp(2.2rem, 1.8rem + 1.4vw, 2.9rem);
	line-height: 1.05;
	letter-spacing: var(--wp--custom--heading-letter-spacing, -0.01em);
	text-transform: var(--wp--custom--heading-transform, none);
	color: var(--wp--preset--color--heading);
}

.vacc-offer__terms,
.vacc-offer__valid {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

.vacc-offer__valid {
	font-weight: 600;
}

.vacc-offer .wp-block-buttons {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 0.75rem;
}

.vacc-offer .wp-block-button,
.vacc-offer .wp-block-button__link {
	width: 100%;
}

/* 24/7 notice ([vacc_emergency], first in every composed header part; option
   vacc_emergency_247). A calm tinted strip, not an alarm colour: label, phone, area. */
.vacc-emergency {
	display: block;
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
	color: var(--wp--preset--color--heading);
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 0.875rem;
	line-height: 1.4;
}

.vacc-emergency__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.75rem;
	max-width: 1200px;
	margin-inline: auto;
	padding: 0.5rem var(--wp--custom--gutter);
	box-sizing: content-box;
}

.vacc-emergency .vacc-icon {
	color: var(--wp--preset--color--primary-dark);
}

.vacc-emergency__label,
.vacc-emergency__phone {
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
}

.vacc-emergency a.vacc-emergency__phone {
	color: var(--wp--preset--color--heading);
	font-weight: 700;
	white-space: nowrap;
	text-decoration: underline;
}

.vacc-emergency__area {
	color: var(--wp--preset--color--ink);
}

.vacc-emergency__area::before {
	content: "\00b7";
	content: "\00b7" / "";
	margin-right: 0.75rem;
}

/* --vacc-emergency-h is a fixed estimate of the notice height (one line at 38px); it is not
   measured, so a label that wraps on a very narrow screen can leave the anchor a little short. */
html:has(.vacc-emergency) {
	scroll-padding-top: calc(var(--vacc-scroll-top) + var(--vacc-emergency-h, 38px) + var(--wp-admin--admin-bar--height, 0px));
}

@media (max-width: 781px) {
	.vacc-emergency__area {
		display: none;
	}
}

/* Breakdown band: the optional area line under the label (3.3.0 slot area). */
.vacc-breakdown-band__text:has(> .vacc-breakdown-band__area) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 1rem;
}

.vacc-breakdown-band__text:has(> .vacc-breakdown-band__area) > p:first-child {
	grid-row: 1 / span 2;
}

.vacc-breakdown-band p.vacc-breakdown-band__area {
	margin-top: 0.15rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--footer-text);
}

/* Before and after (before-after). Without assets/js/before-after.js (or under reduced
   motion, where the script does nothing) each pair shows side by side with its labels. */
.vacc-ba {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
	gap: 2.25rem 1.75rem;
}

.vacc-ba:has(> .vacc-ba__item:only-child) {
	max-width: 960px;
}

.vacc-ba__item > * {
	margin-block: 0;
}

.vacc-ba__pair {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.vacc-ba__pair .wp-block-image {
	position: relative;
	margin: 0;
}

.vacc-ba__pair img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius-large);
}

.vacc-ba__pair .wp-element-caption {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	font-size: 0.8125rem;
	line-height: 1.4;
}

p.vacc-ba__caption {
	margin-top: 0.85rem;
	text-align: center;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

.vacc-ba__pair.is-slider {
	--vacc-ba: 50%;
	grid-template-columns: 1fr;
	gap: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius-large);
}

.vacc-ba__pair.is-slider > .wp-block-image {
	grid-area: 1 / 1;
}

.vacc-ba__pair.is-slider img {
	border-radius: 0;
}

.vacc-ba__pair.is-slider > .vacc-ba__after {
	clip-path: inset(0 0 0 var(--vacc-ba));
}

.vacc-ba__pair.is-slider > .vacc-ba__after .wp-element-caption {
	left: auto;
	right: 0.75rem;
}

/* The divider and its handle; the range input lies over the photos, transparent. */
.vacc-ba__pair.is-slider::before,
.vacc-ba__pair.is-slider::after {
	position: absolute;
	left: var(--vacc-ba);
	z-index: 2;
	pointer-events: none;
	transform: translateX(-50%);
}

.vacc-ba__pair.is-slider::before {
	content: "";
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 0 0 1px var(--wp--preset--color--dark);
}

.vacc-ba__pair.is-slider::after {
	content: "\2039\2003\203A";
	content: "\2039\2003\203A" / "";
	top: 50%;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: -1.375rem;
	border: 2px solid var(--wp--preset--color--dark);
	border-radius: 50%;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--dark);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
}

.vacc-ba__range {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	touch-action: pan-y;
}

/* Touch screens: a vertical swipe on the photos scrolls the page (pan-y above), and only a
   strip across the middle, around the handle, takes a horizontal drag. */
@media (pointer: coarse) {
	.vacc-ba__range {
		inset: 50% 0 auto;
		height: 3.5rem;
		transform: translateY(-50%);
	}
}

.vacc-ba__pair.is-slider:has(> .vacc-ba__range:focus-visible) {
	outline: 3px solid var(--wp--preset--color--focus);
	outline-offset: 3px;
}

/* Browsers without :has() drop the rule above: ring the pair while the slider has focus. */
@supports not selector(:has(*)) {
	.vacc-ba__pair.is-slider:focus-within {
		outline: 3px solid var(--wp--preset--color--focus);
		outline-offset: 3px;
	}
}

/* Stats as the page band (stats-row with band): the variation's band surface and colours. */
.vacc-stats-row.is-band {
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
	background-color: var(--wp--custom--band-surface, var(--wp--preset--color--dark));
	color: var(--wp--custom--band-text, var(--wp--preset--color--footer-text));
	--wp--preset--color--focus: var(--wp--custom--band-focus, var(--wp--preset--color--focus-on-dark));
}

.vacc-stats-row.is-band .wp-block-heading,
.vacc-stats-row.is-band .vacc-stat__value {
	color: var(--wp--custom--band-heading, var(--wp--preset--color--base));
}

.vacc-stats-row.is-band .is-style-eyebrow {
	color: inherit;
}

.vacc-stats-row.is-band .vacc-stats > .wp-block-column + .wp-block-column {
	border-color: color-mix(in srgb, currentColor 25%, transparent);
}

.vacc-stats-row.is-band .vacc-stat__value {
	font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.6rem);
	letter-spacing: var(--wp--custom--heading-letter-spacing, -0.01em);
}

.vacc-stats-row.is-band .vacc-stat__value::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 4px;
	margin: 0 auto 0.9rem;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--custom--band-accent, var(--wp--preset--color--primary-fill-on-dark));
}

.vacc-stats-row.is-band .vacc-stat__label,
.vacc-stats-row.is-band .vacc-intro,
.vacc-stats-row.is-band .vacc-section-head .vacc-intro {
	color: inherit;
}

.vacc-stats-row.is-band .vacc-stat__label {
	font-size: 1rem;
}

/* Owner band (team with owner): one person, a portrait beside a short bio. The portrait is
   round in the pill looks and follows radiusPill (square-ish in Bold, Clean and Classic). */
.vacc-team.is-owner {
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
}

.vacc-team.is-owner .wp-block-columns {
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.vacc-team.is-owner .wp-block-columns > .wp-block-column:first-child {
	flex: 0 0 clamp(12rem, 24vw, 17rem) !important;
	text-align: center;
}

.vacc-team.is-owner .vacc-team__image img {
	aspect-ratio: 1 / 1;
	border-radius: var(--wp--custom--radius-pill);
	box-shadow: var(--wp--custom--shadow);
}

.vacc-team.is-owner .vacc-caption {
	margin-top: 1.25rem;
	font-size: 1rem;
}

.vacc-team.is-owner .vacc-caption strong {
	font-size: 1.25rem;
}

@media (max-width: 781px) {
	.vacc-team.is-owner .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}

	.vacc-team.is-owner .vacc-team__image {
		max-width: 14rem;
		margin-inline: auto;
	}
}

/* Contact Form 7 photo field (a quote form with photos): an outline pill button inside a
   dashed drop area, and a small helper line (.vacc-field-help) under any field. Every file
   rule is scoped to input.vacc-photo (the builder adds class:vacc-photo to its CF7 file tag),
   so a file field without that class is not restyled. */
.wpcf7 input.vacc-photo[type="file"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0.45rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--base);
	border: 1px dashed var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius-small);
	cursor: pointer;
}

.wpcf7 input.vacc-photo[type="file"]::file-selector-button {
	min-height: 38px;
	margin-right: 0.85rem;
	padding: 0.45rem 1.1rem;
	border: 2px solid var(--wp--preset--color--heading);
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
}

.wpcf7 input.vacc-photo[type="file"]:hover::file-selector-button {
	background-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

.vacc-field-help {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* 29. Contract 3.3.0 sections, unit 2 (v0.8.0) --------------------------------------
   Proof strip, symptom picker, marque wall, service areas, heritage timeline. As in section 28,
   every rule applies only to markup new in 3.3.0, colours come from palette roles that
   contract/check.py checks, and token reads keep their 0.7.0 fallback. */

/* Proof strip (trust-strip with proof): an icon tile and short text per fact, one row from
   960px, two columns below. */
.vacc-trust-strip.is-proof {
	padding-block: clamp(1.25rem, 3vw, 1.75rem);
}

.vacc-trust-strip.is-proof .vacc-trust {
	display: grid;
	flex: 1 1 100%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 1rem 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.35;
}

/* A block, not a flex row, so "Rated <strong>4.8</strong> out of 5" stays one run of text; the
   padding centres one line on the 2.75rem tile, and the tile centres on longer text. */
.vacc-trust-strip.is-proof .vacc-trust li {
	position: relative;
	z-index: 0;
	display: block;
	min-height: 0;
	padding: calc((2.75rem - 1.35em) / 2) 0 calc((2.75rem - 1.35em) / 2) 3.4rem;
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--ink);
}

.vacc-trust-strip.is-proof .vacc-trust li::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	z-index: -1;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: -1.375rem;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
}

.vacc-trust-strip.is-proof .vacc-trust li::before {
	position: absolute;
	top: 50%;
	left: 0.75rem;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: -0.625rem;
}

.vacc-trust li.vacc-trust__licence::before {
	-webkit-mask-image: url("assets/icons/tabler/clipboard-check.svg");
	mask-image: url("assets/icons/tabler/clipboard-check.svg");
}

.vacc-trust li.vacc-trust__warranty::before {
	-webkit-mask-image: url("assets/icons/tabler/shield-check.svg");
	mask-image: url("assets/icons/tabler/shield-check.svg");
}

@media (max-width: 600px) {
	.vacc-trust-strip.is-proof .vacc-trust {
		gap: 0.75rem 1rem;
		font-size: 0.875rem;
	}

	.vacc-trust-strip.is-proof .vacc-trust li {
		padding: calc((2.25rem - 1.35em) / 2) 0 calc((2.25rem - 1.35em) / 2) 2.85rem;
	}

	.vacc-trust-strip.is-proof .vacc-trust li::after {
		width: 2.25rem;
		height: 2.25rem;
		margin-top: -1.125rem;
	}

	.vacc-trust-strip.is-proof .vacc-trust li::before {
		left: 0.5625rem;
		width: 1.125rem;
		height: 1.125rem;
		margin-top: -0.5625rem;
	}
}

@media (min-width: 960px) {
	.vacc-trust-strip.is-proof .vacc-trust {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}

/* Symptom picker (symptom-picker): question cards; the whole card is the service link. */
.vacc-symptoms__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

@media (min-width: 600px) {
	.vacc-symptoms__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.vacc-symptoms__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vacc-symptoms__grid:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wp-block-group.vacc-symptom {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.6rem 1.6rem;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.vacc-symptom > * {
	margin-block: 0 0.5rem;
}

.vacc-symptom > p:has(> .vacc-symptom__icon) {
	margin-bottom: 0.9rem;
	line-height: 0;
}

.vacc-icon.vacc-symptom__icon {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0.7rem;
	box-sizing: content-box;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
	color: var(--wp--preset--color--primary-dark);
}

.vacc-symptom .wp-block-heading {
	font-size: 1.1875rem;
}

p.vacc-symptom__text {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

p.vacc-symptom__link {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 0.6rem;
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
}

.vacc-symptom__link a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.vacc-symptom__link a::after {
	content: "\00a0\2192";
	content: "\00a0\2192" / "";
}

/* The link covers the card, so the whole card is one target. */
.vacc-symptom__link a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vacc-symptom:hover {
	border-color: var(--wp--preset--color--primary-dark);
	box-shadow: var(--wp--custom--shadow);
}

.vacc-symptom:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--focus);
	outline-offset: 3px;
}

/* Phones: the icon sits beside the text, so six cards stay short. */
@media (max-width: 599px) {
	.wp-block-group.vacc-symptom {
		padding: 1.15rem 1.25rem 1.25rem;
	}

	.wp-block-group.vacc-symptom:has(> p > .vacc-symptom__icon) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-content: start;
		column-gap: 1rem;
	}

	.vacc-symptom:has(> p > .vacc-symptom__icon) > * {
		grid-column: 2;
	}

	.vacc-symptom > p:has(> .vacc-symptom__icon) {
		grid-column: 1;
		grid-row: 1 / span 3;
		margin: 0;
	}

	.vacc-symptom__link {
		padding-top: 0.25rem;
	}
}

/* Marque wall (marque-wall): the makes the member services as plain tiles. */
.vacc-marque-wall .vacc-marques {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.vacc-marques > .vacc-marque {
	display: flex;
	flex: 0 1 10.5rem;
	align-items: center;
	justify-content: center;
	min-height: 4.5rem;
	margin: 0;
	padding: 0.75rem 1rem;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--custom--heading-font);
	font-weight: var(--wp--custom--heading-weight);
	font-size: 1.0625rem;
	line-height: 1.2;
	letter-spacing: var(--wp--custom--heading-letter-spacing, -0.01em);
	text-transform: var(--wp--custom--heading-transform, none);
	text-align: center;
	overflow-wrap: anywhere;
}

.vacc-marque img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 2.75rem;
	object-fit: contain;
}

@media (max-width: 600px) {
	.vacc-marque-wall .vacc-marques {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.vacc-marques > .vacc-marque {
		min-height: 3.25rem;
		padding: 0.5rem 0.4rem;
		font-size: 0.875rem;
	}

	.vacc-marque img {
		max-height: 2rem;
	}
}

/* Service areas (service-areas): chips that wrap, never a sideways scroll. */
.vacc-service-areas .vacc-areas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	max-width: 58rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.vacc-areas > li {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 0.4rem 1rem;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius-pill);
	background-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--heading);
	font-size: 0.9375rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.vacc-areas > li a {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.vacc-areas > li a:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus);
	outline-offset: 3px;
}

.wp-block-group.vacc-areas__links {
	gap: 0.75rem 1.5rem;
	margin-top: 2rem;
	align-items: center;
}

.vacc-areas__links > p {
	margin: 0;
}

.vacc-areas__links:not(:has(a)) {
	display: none;
}

a.vacc-areas__map {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

a.vacc-areas__map .vacc-icon {
	margin: 0;
	color: inherit;
}

/* Heritage timeline (heritage-timeline): a vertical rail with dated stops; one row from
   960px when there are 2 to 4 events (where :has() runs). */
.vacc-timeline__list {
	position: relative;
	display: grid;
	gap: 1.75rem;
	max-width: 46rem;
	margin-inline: auto;
	padding-left: 2.25rem;
}

.vacc-timeline__list::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0.625rem;
	width: 2px;
	background-color: var(--wp--preset--color--line);
}

.vacc-timeline__item {
	position: relative;
}

.vacc-timeline__item::before {
	content: "";
	position: absolute;
	top: 0.2rem;
	left: -2.25rem;
	width: 1.375rem;
	height: 1.375rem;
	box-sizing: border-box;
	border: 3px solid var(--wp--preset--color--primary-dark);
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
}

.vacc-timeline__item > * {
	margin-block: 0;
}

p.vacc-timeline__year {
	margin-bottom: 0.3rem;
	font-family: var(--wp--custom--heading-font);
	font-weight: var(--wp--custom--heading-weight);
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: var(--wp--custom--heading-letter-spacing, -0.01em);
	font-variant-numeric: lining-nums;
	color: var(--wp--preset--color--primary-dark);
}

.vacc-timeline__item .wp-block-heading {
	font-size: 1.1875rem;
}

p.vacc-timeline__text {
	margin-top: 0.4rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

@media (min-width: 960px) {
	.vacc-timeline__list:not(:has(> :nth-child(5))) {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: 2rem;
		max-width: none;
		padding-top: 2.5rem;
		padding-left: 0;
	}

	.vacc-timeline__list:not(:has(> :nth-child(5)))::before {
		top: 0.625rem;
		right: 0;
		bottom: auto;
		left: 0;
		width: auto;
		height: 2px;
	}

	.vacc-timeline__list:not(:has(> :nth-child(5))) > .vacc-timeline__item::before {
		top: -2.5rem;
		left: 0;
	}
}

/* Reduced motion ------------------------------------------------------------------
   Visitors who ask for less motion get no hover lifts, zooms or slides. The accent
   lines still appear on hover and focus, without the animation. */

/* Narrow phones: the facts and hours grids may shrink, and a long time string wraps instead of
   pushing the panel wider than the screen. */
@media (max-width: 480px) {
	:is(.vacc-hero-split__panel, .vacc-location__facts) .vacc-fact {
		grid-template-columns: 2.75rem minmax(0, 1fr);
	}
	.vacc-hours-rows {
		grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
		gap: .3rem .75rem;
	}
	.vacc-hours-time {
		overflow-wrap: anywhere;
	}
	.vacc-hero-split h1 {
		overflow-wrap: break-word;
	}
}

/* 0.7.0: section headings break into even lines (composed pages; the replica keeps its own). */
body:not([class*="vacc-family-"]) :is(h1, h2).wp-block-heading {
	text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

	/* Two rules: a browser without :has() drops the whole first list, not the second. */
	.vacc-card:has(a):hover,
	.vacc-card:has(a:focus-visible),
	.vacc-card:has(a):hover .vacc-card__image img {
		transform: none;
	}

	.vacc-gallery-strip .wp-block-gallery .wp-block-image:hover img {
		transform: none;
	}
}

/* 30. Contract 3.4.0: per-style switches (v0.9.0) ------------------------------------
   functions.php adds body class vacc-style-<slug> on a composed site whose merged settings carry
   custom.styleName (every styles/*.json sets it; theme mod vacc_style is the fallback). Replica
   (family) sites and sites with no variation get no class, so nothing below applies to them and
   they render as 0.8.0. Every rule here is gated by that class or by an is-surface-* class the
   builder writes (the body rule below only saves custom properties the dark surface reads), and
   reads palette roles only (contract/check.py checks both). */

/* The header under a style reads the header tokens. Each fallback is the 0.7.0 value and only
   Bold changes them (a dark header), so Workshop, Friendly, Clean and Classic draw the 0.7.0
   header. The phone menu overlay keeps its own dark colours and on-dark ring. */
body[class*="vacc-style-"] .vacc-header {
	background-color: var(--wp--custom--header-surface, rgb(255 255 255 / 0.96));
	color: var(--wp--custom--header-text, var(--wp--preset--color--heading));
	border-bottom-color: var(--wp--custom--header-line, var(--wp--preset--color--line));
}

body[class*="vacc-style-"] .vacc-header .vacc-nav:not(.vacc-nav--mobile),
body[class*="vacc-style-"] .vacc-header .vacc-nav:not(.vacc-nav--mobile) a,
body[class*="vacc-style-"] .vacc-header .vacc-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--custom--header-text, var(--wp--preset--color--heading));
}

body[class*="vacc-style-"] .vacc-header .vacc-nav:not(.vacc-nav--mobile) .wp-block-navigation-item__content:hover,
body[class*="vacc-style-"] .vacc-header .vacc-nav:not(.vacc-nav--mobile) .current-menu-item > .wp-block-navigation-item__content,
body[class*="vacc-style-"] .vacc-header .vacc-nav:not(.vacc-nav--mobile) [aria-current="page"] {
	color: var(--wp--custom--header-accent, var(--wp--preset--color--primary-dark));
}

body[class*="vacc-style-"] .vacc-header .vacc-nav:not(.vacc-nav--mobile) .current-menu-item > .wp-block-navigation-item__content::after,
body[class*="vacc-style-"] .vacc-header .vacc-nav:not(.vacc-nav--mobile) [aria-current="page"]::after {
	background-color: var(--wp--custom--header-accent, var(--wp--preset--color--primary-dark));
}

body[class*="vacc-style-"] .vacc-header .vacc-header__quote a {
	border-color: var(--wp--custom--header-text, var(--wp--preset--color--heading));
	color: var(--wp--custom--header-text, var(--wp--preset--color--heading));
}

body[class*="vacc-style-"] .vacc-header .vacc-header__quote a:hover {
	background-color: var(--wp--custom--header-text, var(--wp--preset--color--heading));
	color: var(--wp--custom--header-inverse, var(--wp--preset--color--base));
}

body[class*="vacc-style-"] .vacc-header .vacc-header__phone a {
	background-color: var(--wp--custom--header-call, var(--wp--preset--color--primary));
}

/* The rule above (0,3,2) outranks the page's Call hover (.vacc-header__phone a:hover, 0,2,1), so
   the hover fill is restored here, gated the same way. primary-deep keeps the on-primary label AA in
   every palette, including on Bold's charcoal header. */
body[class*="vacc-style-"] .vacc-header .vacc-header__phone a:hover {
	background-color: var(--wp--preset--color--primary-deep);
}

/* Desktop submenus: core paints the panel white, so the header's light link colour would sit on
   white under Bold. The panel keeps core's opaque white and lays the header surface over it as a
   one-colour gradient: the translucent white of the other styles composites to opaque white, Bold's
   dark surface shows as is. The panel's links take the header text and accent from the rules above. */
body[class*="vacc-style-"] .vacc-header .vacc-nav:not(.vacc-nav--mobile) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	background-image: linear-gradient(var(--wp--custom--header-surface, rgb(255 255 255 / 0.96)), var(--wp--custom--header-surface, rgb(255 255 255 / 0.96)));
}

/* The ring is set on the focused element (not by redefining the focus role on the header, which
   would read itself); the open phone menu keeps the on-dark ring it has had since 0.7.0. */
body[class*="vacc-style-"] .vacc-header .vacc-header__row :focus-visible,
body[class*="vacc-style-"] .vacc-header .vacc-header__row :focus {
	outline-color: var(--wp--custom--header-focus, var(--wp--preset--color--focus));
}

body[class*="vacc-style-"] .vacc-header .vacc-header__row .wp-block-navigation__responsive-container.is-menu-open :focus-visible,
body[class*="vacc-style-"] .vacc-header .vacc-header__row .wp-block-navigation__responsive-container.is-menu-open :focus {
	outline-color: var(--wp--preset--color--focus-on-dark);
}

/* Section surfaces (3.4.0 slot surface: is-surface-tint, is-surface-paper, is-surface-dark, is-surface-white). The
   builder writes the class per section; nothing here applies without it. tint is the pale wash of
   the member colour (the light grey on a 3.0.0 palette, which has no primary-tint), paper the
   light grey, dark the charcoal. A surface replaces the section's own background (white, or the
   grey of is-tint, or the owner band's wash); on stats-row with band the band wins. */
:is(.vacc-section, .vacc-trust-strip):not(.is-band).is-surface-tint {
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
}

:is(.vacc-section, .vacc-trust-strip):not(.is-band).is-surface-paper {
	background-color: var(--wp--preset--color--tint);
}

/* white is the page white (the base role): it turns any surfaced section white, including the
   grey of is-tint and faq and the owner band's wash. */
:is(.vacc-section, .vacc-trust-strip):not(.is-band).is-surface-white {
	background-color: var(--wp--preset--color--base);
}

/* Two neighbours on the same surface are parted by a hairline, as two is-tint sections are. On
   dark the line role is the soft charcoal (below). */
:is(.vacc-section, .vacc-trust-strip).is-surface-tint + :is(.vacc-section, .vacc-trust-strip).is-surface-tint,
:is(.vacc-section, .vacc-trust-strip).is-surface-paper + :is(.vacc-section, .vacc-trust-strip).is-surface-paper,
:is(.vacc-section, .vacc-trust-strip).is-surface-white + :is(.vacc-section, .vacc-trust-strip).is-surface-white,
:is(.vacc-section, .vacc-trust-strip).is-surface-dark + :is(.vacc-section, .vacc-trust-strip).is-surface-dark {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Chips drawn in the light grey keep their edge on a tinted or grey surface. */
:is(.is-surface-tint, .is-surface-paper) .vacc-areas > li {
	background-color: var(--wp--preset--color--base);
}

/* On white the chips drawn in the light grey keep their edge: they take the grey back. */
.is-surface-white .vacc-areas > li {
	background-color: var(--wp--preset--color--tint);
}

/* Dark: the section switches the text roles to their on-dark colours, so its heading, eyebrow,
   intro, text, links, buttons, icons, rules and focus ring follow without a rule each. Cards and
   the other white islands inside it take the light roles back (saved on body before the switch),
   so a card on charcoal reads as it does on white. */
body {
	--vacc-light-heading: var(--wp--preset--color--heading);
	--vacc-light-ink: var(--wp--preset--color--ink);
	--vacc-light-muted: var(--wp--preset--color--muted);
	--vacc-light-primary-dark: var(--wp--preset--color--primary-dark);
	--vacc-light-primary: var(--wp--preset--color--primary);
	--vacc-light-line: var(--wp--preset--color--line);
	--vacc-light-focus: var(--wp--preset--color--focus);
}

:is(.vacc-section, .vacc-trust-strip):not(.is-band).is-surface-dark {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--footer-text);
	--wp--preset--color--heading: var(--wp--preset--color--base);
	--wp--preset--color--ink: var(--wp--preset--color--footer-text);
	--wp--preset--color--muted: var(--wp--preset--color--footer-text);
	--wp--preset--color--primary-dark: var(--wp--preset--color--primary-on-dark);
	--wp--preset--color--primary: var(--wp--preset--color--primary-fill-on-dark);
	--wp--preset--color--line: var(--wp--preset--color--dark-soft);
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

.is-surface-dark :where(.wp-block-group.is-style-card, .vacc-step, .wp-block-quote.vacc-quote, .wp-block-details.vacc-faq__item,
	.vacc-rating-summary, .vacc-marques > .vacc-marque, .vacc-areas > li, .vacc-trust-strip:not(.is-proof) .vacc-trust li, .vacc-trust-strip__row > p) {
	color: var(--vacc-light-ink);
}

.is-surface-dark :is(.wp-block-group.is-style-card, .vacc-step, .wp-block-quote.vacc-quote, .wp-block-details.vacc-faq__item,
	.vacc-rating-summary, .vacc-marques > .vacc-marque, .vacc-areas > li, .vacc-trust-strip:not(.is-proof) .vacc-trust li, .vacc-trust-strip__row > p) {
	--wp--preset--color--heading: var(--vacc-light-heading);
	--wp--preset--color--ink: var(--vacc-light-ink);
	--wp--preset--color--muted: var(--vacc-light-muted);
	--wp--preset--color--primary-dark: var(--vacc-light-primary-dark);
	--wp--preset--color--primary: var(--vacc-light-primary);
	--wp--preset--color--line: var(--vacc-light-line);
	--wp--preset--color--focus: var(--vacc-light-focus);
}

/* The islands' own colour sits in a zero-specificity :where() rule above, so a component that sets
   its own text colour (marque tiles, area chips) keeps it; the :is() rule carries the roles only. */

/* service-cards with intro_in_grid: its charcoal box would sit on the charcoal section. */
.is-surface-dark .vacc-grid__intro {
	background-color: var(--wp--preset--color--dark-soft);
}

/* The proof strip has no chips: its text follows the dark roles, and each icon keeps its light
   colour on its pale tile (the rating star keeps its own). */
.vacc-trust-strip.is-proof.is-surface-dark .vacc-trust li:not(.vacc-trust__rating)::before {
	background-color: var(--vacc-light-primary-dark);
}

/* A ring drawn around a whole card sits on the charcoal, not on the card. */
.is-surface-dark :is(.vacc-card, .vacc-symptom):has(a:focus-visible) {
	outline-color: var(--wp--preset--color--focus-on-dark);
}

/* The outline button inverts to white on hover; its label turns charcoal (outside the islands). */
.is-surface-dark .wp-block-button.is-style-outline:not(:is(.wp-block-group.is-style-card, .vacc-step, .wp-block-quote.vacc-quote) *) .wp-block-button__link:hover {
	color: var(--wp--preset--color--dark);
}

/* stats-row is charcoal by default (dark keeps it). On tint or paper the figures go light: the
   text roles a light section uses, and the page focus ring. */
.vacc-stats-row:not(.is-band):is(.is-surface-tint, .is-surface-paper, .is-surface-white) {
	color: var(--wp--preset--color--ink);
	--wp--preset--color--focus: var(--vacc-light-focus);
}

.vacc-stats-row:not(.is-band):is(.is-surface-tint, .is-surface-paper, .is-surface-white) .wp-block-heading {
	color: var(--wp--preset--color--heading);
}

.vacc-stats-row:not(.is-band):is(.is-surface-tint, .is-surface-paper, .is-surface-white) .is-style-eyebrow,
.vacc-stats-row:not(.is-band):is(.is-surface-tint, .is-surface-paper, .is-surface-white) .vacc-stat__value {
	color: var(--wp--preset--color--primary-dark);
}

.vacc-stats-row:not(.is-band):is(.is-surface-tint, .is-surface-paper, .is-surface-white) .vacc-stats > .wp-block-column + .wp-block-column {
	border-color: var(--wp--preset--color--line);
}

/* 31. Contract 3.5.0: service tiles (v0.10.0) -----------------------------------------------------
   Not under the style class: patterns/service-tiles.php is registered for every site, so the section
   must lay out on any site. Every selector starts with .vacc-service-tiles, .vacc-tiles or .vacc-tile,
   classes no earlier version prints, so a page without tiles renders as 0.9.0 and as 0.7.0; every
   colour is a palette role (contract/check.py checks both). The grid rules read .wp-block-group.vacc-tiles
   so they beat WordPress's own .wp-container-N grid layout rule whichever prints last. */

/* Service tiles (service-tiles): an icon, the service name as the one link of the tile (the label
   under it is plain text, read by screen readers, not a link); the link covers the tile. Two a row on phones, the icon beside the name from 600px, three a row from 960px (four
   for seven or eight tiles from 1100px). A tile is a card (is-style-card), so on a dark surface it is an island
   that keeps the light roles (section 30). */
.wp-block-group.vacc-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.wp-block-group.vacc-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1rem 1rem 1.1rem;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.vacc-tile > * {
	margin-block: 0 0.3rem;
}

.vacc-tile > p:has(> .vacc-tile__icon) {
	margin-bottom: 0.75rem;
	line-height: 0;
}

.vacc-icon.vacc-tile__icon {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0.625rem;
	box-sizing: content-box;
	border-radius: var(--wp--custom--radius-small);
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
	color: var(--wp--preset--color--primary-dark);
}

.vacc-tile .wp-block-heading.vacc-tile__title {
	/* The section rule that lifts headings next to a section head must not trap the title link's
	   overlay inside the heading: the tile is the positioned box. */
	position: static;
	z-index: auto;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--wp--preset--color--heading);
	overflow-wrap: break-word;
}

p.vacc-tile__link {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 0.2rem;
	font-family: var(--wp--custom--heading-font);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wp--preset--color--primary-dark);
}

.vacc-tile__title a {
	color: inherit;
	text-decoration: none;
}

p.vacc-tile__link::after {
	content: "\00a0\2192";
	content: "\00a0\2192" / "";
}

/* The title link covers the tile, so the whole tile is one target. */
.vacc-tile__title a::before {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.vacc-tile:hover .vacc-tile__title a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.vacc-tile:hover {
	border-color: var(--wp--preset--color--primary-dark);
	box-shadow: var(--wp--custom--shadow);
}

/* The ring is drawn on the tile (below), not on the link inside it. The link keeps its own outline
   unless the browser can draw the tile's ring with :has(); without :has() the tile rings on
   :focus-within instead. */
@supports selector(:has(*)) {
	.vacc-tile__title a:focus-visible {
		outline: none;
	}
}

.vacc-tile:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--focus);
	outline-offset: 3px;
}

/* A ring around a whole tile sits on the charcoal, not on the tile. */
.is-surface-dark .vacc-tile:has(a:focus-visible) {
	outline-color: var(--wp--preset--color--focus-on-dark);
}

@supports not selector(:has(*)) {
	.vacc-tile:focus-within {
		outline: 3px solid var(--wp--preset--color--focus);
		outline-offset: 3px;
	}

	.is-surface-dark .vacc-tile:focus-within {
		outline-color: var(--wp--preset--color--focus-on-dark);
	}
}

@media (min-width: 600px) {
	.wp-block-group.vacc-tiles {
		gap: 1rem;
	}

	.wp-block-group.vacc-tile {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-content: center;
		column-gap: 1rem;
		padding: 1.1rem 1.25rem;
	}

	.vacc-tile > * {
		grid-column: 2;
		margin: 0;
	}

	.vacc-tile > p:has(> .vacc-tile__icon) {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
		margin: 0;
	}
}

@media (min-width: 960px) {
	.wp-block-group.vacc-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}

	/* Tile counts: two tiles in two columns, four in two rows of two, in a narrower box. */
	.wp-block-group.vacc-tiles:has(> .vacc-tile:first-child:nth-last-child(2)),
	.wp-block-group.vacc-tiles:has(> .vacc-tile:first-child:nth-last-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 52rem;
	}
}

@media (min-width: 1100px) {
	.wp-block-group.vacc-tiles:has(> .vacc-tile:first-child:nth-last-child(7)),
	.wp-block-group.vacc-tiles:has(> .vacc-tile:first-child:nth-last-child(8)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 32. Contract 3.5.0: card counts and the Call-first phone bar (v0.10.0) ---------------------------
   Every selector here starts with the style class (body[class*="vacc-style-"]), so a site with no
   variation renders as 0.9.0, and so as 0.7.0. */

/* Card counts (service-cards): two cards in two wide columns, four in two rows of two, where the
   grid's own three columns would leave a gap. Not with intro_in_grid (its first cell is the intro)
   or as_list (its own grid). */
@media (min-width: 782px) {
	body[class*="vacc-style-"] .vacc-service-cards:not(.is-list) .vacc-grid:has(> .vacc-card:first-child:nth-last-child(2)),
	body[class*="vacc-style-"] .vacc-service-cards:not(.is-list) .vacc-grid:has(> .vacc-card:first-child:nth-last-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The phone bar (section 14) under a style leads with the call: the Call button takes the accent
   fill, and the button that had it (Quote when it is last, or the booking button) goes back to the
   charcoal with an accent icon, only when a Call button is there (it is always first). No markup
   change. Each label and its ring (drawn inside the button) meet AA on their own ground. */
body[class*="vacc-style-"] .vacc-sticky-bar__call {
	background-color: var(--wp--preset--color--primary-fill-on-dark);
	color: var(--wp--preset--color--on-primary);
	--wp--preset--color--focus: var(--wp--preset--color--on-primary);
}

body[class*="vacc-style-"] .vacc-sticky-bar__call .vacc-icon {
	color: inherit;
}

body[class*="vacc-style-"] .vacc-sticky-bar__call ~ .vacc-sticky-bar__quote:last-child,
body[class*="vacc-style-"] .vacc-sticky-bar__call ~ .vacc-sticky-bar__cta {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

body[class*="vacc-style-"] .vacc-sticky-bar__call ~ .vacc-sticky-bar__cta {
	border-left: 1px solid var(--wp--preset--color--dark-soft);
}

body[class*="vacc-style-"] .vacc-sticky-bar__call ~ .vacc-sticky-bar__quote:last-child .vacc-icon,
body[class*="vacc-style-"] .vacc-sticky-bar__call ~ .vacc-sticky-bar__cta .vacc-icon {
	color: var(--wp--preset--color--primary-on-dark);
}

/* 33. Contract 3.6.0: layout choices (v0.11.0) ----------------------------------------------------
   The optional layout slot of hero, hero-split, process-steps, testimonials, cta-band and
   service-tiles prints vacc-layout-<value> on the section; with no layout nothing is printed and
   the section renders as in 3.5.0. Every selector here names a section class and one of its own
   layout classes in its first compound, so no rule reaches an older page or another section. The
   rules are not under the style class (the builder writes a layout with a 3.6 plan only, and any
   site can draw it). Colours are palette roles (contract/check.py checks the pairs); no motion. */

/* Hero, left: the text block on the left of the wide box, vertically centred. From 960px the scrim
   is a side panel: solid overlay-strong to max(50% + 2rem, 40rem), past the 34rem text block at any
   width, then fading out so the right of the photo shows. Below 960px the full scrim stays. */
.wp-block-cover.vacc-hero.vacc-layout-left {
	justify-content: flex-start;
	text-align: left;
}

.wp-block-cover.vacc-hero.vacc-layout-left .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.vacc-hero.vacc-layout-left .vacc-hero__copy {
	max-width: 34rem;
	margin-inline: 0 auto !important;
}

.vacc-hero.vacc-layout-left .vacc-lead {
	margin-inline: 0;
}

.vacc-hero.vacc-layout-left .wp-block-buttons {
	justify-content: flex-start;
}

@media (min-width: 960px) {
	.wp-block-cover.vacc-hero.vacc-layout-left > .wp-block-cover__background {
		background: linear-gradient(90deg, var(--wp--preset--color--overlay-strong) 0, var(--wp--preset--color--overlay-strong) max(50% + 2rem, 40rem), transparent calc(max(50% + 2rem, 40rem) + 24%)) !important;
	}
}

/* Hero, bottom: a taller hero; the photo shows under a light shade and the text sits on a dark band
   across its bottom edge (overlay-strong behind the text, drawn full width by the box shadow). From
   960px the heading takes the left of the band, the lead and buttons the right. The hero is a grid
   of two rows, the band in the second: from 782px the rows are 2fr and 1fr, so however tall the band
   is, the photo above it is at least twice its height and the band stays in the bottom third; below
   782px at least 12rem of photo shows above it. The band is compact (smaller heading and padding than
   the centred hero), so the hero stays about 3 times the band and its buttons stay near the fold. */
.wp-block-cover.vacc-hero.vacc-layout-bottom {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(12rem, 1fr) auto;
	justify-content: stretch;
	min-height: clamp(520px, 60vh, 720px);
	padding-top: 0;
	padding-bottom: 0;
	align-items: end;
	text-align: left;
}

@media (min-width: 782px) {
	.wp-block-cover.vacc-hero.vacc-layout-bottom {
		grid-template-rows: 2fr 1fr;
	}
}

.wp-block-cover.vacc-hero.vacc-layout-bottom > .wp-block-cover__background {
	background: linear-gradient(180deg, transparent 30%, var(--wp--preset--color--overlay-soft) 100%) !important;
}

.wp-block-cover.vacc-hero.vacc-layout-bottom .wp-block-cover__inner-container {
	grid-row: 2;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.vacc-hero.vacc-layout-bottom .vacc-hero__copy {
	max-width: none;
	margin-inline: 0 !important;
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	background-color: var(--wp--preset--color--overlay-strong);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--overlay-strong);
	clip-path: inset(0 -100vmax);
}

.vacc-hero.vacc-layout-bottom h1.wp-block-heading {
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
}

.vacc-hero.vacc-layout-bottom .vacc-lead {
	margin-inline: 0;
}

.vacc-hero.vacc-layout-bottom .wp-block-buttons {
	justify-content: flex-start;
}

@media (min-width: 960px) {
	.vacc-hero.vacc-layout-bottom .vacc-hero__copy {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 5vw, 4.5rem);
		align-items: center;
	}

	.vacc-hero.vacc-layout-bottom .vacc-hero__copy > * {
		grid-column: 2;
		margin: 0;
	}

	.vacc-hero.vacc-layout-bottom .vacc-hero__copy > h1 {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.vacc-hero.vacc-layout-bottom .vacc-hero__copy > .wp-block-buttons {
		margin-top: 1.5rem;
	}
}

/* Hero, card: the photo full width with no scrim, ending 7rem above the hero's foot; the text sits
   in a white card on the left that overlaps the photo's lower edge. The card takes the light text
   roles and the light focus ring (the hero's own ring is the on-dark one). Below 782px the photo
   comes first at 16:10 and the card stacks under it, overlapping by 2.5rem. */
.wp-block-cover.vacc-hero.vacc-layout-card {
	min-height: clamp(560px, 54vw, 760px);
	padding-bottom: 0;
	align-items: flex-end;
	text-align: left;
	background-color: var(--wp--preset--color--base);
}

.wp-block-cover.vacc-hero.vacc-layout-card > .wp-block-cover__background {
	background: none !important;
}

.wp-block-cover.vacc-hero.vacc-layout-card > .wp-block-cover__image-background {
	height: calc(100% - 7rem);
}

.wp-block-cover.vacc-hero.vacc-layout-card .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.vacc-hero.vacc-layout-card .vacc-hero__copy {
	max-width: 38rem;
	margin-inline: 0 auto !important;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--wp--custom--radius-large);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow);
	color: var(--wp--preset--color--ink);
	--wp--preset--color--focus: var(--vacc-light-focus);
}

.vacc-hero.vacc-layout-card h1.wp-block-heading {
	color: var(--wp--preset--color--heading);
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
}

.vacc-hero.vacc-layout-card h1.wp-block-heading strong {
	color: var(--wp--preset--color--primary-dark);
}

.vacc-hero.vacc-layout-card .vacc-lead {
	margin-inline: 0;
	color: var(--wp--preset--color--ink);
}

.vacc-hero.vacc-layout-card .wp-block-buttons {
	justify-content: flex-start;
	margin-top: 1.75rem;
}

.vacc-hero.vacc-layout-card .wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.vacc-hero.vacc-layout-card .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--on-primary);
}

.vacc-hero.vacc-layout-card .wp-block-button.is-style-ghost .wp-block-button__link {
	border-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--heading);
}

.vacc-hero.vacc-layout-card .wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

@media (max-width: 781px) {
	.wp-block-cover.vacc-hero.vacc-layout-card {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 0 0 2.5rem;
	}

	.wp-block-cover.vacc-hero.vacc-layout-card > .wp-block-cover__image-background {
		position: relative;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.wp-block-cover.vacc-hero.vacc-layout-card .wp-block-cover__inner-container {
		margin-top: -2.5rem;
		padding-inline: var(--wp--custom--gutter);
		box-sizing: border-box;
	}
}

/* Split hero, reverse: the photo (or the facts panel) on the left from 782px. */
@media (min-width: 782px) {
	.vacc-hero-split.vacc-layout-reverse .vacc-hero-split__row {
		flex-direction: row-reverse;
	}
}

/* Split hero, overlap and angled (with a photo, from 960px): the photo leaves its column and runs
   the full height of the section to the right edge of the screen. overlap: the text sits in a white
   card (min(36rem, 60%), so it shrinks under rem text scaling) at the start of the wide box that covers 15% of the photo: the photo's width is
   (section - start of the wide box - card) / 0.85, and it shows its right side (object-position 70%),
   away from the card. angled: the photo's left edge is a diagonal; the text stays on the wash, clear
   of it. With the facts panel, or below 960px, both draw the default split hero. */
@media (min-width: 960px) {
	.vacc-hero-split.vacc-layout-overlap:has(.vacc-hero-split__image),
	.vacc-hero-split.vacc-layout-angled:has(.vacc-hero-split__image) {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: clamp(34rem, 44vw, 46rem);
	}

	.vacc-hero-split.vacc-layout-overlap:has(.vacc-hero-split__image) .vacc-hero-split__row,
	.vacc-hero-split.vacc-layout-angled:has(.vacc-hero-split__image) .vacc-hero-split__row {
		justify-content: flex-start;
	}

	/* In the section's flex column the row's auto margins would shrink it to its content and centre
	   the card; at full width the card sits at the start of the wide box. */
	.vacc-hero-split.vacc-layout-overlap:has(.vacc-hero-split__image) .vacc-hero-split__row {
		width: 100%;
	}

	.vacc-hero-split.vacc-layout-overlap:has(.vacc-hero-split__image) .vacc-hero-split__media,
	.vacc-hero-split.vacc-layout-angled:has(.vacc-hero-split__image) .vacc-hero-split__media {
		position: static;
		flex: 0 0 0 !important;
		min-width: 0;
	}

	.vacc-hero-split.vacc-layout-overlap:has(.vacc-hero-split__image) .vacc-hero-split__image,
	.vacc-hero-split.vacc-layout-angled:has(.vacc-hero-split__image) .vacc-hero-split__image {
		position: absolute;
		inset: 0 0 0 auto;
		margin: 0;
	}

	.vacc-hero-split.vacc-layout-overlap:has(.vacc-hero-split__image) .vacc-hero-split__image {
		width: calc((100% - max(var(--wp--style--root--padding-left, var(--wp--custom--gutter)), (100% - var(--wp--style--global--wide-size, 1200px)) / 2) - min(36rem, 60%)) / 0.85);
	}

	.vacc-hero-split.vacc-layout-overlap:has(.vacc-hero-split__image) .vacc-hero-split__image img {
		object-position: 70% 50%;
	}

	.vacc-hero-split.vacc-layout-overlap:has(.vacc-hero-split__image) .vacc-hero-split__image img,
	.vacc-hero-split.vacc-layout-angled:has(.vacc-hero-split__image) .vacc-hero-split__image img {
		height: 100%;
		aspect-ratio: auto;
		border-radius: 0;
		box-shadow: none;
	}

	.vacc-hero-split.vacc-layout-overlap:has(.vacc-hero-split__image) .vacc-hero-split__copy {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		flex: 0 0 min(36rem, 60%) !important;
		padding: clamp(2rem, 3.5vw, 3rem);
		border-radius: var(--wp--custom--radius-large);
		background-color: var(--wp--preset--color--base);
		box-shadow: var(--wp--custom--shadow);
	}

	.vacc-hero-split.vacc-layout-angled:has(.vacc-hero-split__image) .vacc-hero-split__image {
		width: 50%;
		clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
	}

	.vacc-hero-split.vacc-layout-angled:has(.vacc-hero-split__image) .vacc-hero-split__copy {
		flex: 0 1 44% !important;
	}
}

/* Split hero, statement (with text_only only): left-aligned; the first trust fact becomes one large
   figure beside the title, the rating's number when there is one, else the years line in display
   type (smaller, hyphenated, so a long line fits); with neither a rating nor years it is the plain
   text_only hero; the other facts list small under it. From 782px the figure's column (1fr against the heading's
   1.45fr) starts level with the H1 and the hero is shorter than the text-first hero. Below 782px the
   facts follow the buttons. */
.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	text-align: left;
}

.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-hero-split__row {
	justify-content: flex-start;
}

.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-hero-split__copy {
	flex: 1 1 auto;
	max-width: none;
}

.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-lead {
	margin-inline: 0;
}

.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) :is(.vacc-actions, .vacc-trust) {
	justify-content: flex-start;
}

.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-trust {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.6rem;
}

.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	margin-bottom: 0.6rem;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
}

.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child::before {
	display: none;
}

.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-trust > li.vacc-trust__rating:first-child strong {
	font-family: var(--wp--custom--heading-font);
	font-size: clamp(4rem, 8vw, 7rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--primary-dark);
}

.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-trust > li.vacc-trust__years:first-child {
	font-family: var(--wp--custom--heading-font);
	font-weight: 700;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--primary-dark);
	text-wrap: balance;
	hyphens: auto;
	overflow-wrap: break-word;
}

@media (min-width: 782px) {
	.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-hero-split__copy {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(min(16rem, 40%), 1fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}

	.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-hero-split__copy > * {
		grid-column: 1;
	}

	.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-hero-split__copy > .vacc-trust {
		grid-column: 2;
		grid-row: 1 / span 6;
		align-self: start;
		margin: 0;
		padding-left: clamp(1.5rem, 3vw, 2.5rem);
		border-left: 3px solid var(--wp--preset--color--primary-dark);
	}

	/* With an eyebrow the H1 is the second row: the figure starts level with it. */
	.vacc-hero-split.is-text-only.vacc-layout-statement:has(.vacc-trust > li:is(.vacc-trust__rating, .vacc-trust__years):first-child) .vacc-hero-split__copy:has(> .is-style-eyebrow:first-child) > .vacc-trust {
		grid-row: 2 / span 5;
	}
}

/* Process steps, list (and line below 782px): a vertical numbered list, no cards; each number a
   filled disc joined to the next by a rule, the text beside it on the section's surface. */
.vacc-process-steps.vacc-layout-list .vacc-steps {
	flex-direction: column;
	max-width: 46rem;
	gap: 0;
}

.vacc-process-steps.vacc-layout-list .vacc-steps > .wp-block-column {
	flex: 0 0 auto !important;
}

.vacc-process-steps.vacc-layout-list .vacc-step {
	min-height: 2.75rem;
	padding: 0 0 2.25rem 4.25rem;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.vacc-process-steps.vacc-layout-list .vacc-step::before {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.vacc-process-steps.vacc-layout-list .vacc-step::after {
	content: "";
	position: absolute;
	top: 3.25rem;
	bottom: 0.5rem;
	left: calc(1.375rem - 1px);
	width: 2px;
	background-color: var(--wp--preset--color--line-strong);
}

.vacc-process-steps.vacc-layout-list .wp-block-column:last-child .vacc-step {
	padding-bottom: 0;
}

.vacc-process-steps.vacc-layout-list .wp-block-column:last-child .vacc-step::after {
	display: none;
}

.vacc-process-steps.vacc-layout-list .vacc-step .wp-block-heading {
	padding-top: 0.55rem;
}

@media (max-width: 781px) {
	.vacc-process-steps.vacc-layout-line .vacc-steps {
		flex-direction: column;
		gap: 0;
	}

	.vacc-process-steps.vacc-layout-line .vacc-steps > .wp-block-column {
		flex: 0 0 auto !important;
	}

	.vacc-process-steps.vacc-layout-line .vacc-step {
		min-height: 2.75rem;
		padding: 0 0 2.25rem 4.25rem;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.vacc-process-steps.vacc-layout-line .vacc-step::before {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--on-primary);
	}

	.vacc-process-steps.vacc-layout-line .vacc-step::after {
		content: "";
		position: absolute;
		top: 3.25rem;
		bottom: 0.5rem;
		left: calc(1.375rem - 1px);
		width: 2px;
		background-color: var(--wp--preset--color--line-strong);
	}

	.vacc-process-steps.vacc-layout-line .wp-block-column:last-child .vacc-step {
		padding-bottom: 0;
	}

	.vacc-process-steps.vacc-layout-line .wp-block-column:last-child .vacc-step::after {
		display: none;
	}

	.vacc-process-steps.vacc-layout-line .vacc-step .wp-block-heading {
		padding-top: 0.55rem;
	}
}

/* Process steps, line (from 782px): the steps in one row, centred under their numbers, the numbers
   joined by a line (from each disc to the next, across the 2rem gap). */
@media (min-width: 782px) {
	.vacc-process-steps.vacc-layout-line .vacc-steps {
		gap: 2rem;
	}

	.vacc-process-steps.vacc-layout-line .vacc-step {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		text-align: center;
	}

	.vacc-process-steps.vacc-layout-line .vacc-step::before {
		position: relative;
		z-index: 1;
		width: 3.25rem;
		height: 3.25rem;
		margin: 0 auto 1.25rem;
		font-size: 1.25rem;
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--on-primary);
	}

	.vacc-process-steps.vacc-layout-line .wp-block-column:not(:last-child) .vacc-step::after {
		content: "";
		position: absolute;
		top: calc(1.625rem - 1px);
		left: calc(50% + 2.25rem);
		width: calc(100% - 2.5rem);
		height: 2px;
		background-color: var(--wp--preset--color--line-strong);
	}

	.vacc-process-steps.vacc-layout-line .vacc-step p {
		max-width: 20rem;
		margin-inline: auto;
	}
}

/* On a dark surface the steps of list and line have no card: each keeps the section's charcoal and
   its dark roles (section 30 gives a card step the light roles back, at specificity 0,4,1, so these
   selectors carry 0,5,0). The same holds for the single quote and the tile list below. */
.vacc-process-steps.vacc-layout-list.is-surface-dark .wp-block-group.vacc-step,
.vacc-process-steps.vacc-layout-line.is-surface-dark .wp-block-group.vacc-step {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--footer-text);
	--wp--preset--color--heading: var(--wp--preset--color--base);
	--wp--preset--color--muted: var(--wp--preset--color--footer-text);
	--wp--preset--color--ink: var(--wp--preset--color--footer-text);
	--wp--preset--color--primary-dark: var(--wp--preset--color--primary-on-dark);
	--wp--preset--color--primary: var(--wp--preset--color--primary-fill-on-dark);
	--wp--preset--color--line: var(--wp--preset--color--dark-soft);
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

/* Testimonials, single: each quote a large pull quote on the section's surface (no card), centred,
   the name and source under a short rule. Give one quote; more stack, parted by a hairline. */
.vacc-testimonials.vacc-layout-single .wp-block-group.vacc-quotes {
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vw, 3.5rem);
	max-width: 54rem;
}

.vacc-testimonials.vacc-layout-single .wp-block-quote.vacc-quote {
	align-items: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-align: center;
}

.vacc-testimonials.vacc-layout-single .wp-block-quote.vacc-quote:not(:first-child) {
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--wp--preset--color--line);
}

.vacc-testimonials.vacc-layout-single .wp-block-quote.vacc-quote::before {
	position: static;
	display: block;
	height: 3.25rem;
	font-size: 6rem;
	color: var(--wp--preset--color--primary-dark);
}

.vacc-testimonials.vacc-layout-single .vacc-quote > p:not(.vacc-stars) {
	margin: 0 0 1.75rem;
	font-family: var(--wp--custom--heading-font);
	font-weight: 500;
	font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem);
	line-height: 1.35;
	color: var(--wp--preset--color--heading);
	text-wrap: balance;
}

.vacc-testimonials.vacc-layout-single .vacc-quote cite {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	font-size: 0.9375rem;
}

.vacc-testimonials.vacc-layout-single .vacc-quote cite::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin: 0 auto 1rem;
	background-color: var(--wp--preset--color--primary-dark);
}

.vacc-testimonials.vacc-layout-single.is-surface-dark .wp-block-quote.vacc-quote {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--footer-text);
	--wp--preset--color--heading: var(--wp--preset--color--base);
	--wp--preset--color--muted: var(--wp--preset--color--footer-text);
	--wp--preset--color--ink: var(--wp--preset--color--footer-text);
	--wp--preset--color--primary-dark: var(--wp--preset--color--primary-on-dark);
	--wp--preset--color--primary: var(--wp--preset--color--primary-fill-on-dark);
	--wp--preset--color--line: var(--wp--preset--color--dark-soft);
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

.vacc-testimonials.vacc-layout-single.is-surface-dark .vacc-stars {
	background-color: var(--wp--preset--color--rating, var(--wp--preset--color--primary-on-dark));
}

/* CTA band, split (from 782px): the title and text on the left, the buttons on the right as one
   white phone card: a large Call button across the card, the other buttons under it. The card takes
   the light text roles and the light focus ring, so it reads the same on the dark and the light band. */
.vacc-cta-band.vacc-layout-split .vacc-cta-band__row > .wp-block-buttons {
	flex: 1 1 100%;
	gap: 0.75rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: var(--wp--custom--radius-large);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow);
	color: var(--wp--preset--color--ink);
	--wp--preset--color--focus: var(--vacc-light-focus);
}

.vacc-cta-band.vacc-layout-split .vacc-cta-band__row > .wp-block-buttons > .wp-block-button {
	flex: 1 1 0;
	margin: 0;
}

.vacc-cta-band.vacc-layout-split .vacc-cta-band__row > .wp-block-buttons > .wp-block-button:first-child {
	flex-basis: 100%;
}

.vacc-cta-band.vacc-layout-split .vacc-cta-band__row > .wp-block-buttons .wp-block-button__link {
	box-sizing: border-box;
	width: 100%;
	justify-content: center;
}

.vacc-cta-band.vacc-layout-split .wp-block-button.is-style-dark .wp-block-button__link {
	padding-block: 1.05rem;
	font-size: 1.25rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.vacc-cta-band.vacc-layout-split .wp-block-button.is-style-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

.vacc-cta-band.vacc-layout-split .wp-block-button:is(.is-style-ghost, .is-style-outline) .wp-block-button__link {
	background: none;
	border-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--heading);
}

.vacc-cta-band.vacc-layout-split .wp-block-button:is(.is-style-ghost, .is-style-outline) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

@media (min-width: 782px) {
	.vacc-cta-band.vacc-layout-split .wp-block-group.vacc-cta-band__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(min(17rem, 40%), 24rem);
		gap: clamp(2rem, 5vw, 4rem);
		align-items: center;
	}
}

/* Service tiles, list: a two-column icon list from 782px (one column below): each service an icon
   square, its name (the link) and the label line, parted by hairlines, no cards. The :nth-child(n)
   lifts the grid rule over the tile-count rules of section 31 (same specificity otherwise). */
.vacc-service-tiles.vacc-layout-list .wp-block-group.vacc-tiles:nth-child(n) {
	grid-template-columns: minmax(0, 1fr);
	gap: 0 3rem;
	max-width: 62rem;
}

@media (min-width: 782px) {
	.vacc-service-tiles.vacc-layout-list .wp-block-group.vacc-tiles:nth-child(n) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vacc-service-tiles.vacc-layout-list .wp-block-group.vacc-tile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: center;
	column-gap: 1rem;
	padding: 1rem 0.25rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.vacc-service-tiles.vacc-layout-list .vacc-tile > * {
	grid-column: 2;
	margin: 0;
}

.vacc-service-tiles.vacc-layout-list .vacc-tile > :first-child {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	margin: 0;
	line-height: 0;
}

.vacc-service-tiles.vacc-layout-list .vacc-tile:hover {
	border-color: var(--wp--preset--color--primary-dark);
	box-shadow: none;
}

.vacc-service-tiles.vacc-layout-list.is-surface-dark .wp-block-group.vacc-tile {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--footer-text);
	--wp--preset--color--heading: var(--wp--preset--color--base);
	--wp--preset--color--muted: var(--wp--preset--color--footer-text);
	--wp--preset--color--ink: var(--wp--preset--color--footer-text);
	--wp--preset--color--primary-dark: var(--wp--preset--color--primary-on-dark);
	--wp--preset--color--primary: var(--wp--preset--color--primary-fill-on-dark);
	--wp--preset--color--line: var(--wp--preset--color--dark-soft);
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

.vacc-service-tiles.vacc-layout-list.is-surface-dark .vacc-tile__icon {
	background-color: var(--wp--preset--color--dark-soft);
}

/* 34. Contract 3.6.0: per-style signature details (v0.11.0) ---------------------------------------
   functions.php adds body classes is-v36 and is-v36-<style> when the option vacc_v36 is 1 on a
   composed site with a style variation (never on a family site or without a style). Every selector
   here starts with body.is-v36-<style>, so a site without the option renders as 0.10.0. Photo
   treatments name the photo frames only: never before/after pairs, logos, badges or makes. Colours
   are palette roles (the Classic paper is a checked mix of base and rating); no motion. */

/* Workshop: a hazard stripe in the accent across the top of each dark band, monospace small
   labels, square photos. */
body.is-v36-workshop .vacc-section.is-surface-dark:not(.is-band),
body.is-v36-workshop .vacc-stats-row:not(.is-surface-tint, .is-surface-paper, .is-surface-white),
body.is-v36-workshop .vacc-cta-band__row {
	background-image: repeating-linear-gradient(-45deg, var(--wp--preset--color--primary-fill-on-dark) 0 0.75rem, var(--wp--preset--color--dark) 0.75rem 1.5rem);
	background-size: 100% 0.375rem;
	background-repeat: no-repeat;
	background-position: top left;
}

/* The CTA band is a rounded card: its stripe runs along the straight part of the top edge only (inset
   by the corner radius at each end), so no clipped piece of it sits in a rounded corner. */
body.is-v36-workshop .vacc-cta-band__row {
	background-size: calc(100% - 2 * var(--wp--custom--radius-large)) 0.375rem;
	background-position: center top;
}

body.is-v36-workshop .is-style-eyebrow:not(.wp-block-heading + .is-style-eyebrow),
body.is-v36-workshop p.vacc-tile__link {
	font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body.is-v36-workshop .vacc-step::before {
	font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
}

body.is-v36-workshop :is(.vacc-hero-split__image, .vacc-row__image, .vacc-location__image, .vacc-appointment__image) img,
body.is-v36-workshop .vacc-team:not(.is-owner) .vacc-team__image img,
body.is-v36-workshop .vacc-gallery-strip .wp-block-gallery img {
	border-radius: 0;
}

/* Classic: a thin double rule between light sections, serif small-caps eyebrows with a short double
   rule before them (and after them in a centred head), cream paper bands. */
body.is-v36-classic :is(.vacc-section, .vacc-trust-strip):not(.is-surface-dark, .vacc-stats-row, .vacc-hero, .vacc-usp-band, .vacc-breakdown-band) + :is(.vacc-section, .vacc-trust-strip):not(.is-surface-dark, .vacc-stats-row, .vacc-usp-band, .vacc-breakdown-band) {
	border-top: 3px double var(--wp--preset--color--line-strong);
}

body.is-v36-classic .is-style-eyebrow:not(.wp-block-heading + .is-style-eyebrow) {
	font-family: var(--wp--custom--heading-font);
	font-variant-caps: all-small-caps;
	letter-spacing: 0.1em;
}

body.is-v36-classic .is-style-eyebrow:not(.wp-block-heading + .is-style-eyebrow)::before,
body.is-v36-classic .vacc-section-head.is-centered .is-style-eyebrow:not(.wp-block-heading + .is-style-eyebrow)::after {
	content: "";
	display: inline-block;
	width: 1.75rem;
	border-top: 3px double currentColor;
	vertical-align: middle;
}

body.is-v36-classic .is-style-eyebrow:not(.wp-block-heading + .is-style-eyebrow)::before {
	margin-inline-end: 0.75em;
}

body.is-v36-classic .vacc-section-head.is-centered .is-style-eyebrow:not(.wp-block-heading + .is-style-eyebrow)::after {
	margin-inline-start: 0.75em;
}

body.is-v36-classic :is(.vacc-section, .vacc-trust-strip):not(.is-band).is-surface-paper,
body.is-v36-classic .vacc-section.is-tint:not([class*="is-surface-"]) {
	background-color: var(--wp--preset--color--tint);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 94%, var(--wp--preset--color--rating, var(--wp--preset--color--tint)) 6%);
}

/* Bold: angled top and bottom edges on dark bands (a wedge of the band's own colour over the
   neighbour's padding), uppercase eyebrows, a hard offset frame in the accent behind photos. */
body.is-v36-bold .vacc-section.is-surface-dark:not(.is-band),
body.is-v36-bold .vacc-stats-row:not(.is-surface-tint, .is-surface-paper, .is-surface-white) {
	position: relative;
	--vacc-v36-angle: clamp(1rem, 2.5vw, 2rem);
}

body.is-v36-bold .vacc-section.is-surface-dark:not(.is-band)::before,
body.is-v36-bold .vacc-stats-row:not(.is-surface-tint, .is-surface-paper, .is-surface-white)::before,
body.is-v36-bold .vacc-section.is-surface-dark:not(.is-band)::after,
body.is-v36-bold .vacc-stats-row:not(.is-surface-tint, .is-surface-paper, .is-surface-white)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--vacc-v36-angle);
	background-color: inherit;
	pointer-events: none;
}

body.is-v36-bold .vacc-section.is-surface-dark:not(.is-band)::before,
body.is-v36-bold .vacc-stats-row:not(.is-surface-tint, .is-surface-paper, .is-surface-white)::before {
	top: calc(-1 * var(--vacc-v36-angle) + 1px);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

body.is-v36-bold .vacc-section.is-surface-dark:not(.is-band)::after,
body.is-v36-bold .vacc-stats-row:not(.is-surface-tint, .is-surface-paper, .is-surface-white)::after {
	bottom: calc(-1 * var(--vacc-v36-angle) + 1px);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* A card hero's card sits on the hero's foot (no padding under it), so the wedge of a dark section
   right after it would run up behind the card: that section keeps a straight top. */
body.is-v36-bold .wp-block-cover.vacc-hero.vacc-layout-card + .vacc-section::before {
	content: none;
}

body.is-v36-bold .is-style-eyebrow:not(.wp-block-heading + .is-style-eyebrow) {
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.is-v36-bold .vacc-hero-split:not(.vacc-layout-overlap, .vacc-layout-angled) .vacc-hero-split__image img,
body.is-v36-bold :is(.vacc-row__image, .vacc-location__image, .vacc-appointment__image) img,
body.is-v36-bold .vacc-team:not(.is-owner) .vacc-team__image img {
	box-shadow: 0.75rem 0.75rem 0 0 var(--wp--preset--color--primary);
}

/* Friendly: 16px corners on photos and cards; a soft curve at the foot of the split hero and of a
   tinted or dark band when a white section follows it. */
body.is-v36-friendly {
	--wp--custom--radius: 16px;
	--wp--custom--radius-large: 16px;
}

body.is-v36-friendly .vacc-hero-split:not(.vacc-layout-overlap, .vacc-layout-angled):has(+ .vacc-section:is(.is-surface-white, :not([class*="is-surface-"], .is-tint, .vacc-faq, .vacc-stats-row, .vacc-usp-band, .vacc-breakdown-band, .is-owner))),
body.is-v36-friendly .vacc-section:is(.is-surface-tint, .is-surface-paper, .is-surface-dark):not(.is-band):has(+ .vacc-section:is(.is-surface-white, :not([class*="is-surface-"], .is-tint, .vacc-faq, .vacc-stats-row, .vacc-usp-band, .vacc-breakdown-band, .is-owner))) {
	border-bottom-left-radius: 50% clamp(1.25rem, 3vw, 2.5rem);
	border-bottom-right-radius: 50% clamp(1.25rem, 3vw, 2.5rem);
}

/* Clean: 4px corners, and a hairline across the content width at the top of each light section
   that follows another light section. */
body.is-v36-clean {
	--wp--custom--radius: 4px;
	--wp--custom--radius-large: 4px;
}

body.is-v36-clean :is(.vacc-section, .vacc-trust-strip):not(.is-surface-dark, .vacc-stats-row, .vacc-hero, .vacc-usp-band, .vacc-breakdown-band) + :is(.vacc-section, .vacc-trust-strip):not(.is-surface-dark, .vacc-stats-row, .vacc-usp-band, .vacc-breakdown-band) {
	background-image: linear-gradient(var(--wp--preset--color--line), var(--wp--preset--color--line));
	background-size: min(100% - 2 * var(--wp--custom--gutter), var(--wp--style--global--wide-size, 1200px)) 1px;
	background-repeat: no-repeat;
	background-position: center top;
}

/* 35. Contract 3.6.0: map embed and dark header bar (v0.11.0) -----------------------------------
   Opt-in site options, each gated so a site without them renders as before (contract/check.py
   checks them). The map rules name .vacc-map-embed or .vacc-map-embed-link, which functions.php
   prints only with vacc_map_query or a valid vacc_map_embed_url. The header rules start with
   body.vacc-header-is-dark (vacc_header_dark = '1' or 'brand') or body.vacc-header-is-brand
   ('brand' only); they need no style variation, and they follow section 30's
   header rules at the same specificity, so they win under every style. */

/* The map: the Google map fills the location map box, which keeps its radius and its 360px
   min-height and grows with its content (no fixed height or aspect ratio, so enlarged text is never
   clipped). The card (business name, address and, with vacc_map_url, the Open in Google Maps link)
   is not shown once the embed fills the box: it would sit over Google's own map and logo. Instead
   functions.php reprints the link after the box's closing tag (.vacc-map-embed-link), so it sits
   under the map on the section surface with the section's own focus ring. The drawn street grid stays underneath as the
   placeholder, and the drawn pin gives way to Google's. */
.vacc-map-box:has(> .vacc-map-embed) {
	min-height: 360px;
	align-items: flex-start;
}

.vacc-map-box:has(> .vacc-map-embed)::before {
	content: none;
}

.vacc-map-box > .vacc-map-embed {
	position: absolute;
	inset: 0;
}

.vacc-map-box > .vacc-map-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.vacc-map-box:has(> .vacc-map-embed) > .vacc-map-card {
	display: none;
}

.vacc-map-embed-link {
	display: inline-block;
	margin-top: 0.75rem;
	color: var(--wp--preset--color--primary-dark);
}

/* The dark header bar: every composed header (left, split, stacked), sticky or not, on the palette's
   dark ground with the on-dark roles of Bold's header tokens. The logo prints straight on it (no
   plate). The top bar above keeps its dark-soft strip, a visible step to the darker bar; the phone
   menu overlay keeps its own dark panel and on-dark ring. */
body.vacc-header-is-dark .vacc-header {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	border-bottom-color: var(--wp--preset--color--dark-soft);
	--wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

body.vacc-header-is-dark .vacc-header .vacc-nav:not(.vacc-nav--mobile),
body.vacc-header-is-dark .vacc-header .vacc-nav:not(.vacc-nav--mobile) a {
	color: var(--wp--preset--color--base);
}

body.vacc-header-is-dark .vacc-header .vacc-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--line-strong);
}

body.vacc-header-is-dark .vacc-header .vacc-nav:not(.vacc-nav--mobile) .wp-block-navigation-item__content:hover,
body.vacc-header-is-dark .vacc-header .vacc-nav:not(.vacc-nav--mobile) .current-menu-item > .wp-block-navigation-item__content,
body.vacc-header-is-dark .vacc-header .vacc-nav:not(.vacc-nav--mobile) [aria-current="page"] {
	color: var(--wp--preset--color--primary-on-dark);
}

body.vacc-header-is-dark .vacc-header .vacc-nav:not(.vacc-nav--mobile) .current-menu-item > .wp-block-navigation-item__content::after,
body.vacc-header-is-dark .vacc-header .vacc-nav:not(.vacc-nav--mobile) [aria-current="page"]::after {
	background-color: var(--wp--preset--color--primary-on-dark);
}

/* Desktop submenus: the dark panel (section 30 lays the header surface over white as a gradient;
   that gradient is dropped here) with base text, since core paints the panel's text black. */
body.vacc-header-is-dark .vacc-header .vacc-nav:not(.vacc-nav--mobile) .has-child > .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--dark);
	background-image: none;
	border-color: var(--wp--preset--color--dark-soft);
	color: var(--wp--preset--color--base);
}

body.vacc-header-is-dark .vacc-header .vacc-header__quote a {
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

body.vacc-header-is-dark .vacc-header .vacc-header__quote a:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--dark);
}

body.vacc-header-is-dark .vacc-header .vacc-header__phone a {
	background-color: var(--wp--preset--color--primary-fill-on-dark);
	color: var(--wp--preset--color--on-primary);
}

body.vacc-header-is-dark .vacc-header .vacc-header__phone a:hover {
	background-color: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--on-primary);
}

/* The ring is set on the focused element too, so it outranks section 30's header ring under a style. */
body.vacc-header-is-dark .vacc-header .vacc-header__row :focus-visible,
body.vacc-header-is-dark .vacc-header .vacc-header__row :focus {
	outline-color: var(--wp--preset--color--focus-on-dark);
}

/* The brand header bar: vacc_header_dark = 'brand' adds vacc-header-is-brand alongside
   vacc-header-is-dark, so these rules follow the dark ones at the same specificity and win. The bar
   takes the palette's primary-dark as its ground. The text and menu role is the neutral light tint
   (the chosen role; base also passes, since the palette darkens primary-dark until base and tint
   both reach AA on it, while footer-text does not). The submenu panel sits on primary-dark too.
   The Call button keeps on-primary text on primary-deep, outlined in tint so the pill stays
   visible when primary-deep sits close to the bar, and turns tint with dark text on hover. */
body.vacc-header-is-brand .vacc-header {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--tint);
	border-bottom-color: var(--wp--preset--color--primary-dark);
	--wp--preset--color--focus: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
}

body.vacc-header-is-brand .vacc-header .vacc-nav:not(.vacc-nav--mobile),
body.vacc-header-is-brand .vacc-header .vacc-nav:not(.vacc-nav--mobile) a,
body.vacc-header-is-brand .vacc-header .vacc-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--tint);
}

body.vacc-header-is-brand .vacc-header .vacc-nav .wp-block-navigation__responsive-container-open {
	border-color: var(--wp--preset--color--tint);
}

body.vacc-header-is-brand .vacc-header .vacc-nav:not(.vacc-nav--mobile) .wp-block-navigation-item__content:hover,
body.vacc-header-is-brand .vacc-header .vacc-nav:not(.vacc-nav--mobile) .current-menu-item > .wp-block-navigation-item__content,
body.vacc-header-is-brand .vacc-header .vacc-nav:not(.vacc-nav--mobile) [aria-current="page"] {
	color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
}

body.vacc-header-is-brand .vacc-header .vacc-nav:not(.vacc-nav--mobile) .current-menu-item > .wp-block-navigation-item__content::after,
body.vacc-header-is-brand .vacc-header .vacc-nav:not(.vacc-nav--mobile) [aria-current="page"]::after {
	background-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
}

body.vacc-header-is-brand .vacc-header .vacc-nav:not(.vacc-nav--mobile) .has-child > .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--primary-dark);
	background-image: none;
	border-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
	color: var(--wp--preset--color--tint);
}

body.vacc-header-is-brand .vacc-header .vacc-header__quote a {
	border-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--tint);
}

body.vacc-header-is-brand .vacc-header .vacc-header__quote a:hover {
	background-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--dark);
}

body.vacc-header-is-brand .vacc-header .vacc-header__phone a {
	background-color: var(--wp--preset--color--primary-deep);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--tint);
	color: var(--wp--preset--color--on-primary);
}

body.vacc-header-is-brand .vacc-header .vacc-header__phone a:hover {
	background-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--dark);
}

body.vacc-header-is-brand .vacc-header .vacc-header__row :focus-visible,
body.vacc-header-is-brand .vacc-header .vacc-header__row :focus {
	outline-color: var(--wp--preset--color--primary-tint, var(--wp--preset--color--tint));
}