/**
 * Shared content layout helpers (landscape photos).
 * Add class "zani-photo-cover-16-9" on Image or Media & Text blocks in the editor.
 */

/* Titles follow the original site: Vollkorn for H1/H2, menus, and buttons.
   Droid Sans (theme sans font) is body text and H3 intros (~1.22× body, bold). */

:root {
	--zani-font-heading: Vollkorn, Georgia, "Times New Roman", serif;
	--zani-font-body: var(--wp--preset--font-family--droid-sans, "Droid Sans", sans-serif);
	--zani-size-h1: clamp(2rem, 3.5vw, 2.75rem);
	--zani-size-heading: clamp(1.25rem, 1.8vw, 1.4rem);
	--zani-size-sub: clamp(1.125rem, 1.45vw, 1.35rem);
	/* Chapeaus (bold lead lines): the "Lead (chapeau)" font size preset,
	   17px, editable in Styles → Typography → Font sizes. */
	--zani-size-lead: var(--wp--preset--font-size--lead, 1.0625rem);
	--zani-size-body: 0.9375rem;
	--zani-size-h3: var(--zani-size-lead);
}

/* Content column is 66% of the viewport; 17% gutter on each side. */
body {
	--zani-page-width: 66vw;
}

@media (max-width: 782px) {
	:root {
		--zani-size-h1: 1.85rem;
		--zani-size-heading: 1.2rem;
		--zani-size-sub: 1.125rem;
		--zani-size-lead: calc(var(--wp--preset--font-size--lead, 1.0625rem) - 0.0625rem);
		--zani-size-body: 0.875rem;
	}
}

/* The page template stacks a top margin and a top padding. Interior
   pages keep a short gap under the header. The homepage video keeps
   its own spacing. Mobile uses a tighter stack so the title sits
   closer to the sticky header. */
body:not(.home) main.wp-block-group {
	margin-top: 0 !important;
}

body:not(.home) main.wp-block-group > .wp-block-group {
	padding-top: 1.25rem !important;
}

@media (max-width: 781px) {
	body:not(.home) main.wp-block-group > .wp-block-group {
		padding-top: 0.55rem !important;
	}

	/* Keep room for the underline bar, but pull the long subtitle and
	   the hero closer together so the title → photo beat is tighter. */
	body:not(.home) .zani-page-title {
		padding-bottom: 0.8rem;
	}

	body:not(.home) .zani-page-title > .wp-block-post-title::after {
		top: calc(100% + 0.4rem);
	}

	body:not(.home) .wp-block-heading.zani-page-subtitle {
		margin-bottom: 0.5rem;
	}

	/* No long subtitle: short banner needs a little air before the hero. */
	body:not(.home) .zani-page-title:not(:has(+ .zani-page-subtitle)) {
		margin-bottom: 0.5rem;
	}

	/* Theme block spacing adds top margin on post-content and the first
	   hero figure; drop both so the title sits closer to the photo. */
	body:not(.home) .wp-block-post-content {
		margin-block-start: 0 !important;
	}

}

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base, #fff);
}

/* Header logo: a step smaller than the medium image block default. */
header.wp-block-template-part .wp-block-image:has(img.wp-image-20),
header.wp-block-template-part .wp-block-site-logo {
	max-width: 180px;
}

header.wp-block-template-part img.wp-image-20,
header.wp-block-template-part img.custom-logo {
	max-width: 180px;
	width: auto;
	height: auto;
}

body.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

/* Below 600px WordPress makes #wpadminbar position:absolute so it
   scrolls away. Keep the sticky header flush with the viewport or
   content shows through the 46px gap the admin-bar offset left. */
@media (max-width: 600px) {
	body.admin-bar header.wp-block-template-part {
		top: 0;
	}
}

.wp-block-post-title {
	font-family: var(--zani-font-heading);
	font-weight: 700;
	font-size: var(--zani-size-h1);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--contrast, #191919);
	text-wrap: wrap;
	max-width: none;
	width: 100%;
	margin-bottom: 1.15rem;
}

body:not(.home) .wp-block-post-title {
	text-align: center;
}

.wp-block-post-title::after,
.home .wp-block-post-content h1.wp-block-heading:not(.zani-home-tagline)::after,
.wp-block-post-content h2.wp-block-heading::after {
	content: "";
	display: block;
	height: 4px;
	margin-top: 0.7rem;
	border-radius: 999px;
	transform-origin: left center;
	animation: zani-bar-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wp-block-post-title::after {
	width: 5rem;
	background: var(--wp--preset--color--zani-red, #c13303);
}

body:not(.home) .wp-block-post-title::after,
.wp-block-heading.has-text-align-center::after {
	margin-left: auto;
	margin-right: auto;
	transform-origin: center center;
}

/* Previous and next arrows sit on the title line. The names stay in the accessible label. */
/* Short banner label + red bar. Extra padding before the H1 so the
   bar sits near the middle of the short-label → H1 gap. */
.zani-page-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	margin-bottom: 0;
	padding-bottom: 1rem;
}

.zani-page-title > .wp-block-post-title {
	position: relative;
	width: auto;
	max-width: min(46rem, calc(100% - 5.5rem));
	flex: 0 1 auto;
	margin-top: 0;
	margin-bottom: 0;
}

.zani-page-title > .wp-block-post-title::after {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 0.55rem);
	margin: 0 auto;
}

.zani-page-title__prev,
.zani-page-title__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 1.75rem;
	padding: 0.05rem 0.35rem;
	border-radius: 0.2rem;
	color: var(--wp--preset--color--zani-red, #c13303);
	font-family: var(--zani-font-heading);
	font-weight: 700;
	font-size: 1.85rem;
	line-height: 1;
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

a.zani-page-title__prev:hover,
a.zani-page-title__next:hover,
a.zani-page-title__prev:focus-visible,
a.zani-page-title__next:focus-visible {
	color: #fff;
	background-color: var(--wp--preset--color--zani-red, #c13303);
}

.zani-page-title__arrow {
	flex: 0 0 auto;
	font-size: 1em;
	line-height: 1;
}

/* Short banner label keeps H1 size via .wp-block-post-title even as <h3>. */
h3.wp-block-post-title {
	margin: 0;
}

/* Longer WordPress title under the banner — the page H1, at the old subtitle size. */
.wp-block-heading.zani-page-subtitle {
	box-sizing: border-box;
	width: auto;
	max-width: min(46rem, 100%);
	margin: 0.05rem auto 1.15rem;
	font-family: var(--zani-font-heading);
	font-weight: 700;
	font-size: clamp(1.45rem, 2.1vw, 1.65rem) !important;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast, #191919);
	text-align: center;
	text-wrap: balance;
}

.wp-block-post-content :is(h2, h4, h5, h6).wp-block-heading {
	font-family: var(--zani-font-heading);
	font-weight: 700;
	font-size: var(--zani-size-heading);
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast, #191919);
	text-wrap: wrap;
	margin-top: 1.6rem;
}

/* Intro lines under heroes: same sans as body, bold, a step larger. */
.wp-block-post-content h3.wp-block-heading:not(.animated-header-box) {
	font-family: var(--zani-font-body);
	font-weight: 700;
	font-size: var(--zani-size-h3);
	line-height: 1.35;
	letter-spacing: normal;
	color: var(--wp--preset--color--contrast, #191919);
	text-wrap: wrap;
	margin-top: 1.6rem;
}

/* Section headings use the same column as the paragraphs. A full-width
   heading starts further left than the copy and the page looks lopsided. */
.wp-block-post-content.is-layout-constrained > :is(h1, h2, h3, h4, h5, h6).wp-block-heading:not(.alignwide):not(.alignfull) {
	box-sizing: border-box;
	width: auto;
	max-width: min(var(--zani-page-width), 100%);
	margin-left: auto !important;
	margin-right: auto !important;
}

.home .wp-block-post-content h1.wp-block-heading:not(.zani-home-tagline)::after,
.wp-block-post-content h2.wp-block-heading::after {
	width: 3.4rem;
	height: 3px;
	margin-top: 0.5rem;
	background: var(--wp--preset--color--zani-red, #c13303);
	animation-delay: 0.12s;
}

.wp-block-post-content h1.wp-block-heading {
	font-family: var(--zani-font-heading);
	font-weight: 700;
	font-size: var(--zani-size-h1);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast, #191919);
	text-wrap: wrap;
}

/* Galleries keep each photo’s own width (no shared crop frame).
   The gallery itself stays in the same column as the body text.
   A short row lines up on the left. */
.wp-block-post-content .wp-block-gallery.has-nested-images {
	justify-content: flex-start;
}

.wp-block-post-content.is-layout-constrained > .wp-block-gallery.has-nested-images {
	box-sizing: border-box;
	width: auto;
	max-width: min(var(--zani-page-width), 100%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
	margin-top: 0;
	margin-bottom: 0;
	align-self: stretch;
	overflow: hidden;
}

/* Fallback before JS packs rows: natural aspect, no forced crop. */
.wp-block-post-content .wp-block-gallery.has-nested-images:not(.zani-logo-gallery):not(.zani-gallery-fit) figure.wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center center;
	cursor: zoom-in;
}

/* Logo rows. Add "zani-logo-gallery" on that gallery only. */
.wp-block-post-content .wp-block-gallery.zani-logo-gallery.has-nested-images figure.wp-block-image {
	align-self: center;
	height: auto;
	overflow: visible;
}

.wp-block-post-content .wp-block-gallery.zani-logo-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center center;
}

/* Mixed-ratio show photos pack into justified rows. Every photo in a
   row shares that row's height and keeps its own width. A short last
   row stays left. */
.wp-block-post-content .wp-block-gallery.zani-gallery-fit.has-nested-images {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 12px;
}

.wp-block-post-content .wp-block-gallery.zani-gallery-fit .zani-fit-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	min-width: 0;
}

.wp-block-post-content .wp-block-gallery.zani-gallery-fit.has-nested-images figure.wp-block-image {
	display: block;
	flex: 1 1 0;
	align-self: stretch;
	min-width: 0;
	max-width: none;
	width: auto;
	margin: 0 !important;
	overflow: hidden;
	position: relative;
}

.wp-block-post-content .wp-block-gallery.zani-gallery-fit.zani-justified figure.wp-block-image img {
	width: 100%;
	height: 100%;
	max-height: none;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center center;
	cursor: zoom-in;
}

/* Before the row script runs, reserve a row instead of the core
   two-column stack. The two-column stack is what jumps when the
   script then packs the photos. Width and height attributes supply
   the ratio, so each photo already has a width at this height. */
.wp-block-post-content .wp-block-gallery.zani-gallery-fit.has-nested-images:not(.zani-justified) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	gap: 12px;
}

.wp-block-post-content .wp-block-gallery.zani-gallery-fit.has-nested-images:not(.zani-justified) > figure.wp-block-image {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 100% !important;
	height: 168px !important;
	margin: 0 !important;
}

.wp-block-post-content .wp-block-gallery.zani-gallery-fit:not(.zani-justified) figure.wp-block-image img {
	width: auto !important;
	height: 168px !important;
	max-width: 100%;
	max-height: none;
	aspect-ratio: auto;
	object-fit: contain;
	cursor: zoom-in;
}

@media (max-width: 599px) {
	body:not(.page-id-506) .wp-block-post-content .wp-block-gallery.zani-gallery-fit.has-nested-images:not(.zani-justified) > figure.wp-block-image,
	body:not(.page-id-506) .wp-block-post-content .wp-block-gallery.zani-gallery-fit:not(.zani-justified) figure.wp-block-image img {
		width: 100% !important;
		height: auto !important;
		max-height: 70vh;
	}

	body.page-id-506 .wp-block-post-content .wp-block-gallery.zani-gallery-fit.has-nested-images:not(.zani-justified) > figure.wp-block-image,
	body.page-id-506 .wp-block-post-content .wp-block-gallery.zani-gallery-fit:not(.zani-justified) figure.wp-block-image img {
		height: 96px !important;
		width: auto !important;
	}
}

.wp-block-post-content figure.wp-block-image > figcaption,
.wp-block-post-content figure.wp-block-media-text__media > figcaption,
.wp-block-post-content figure.wp-block-gallery > figcaption.blocks-gallery-caption {
	display: none;
}

/* Captions are shown in the lightbox. WordPress still paints a blur
   across the bottom of any gallery photo that has one, because the
   overlay is a ::before matched by :has(figcaption). */
.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	content: none;
}

/* The caption sits on the page, not inside WordPress's overlay. Writing
   into that overlay makes it rebuild the enlarged photo as an empty layer. */
.zani-lightbox-caption {
	position: fixed;
	left: 50%;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	z-index: 100001;
	width: min(40rem, calc(100% - 7.5rem));
	transform: translateX(-50%);
	box-sizing: border-box;
	padding: 0.7rem 1rem 0.85rem;
	background: #f8f7f5 !important;
	color: var(--wp--preset--color--contrast, #191919) !important;
	font-family: var(--zani-font-body);
	font-size: var(--zani-size-body);
	line-height: 1.35;
	text-align: center;
	pointer-events: none;
}

.zani-lightbox-caption figcaption,
.zani-lightbox-caption .zani-photo-title,
.zani-lightbox-caption .zani-photo-note {
	position: static !important;
	color: var(--wp--preset--color--contrast, #191919) !important;
	background: transparent !important;
	text-shadow: none !important;
	max-height: none;
}

.zani-lightbox-caption figcaption {
	margin: 0;
}

.zani-lightbox-caption[hidden] {
	display: none;
}

.zani-lightbox-caption .zani-photo-title,
.zani-lightbox-caption .zani-photo-note {
	display: block;
}

.zani-lightbox-caption .zani-photo-title {
	font-weight: 700;
}

.zani-lightbox-caption .zani-photo-note {
	margin-top: 0.2rem;
	font-weight: 400;
}

/* Entrance motion is for photos on the page. The same classes must not
   hide the copy WordPress shows in the lightbox. */
.wp-lightbox-overlay .zani-photo-await,
.wp-lightbox-overlay .zani-photo-shown {
	opacity: 1;
	animation: none;
	transform: none;
}

/* Core's zoom-out sets visibility:visible on the photo and the scrim,
   which paints them even after the overlay itself is hidden. Once the
   lightbox is closed, nothing from it can stay on screen. */
.wp-lightbox-overlay:not(.active) {
	visibility: hidden !important;
	pointer-events: none !important;
}

.wp-lightbox-overlay:not(.active) .lightbox-image-container,
.wp-lightbox-overlay:not(.active) .scrim {
	animation: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* One column for text, headings, photos, galleries, and videos.
   It fills the page padding and stops at 66% of the viewport (17%
   gutter each side), including blocks nested in groups. Full-bleed
   banners stay full width. Interior page heroes stop at 420px and
   keep their own shape (homepage and contact are unchanged). */
main .is-layout-constrained:not(.zani-contact-hero) > :not(.alignleft):not(.alignright):not(.alignfull):not(.zani-inline-video) {
	max-width: min(var(--zani-page-width), 100%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* On phones the 66vw column is too narrow for long banner labels once
   the prev/next arrows sit beside them (ROVING PERFORMERS, EVENTS
   PRODUCTION). Widen the title row to the padded content width, give
   the arrows a larger tap target, and leave enough room that words
   wrap on boundaries instead of mid-glyph.
   Extra :not()s match the column rule's specificity so this wins. */
@media (max-width: 781px) {
	main .is-layout-constrained:not(.zani-contact-hero) > .zani-page-title:not(.alignleft):not(.alignright):not(.alignfull):not(.zani-inline-video),
	main .is-layout-constrained:not(.zani-contact-hero) > .wp-block-heading.zani-page-subtitle:not(.alignleft):not(.alignright):not(.alignfull):not(.zani-inline-video) {
		max-width: min(100%, 40rem) !important;
	}

	body:not(.home) .zani-page-title {
		gap: 0.55rem;
	}

	.zani-page-title > .wp-block-post-title {
		max-width: min(46rem, calc(100% - 7rem));
		overflow-wrap: normal;
		word-break: normal;
	}

	.zani-page-title__prev,
	.zani-page-title__next {
		min-width: 2.35rem;
		padding: 0.12rem 0.55rem;
		font-size: 2.05rem;
	}
}

body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide:first-of-type,
body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.zani-portrait-hero {
	display: flex;
	justify-content: center;
}

/* Interior heroes stop at 420px and keep their own shape. width:auto
   beats the core alignwide width:100% rule that would otherwise stretch
   tall photos (e.g. Magic Theme) well past that height. Mobile overrides
   below make wide heroes taller with a centre crop. */
body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide:first-of-type img,
body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.zani-portrait-hero img {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 420px;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center center;
}

@media (min-width: 782px) {
	body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide:first-of-type img,
	body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.zani-portrait-hero img {
		height: 420px !important;
	}
}

/* Mobile: bleed heroes edge-to-edge (not the 66vw column) and use a
   shorter cover frame (~2/3 of the earlier 21.5rem) so wide photos crop
   less across the full viewport width. */
@media (max-width: 781px) {
	body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide:first-of-type,
	body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.zani-portrait-hero {
		overflow: hidden;
		box-sizing: border-box;
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}

	body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide:first-of-type img,
	body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.zani-portrait-hero img {
		width: 100% !important;
		height: calc(21.5rem * 2 / 3) !important;
		max-height: calc(21.5rem * 2 / 3);
		object-fit: cover;
		object-position: center center;
	}
}

/* Photos stand still: no zoom-in on load and no zoom on hover (client
   notes of 8 Oct: "remove the animated images"). */
.wp-block-post-content > .wp-block-image.alignwide:first-of-type {
	overflow: hidden;
}

/* Content buttons are a filled rust pill with cream type. Hover and
   keyboard focus clear the fill, leaving rust type and a rounded rule.
   Editor colour and width classes cannot override that. */
.wp-block-post-content .wp-block-button.has-custom-width {
	width: auto !important;
}

.wp-block-post-content .wp-block-button__link {
	background: var(--wp--preset--color--zani-red, #c13303) !important;
	color: #fffbf5 !important;
	border: 1px solid var(--wp--preset--color--zani-red, #c13303);
	border-radius: 999px;
	padding: 0.55rem 1.35rem;
	font-family: var(--zani-font-heading);
	font-weight: 700;
	font-size: var(--zani-size-sub);
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wp-block-post-content .wp-block-button__link:hover,
.wp-block-post-content .wp-block-button__link:focus-visible {
	background: transparent !important;
	color: var(--wp--preset--color--zani-red, #c13303) !important;
	border-color: var(--wp--preset--color--zani-red, #c13303);
	transform: translateY(-2px);
}

.wp-block-post-content .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--zani-red, #c13303);
	outline-offset: 3px;
}

/* Hub-page section titles and photos go to the same page as the button under them. */
.wp-block-post-content h2.wp-block-heading a.zani-section-link {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-content h2.wp-block-heading a.zani-section-link:hover,
.wp-block-post-content h2.wp-block-heading a.zani-section-link:focus-visible {
	color: var(--wp--preset--color--zani-red, #c13303);
}

.wp-block-post-content .wp-block-image a.zani-section-link {
	display: block;
}

.wp-block-post-content .wp-block-image:has(> a.zani-section-link) {
	overflow: hidden;
}


/* Hub pages list a photo for every act. Portrait shots were taller
   than the screen, so each one stops at the same height as the portrait
   hero and keeps its own shape. Artists Agency & Events Production too. */
.page-id-6 .wp-block-post-content .wp-block-image:has(> a.zani-section-link),
.page-id-8 .wp-block-post-content .wp-block-image:has(> a.zani-section-link),
.page-id-9 .wp-block-post-content .wp-block-image:has(> a.zani-section-link) {
	display: flex;
	justify-content: center;
}

/* Stage Shows: flame / Fire Show section photo sits on the left. */
body.page-id-8:not(.home) .wp-block-post-content.is-layout-constrained > .wp-block-image.zani-portrait-hero:has(> a.zani-section-link img.wp-image-735) {
	justify-content: flex-start;
}

.page-id-6 .wp-block-post-content .wp-block-image a.zani-section-link img,
.page-id-8 .wp-block-post-content .wp-block-image a.zani-section-link img,
.page-id-9 .wp-block-post-content .wp-block-image a.zani-section-link img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: contain;
}

/* Roving Performers hub: portrait and landscape section thumbs share one
   height and keep their own widths, left-aligned with the copy. */
.page-id-7 .wp-block-post-content .wp-block-image:has(> a.zani-section-link) {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	max-width: min(var(--zani-page-width), 100%);
	margin-left: auto;
	margin-right: auto;
}

.page-id-7 .wp-block-post-content .wp-block-image a.zani-section-link {
	display: block;
	line-height: 0;
	max-width: 100%;
}

.page-id-7 .wp-block-post-content .wp-block-image a.zani-section-link img {
	width: auto;
	max-width: 100%;
	height: 280px;
	max-height: 280px;
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 600px) {
	.page-id-7 .wp-block-post-content .wp-block-image a.zani-section-link img {
		height: auto;
		max-height: 220px;
		width: 100%;
		object-fit: contain;
	}
}


.wp-block-post-content .wp-block-image a.zani-section-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--zani-red, #c13303);
	outline-offset: 3px;
}

/* The showreel sits on a photograph. It uses the same rust pill, and
   hover swaps back to a cream fill so the label stays readable. */
.home .wp-block-cover .wp-block-button__link {
	background: var(--wp--preset--color--zani-red, #c13303) !important;
	color: #fffbf5 !important;
}

.home .wp-block-cover .wp-block-button__link:hover,
.home .wp-block-cover .wp-block-button__link:focus-visible {
	background: #fffbf5 !important;
	color: var(--wp--preset--color--zani-red, #c13303) !important;
}

/* Artists Agency, Roving Performers, Stage Shows & Events Production hubs:
   left-aligned copy under each section photo; short label above
   the longer SEO H2. */
.page-id-6 .wp-block-post-content h2.wp-block-heading,
.page-id-6 .wp-block-post-content h3.wp-block-heading,
.page-id-6 .wp-block-post-content p,
.page-id-7 .wp-block-post-content h2.wp-block-heading,
.page-id-7 .wp-block-post-content h3.wp-block-heading,
.page-id-7 .wp-block-post-content p,
.page-id-8 .wp-block-post-content h2.wp-block-heading,
.page-id-8 .wp-block-post-content h3.wp-block-heading,
.page-id-8 .wp-block-post-content p,
.page-id-9 .wp-block-post-content h2.wp-block-heading,
.page-id-9 .wp-block-post-content h3.wp-block-heading,
.page-id-9 .wp-block-post-content p {
	text-align: left;
}

.page-id-6 .wp-block-post-content h2.wp-block-heading::after,
.page-id-7 .wp-block-post-content h2.wp-block-heading::after,
.page-id-8 .wp-block-post-content h2.wp-block-heading::after,
.page-id-9 .wp-block-post-content h2.wp-block-heading::after {
	margin-left: 0;
	margin-right: 0;
	transform-origin: left center;
}

/* Short hub label: same size as the page banner, with a soft banner
   backdrop so each section group reads as its own block. */
.page-id-6 .wp-block-post-content > p.zani-section-short,
.page-id-7 .wp-block-post-content > p.zani-section-short,
.page-id-8 .wp-block-post-content > p.zani-section-short,
.page-id-9 .wp-block-post-content > p.zani-section-short {
	margin-block-start: 4rem !important;
	margin-block-end: 0.55rem !important;
	text-align: left;
}

.page-id-6 .wp-block-post-content > p.zani-section-short a.zani-section-link,
.page-id-7 .wp-block-post-content > p.zani-section-short a.zani-section-link,
.page-id-8 .wp-block-post-content > p.zani-section-short a.zani-section-link,
.page-id-9 .wp-block-post-content > p.zani-section-short a.zani-section-link {
	display: inline-block;
	box-sizing: border-box;
	max-width: min(var(--zani-page-width), 100%);
	padding: 0.55rem 1.65rem 0.6rem;
	border-radius: 0.15rem;
	background:
		linear-gradient(105deg, color-mix(in srgb, var(--wp--preset--color--zani-red, #c13303) 12%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--zani-red, #c13303) 4%, transparent) 38%, transparent 38%),
		#f3eee6;
	box-shadow: inset 4px 0 0 var(--wp--preset--color--zani-red, #c13303);
	color: var(--wp--preset--color--contrast, #191919);
	font-family: var(--zani-font-heading) !important;
	font-size: var(--zani-size-h1) !important;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-wrap: balance;
	transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.page-id-6 .wp-block-post-content > p.zani-section-short a.zani-section-link:hover,
.page-id-6 .wp-block-post-content > p.zani-section-short a.zani-section-link:focus-visible,
.page-id-7 .wp-block-post-content > p.zani-section-short a.zani-section-link:hover,
.page-id-7 .wp-block-post-content > p.zani-section-short a.zani-section-link:focus-visible,
.page-id-8 .wp-block-post-content > p.zani-section-short a.zani-section-link:hover,
.page-id-8 .wp-block-post-content > p.zani-section-short a.zani-section-link:focus-visible,
.page-id-9 .wp-block-post-content > p.zani-section-short a.zani-section-link:hover,
.page-id-9 .wp-block-post-content > p.zani-section-short a.zani-section-link:focus-visible {
	color: var(--wp--preset--color--zani-red, #c13303);
	background:
		linear-gradient(105deg, color-mix(in srgb, var(--wp--preset--color--zani-red, #c13303) 18%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--zani-red, #c13303) 6%, transparent) 38%, transparent 38%),
		#fffbf5;
	box-shadow: inset 4px 0 0 var(--wp--preset--color--zani-red, #c13303);
}

.page-id-6 .wp-block-post-content > p.zani-section-short a.zani-section-link:focus-visible,
.page-id-7 .wp-block-post-content > p.zani-section-short a.zani-section-link:focus-visible,
.page-id-8 .wp-block-post-content > p.zani-section-short a.zani-section-link:focus-visible,
.page-id-9 .wp-block-post-content > p.zani-section-short a.zani-section-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--zani-red, #c13303);
	outline-offset: 3px;
}

.page-id-6 .wp-block-post-content > h2.wp-block-heading,
.page-id-7 .wp-block-post-content > h2.wp-block-heading,
.page-id-8 .wp-block-post-content > h2.wp-block-heading,
.page-id-9 .wp-block-post-content > h2.wp-block-heading {
	margin-top: 3.75rem;
}

.page-id-6 .wp-block-post-content > p.zani-section-short + h2.wp-block-heading,
.page-id-7 .wp-block-post-content > p.zani-section-short + h2.wp-block-heading,
.page-id-8 .wp-block-post-content > p.zani-section-short + h2.wp-block-heading,
.page-id-9 .wp-block-post-content > p.zani-section-short + h2.wp-block-heading {
	margin-top: 0.35rem;
}

.page-id-6 .wp-block-post-content .wp-block-buttons,
.page-id-7 .wp-block-post-content .wp-block-buttons,
.page-id-8 .wp-block-post-content .wp-block-buttons,
.page-id-9 .wp-block-post-content .wp-block-buttons {
	justify-content: flex-start;
	margin-top: calc(0.35rem + var(--zani-size-body) * 1.4);
	margin-bottom: 0.5rem;
}

@keyframes zani-hero-in {
	0% {
		opacity: 0;
		transform: translateY(32px) scale(0.94);
	}
	58% {
		opacity: 1;
		transform: translateY(-8px) scale(1.015);
	}
	78% {
		transform: translateY(3px) scale(0.995);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes zani-bar-in {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-title::after,
	.home .wp-block-post-content h1.wp-block-heading:not(.zani-home-tagline)::after,
	.wp-block-post-content h2.wp-block-heading::after,
	.wp-block-post-content > .wp-block-image.alignwide:first-of-type {
		animation: none;
	}

	.wp-block-post-content > .wp-block-image.alignwide:first-of-type img,
	.wp-block-post-content > .wp-block-image.alignwide:first-of-type:hover img,
	.wp-block-post-content .wp-block-image a.zani-section-link img,
	.wp-block-post-content .wp-block-image a.zani-section-link:hover img,
	.wp-block-post-content .wp-block-button__link,
	.wp-block-post-content .wp-block-button__link:hover,
	.page-id-148 .zani-contact-hero .wpcf7 input[type="submit"],
	.page-id-148 .zani-contact-hero .wpcf7 input[type="submit"]:hover {
		transform: none;
		transition: none;
	}

	.home .animated-header-box .zani-title-line > span,
	.home .wp-block-post-content .animated-header-box::after,
	.home .wp-block-cover .wp-block-buttons,
	.home .wp-block-post-content :is(h1, h2, h3, h4, p),
	.home .wp-block-post-content .wp-block-buttons,
	.home .showcase-4col-wrapper,
	.home .zani-testimonials,
	.home .wp-block-custom-video-carousel,
	body:not(.home) .wp-block-post-content .wp-block-image,
	body:not(.home) .wp-block-post-content .wp-block-media-text__media,
	.zani-photo-await,
	.zani-photo-shown {
		animation: none;
		opacity: 1;
		transform: none;
		filter: none;
	}
}

/* Event-production show videos stay on the page column. Hero photos do not. */
.wp-block-post-content.is-layout-constrained > .wp-block-embed.zani-large-embed {
	width: min(var(--zani-page-width), 100%);
	max-width: var(--zani-page-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 1.75rem;
}

/* A show video that sits in the body, under the hero photo, stays narrower
   than the wide column so it does not compete with that picture. Left edge
   matches the text column (not centered in the full viewport). Spec beats the
   shared constrained-layout margin:auto rule. */
main .wp-block-post-content.is-layout-constrained > .wp-block-embed.zani-inline-video {
	/* Never wider than the text column it starts at (on phones the full
	   width plus the column margin ran off the screen). */
	width: min(720px, min(var(--zani-page-width), 100%));
	max-width: min(720px, min(var(--zani-page-width), 100%)) !important;
	margin-top: 2.25rem;
	margin-bottom: 0.5rem;
	margin-left: max(0px, calc((100% - min(var(--zani-page-width), 100%)) / 2)) !important;
	margin-right: auto !important;
}

.wp-block-image.zani-photo-cover-16-9 {
	overflow: hidden;
}

.wp-block-image.zani-photo-cover-16-9 img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center center;
	transform: scale(1.07);
	transform-origin: center center;
}

/* The acrobat-on-mirror-ball shot is a 4:3 phone photo. Full height it
   fills the acts section, so it stays centered at the original site
   width and is cropped to a wide 2:1 frame. The performance sits in
   the upper part of the photo; the crop keeps that and drops the floor. */
.wp-block-post-content .wp-block-image:has(.wp-image-1465) {
	width: min(960px, 100%);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.wp-block-post-content .wp-block-image .wp-image-1465 {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: center 12%;
}

/* Two-column text-and-photo rows give the photo more than half the row.
   It keeps its own shape and opens in the lightbox. Homepage service
   photos use a wider frame than interior pages. */
.wp-block-post-content .wp-block-media-text {
	grid-template-columns: minmax(0, 62%) minmax(0, 1fr) !important;
}

.home .wp-block-post-content .wp-block-media-text {
	grid-template-columns: minmax(0, 66%) minmax(0, 1fr) !important;
}

.wp-block-post-content .wp-block-media-text.has-media-on-the-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, 62%) !important;
}

.home .wp-block-post-content .wp-block-media-text.has-media-on-the-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, 66%) !important;
}

.wp-block-post-content .wp-block-media-text .wp-block-media-text__media,
.wp-block-post-content .wp-block-media-text.zani-photo-cover-16-9 .wp-block-media-text__media {
	overflow: hidden;
	align-self: center;
}

.wp-block-post-content .wp-block-media-text .wp-block-media-text__media img,
.wp-block-post-content .wp-block-media-text.zani-photo-cover-16-9 .wp-block-media-text__media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center center;
	transform: none;
	cursor: zoom-in;
}

/* Wide photos zoom into the same tall frame as the portrait shots.
   Homepage service columns keep the photo's own wide shape instead. */
.wp-block-post-content .wp-block-media-text .wp-block-media-text__media img.zani-landscape-zoom {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center center;
}

/* The face-changing act is framed on the left of the photo. */
.wp-block-post-content .wp-block-media-text .wp-block-media-text__media img.wp-image-692,
.wp-block-post-content .wp-block-media-text .wp-block-media-text__media img.wp-image-692.zani-landscape-zoom,
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.wp-image-692,
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.wp-image-692.zani-landscape-zoom {
	object-position: left center;
}

/* Close-up magic: a bit wider than the 4:5 agency crop; open the left only. */
.wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.wp-image-745,
.wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.wp-image-745.zani-landscape-zoom,
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.wp-image-745,
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.wp-image-745.zani-landscape-zoom {
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	object-position: 37% center;
}

/* Section headings on the dancers page need air above the dance-show title. */
.page-id-303 .wp-block-post-content > h2.wp-block-heading {
	margin-top: 3.25rem;
}

/* Special acts pairs a photo with a block of copy. The portrait shots
   ran past the text, so each photo stops at the hero height and keeps
   its own shape instead of the tall crop. Mascots uses the same pairing.
   Rows set to the "Half-width photo" style follow that style instead. */
.page-id-312 .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media,
.page-id-503 .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media {
	display: flex;
	justify-content: center;
}

.page-id-312 .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img,
.page-id-312 .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.zani-landscape-zoom,
.page-id-503 .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img,
.page-id-503 .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.zani-landscape-zoom {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 420px;
	aspect-ratio: auto !important;
	object-fit: contain !important;
}

/* Mascots: keep the photo column compact so Ducky / Easter / Giant Puppets
   sit beside the copy instead of taking the site-wide 62% photo width. */
.page-id-503 .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) {
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr) !important;
	column-gap: 1.5rem;
	align-items: start;
}

.page-id-503 .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half).has-media-on-the-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, 280px) !important;
}

.page-id-503 .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) > .wp-block-media-text__content {
	padding-inline: 0;
}

/* Mascots: remaining section galleries (snowmen, smiley) stay under the
   same height as the page hero so portraits do not dominate the copy. */
.page-id-503 .wp-block-post-content .wp-block-gallery.zani-gallery-fit .zani-fit-row {
	max-height: 420px;
}

.page-id-503 .wp-block-post-content .wp-block-gallery.zani-gallery-fit.zani-justified figure.wp-block-image img {
	max-height: 420px;
}

/* Halloween Shows: section photos (beyond the hero) stop at the same
   fixed height as the page hero and keep their own shape. */
.page-id-1487 .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide:not(:first-of-type) {
	display: flex;
	justify-content: center;
}

.page-id-1487 .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide:not(:first-of-type) img {
	width: auto !important;
	max-width: 100%;
	height: 420px !important;
	max-height: 420px;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center center;
}

/* Artists' Agency: section photos were dominating the copy. Smaller
   cropped frames, top-aligned with the text, more air between sections.
   (Special Acts keeps its own contain rules — it is not in this set.) */
.zani-artists-agency .wp-block-post-content > h2.wp-block-heading {
	margin-top: 3.25rem;
}

.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) {
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr) !important;
	column-gap: 1.5rem;
	margin-block: 0.85rem 0.5rem;
}

.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half).has-media-on-the-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, 240px) !important;
}

.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half).is-vertically-aligned-center > .wp-block-media-text__media,
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half).is-vertically-aligned-center > .wp-block-media-text__content,
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) > .wp-block-media-text__media,
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) > .wp-block-media-text__content {
	align-self: start;
}

.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) > .wp-block-media-text__content {
	padding-inline: 0;
}

/* First line in the text column should meet the top of the photo.
   Section H3s otherwise keep a 1.6rem top margin meant for solo intros. */
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__content > :first-child {
	margin-top: 0;
}

.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img,
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.zani-landscape-zoom {
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: 4 / 5 !important;
	object-fit: cover !important;
	object-position: center center;
}

/* Hand-to-hand act (HK Acts): crop 20% off each side only, keep full height. */
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.wp-image-908 {
	width: 100%;
	max-width: 100%;
	height: auto;
	/* 0.6 × intrinsic width/height (1362×1600) */
	aspect-ratio: calc(0.6 * 1362 / 1600) !important;
	object-fit: cover !important;
	object-position: center center;
	transform: none;
	margin-inline: 0;
}

/* Club-passing jugglers: keep the full landscape frame, no tall crop. */
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.wp-image-725,
.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half) .wp-block-media-text__media img.wp-image-725.zani-landscape-zoom,
.wp-block-post-content .wp-block-media-text .wp-block-media-text__media img.wp-image-725,
.wp-block-post-content .wp-block-media-text .wp-block-media-text__media img.wp-image-725.zani-landscape-zoom {
	/* Intrinsic 1600×1200 */
	aspect-ratio: 4 / 3 !important;
	object-fit: contain !important;
	height: auto !important;
}

.home .wp-block-post-content .wp-block-media-text .wp-block-media-text__media img {
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center center;
}

/* Service link rows sit under centered headings, so each line is centered. */
.home .wp-block-post-content > .wp-block-group.alignwide > .wp-block-buttons {
	justify-content: center;
}

/* Stack photo + copy on small screens. Artists Agency / Mascots desktop
   column rules are more specific and were keeping a two-column grid, so
   stacked-on-mobile put both children in column 1 while the empty
   photo track still took the width — collapsing right-media copy to 0. */
@media (max-width: 600px) {
	.wp-block-post-content .wp-block-media-text,
	.wp-block-post-content .wp-block-media-text.has-media-on-the-right,
	.home .wp-block-post-content .wp-block-media-text,
	.home .wp-block-post-content .wp-block-media-text.has-media-on-the-right,
	.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half),
	.zani-artists-agency .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half).has-media-on-the-right,
	.page-id-503 .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half),
	.page-id-503 .wp-block-post-content .wp-block-media-text:not(.is-style-zani-half).has-media-on-the-right {
		grid-template-columns: 100% !important;
	}
}

/* Contact page: hero spacing and form.
   The hero is itself a constrained layout; WordPress then caps children
   at content-size (90% here), which clips the white heading and intro
   on phones. Use the padded hero width instead. */
.page-id-148 .zani-contact-hero.wp-block-group {
	position: relative;
	padding: 4.5rem 1.5rem 4rem;
	margin-top: 0.5rem;
}

.page-id-148 .zani-contact-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: min(40rem, 100%) !important;
}

.page-id-148 .zani-contact-hero.wp-block-group > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Mobile hero is flex column; WP constrained margins are auto, so
   children shrink to one line and clip. Stretch them to the padded width. */
.page-id-148 .zani-contact-hero > .wp-block-heading,
.page-id-148 .zani-contact-hero > p {
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
}

.page-id-148 .zani-contact-hero > .wp-block-heading {
	margin-bottom: 0.65rem !important;
	max-width: min(28rem, 100%) !important;
	text-wrap: balance;
}

.page-id-148 .zani-contact-hero > p {
	max-width: min(38rem, 100%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-wrap: pretty;
}

/* Keep the intro line and form below the magician's head. */
.page-id-148 .zani-contact-hero > p.wp-block-paragraph:first-of-type {
	margin-top: 15.5rem !important;
}

.page-id-148 .zani-contact-hero.wp-block-group > .wpcf7 {
	max-width: 40rem !important;
	margin-top: 3.5rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 1.35rem 1.35rem 1.15rem !important;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(22, 22, 22, 0.22);
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.page-id-148 .zani-contact-hero .wpcf7 form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0.85rem;
	row-gap: 0.85rem;
	width: 100%;
}

.page-id-148 .zani-contact-hero .wpcf7 form > p {
	margin: 0;
}

.page-id-148 .zani-contact-hero .wpcf7 form > p.zani-span-2,
.page-id-148 .zani-contact-hero .wpcf7 form > .wpcf7-response-output {
	grid-column: 1 / -1;
}

.page-id-148 .zani-contact-hero .wpcf7 label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	color: var(--wp--preset--color--contrast, #191919);
	font-family: var(--zani-font-body);
	font-size: var(--zani-size-body) !important;
	font-weight: 650;
	letter-spacing: 0.06em;
}

.page-id-148 .zani-contact-hero .wpcf7 input:not([type="submit"]),
.page-id-148 .zani-contact-hero .wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #5c5c5c;
	border-radius: 10px;
	min-height: 2.85rem;
	padding: 0.55rem 0.75rem;
	font-family: var(--zani-font-body);
	font-size: var(--zani-size-body);
	font-weight: 400;
	letter-spacing: normal;
	background: #fff;
	color: var(--wp--preset--color--contrast, #191919);
}

.page-id-148 .zani-contact-hero .wpcf7 textarea {
	min-height: 8rem;
	resize: vertical;
}

.page-id-148 .zani-contact-hero .wpcf7 input:focus,
.page-id-148 .zani-contact-hero .wpcf7 textarea:focus {
	border-color: #1a1a1a;
	outline: 2px solid rgba(0, 0, 0, 0.12);
	outline-offset: 1px;
}

.page-id-148 .zani-contact-hero .wpcf7 form > p:has(input[type="submit"]) {
	justify-self: start;
}

.page-id-148 .zani-contact-hero .wpcf7 input[type="submit"] {
	width: auto;
	margin-top: 0.25rem;
	background: #161616;
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.8rem 1.6rem;
	font-family: var(--zani-font-heading);
	font-weight: 700;
	font-size: var(--zani-size-sub);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.page-id-148 .zani-contact-hero .wpcf7 input[type="submit"]:hover,
.page-id-148 .zani-contact-hero .wpcf7 input[type="submit"]:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--zani-red, #c13303) 80%, #000);
	transform: translateY(-2px);
}

.page-id-148 .zani-contact-hero .wpcf7-response-output {
	margin: 0.25rem 0 0;
	border-radius: 10px;
}

.page-id-148 .zani-contact-hero .wpcf7-not-valid-tip {
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: normal;
}

@media (max-width: 781px) {
	/* Zoomed-out photo band, then CTA + copy + form on the page
	   background (not over the face). Image aspect is 1920×1601. */
	.page-id-148 .zani-contact-hero.wp-block-group {
		display: flex;
		flex-direction: column;
		padding: calc(100vw * 1601 / 1920) 1rem 2rem !important;
		background-size: 100% auto !important;
		background-repeat: no-repeat !important;
		background-position: center top !important;
		background-origin: border-box !important;
		background-color: var(--wp--preset--color--base, #f8f7f5) !important;
	}

	.page-id-148 .zani-contact-hero > .wp-block-heading {
		color: var(--wp--preset--color--contrast, #191919) !important;
		text-shadow: none !important;
		margin-top: 1.35rem !important;
		margin-bottom: 0.55rem !important;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: min(28rem, 100%) !important;
	}

	.page-id-148 .zani-contact-hero > p.wp-block-paragraph:first-of-type {
		color: var(--wp--preset--color--contrast, #191919) !important;
		margin-top: 0 !important;
		margin-bottom: 1.35rem !important;
		text-shadow: none !important;
	}

	.page-id-148 .zani-contact-hero.wp-block-group > .wpcf7 {
		margin-top: 0 !important;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
	}

	.page-id-148 .zani-contact-hero > p.has-small-font-size {
		color: var(--wp--preset--color--contrast, #191919) !important;
		margin-top: 1rem !important;
	}

	.page-id-148 .zani-contact-hero > p.has-small-font-size a {
		color: inherit;
	}
}

@media (max-width: 640px) {
	.page-id-148 .zani-contact-hero .wpcf7 form {
		grid-template-columns: 1fr;
	}

	.page-id-148 .zani-contact-hero .wpcf7 form > p.zani-span-2 {
		grid-column: auto;
	}
}

/* The homepage title stays available to the browser tab. The custom video hero is the visible header. */
.home .wp-block-post-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.home .wp-block-post-title::after {
	content: none;
}

.home main.wp-block-group {
	margin-top: 0;
}

.home main > .wp-block-group.alignfull {
	padding-top: 0;
}

/* Tagline under the hero (SEO H1): Vollkorn, 30px, near-black — same look as the old paragraph. */
.home .zani-home-tagline,
.home h1.zani-home-tagline.wp-block-heading {
	margin-block: 0;
	font-family: var(--zani-font-heading) !important;
	font-weight: 700;
	font-size: clamp(1.25rem, 2.2vw, 1.875rem) !important;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast, #191919);
	text-align: left;
	text-wrap: wrap;
	max-width: none;
	width: 100%;
}

.home .zani-home-tagline strong {
	font-weight: 700;
}

/* As the H1 the tagline keeps the top gap it had as a paragraph. */
.home .wp-block-post-content h1.zani-home-tagline {
	margin-block-start: 0.4rem !important;
}

@media (max-width: 782px) {
	.home .wp-block-post-content h1.zani-home-tagline {
		margin-block-start: 0.28rem !important;
	}
}

/* Section intro lines on the homepage are H3 heading blocks (class
   zani-home-intro) for SEO, but keep
   the exact look of the paragraph they replaced: body font, size, colour,
   spacing, and case. The text is bold because it is wrapped in <strong>,
   so the heading itself stays at normal weight. */
.home .wp-block-post-content h3.wp-block-heading.zani-home-intro {
	font-family: var(--zani-font-body) !important;
	font-size: var(--zani-size-lead) !important;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: inherit;
	color: inherit;
	text-transform: none;
	text-wrap: pretty;
	margin-block-start: 0.4rem !important;
	margin-block-end: 0 !important;
}

/* Same lead size a paragraph gets straight after an H1/H2. */
.home .wp-block-post-content :is(h1, h2) + h3.wp-block-heading.zani-home-intro {
	font-size: var(--zani-size-lead) !important;
	line-height: 1.4;
}

@media (max-width: 782px) {
	.home .wp-block-post-content h3.wp-block-heading.zani-home-intro {
		line-height: 1.35;
		margin-block-start: 0.28rem !important;
	}

	.home .wp-block-post-content :is(h1, h2) + h3.wp-block-heading.zani-home-intro {
		line-height: 1.4;
	}
}

/* Hero slogan: each line rises into the box, then a gloss sweep crosses it. */
.home .animated-header-box {
	position: relative;
	overflow: hidden;
}

.home .animated-header-box strong {
	display: block;
}

.home .animated-header-box .zani-title-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.04em;
}

.home .animated-header-box .zani-title-line > span {
	display: block;
	animation: zani-line-rise 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Hero slogan keeps the old large size; markup is body text for SEO. */
.home .wp-block-cover .animated-header-box,
.home .wp-block-post-content .animated-header-box {
	font-family: var(--zani-font-heading) !important;
	font-size: var(--zani-size-h1) !important;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	max-width: none;
	width: 100%;
	text-wrap: wrap;
	/* Beats the paragraph spacing rule; the slogan is a paragraph block. */
	margin-block: 0 !important;
}

.home .wp-block-post-content .animated-header-box::after {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	display: block;
	width: 42%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
	transform: skewX(-18deg);
	transform-origin: center;
	animation: zani-title-shine 1.05s ease-in-out 0.95s both;
	pointer-events: none;
}

.home .wp-block-post-content .animated-header-box:hover::after {
	animation: zani-title-shine 0.8s ease-in-out;
}

.home .wp-block-cover .wp-block-buttons {
	animation: zani-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

@keyframes zani-line-rise {
	from {
		opacity: 0;
		transform: translateY(115%);
		filter: blur(8px);
	}

	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@keyframes zani-title-shine {
	from {
		left: -75%;
	}

	to {
		left: 150%;
	}
}

@keyframes zani-fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Homepage copy eases in as it enters the viewport. */
@supports (animation-timeline: view()) {
	.home .wp-block-post-content :is(h1, h2, h3, h4, p),
	.home .wp-block-post-content .wp-block-buttons,
	.home .showcase-4col-wrapper,
	.home .zani-testimonials,
	.home .wp-block-custom-video-carousel {
		animation: zani-scroll-in linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 42%;
	}

	.home .wp-block-columns .wp-block-column:nth-child(2) > h4 {
		animation-range: entry 10% entry 52%;
	}

	.home .wp-block-columns .wp-block-column:nth-child(3) > h4 {
		animation-range: entry 18% entry 60%;
	}

	.home .wp-block-cover :is(h2, p, .wp-block-buttons),
	.home .animated-header-box,
	.home .vc-gallery-item :is(h3, p),
	.home .zani-testimonials :is(h2, h3, h4, p, blockquote),
	.home .wp-block-custom-video-carousel :is(h2, h3, h4, p, .wp-block-image),
	.home .wp-block-gallery :is(.wp-block-image, figure),
	.home .wp-block-media-text .wp-block-image {
		animation: none;
	}

	.home .wp-block-post-content p + p,
	.home .wp-block-post-content h3.zani-home-intro + p {
		animation-range: entry 8% entry 50%;
	}

	.home .wp-block-cover .wp-block-buttons {
		animation: zani-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
		animation-timeline: auto;
		animation-range: normal;
	}

	.home .zani-trait,
	.home .zani-trait p {
		animation: none;
	}
}

@keyframes zani-scroll-in {
	from {
		opacity: 0;
		transform: translateY(36px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Photos no longer animate in (client note, 8 Oct). */

/* Partner logos sit on the page background. The carousel panel and logo
   mats stay clear so the page colour shows through. */
.home .showcase-4col-grid,
.page-id-148 .showcase-2col-grid,
.page-id-148 .wp-block-gallery.has-nested-images figure.wp-block-image,
.page-id-148 .wp-block-gallery.has-nested-images figure.wp-block-image img,
.home .logo-item,
.home .logo-item img,
.page-id-148 .logo-item,
.page-id-148 .logo-item img {
	background: transparent !important;
	box-shadow: none;
}

/* Contact — Partners of 20 years: one centered row, shared midline,
   even gaps. Logos keep their own shape but sit on a common centre line.
   Specificity must beat the shared 66vw column rule. */
main .is-layout-constrained:not(.zani-contact-hero) > .wp-block-gallery.zani-logo-gallery.has-nested-images,
.page-id-148 .wp-block-post-content .wp-block-gallery.zani-logo-gallery.has-nested-images {
	display: flex !important;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 2rem 2.75rem;
	width: 100%;
	max-width: min(52rem, 100%) !important;
	margin-inline: auto !important;
}

.page-id-148 .wp-block-post-content .wp-block-gallery.zani-logo-gallery.has-nested-images figure.wp-block-image {
	flex: 1 1 0;
	width: auto !important;
	max-width: 11.5rem !important;
	height: 5.75rem;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center !important;
}

.page-id-148 .wp-block-post-content .wp-block-gallery.zani-logo-gallery.has-nested-images figure.wp-block-image img {
	width: auto !important;
	max-width: 100% !important;
	max-height: 4.75rem !important;
	height: auto !important;
	object-fit: contain;
	object-position: center center;
}

@media (max-width: 600px) {
	/* Same specificity as the desktop flex rule (main … > gallery), or
	   that nowrap row wins and the 2×2 never appears. */
	main .is-layout-constrained:not(.zani-contact-hero) > .wp-block-gallery.zani-logo-gallery.has-nested-images,
	.page-id-148 .wp-block-post-content .wp-block-gallery.zani-logo-gallery.has-nested-images {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, auto);
		flex-wrap: unset;
		gap: 1.35rem 1.5rem;
		width: 100%;
		max-width: 100% !important;
		justify-content: unset;
		align-items: center;
		justify-items: center;
	}

	main .is-layout-constrained:not(.zani-contact-hero) > .wp-block-gallery.zani-logo-gallery.has-nested-images figure.wp-block-image,
	.page-id-148 .wp-block-post-content .wp-block-gallery.zani-logo-gallery.has-nested-images figure.wp-block-image {
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 5rem;
		margin: 0 !important;
	}

	main .is-layout-constrained:not(.zani-contact-hero) > .wp-block-gallery.zani-logo-gallery.has-nested-images figure.wp-block-image img,
	.page-id-148 .wp-block-post-content .wp-block-gallery.zani-logo-gallery.has-nested-images figure.wp-block-image img {
		max-height: 4rem !important;
	}

	/* Regular Partners carousel: keep both columns side-by-side on phones.
	   The page HTML used to stack them into one column, which looked like
	   a doubled-up marquee. */
	.page-id-148 .showcase-2col-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;
		padding: 1.25rem 0.85rem !important;
	}

	.page-id-148 .showcase-2col-wrapper .logo-viewport {
		height: 240px;
	}

	.page-id-148 .showcase-2col-wrapper .scroll-set {
		gap: 18px;
		padding-bottom: 18px;
	}

	.page-id-148 .showcase-2col-wrapper .logo-item {
		height: 42px;
	}

	.page-id-148 .showcase-2col-wrapper .logo-item img {
		max-height: 34px;
		max-width: 92%;
	}

	.page-id-148 .showcase-2col-wrapper .logo-item.size-lg img {
		max-height: 40px;
	}

	.page-id-148 .showcase-2col-wrapper .logo-item.size-sm img {
		max-height: 26px;
	}
}

.zani-showreel-dialog {
	width: min(960px, calc(100vw - 2rem));
	max-width: calc(100vw - 2rem);
	padding: 0;
	border: 0;
	background: #111;
	color: #fff;
}

.zani-showreel-dialog::backdrop {
	background: rgba(0, 0, 0, 0.72);
}

.zani-showreel-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.zani-showreel-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Four-step type scale. Utility font-size classes cannot add a fifth size. */
body {
	font-family: var(--zani-font-body);
	font-size: var(--zani-size-body);
	font-weight: 400;
	line-height: 1.4;
}

.wp-block-post-content p,
.wp-block-media-text__content p,
.vc-gallery-item p,
.page-id-148 .wpcf7 input,
.page-id-148 .wpcf7 textarea,
.page-id-148 .wpcf7 label {
	font-family: var(--zani-font-body);
	font-size: var(--zani-size-body);
	line-height: 1.4;
}

.wp-block-post-content p.wp-block-paragraph,
.wp-block-media-text__content p {
	margin-block-start: 0.4rem !important;
	margin-block-end: 0 !important;
}

.wp-block-post-content :is(h1, h2) + p,
.wp-block-post-content :is(h1, h2) + p.wp-block-paragraph {
	font-size: var(--zani-size-lead);
	line-height: 1.4;
}

h1.wp-block-heading,
h1.wp-block-post-title,
.wp-block-post-title {
	font-family: var(--zani-font-heading) !important;
	font-size: var(--zani-size-h1) !important;
	font-weight: 700;
	max-width: none;
	text-wrap: wrap;
}

.wp-block-post-content :is(h2, h4, h5, h6).wp-block-heading {
	font-family: var(--zani-font-heading) !important;
	font-size: var(--zani-size-heading) !important;
	font-weight: 700;
}

.wp-block-post-content h3.wp-block-heading:not(.animated-header-box) {
	font-family: var(--zani-font-body) !important;
	font-size: var(--zani-size-h3) !important;
	font-weight: 700;
}

.vc-gallery-item h3,
.wp-block-button__link,
.page-id-148 .wpcf7 input[type="submit"],
header .wp-block-navigation .wp-block-navigation-item__content,
footer .wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--zani-font-heading) !important;
	font-size: var(--zani-size-sub) !important;
	font-weight: 700;
}

header .wp-block-navigation .wp-block-navigation-item__content,
footer .wp-block-navigation .wp-block-navigation-item__content {
	letter-spacing: 0.01em;
	text-transform: none;
}

header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
footer .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-weight: 400;
}

/* Right-aligned menus open each dropdown back toward the logo. Start them
   just to the right of the parent label instead. Long lists stay on screen. */
@media (min-width: 900px) {
	header .wp-block-navigation.items-justified-right .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		left: 0.75rem;
		right: auto;
	}

	header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-top: 0.22rem;
		padding-bottom: 0.22rem;
		line-height: 1.15;
	}

	header .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item {
		margin-bottom: 0;
	}

	header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		max-height: calc(100vh - 6.5rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* Footer menus sit at the page bottom; open upward so they do not
   extend the page or spill into empty space below the copyright. */
@media (min-width: 782px) {
	footer .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		top: auto;
		bottom: 100%;
	}

	footer .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-top: 0.22rem;
		padding-bottom: 0.22rem;
		line-height: 1.15;
	}

	footer .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item {
		margin-bottom: 0;
	}

	footer .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	footer .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		max-height: min(70vh, calc(100vh - 6.5rem));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

header .wp-block-navigation .wp-block-navigation__submenu-icon,
footer .wp-block-navigation .wp-block-navigation__submenu-icon {
	margin-right: 5px;
}

.vc-gallery-item p {
	margin-top: 0.2rem;
	font-size: var(--zani-size-body) !important;
	line-height: 1.35;
}

/* Video grid layout and search box: plugin block styles
   (src/video-carousel-block/style.scss). */

footer.wp-block-template-part p.wp-block-paragraph {
	font-family: var(--zani-font-body);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3;
}

.fixed-category-title {
	font-family: var(--zani-font-heading);
	font-size: var(--zani-size-body);
	font-weight: 700;
}

@media (max-width: 782px) {
	.wp-block-post-content p,
	.wp-block-media-text__content p,
	.vc-gallery-item p {
		line-height: 1.35;
	}

	.wp-block-post-content p.wp-block-paragraph,
	.wp-block-media-text__content p {
		margin-block-start: 0.28rem !important;
	}
}

/* Creative / Experienced / Reliable-style bars (homepage + Stage Shows facts).
   Background padding on headings was content-box, so the colour ran into the
   next column and the label sat off the visual centre. Each bar opens a short
   description. */
.zani-traits {
	align-items: stretch;
	gap: 0.75rem;
}

.zani-traits > .wp-block-column {
	display: flex;
	align-items: stretch;
	margin: 0;
}

.zani-trait {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	background: var(--zani-trait, #f1eee9);
	color: var(--wp--preset--color--contrast, #191919);
}

.zani-trait--creative {
	--zani-trait: #f5b684;
}

.zani-trait--experienced {
	--zani-trait: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(76, 84, 81, 0.14);
}

.zani-trait--reliable {
	--zani-trait: #f1eee9;
}

.zani-trait summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	flex: 1 0 auto;
	/* Match the tallest label wrap (Stage Shows can need three lines). */
	min-height: calc(0.95rem * 2 + 1.15em * 3);
	margin: 0;
	padding: 0.95rem 2rem;
	list-style: none;
	cursor: pointer;
	text-align: center;
	font-family: var(--zani-font-heading);
	font-size: var(--zani-size-sub);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast, #191919);
}

.zani-trait[open] summary {
	flex: 0 0 auto;
}

.zani-trait summary::-webkit-details-marker {
	display: none;
}

.zani-trait summary::marker {
	content: "";
}

.zani-trait summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.95rem;
	width: 0.45rem;
	height: 0.45rem;
	margin-top: -0.35rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.zani-trait[open] summary::after {
	margin-top: -0.15rem;
	transform: rotate(225deg);
}

.zani-trait summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--zani-red, #c13303);
	outline-offset: -3px;
}

.zani-traits .zani-trait p,
.zani-traits .zani-trait p.wp-block-paragraph {
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 0 1rem 1rem;
	text-align: center;
	font-family: var(--zani-font-body);
	font-size: var(--zani-size-body);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast, #191919);
}

/* Mixed open/closed: keep closed bars at label height. All closed or all open:
   stretch so the three columns share one height. */
.zani-traits:has(.zani-trait[open]):has(.zani-trait:not([open])) {
	align-items: flex-start;
}

.zani-traits:has(.zani-trait[open]):has(.zani-trait:not([open])) > .wp-block-column {
	align-items: flex-start;
}

.zani-traits:has(.zani-trait[open]):has(.zani-trait:not([open])) .zani-trait {
	height: auto;
}

.zani-showreel-close {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

/* Homepage client columns. The rules live here because a style tag inside
   the page content was stripped on save and printed as text. */
.showcase-4col-wrapper {
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.showcase-4col-wrapper .showcase-4col-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
	box-sizing: border-box;
	padding: 24px;
	border-radius: 12px;
	background: transparent;
}

.showcase-4col-wrapper .column-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.showcase-4col-wrapper .fixed-category-title {
	flex-shrink: 0;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid #eaeaea;
	text-align: center;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.showcase-4col-wrapper .logo-viewport {
	position: relative;
	height: 380px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}

.showcase-4col-wrapper .vertical-track {
	display: flex;
	flex-direction: column;
}

.showcase-4col-wrapper .vertical-track.is-looping {
	animation: zani-scroll-vertical 20s linear infinite;
}

.showcase-4col-wrapper .scroll-set {
	display: flex;
	flex-direction: column;
	gap: 45px;
	padding-bottom: 45px;
}

.showcase-4col-wrapper .logo-item {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	height: 55px;
}

.showcase-4col-wrapper .logo-item img {
	width: auto;
	height: auto;
	max-width: 88%;
	max-height: 38px;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.showcase-4col-wrapper .logo-item.size-lg img {
	max-width: 95%;
	max-height: 48px;
}

.showcase-4col-wrapper .logo-item.size-sm img {
	max-height: 30px;
}

.showcase-4col-wrapper .logo-item img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

@keyframes zani-scroll-vertical {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(0, -50%, 0);
	}
}

@media (max-width: 900px) {
	.showcase-4col-wrapper .showcase-4col-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 550px) {
	.showcase-4col-wrapper .showcase-4col-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.showcase-4col-wrapper .vertical-track {
		animation: none;
	}

	.showcase-4col-wrapper .logo-viewport {
		height: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

.zani-testimonials {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.zani-testimonials .wp-block-quote {
	margin: 0;
	padding: 1.15rem 1.25rem 1rem;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(22, 22, 22, 0.12);
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.zani-testimonials .wp-block-quote p {
	margin: 0 0 0.85rem;
}

.zani-testimonials .wp-block-quote cite {
	display: block;
	font-style: normal;
}

.zani-testimonials__role,
.zani-testimonials__name {
	display: block;
}

.zani-testimonials__role {
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.82rem;
}

.zani-testimonials__name {
	margin-top: 0.2rem;
	font-weight: 500;
}

@media (max-width: 700px) {
	.zani-testimonials {
		grid-template-columns: 1fr;
	}
}