/**
 * Client notes of 8 and 9 October 2026 (TODOS.md, "Client notes, 8 Oct" / "9 Oct").
 * Page look only; the content changes are made by
 * `wp zani apply-client-notes` as normal blocks.
 * Loaded after zani-content.css, so equal selectors win here.
 */

/* ---------------------------------------------------------------- */
/* Homepage                                                          */
/* ---------------------------------------------------------------- */

/* Slogan under the video: Zani red, centred, same size, no box. */
body.home .wp-block-post-content p.animated-header-box.zani-hero-slogan {
	max-width: min(var(--zani-page-width), 100%) !important;
	margin: clamp(1.25rem, 2.5vw, 2rem) auto 0 !important;
	padding: 0 !important;
	background: none !important;
	color: var(--wp--preset--color--zani-red, #c13303) !important;
	font-size: var(--zani-size-h1) !important;
	line-height: 1.1;
	text-align: center !important;
}

body.home .wp-block-post-content p.zani-hero-slogan::after {
	content: none !important;
	animation: none !important;
}

/* Tagline H1 a little lower so it does not crowd the red slogan. */
body.home .wp-block-post-content .zani-hero-slogan ~ h1.zani-home-tagline,
body.home .wp-block-post-content h1.zani-home-tagline {
	margin-block-start: clamp(1rem, 2vw, 1.6rem) !important;
}

/* Section titles: same size as the slogan at each width (44px on a
   desktop, the slogan's phone size below 782px — a hard 44px overflows
   a phone). Trial for 11 Oct. */
body.home .wp-block-post-content .wp-block-heading.is-style-zani-section-title {
	margin-top: clamp(2.75rem, 5vw, 4.25rem) !important;
	margin-bottom: 0.9rem !important;
	font-size: var(--zani-size-h1) !important;
}

/* Creative / Experienced / Reliable: three red words, no boxes. */
.wp-block-group.zani-trait-words {
	gap: 0.5rem clamp(2rem, 7vw, 6rem) !important;
	margin-block: clamp(1.5rem, 3vw, 2.25rem) !important;
}

.wp-block-group.zani-trait-words > p.zani-trait-word {
	margin: 0 !important;
	font-family: var(--zani-font-heading) !important;
	font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
	font-style: italic;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--zani-red, #c13303) !important;
}

/* Client logo carousels: the original Custom HTML blocks (homepage and
   Contact "Regular Partners"), changed by CSS only.
   Black marks with their white insides kept (Swire, Porsche): greyscale and
   contrast, then multiply drops the logos' white boxes. The moving column
   is a compositing group of its own (animated transform, fade mask), so it
   carries the page colour itself, otherwise the white boxes show while it
   scrolls. */
.showcase-4col-wrapper .vertical-track,
.showcase-2col-wrapper .vertical-track,
.wp-block-custom-logo-showcase .zani-logo-grid {
	background: var(--wp--preset--color--base, #f8f7f5);
}

.showcase-4col-wrapper .logo-item img,
.showcase-4col-wrapper .logo-item img:hover,
.showcase-2col-wrapper .logo-item img,
.showcase-2col-wrapper .logo-item img:hover,
.zani-logo-grid__item img,
.wp-block-post-content .wp-block-gallery.zani-logo-gallery.has-nested-images figure.wp-block-image img {
	filter: grayscale(1) brightness(0.6) contrast(6) !important;
	mix-blend-mode: multiply;
	opacity: 1 !important;
}

/* Homepage: about 35% bigger (38 → 52px, large 48 → 64, small 30 → 40). */
.showcase-4col-wrapper .logo-item {
	height: 72px;
}

.showcase-4col-wrapper .logo-item img {
	max-width: 92%;
	max-height: 52px;
}

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

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

.showcase-4col-wrapper .scroll-set {
	gap: 40px;
	padding-bottom: 40px;
}

/* Contact Regular Partners: standing still. No scrolling, no fade, the
   script's looping copy hidden; each column's logos sit two across, so the
   block reads as a four-column grid (like the old site's Contact logos). */
.page-id-148 .showcase-2col-wrapper .logo-viewport {
	height: auto !important;
	overflow: visible;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

.page-id-148 .showcase-2col-wrapper .vertical-track {
	animation: none !important;
	transform: none !important;
	will-change: auto;
}

.page-id-148 .showcase-2col-wrapper .scroll-set[aria-hidden="true"] {
	display: none !important;
}

.page-id-148 .showcase-2col-wrapper .scroll-set {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 20px !important;
	padding-bottom: 28px !important;
}

@media (max-width: 781px) {
	.page-id-148 .showcase-2col-wrapper .scroll-set {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px !important;
		padding-bottom: 18px !important;
	}
}

/* Testimonials: the Quote Carousel block shows one quote at a time (layout
   in the block's own style). Here only the site's notes: the quote is the
   star (a bit bigger; not bold since 9 Oct); company line in normal case, bold, the same
   size as the name; name and title lined up at the bottom of the card,
   which is the same height for every quote. */
.zani-testimonials {
	margin-top: clamp(2rem, 4vw, 3rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.zani-testimonials .wp-block-quote p {
	font-size: clamp(1.25rem, 2.1vw, 1.6rem) !important;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast, #191919);
	margin-bottom: 1.4rem;
}

.zani-testimonials .wp-block-quote cite {
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(22, 22, 22, 0.1);
}

.zani-testimonials__role,
.zani-testimonials__name {
	font-size: var(--zani-size-body) !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.zani-testimonials__name {
	font-weight: 400 !important;
}

/* Our services: more room before each service title and between them. */
body.home .wp-block-group.zani-services > h2.wp-block-heading:not(.is-style-zani-section-title) {
	margin-top: clamp(3rem, 6vw, 4.75rem) !important;
}

body.home .wp-block-group.zani-services > .wp-block-heading.is-style-zani-section-title + h2.wp-block-heading {
	margin-top: 1.5rem !important;
}

body.home .wp-block-group.zani-services > .wp-block-buttons {
	margin-top: 1.25rem !important;
}

/* Our services: more room between the three services. */
body.home .wp-block-group.zani-services > .wp-block-media-text {
	margin-block: clamp(2.25rem, 4.5vw, 3.75rem) !important;
}

body.home .wp-block-group.zani-services .wp-block-media-text__content > :first-child {
	margin-top: 0 !important;
}

body.home .wp-block-group.zani-services .wp-block-buttons {
	margin-top: 1.1rem !important;
}

/* Press review strip sits close to its title. */
body.home .wp-block-custom-logo-showcase.zani-strip {
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------- */
/* Interior pages: title a little lower, closer to the photo         */
/* ---------------------------------------------------------------- */

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

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

}

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

/* Section titles moved beside their photo (HK Acts, Music). */
body:not(.home) .wp-block-media-text.is-style-zani-half .wp-block-media-text__content > h2.wp-block-heading {
	margin-bottom: 0.6rem;
}

/* More room between rows, and before the centred Contact us button. */
body:not(.home) .wp-block-post-content > .wp-block-media-text.is-style-zani-half {
	margin-block: clamp(2.5rem, 4.5vw, 3.5rem) !important;
}

/* ---------------------------------------------------------------- */
/* Artists Agency                                                    */
/* ---------------------------------------------------------------- */

/* Same, slightly larger gap before every section. */
.page-id-6 .wp-block-post-content > p.zani-section-short {
	margin-block-start: 5rem !important;
}

.page-id-6 .wp-block-post-content > .wp-block-buttons:not(:last-child) {
	margin-block-start: 1.5rem !important;
	margin-block-end: 0 !important;
}

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

/* Page title (H1) under the photo, the same gap as CONTACT US → photo. */
.page-id-148 .wp-block-post-content > .wp-block-post-title.zani-page-subtitle {
	box-sizing: border-box;
	width: auto;
	max-width: min(46rem, 100%) !important;
	margin-inline: auto !important;
	margin-bottom: 0 !important;
	font-family: var(--zani-font-heading);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast, #191919);
	text-align: center;
	text-wrap: balance;
}

.page-id-148 .wp-block-post-content > .wp-block-post-title.zani-page-subtitle::after {
	content: none;
}

/* The intro line above the form is gone; the form itself keeps clear of
   the magician's face, and the privacy note sits right under it. */
.page-id-148 .zani-contact-hero > p.wp-block-paragraph:first-of-type {
	margin-top: 1rem !important;
}

.page-id-148 .zani-contact-hero.wp-block-group > .wpcf7 {
	margin-top: 19rem !important;
}

/* Form on the photo, see-through (desktop). Labels white on the photo. */
@media (min-width: 782px) {
	.page-id-148 .zani-contact-hero.wp-block-group > .wpcf7 {
		background: rgba(0, 0, 0, 0.18);
		border-color: rgba(255, 255, 255, 0.35);
		box-shadow: none;
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}

	.page-id-148 .zani-contact-hero .wpcf7 label {
		color: #fff;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	}

	.page-id-148 .zani-contact-hero .wpcf7 input:not([type="submit"]),
	.page-id-148 .zani-contact-hero .wpcf7 textarea {
		background: rgba(255, 255, 255, 0.92);
		text-shadow: none;
	}
}

@media (max-width: 781px) {
	.page-id-148 .zani-contact-hero.wp-block-group > .wpcf7 {
		margin-top: 1.35rem !important;
	}

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

/* About Us: centred, same title style as Our services. The space above
   is the section's own top margin (1 unit, block Dimensions). */
.page-id-148 .wp-block-post-content .wp-block-heading.is-style-zani-section-title {
	margin-top: 0 !important;
	text-align: center !important;
}

.page-id-148 .wp-block-post-content .wp-block-heading.is-style-zani-section-title::after {
	margin-left: auto;
	margin-right: auto;
	transform-origin: center center;
}

/* ---------------------------------------------------------------- */
/* Footer (same on every page)                                       */
/* ---------------------------------------------------------------- */

footer.wp-block-template-part .wp-block-navigation .wp-block-navigation__container {
	row-gap: 0.35rem;
}

footer.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content {
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
}

footer.wp-block-template-part .wp-block-group.is-content-justification-center > p.wp-block-paragraph,
footer.wp-block-template-part p.wp-block-paragraph {
	text-align: center;
}

/* Page arrows under the footer menu, on computers and phones.
   The homepage is not in the menu, so it has no previous or next. */
.zani-footer-page-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.75rem;
	margin-top: 0.35rem;
}

/* ---------------------------------------------------------------- */
/* Photo cards and photo rows (Columns with the class               */
/* "zani-photo-grid" or "zani-photo-row")                           */
/* ---------------------------------------------------------------- */

/* Cards: photo on top in its own shape, title and copy under it. */
.wp-block-post-content .wp-block-columns.zani-photo-grid {
	align-items: flex-start;
	gap: 1.5rem;
	margin-block: 1.25rem 2rem;
}

.wp-block-post-content .wp-block-columns.zani-photo-grid > .wp-block-column > * {
	margin-block: 0 0.5rem;
}

.wp-block-post-content .wp-block-columns.zani-photo-grid > .wp-block-column > h3.wp-block-heading {
	margin-top: 0.85rem;
	font-size: 1.05rem;
}

.wp-block-post-content :is(.zani-photo-grid, .zani-photo-row) figure.wp-block-image img {
	width: 100%;
	height: auto;
}

/* Phones: two cards a row instead of one very tall column. */
@media (max-width: 781px) {
	.wp-block-post-content .wp-block-columns.zani-photo-grid:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
		gap: 1rem;
	}

	.wp-block-post-content .wp-block-columns.zani-photo-grid:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - 0.5rem) !important;
		flex-grow: 0;
	}
}

/* Photo beside its title and copy, like "Half-width photo". */
.wp-block-post-content .wp-block-columns.zani-photo-row {
	align-items: flex-start;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-block: clamp(2.5rem, 4.5vw, 3.5rem);
}

.wp-block-post-content .wp-block-columns.zani-photo-row > .wp-block-column > :first-child {
	margin-top: 0;
}

/* Two photos side by side (Columns "zani-photo-pair", Christmas Shows):
   each Image block has its own frame (aspect ratio + cover in its
   settings) and each column is as wide as its frame, so both photos are
   the same height. Each photo's title and description are its caption,
   hidden on the page and shown in the lightbox like every other photo
   (zani-content.css, zani-gallery-fit.js). The columns stack on phones
   (core Columns). */
.wp-block-post-content .wp-block-columns.zani-photo-pair {
	align-items: flex-start;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-block: 1.25rem 2rem;
}

.wp-block-post-content .wp-block-columns.zani-photo-pair > .wp-block-column > * {
	margin-block: 0;
}

.wp-block-post-content .zani-photo-pair figure.wp-block-image img {
	width: 100%;
	height: auto;
}

/* A half-width row whose copy goes on under the photo: the rest of the
   copy follows straight on, full width, as part of the same section. */
body:not(.home) .wp-block-post-content > .wp-block-media-text.is-style-zani-half:has(+ p) {
	margin-bottom: 1.1rem !important;
}

/* Mascots page gallery (Gallery "zani-mascot-photos"): six photos in the
   same portrait frame (each Image block's aspect ratio + cover), three a
   row, two a row on phones (core Gallery). Captions are lightbox only. */
.wp-block-post-content .wp-block-gallery.zani-mascot-photos {
	margin-block: 1.25rem 2.5rem;
}

/* A photo's crop moved off the centre, towards its subject: add the
   class "zani-crop-left" or "zani-crop-right" to the Image block
   (Advanced > Additional CSS class). */
.wp-block-post-content figure.wp-block-image.zani-crop-left img,
.wp-block-post-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image.zani-crop-left img {
	object-position: 12% 50%;
}

.wp-block-post-content figure.wp-block-image.zani-crop-right img,
.wp-block-post-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image.zani-crop-right img {
	object-position: 68% 50%;
}

/* ---------------------------------------------------------------- */
/* Client notes, 9 Oct                                               */
/* ---------------------------------------------------------------- */

/* Homepage rhythm: one spacing unit ("1 unit", 3.5rem ≈ 56px) between the
   blocks of the page, two around the closing call to action. Both are
   spacing presets (Styles → Layout / block Dimensions), so changing the
   preset changes the whole page. Vertical margins of neighbouring blocks
   overlap, so a block given one unit above and below sits exactly one
   unit from its neighbours. */
body.home {
	--zani-u: var(--wp--preset--spacing--zani-1, 3.5rem);
	--zani-u2: var(--wp--preset--spacing--zani-2, 7rem);
}

/* Slogan under the video, lined up with the heading below it (same
   column, left), with Watch More at the end of its last line. On phones
   the button drops under the slogan. */
body.home .wp-block-post-content > .wp-block-group.zani-hero-row {
	box-sizing: border-box;
	width: 100%;
	max-width: min(var(--zani-page-width), 100%) !important;
	margin: var(--zani-u) auto 0 !important;
	gap: 1rem 2rem;
	align-items: flex-end;
}

body.home .wp-block-post-content .zani-hero-row > p.animated-header-box.zani-hero-slogan {
	flex: 1 1 auto;
	width: auto;
	max-width: 100% !important;
	margin: 0 !important;
	text-align: left !important;
}

body.home .wp-block-post-content .zani-hero-row > .wp-block-buttons {
	flex: 0 0 auto;
	margin: 0 0 0.3em !important;
}

body.home .wp-block-post-content .zani-hero-row .wp-block-button__link:hover,
body.home .wp-block-post-content .zani-hero-row .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--contrast, #191919) !important;
	color: #fff !important;
}

/* HONG KONG BEST EVENTS AGENCY…: centred between slogan and separator. */
body.home .wp-block-post-content > .wp-block-group.alignfull:has(> h1.zani-home-tagline) {
	margin-block: var(--zani-u) !important;
	padding-block: 0 !important;
}

body.home .wp-block-post-content .wp-block-group > h1.zani-home-tagline {
	margin-block: 0 !important;
}

/* Separators: one unit above and below; whatever follows starts right
   there (its own top margin, and its first child's, set to zero). */
body.home .wp-block-post-content hr.wp-block-separator {
	margin-block: var(--zani-u) !important;
}

body.home .wp-block-post-content hr.wp-block-separator + *,
body.home .wp-block-post-content hr.wp-block-separator + .wp-block-group > :first-child,
body.home .wp-block-post-content hr.wp-block-separator + .wp-block-heading.is-style-zani-section-title,
body.home .wp-block-post-content hr.wp-block-separator + .wp-block-group > .wp-block-heading.is-style-zani-section-title:first-child,
body.home .wp-block-post-content .wp-block-group:has(> hr.wp-block-separator:last-child) + *,
body.home .wp-block-post-content .wp-block-group:has(> hr.wp-block-separator:last-child) + .wp-block-group > .wp-block-heading.is-style-zani-section-title:first-child {
	margin-block-start: 0 !important;
}

/* Creative / Reliable / Experienced: one unit from the text above and the
   separator below. */
body.home .wp-block-post-content .wp-block-group.zani-trait-words {
	margin-block: var(--zani-u) !important;
}

/* Our services: one unit between a section's button and the next title. */
body.home .wp-block-group.zani-services > h2.wp-block-heading:not(.is-style-zani-section-title) {
	margin-top: var(--zani-u) !important;
}

/* Looking forward to working with you / Get in touch: two units above and
   below. */
body.home .wp-block-post-content > .wp-block-group.alignfull:last-child,
body.home .wp-block-post-content > .wp-block-group.alignfull:has(> .wp-block-group > h2 + .wp-block-buttons) {
	margin-block: 0 !important;
	padding-block: var(--zani-u2) !important;
}

body.home .wp-block-post-content > .wp-block-group.alignfull:has(> .wp-block-group > h2 + .wp-block-buttons) + *,
body.home .wp-block-post-content > .wp-block-group:has(+ .wp-block-group.alignfull > .wp-block-group > h2 + .wp-block-buttons),
body.home .wp-block-post-content > .wp-block-group:has(+ .wp-block-group.alignfull > .wp-block-group > h2 + .wp-block-buttons) > :last-child {
	margin-block-end: 0 !important;
}

body.home .wp-block-post-content > .wp-block-group.alignfull:has(> .wp-block-group > h2 + .wp-block-buttons) > .wp-block-group > h2:first-child {
	margin-block-start: 0 !important;
}

body.home .wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Emcee hero (and any "zani-hero-art" hero): the whole photo, never
   cropped, so the face always shows. Wide photo on computers, the taller
   one on phones and tablets (picked by the browser). An Image block hero
   with the class "zani-hero-full" (Safety First!) is also shown whole on
   phones. */
body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.zani-hero-art img {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 420px;
	object-fit: contain;
}

@media (min-width: 782px) {
	body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.zani-hero-art img {
		height: auto !important;
	}
}

@media (max-width: 781px) {
	/* Doubled class: must beat the cropped first-photo rule
	   (…alignwide:first-of-type img, 229px tall, cover). */
	body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.zani-hero-art.zani-hero-art img,
	body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.zani-hero-full.zani-hero-full img {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		object-fit: contain;
	}
}

/* A video opened from the site search (?video=…) is outlined in red. */
.wp-block-custom-video-carousel .vc-is-target {
	outline: 3px solid var(--wp--preset--color--zani-red, #c13303);
	outline-offset: 3px;
}

/* Site search: matching videos above the page results. */
.zani-video-results {
	margin-block: var(--wp--preset--spacing--zani-1, 3.5rem);
}

.zani-video-results__title {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--large, 1.4rem);
}

.zani-video-results__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
	gap: 1.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zani-video-results__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	color: var(--wp--preset--color--contrast, #191919);
	text-decoration: none;
}

.zani-video-results__thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
}

.zani-video-results__name {
	font-weight: 700;
	font-size: var(--zani-size-body, 0.9375rem);
	line-height: 1.3;
}

.zani-video-results__page {
	font-size: 0.8125rem;
	line-height: 1.3;
}

.zani-video-results__link:hover .zani-video-results__name,
.zani-video-results__link:focus-visible .zani-video-results__name {
	color: var(--wp--preset--color--zani-red, #c13303);
	text-decoration: underline;
}

.zani-search-excerpt p {
	margin: 0.5rem 0 0;
	font-size: var(--zani-size-body, 0.9375rem);
}

/* Cover backgrounds (the homepage video) always fill the cover, whatever
   the page column rule above says about the cover's other children. */
main .wp-block-cover.is-layout-constrained:not(.zani-contact-hero) > :is(video.wp-block-cover__video-background, img.wp-block-cover__image-background):not(.alignleft):not(.alignright):not(.alignfull):not(.zani-inline-video) {
	max-width: none !important;
	margin: 0 !important;
}

/* ---------------------------------------------------------------- */
/* Client notes, 9 Oct (Contact)                                     */
/* ---------------------------------------------------------------- */

/* Font size presets win over the theme's default heading sizes, so the
   size picked in the block's Typography panel is the size shown. */
.wp-block-post-content .wp-block-heading.has-zani-subheading-font-size {
	font-size: var(--wp--preset--font-size--zani-subheading) !important;
	line-height: 1.2;
}

.wp-block-post-content .wp-block-heading.has-zani-heading-font-size,
.wp-block-post-content .wp-block-post-title.has-zani-heading-font-size {
	font-size: var(--wp--preset--font-size--zani-heading) !important;
	line-height: 1.2;
}

/* Lead: 17px, one pixel less on phones (as the homepage chapeaux). */
.wp-block-post-content .wp-block-heading.has-lead-font-size,
.wp-block-post-content p.has-lead-font-size {
	font-size: var(--zani-size-lead) !important;
	line-height: 1.4;
}

/* Contact: no red bar under CONTACT US (it now sits above the closing
   sentence, lower down). */
.page-id-148 .zani-page-title > .wp-block-post-title::after {
	content: none;
}

/* CONTACT US → photo: exactly the photo's 1-unit top margin. */
.page-id-148 .zani-page-title {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.page-id-148 .wp-block-post-content:has(> .zani-contact-hero:first-child) {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Contact rhythm: each section's top margin is 1 unit (block Dimensions,
   spacing preset "1 unit"); nothing inside adds to it. */
.page-id-148 .wp-block-post-content > .wp-block-group:not(.zani-contact-hero) {
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.page-id-148 .wp-block-post-content > .wp-block-group:not(.zani-contact-hero) > :first-child {
	margin-top: 0 !important;
}

.page-id-148 .wp-block-post-content > .wp-block-group:not(.zani-contact-hero) > :last-child {
	margin-bottom: 0 !important;
}

.page-id-148 .zani-contact-closing > .wp-block-separator.is-style-zani-short + p {
	margin-top: 1rem !important;
}

/* ---------------------------------------------------------------- */
/* Phones (mobile check, 9 Oct)                                      */
/* ---------------------------------------------------------------- */

/* Narrower white margins on phones: the page padding drops to 16px and
   the content column fills it, so photos, carousels and galleries are
   nearly full width and text keeps 16px each side. */
@media (max-width: 600px) {
	html body {
		--wp--style--root--padding-left: 1rem;
		--wp--style--root--padding-right: 1rem;
		--zani-page-width: 100vw;
	}
}

/* Menu button: 44px tap targets for open and close (the icons stay 24px). */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* The menu overlay focuses its first link when it opens; on touch that
   drew a black box round the logo. Keyboard focus still shows. */
.wp-block-navigation__responsive-container :focus:not(:focus-visible) {
	outline: none;
}

@media (max-width: 781px) {
	/* Previous / next arrows by the page title: 44px tall tap targets. */
	.zani-page-title__prev,
	.zani-page-title__next {
		min-height: 44px;
		min-width: 44px;
	}

	/* Form fields at 16px: smaller text makes iPhones zoom in on focus. */
	body .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
	body .wpcf7 textarea,
	body .wpcf7 select,
	body .wp-block-search__input {
		font-size: 16px !important;
	}
}

/* Homepage on phones: no Watch More (it stays on computers), and the
   slogan sits over the bottom of the hero video, readable through a
   text shadow (no band). zani-phone.js measures the slogan row; without
   it the slogan stays under the video. */
@media (max-width: 600px) {
	body.home .wp-block-post-content .zani-hero-row > .wp-block-buttons {
		display: none !important;
	}

	body.home.zani-hero-row-measured .wp-block-post-content > .wp-block-cover + .wp-block-group.zani-hero-row {
		position: relative;
		z-index: 2;
		margin-top: calc(-1 * var(--zani-hero-row-h, 0px) - 1rem) !important;
		margin-bottom: 1rem !important;
		pointer-events: none;
	}

	body.home.zani-hero-row-measured .wp-block-post-content .zani-hero-row > p.animated-header-box.zani-hero-slogan {
		text-shadow: 0 0 2px rgba(0, 0, 0, 0.95), 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.8), 0 0 34px rgba(0, 0, 0, 0.55);
	}
}

/* Footer menu on phones: the five main links only (the sub-menus are in
   the menu at the top), without the tiny sub-menu arrows. */
@media (max-width: 781px) {
	footer.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-icon,
	footer.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container {
		display: none !important;
	}

	footer.wp-block-template-part .wp-block-navigation .wp-block-navigation__container {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	footer.wp-block-template-part .wp-block-navigation .wp-block-navigation-item {
		width: 100%;
		justify-content: center;
	}

	footer.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}

	/* Same red arrows as the page title, under the stacked menu. */
	.zani-footer-page-nav {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.75rem;
		margin-top: 0.35rem;
	}
}

/* Header search button: 44px tap target like the menu button. */
header.wp-block-template-part .zani-menu-search {
	min-width: 44px;
	min-height: 44px;
}

/* ---------------------------------------------------------------- */
/* Client notes, 9 Oct (inner pages)                                 */
/* ---------------------------------------------------------------- */

/* Separators between sections: their own margins (1 unit above and
   below, set in the block) are the whole gap, so the line is centred. */
body .wp-block-post-content.is-layout-constrained > hr.wp-block-separator + * {
	margin-block-start: 0 !important;
}

body .wp-block-post-content.is-layout-constrained > *:has(+ hr.wp-block-separator) {
	margin-block-end: 0 !important;
}

/* Red line under section titles: as wide as the title text. */
body:not(.home):not(.page-id-148) .wp-block-post-content h2.wp-block-heading {
	width: fit-content !important;
	max-width: min(var(--zani-page-width), 100%);
}

body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > h2.wp-block-heading:not(.alignwide):not(.alignfull):not(.has-text-align-center) {
	margin-left: max(0px, calc((100% - min(var(--zani-page-width), 100%)) / 2)) !important;
	margin-right: auto !important;
}

body:not(.home):not(.page-id-148) .wp-block-post-content h2.wp-block-heading.has-text-align-center {
	margin-left: auto !important;
	margin-right: auto !important;
}

body:not(.home):not(.page-id-148) .wp-block-post-content h2.wp-block-heading::after {
	width: var(--zani-h2-text-w, 100%);
	max-width: 100%;
}

/* Roving characters hub on phones: section photos full column width. */
@media (max-width: 600px) {
	.page-id-7 .wp-block-post-content .wp-block-image a.zani-section-link img {
		max-height: none;
		width: 100%;
		height: auto;
	}
}

/* A top photo shown whole, full column width. One class is enough:
   alignwide and :first-of-type keep this ahead of the 420px hero cap. */
body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide.zani-hero-uncapped:first-of-type img {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
}

/* Hub pages: the closing Contact us follows its block setting (centred);
   the section buttons above stay on the left with the copy. */
:is(.page-id-6, .page-id-7, .page-id-8, .page-id-9) .wp-block-post-content > .wp-block-buttons.is-content-justification-center:last-child {
	justify-content: center;
}

/* ---------------------------------------------------------------- */
/* Spacing system (10 Oct): the same gaps on every page              */
/* ---------------------------------------------------------------- */
/* One value per kind of gap, on every page (the homepage hero and the
   Contact page hero keep their own design).
   - 1 unit (spacing preset "zani-1", 56px): around separators and before
     the bottom Contact us — both set in the block's Dimensions panel —
     and from the last block to the footer (here).
   - 2 units ("zani-2"): around Looking forward / Get in touch (homepage).
   - Title: 28px under the page title (20px on phones).
   - Tight, 8px: from the subtitle (H1) to the first block.
   - Small, 12px: from a section title to what follows it, and from a
     photo to the text under it. */
body {
	--zani-u: var(--wp--preset--spacing--zani-1, 3.5rem);
	--zani-u2: var(--wp--preset--spacing--zani-2, 7rem);
	--zani-gap-title: 28px;
	--zani-gap-tight: 8px;
	--zani-gap-small: 12px;
}

@media (max-width: 781px) {
	body {
		--zani-gap-title: 20px;
	}
}

/* Page title → subtitle (H1) → first block. */
body:not(.home):not(.page-id-148) :is(.zani-page-title, h3.wp-block-post-title) + .wp-block-heading.zani-page-subtitle {
	margin-top: var(--zani-gap-title) !important;
	margin-bottom: var(--zani-gap-tight) !important;
}

body:not(.home):not(.page-id-148) .wp-block-post-content {
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
}

body:not(.home):not(.page-id-148) .wp-block-post-content > :first-child {
	margin-block-start: 0 !important;
}

/* Section title → its photo or text. */
body:not(.home) .wp-block-post-content h2.wp-block-heading + *,
body.home .wp-block-post-content h2.wp-block-heading + :not(.wp-block-buttons) {
	margin-block-start: var(--zani-gap-small) !important;
}

body:not(.home) .wp-block-post-content h2.wp-block-heading:has(+ *),
body.home .wp-block-post-content h2.wp-block-heading:has(+ :not(.wp-block-buttons)),
body.home .wp-block-group.zani-services > h2.wp-block-heading.wp-block-heading:not(.is-style-zani-section-title):has(+ *) {
	margin-block-end: 0 !important;
}

/* Top photo → whatever follows it. */
body:not(.home):not(.page-id-148) .wp-block-post-content > :first-child:is(.wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-video, .wp-block-cover) + * {
	margin-block-start: var(--zani-gap-small) !important;
}

/* Pages without a subtitle: the title gap, then the content. */
body:not(.home):not(.page-id-148) :is(.zani-page-title, h3.wp-block-post-title, h1.wp-block-post-title) + .wp-block-post-content.wp-block-post-content {
	margin-block-start: var(--zani-gap-title) !important;
}

/* Photo → the text under it. */
body:not(.home) .wp-block-post-content :is(.wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-video, .wp-block-cover) + :is(p, h3, h4, ul, ol) {
	margin-block-start: var(--zani-gap-small) !important;
}

/* Last block → footer: 1 unit, whatever the template adds. */
body:not(.home) main.wp-block-group,
body:not(.home) main.wp-block-group > .wp-block-group {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

body:not(.home) .wp-block-post-content,
body:not(.home) .wp-block-post-content > :last-child {
	margin-block-end: 0 !important;
	padding-block-end: 0 !important;
}

body:not(.home) .wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: var(--zani-u) !important;
}

/* Stage Shows facts: frame thickness matches the 4px red heading line. */
.page-id-8 .zani-traits .zani-trait,
.page-id-8 .zani-traits .zani-trait--creative,
.page-id-8 .zani-traits .zani-trait--experienced,
.page-id-8 .zani-traits .zani-trait--reliable {
	background: transparent;
	box-shadow: none;
	border: 4px solid var(--wp--preset--color--zani-red, #c13303);
}

/* Music: the long intro heading is not a section title. Its red bar was a
   second line under the photo, after the bar under MUSICIANS & DJ. */
.page-id-57 .wp-block-post-content > .wp-block-image + h2.wp-block-heading::after {
	content: none;
}

/* Homepage quotes on phones: the active quote sits in the middle. */
@media (max-width: 700px) {
	body.home .wp-block-custom-quote-carousel.zani-quote-carousel.is-ready {
		--zani-qc-card: 86%;
	}

	body.home .wp-block-custom-quote-carousel.zani-quote-carousel.is-ready .zani-quote-carousel__track::before {
		display: block;
		flex: 0 0 calc((100% - var(--zani-qc-card)) / 2 - var(--zani-qc-gap));
	}

	body.home .wp-block-custom-quote-carousel.zani-quote-carousel.is-ready .zani-quote-carousel__track::after {
		flex-basis: calc((100% - var(--zani-qc-card)) / 2 - var(--zani-qc-gap));
	}
}

/* Centred show videos. One more class than the left-aligned inline video. */
main .wp-block-post-content.is-layout-constrained > .wp-block-embed.zani-inline-video.zani-embed-center {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Flame photo on Stage Shows, sitting on the left of the column. */
.wp-block-image.zani-photo-left {
	display: flex;
	justify-content: flex-start;
}

.wp-block-image.zani-photo-left img {
	width: auto;
	max-width: 100%;
	max-height: 420px;
	object-fit: contain;
	object-position: left center;
}

/* Corporate events: a little more space between paragraphs. */
.page-id-315 .wp-block-post-content p.wp-block-paragraph {
	margin-block-start: 1.05rem !important;
}

/* An uncapped hero stays whole on phones (beats the cover crop). */
@media (max-width: 781px) {
	body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide.zani-hero-uncapped:first-of-type {
		overflow: visible;
		width: auto !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide.zani-hero-uncapped:first-of-type img {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		object-fit: contain !important;
		aspect-ratio: auto !important;
	}

	/* Roving first photos: taller frame, sides cropped, head and body kept.
	   One more class than the uncapped "show the whole photo" rule. */
	body.zani-roving:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide.zani-hero-uncapped:first-of-type {
		overflow: hidden;
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		aspect-ratio: 4 / 5;
	}

	body.zani-roving:not(.home):not(.page-id-148) .wp-block-post-content.is-layout-constrained > .wp-block-image.alignwide.zani-hero-uncapped:first-of-type img {
		width: 100% !important;
		height: 100% !important;
		max-height: none !important;
		object-fit: cover !important;
		object-position: center top !important;
		aspect-ratio: auto !important;
	}

	/* Christmas galleries: one photo per row, edge to edge, so they read larger.
	   The column rule caps galleries at the text width; this one is more specific. */
	body.page-id-564 main .wp-block-post-content.is-layout-constrained > .wp-block-gallery.zani-gallery-fit.has-nested-images {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}

	/* Marketing video: the column inset made it a bit small. */
	.page-id-316 main .wp-block-post-content.is-layout-constrained > .wp-block-embed.zani-inline-video.zani-embed-center {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
}

/* Party Entertainment: hover shows the photo large, without a click.
   The overlay does not take the pointer, so the thumbnail still
   receives the click that opens the lightbox. */
.zani-party-zoom {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(17, 17, 17, 0.55);
	pointer-events: none;
}

.zani-party-zoom.is-on {
	display: flex;
}

.zani-party-zoom img {
	width: auto;
	height: auto;
	max-width: min(92vw, 1400px);
	max-height: 88vh;
	object-fit: contain;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
	.zani-party-zoom {
		display: none !important;
	}
}

/* ---------------------------------------------------------------- */
/* Client notes, 11 Oct                                              */
/* ---------------------------------------------------------------- */

/* Short banner a little higher off the long title, and a gap between
   the words of a multi-word label (Hong Kong Acts, Christmas Shows). */
body:not(.home) .zani-page-title {
	padding-bottom: 1.65rem;
}

body:not(.home) h3.wp-block-post-title {
	word-spacing: 0.16em;
}

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

/* Testimonials: the sentence stays the normal ink. Only the quotation
   marks are Zani red. */
.home .zani-quote-carousel .wp-block-quote,
.home .zani-quote-carousel .wp-block-quote p,
.home .zani-quote-carousel cite,
.home .zani-quote-carousel .zani-testimonials__name,
.home .zani-quote-carousel .zani-testimonials__role {
	color: #191919;
}

.home .zani-quote-carousel .zani-quote-mark {
	color: #c13303;
}

/* Contact: enquiry line 17px Droid, ABOUT US 30px, closing lines 18px. */
.page-id-148 .wp-block-post-content h2.has-droid-sans-font-family {
	font-family: var(--zani-font-body) !important;
	font-size: 1.0625rem !important;
	font-weight: 700;
	line-height: 1.4;
}

.page-id-148 .wp-block-post-content h2.is-style-zani-section-title.has-zani-heading-font-size,
.page-id-148 .wp-block-post-content h2.has-zani-heading-font-size {
	font-size: 1.875rem !important;
}

.page-id-148 .zani-contact-18 {
	font-family: var(--zani-font-body);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast, #191919);
}

.page-id-148 .zani-contact-18-red {
	color: var(--wp--preset--color--zani-red, #c13303) !important;
}

/* Classical harp: crop the top, keep the instrument. */
.wp-block-media-text.zani-crop-top .wp-block-media-text__media {
	overflow: hidden;
	max-height: 420px;
}

.wp-block-media-text.zani-crop-top .wp-block-media-text__media img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	object-position: center bottom;
}

/* Models on a phone: the three section titles sit above their photos. */
@media (max-width: 600px) {
	.page-id-306 .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 1;
	}

	.page-id-306 .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 2;
	}
}

/* Giant Smiley on a computer: no "VIDEOS" heading and no captions.
   The phone keeps both. The carousel uses the page column, like the
   large Fire and Safety videos. */
@media (min-width: 782px) {
	.page-id-311 .wp-block-post-content > h2.wp-block-heading:has(+ .wp-block-custom-video-carousel) {
		display: none;
	}

	.page-id-311 .wp-block-post-content > .wp-block-custom-video-carousel ~ p.wp-block-paragraph {
		display: none;
	}
}

.page-id-311 .wp-block-post-content > .wp-block-custom-video-carousel {
	width: min(var(--zani-page-width), 100%);
	max-width: var(--zani-page-width);
	margin-left: auto;
	margin-right: auto;
}

/* Lightbox previous/next. Core draws them with no background, and on a
   phone they sit on the bottom edge. A red circle keeps them visible
   and gives a 48px tap target. The close button is unchanged. */
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50%;
	background: #c13303 !important;
	color: #fff !important;
	fill: #fff !important;
	z-index: 2000004;
}

.wp-lightbox-overlay .wp-lightbox-navigation-button-prev[hidden],
.wp-lightbox-overlay .wp-lightbox-navigation-button-next[hidden] {
	display: none !important;
}

.wp-lightbox-overlay .wp-lightbox-navigation-button-prev svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev path,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next path {
	fill: #fff !important;
	color: #fff !important;
	width: 28px;
	height: 28px;
}

@media (max-width: 599px) {
	.wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
		left: max(8px, env(safe-area-inset-left)) !important;
	}

	.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
		right: max(8px, env(safe-area-inset-right)) !important;
	}
}