/*
 * Block and pattern components. Loaded on the front end and inside the block editor.
 *
 * What lives where:
 *   theme.json            tokens (palette, type scale, spacing, radii), element and block defaults
 *   styles/blocks/*.json  the block style variations that are fully described by colour, spacing, border and type
 *                         (cream band, green band, panel, service card, product card, label, eyebrow)
 *   this file             what theme.json cannot express: pseudo-elements, counters, hover states, scrolling and
 *                         sticky behaviour, and the descendants of a variation (its heading size, its buttons)
 *
 * Rules select the block style classes (`.is-style-*`) and core block classes. A few scoped !important declarations are
 * retained where WordPress's generated colour utilities otherwise override the intended surface role.
 */

/* ------------------------------------------------------------
   Highlighted words (the core "Highlight" format) and bold weight
   ------------------------------------------------------------ */
mark {
	padding: 0 0.15em;
	border-radius: 0.2em;
	background: none;
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

mark.has-ink-background-color {
	background-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--cream) !important;
}

/* Text columns space their parts the way the reference does: a flex gap plus a margin around labels and buttons. */
.wp-block-column > .wp-block-heading.is-style-label {
	margin-block: 1.875rem 1.625rem;
}

.wp-block-column > .wp-block-buttons {
	margin-top: 1.875rem;
}

.wp-block-list:not(.is-style-pills) li {
	padding-block: 0.25rem;
}

/* Lists get green bullets (the text keeps the list colour). */
.wp-block-list li::marker {
	color: var(--wp--preset--color--green);
}

.is-style-cream-band .wp-block-list li::marker {
	color: var(--wp--preset--color--deep-green);
}

/* ------------------------------------------------------------
   Buttons: pill with an arrow chip. Two sizes of text, one outline variant.
   ------------------------------------------------------------ */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.wp-block-button__link::after {
	content: "↗";
	content: "↗" / "";
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--mhc-arrow-bg, var(--wp--preset--color--ink));
	color: var(--mhc-arrow-fg, var(--wp--preset--color--cream));
	font-size: 1rem;
}

.is-style-cream-band,
.is-style-green-band {
	--mhc-arrow-bg: var(--wp--preset--color--green);
	--mhc-arrow-fg: var(--wp--custom--on-green);
}

/* The legacy class name remains in migrated content; v4 uses green for these bands. */
.is-style-cream-band {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
}

/* Green surfaces use the cream foreground; the highlighted CTA word remains white. */
:is(.is-style-cream-band, .is-style-green-band, .is-style-service-card, .is-style-panel.has-panel-2-background-color) {
	color: var(--wp--preset--color--cream);
}

:is(.is-style-cream-band, .is-style-green-band, .is-style-service-card, .is-style-panel.has-panel-2-background-color) :is(h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote, label, a:not(.wp-block-button__link), span:not(.wpcf7-not-valid-tip)) {
	color: var(--wp--preset--color--cream) !important;
}

:is(.is-style-cream-band, .is-style-green-band, .is-style-service-card, .is-style-panel.has-panel-2-background-color) mark {
	background-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--cream) !important;
}

:is(.is-style-cream-band, .is-style-green-band) .wpcf7 {
	--mhc-field-fg: var(--wp--preset--color--cream);
	--mhc-label-fg: var(--wp--preset--color--cream);
	--mhc-focus-ring: var(--wp--preset--color--cream);
}

:is(.is-style-cream-band, .is-style-green-band) .wpcf7 input[type="text"],
:is(.is-style-cream-band, .is-style-green-band) .wpcf7 input[type="email"],
:is(.is-style-cream-band, .is-style-green-band) .wpcf7 input[type="tel"],
:is(.is-style-cream-band, .is-style-green-band) .wpcf7 textarea {
	color: var(--wp--preset--color--ink);
}

:is(.is-style-cream-band, .is-style-green-band) .wpcf7 ::placeholder {
	color: var(--wp--preset--color--ink);
	opacity: 0.78;
}

:is(.is-style-cream-band, .is-style-green-band) .wpcf7 {
	--mhc-field-bg: var(--wp--preset--color--cream);
	--mhc-field-fg: var(--wp--preset--color--ink);
	--mhc-field-line: rgba(18, 18, 17, 0.35);
}

.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--wp--custom--line--strong);
	background: none;
	color: var(--wp--preset--color--cream);
}

.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

.is-style-outline > .wp-block-button__link::after {
	content: "›";
	content: "›" / "";
	width: auto;
	height: auto;
	background: none;
	color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link {
		transition: background-color 0.3s, color 0.3s;
	}
}

/* Large call-to-action buttons. */
.is-style-cream-band .wp-block-button__link,
.is-style-green-band .wp-block-button__link {
	padding-block: 0.75rem;
	padding-inline: 1.875rem 0.75rem;
}

.is-style-cream-band .wp-block-button__link::after,
.is-style-green-band .wp-block-button__link::after {
	width: 2.75rem;
	height: 2.75rem;
}

/* Display sizes get tighter leading as they get larger (the reference's values). */
.wp-block-heading.has-display-xxl-font-size,
.wp-block-heading.has-display-contact-font-size,
.wp-block-heading.has-display-panel-font-size {
	line-height: 0.88;
}

.wp-block-heading.has-display-xl-font-size,
.wp-block-heading.has-display-cta-font-size,
.wp-block-heading.has-display-cta-sm-font-size {
	line-height: 0.9;
}

.wp-block-heading.has-display-lg-font-size {
	line-height: 0.92;
}

.wp-block-heading.has-display-row-font-size {
	line-height: 0.95;
}

.wp-block-heading.has-display-intro-font-size {
	line-height: 0.98;
}

/* ------------------------------------------------------------
   Section heading row and call-to-action band/row
   ------------------------------------------------------------ */
.is-style-section-head {
	margin-bottom: 3rem;
}

.is-style-section-head > p {
	max-width: 44ch;
	margin: 0;
}

.is-style-section-head > .wp-block-heading {
	margin: 0;
}

.is-style-cream-band > .wp-block-heading {
	max-width: 12ch;
	margin-bottom: 2.75rem;
	line-height: 0.9;
	letter-spacing: -0.045em;
}

.is-style-cta-row > .wp-block-heading {
	max-width: 14.5ch; /* The reference wraps this headline in three lines; its "ch" is a hair narrower than ours. */
	margin: 0;
	line-height: 0.95;
	letter-spacing: -0.04em;
}

/* ------------------------------------------------------------
   Cards: numbered grid, service card, product card
   ------------------------------------------------------------ */
.is-style-card-grid,
.is-style-stack-numbered {
	counter-reset: mhc-item;
}

.is-style-service-card,
.is-style-product-card {
	position: relative;
	counter-increment: mhc-item;
}

.is-style-service-card {
	border-color: transparent;
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
}

@media (prefers-reduced-motion: no-preference) {
	.is-style-service-card,
	.is-style-product-card {
		transition: transform 0.45s var(--wp--custom--ease), background-color 0.35s, border-color 0.35s, box-shadow 0.45s;
	}

	.is-style-service-card::after {
		transition: transform 0.45s var(--wp--custom--ease), background-color 0.35s, color 0.35s, border-color 0.35s;
	}
}

.is-style-service-card::before {
	content: counter(mhc-item, decimal-leading-zero);
	content: counter(mhc-item, decimal-leading-zero) / "";
	pointer-events: none;
	position: absolute;
	top: 1.625rem;
	left: 1.625rem;
	color: currentcolor;
	opacity: 0.7;
	font-size: var(--wp--preset--font-size--x-small);
}

.is-style-service-card::after {
	content: "↗";
	content: "↗" / "";
	pointer-events: none; /* The heading link covers the card: the arrow must not sit between the pointer and it. */
	position: absolute;
	top: 1.625rem;
	right: 1.625rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid currentcolor;
	border-radius: 50%;
	font-size: 1rem;
}

.is-style-service-card .wp-block-heading {
	margin: 0;
	font-size: clamp(1.75rem, 2.6vw, 2.375rem);
	line-height: 1;
	color: inherit;
}

.is-style-service-card .wp-block-heading a {
	color: inherit;
	text-decoration: none;
}

/* The heading link covers the whole card, so the card has one link with a real name. */
.is-style-service-card .wp-block-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* "Read more" cue: generated text, translated through a custom property set by the theme (see inc/assets.php). */
.is-style-service-card .wp-block-heading::after {
	content: var(--mhc-read-more, "Read more");
	content: var(--mhc-read-more, "Read more") / "";
	display: block;
	margin-top: 0.875rem;
	font: 600 var(--wp--preset--font-size--small) var(--wp--preset--font-family--manrope);
	letter-spacing: 0;
}

.is-style-service-card:hover,
.is-style-service-card:focus-within {
	border-color: transparent;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	box-shadow: var(--wp--preset--shadow--lift);
}

.is-style-service-card:hover::before,
.is-style-service-card:focus-within::before {
	color: inherit;
}

.is-style-service-card:hover::after,
.is-style-service-card:focus-within::after {
	border-color: currentcolor;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.is-style-service-card:hover .wp-block-heading a,
.is-style-service-card:focus-within .wp-block-heading a {
	color: inherit;
}

.is-style-panel {
	color: var(--wp--preset--color--cream);
}

/* WordPress emits block colour utilities as important; these scoped roles must win for the v4 panel sequence. */
.is-style-panel.has-panel-2-background-color {
	background: var(--wp--preset--color--green) !important;
	color: var(--wp--custom--on-green);
}

.is-style-panel.has-panel-2-background-color :is(.has-cream-color, .has-cream-70-color) {
	color: var(--wp--preset--color--cream) !important;
}

.is-style-panel.has-panel-2-background-color .wp-block-heading {
	color: var(--wp--preset--color--cream) !important;
}

.is-style-panel.has-deep-green-background-color .wp-block-heading {
	color: var(--wp--preset--color--ink) !important;
}

.is-style-panel.has-deep-green-background-color {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--ink);
}

.is-style-panel.has-deep-green-background-color :is(.has-cream-color, .has-cream-65-color, .has-cream-70-color) {
	color: var(--wp--preset--color--ink) !important;
}

/* Inner pages have a cream canvas; dark panels retain their cream foreground. Product cards use the lighter surface for contrast. */
.has-page-hero .page-panel .is-style-panel {
	color: var(--wp--preset--color--cream) !important;
}

.has-page-hero .page-panel .is-style-panel :is(h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote) {
	color: var(--wp--preset--color--cream) !important;
}

.has-page-hero .page-panel .is-style-product-card {
	background: var(--wp--preset--color--cream) !important;
	border-color: rgba(18, 18, 17, 0.2) !important;
	color: var(--wp--preset--color--ink) !important;
}

.has-page-hero .page-panel .is-style-product-card :is(h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote) {
	color: var(--wp--preset--color--ink) !important;
}

.has-page-hero .page-panel :is(.is-style-panel, .is-style-product-card).has-panel-2-background-color :is(h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote),
.has-page-hero .page-panel .is-style-panel.has-deep-green-background-color :is(h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote) {
	color: var(--wp--preset--color--ink) !important;
}

.has-page-hero .page-panel .wp-block-heading.is-style-label {
	color: var(--wp--preset--color--green) !important;
}

@media (prefers-reduced-motion: no-preference) {
	.is-style-service-card:hover {
		transform: translateY(-0.375rem);
	}

	.is-style-service-card:hover::after {
		transform: rotate(45deg);
	}
}

.is-style-product-card::after {
	content: counter(mhc-item, decimal-leading-zero);
	content: counter(mhc-item, decimal-leading-zero) / "";
	position: absolute;
	top: 2rem;
	right: 2rem;
	color: var(--wp--preset--color--cream-muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.is-style-product-card:hover {
	border-color: var(--wp--preset--color--green);
	box-shadow: var(--wp--preset--shadow--lift);
}

@media (prefers-reduced-motion: no-preference) {
	.is-style-product-card:hover {
		transform: translateY(-0.375rem);
	}
}

.is-style-product-card > .wp-block-heading {
	max-width: 15ch;
	margin: 0;
	font-size: clamp(1.625rem, 2.4vw, 2.125rem);
}

.is-style-product-card .wp-block-button__link {
	padding: 0.8125rem 1.375rem;
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
	font-size: var(--wp--preset--font-size--small);
}

.is-style-product-card .wp-block-button__link::after {
	display: none;
}

.is-style-product-card .wp-block-button__link:hover {
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
}

.is-style-product-card .is-style-outline > .wp-block-button__link {
	gap: 0.375rem;
	padding-block: calc(0.8125rem - 1px);
	background: none;
	color: var(--wp--preset--color--ink);
	border-color: rgba(18, 18, 17, 0.35);
}

.is-style-product-card .is-style-outline > .wp-block-button__link::after {
	display: inline;
}

/* Stacking cards: each panel is a sticky Group (Position: sticky, set in the pattern). Modern browsers animate the
   cover effect from the panel's own view timeline; older browsers retain the readable sticky-card layout. */
.is-style-stack > *,
.is-style-stack-numbered > * {
	transform-origin: 50% 0;
}


@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.is-style-stack > *,
		.is-style-stack-numbered > * {
			animation: mhc-panel-cover linear both;
			animation-timeline: view(block);
			animation-range: cover 0% cover 100%;
		}

		@keyframes mhc-panel-cover {
			from {
				transform: scale(1);
				filter: brightness(1);
			}
			to {
				transform: scale(0.95);
				filter: brightness(0.55);
			}
		}
	}
}

.is-style-stack-numbered > .is-style-panel {
	counter-increment: mhc-item;
}

.is-style-stack-numbered .wp-block-heading {
	margin: 0 0 1.25rem;
	line-height: 1;
	letter-spacing: -0.04em;
}

/* The "card text" size (16.5px) sets its text a little tighter than the body copy. */
p.has-card-text-font-size {
	line-height: 1.65;
}

.wp-block-column > .wpcf7 {
	margin-top: 2.25rem;
}

.is-style-stack-numbered .wp-block-heading::before {
	content: counter(mhc-item, decimal-leading-zero);
	content: counter(mhc-item, decimal-leading-zero) / "";
	display: block;
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--cream-muted); /* 4.7:1 or better on every panel colour, the green one included. */
	font: 400 var(--wp--preset--font-size--x-small) var(--wp--preset--font-family--manrope);
	letter-spacing: 0;
}

/* Lists as pills (the product range inside a panel). */
.wp-block-list.is-style-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-pills li {
	padding: 0.5625rem 1rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* ------------------------------------------------------------
   Image crops: the registered Image block styles (Styles panel > Crop ...). Ratios live here, not in inline styles.
   ------------------------------------------------------------ */
.wp-block-image.is-style-portrait img,
.wp-block-image.is-style-landscape img,
.wp-block-image.is-style-wide img,
.wp-block-image.is-style-tall img,
.wp-block-image.is-style-photo img {
	width: 100%;
	object-fit: cover;
}

.wp-block-image.is-style-portrait img {
	aspect-ratio: 4 / 5;
}

.wp-block-image.is-style-landscape img {
	aspect-ratio: 5 / 4;
}

.wp-block-image.is-style-wide img {
	aspect-ratio: 16 / 9;
}

.wp-block-image.is-style-tall img {
	aspect-ratio: 3 / 4.4;
}

.wp-block-image.is-style-photo img {
	aspect-ratio: 3 / 2;
}

/* ------------------------------------------------------------
   Columns: image on the left, two photos side by side
   ------------------------------------------------------------ */
@media (min-width: 782px) {
	.wp-block-columns.is-style-reverse {
		flex-direction: row-reverse;
	}
}

.is-style-duo .wp-block-image {
	margin: 0;
}

.is-style-duo .wp-block-image img {
	width: 100%;
}

.is-style-duo > :first-child {
	margin-top: 3rem;
}

/* ------------------------------------------------------------
   Photo collage: native images stay linked to the existing lightbox.
   ------------------------------------------------------------ */
.is-style-photo-strip {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: clamp(7rem, 8vw, 8.5rem);
	grid-auto-flow: dense;
	gap: 1rem;
	overflow: visible;
	padding-bottom: 0;
}

/* Keep the four-image preview on the same wide content line as its heading. The expanded viewer stays full-screen. */
.is-style-photo-strip:not(.mhc-gallery-expanded) {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.is-style-photo-strip .wp-block-image {
	min-width: 0;
	margin: 0;
	block-size: 100%;
	grid-column: span 3;
	grid-row: span 2;
}

.is-style-photo-strip .wp-block-image:nth-child(1),
.is-style-photo-strip .wp-block-image:nth-child(4),
.is-style-photo-strip .wp-block-image:nth-child(5),
.is-style-photo-strip .wp-block-image:nth-child(8),
.is-style-photo-strip .wp-block-image:nth-child(10),
.is-style-photo-strip .wp-block-image:nth-child(11) {
	grid-column: span 2;
}

.is-style-photo-strip .wp-block-image:nth-child(2),
.is-style-photo-strip .wp-block-image:nth-child(6),
.is-style-photo-strip .wp-block-image:nth-child(9) {
	grid-column: span 4;
}

.is-style-photo-strip .wp-block-image:nth-child(6),
.is-style-photo-strip .wp-block-image:nth-child(7),
.is-style-photo-strip .wp-block-image:nth-child(9),
.is-style-photo-strip .wp-block-image:nth-child(12) {
	grid-row: span 3;
}

.is-style-photo-strip .wp-block-image a,
.is-style-photo-strip .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: clamp(1.5rem, 3vw, 2.75rem);
	object-fit: cover;
}

/* Progressive enhancement: the page starts with four images; without JS the complete gallery remains available. */
.js .is-style-photo-strip.mhc-gallery-ready.mhc-gallery-collapsed > .wp-block-image:nth-child(n + 5) {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.js .mhc-gallery-dialog .is-style-photo-strip .wp-block-image.mhc-gallery-reveal {
		position: relative;
		opacity: 0;
		transform: translateY(1.25rem);
		transition: opacity 0.7s ease, transform 0.7s ease;
		transition-delay: var(--mhc-gallery-delay, 0ms);
	}

	.js .mhc-gallery-dialog .is-style-photo-strip .wp-block-image.mhc-gallery-reveal::after {
		position: absolute;
		inset: 0;
		content: "";
		background: #fff;
		border-radius: inherit;
		pointer-events: none;
		transition: opacity 0.85s ease;
	}

	.js .mhc-gallery-dialog .is-style-photo-strip .wp-block-image.mhc-gallery-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	.js .mhc-gallery-dialog .is-style-photo-strip .wp-block-image.mhc-gallery-reveal.is-visible::after {
		opacity: 0;
	}
}

@media (max-width: 800px) {
	.is-style-photo-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: clamp(8rem, 31vw, 12rem);
	}

	.is-style-photo-strip .wp-block-image,
	.is-style-photo-strip .wp-block-image:nth-child(1),
	.is-style-photo-strip .wp-block-image:nth-child(2),
	.is-style-photo-strip .wp-block-image:nth-child(4),
	.is-style-photo-strip .wp-block-image:nth-child(5),
	.is-style-photo-strip .wp-block-image:nth-child(6),
	.is-style-photo-strip .wp-block-image:nth-child(8),
	.is-style-photo-strip .wp-block-image:nth-child(9),
	.is-style-photo-strip .wp-block-image:nth-child(10),
	.is-style-photo-strip .wp-block-image:nth-child(11) {
		grid-column: span 1;
		grid-row: span 1;
	}

	.is-style-photo-strip .wp-block-image:nth-child(7),
	.is-style-photo-strip .wp-block-image:nth-child(12) {
		grid-column: span 1;
		grid-row: span 2;
	}
}

/* ------------------------------------------------------------
   Testimonials: a grid of cards, one card at a time once theme.js has made it a slider
   ------------------------------------------------------------ */
.wp-block-group:has(> .is-style-quote-slider) > .is-style-section-head :is(.wp-block-heading, p) {
	color: var(--wp--preset--color--ink) !important;
}

.wp-block-group:has(> .is-style-quote-slider) > .is-style-section-head .mhc-slider__nav button {
	border-color: rgba(18, 18, 17, 0.35);
	color: var(--wp--preset--color--ink);
}

.wp-block-group:has(> .is-style-quote-slider) > .is-style-section-head .mhc-slider__nav button:nth-of-type(2) {
	border-color: transparent;
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
}

.is-style-quote-slider .wp-block-quote {
	margin: 0;
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--cream);
}

.is-style-quote-slider .wp-block-quote cite {
	display: block;
	margin-top: 1rem;
	color: var(--wp--preset--color--green);
	font-style: normal;
	font-weight: 700;
}

.mhc-slider__nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mhc-slider__nav button {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--cream);
	font-size: 1.125rem;
	cursor: pointer;
}

.mhc-slider__nav button:nth-of-type(2) {
	border: 0;
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
}

.mhc-slider__progress {
	position: relative;
	width: clamp(5rem, 10vw, 8rem);
	height: 3px;
	margin-left: 0.5rem;
	overflow: hidden;
	border-radius: 3px;
	background: var(--wp--custom--line--strong);
}

.mhc-slider__progress span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--green);
	transition: width 0.6s var(--wp--custom--ease);
}

/* Specificity: the Group's grid layout class would otherwise keep the cards in a grid. */
.is-style-quote-slider.mhc-slider {
	display: block;
}

.mhc-slider > .wp-block-quote {
	position: absolute;
	inset: 0;
	display: flex;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(1.5rem);
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	min-height: 23.75rem;
	padding: clamp(1.75rem, 5vw, 4.5rem);
	border: 1px solid var(--wp--custom--line--faint);
	border-radius: var(--wp--preset--border-radius--xl);
	background: var(--wp--preset--color--panel);
	transition: opacity 0.55s var(--wp--custom--ease), transform 0.55s var(--wp--custom--ease), visibility 0s linear 0.55s;
}

.mhc-slider > .wp-block-quote.is-active {
	position: relative;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	z-index: 1;
	transition-delay: 0s;
}

.mhc-slider > .wp-block-quote.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mhc-slider > .wp-block-quote,
	.mhc-slider__progress span {
		transition: none;
	}
}

.mhc-slider > .wp-block-quote p {
	max-width: 30ch;
	margin: 0;
	color: var(--wp--preset--color--cream);
	font: 300 clamp(1.625rem, 3.4vw, 2.875rem) / 1.15 var(--wp--preset--font-family--bricolage);
	letter-spacing: -0.025em;
}

.mhc-slider > .wp-block-quote p::before,
.mhc-slider > .wp-block-quote p::after {
	color: var(--wp--preset--color--green);
}

.mhc-slider > .wp-block-quote p::before {
	content: "“";
	content: "“" / "";
}

.mhc-slider > .wp-block-quote p::after {
	content: "”";
	content: "”" / "";
}

.mhc-slider > .wp-block-quote cite {
	display: block;
	margin: 0;
	color: var(--wp--preset--color--cream);
	font-size: 1.125rem;
	line-height: 3.25rem;
}

.mhc-slider__count {
	float: right;
	color: var(--wp--preset--color--cream-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

/* ------------------------------------------------------------
   Map and opening hours
   ------------------------------------------------------------ */
.is-style-map {
	margin-bottom: 1.75rem;
}

.is-style-map iframe {
	display: block;
	width: 100%;
	height: 22.5rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--lg);
	filter: grayscale(0.7);
}

.wp-block-table.is-style-hours {
	margin: 0;
	font-size: 0.9375rem;
}

.wp-block-table.is-style-hours table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.is-style-hours th,
.wp-block-table.is-style-hours td {
	padding: 0.5625rem 0;
	border: 0;
	border-bottom: 1px solid rgba(18, 18, 17, 0.15);
	line-height: 1.45;
	text-align: left;
}

.wp-block-table.is-style-hours th {
	font-weight: 400;
}

.wp-block-table.is-style-hours td {
	text-align: right;
}

/* A closed day is toned down: muted on dark, muted ink on the cream panel. */
.wp-block-table.is-style-hours .is-closed {
	color: var(--wp--preset--color--dark-muted);
}

.is-style-cream-band .wp-block-table.is-style-hours .is-closed {
	color: var(--wp--preset--color--ink-muted);
}

/* The caption names the table for assistive technology; the heading above it is the visible label. */
.wp-block-table.is-style-hours > figcaption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Small label headings sit on cream in the contact panel. */
.is-style-cream-band .wp-block-heading.is-style-label {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.is-style-cream-band p a {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	text-decoration-color: var(--wp--preset--color--ink);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------
   FAQ: core Details blocks
   ------------------------------------------------------------ */
.wp-block-details {
	border-top: 1px solid var(--wp--custom--line--soft);
}

.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font: 500 var(--wp--preset--font-size--title) / 1.1 var(--wp--preset--font-family--bricolage);
	font-size: clamp(1.375rem, 2.6vw, 2rem);
	letter-spacing: -0.02em;
	list-style: none;
	cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	content: "+" / "";
	color: var(--wp--preset--color--green);
	font-size: 1.6em;
	line-height: 1;
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details > :not(summary) {
	margin-top: 0.875rem;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-details summary::after {
		transition: transform 0.25s ease;
	}
}